body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);margin:0;padding:20px;min-height:100vh;color:#333}.container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start}.clock-container{background:#fffffff2;padding:30px;border-radius:15px;box-shadow:0 8px 32px #0000001a;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.clock-container h1{margin:0 0 20px;color:#2c3e50;font-size:24px}.clock{font-size:48px;color:#2c3e50;margin-bottom:20px;font-weight:700;font-family:Courier New,monospace}.status{padding:15px;border-radius:10px;font-weight:700;transition:all .3s ease}.status.available{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.status.unavailable{background:linear-gradient(135deg,#f44336,#da190b);color:#fff}.status-text{font-size:18px;margin-bottom:5px}.status-detail{font-size:14px;opacity:.9}.schedule-container{background:#fffffff2;padding:30px;border-radius:15px;box-shadow:0 8px 32px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.schedule-container h2{margin:0 0 15px;color:#2c3e50;font-size:24px}.schedule-info{background:#e8f4fd;padding:15px;border-radius:8px;margin-bottom:20px;border-left:4px solid #2196F3}.schedule-info p{margin:0;color:#1976d2;font-weight:500}.schedule-list{display:grid;gap:10px}.schedule-item{padding:15px;border-radius:8px;border:2px solid #e0e0e0;background:#fafafa;transition:all .3s ease;display:grid;grid-template-columns:120px 1fr 100px;gap:15px;align-items:center}.schedule-item.active{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border-color:#4caf50;transform:scale(1.02);box-shadow:0 4px 15px #4caf504d}.schedule-item.past{background:#f5f5f5;color:#888;opacity:.7}.period-date{font-size:14px;font-weight:500}.period-time{font-size:16px;font-weight:700;font-family:Courier New,monospace}.period-status{font-size:12px;text-align:right;font-weight:700;text-transform:uppercase}@media(max-width:768px){.container{grid-template-columns:1fr;gap:20px}.clock{font-size:36px}.schedule-item{grid-template-columns:1fr;gap:8px;text-align:center}.period-status{text-align:center}}