body { font-family: system-ui, sans-serif; background:#a2f9ff; color:#eee; margin:0; display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; box-sizing:border-box; }
.card { background:#1e1e1e; padding:2rem 2.5rem; border-radius:16px; box-shadow:0 10px 30px -10px #000; width:100%; max-width:600px; box-sizing:border-box; }
h1 { font-size:1.4rem; margin-top:0; text-align: center;}
button { cursor:pointer; font-size:1rem; font-weight:600; padding:0.9rem 1.2rem; border-radius:10px; border:2px solid #444; background:#222; color:#eee; transition:.2s; min-width:140px; }
button.primary { background:#0d6efd; border-color:#0d6efd; }
button.danger { background:#bb2124; border-color:#bb2124; }
button:hover { filter:brightness(1.1); }
.actions { display:flex; gap:1rem; flex-wrap:wrap; justify-content: center;}
form { display:grid; gap:0.8rem; }
input { padding:0.7rem 0.9rem; border-radius:8px; border:1px solid #444; background:#222; color:#eee; }
small { opacity:0.7; }
a { color:#0d6efd; }
.status { margin-top:1rem; min-height:1.2rem; font-size:0.9rem; }
header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; justify-content: center;}
.logout-btn { background:#444; border-color:#555; }
.schedule-toggle { transition: all 0.2s ease; }
.schedule-toggle:hover { background:#444; }
.scheduling-section select, .scheduling-section input[type="time"] { 
    font-family: system-ui, sans-serif; 
}
.scheduling-section h3 { 
    color: #ddd; 
    font-weight: 500; 
}
.lights-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
}
.light-card {
    background:#252525;
    border:1px solid #363636;
    border-radius:14px;
    padding:1rem;
}
.light-card h2 {
    margin:0 0 0.8rem 0;
    font-size:1rem;
    text-align:center;
}
.light-card .actions {
    margin-bottom:0.75rem;
}
.light-card .actions button {
    flex:1;
    min-width:0;
}
.light-state {
    margin-top:8px;
    font-size:15px;
    text-align:center;
    display:flex;
    gap:6px;
    justify-content:center;
    align-items:center;
}
.schedule-target-badge {
    display:inline-block;
    margin-bottom:0.35rem;
    padding:0.18rem 0.5rem;
    border-radius:999px;
    background:#0d6efd33;
    color:#9fccff;
    font-size:0.72rem;
    font-weight:600;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    body { padding: 0.5rem; }
    .card { padding: 1.5rem 1rem; max-width: 100%; }
    h1 { font-size: 1.2rem; }
    button { min-width: 120px; font-size: 0.9rem; padding: 0.8rem 1rem; }
    .actions { gap: 0.8rem; }
    .lights-grid { grid-template-columns: 1fr; }
    
    /* Make table responsive */
    table { font-size: 0.8rem; }
    th, td { padding: 0.4rem 0.3rem; }
    input.small { width: 100px; min-width: unset; }
    
    /* Header improvements for mobile */
    header { flex-direction: column; gap: 0.8rem; }
    header h1 { margin-bottom: 0.5rem; }
    header div { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .card { padding: 1rem 0.8rem; }
    h1 { font-size: 1.1rem; }
    button { min-width: 100px; font-size: 0.85rem; padding: 0.7rem 0.9rem; }
    .actions { gap: 0.6rem; }
    
    /* Stack buttons vertically on very small screens */
    .actions { flex-direction: column; }
    .actions button, .actions a { width: 100%; }
    
    /* Optimize forms for small screens */
    form.inline { flex-direction: column; align-items: stretch !important; }
    form.inline > div { width: 100%; }
    form.inline input, form.inline select { min-width: unset; width: 100%; }
    
    /* Table scrolling for mobile */
    .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 600px; }
}