/* Study Savvy main styles (moved out of index.html) */
        :root {
            --bg: #0a0a0a;
            --surface: rgba(255,255,255,0.04);
            --surface-solid: #111113;
            --surface2: rgba(255,255,255,0.07);
            --surface3: rgba(255,255,255,0.10);
            --border: rgba(255,255,255,0.08);
            --border2: rgba(255,255,255,0.16);
            --text: #f5f5f5;
            --text2: #c8c8c8;
            --text3: #787878;
            --accent: #00c49a;
            --accent2: #00e5b3;
            --accent-text: #00c49a;
            --cat-day: #00c49a;
            --cat-evening: #d63384;
            --cat-career: #d4a017;
            --red: #e05252;
            --radius: 14px;
            --radius-sm: 8px;
            --glass: blur(20px) saturate(180%);
        }

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

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* subtle noise texture on body */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            opacity: 0.025;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 180px;
        }

        input[type=number]::-webkit-inner-spin-button,
        input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

        /* HEADER */
        .header {
            background: rgba(10,10,10,0.7);
            backdrop-filter: var(--glass);
            -webkit-backdrop-filter: var(--glass);
            border-bottom: 1px solid var(--border);
            padding: 0 40px;
            height: 62px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .header-left { display: flex; flex-direction: column; gap: 2px; }
        .header-datetime { font-size: 13px; font-weight: 500; color: var(--text); }
        .header-time-live { font-size: 12px; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
        .header-center { text-align: center; }
        .header-center h1 {
            font-family: 'Instrument Serif', serif;
            font-size: 30px;
            font-weight: 400;
            letter-spacing: -0.5px;
            color: var(--text);
        }
        .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
        .header-quote { font-size: 13px; color: var(--text2); font-style: italic; }
        .streak-badge {
            display: flex; align-items: center; gap: 4px;
            font-size: 11px; color: var(--accent-text); font-weight: 600;
            transition: color 0.4s;
        }
        .streak-badge svg { width: 11px; height: 11px; }

        /* TABS */
        .tabs {
            display: flex;
            background: rgba(10,10,10,0.6);
            backdrop-filter: var(--glass);
            -webkit-backdrop-filter: var(--glass);
            border-bottom: 1px solid var(--border);
            padding: 0 40px;
            position: sticky;
            top: 62px;
            z-index: 99;
        }
        .tab {
            padding: 12px 18px;
            font-size: 11px; font-weight: 600;
            color: var(--text3);
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
            white-space: nowrap; user-select: none;
            background: none; border-top: none; border-left: none; border-right: none;
            font-family: inherit; letter-spacing: 0.6px; text-transform: uppercase;
        }
        .tab.active { color: var(--text); border-bottom-color: var(--accent); }
        .tab:hover:not(.active) { color: var(--text2); }

        /* CONTENT */
        .content { max-width: 1200px; margin: 0 auto; padding: 20px 40px 60px; position: relative; z-index: 1; }
        .panel { display: none; }
        .panel.active { display: block; animation: fadeUp 0.2s ease; }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        /* GLASS CARD */
        .card {
            background: var(--surface);
            backdrop-filter: var(--glass);
            -webkit-backdrop-filter: var(--glass);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 14px 18px;
            margin-bottom: 10px;
            transition: border-color 0.2s;
        }
        .card:hover { border-color: var(--border2); }
        .card-title {
            font-size: 10px; font-weight: 600; color: var(--text3);
            text-transform: uppercase; letter-spacing: 1.2px;
            margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
        }
        .section-label {
            font-size: 10px; font-weight: 600; color: var(--text3);
            text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px;
        }

        /* INPUTS */
        .input {
            width: 100%;
            background: rgba(255,255,255,0.05);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 7px 12px;
            color: var(--text);
            font-size: 13px; font-family: 'DM Sans', sans-serif;
            outline: none; transition: border-color 0.2s;
        }
        .input:focus { border-color: var(--accent); }
        .input-wrap { position: relative; }
        .input-suffix { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--text3); pointer-events: none; }
        .input-hint { font-size: 10px; color: var(--text3); margin-top: 3px; }

        /* BUTTONS */
        .btn {
            padding: 9px 20px; border-radius: var(--radius-sm);
            font-size: 12px; font-weight: 600;
            cursor: pointer; transition: all 0.15s;
            border: none; font-family: inherit;
            display: inline-flex; align-items: center; gap: 6px;
        }
        .btn-accent { background: var(--accent); color: #0a0a0a; }
        .btn-accent:hover { background: var(--accent2); }
        .btn-ghost {
            background: rgba(255,255,255,0.06);
            color: var(--text);
            border: 1px solid var(--border);
        }
        .btn-ghost:hover { background: rgba(255,255,255,0.10); border-color: var(--border2); }
        .btn-sm { padding: 6px 14px; font-size: 11px; }

        /* TODAY LAYOUT */
        .today-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 14px;
            align-items: stretch;
        }
        .today-grid > .card { margin-bottom: 0; }

        /* TIMER */
        .timer-card { padding: 18px 24px 20px; text-align: center; }
        .mode-toggle {
            display: inline-flex;
            background: rgba(255,255,255,0.05);
            border-radius: var(--radius-sm); padding: 3px;
            margin-bottom: 14px; border: 1px solid var(--border);
        }
        .mode-btn {
            padding: 6px 16px; border-radius: 6px;
            font-size: 12px; font-weight: 500;
            cursor: pointer; color: var(--text3);
            transition: all 0.2s; user-select: none;
            background: none; border: none; font-family: inherit;
            display: flex; align-items: center; gap: 5px;
        }
        .mode-btn.active { background: var(--accent); color: #0a0a0a; }

        .cat-selector { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
        .cat-btn {
            padding: 6px 14px; border-radius: 20px;
            font-size: 11px; font-weight: 600;
            cursor: pointer; border: 1.5px solid var(--border);
            color: var(--text3);
            transition: all 0.2s; user-select: none;
            background: none; font-family: inherit;
            display: flex; align-items: center; gap: 4px;
        }
        .cat-btn:hover:not([class*="active-"]) { border-color: var(--border2); color: var(--text2); }
        .cat-btn.active-day    { background: var(--cat-day);     border-color: var(--cat-day);     color: #0a0a0a; }
        .cat-btn.active-evening{ background: var(--cat-evening); border-color: var(--cat-evening); color: #fff; }
        .cat-btn.active-career { background: var(--cat-career);  border-color: var(--cat-career);  color: #0a0a0a; }
        .auto-tag { font-size: 8px; padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,0.2); font-weight: 700; }
        .cat-btn:not([class*="active-"]) .auto-tag { background: var(--surface3); color: var(--text3); }

        .countdown-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; }
        .countdown-input {
            width: 52px;
            background: rgba(255,255,255,0.06);
            border: 1px solid var(--border);
            border-radius: 6px; padding: 7px;
            color: var(--text); font-size: 14px; text-align: center; outline: none;
            font-family: 'JetBrains Mono', monospace;
        }
        .countdown-input:focus { border-color: var(--accent); }
        .countdown-sep { color: var(--text3); font-size: 14px; }

        .timer-display {
            font-size: 58px; font-weight: 300; letter-spacing: -3px;
            font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
            margin-bottom: 18px; color: var(--text); line-height: 1;
            transition: color 0.4s ease;
        }
        .timer-display.running { color: var(--accent); }
        .timer-controls { display: flex; gap: 8px; justify-content: center; }

        /* PROGRESS */
        .progress-card { padding: 10px 14px; margin-bottom: 6px; }
        .progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
        .progress-cat { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; }
        .progress-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
        .progress-hours-badge { font-size: 10px; color: var(--text3); font-weight: 400; }
        .progress-stats { font-size: 11px; color: var(--text2); text-align: right; }
        .progress-stats strong { color: var(--text); }
        .over-tag { font-size: 10px; margin-left: 4px; font-weight: 600; }
        .bar-bg { height: 3px; background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden; }
        .bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s cubic-bezier(0.22,1,0.36,1); }

        /* AIM RIGHT COL */
        .aim-stack { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
        .aim-row { display: flex; align-items: center; gap: 10px; }
        .aim-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .aim-row-label { font-size: 11px; font-weight: 600; color: var(--text2); width: 108px; flex-shrink: 0; }
        .aim-row-label span { font-size: 9px; color: var(--text3); font-weight: 400; display: block; margin-top: 1px; }

        /* SESSION ITEMS */
        .session-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px;
        }
        .session-item:last-child { border-bottom: none; }
        .session-cat { font-weight: 500; }
        .session-time { color: var(--text3); font-size: 10px; margin-left: 6px; }
        .session-dur { font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text2); }

        /* HISTORY */
        .history-day-card {
            background: var(--surface);
            backdrop-filter: var(--glass);
            -webkit-backdrop-filter: var(--glass);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            margin-bottom: 10px; overflow: hidden;
            transition: border-color 0.2s;
        }
        .history-day-card:hover { border-color: var(--border2); }
        .history-day-header {
            display: flex; justify-content: space-between; align-items: center;
            padding: 16px 20px 12px; cursor: pointer; user-select: none;
        }
        .history-day-header:hover { background: rgba(255,255,255,0.03); }
        .history-date-main { font-size: 14px; font-weight: 600; color: var(--text); }
        .history-date-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
        .history-right { text-align: right; }
        .history-total-val { font-size: 18px; font-weight: 500; color: var(--text); font-family: 'JetBrains Mono', monospace; letter-spacing: -1px; }
        .history-total-aimed { font-size: 10px; color: var(--text3); margin-top: 2px; }
        .history-bar-wrap { padding: 0 20px 14px; }
        .history-sessions-wrap { border-top: 1px solid var(--border); }
        .history-sessions-wrap .session-item { padding: 9px 20px; border-bottom: 1px solid var(--border); }
        .history-sessions-wrap .session-item:last-child { border-bottom: none; }

        /* COMPARE */
        .compare-layout { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; }
        .day-selector { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 130px; }
        .day-btn {
            padding: 8px 14px; border-radius: var(--radius-sm);
            font-size: 12px; font-weight: 500;
            cursor: pointer; border: 1px solid var(--border);
            color: var(--text3);
            background: var(--surface);
            backdrop-filter: var(--glass);
            transition: all 0.15s; user-select: none; font-family: inherit; text-align: left;
        }
        .day-btn.active { background: var(--accent); border-color: var(--accent); color: #0a0a0a; font-weight: 600; }
        .day-btn:hover:not(.active) { border-color: var(--border2); color: var(--text2); background: var(--surface2); }

        .stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }
        .stat-card {
            background: var(--surface); backdrop-filter: var(--glass);
            border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
        }
        .stat-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; font-weight: 600; }
        .stat-value { font-size: 20px; font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: -1px; }
        .stat-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }

        .chart-card { margin-bottom: 14px; }
        .chart-title { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 14px; }
        .chart-wrap { position: relative; width: 100%; }
        .chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

        /* TABLE */
        .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); backdrop-filter: var(--glass); }
        .table-wrap table { width: 100%; border-collapse: collapse; min-width: 500px; }
        .table-wrap th { padding: 10px 14px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text3); background: rgba(255,255,255,0.03); text-align: left; font-weight: 700; }
        .table-wrap td { padding: 10px 14px; font-size: 12px; border-top: 1px solid var(--border); }

        /* EXPORT */
        .export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
        .export-card { padding: 20px; }
        .export-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
        .export-desc { font-size: 11px; color: var(--text3); margin-bottom: 14px; line-height: 1.5; }
        .export-btns { display: flex; gap: 7px; }
        .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
        .summary-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; font-weight: 600; }
        .summary-val { font-size: 22px; font-weight: 600; font-family: 'JetBrains Mono', monospace; letter-spacing: -1px; }

        /* DANGER */
        .danger-zone { margin-top: 6px; border: 1px solid rgba(200,60,60,0.15); background: rgba(200,60,60,0.04); border-radius: var(--radius); padding: 20px; }
        .danger-title { font-size: 9px; font-weight: 700; color: rgba(200,80,80,0.5); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
        .danger-desc { font-size: 11px; color: rgba(180,80,80,0.45); margin-bottom: 14px; line-height: 1.5; }
        .btn-delete-all { padding: 6px 14px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 500; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; background: transparent; color: rgba(180,80,80,0.4); border: 1px solid rgba(200,60,60,0.15); transition: none; }
        .btn-delete-all:hover { color: rgba(220,80,80,0.6); border-color: rgba(200,60,60,0.3); }

        /* PIP BUTTON */
        .btn-pip {
            position: absolute;
            top: 14px;
            right: 18px;
            background: rgba(255,255,255,0.06);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            color: var(--text3);
            padding: 5px 9px;
            font-size: 10px; font-weight: 600;
            cursor: pointer; font-family: inherit;
            display: flex; align-items: center; gap: 5px;
            transition: all 0.15s;
            letter-spacing: 0.4px; text-transform: uppercase;
        }
        .btn-pip:hover { color: var(--text); border-color: var(--border2); background: rgba(255,255,255,0.10); }
        .btn-pip svg { flex-shrink: 0; }
        .timer-card { position: relative; }

        /* MISC */
        .empty { text-align: center; padding: 48px 20px; color: var(--text3); font-size: 13px; }
        .notification {
            position: fixed; bottom: 24px; left: 50%;
            transform: translateX(-50%) translateY(80px);
            background: rgba(20,20,20,0.9);
            backdrop-filter: var(--glass);
            border: 1px solid var(--border2);
            color: var(--text); border-radius: 8px; padding: 10px 20px;
            font-size: 12px; font-weight: 500;
            opacity: 0; transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
            z-index: 1000; pointer-events: none;
        }
        .notification.show { transform: translateX(-50%) translateY(0); opacity: 1; }
        .chevron { transition: transform 0.2s; display: inline-flex; }
        .chevron.up { transform: rotate(180deg); }

        @media (max-width: 900px) {
            .today-grid { grid-template-columns: 1fr; }
            .compare-layout { grid-template-columns: 1fr; }
            .day-selector { flex-direction: row; flex-wrap: wrap; position: static; }
            .export-grid { grid-template-columns: 1fr; }
            .content { padding: 20px 20px 80px; }
            .header, .tabs { padding-left: 20px; padding-right: 20px; }
        }
        @media (max-width: 600px) {
            .timer-display { font-size: 52px; letter-spacing: -2px; }
            .stat-grid { grid-template-columns: 1fr; }
            .chart-row { grid-template-columns: 1fr; }
            .summary-grid { grid-template-columns: 1fr; }
            .header { grid-template-columns: 1fr auto; }
            .header-right { display: none; }
            .btn-pip { display: none; }
        }