* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg: #1a1a2e;
    --surface: #16213e;
    --primary: #e94560;
    --primary-dark: #c73e54;
    --text: #eee;
    --text-muted: #888;
    --success: #4ade80;
    --success-text: #1a1a2e;
    /* @link https://utopia.fyi/type/calculator?c=360,16,1.333,1240,20,1.5,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--2: clamp(0.5556rem, 0.5657rem + -0.0131vw, 0.5628rem); /* 9px → 8.9px */
    --step--1: clamp(0.7502rem, 0.7162rem + 0.1512vw, 0.8333rem); /* 12px → 13.3px */
    --step-0: clamp(1rem, 0.8977rem + 0.4545vw, 1.25rem); /* 16px → 20px */
    --step-1: clamp(1.333rem, 1.1113rem + 0.9855vw, 1.875rem); /* 21.3px → 30px */
    --step-2: clamp(1.7769rem, 1.3532rem + 1.8829vw, 2.8125rem); /* 28.4px → 45px */
    --step-3: clamp(2.3686rem, 1.6117rem + 3.3639vw, 4.2188rem); /* 37.9px → 67.5px */
    --step-4: clamp(3.1573rem, 1.8602rem + 5.7651vw, 6.3281rem); /* 50.5px → 101.3px */
    --step-5: clamp(4.2087rem, 2.0473rem + 9.6063vw, 9.4922rem); /* 67.3px → 151.9px */
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f5f5;
        --surface: #e0e0e0;
        --primary: #d63850;
        --primary-dark: #b82f44;
        --text: #222;
        --text-muted: #666;
        --success: #22c55e;
        --success-text: #fff;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--step-0);
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
}

.app-grid {
    display: grid;
    grid-template-areas: "main";
    grid-template-rows: auto;
    min-height: 100dvh;
    gap: 1rem;
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 768px) {
    .app-grid {
        grid-template-areas: "aside main";
        grid-template-columns: 16rem 1fr;
        grid-template-rows: auto;
        max-width: 64rem;
        margin: 0 auto;
    }
}

.app-grid > main {
    grid-area: main;
    max-width: 32rem;
    width: 100%;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .app-grid > main {
        margin: 0;
    }
}

.app-grid > aside {
    grid-area: aside;
    position: fixed;
    top: 0;
    left: 0;
    width: 16rem;
    height: 100dvh;
    background: var(--bg);
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 90;
    overflow-y: auto;
}

.app-grid > aside.open {
    transform: translateX(0);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 80;
}

.sidebar-backdrop.open {
    display: block;
}

@media (min-width: 768px) {
    .app-grid > aside {
        position: sticky;
        top: 1rem;
        width: auto;
        height: auto;
        transform: none;
        align-self: start;
        max-height: calc(100dvh - 2rem);
        border-right: 1px solid var(--surface);
        padding-right: 1rem;
        padding-top: 0;
        z-index: auto;
    }

    .sidebar-backdrop {
        display: none !important;
    }
}

.sidebar-settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--surface);
}

.app-grid > aside h2 {
    font-size: var(--step--1);
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.month-group {
    margin-bottom: 0.75rem;
}

.month-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    min-height: 44px;
    background: var(--surface);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--step--1);
}

.month-item:hover { opacity: 0.8; }
.month-item .month-name { font-weight: 500; }
.month-item .month-stats { color: var(--text-muted); }
.month-group.active .month-item { background: var(--primary); color: white; }
.month-group.active .month-stats { color: rgba(255,255,255,0.8); }

.login-form {
    max-width: 300px;
    margin: 4rem auto;
    text-align: center;
}

.login-form h1 { margin-bottom: 2rem; font-size: var(--step-2); }

.login-form input {
    width: 100%;
    padding: 1rem;
    font-size: var(--step-0);
    border: none;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    margin-bottom: 1rem;
}

.login-form button {
    width: 100%;
    padding: 1rem;
    font-size: var(--step-0);
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    cursor: pointer;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

header h1 {
    font-size: var(--step-1);
    flex: 1;
}

.menu-btn {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .menu-btn { display: none; }
}


.time-toggle {
    display: flex;
    background: var(--surface);
    border: none;
    border-radius: 4px;
    padding: 0.125rem;
    cursor: pointer;
    font-size: var(--step--1);
}

.time-toggle span {
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    color: var(--text-muted);
    transition: background 0.15s, color 0.15s;
}

.time-toggle .t12 { background: var(--primary); color: white; }
.time-toggle.enabled .t12 { background: transparent; color: var(--text-muted); }
.time-toggle.enabled .t24 { background: var(--primary); color: white; }

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover { background: var(--surface); }
.icon-btn.enabled { color: var(--success); }
.icon-btn.denied { color: #dc2626; opacity: 0.5; cursor: not-allowed; }

.child-select {
    padding: 0.5rem;
    background: var(--surface);
    color: var(--text);
    border: none;
    border-radius: 4px;
    font-size: var(--step-0);
}

.sleep-btn {
    width: 100%;
    padding: 2rem;
    font-size: var(--step-1);
    font-weight: bold;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    margin-bottom: 1rem;
}

.sleep-btn:active { transform: scale(0.98); }

.sleep-btn.start {
    background: var(--primary);
    color: white;
}

.sleep-btn.stop {
    background: var(--success);
    color: var(--success-text);
}

.active-timer {
    text-align: center;
    padding: 1rem;
    background: var(--surface);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.active-timer .label { color: var(--text-muted); font-size: var(--step--1); }
.active-timer .time { font-size: var(--step-2); font-weight: bold; font-variant-numeric: tabular-nums; }
.active-timer .started { color: var(--text-muted); font-size: var(--step--1); margin-top: 0.5rem; }

.active-timer .start-time-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.active-timer .start-input {
    background: var(--bg);
    border: none;
    border-radius: 4px;
    color: var(--text);
    padding: 0.25rem 0.5rem;
    font-size: var(--step--1);
}

.adjust-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.adjust-btn {
    background: var(--bg);
    border: 1px solid var(--text-muted);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    font-size: var(--step--1);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adjust-btn:active { opacity: 0.7; background: var(--surface); }

.discard-btn {
    background: transparent;
    border: 1px solid var(--text-muted);
    border-radius: 6px;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    min-height: 44px;
    font-size: var(--step--1);
    cursor: pointer;
    margin-top: 0.75rem;
}

.discard-btn:active { opacity: 0.7; }

.day-group { margin-bottom: 1.5rem; }

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--surface);
    margin-bottom: 0.5rem;
}

.day-header .date { font-weight: bold; }
.day-header .total { color: var(--text-muted); font-size: var(--step--1); }

.sleep-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--surface);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.sleep-item .times { font-size: var(--step--1); }
.sleep-item .times .muted { color: var(--text-muted); }
.sleep-item .duration { font-weight: bold; font-variant-numeric: tabular-nums; }
.sleep-item.clickable { cursor: pointer; }
.sleep-item.clickable:active { opacity: 0.7; }

.sync-status {
    position: fixed;
    bottom: 1rem;
    left: max(1rem, env(safe-area-inset-left));
    padding: 0.25rem 0.75rem;
    background: transparent;
    font-size: var(--step--2);
    color: var(--text-muted);
    opacity: 0.6;
}

.sync-status.syncing { color: var(--primary); }
.sync-status.offline { color: #f59e0b; }

.hidden { display: none !important; }

.add-btn {
    position: fixed;
    bottom: 3rem;
    right: max(1rem, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 28px;
    background: var(--primary);
    color: white;
    border: none;
    font-size: var(--step-0);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.add-btn::before {
    content: '+';
    font-size: var(--step-1);
    font-weight: bold;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal {
    background: var(--surface);
    border-radius: 12px;
    padding: 1.5rem;
    width: 90%;
    max-width: 320px;
}

.modal h2 {
    margin-bottom: 1rem;
    font-size: var(--step-1);
}

.modal label {
    display: block;
    color: var(--text-muted);
    font-size: var(--step--1);
    margin-bottom: 0.25rem;
}

.modal input[type="datetime-local"] {
    width: 100%;
    padding: 0.75rem;
    font-size: var(--step-0);
    border: none;
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    margin-bottom: 1rem;
}

.modal-buttons {
    display: flex;
    gap: 0.5rem;
}

.modal-buttons button {
    flex: 1;
    padding: 0.75rem;
    min-height: 44px;
    font-size: var(--step-0);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.modal-buttons .cancel {
    background: var(--bg);
    color: var(--text);
}

.modal-buttons .save {
    background: var(--primary);
    color: white;
}

.delete-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    min-height: 44px;
    font-size: var(--step--1);
    background: transparent;
    border: 1px solid #dc2626;
    border-radius: 8px;
    color: #dc2626;
    cursor: pointer;
}

.delete-btn:active { opacity: 0.7; }

.continue-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem;
    min-height: 44px;
    font-size: var(--step--1);
    background: transparent;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    color: #3b82f6;
    cursor: pointer;
}

.continue-btn:active { opacity: 0.7; }
.continue-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.install-prompt {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    background: var(--primary);
    color: white;
    font-size: var(--step--1);
    z-index: 200;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.install-dismiss {
    background: transparent;
    border: none;
    color: white;
    font-size: var(--step-1);
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.8;
}

.install-dismiss:hover { opacity: 1; }