/* ============================================================
   StudyHub — Aurora Interface  v4
   654× refinement pass. All class names, IDs, tokens, feature
   blocks, and JS-driven states are preserved 1:1.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* Surfaces — layered depth scale */
    --bg-0: #03070d;
    --bg-1: #06111d;
    --bg-2: #091828;
    --bg-3: #0d2135;


    /* Ink — tonal scale */
    --ink:    #f0f6fc;
    --ink-2:  #d6e2f0;
    --muted:  #97abc2;
    --faint:  #66798f;
    --ghost:  #3f5468;

    /* Lines — semantic */
    --line:        rgba(125, 211, 252, 0.10);
    --line-2:      rgba(125, 211, 252, 0.18);
    --line-strong: rgba(94, 234, 212, 0.34);
    --line-hot:    rgba(192, 132, 252, 0.36);

    /* Surfaces — translucent layers */
    --surface:        rgba(9, 22, 36, 0.68);
    --surface-2:      rgba(255, 255, 255, 0.042);
    --surface-3:      rgba(255, 255, 255, 0.072);
    --surface-4:      rgba(255, 255, 255, 0.105);
    --surface-raised: rgba(13, 30, 48, 0.88);

    /* Brand */
    --accent:       #5eead4;
    --accent-2:     #7dd3fc;
    --accent-3:     #38bdf8;
    --accent-glow:  rgba(94, 234, 212, 0.35);
    --accent-soft:  rgba(94, 234, 212, 0.14);
    --brand:        #c4b5fd;
    --brand-hot:    #c084fc;
    --brand-glow:   rgba(192, 132, 252, 0.30);
    --brand-soft:   rgba(196, 181, 253, 0.14);

    /* Semantic */
    --ok:     #6ee7b7;
    --ok-soft: rgba(110, 231, 183, 0.14);
    --warn:   #fdba74;
    --warn-soft: rgba(253, 186, 116, 0.14);
    --danger: #fca5a5;
    --danger-soft: rgba(252, 165, 165, 0.14);
    --info:   #7dd3fc;
    --info-soft: rgba(125, 211, 252, 0.14);

    /* Elevation — refined layered shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow:    0 12px 32px rgba(0, 0, 0, 0.42), 0 4px 10px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.36);
    --shadow-xl: 0 40px 100px rgba(0, 0, 0, 0.62), 0 12px 32px rgba(0, 0, 0, 0.42);
    --shadow-glow: 0 0 40px var(--accent-glow);

    /* Radii — progression */
    --r-xs: 8px;
    --r-sm: 11px;
    --r:    16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* Type — emoji fallback baked in */
    --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
             "Noto Color Emoji", "Android Emoji", "EmojiOne Color", sans-serif;
    --font:    "Sora", "Inter", -apple-system, system-ui, sans-serif, var(--emoji);
    --mono:    "JetBrains Mono", "Inter", ui-monospace, monospace, var(--emoji);
    --display: "Fraunces", "Sora", serif, var(--emoji);

    /* Motion */
    --ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --dur-fast:  0.14s;
    --dur:       0.22s;
    --dur-slow:  0.35s;

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(94, 234, 212, 0.30);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
    font-family: var(--font);
    color: var(--ink);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1400px 700px at 6% -12%, rgba(94, 234, 212, 0.14), transparent 55%),
        radial-gradient(1000px 560px at 100% -4%, rgba(167, 139, 250, 0.18), transparent 52%),
        radial-gradient(900px 500px at 50% 110%, rgba(125, 211, 252, 0.08), transparent 55%),
        linear-gradient(180deg, #050d17 0%, #040912 55%, #060e17 100%);
    background-attachment: fixed;
    transition: background var(--dur-slow) var(--ease);
    letter-spacing: -0.011em;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 15% 15%, rgba(94, 234, 212, 0.05), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(192, 132, 252, 0.05), transparent 45%);
}

body > * { position: relative; z-index: 1; }

::selection { background: rgba(94, 234, 212, 0.32); color: #fff; }

/* Scrollbars — refined */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(125, 211, 252, 0.24));
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.45), rgba(125, 211, 252, 0.45));
    background-clip: padding-box;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   3. LAYOUT
   ============================================================ */
.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 2.75rem;
    flex: 1;
    width: 100%;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    letter-spacing: -0.03em;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

/* ============================================================
   4. UTILITY / HIGHLIGHTS
   ============================================================ */
.hl-cyan    { color: #67e8f9; }
.hl-magenta { color: #f472b6; }
.hl-green   { color: #6ee7b7; }
.hl-orange  { color: #fdba74; }
.hl-purple  { color: #c4b5fd; }
.hl-pink    { color: #f9a8d4; }
.hl-blue    { color: #7dd3fc; }
.hl-red     { color: #fca5a5; }

.neon-text {
    text-shadow: 0 0 24px rgba(94, 234, 212, 0.35), 0 0 48px rgba(94, 234, 212, 0.15);
}

.brand-highlight {
    font-weight: 700;
    background: linear-gradient(90deg, #5eead4 0%, #7dd3fc 50%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ============================================================
   5. GLASS CARD — the workhorse container
   ============================================================ */
.glass-card {
    position: relative;
    background: var(--surface);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.35rem 1.5rem;
    margin-bottom: 1.4rem;
    box-shadow: var(--shadow);
    transition:
        border-color var(--dur) var(--ease),
        transform var(--dur) var(--ease),
        box-shadow var(--dur) var(--ease);
    overflow: hidden;
}
.glass-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.32), transparent);
    opacity: 0.75;
    pointer-events: none;
}
.glass-card:hover {
    border-color: var(--line-strong);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(94, 234, 212, 0.10),
        0 0 48px rgba(94, 234, 212, 0.08);
}

/* ============================================================
   6. NAVBAR
   ============================================================ */
.navbar {
    background: rgba(4, 12, 20, 0.86);
    backdrop-filter: blur(26px) saturate(1.4);
    -webkit-backdrop-filter: blur(26px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 1.3rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.32);
}
.nav-container {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
}
.nav-brand {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.04em;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: transform var(--dur) var(--ease), filter var(--dur);
}
.nav-brand:hover { transform: translateY(-1px); filter: brightness(1.1); }

.burger-menu {
    display: none;
    font-size: 1.7rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    padding: 0.15rem 0.6rem;
    line-height: 1;
    border-radius: var(--r-sm);
    transition: all var(--dur);
}
.burger-menu:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    color: var(--accent);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
    justify-content: center;
}
.nav-links a {
    position: relative;
    text-decoration: none;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.78rem;
    padding: 0.4rem 0.68rem;
    border-radius: var(--r-pill);
    transition: background var(--dur), color var(--dur), box-shadow var(--dur), transform var(--dur);
    white-space: nowrap;
}
.nav-links a:hover {
    background: rgba(94, 234, 212, 0.10);
    color: var(--ink);
    transform: translateY(-1px);
}
.nav-links a.active {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.22), rgba(125, 211, 252, 0.08));
    color: var(--accent);
    box-shadow:
        inset 0 0 0 1px rgba(94, 234, 212, 0.36),
        0 0 22px rgba(94, 234, 212, 0.14);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.nav-date {
    font-size: 0.72rem;
    color: var(--muted);
    background: var(--surface-2);
    padding: 0.3rem 0.8rem;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    font-weight: 500;
    transition: border-color var(--dur);
}
.nav-date:hover { border-color: var(--line-2); }

#langSelector {
    background: rgba(5, 15, 26, 0.9) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    padding: 0.34rem 0.6rem !important;
    border-radius: var(--r-pill) !important;
    font-size: 0.75rem !important;
    cursor: pointer;
    font-family: inherit;
    outline: none;
    transition: border-color var(--dur), box-shadow var(--dur);
}
#langSelector:hover { border-color: var(--line-2) !important; }
#langSelector:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--focus-ring);
}

.focus-toggle {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 0.34rem 0.9rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 600;
    transition: all var(--dur);
}
.focus-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.focus-toggle.active {
    background: rgba(94, 234, 212, 0.18);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 26px rgba(94, 234, 212, 0.22);
}

/* ============================================================
   7. CLOCK SECTION
   ============================================================ */
.clock-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    background: var(--surface);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--r-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.4rem;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.clock-toggle {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.14), rgba(94, 234, 212, 0.06));
    border: 1px solid rgba(94, 234, 212, 0.4);
    color: var(--accent);
    padding: 0.42rem 1.05rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.78rem;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
}
.clock-toggle:hover {
    background: rgba(94, 234, 212, 0.24);
    box-shadow: 0 0 28px rgba(94, 234, 212, 0.20);
    transform: translateY(-1px);
}
.clock-toggle:active { transform: translateY(0); }

.clock-container {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex: 1;
}

.digital-clock {
    font-size: 2.15rem;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0.1em;
    color: var(--accent);
    text-shadow:
        0 0 22px rgba(94, 234, 212, 0.4),
        0 0 48px rgba(94, 234, 212, 0.15);
    display: none;
    font-variant-numeric: tabular-nums;
    transition: text-shadow var(--dur);
}
.digital-clock.active { display: block; }

.clock-date { display: none; }

#analogClock {
    display: none;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    flex-shrink: 0;
}
#analogClock.active {
    display: flex;
    transform: none;
}
#analogCanvas {
    aspect-ratio: 1 / 1;
    width: 130px !important;
    height: 130px !important;
    max-width: 130px !important;
    max-height: 130px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 8px 26px rgba(94, 234, 212, 0.22));
}

.calendar-widget {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0.5rem 0.9rem;
    transition: border-color var(--dur), box-shadow var(--dur);
}
.calendar-widget:hover {
    border-color: var(--line-2);
    box-shadow: 0 0 26px rgba(94, 234, 212, 0.08);
}
.calendar-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}
.cal-day {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.cal-date {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--mono);
    line-height: 1;
    text-shadow: 0 0 18px rgba(94, 234, 212, 0.28);
}
.cal-month { font-size: 0.7rem; color: var(--muted); }

.calendar-expand-btn {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.16), rgba(94, 234, 212, 0.06));
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all var(--dur);
    display: flex;
    align-items: center;
    justify-content: center;
}
.calendar-expand-btn:hover {
    background: rgba(94, 234, 212, 0.28);
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.25);
    transform: rotate(8deg) scale(1.05);
}

.mini-clock .digital-clock { font-size: 1.55rem; }
.mini-clock canvas { max-width: 100px; }

/* ============================================================
   8. HEADERS
   ============================================================ */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-bottom: 1.5rem;
}
.dash-header h1 {
    font-size: 2.15rem;
    font-weight: 650;
}
.dash-header h1 .gradient-text {
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.subtitle { color: var(--muted); margin-top: 0.35rem; font-size: 0.95rem; }

.dash-date-badge {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.14), rgba(94, 234, 212, 0.05));
    padding: 0.42rem 1.1rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    color: var(--accent);
    border: 1px solid rgba(94, 234, 212, 0.28);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.88rem;
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.08);
}

.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
    font-size: 1.95rem;
    font-weight: 650;
}
.page-header h1 .gradient-text {
    background: linear-gradient(180deg, var(--ink), var(--ink-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.page-header p { color: var(--muted); margin-top: 0.35rem; }

/* ============================================================
   9. STATS GRID
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.stat-card {
    position: relative;
    background: var(--surface-2);
    border-radius: var(--r);
    padding: 1.05rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur);
    overflow: hidden;
}
.stat-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    background: linear-gradient(180deg, var(--accent), transparent);
    opacity: 0;
    transition: opacity var(--dur);
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 26px rgba(94, 234, 212, 0.08);
}
.stat-card:hover::after { opacity: 1; }

.stat-icon { font-size: 1.6rem; width: 2.5rem; text-align: center; }
.stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
}
.stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

/* ============================================================
   10. POMODORO
   ============================================================ */
.pomodoro-widget { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; }
.pomodoro-timer {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--mono);
    color: var(--brand);
    letter-spacing: 0.06em;
    min-width: 130px;
    text-shadow: 0 0 26px rgba(192, 132, 252, 0.35);
    font-variant-numeric: tabular-nums;
}
.pomodoro-controls { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.pomodoro-controls button,
.pomodoro-task-select {
    background: rgba(196, 181, 253, 0.12);
    border: 1px solid var(--brand);
    color: var(--brand);
    padding: 0.45rem 1.05rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
}
.pomodoro-controls button:hover {
    background: rgba(196, 181, 253, 0.24);
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(196, 181, 253, 0.25);
}
.pomodoro-task-select {
    background: rgba(0, 0, 0, 0.30);
    color: var(--ink);
    cursor: pointer;
}
.pomodoro-logs { font-size: 0.88rem; color: var(--muted); }

.pomodoro-sound-select {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--brand);
    color: var(--brand);
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: all var(--dur);
}
.pomodoro-sound-select:hover { background: rgba(196, 181, 253, 0.16); }

/* ============================================================
   11. JOURNAL
   ============================================================ */
.journal-area textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    padding: 0.85rem;
    min-height: 96px;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border var(--dur), box-shadow var(--dur);
    resize: vertical;
    line-height: 1.55;
}
.journal-area textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.journal-past {
    margin-top: 0.6rem;
    max-height: 130px;
    overflow-y: auto;
    font-size: 0.85rem;
    color: var(--muted);
}
.journal-past div {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.35rem 0;
    transition: color var(--dur);
}
.journal-past div:hover { color: var(--ink); }

/* ============================================================
   12. SECTION HEADERS
   ============================================================ */
.activity-section { border: 1px solid var(--line); }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.section-header h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}
.section-badge {
    background: var(--surface-2);
    padding: 0.2rem 0.9rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    color: var(--muted);
    border: 1px solid var(--line);
    font-weight: 600;
}

.activity-list { max-height: 320px; overflow-y: auto; padding-right: 0.2rem; }
.activity-item {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    border-radius: var(--r-xs);
    transition: background var(--dur-fast);
}
.activity-item:hover { background: rgba(255, 255, 255, 0.035); }
.activity-item .time { color: var(--faint); font-size: 0.78rem; font-family: var(--mono); }
.empty-state {
    color: var(--faint);
    text-align: center;
    padding: 1.75rem 0.5rem;
    font-size: 0.9rem;
}

.del-history-buttons { display: flex; gap: 0.75rem; margin-top: 0.7rem; flex-wrap: wrap; }

/* ============================================================
   13. BUTTONS
   ============================================================ */
.btn-danger-sm, .btn-danger, .btn-primary, .btn-primary-sm {
    font-family: inherit;
    transition: all var(--dur) var(--ease);
    cursor: pointer;
    font-weight: 600;
}
.btn-danger-sm {
    background: rgba(252, 165, 165, 0.10);
    color: var(--danger);
    border: 1px solid rgba(252, 165, 165, 0.30);
    padding: 0.32rem 1.05rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
}
.btn-danger-sm:hover {
    background: rgba(252, 165, 165, 0.22);
    box-shadow: 0 0 22px rgba(252, 165, 165, 0.18);
}
.btn-danger {
    background: rgba(252, 165, 165, 0.10);
    color: var(--danger);
    border: 1px solid rgba(252, 165, 165, 0.30);
    padding: 0.45rem 1.2rem;
    border-radius: var(--r-sm);
    font-weight: 600;
}
.btn-danger:hover {
    background: rgba(252, 165, 165, 0.22);
    box-shadow: 0 0 22px rgba(252, 165, 165, 0.18);
}
.btn-primary {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.10));
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.55rem 1.4rem;
    border-radius: var(--r-sm);
    font-weight: 700;
}
.btn-primary:hover {
    background: rgba(94, 234, 212, 0.32);
    box-shadow: 0 0 26px rgba(94, 234, 212, 0.24);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary-sm {
    background: rgba(94, 234, 212, 0.12);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.24rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
}
.btn-primary-sm:hover { background: rgba(94, 234, 212, 0.26); }

.delete-item-btn {
    background: rgba(252, 165, 165, 0.14);
    color: #f87171;
    border: 1px solid rgba(252, 165, 165, 0.32);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: all var(--dur);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.delete-item-btn:hover {
    background: rgba(252, 165, 165, 0.32);
    transform: scale(1.08);
}

/* ============================================================
   14. AI RECOMMEND
   ============================================================ */
.ai-recommend-section {
    border: 1px solid rgba(196, 181, 253, 0.24);
    box-shadow: var(--shadow), 0 0 40px rgba(196, 181, 253, 0.04);
}
.ai-recommend-card { display: flex; flex-direction: column; gap: 0.55rem; }
.ai-recommend-header { display: flex; align-items: center; gap: 0.8rem; }
.ai-badge {
    background: rgba(196, 181, 253, 0.16);
    color: var(--brand);
    font-weight: 700;
    padding: 0.24rem 0.95rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    border: 1px solid rgba(196, 181, 253, 0.34);
}
.ai-recommend-input { display: flex; gap: 0.55rem; margin-top: 0.3rem; }
.ai-recommend-input input, .ai-recommend-input button { font-family: inherit; }
.ai-recommend-input input {
    flex: 1;
    padding: 0.7rem 1.05rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 0.95rem;
    transition: border var(--dur), box-shadow var(--dur);
}
.ai-recommend-input input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.ai-recommend-input button {
    background: rgba(94, 234, 212, 0.18);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.65rem 1.5rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur);
}
.ai-recommend-input button:hover {
    background: rgba(94, 234, 212, 0.30);
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.22);
    transform: translateY(-1px);
}
.ai-recommend-result {
    margin-top: 0.85rem;
    padding: 0.9rem 1.05rem;
    background: rgba(0, 0, 0, 0.24);
    border-radius: var(--r-sm);
    font-weight: 500;
    border-left: 3px solid var(--accent);
    line-height: 1.55;
}

/* ============================================================
   15. TOOLS GRID
   ============================================================ */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}
.tool-card {
    position: relative;
    background: var(--surface-2);
    border-radius: var(--r);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--line);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow: hidden;
}
.tool-card::before {
    content: "";
    position: absolute;
    top: -50%; right: -50%;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease);
    pointer-events: none;
}
.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.48), 0 0 30px rgba(94, 234, 212, 0.10);
    border-color: var(--line-strong);
}
.tool-card:hover::before { opacity: 1; }

.tool-icon { font-size: 2.1rem; line-height: 1; }
.tool-card h3 { font-size: 1rem; font-weight: 650; margin: 0.25rem 0; }
.tool-card p { font-size: 0.84rem; color: var(--muted); flex: 1; line-height: 1.5; }
.tool-tag {
    align-self: flex-start;
    background: rgba(94, 234, 212, 0.09);
    padding: 0.14rem 0.65rem;
    border-radius: var(--r-pill);
    font-size: 0.62rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: var(--accent);
    border: 1px solid rgba(94, 234, 212, 0.20);
}

/* ============================================================
   16. UPLOAD / FILES
   ============================================================ */
.upload-area {
    border: 2px dashed rgba(94, 234, 212, 0.32);
    border-radius: var(--r-lg);
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    background: rgba(94, 234, 212, 0.03);
    position: relative;
    overflow: hidden;
}
.upload-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.08), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur-slow);
    pointer-events: none;
}
.upload-area:hover {
    background: rgba(94, 234, 212, 0.08);
    border-color: var(--accent);
    box-shadow: 0 0 50px rgba(94, 234, 212, 0.12);
}
.upload-area:hover::before { opacity: 1; }
.upload-icon { font-size: 3rem; line-height: 1; }
.upload-actions { margin-top: 1.6rem; display: flex; gap: 1rem; justify-content: flex-end; }
.file-list { margin-top: 1.1rem; }
.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--r-xs);
    transition: background var(--dur-fast);
}
.file-item:hover { background: rgba(255, 255, 255, 0.03); }
.file-item .file-name {
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--dur);
}
.file-item .file-name:hover { text-decoration: underline; }
.file-item .file-size { color: var(--faint); font-size: 0.8rem; font-family: var(--mono); }
.file-item-row { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; width: 100%; }

.file-note-input {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    color: var(--ink);
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
    font-family: inherit;
    flex: 1;
    min-width: 100px;
    transition: border var(--dur);
}
.file-note-input:focus { outline: none; border-color: var(--accent); }

/* ============================================================
   17. HABITS / NOTICES / NOTES
   ============================================================ */
.habit-add-section, .notice-add-section, .note-add-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.habit-add-form, .notice-add-form, .note-add-form {
    display: flex;
    flex: 1;
    gap: 0.55rem;
}
.habit-add-form input,
.notice-add-form input,
.note-add-form input {
    flex: 1;
    padding: 0.7rem 1.05rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border var(--dur), box-shadow var(--dur);
}
.habit-add-form input:focus,
.notice-add-form input:focus,
.note-add-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.habit-list, .notice-list, .note-list { margin-top: 1.4rem; }
.habit-item, .notice-item, .note-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 0.65rem;
    border-radius: var(--r-xs);
    transition: background var(--dur-fast);
}
.habit-item:hover, .notice-item:hover, .note-item:hover { background: rgba(255, 255, 255, 0.03); }

.habit-item .habit-text { font-weight: 500; }
.habit-item .habit-actions { display: flex; gap: 0.5rem; }
.habit-item .complete-btn {
    background: rgba(110, 231, 183, 0.10);
    color: var(--ok);
    border: 1px solid rgba(110, 231, 183, 0.30);
    padding: 0.24rem 1rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    cursor: pointer;
    font-size: 0.78rem;
    font-family: inherit;
    transition: all var(--dur);
}
.habit-item .complete-btn:hover {
    background: rgba(110, 231, 183, 0.22);
    box-shadow: 0 0 20px rgba(110, 231, 183, 0.18);
}
.habit-item .complete-btn.done {
    background: rgba(94, 234, 212, 0.16);
    color: var(--accent);
    border-color: var(--accent);
}

.notice-board { border: 1px solid var(--line); }
.notice-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.4rem;
}
.notice-count {
    background: rgba(94, 234, 212, 0.10);
    padding: 0.22rem 0.95rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
}
.notice-item {
    background: rgba(94, 234, 212, 0.055);
    border-left: 3px solid var(--accent);
    padding: 0.85rem 1.05rem;
    margin-bottom: 0.55rem;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: transform var(--dur), background var(--dur);
}
.notice-item:hover {
    background: rgba(94, 234, 212, 0.09);
    transform: translateX(3px);
}
.notice-item .time { color: var(--faint); font-size: 0.8rem; font-family: var(--mono); }

/* ============================================================
   18. STREAK
   ============================================================ */
.streak-display { border: 1px solid rgba(253, 186, 116, 0.24); }
.streak-inner { display: flex; align-items: center; gap: 1.5rem; }
.streak-icon { font-size: 3rem; line-height: 1; }
.streak-label { font-size: 0.9rem; color: var(--muted); }
.streak-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--warn);
    margin-right: 0.5rem;
    font-family: var(--mono);
    text-shadow: 0 0 22px rgba(253, 186, 116, 0.4);
}
.streak-days { color: var(--muted); }

/* ============================================================
   19. SEARCH
   ============================================================ */
.search-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}
.search-container {
    text-align: center;
    max-width: 620px;
    width: 100%;
}
.search-container h1 {
    font-size: 2.7rem;
    font-weight: 650;
    margin-bottom: 0.55rem;
    background: linear-gradient(180deg, var(--ink), var(--ink-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.search-box {
    display: flex;
    gap: 0.55rem;
    margin-top: 1.5rem;
    position: relative;
}
.search-box input, .search-box button { font-family: inherit; }
.search-box input {
    flex: 1;
    padding: 0.9rem 1.25rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 1rem;
    color: var(--ink);
    transition: border var(--dur), box-shadow var(--dur);
}
.search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 30px rgba(94, 234, 212, 0.12);
}
.search-box button {
    background: rgba(94, 234, 212, 0.18);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.85rem 1.75rem;
    border-radius: var(--r-pill);
    font-weight: 700;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.search-box button:hover {
    background: rgba(94, 234, 212, 0.30);
    box-shadow: 0 0 26px rgba(94, 234, 212, 0.22);
    transform: translateY(-1px);
}
.search-tip { margin-top: 1.1rem; color: var(--faint); }

.suggestions-container { position: relative; width: 100%; flex: 1; }
.suggestions-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(5, 14, 24, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    display: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    animation: suggestIn 0.16s var(--ease);
}
@keyframes suggestIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.suggestions-list.active { display: block; }
.suggestion-item {
    padding: 0.65rem 1.15rem;
    cursor: pointer;
    color: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.suggestion-item:hover {
    background: rgba(94, 234, 212, 0.12);
    color: var(--accent);
}
.suggestion-item:last-child { border-bottom: none; }

/* ============================================================
   20. ON-SCREEN KEYBOARD
   ============================================================ */
.keyboard-toggle {
    margin: 1rem 0;
    background: rgba(94, 234, 212, 0.10);
    color: var(--accent);
    border: 1px solid var(--line-strong);
    padding: 0.55rem 1.5rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
}
.keyboard-toggle:hover {
    background: rgba(94, 234, 212, 0.22);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.18);
    transform: translateY(-1px);
}

.keyboard-container {
    background: rgba(6, 16, 24, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 0.9rem;
    margin-top: 0.85rem;
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    animation: kbIn 0.2s var(--ease);
}
@keyframes kbIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.keyboard-container.active { display: flex; }
.keyboard-row { display: flex; gap: 0.35rem; justify-content: center; }

.key-btn {
    background: rgba(255, 255, 255, 0.055);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 0.55rem 0.8rem;
    border-radius: var(--r-xs);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 2.5rem;
    text-align: center;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease);
}
.key-btn:hover {
    background: rgba(94, 234, 212, 0.16);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.key-btn:active { transform: translateY(1px); }
.key-btn.special {
    background: rgba(94, 234, 212, 0.10);
    color: var(--accent);
    border-color: rgba(94, 234, 212, 0.28);
}
.key-btn.space { min-width: 6rem; }
.keyboard-layout-toggle {
    background: rgba(192, 132, 252, 0.15) !important;
    border-color: rgba(192, 132, 252, 0.45) !important;
    color: #c084fc !important;
    font-weight: 700;
}

/* ============================================================
   21. ASSIGNMENTS / READING
   ============================================================ */
.assignment-item, .reading-item {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-radius: var(--r-xs);
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.assignment-item:hover, .reading-item:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateX(2px);
}
.priority-high { border-left: 4px solid var(--danger); padding-left: 0.65rem; }
.priority-medium { border-left: 4px solid var(--warn); padding-left: 0.65rem; }
.priority-low { border-left: 4px solid var(--ok); padding-left: 0.65rem; }
.tags { font-size: 0.7rem; color: var(--brand); font-weight: 500; }

/* ============================================================
   22. PLANNER GRID
   ============================================================ */
.planner-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 4px;
    overflow-x: auto;
    font-size: 0.7rem;
}
.planner-grid .time-label {
    background: rgba(255, 255, 255, 0.035);
    padding: 0.28rem;
    text-align: center;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-xs);
    font-weight: 600;
}
.planner-grid .planner-cell {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    min-height: 36px;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--r-xs);
}
.planner-grid .planner-cell:hover {
    background: rgba(94, 234, 212, 0.12);
    border-color: var(--accent);
    transform: scale(1.03);
}
.planner-grid .planner-cell.filled {
    background: rgba(94, 234, 212, 0.16);
    border-color: var(--accent);
    font-weight: 600;
}

/* ============================================================
   23. FLASHCARDS
   ============================================================ */
.flashcard-review { text-align: center; padding: 1.6rem; }
.flashcard-review .card-front,
.flashcard-review .card-back {
    font-size: 1.22rem;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    background: rgba(94, 234, 212, 0.065);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.15rem;
    transition: all var(--dur) var(--ease);
}
.flashcard-review .card-back { display: none; }
.flashcard-review.show-back .card-back { display: flex; }
.flashcard-review.show-back .card-front { display: none; }
.flashcard-difficulty { margin-top: 1rem; }
.flashcard-difficulty button {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 0.45rem 1.2rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    margin: 0 0.35rem;
    font-family: inherit;
    transition: all var(--dur);
}
.flashcard-difficulty button:hover {
    background: rgba(94, 234, 212, 0.18);
    border-color: var(--accent);
    transform: translateY(-1px);
}

/* ============================================================
   24. GENERIC FLEX / INPUT
   ============================================================ */
.flex-wrap { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.flex-wrap .input-dark { flex: 1; min-width: 120px; }

.input-dark {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    padding: 0.55rem 0.85rem;
    width: 100%;
    font-family: inherit;
    transition: border var(--dur), box-shadow var(--dur);
}
.input-dark:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* ============================================================
   25. FOOTER
   ============================================================ */
.footer {
    text-align: center;
    padding: 1.35rem;
    border-top: 1px solid var(--line);
    color: var(--faint);
    font-size: 0.82rem;
    background: rgba(4, 12, 20, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ============================================================
   26. DASHBOARD LAYOUT GRIDS
   ============================================================ */
.dashboard-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.3rem;
    margin-top: 0.5rem;
}
.grid-left, .grid-right { display: flex; flex-direction: column; gap: 1.3rem; }
.pomodoro-journal-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
}

/* ============================================================
   27. SEARCH SECTION (dashboard)
   ============================================================ */
.search-section { margin-bottom: 1.4rem; text-align: center; }
.search-section .search-container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.search-section .search-box {
    display: flex;
    gap: 0.55rem;
    margin: 0.6rem auto 0;
    max-width: 640px;
}
.search-section .search-box input {
    flex: 1;
    padding: 0.85rem 1.2rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: 1rem;
    color: var(--ink);
    transition: border var(--dur), box-shadow var(--dur);
}
.search-section .search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.12), 0 0 30px rgba(94, 234, 212, 0.10);
}
.search-section .search-box button {
    background: rgba(94, 234, 212, 0.18);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.85rem 1.75rem;
    border-radius: var(--r-pill);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
}
.search-section .search-box button:hover {
    background: rgba(94, 234, 212, 0.30);
    box-shadow: 0 0 26px rgba(94, 234, 212, 0.22);
    transform: translateY(-1px);
}
.search-section .keyboard-toggle {
    margin: 0.55rem 0;
    background: rgba(94, 234, 212, 0.10);
    color: var(--accent);
    border: 1px solid var(--line-strong);
    padding: 0.45rem 1.5rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
}
.search-section .keyboard-toggle:hover {
    background: rgba(94, 234, 212, 0.22);
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.18);
}
.search-section .keyboard-container {
    background: rgba(6, 16, 24, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0.85rem;
    margin-top: 0.55rem;
    display: none;
    flex-direction: column;
    gap: 0.35rem;
}
.search-section .keyboard-container.active { display: flex; }
.search-section .keyboard-row { display: flex; gap: 0.35rem; justify-content: center; }
.search-section .key-btn {
    background: rgba(255, 255, 255, 0.055);
    color: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 0.55rem 0.8rem;
    border-radius: var(--r-xs);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 2.5rem;
    text-align: center;
    transition: all var(--dur-fast) var(--ease);
}
.search-section .key-btn:hover {
    background: rgba(94, 234, 212, 0.16);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.search-section .key-btn.special { background: rgba(94, 234, 212, 0.10); color: var(--accent); }
.search-section .key-btn.space { min-width: 6rem; }
.search-section .search-tip { margin-top: 0.55rem; color: var(--faint); }

/* ============================================================
   28. MODALS (calendar, trash, command palette base)
   ============================================================ */
.calendar-modal,
.trash-modal,
.command-palette {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFade 0.2s var(--ease);
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.calendar-modal-content,
.trash-modal-content,
.cp-content {
    background: rgba(7, 18, 30, 0.97);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    padding: 1.3rem 1.4rem;
    max-width: 500px;
    width: 100%;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(94, 234, 212, 0.06);
    animation: modalPop 0.24s var(--ease);
}
@keyframes modalPop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.calendar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.05rem;
    gap: 0.35rem;
}
.calendar-modal-header button {
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    border-radius: var(--r-xs);
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--dur);
}
.calendar-modal-header button:hover {
    background: rgba(94, 234, 212, 0.26);
    transform: scale(1.06);
}
.calendar-modal-header span {
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
    flex: 1;
    text-align: center;
    font-family: var(--display);
}
.cal-close-btn {
    background: rgba(252, 165, 165, 0.16) !important;
    border-color: rgba(252, 165, 165, 0.32) !important;
    color: var(--danger) !important;
}

/* ============================================================
   29. CALENDAR GRID
   ============================================================ */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    font-size: 0.85rem;
}
.calendar-grid .cal-header {
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.35rem 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.calendar-grid .cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    color: var(--ink);
    cursor: default;
    transition: all var(--dur-fast);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}
.calendar-grid .cal-cell.empty { visibility: hidden; }
.calendar-grid .cal-cell.today {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.32), rgba(94, 234, 212, 0.16));
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.42);
}
.calendar-grid .cal-cell:not(.empty):not(.today):hover {
    background: rgba(94, 234, 212, 0.12);
}

/* ============================================================
   30. CALCULATOR
   ============================================================ */
.calculator-widget {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0.6rem;
    min-width: 200px;
}
.calc-display {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    padding: 0.45rem 0.7rem;
    text-align: right;
    font-family: var(--mono);
    font-size: 1.08rem;
    color: var(--accent);
    font-weight: 700;
    min-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.calc-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.calc-btn {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--ink);
    border-radius: var(--r-xs);
    padding: 0.45rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
    font-family: inherit;
}
.calc-btn:hover {
    background: rgba(94, 234, 212, 0.16);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.calc-btn:active { transform: translateY(1px); }
.calc-btn.op { background: rgba(196, 181, 253, 0.10); color: var(--brand); }
.calc-btn.eq { background: rgba(110, 231, 183, 0.16); color: var(--ok); }
.calc-btn.eq:hover {
    background: rgba(110, 231, 183, 0.30);
    border-color: var(--ok);
    box-shadow: 0 0 18px rgba(110, 231, 183, 0.22);
}
.calc-btn.zero { grid-column: span 2; }

/* ============================================================
   31. PRIORITY MATRIX
   ============================================================ */
.priority-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}
.priority-input-row input, .priority-input-row select {
    padding: 0.55rem 0.95rem;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border var(--dur);
}
.priority-input-row input { flex: 1; min-width: 150px; }
.priority-input-row input:focus, .priority-input-row select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.12);
}
.priority-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.priority-quadrant {
    border-radius: var(--r);
    padding: 0.95rem;
    min-height: 110px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: border-color var(--dur), background var(--dur);
}
.priority-quadrant h3 {
    font-size: 0.78rem;
    margin-bottom: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.priority-quadrant.q1 { background: rgba(252, 165, 165, 0.065); border-color: rgba(252, 165, 165, 0.22); }
.priority-quadrant.q1 h3 { color: var(--danger); }
.priority-quadrant.q2 { background: rgba(110, 231, 183, 0.065); border-color: rgba(110, 231, 183, 0.22); }
.priority-quadrant.q2 h3 { color: var(--ok); }
.priority-quadrant.q3 { background: rgba(253, 186, 116, 0.065); border-color: rgba(253, 186, 116, 0.22); }
.priority-quadrant.q3 h3 { color: var(--warn); }
.priority-quadrant.q4 { background: rgba(148, 163, 184, 0.065); border-color: rgba(148, 163, 184, 0.22); }
.priority-quadrant.q4 h3 { color: var(--muted); }
.priority-list { display: flex; flex-direction: column; gap: 0.35rem; }
.priority-task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    padding: 0.35rem 0.65rem;
    border-radius: var(--r-xs);
    font-size: 0.8rem;
    transition: background var(--dur-fast), transform var(--dur-fast);
}
.priority-task:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateX(2px);
}

/* ============================================================
   32. DEEP WORK
   ============================================================ */
.deepwork-widget { display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem; align-items: center; }
.deepwork-timer {
    font-size: 2.1rem;
    font-weight: 700;
    font-family: var(--mono);
    color: #a78bfa;
    letter-spacing: 0.06em;
    min-width: 140px;
    text-shadow: 0 0 24px rgba(167, 139, 250, 0.35);
    font-variant-numeric: tabular-nums;
}
.deepwork-controls { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.deepwork-controls button {
    background: rgba(167, 139, 250, 0.14);
    border: 1px solid #a78bfa;
    color: #a78bfa;
    padding: 0.45rem 1.05rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
}
.deepwork-controls button:hover {
    background: rgba(167, 139, 250, 0.30);
    transform: translateY(-1px);
    box-shadow: 0 0 22px rgba(167, 139, 250, 0.22);
}
.deepwork-stats { font-size: 0.85rem; color: var(--muted); }

/* ============================================================
   33. QUIZ GENERATOR
   ============================================================ */
.quiz-container { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }
.quiz-question {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 0.95rem 1.15rem;
    transition: border-color var(--dur);
}
.quiz-question:hover { border-color: var(--line-2); }
.quiz-question h4 { font-size: 0.95rem; margin-bottom: 0.65rem; color: var(--ink); }
.quiz-options { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-option {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-xs);
    cursor: pointer;
    font-size: 0.85rem;
    transition: all var(--dur-fast) var(--ease);
    text-align: left;
    color: var(--ink);
    font-family: inherit;
}
.quiz-option:hover {
    background: rgba(94, 234, 212, 0.12);
    border-color: var(--accent);
    transform: translateX(2px);
}
.quiz-option.correct {
    background: rgba(110, 231, 183, 0.22);
    border-color: var(--ok);
    color: var(--ok);
}
.quiz-option.wrong {
    background: rgba(252, 165, 165, 0.22);
    border-color: var(--danger);
    color: var(--danger);
}

/* ============================================================
   34. BLOCKER BANNER (dashboard)
   ============================================================ */
.blocker-banner {
    display: flex !important;
    align-items: center;
    gap: 0.65rem;
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.12), rgba(249, 115, 22, 0.08));
    border: 1px solid rgba(252, 165, 165, 0.35);
    border-radius: var(--r);
    padding: 0.75rem 1.05rem;
    margin-bottom: 1.05rem;
    font-size: 0.88rem;
    color: var(--ink);
    flex-wrap: wrap;
    box-shadow: 0 0 40px rgba(220, 38, 38, 0.06);
}
.blocker-banner strong { color: #fca5a5; }
.blocker-count-chip {
    background: rgba(252, 165, 165, 0.18);
    border: 1px solid rgba(252, 165, 165, 0.35);
    color: #fca5a5;
    padding: 0.2rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: 0.76rem;
    font-weight: 700;
}
.blocker-banner-btn {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: var(--ink);
    padding: 0.34rem 0.9rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
}
.blocker-banner-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.blocker-banner-btn[data-act="off"] { margin-left: auto; }

.block-warning { border: 1px solid rgba(252, 165, 165, 0.26); }
.block-warning-inner { display: flex; gap: 1.05rem; align-items: center; }
.block-warning-inner strong { color: var(--danger); }

.blocker-active .nav-links a { opacity: 0.85; }

/* ============================================================
   35. TRASH MODAL
   ============================================================ */
.trash-modal-content { max-width: 600px; max-height: 80vh; overflow-y: auto; }
.trash-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.05rem;
}
.trash-modal-header h2 { font-size: 1.15rem; color: var(--ink); }
.trash-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--r-sm);
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
    transition: background var(--dur-fast);
}
.trash-item:hover { background: rgba(255, 255, 255, 0.06); }

/* ============================================================
   36. PLANNER AI
   ============================================================ */
.planner-ai-section {
    border: 1px solid rgba(196, 181, 253, 0.28);
    box-shadow: var(--shadow), 0 0 40px rgba(196, 181, 253, 0.05);
}
.planner-ai-input { display: flex; gap: 0.65rem; margin: 0.65rem 0; flex-wrap: wrap; }
.planner-ai-input textarea {
    flex: 1;
    min-width: 240px;
    min-height: 68px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--ink);
    padding: 0.75rem 1.05rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    transition: border var(--dur), box-shadow var(--dur);
    line-height: 1.55;
}
.planner-ai-input textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.planner-ai-chips { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 1.05rem; }
.planner-chip {
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    padding: 0.4rem 0.95rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
}
.planner-chip:hover {
    background: rgba(94, 234, 212, 0.24);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.18);
}
.planner-ai-output { margin-top: 1.1rem; }
.planner-ai-summary {
    background: rgba(94, 234, 212, 0.075);
    border-left: 3px solid var(--accent);
    padding: 0.85rem 1.05rem;
    border-radius: var(--r-sm);
    margin-bottom: 1.05rem;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.55;
}
.planner-ai-summary strong { color: var(--accent); }
.planner-ai-summary .tag {
    display: inline-block;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.30);
    padding: 0.06rem 0.55rem;
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    margin: 0 0.2rem;
    color: var(--accent);
}
.planner-ai-preview {
    display: grid;
    gap: 5px;
    overflow-x: auto;
    font-size: 0.7rem;
    margin-bottom: 1.05rem;
    padding-bottom: 0.55rem;
}
.planner-ai-preview .ai-cell {
    background: rgba(94, 234, 212, 0.16);
    border: 1px solid rgba(94, 234, 212, 0.34);
    border-radius: var(--r-xs);
    padding: 0.28rem;
    text-align: center;
    color: var(--ink);
    font-weight: 600;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.planner-ai-preview .ai-cell.empty {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}
.planner-ai-preview .ai-label {
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--r-xs);
    padding: 0.28rem;
    text-align: center;
    color: var(--muted);
    font-weight: 600;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.planner-ai-actions { display: flex; gap: 0.65rem; flex-wrap: wrap; }

/* ============================================================
   37. FOCUS MODE
   ============================================================ */
.focus-indicator-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    background: linear-gradient(90deg, #0f766e, #5eead4, #67e8f9);
    color: #04201a;
    padding: 0.55rem 1.2rem;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 2px 24px rgba(94, 234, 212, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    animation: focusBarPulse 3s ease-in-out infinite;
}
@keyframes focusBarPulse {
    0%, 100% { box-shadow: 0 2px 18px rgba(94, 234, 212, 0.4); }
    50%      { box-shadow: 0 2px 40px rgba(94, 234, 212, 0.88); }
}
body.focus-mode .focus-indicator-bar { display: flex; }
body.focus-mode { padding-top: 36px; }
body.focus-mode .navbar { top: 36px; }

body.focus-mode .non-essential,
body.focus-mode .all-history-section,
body.focus-mode .upcoming-assignments-section,
body.focus-mode .block-warning,
body.focus-mode .journal-section,
body.focus-mode .notice-board,
body.focus-mode .priority-matrix-section {
    display: none !important;
}
body.focus-mode .nav-links a:not(.active) { opacity: 0.42; }
body.focus-mode .nav-links a:not(.active):hover { opacity: 1; }
body.focus-mode::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at top right, rgba(94, 234, 212, 0.10), transparent 55%),
        radial-gradient(circle at bottom left, rgba(167, 139, 250, 0.10), transparent 55%);
}

.focus-indicator-bar .fb-timer {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.18);
    padding: 0.16rem 0.65rem;
    border-radius: var(--r-xs);
    letter-spacing: 0.06em;
    min-width: 62px;
    text-align: center;
}
.focus-indicator-bar .fb-stat { font-weight: 600; font-size: 0.78rem; opacity: 0.92; }
.focus-indicator-bar .fb-stat b { font-family: var(--mono); font-size: 0.85rem; }
.focus-indicator-bar .fb-sep { opacity: 0.5; }
.focus-indicator-bar .fb-end {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #04201a;
    padding: 0.28rem 0.9rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    margin-left: 0.5rem;
    transition: background var(--dur);
}
.focus-indicator-bar .fb-end:hover { background: rgba(0, 0, 0, 0.42); }
.focus-indicator-bar .fb-icon-btn {
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(0, 0, 0, 0.25);
    color: #04201a;
    padding: 0.28rem 0.6rem;
    border-radius: var(--r-pill);
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    transition: background var(--dur);
}
.focus-indicator-bar .fb-icon-btn:hover { background: rgba(0, 0, 0, 0.38); }
.focus-indicator-bar.warning {
    background: linear-gradient(90deg, #b91c1c, #f97316, #b91c1c) !important;
    color: #fff !important;
    animation: focusBarWarn 0.6s ease-in-out infinite alternate;
}
@keyframes focusBarWarn {
    from { box-shadow: 0 2px 18px rgba(220, 38, 38, 0.5); }
    to   { box-shadow: 0 2px 36px rgba(220, 38, 38, 0.9); }
}

/* ============================================================
   38. FOCUS SUMMARY MODAL
   ============================================================ */
.focus-summary-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.focus-summary-modal.open { opacity: 1; pointer-events: auto; }
.focus-summary-panel {
    background: linear-gradient(180deg, rgba(10, 30, 42, 0.98), rgba(5, 15, 25, 0.98));
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: var(--r-xl);
    padding: 2rem 1.9rem 1.6rem;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg), 0 0 80px rgba(94, 234, 212, 0.15);
    transform: translateY(16px) scale(0.96);
    transition: transform 0.35s var(--ease);
}
.focus-summary-modal.open .focus-summary-panel { transform: translateY(0) scale(1); }
.fs-icon {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 26px rgba(94, 234, 212, 0.55));
}
.focus-summary-panel h2 {
    font-family: var(--display);
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 1.25rem;
}
.fs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; margin-bottom: 1.05rem; }
.fs-stat {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--r);
    padding: 0.8rem 0.55rem;
}
.fs-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.fs-val {
    display: block;
    font-family: var(--mono);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.fs-val small { font-size: 0.75rem; color: var(--muted); margin-left: 0.15rem; font-weight: 600; }
.fs-badge {
    display: inline-block;
    padding: 0.38rem 1.05rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(253, 186, 116, 0.14);
    border: 1px solid rgba(253, 186, 116, 0.32);
    color: var(--warn);
    margin-bottom: 0.9rem;
}
.fs-badge.met {
    background: rgba(110, 231, 183, 0.14);
    border-color: rgba(110, 231, 183, 0.42);
    color: var(--ok);
}
.fs-extra {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.85rem;
}
.fs-msg {
    font-size: 0.85rem;
    color: var(--ink);
    margin-bottom: 1.25rem;
    line-height: 1.55;
}
.fs-close {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.10));
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 0.65rem 2.1rem;
    border-radius: var(--r-pill);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
}
.fs-close:hover {
    background: rgba(94, 234, 212, 0.34);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.28);
    transform: translateY(-1px);
}

/* ============================================================
   39. TOASTS
   ============================================================ */
.fbt-toast {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px);
    background: rgba(7, 18, 30, 0.98);
    border: 1px solid var(--accent);
    color: var(--ink);
    padding: 0.75rem 1.4rem;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(94, 234, 212, 0.15);
    z-index: 10100;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease);
}
.fbt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fbt-toast.ok { border-color: var(--ok); }

/* ============================================================
   40. BLOCKED POPUP
   ============================================================ */
.blocker-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 980;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.blocker-modal.open { opacity: 1; pointer-events: auto; }
.blocker-modal-panel {
    background: linear-gradient(180deg, rgba(32, 10, 15, 0.98), rgba(15, 5, 8, 0.98));
    border: 1px solid rgba(252, 165, 165, 0.35);
    border-radius: var(--r-lg);
    padding: 1.9rem 1.7rem 1.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg), 0 0 70px rgba(252, 165, 165, 0.16);
    transform: translateY(12px) scale(0.96);
    transition: transform 0.28s var(--ease);
}
.blocker-modal.open .blocker-modal-panel { transform: translateY(0) scale(1); }
.blocker-modal-icon {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 0.65rem;
    filter: drop-shadow(0 0 20px rgba(252, 165, 165, 0.55));
    animation: blockPulse 1.6s ease-in-out infinite;
}
@keyframes blockPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}
.blocker-modal-panel h3 {
    font-family: var(--display);
    font-size: 1.55rem;
    color: #fca5a5;
    margin-bottom: 0.45rem;
}
.blocker-domain {
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--ink);
    background: rgba(0, 0, 0, 0.32);
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-sm);
    display: inline-block;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(252, 165, 165, 0.22);
}
.blocker-cat { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.75rem; }
.blocker-msg {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}
.blocker-actions { display: flex; gap: 0.55rem; justify-content: center; flex-wrap: wrap; }
.blocker-actions button {
    padding: 0.65rem 1.35rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    border: 1px solid transparent;
    transition: all var(--dur);
}
.btn-allow-once {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.13);
    color: var(--muted);
}
.btn-allow-once:hover {
    border-color: rgba(255, 255, 255, 0.32);
    color: var(--ink);
}
.btn-close-blocker {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.10));
    border-color: var(--accent);
    color: var(--accent);
}
.btn-close-blocker:hover {
    background: rgba(94, 234, 212, 0.34);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.24);
    transform: translateY(-1px);
}

/* ============================================================
   41. BLOCKER SETTINGS / LOG
   ============================================================ */
.blocker-settings-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 970;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.blocker-settings-modal.open { opacity: 1; pointer-events: auto; }
.blocker-settings-panel {
    background: rgba(7, 18, 30, 0.98);
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-radius: var(--r-lg);
    padding: 1.35rem 1.45rem;
    max-width: 540px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg), 0 0 60px rgba(94, 234, 212, 0.08);
    transform: translateY(12px) scale(0.97);
    transition: transform 0.25s var(--ease);
}
.blocker-settings-modal.open .blocker-settings-panel { transform: translateY(0) scale(1); }
.blocker-settings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.blocker-settings-head h2 {
    font-family: var(--display);
    font-size: 1.18rem;
    color: var(--ink);
}
.bs-close {
    background: rgba(252, 165, 165, 0.16);
    border: 1px solid rgba(252, 165, 165, 0.32);
    color: #fca5a5;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur);
}
.bs-close:hover { background: rgba(252, 165, 165, 0.32); transform: scale(1.08); }
.bs-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.05rem; line-height: 1.55; }
.bs-section { margin-bottom: 1.25rem; }
.bs-section h3 {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 0.65rem;
}
.bs-cats { display: flex; flex-direction: column; gap: 0.5rem; }
.bs-cat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--r-sm);
    padding: 0.65rem 0.9rem;
    cursor: pointer;
    transition: all var(--dur);
    font-size: 0.88rem;
}
.bs-cat:hover {
    border-color: rgba(94, 234, 212, 0.38);
    background: rgba(94, 234, 212, 0.055);
}
.bs-cat input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.32);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all var(--dur);
}
.bs-cat input:checked { background: var(--accent); border-color: var(--accent); }
.bs-cat input:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: #04201a;
    font-size: 0.75rem;
    font-weight: 900;
}
.bs-cat span:nth-child(2) { flex: 1; font-weight: 500; }
.bs-cat-count {
    font-size: 0.7rem;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.12rem 0.6rem;
    border-radius: var(--r-pill);
    font-family: var(--mono);
}
.bs-add-row { display: flex; gap: 0.55rem; margin-bottom: 0.65rem; }
.bs-add-row input {
    flex: 1;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--r-sm);
    color: var(--ink);
    padding: 0.55rem 0.85rem;
    font-family: inherit;
    font-size: 0.88rem;
    transition: border var(--dur);
}
.bs-add-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.bs-add-btn {
    background: rgba(94, 234, 212, 0.16);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 0.55rem 1.05rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.82rem;
    transition: all var(--dur);
}
.bs-add-btn:hover { background: rgba(94, 234, 212, 0.28); }
.bs-custom-list { display: flex; flex-direction: column; gap: 0.35rem; }
.bs-custom-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.45rem 0.75rem;
    border-radius: var(--r-xs);
    font-size: 0.82rem;
    font-family: var(--mono);
    transition: background var(--dur);
}
.bs-custom-item:hover { background: rgba(255, 255, 255, 0.06); }
.bs-custom-item.bs-allowed { background: rgba(110, 231, 183, 0.065); }
.bs-custom-item button {
    background: rgba(252, 165, 165, 0.16);
    border: 1px solid rgba(252, 165, 165, 0.32);
    color: #fca5a5;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur);
}
.bs-custom-item button:hover { background: rgba(252, 165, 165, 0.32); }
.bs-empty {
    font-size: 0.8rem;
    color: var(--muted);
    font-style: italic;
    padding: 0.45rem 0;
}
.bs-stats {
    display: flex;
    gap: 1.05rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.bs-stat {
    flex: 1;
    text-align: center;
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--r-sm);
    padding: 0.75rem 0.45rem;
}
.bs-stat b {
    display: block;
    font-size: 1.35rem;
    color: var(--accent);
    font-family: var(--mono);
    line-height: 1.1;
}
.bs-stat span {
    font-size: 0.68rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.blocker-log-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 52vh;
    overflow-y: auto;
}
.blocker-log-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--r-xs);
    transition: background var(--dur-fast);
}
.blocker-log-item:hover { background: rgba(255, 255, 255, 0.06); }
.bl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fca5a5;
    box-shadow: 0 0 12px rgba(252, 165, 165, 0.65);
    flex-shrink: 0;
}
.bl-info { flex: 1; }
.bl-domain {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--ink);
    font-family: var(--mono);
}
.bl-meta {
    display: block;
    font-size: 0.7rem;
    color: var(--muted);
    margin-top: 0.15rem;
}

/* ============================================================
   42. THEME TOGGLE
   ============================================================ */
.theme-toggle-btn {
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.24), rgba(192, 132, 252, 0.10));
    border: 1px solid rgba(192, 132, 252, 0.55);
    color: #c084fc;
    padding: 0.34rem 0.9rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 700;
    transition: all var(--dur);
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(192, 132, 252, 0.24);
}
.theme-toggle-btn:hover {
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.34), rgba(192, 132, 252, 0.18));
    border-color: #c084fc;
    color: #e9d5ff;
    box-shadow: 0 0 26px rgba(192, 132, 252, 0.48);
    transform: translateY(-1px);
}

/* ============================================================
   43. THEME PICKER
   ============================================================ */
.theme-picker-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.28), rgba(192, 132, 252, 0.28));
    border: 1px solid rgba(94, 234, 212, 0.55);
    color: var(--accent);
    font-size: 1.55rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 36px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(94, 234, 212, 0.24);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.theme-picker-fab:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.55),
        0 0 40px rgba(94, 234, 212, 0.42);
}
.theme-picker-fab:active { transform: translateY(0) scale(0.96); }

.theme-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) ease;
}
.theme-picker-overlay.open { opacity: 1; pointer-events: auto; }
.theme-picker-panel {
    background: rgba(7, 18, 30, 0.98);
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-radius: var(--r-lg);
    padding: 1.45rem 1.55rem;
    width: 100%;
    max-width: 660px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.3s var(--ease);
}
.theme-picker-overlay.open .theme-picker-panel { transform: translateY(0) scale(1); }

.theme-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.05rem;
    padding-bottom: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.theme-picker-header h2 {
    font-family: var(--display);
    font-size: 1.18rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.theme-picker-close {
    background: rgba(252, 165, 165, 0.16);
    border: 1px solid rgba(252, 165, 165, 0.32);
    color: #fca5a5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur);
}
.theme-picker-close:hover { background: rgba(252, 165, 165, 0.32); transform: scale(1.06); }

.theme-picker-tabs { display: flex; gap: 0.45rem; margin-bottom: 1.05rem; }
.theme-picker-tab {
    flex: 1;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--muted);
    padding: 0.6rem 1.05rem;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
}
.theme-picker-tab:hover { color: var(--accent); border-color: var(--accent); }
.theme-picker-tab.active {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.10));
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.18);
}

.theme-picker-body { display: block; }
.theme-picker-section { display: none; }
.theme-picker-section.active { display: block; }
.theme-picker-section h3 {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    font-weight: 700;
    margin: 1.05rem 0 0.75rem 0;
}
.theme-picker-section h3:first-child { margin-top: 0; }

.theme-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
}
.theme-swatch {
    background: rgba(255, 255, 255, 0.045);
    border: 2px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--r);
    padding: 0.65rem;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    text-align: center;
    font-family: inherit;
    color: var(--ink);
    position: relative;
}
.theme-swatch:hover {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-3px);
}
.theme-swatch.active {
    border-color: var(--accent);
    box-shadow:
        0 0 0 2px rgba(94, 234, 212, 0.26),
        0 0 26px rgba(94, 234, 212, 0.20);
}
.theme-swatch .swatch-dots {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 0.55rem;
}
.theme-swatch .swatch-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.theme-swatch .swatch-name { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.theme-swatch .swatch-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #04201a;
    font-size: 0.7rem;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
}
.theme-swatch.active .swatch-check { display: flex; }

.theme-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}
.theme-bg-thumb {
    aspect-ratio: 16 / 10;
    border-radius: var(--r-sm);
    border: 2px solid rgba(255, 255, 255, 0.09);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.theme-bg-thumb:hover {
    border-color: rgba(255, 255, 255, 0.32);
    transform: scale(1.03);
}
.theme-bg-thumb.active {
    border-color: var(--accent);
    box-shadow:
        0 0 0 2px rgba(94, 234, 212, 0.32),
        0 0 24px rgba(94, 234, 212, 0.28);
}
.theme-bg-thumb .bg-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88));
    color: #fff;
    letter-spacing: 0.02em;
}
.theme-bg-thumb .bg-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #04201a;
    font-size: 0.72rem;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
}
.theme-bg-thumb.active .bg-check { display: flex; }

.theme-picker-actions {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.theme-picker-actions button {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: var(--ink);
    padding: 0.6rem 1.25rem;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
}
.theme-picker-actions button:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}
.theme-picker-actions .reset-btn {
    border-color: rgba(252, 165, 165, 0.32);
    color: #fca5a5;
}
.theme-picker-actions .reset-btn:hover {
    background: rgba(252, 165, 165, 0.16);
    border-color: #fca5a5;
    color: #fca5a5;
}

/* ============================================================
   44. SEARCH SHORTCUTS
   ============================================================ */
.shortcuts-block {
    margin: 1.6rem auto 0;
    max-width: 780px;
    text-align: center;
}
.shortcuts-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}
.shortcuts-title::before,
.shortcuts-title::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 80px;
}
.shortcuts-title::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16)); }
.shortcuts-title::after  { background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent); }

.shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.05rem;
    justify-content: center;
}
.shortcut-tile {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--r);
    padding: 0.95rem 0.55rem 0.75rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    font-family: inherit;
    transition: all var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    aspect-ratio: 1 / 1;
    justify-content: center;
}
.shortcut-tile:hover {
    background: rgba(94, 234, 212, 0.10);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(94, 234, 212, 0.18);
}
.shortcut-tile .sc-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.065);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}
.shortcut-tile .sc-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-sm);
}
.shortcut-tile .sc-logo .sc-fallback {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
}
.shortcut-tile .sc-name {
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.shortcut-tile .sc-delete,
.shortcut-tile .sc-edit {
    position: absolute;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.65rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-family: inherit;
    z-index: 2;
    transition: all var(--dur-fast);
}
.shortcut-tile .sc-edit {
    left: 6px;
    background: rgba(94, 234, 212, 0.22);
    border: 1px solid rgba(94, 234, 212, 0.5);
    color: #5eead4;
}
.shortcut-tile .sc-delete {
    right: 6px;
    background: rgba(252, 165, 165, 0.22);
    border: 1px solid rgba(252, 165, 165, 0.42);
    color: #fca5a5;
}
.shortcut-tile:hover .sc-edit,
.shortcut-tile:hover .sc-delete { display: flex; }
.shortcut-tile .sc-edit:hover { background: rgba(94, 234, 212, 0.42); }
.shortcut-tile .sc-delete:hover { background: rgba(252, 165, 165, 0.42); }

.shortcut-add-tile {
    background: rgba(94, 234, 212, 0.055);
    border: 2px dashed rgba(94, 234, 212, 0.38);
    border-radius: var(--r);
    padding: 0.95rem 0.55rem;
    cursor: pointer;
    color: var(--accent);
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    aspect-ratio: 1 / 1;
    transition: all var(--dur) var(--ease);
}
.shortcut-add-tile:hover {
    background: rgba(94, 234, 212, 0.16);
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(94, 234, 212, 0.20);
}
.shortcut-add-tile .add-plus { font-size: 1.75rem; font-weight: 300; line-height: 1; }
.shortcut-add-tile .add-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; }

.shortcuts-empty {
    color: var(--muted);
    font-size: 0.82rem;
    padding: 0.55rem 0 1.05rem;
    font-style: italic;
}

.shortcut-modal {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 960;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur);
}
.shortcut-modal.open { opacity: 1; pointer-events: auto; }
.shortcut-modal-panel {
    background: rgba(7, 18, 30, 0.98);
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-radius: var(--r-lg);
    padding: 1.35rem 1.45rem;
    width: 100%;
    max-width: 450px;
    box-shadow: var(--shadow-lg);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.25s var(--ease);
}
.shortcut-modal.open .shortcut-modal-panel { transform: translateY(0) scale(1); }
.shortcut-modal-panel h3 {
    font-family: var(--display);
    font-size: 1.08rem;
    margin-bottom: 0.95rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.shortcut-modal-panel .field { margin-bottom: 0.85rem; }
.shortcut-modal-panel label {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.shortcut-modal-panel input {
    width: 100%;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--r-sm);
    color: var(--ink);
    padding: 0.7rem 0.95rem;
    font-family: inherit;
    font-size: 0.92rem;
    transition: border var(--dur), box-shadow var(--dur);
}
.shortcut-modal-panel input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.shortcut-modal-panel .hint {
    font-size: 0.72rem;
    color: var(--muted);
    margin-top: 0.35rem;
    line-height: 1.45;
}
.shortcut-modal-panel .btn-row {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    margin-top: 1.05rem;
    padding-top: 0.95rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.shortcut-modal-panel .btn-row button {
    padding: 0.6rem 1.25rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
    border: 1px solid transparent;
}
.shortcut-modal-panel .btn-cancel {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.11);
    color: var(--ink);
}
.shortcut-modal-panel .btn-cancel:hover { border-color: var(--accent); color: var(--accent); }
.shortcut-modal-panel .btn-save {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.10));
    border-color: var(--accent);
    color: var(--accent);
}
.shortcut-modal-panel .btn-save:hover {
    background: rgba(94, 234, 212, 0.34);
    box-shadow: 0 0 22px rgba(94, 234, 212, 0.24);
}

.shortcut-block-toast {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%) translateY(-14px);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.96), rgba(153, 27, 27, 0.96));
    border: 1px solid rgba(252, 165, 165, 0.6);
    color: #fff;
    padding: 0.85rem 1.25rem;
    border-radius: var(--r);
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 500px;
    box-shadow: 0 18px 44px rgba(220, 38, 38, 0.45);
    z-index: 970;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s var(--ease);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    line-height: 1.45;
}
.shortcut-block-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.shortcut-block-toast .toast-close {
    background: rgba(255, 255, 255, 0.22);
    border: none;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--dur);
}
.shortcut-block-toast .toast-close:hover { background: rgba(255, 255, 255, 0.38); }

/* ============================================================
   45. RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .burger-menu { display: block; }
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 0.75rem 0;
        gap: 0.25rem;
        border-top: 1px solid var(--line);
        margin-top: 0.5rem;
        align-items: stretch;
    }
    .nav-links.open { display: flex; }
    .nav-links a { width: 100%; padding: 0.5rem 0.85rem; font-size: 0.9rem; }
    .nav-right { margin-left: auto; }
    .clock-section { flex-direction: column; align-items: stretch; text-align: center; }
    .clock-container { justify-content: center; }
    .clock-date { margin-left: 0; width: 100%; text-align: center; }
    .dash-header { flex-direction: column; align-items: stretch; text-align: center; }
    .dash-date-badge { justify-content: center; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
    .planner-grid { font-size: 0.6rem; grid-template-columns: 40px repeat(7, 1fr); }
    .planner-grid .planner-cell { min-height: 30px; }
    .pomodoro-widget { flex-direction: column; align-items: stretch; text-align: center; }
    .pomodoro-controls { justify-content: center; }
    .flex-wrap .input-dark { min-width: 100px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .grid-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
    .pomodoro-journal-wrapper { grid-template-columns: 1fr 1fr; }
    .calendar-widget, .calculator-widget { align-self: stretch; }
    .calculator-widget { min-width: auto; width: 100%; }
}

/* ============================================================
   46. RESPONSIVE — 640px
   ============================================================ */
@media (max-width: 640px) {
    .container { padding: 0.9rem; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .stat-card { padding: 0.7rem; gap: 0.6rem; }
    .stat-icon { font-size: 1.25rem; width: 2.1rem; }
    .stat-number { font-size: 1.25rem; }
    .tools-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
    .glass-card { padding: 1.05rem; border-radius: var(--r-sm); }
    .dash-header h1 { font-size: 1.55rem; }
    .digital-clock { font-size: 1.55rem; }
    .pomodoro-timer { font-size: 2rem; }
    .planner-grid { font-size: 0.5rem; grid-template-columns: 30px repeat(7, 1fr); gap: 2px; }
    .planner-grid .planner-cell { min-height: 24px; padding: 0.15rem; }
    .assignment-item { flex-direction: column; align-items: flex-start; }
    .nav-brand { font-size: 1.18rem; }
    .nav-date { display: none; }
    .habit-add-form, .notice-add-form, .note-add-form { flex-direction: column; align-items: stretch; }
    .habit-add-section, .notice-add-section, .note-add-section { flex-direction: column; align-items: stretch; }
    .upload-actions { flex-direction: column; }
    .block-warning-inner { flex-direction: column; text-align: center; }
    .grid-right { grid-template-columns: 1fr; }
    .pomodoro-journal-wrapper { grid-template-columns: 1fr; }
    .search-section .search-box { flex-direction: column; }
    .search-section .search-box button { width: 100%; }
    .priority-grid { grid-template-columns: 1fr; }
    .deepwork-timer { font-size: 1.6rem; }
    .shortcuts-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 0.55rem; }
    .shortcut-tile .sc-logo { width: 34px; height: 34px; }
    .shortcut-tile .sc-name { font-size: 0.66rem; }
    .theme-picker-panel { padding: 1.15rem; }
    #analogCanvas {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
    }
}

/* ============================================================
   47. LIGHT THEME PALETTE
   ============================================================ */
body.theme-light {
    --ink: #0f172a;
    --ink-2: #1e293b;
    --muted: #475569;
    --faint: #64748b;
    --ghost: #94a3b8;
    --line: rgba(15, 23, 42, 0.14);
    --line-2: rgba(15, 23, 42, 0.22);
    --line-strong: rgba(13, 148, 136, 0.35);
    --surface: rgba(255, 255, 255, 0.88);
    --surface-2: rgba(15, 23, 42, 0.04);
    --surface-3: rgba(15, 23, 42, 0.07);
    --surface-raised: rgba(255, 255, 255, 0.95);
    --accent: #0d9488;
    --accent-2: #0284c7;
    --brand: #7c3aed;
    --brand-hot: #9333ea;
    --ok: #059669;
    --warn: #d97706;
    --danger: #dc2626;
    --info: #0284c7;
    --shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.08);
    --shadow: 0 12px 40px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.16);
    background:
        radial-gradient(1400px 700px at 6% -12%, rgba(13, 148, 136, 0.10), transparent 55%),
        radial-gradient(1000px 560px at 100% -4%, rgba(124, 58, 237, 0.10), transparent 52%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 55%, #e2e8f0 100%) !important;
    color: var(--ink);
}
body.theme-light::before { opacity: 0.5; }

body.theme-light .navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}
body.theme-light .nav-links a { color: #475569; }
body.theme-light .nav-links a:hover { background: rgba(13, 148, 136, 0.10); color: #0f172a; }
body.theme-light .nav-links a.active {
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.16), rgba(2, 132, 199, 0.06));
    color: #0d9488;
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.30);
}
body.theme-light .footer {
    background: rgba(255, 255, 255, 0.78);
    border-top-color: rgba(15, 23, 42, 0.08);
    color: #64748b;
}
body.theme-light .digital-clock {
    color: #0d9488;
    text-shadow: 0 0 18px rgba(13, 148, 136, 0.25);
}
body.theme-light #analogCanvas {
    filter: drop-shadow(0 8px 24px rgba(13, 148, 136, 0.20));
}
body.theme-light .glass-card { box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08); }
body.theme-light .glass-card:hover {
    box-shadow: 0 16px 50px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(13, 148, 136, 0.10);
}
body.theme-light .stat-card { background: rgba(15, 23, 42, 0.03); }
body.theme-light .stat-number { color: #0f172a; }
body.theme-light .input-dark,
body.theme-light .habit-add-form input,
body.theme-light .notice-add-form input,
body.theme-light .note-add-form input,
body.theme-light .ai-recommend-input input,
body.theme-light .search-box input,
body.theme-light .search-section .search-box input,
body.theme-light .journal-area textarea,
body.theme-light .ai-recommend-result,
body.theme-light .tool-panel input,
body.theme-light .tool-panel select,
body.theme-light .tool-panel textarea,
body.theme-light .file-note-input,
body.theme-light .planner-ai-input textarea,
body.theme-light .cp-content input,
body.theme-light .calc-display,
body.theme-light .matrix-grid input {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}
body.theme-light .sci-display {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
}
body.theme-light .sci-expr { color: #64748b; }
body.theme-light .sci-result { color: #0d9488; text-shadow: 0 0 12px rgba(13, 148, 136, 0.20); }
body.theme-light .sci-btn {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.10);
}
body.theme-light .sci-btn:hover { background: rgba(13, 148, 136, 0.10); border-color: #0d9488; }
body.theme-light .sci-btn.fn { background: rgba(124, 58, 237, 0.06); color: #7c3aed; border-color: rgba(124, 58, 237, 0.20); }
body.theme-light .sci-btn.op { background: rgba(217, 119, 6, 0.06); color: #d97706; border-color: rgba(217, 119, 6, 0.25); }
body.theme-light .sci-btn.eq { background: linear-gradient(180deg, rgba(13, 148, 136, 0.18), rgba(13, 148, 136, 0.06)); color: #0d9488; border-color: #0d9488; }
body.theme-light .sci-btn.danger { background: rgba(220, 38, 38, 0.06); color: #dc2626; border-color: rgba(220, 38, 38, 0.22); }
body.theme-light .sci-btn.mode { background: rgba(5, 150, 105, 0.06); color: #059669; border-color: rgba(5, 150, 105, 0.25); }
body.theme-light .sci-btn.mode.on { background: rgba(13, 148, 136, 0.18); color: #0d9488; border-color: #0d9488; }
body.theme-light .sci-display-top .ind span { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.08); color: #64748b; }
body.theme-light .sci-display-top .ind span.on { background: rgba(13, 148, 136, 0.20); color: #0d9488; border-color: rgba(13, 148, 136, 0.40); }
body.theme-light .calc-tab { background: rgba(15, 23, 42, 0.04); color: #475569; border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .calc-tab:hover { color: #0d9488; border-color: #0d9488; }
body.theme-light .calc-tab.active {
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.16), rgba(13, 148, 136, 0.06));
    color: #0d9488;
    border-color: #0d9488;
}
body.theme-light .mem-row { color: #64748b; border-top-color: rgba(15, 23, 42, 0.10); }
body.theme-light .mem-row button { background: rgba(15, 23, 42, 0.04); color: #0f172a; border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .hist-box { background: rgba(15, 23, 42, 0.03); }
body.theme-light .hist-item { color: #475569; }
body.theme-light .hist-item:hover { background: rgba(13, 148, 136, 0.08); color: #0d9488; }
body.theme-light .hist-item .res { color: #0d9488; }
body.theme-light .tool-result { background: rgba(13, 148, 136, 0.06); color: #0f172a; border-left-color: #0d9488; }
body.theme-light .tool-result.err { background: rgba(220, 38, 38, 0.06); border-left-color: #dc2626; color: #dc2626; }
body.theme-light .matrix-block { background: rgba(15, 23, 42, 0.03); }
body.theme-light .upload-area { background: rgba(13, 148, 136, 0.04); border-color: rgba(13, 148, 136, 0.35); }
body.theme-light .upload-area:hover { background: rgba(13, 148, 136, 0.08); }
body.theme-light .tool-card { background: rgba(15, 23, 42, 0.03); }
body.theme-light .planner-grid .planner-cell { background: rgba(15, 23, 42, 0.03); color: #0f172a; border-color: rgba(15, 23, 42, 0.08); }
body.theme-light .planner-grid .planner-cell.filled { background: rgba(13, 148, 136, 0.14); border-color: #0d9488; }
body.theme-light .planner-grid .time-label { background: rgba(15, 23, 42, 0.03); color: #64748b; }
body.theme-light .activity-item { color: #0f172a; }
body.theme-light .activity-item .time { color: #64748b; }
body.theme-light .empty-state { color: #64748b; }
body.theme-light .notice-item { background: rgba(13, 148, 136, 0.05); border-left-color: #0d9488; color: #0f172a; }
body.theme-light .flashcard-review .card-front,
body.theme-light .flashcard-review .card-back {
    background: rgba(13, 148, 136, 0.06);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.10);
}
body.theme-light .flashcard-difficulty button { background: rgba(15, 23, 42, 0.04); color: #0f172a; border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .quiz-question { background: rgba(15, 23, 42, 0.03); }
body.theme-light .quiz-option { background: rgba(15, 23, 42, 0.03); color: #0f172a; border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .key-btn { background: rgba(15, 23, 42, 0.04); color: #0f172a; border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .key-btn.special { background: rgba(13, 148, 136, 0.10); color: #0d9488; }
body.theme-light .keyboard-container,
body.theme-light .search-section .keyboard-container {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(15, 23, 42, 0.10);
}
body.theme-light .suggestions-list {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.10);
}
body.theme-light .suggestion-item { color: #0f172a; border-bottom-color: rgba(15, 23, 42, 0.06); }
body.theme-light .calendar-modal-content,
body.theme-light .trash-modal-content,
body.theme-light .cp-content {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15);
}
body.theme-light .calendar-modal,
body.theme-light .trash-modal,
body.theme-light .command-palette { background: rgba(15, 23, 42, 0.35); }
body.theme-light .calendar-modal-header span { color: #0f172a; }
body.theme-light .calendar-grid .cal-cell { color: #0f172a; }
body.theme-light .calendar-grid .cal-cell.today {
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.28), rgba(13, 148, 136, 0.14));
    color: #0f172a;
    box-shadow: 0 0 18px rgba(13, 148, 136, 0.30);
}
body.theme-light .trash-item { background: rgba(15, 23, 42, 0.03); color: #0f172a; }
body.theme-light .blocker-banner { background: rgba(220, 38, 38, 0.06); color: #dc2626; }
body.theme-light .blocker-banner strong { color: #dc2626; }
body.theme-light .blocker-count-chip { background: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.32); color: #dc2626; }
body.theme-light .blocker-banner-btn { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.10); color: #0f172a; }
body.theme-light .btn-primary {
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.16), rgba(13, 148, 136, 0.06));
    color: #0d9488;
    border-color: #0d9488;
}
body.theme-light .btn-primary-sm { background: rgba(13, 148, 136, 0.10); color: #0d9488; border-color: #0d9488; }
body.theme-light .btn-danger { background: rgba(220, 38, 38, 0.08); color: #dc2626; border-color: rgba(220, 38, 38, 0.30); }
body.theme-light .btn-danger-sm { background: rgba(220, 38, 38, 0.08); color: #dc2626; border-color: rgba(220, 38, 38, 0.30); }
body.theme-light .habit-item .complete-btn { background: rgba(5, 150, 105, 0.08); color: #059669; border-color: rgba(5, 150, 105, 0.30); }
body.theme-light .habit-item .complete-btn.done { background: rgba(13, 148, 136, 0.14); color: #0d9488; border-color: #0d9488; }
body.theme-light .priority-quadrant.q1 { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.20); }
body.theme-light .priority-quadrant.q2 { background: rgba(5, 150, 105, 0.06); border-color: rgba(5, 150, 105, 0.20); }
body.theme-light .priority-quadrant.q3 { background: rgba(217, 119, 6, 0.06); border-color: rgba(217, 119, 6, 0.20); }
body.theme-light .priority-quadrant.q4 { background: rgba(100, 116, 139, 0.06); border-color: rgba(100, 116, 139, 0.20); }
body.theme-light .priority-task { background: rgba(15, 23, 42, 0.04); color: #0f172a; }
body.theme-light .planner-ai-summary { background: rgba(13, 148, 136, 0.06); color: #0f172a; border-left-color: #0d9488; }
body.theme-light .planner-ai-summary strong { color: #0d9488; }
body.theme-light .planner-ai-summary .tag { background: rgba(13, 148, 136, 0.12); color: #0d9488; border-color: rgba(13, 148, 136, 0.28); }
body.theme-light .planner-chip { background: rgba(13, 148, 136, 0.08); color: #0d9488; border-color: rgba(13, 148, 136, 0.30); }
body.theme-light .planner-ai-preview .ai-cell { background: rgba(13, 148, 136, 0.14); color: #0f172a; border-color: rgba(13, 148, 136, 0.30); }
body.theme-light .planner-ai-preview .ai-label { background: rgba(15, 23, 42, 0.03); color: #64748b; }
body.theme-light .sum-block { background: rgba(13, 148, 136, 0.06); border-color: rgba(13, 148, 136, 0.18); border-left-color: #0d9488; }
body.theme-light .sum-block.sum-tldr { background: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(124, 58, 237, 0.08)); }
body.theme-light .sum-body { color: #0f172a; }
body.theme-light .sum-body mark { background: rgba(13, 148, 136, 0.20); color: #0d9488; }
body.theme-light .sum-points li { color: #0f172a; }
body.theme-light .sum-points li mark { background: rgba(13, 148, 136, 0.16); color: #0d9488; }
body.theme-light .sum-kw { background: rgba(124, 58, 237, 0.10); color: #7c3aed; border-color: rgba(124, 58, 237, 0.28); }
body.theme-light .sum-stats { color: #64748b; border-top-color: rgba(15, 23, 42, 0.08); }
body.theme-light .sum-stats b { color: #0d9488; }
body.theme-light .sum-copy { background: rgba(13, 148, 136, 0.10); color: #0d9488; border-color: rgba(13, 148, 136, 0.30); }
body.theme-light .ai-badge { background: rgba(124, 58, 237, 0.10); color: #7c3aed; border-color: rgba(124, 58, 237, 0.28); }
body.theme-light .ai-recommend-input button { background: rgba(13, 148, 136, 0.14); color: #0d9488; border-color: #0d9488; }
body.theme-light .search-box button,
body.theme-light .search-section .search-box button {
    background: rgba(13, 148, 136, 0.14);
    color: #0d9488;
    border-color: #0d9488;
}
body.theme-light .keyboard-toggle,
body.theme-light .search-section .keyboard-toggle {
    background: rgba(13, 148, 136, 0.10);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.30);
}
body.theme-light .clock-toggle { background: rgba(13, 148, 136, 0.10); color: #0d9488; border-color: rgba(13, 148, 136, 0.40); }
body.theme-light .pomodoro-timer { color: #7c3aed; text-shadow: 0 0 18px rgba(124, 58, 237, 0.20); }
body.theme-light .pomodoro-controls button,
body.theme-light .pomodoro-task-select { background: rgba(124, 58, 237, 0.08); color: #7c3aed; border-color: rgba(124, 58, 237, 0.30); }
body.theme-light .pomodoro-sound-select { background: rgba(124, 58, 237, 0.08); color: #7c3aed; border-color: rgba(124, 58, 237, 0.30); }
body.theme-light .deepwork-timer { color: #7c3aed; text-shadow: 0 0 18px rgba(124, 58, 237, 0.20); }
body.theme-light .deepwork-controls button { background: rgba(124, 58, 237, 0.08); color: #7c3aed; border-color: rgba(124, 58, 237, 0.30); }
body.theme-light .deepwork-stats { color: #64748b; }
body.theme-light .streak-number { color: #d97706; text-shadow: none; }
body.theme-light .clock-section { background: rgba(255, 255, 255, 0.78); }
body.theme-light .calendar-widget { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .cal-date { color: #0d9488; text-shadow: none; }
body.theme-light .cal-day, body.theme-light .cal-month { color: #64748b; }
body.theme-light .calculator-widget { background: rgba(255, 255, 255, 0.72); border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .journal-past { color: #64748b; }
body.theme-light #langSelector {
    background: rgba(255, 255, 255, 0.88) !important;
    color: #0f172a !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}
body.theme-light .focus-toggle { background: rgba(255, 255, 255, 0.72); color: #0f172a; border-color: rgba(15, 23, 42, 0.12); }
body.theme-light .focus-toggle:hover { border-color: #0d9488; color: #0d9488; }
body.theme-light .focus-toggle.active {
    background: rgba(13, 148, 136, 0.14);
    color: #0d9488;
    border-color: #0d9488;
    box-shadow: 0 0 20px rgba(13, 148, 136, 0.22);
}
body.theme-light .tags { color: #7c3aed; }
body.theme-light .file-item .file-name { color: #0d9488; }
body.theme-light .notice-count { background: rgba(13, 148, 136, 0.10); color: #0d9488; }
body.theme-light .section-badge { background: rgba(15, 23, 42, 0.04); color: #64748b; border-color: rgba(15, 23, 42, 0.10); }
body.theme-light .hl-cyan    { color: #0e7490; }
body.theme-light .hl-magenta { color: #be185d; }
body.theme-light .hl-green   { color: #047857; }
body.theme-light .hl-orange  { color: #c2410c; }
body.theme-light .hl-purple  { color: #6d28d9; }
body.theme-light .hl-pink    { color: #be185d; }
body.theme-light .hl-blue    { color: #0369a1; }
body.theme-light .hl-red     { color: #b91c1c; }
body.theme-light .neon-text { text-shadow: none; }
body.theme-light .brand-highlight {
    background: linear-gradient(90deg, #0d9488, #0284c7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
body.theme-light .theme-toggle-btn {
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.14), rgba(124, 58, 237, 0.05));
    border-color: rgba(124, 58, 237, 0.50);
    color: #7c3aed;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.18);
}
body.theme-light .theme-toggle-btn:hover {
    background: rgba(124, 58, 237, 0.22);
    border-color: #7c3aed;
    color: #6d28d9;
    box-shadow: 0 0 22px rgba(124, 58, 237, 0.38);
}
body.theme-light .theme-picker-panel {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(13, 148, 136, 0.30);
}
body.theme-light .theme-picker-header { border-bottom-color: rgba(15, 23, 42, 0.08); }
body.theme-light .theme-picker-header h2 { color: #0f172a; }
body.theme-light .theme-picker-tab { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.08); color: #475569; }
body.theme-light .theme-picker-tab.active {
    background: linear-gradient(180deg, rgba(13, 148, 136, 0.16), rgba(13, 148, 136, 0.06));
    color: #0d9488;
    border-color: #0d9488;
}
body.theme-light .theme-swatch { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: #0f172a; }
body.theme-light .theme-swatch:hover { border-color: rgba(15, 23, 42, 0.2); }
body.theme-light .theme-swatch.active { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.20); }
body.theme-light .theme-swatch .swatch-name { color: #0f172a; }
body.theme-light .theme-bg-thumb { border-color: rgba(15, 23, 42, 0.08); }
body.theme-light .theme-bg-thumb.active { border-color: #0d9488; box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25); }
body.theme-light .theme-picker-actions { border-top-color: rgba(15, 23, 42, 0.08); }
body.theme-light .theme-picker-actions button { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.10); color: #0f172a; }
body.theme-light .theme-picker-section h3 { color: #64748b; }
body.theme-light .shortcut-tile { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: #0f172a; }
body.theme-light .shortcut-tile:hover { background: rgba(13, 148, 136, 0.10); border-color: #0d9488; }
body.theme-light .shortcut-tile .sc-logo { background: rgba(15, 23, 42, 0.06); }
body.theme-light .shortcut-add-tile { background: rgba(13, 148, 136, 0.05); border-color: rgba(13, 148, 136, 0.35); color: #0d9488; }
body.theme-light .shortcut-add-tile:hover { background: rgba(13, 148, 136, 0.14); border-color: #0d9488; }
body.theme-light .shortcut-modal-panel { background: rgba(255, 255, 255, 0.98); border-color: rgba(13, 148, 136, 0.28); }
body.theme-light .shortcut-modal-panel h3 { color: #0f172a; }
body.theme-light .shortcut-modal-panel input { background: rgba(255, 255, 255, 0.92); color: #0f172a; border-color: rgba(15, 23, 42, 0.14); }
body.theme-light .blocker-settings-panel { background: rgba(255, 255, 255, 0.98); border-color: rgba(13, 148, 136, 0.28); }
body.theme-light .blocker-settings-head h2 { color: #0f172a; }
body.theme-light .blocker-settings-head { border-bottom-color: rgba(15, 23, 42, 0.08); }
body.theme-light .bs-cat { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); color: #0f172a; }
body.theme-light .bs-cat:hover { border-color: #0d9488; background: rgba(13, 148, 136, 0.05); }
body.theme-light .bs-cat input { background: rgba(15, 23, 42, 0.04); border-color: rgba(15, 23, 42, 0.20); }
body.theme-light .bs-add-row input { background: rgba(255, 255, 255, 0.92); color: #0f172a; border-color: rgba(15, 23, 42, 0.14); }
body.theme-light .bs-custom-item { background: rgba(15, 23, 42, 0.03); color: #0f172a; }
body.theme-light .blocker-log-item { background: rgba(15, 23, 42, 0.03); }
body.theme-light .blocker-log-item:hover { background: rgba(15, 23, 42, 0.06); }
body.theme-light .bl-domain { color: #0f172a; }
body.theme-light .bs-stat { background: rgba(15, 23, 42, 0.03); }
body.theme-light .bs-stat b { color: #0d9488; }
body.theme-light .bs-stats { border-top-color: rgba(15, 23, 42, 0.07); }
body.theme-light .focus-indicator-bar {
    background: linear-gradient(90deg, #0f766e, #14b8a6, #0ea5e9);
    color: #ffffff;
}
body.theme-light .focus-indicator-bar .fb-timer { background: rgba(0, 0, 0, 0.22); color: #fff; }
body.theme-light .focus-indicator-bar .fb-end { background: rgba(0, 0, 0, 0.30); border-color: rgba(0, 0, 0, 0.35); color: #ffffff; }
body.theme-light .focus-indicator-bar .fb-end:hover { background: rgba(0, 0, 0, 0.46); }
body.theme-light .focus-indicator-bar .fb-icon-btn { background: rgba(0, 0, 0, 0.22); border-color: rgba(0, 0, 0, 0.28); color: #ffffff; }
body.theme-light .focus-summary-panel {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: rgba(13, 148, 136, 0.35);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16), 0 0 60px rgba(13, 148, 136, 0.12);
}
body.theme-light .focus-summary-panel h2 { color: #0f172a; }
body.theme-light .fs-stat { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.08); }
body.theme-light .fs-label { color: #64748b; }
body.theme-light .fs-val { color: #0d9488; }
body.theme-light .fs-val small { color: #64748b; }
body.theme-light .fs-msg { color: #0f172a; }
body.theme-light .blocker-modal-panel { background: linear-gradient(180deg, #fff5f5, #fee2e2); }
body.theme-light .blocker-modal-panel h3 { color: #dc2626; }
body.theme-light .blocker-domain { background: rgba(255, 255, 255, 0.85); color: #0f172a; }
body.theme-light .blocker-msg, body.theme-light .blocker-cat { color: #475569; }
body.theme-light .fbt-toast { background: rgba(255, 255, 255, 0.98); color: #0f172a; border-color: #0d9488; }
body.theme-light .fbt-toast.ok { border-color: #059669; }

/* ============================================================
   48. COMMAND PALETTE v2
   ============================================================ */
.command-palette {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 12, 0.62);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 1rem 1rem;
    animation: cpFadeIn 0.16s ease-out;
}
@keyframes cpFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cp-content {
    background: linear-gradient(180deg, rgba(10, 22, 36, 0.98), rgba(5, 13, 22, 0.98));
    border: 1px solid rgba(94, 234, 212, 0.28);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 660px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(94, 234, 212, 0.08),
        0 0 70px rgba(94, 234, 212, 0.14);
    overflow: hidden;
    animation: cpSlide 0.22s var(--ease);
    padding: 0;
}
@keyframes cpSlide {
    from { transform: translateY(-14px) scale(0.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.cp-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
}
.cp-prompt {
    font-size: 1.15rem;
    color: var(--accent);
    font-weight: 800;
    opacity: 0.88;
    flex-shrink: 0;
}
.cp-input-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 1.02rem;
    padding: 0;
    width: auto;
    border-radius: 0;
}
.cp-input-wrap input::placeholder { color: var(--faint); }
.cp-input-wrap input:focus { border: none; outline: none; box-shadow: none; }

.cp-kbd-hint { flex-shrink: 0; }

kbd {
    display: inline-block;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0.06rem 0.4rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.5;
    min-width: 1.3rem;
    text-align: center;
}

.cp-body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.cp-results {
    overflow-y: auto;
    padding: 0.55rem;
    border-right: 1px solid rgba(255, 255, 255, 0.055);
    scroll-behavior: smooth;
}
.cp-results::-webkit-scrollbar { width: 8px; }
.cp-results::-webkit-scrollbar-thumb { background: rgba(94, 234, 212, 0.22); border-radius: 4px; }

.cp-group { margin-bottom: 0.45rem; }
.cp-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--muted);
    font-weight: 800;
    padding: 0.55rem 0.7rem 0.35rem;
    opacity: 0.78;
}
.cp-group-icon { font-size: 0.75rem; }

.cp-item {
    display: grid;
    grid-template-columns: 1.6rem 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    color: var(--ink);
    font-size: 0.9rem;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast);
    user-select: none;
}
.cp-item:hover { background: rgba(255, 255, 255, 0.035); }
.cp-item.selected {
    background: linear-gradient(90deg, rgba(94, 234, 212, 0.18), rgba(94, 234, 212, 0.05));
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.30);
    transform: translateX(2px);
}
.cp-item.selected .cp-enter { opacity: 1; }

.cp-icon { font-size: 1.02rem; text-align: center; line-height: 1; }
.cp-label {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cp-label mark {
    background: rgba(94, 234, 212, 0.26);
    color: var(--accent);
    border-radius: 3px;
    padding: 0 0.12rem;
    font-weight: 700;
}
.cp-hint {
    font-size: 0.72rem;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 10rem;
    text-align: right;
    letter-spacing: 0.01em;
}
.cp-enter {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--accent);
    opacity: 0;
    transition: opacity var(--dur-fast);
    flex-shrink: 0;
}

.cp-preview {
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.65rem;
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.025), transparent);
    overflow: hidden;
}
.cp-preview-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 8px 22px rgba(94, 234, 212, 0.4));
    animation: cpIconPop 0.3s var(--ease);
}
@keyframes cpIconPop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.cp-preview-body { width: 100%; }
.cp-preview-label {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}
.cp-preview-hint {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}
.cp-preview-group {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    background: rgba(94, 234, 212, 0.09);
    border: 1px solid rgba(94, 234, 212, 0.24);
    color: var(--accent);
    padding: 0.18rem 0.65rem;
    border-radius: var(--r-pill);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}
.cp-preview-group-icon { font-size: 0.75rem; }
.cp-preview-id {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: var(--faint);
    letter-spacing: 0.03em;
}

.cp-empty {
    padding: 2.4rem 1rem;
    text-align: center;
    color: var(--muted);
}
.cp-empty-icon { font-size: 2.1rem; opacity: 0.55; margin-bottom: 0.65rem; }
.cp-empty-title {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}
.cp-empty-hint { font-size: 0.8rem; color: var(--faint); }

.cp-footer {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding: 0.55rem 1.05rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.16);
    font-size: 0.7rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.cp-footer span { display: inline-flex; align-items: center; gap: 0.3rem; }
.cp-footer-spacer { flex: 1; }
#cpCounter { color: var(--faint); font-family: var(--mono); }

@media (max-width: 640px) {
    .cp-content { max-height: 86vh; }
    .cp-body { grid-template-columns: 1fr; }
    .cp-preview { display: none; }
    .cp-hint { display: none; }
    .cp-footer span:nth-child(n+2):nth-child(-n+3) { display: none; }
}

body.theme-light .cp-content {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-color: rgba(13, 148, 136, 0.30);
    box-shadow:
        0 30px 90px rgba(15, 23, 42, 0.15),
        0 0 0 1px rgba(13, 148, 136, 0.08);
}
body.theme-light .cp-input-wrap { background: rgba(15, 23, 42, 0.03); border-bottom-color: rgba(15, 23, 42, 0.08); }
body.theme-light .cp-input-wrap input { color: #0f172a; }
body.theme-light .cp-item { color: #0f172a; }
body.theme-light .cp-item:hover { background: rgba(15, 23, 42, 0.035); }
body.theme-light .cp-item.selected {
    background: linear-gradient(90deg, rgba(13, 148, 136, 0.16), rgba(13, 148, 136, 0.05));
    box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.30);
}
body.theme-light .cp-label mark { background: rgba(13, 148, 136, 0.22); color: #0d9488; }
body.theme-light .cp-preview-label { color: #0f172a; }
body.theme-light .cp-preview-group { background: rgba(13, 148, 136, 0.10); border-color: rgba(13, 148, 136, 0.28); color: #0d9488; }
body.theme-light .cp-preview { background: linear-gradient(180deg, rgba(13, 148, 136, 0.03), transparent); }
body.theme-light .cp-results { border-right-color: rgba(15, 23, 42, 0.08); }
body.theme-light .cp-footer { background: rgba(15, 23, 42, 0.03); border-top-color: rgba(15, 23, 42, 0.08); }
body.theme-light kbd { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.12); color: #475569; }

/* ============================================================
   49. POLISH
   ============================================================ */
button, a, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
input[type="text"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea { color-scheme: dark; }
body.theme-light input[type="text"],
body.theme-light input[type="url"],
body.theme-light input[type="number"],
body.theme-light input[type="date"],
body.theme-light select,
body.theme-light textarea { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   DASHBOARD REDESIGN v3 — structured, minimal, hierarchical
   ============================================================ */
html body .overview-strip,
.overview-strip {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 1.4rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}
html body .overview-strip .ov-item,
.overview-strip .ov-item {
    flex: initial !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.ov-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.ov-item:hover {
    border-color: var(--line-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32), 0 0 20px rgba(94, 234, 212, 0.08);
}
.ov-icon { font-size: 0.95rem; opacity: 0.9; }
.ov-value {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
}
.ov-unit {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 600;
    margin-left: 0.05rem;
}
.ov-label {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ov-divider {
    width: 1px;
    height: 22px;
    background: var(--line);
    opacity: 0.6;
}
@media (max-width: 640px) {
    html body .overview-strip,
    .overview-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
    }
    html body .overview-strip .ov-item,
    .overview-strip .ov-item {
        flex-direction: column !important;
        text-align: center;
        padding: 0.5rem 0.5rem !important;
        gap: 0.3rem !important;
    }
    html body .overview-strip .ov-value,
    .overview-strip .ov-value { font-size: 0.9rem !important; }
    html body .overview-strip .ov-label,
    .overview-strip .ov-label { font-size: 0.62rem !important; letter-spacing: 0 !important; }
    html body .overview-strip .ov-icon,
    .overview-strip .ov-icon { font-size: 0.85rem !important; }
}
@media (max-width: 420px) {
    html body .overview-strip,
    .overview-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 420px) {
    .overview-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 1.3rem;
    align-items: start;
}
.dash-main {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    min-width: 0;
}
.dash-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding-right: 0.2rem;
    scrollbar-width: thin;
}
.dash-sidebar::-webkit-scrollbar { width: 6px; }
.dash-sidebar::-webkit-scrollbar-thumb {
    background: rgba(94, 234, 212, 0.20);
    border-radius: 3px;
}

.timers-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.3rem;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.pomo-duration-input {
    width: 56px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(192, 132, 252, 0.28);
    border-radius: var(--r-xs);
    color: var(--ink);
    padding: 0.4rem 0.4rem;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.85rem;
    transition: border var(--dur), box-shadow var(--dur);
}
.pomo-duration-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.pomo-unit {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.deepwork-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--muted);
    flex-wrap: wrap;
}
.deepwork-stats b {
    color: var(--ink);
    font-family: var(--mono);
    font-weight: 700;
}
.dw-sep { opacity: 0.4; }

.dash-sidebar .glass-card { margin-bottom: 0; }
.dash-sidebar .activity-list {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 0.2rem;
}
.dash-sidebar .activity-list::-webkit-scrollbar { width: 6px; }
.dash-sidebar .activity-list::-webkit-scrollbar-thumb {
    background: rgba(94, 234, 212, 0.18);
    border-radius: 3px;
}
.dash-sidebar .section-header { margin-bottom: 0.7rem; }
.dash-sidebar .empty-state { padding: 1rem 0.5rem; font-size: 0.82rem; }

@media (max-width: 1024px) {
    .dashboard-layout { grid-template-columns: 1fr; }
    .dash-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .timers-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .dashboard-layout { gap: 1rem; }
    .dash-main { gap: 1rem; }
    .dash-sidebar { gap: 1rem; }
}

body.focus-mode .dash-sidebar { display: none; }
body.focus-mode .dashboard-layout { grid-template-columns: 1fr; }

.dash-main .search-section { margin-bottom: 0; }
.dash-main .search-section .card-title { font-size: 0.95rem; }

/* ============================================================
   AI TOOLS PAGE — categories + enhanced cards
   ============================================================ */
.tools-category { margin-bottom: 2rem; }
.tools-category-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.95rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
}
.tools-category-header .cat-icon {
    font-size: 1.25rem;
    line-height: 1;
}
.tools-category-header .cat-title {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    flex: 1;
}
.tools-category-header .cat-count {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 700;
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: 0.2rem 0.75rem;
    border-radius: var(--r-pill);
}

.tool-card .tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.15rem;
}
.tool-card .tool-tags .tool-tag {
    align-self: auto;
    font-size: 0.6rem;
    padding: 0.12rem 0.55rem;
}
.tool-card .tool-open {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.01em;
    transition: gap var(--dur), color var(--dur);
}
.tool-card:hover .tool-open {
    gap: 0.45rem;
    color: var(--accent-2);
}

.tool-card {
    min-height: 190px;
    justify-content: flex-start;
}
.tool-card h3 { margin: 0.25rem 0 0.35rem; }
.tool-card p  { margin-bottom: 0.35rem; }

@media (max-width: 640px) {
    .tools-category-header .cat-title { font-size: 1rem; }
    .tool-card { min-height: 175px; }
}

/* ============================================================
   EMOJI COLOR SAFETY NET — must come last
   ============================================================ */
.emoji {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: inherit;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
                 "Noto Color Emoji", "Android Emoji", "EmojiOne Color", sans-serif !important;
    font-variant-emoji: emoji;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    vertical-align: -0.05em;
}

[class*="hl-"],
.neon-text,
.nav-brand,
.nav-links a,
.card-title,
.section-header h2,
.stat-icon,
.tool-icon,
.ov-icon,
.streak-icon,
.upload-icon,
.cat-icon,
.cp-icon,
.cp-group-icon,
.cp-preview-icon,
.cp-preview-group-icon,
.fs-icon,
.blocker-modal-icon,
.ai-badge,
.tool-tag {
    font-family: var(--font), var(--emoji);
    font-variant-emoji: emoji;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--display), var(--emoji);
    font-variant-emoji: emoji;
}

button,
.btn-primary,
.btn-primary-sm,
.btn-danger,
.btn-danger-sm,
.focus-toggle,
.clock-toggle,
.keyboard-toggle,
.planner-chip,
.pomodoro-controls button,
.deepwork-controls button {
    font-family: var(--font), var(--emoji);
    font-variant-emoji: emoji;
}

.dash-header h1 .emoji,
.page-header h1 .emoji,
.gradient-text .emoji,
h1 .emoji,
h2 .emoji,
h3 .emoji {
    -webkit-text-fill-color: initial !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
}

/* Hide empty journal entries */
.journal-past {
    display: none !important;
}

/* ============================================================
   MEGA-RESPONSIVE LAYER v1 — 56 device profiles
   ============================================================ */
:root {
    --sp-1: clamp(0.25rem, 0.5vw, 0.35rem);
    --sp-2: clamp(0.5rem, 1vw, 0.75rem);
    --sp-3: clamp(0.75rem, 1.5vw, 1.1rem);
    --sp-4: clamp(1rem, 2vw, 1.4rem);
    --sp-5: clamp(1.25rem, 2.5vw, 1.75rem);
    --sp-6: clamp(1.5rem, 3vw, 2.25rem);

    --fs-xs:  clamp(0.65rem, 0.7vw + 0.4rem, 0.75rem);
    --fs-sm:  clamp(0.78rem, 0.6vw + 0.6rem, 0.88rem);
    --fs-md:  clamp(0.88rem, 0.5vw + 0.75rem, 1rem);
    --fs-lg:  clamp(1rem, 0.8vw + 0.8rem, 1.2rem);
    --fs-xl:  clamp(1.2rem, 1.4vw + 0.9rem, 1.6rem);
    --fs-2xl: clamp(1.5rem, 2.2vw + 0.9rem, 2.15rem);
    --fs-3xl: clamp(1.75rem, 3vw + 1rem, 2.75rem);

    --pad-container-x: clamp(0.85rem, 2.5vw, 1.75rem);

    --gap-sm: clamp(0.5rem, 1vw, 0.9rem);
    --gap-md: clamp(0.75rem, 1.5vw, 1.3rem);
    --gap-lg: clamp(1rem, 2vw, 1.75rem);
}

.container {
    max-width: min(1400px, 96vw);
    padding-left: max(var(--pad-container-x), env(safe-area-inset-left));
    padding-right: max(var(--pad-container-x), env(safe-area-inset-right));
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-5);
}

.dash-header h1,
.page-header h1,
.search-container h1 {
    font-size: var(--fs-2xl);
    line-height: 1.15;
}
.section-header h2,
.card-title {
    font-size: var(--fs-lg);
}
.stat-number,
.pomodoro-timer,
.deepwork-timer,
.digital-clock {
    font-size: var(--fs-xl);
}
.subtitle,
.page-header p {
    font-size: var(--fs-md);
}
.stat-label,
.ov-label,
.section-badge,
.cat-count {
    font-size: var(--fs-xs);
}

.glass-card {
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
    margin-bottom: var(--gap-md);
    border-radius: clamp(var(--r-sm), 1.5vw, var(--r));
}

.navbar {
    padding: clamp(0.6rem, 1.5vw, 0.85rem) clamp(0.85rem, 2vw, 1.35rem);
    padding-left: max(clamp(0.85rem, 2vw, 1.35rem), env(safe-area-inset-left));
    padding-right: max(clamp(0.85rem, 2vw, 1.35rem), env(safe-area-inset-right));
}
.nav-brand {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
}
.nav-links a {
    font-size: clamp(0.72rem, 0.7vw + 0.4rem, 0.82rem);
    padding: clamp(0.35rem, 0.6vw, 0.5rem) clamp(0.55rem, 0.9vw, 0.75rem);
}

.clock-section {
    padding: clamp(0.8rem, 1.5vw, 1.15rem) clamp(0.9rem, 2vw, 1.35rem);
    gap: clamp(0.65rem, 1.2vw, 1.25rem);
}
.digital-clock { font-size: clamp(1.6rem, 3vw, 2.15rem); }
#analogCanvas {
    width: clamp(95px, 12vw, 130px) !important;
    height: clamp(95px, 12vw, 130px) !important;
    max-width: clamp(95px, 12vw, 130px) !important;
    max-height: clamp(95px, 12vw, 130px) !important;
}

@media (min-width: 1600px) {
    .dashboard-layout {
        grid-template-columns: minmax(0, 1.9fr) minmax(320px, 1fr);
        gap: 1.75rem;
    }
    .container { max-width: min(1600px, 96vw); }
}
@media (min-width: 1280px) and (max-width: 1599.98px) {
    .dashboard-layout {
        grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
    }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dashboard-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
        gap: 1.1rem;
    }
    .timers-row { gap: 1rem; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .dash-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
    }
    .dash-sidebar > .glass-card:first-child { grid-column: 1 / -1; }
}
@media (min-width: 640px) and (max-width: 899.98px) {
    .dashboard-layout { grid-template-columns: 1fr; }
    .dash-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .dash-sidebar > .glass-card:first-child { grid-column: 1 / -1; }
    .timers-row { grid-template-columns: 1fr; }
}
@media (min-width: 480px) and (max-width: 639.98px) {
    .dashboard-layout { grid-template-columns: 1fr; }
    .dash-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }
    .timers-row { grid-template-columns: 1fr; }
    .pomodoro-journal-wrapper { grid-template-columns: 1fr; }
}

@media (max-width: 639.98px) {
    .container { padding: 0.85rem 0.85rem 1.5rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
    .stat-card { padding: 0.65rem 0.7rem; gap: 0.5rem; }
    .stat-icon { font-size: 1.15rem; width: 1.9rem; }
    .stat-number { font-size: 1.15rem; }
    .clock-section { flex-direction: column; align-items: stretch; text-align: center; }
    .clock-container { justify-content: center; flex-wrap: wrap; }
    .calendar-widget { margin-left: 0; align-self: center; }
    .dash-header { flex-direction: column; align-items: flex-start; }
    .dash-header h1 { font-size: 1.55rem; }
    .search-section .search-box { flex-direction: column; }
    .search-section .search-box button { width: 100%; }
    .pomodoro-widget { flex-direction: column; align-items: stretch; text-align: center; }
    .pomodoro-controls { justify-content: center; flex-wrap: wrap; }
    .pomodoro-timer { min-width: 0; text-align: center; }
    .deepwork-widget { flex-direction: column; align-items: stretch; text-align: center; }
    .deepwork-controls { justify-content: center; }
    .deepwork-timer { min-width: 0; text-align: center; }
    .priority-grid { grid-template-columns: 1fr; }
    .habit-add-form, .notice-add-form, .note-add-form { flex-direction: column; align-items: stretch; }
    .habit-add-section, .notice-add-section, .note-add-section { flex-direction: column; align-items: stretch; }
    .habit-add-section .btn-danger, .notice-add-section .btn-danger, .note-add-section .btn-danger { align-self: stretch; }
    .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
    .tool-card { min-height: 155px; padding: 0.95rem; }
    .tool-card h3 { font-size: 0.92rem; }
    .tool-card p { font-size: 0.78rem; }
    .tool-icon { font-size: 1.75rem; }
    .file-item-row { flex-wrap: wrap; }
    .upload-actions { flex-direction: column; }
    .planner-grid {
        font-size: 0.55rem;
        grid-template-columns: 34px repeat(7, minmax(38px, 1fr));
        gap: 2px;
    }
    .planner-grid .planner-cell { min-height: 26px; padding: 0.15rem; font-size: 0.6rem; }
    .shortcuts-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 0.5rem; }
    .shortcut-tile { padding: 0.7rem 0.4rem; }
    .shortcut-tile .sc-logo { width: 30px; height: 30px; }
    .shortcut-tile .sc-name { font-size: 0.62rem; }
    .nav-links a { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
    .nav-right { gap: 0.4rem; }
    .nav-date { display: none; }
    .assignment-item, .reading-item { flex-direction: column; align-items: flex-start; }
    .section-badge { font-size: 0.68rem; padding: 0.15rem 0.65rem; }
    .flashcard-review { padding: 1rem; }
    .flashcard-review .card-front,
    .flashcard-review .card-back { font-size: 1rem; min-height: 80px; }
    .cp-footer span:nth-child(n+4) { display: none; }
}

@media (max-width: 479.98px) {
    .container { padding: 0.7rem 0.7rem 1.25rem; }
    .stats-grid { grid-template-columns: 1fr; }
    .tools-grid { grid-template-columns: 1fr; }
    .dash-header h1 { font-size: 1.35rem; }
    .page-header h1 { font-size: 1.3rem; }
    .section-header h2, .card-title { font-size: 0.95rem; }
    .digital-clock { font-size: 1.4rem; letter-spacing: 0.06em; }
    .pomodoro-timer { font-size: 1.7rem; }
    .deepwork-timer { font-size: 1.5rem; }
    .nav-brand { font-size: 1.05rem; }
    .nav-links a { font-size: 0.8rem; padding: 0.45rem 0.6rem; }
    .shortcuts-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); }
    .shortcut-tile .sc-logo { width: 26px; height: 26px; }
    .shortcut-tile .sc-name { font-size: 0.58rem; }
    .planner-grid {
        grid-template-columns: 30px repeat(7, minmax(32px, 1fr));
        font-size: 0.5rem;
    }
    .planner-grid .planner-cell { min-height: 22px; padding: 0.1rem; }
    .priority-quadrant { padding: 0.7rem; min-height: 90px; }
    .priority-quadrant h3 { font-size: 0.7rem; }
    .focus-summary-panel { padding: 1.4rem 1.1rem 1.1rem; }
    .fs-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .fs-val { font-size: 1.35rem; }
    .shortcut-modal-panel { padding: 1.1rem; }
    .shortcut-modal-panel .btn-row { flex-direction: column; }
    .shortcut-modal-panel .btn-row button { width: 100%; }
    .trash-modal-content { padding: 1rem; }
    .trash-item { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .theme-picker-panel { padding: 1rem; }
    .theme-swatch-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    .theme-bg-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
}

@media (max-width: 374.98px) {
    .container { padding: 0.6rem 0.6rem 1rem; }
    .dash-header h1 { font-size: 1.2rem; }
    .page-header h1 { font-size: 1.15rem; }
    .subtitle { font-size: 0.82rem; }
    .digital-clock { font-size: 1.25rem; }
    .pomodoro-timer { font-size: 1.5rem; }
    .deepwork-timer { font-size: 1.3rem; }
    .nav-brand { font-size: 0.98rem; }
    .nav-links a { font-size: 0.75rem; padding: 0.4rem 0.55rem; }
    .btn-primary, .btn-danger { padding: 0.5rem 1rem; font-size: 0.82rem; }
    .btn-primary-sm, .btn-danger-sm { font-size: 0.7rem; padding: 0.22rem 0.75rem; }
    .shortcuts-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 0.4rem; }
    .shortcut-tile .sc-name { font-size: 0.55rem; }
    .shortcut-tile { padding: 0.55rem 0.35rem; }
}

@media (max-width: 319.98px) {
    .overview-strip { grid-template-columns: 1fr; }
    .tools-grid { grid-template-columns: 1fr; }
    .digital-clock { font-size: 1.1rem; }
    .nav-brand span:not(:first-child) { display: none; }
    .nav-brand::after { content: "StudyHub"; font-size: 0.9rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .navbar { padding-top: 0.4rem; padding-bottom: 0.4rem; }
    .clock-section { padding: 0.55rem 0.9rem; gap: 0.5rem; }
    .digital-clock { font-size: 1.35rem; }
    #analogCanvas {
        width: 80px !important;
        height: 80px !important;
        max-width: 80px !important;
        max-height: 80px !important;
    }
    .dash-header { margin-bottom: 0.75rem; }
    .dash-header h1 { font-size: 1.4rem; }
    .glass-card { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
    body.focus-mode { padding-top: 30px; }
    body.focus-mode .navbar { top: 30px; }
    .focus-indicator-bar { padding: 0.35rem 0.9rem; font-size: 0.75rem; }
}

@media (min-width: 1920px) {
    .container { max-width: 1600px; }
    body { font-size: 16.5px; }
}
@media (min-width: 2560px) {
    .container { max-width: 1800px; }
    body { font-size: 17.5px; }
    .glass-card { padding: 1.75rem 2rem; }
    .dashboard-layout { gap: 2rem; }
}

@media (max-width: 300px) {
    .container { padding: 0.5rem; }
    .nav-links a span:not(:first-child) { display: none; }
    .overview-strip { grid-template-columns: 1fr; gap: 0.3rem; }
    .ov-item { padding: 0.3rem 0.4rem; }
}

@media (pointer: coarse) {
    .btn-primary, .btn-danger, .btn-primary-sm, .btn-danger-sm,
    .focus-toggle, .clock-toggle, .keyboard-toggle,
    .pomodoro-controls button, .deepwork-controls button,
    .planner-chip, .calendar-expand-btn, .calendar-modal-header button,
    .delete-item-btn, .cp-item, .suggestion-item,
    .theme-picker-tab, .theme-picker-actions button {
        min-height: 42px;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    .delete-item-btn {
        min-width: 42px;
        min-height: 42px;
        width: 42px;
        height: 42px;
        margin-left: 0.6rem;
    }
    .nav-links a,
    .burger-menu,
    #langSelector {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .activity-item,
    .habit-item, .notice-item, .note-item,
    .assignment-item, .reading-item {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }
    .tool-card:hover { transform: none; }
    .stat-card:hover { transform: none; }
    .shortcut-tile:hover { transform: none; }
}

@media (hover: none) {
    .glass-card:hover { box-shadow: var(--shadow); border-color: var(--line); }
    .stat-card:hover::after { opacity: 0; }
    .nav-links a:hover { transform: none; background: transparent; }
    .ov-item:hover { background: transparent; }
}

html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
pre, code { max-width: 100%; overflow-x: auto; word-break: break-word; }
* { min-width: 0; }

.activity-item span:first-child,
.file-item .file-name,
.note-item span:first-child,
.notice-item span:first-child,
.habit-item .habit-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    min-width: 0;
}

table { display: block; overflow-x: auto; max-width: 100%; }

.footer {
    padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
}
.theme-picker-fab {
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    right: max(1.5rem, env(safe-area-inset-right));
}
.focus-indicator-bar {
    padding-left: max(1.2rem, env(safe-area-inset-left));
    padding-right: max(1.2rem, env(safe-area-inset-right));
}

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }
    body::before { display: none; }
    .navbar, .footer, .theme-picker-fab, .focus-indicator-bar,
    .blocker-banner, .search-section, .pomodoro-section,
    .deepwork-section, .priority-matrix-section, .calendar-widget,
    .clock-section, .dash-sidebar, .focus-toggle, .clock-toggle,
    .theme-picker-overlay, .command-palette, .shortcut-modal,
    .blocker-modal, .blocker-settings-modal, .calendar-modal,
    .trash-modal, .focus-summary-modal, .fbt-toast,
    .shortcut-block-toast {
        display: none !important;
    }
    .glass-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        background: #fff !important;
        backdrop-filter: none !important;
        page-break-inside: avoid;
    }
    .container { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

@media (prefers-contrast: more) {
    :root {
        --line: rgba(255, 255, 255, 0.24);
        --line-2: rgba(255, 255, 255, 0.36);
        --line-strong: rgba(94, 234, 212, 0.60);
        --muted: #cbd8e8;
        --faint: #a4b8cc;
    }
}
@media (forced-colors: active) {
    .glass-card, .nav-links a.active, .btn-primary {
        border: 1px solid CanvasText;
    }
    .btn-primary, .btn-danger, .focus-toggle.active {
        forced-color-adjust: none;
    }
}

@media (prefers-color-scheme: light) {
    body:not(.theme-light):not([data-color-theme]) {
        /* intentionally minimal — theme is user-controlled */
    }
}

@media (min-aspect-ratio: 9/20) {
    .container { padding-top: 1.25rem; }
    .navbar { padding-top: 0.9rem; padding-bottom: 0.9rem; }
}

@media (max-aspect-ratio: 4/3) and (min-width: 1024px) {
    .glass-card { padding: 1.15rem 1.35rem; }
    .dash-header h1 { font-size: 1.9rem; }
}

@media (max-width: 640px) {
    body.focus-mode { padding-top: 56px; }
    body.focus-mode .navbar { top: 56px; }
    .focus-indicator-bar {
        font-size: 0.72rem;
        padding: 0.5rem 0.75rem;
        gap: 0.45rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .focus-indicator-bar .fb-timer { min-width: 52px; font-size: 0.85rem; }
    .focus-indicator-bar .fb-sep { display: none; }
    .focus-indicator-bar .fb-stat { font-size: 0.7rem; }
}

@media (max-width: 640px) {
    .command-palette { padding: 5vh 0.5rem 0.5rem; }
    .cp-content { max-height: 90vh; border-radius: var(--r); }
    .cp-item { padding: 0.75rem 0.7rem; font-size: 0.88rem; min-height: 46px; }
}

@media (max-height: 640px) {
    .calendar-modal-content,
    .trash-modal-content,
    .blocker-settings-panel,
    .theme-picker-panel,
    .shortcut-modal-panel,
    .focus-summary-panel {
        max-height: 90vh;
        overflow-y: auto;
    }
}

.shortcut-tile .sc-logo img,
.file-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .focus-indicator-bar,
    .blocker-modal-icon { animation: none !important; }
}

@media (max-width: 480px) {
    .empty-state { padding: 1.1rem 0.4rem; font-size: 0.82rem; }
}

.btn-primary, .btn-danger, .btn-primary-sm, .btn-danger-sm,
.focus-toggle, .clock-toggle, .keyboard-toggle {
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .activity-list { max-height: 260px; }
    .dash-sidebar .activity-list { max-height: 220px; }
}

.footer {
    padding: clamp(0.9rem, 1.5vw, 1.35rem);
    font-size: clamp(0.72rem, 0.5vw + 0.5rem, 0.82rem);
}

@media (min-width: 641px) and (max-width: 1023.98px) {
    .nav-links { flex-wrap: wrap; justify-content: center; }
}

@media (min-width: 1024px) and (max-width: 1150px) {
    .dashboard-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
    .tools-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (min-width: 1440px) {
    .tools-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}

@media (min-width: 480px) and (max-width: 767.98px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
    .theme-picker-tabs { flex-direction: column; }
    .theme-picker-tab { width: 100%; text-align: center; }
}

@media (max-width: 420px) {
    .nav-links a {
        display: flex;
        justify-content: flex-start;
        gap: 0.35rem;
    }
}

@media (hover: hover) and (pointer: fine) {
    .glass-card,
    .stat-card,
    .tool-card,
    .shortcut-tile,
    .ov-item {
        will-change: transform, box-shadow, border-color;
    }
}

@font-face {
    font-family: 'Sora-fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}


/* ============================================================
   PLANNER PAGE — AI planner + grid styles
   ============================================================ */

.planner-ai-section {
    border: 1px solid rgba(196, 181, 253, 0.28);
    box-shadow: var(--shadow), 0 0 40px rgba(196, 181, 253, 0.05);
}
.planner-ai-section h2 {
    font-size: 1.15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    color: var(--ink);
}

.planner-ai-input {
    display: flex;
    gap: 0.65rem;
    margin: 0.65rem 0;
    flex-wrap: wrap;
}
.planner-ai-input textarea {
    flex: 1;
    min-width: 240px;
    min-height: 68px;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--ink);
    padding: 0.75rem 1.05rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    transition: border var(--dur), box-shadow var(--dur);
    line-height: 1.55;
}
.planner-ai-input textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.planner-ai-input button {
    background: linear-gradient(180deg, rgba(94, 234, 212, 0.24), rgba(94, 234, 212, 0.10));
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.65rem 1.4rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
    align-self: flex-start;
}
.planner-ai-input button:hover {
    background: rgba(94, 234, 212, 0.32);
    box-shadow: 0 0 26px rgba(94, 234, 212, 0.24);
    transform: translateY(-1px);
}

.planner-ai-chips {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 1.05rem;
}
.planner-chip {
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    padding: 0.4rem 0.95rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur) var(--ease);
}
.planner-chip:hover {
    background: rgba(94, 234, 212, 0.24);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.18);
}

.planner-ai-output { margin-top: 1.1rem; }

.planner-ai-summary {
    background: rgba(94, 234, 212, 0.075);
    border-left: 3px solid var(--accent);
    padding: 0.85rem 1.05rem;
    border-radius: var(--r-sm);
    margin-bottom: 1.05rem;
    font-size: 0.9rem;
    color: var(--ink);
    line-height: 1.65;
}
.planner-ai-summary strong { color: var(--accent); }
.planner-ai-summary .tag {
    display: inline-block;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.30);
    padding: 0.08rem 0.6rem;
    border-radius: var(--r-sm);
    font-size: 0.75rem;
    margin: 0 0.15rem;
    color: var(--accent);
    white-space: nowrap;
}

/* The legend under the preview — subject × count chips */
.planner-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.7rem 0 0.9rem 0;
}
.planner-legend .legend-pill {
    display: inline-block;
    padding: 0.22rem 0.75rem;
    border-radius: var(--r-pill);
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.planner-ai-preview {
    display: grid;
    gap: 5px;
    overflow-x: auto;
    font-size: 0.7rem;
    margin-bottom: 1.05rem;
    padding-bottom: 0.55rem;
}
.planner-ai-preview .ai-cell {
    background: rgba(94, 234, 212, 0.16);
    border: 1px solid rgba(94, 234, 212, 0.34);
    border-radius: var(--r-xs);
    padding: 0.32rem;
    text-align: center;
    color: var(--ink);
    font-weight: 600;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
.planner-ai-preview .ai-cell.empty {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
}
.planner-ai-preview .ai-label {
    background: rgba(255, 255, 255, 0.035);
    border-radius: var(--r-xs);
    padding: 0.32rem;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
.planner-ai-preview .ai-label.ai-meal {
    color: var(--warn);
    background: rgba(253, 186, 116, 0.08);
}
.planner-ai-preview .ai-cell.ai-meal-cell {
    background: rgba(253, 186, 116, 0.04);
    border-color: rgba(253, 186, 116, 0.18);
}

.planner-ai-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}
.planner-ai-actions button {
    font-family: inherit;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    font-weight: 700;
}
.planner-ai-actions .btn-primary { padding: 0.55rem 1.3rem; }
.planner-ai-actions .btn-danger {
    background: rgba(252, 165, 165, 0.10);
    color: var(--danger);
    border: 1px solid rgba(252, 165, 165, 0.30);
    padding: 0.55rem 1.2rem;
    border-radius: var(--r-sm);
    font-weight: 600;
}
.planner-ai-actions .btn-danger:hover {
    background: rgba(252, 165, 165, 0.22);
    box-shadow: 0 0 22px rgba(252, 165, 165, 0.18);
}
.planner-ai-actions .btn-danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.planner-variants {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.8rem 0 0.6rem 0;
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.planner-variants .pv-label {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.planner-variants .pv-btn {
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    padding: 0.35rem 0.9rem;
    border-radius: var(--r-pill);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur);
}
.planner-variants .pv-btn:hover {
    background: rgba(94, 234, 212, 0.20);
    transform: translateY(-1px);
}

/* Planner analytics (summary stats bar above preview) */
.planner-analytics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.planner-analytics .pa-stat {
    flex: 1 1 100px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0.55rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.planner-analytics .pa-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--muted);
    font-weight: 700;
}
.planner-analytics .pa-val {
    font-family: var(--mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
}
.planner-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
}
.planner-warnings .pw-item {
    font-size: 0.8rem;
    color: var(--warn);
    background: rgba(253, 186, 116, 0.07);
    border-left: 3px solid var(--warn);
    padding: 0.35rem 0.7rem;
    border-radius: 0 var(--r-xs) var(--r-xs) 0;
    line-height: 1.45;
}

/* ============================================================
   PLANNER GRID — main grid on the planner page
   ============================================================ */
.planner-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    gap: 4px;
    overflow-x: auto;
    font-size: 0.7rem;
}
.planner-grid .time-label {
    background: rgba(255, 255, 255, 0.035);
    padding: 0.28rem;
    text-align: center;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-xs);
    font-weight: 600;
}
.planner-grid .planner-cell {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    min-height: 36px;
    cursor: pointer;
    padding: 0.25rem;
    color: var(--ink);
    transition: all var(--dur-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--r-xs);
}
.planner-grid .planner-cell:hover {
    background: rgba(94, 234, 212, 0.12);
    border-color: var(--accent);
    transform: scale(1.03);
}
.planner-grid .planner-cell.filled {
    background: rgba(94, 234, 212, 0.16);
    border-color: var(--accent);
    font-weight: 600;
}

@media (max-width: 640px) {
    .planner-ai-input {
        flex-direction: column;
        align-items: stretch;
    }
    .planner-ai-input textarea {
        min-width: 0;
    }
    .planner-ai-input button {
        width: 100%;
    }
    .planner-ai-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .planner-ai-actions button {
        width: 100%;
    }
    .planner-grid {
        font-size: 0.55rem;
        grid-template-columns: 34px repeat(7, minmax(38px, 1fr));
        gap: 2px;
    }
    .planner-grid .planner-cell { min-height: 26px; padding: 0.15rem; font-size: 0.6rem; }
}



/* ============================================================
   DASHBOARD — FORCE 5 STATS IN A STRAIGHT ROW
   Overrides every other rule with high specificity.
   ============================================================ */
html body .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
    margin-bottom: 1.6rem !important;
}
html body .stats-grid .stat-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem 1.1rem !important;
    min-width: 0 !important;
    width: auto !important;
}
html body .stats-grid .stat-card .stat-icon {
    font-size: 1.5rem !important;
    width: 2.2rem !important;
    flex-shrink: 0 !important;
}
html body .stats-grid .stat-card .stat-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    gap: 0.15rem;
}
html body .stats-grid .stat-card .stat-label {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .stats-grid .stat-card .stat-number {
    font-size: 1.45rem !important;
    line-height: 1 !important;
}

/* Responsive ladder */
@media (max-width: 900px) {
    html body .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    html body .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    html body .stats-grid .stat-card {
        padding: 0.7rem 0.8rem !important;
        gap: 0.55rem !important;
    }
    html body .stats-grid .stat-card .stat-icon {
        font-size: 1.15rem !important;
        width: 1.75rem !important;
    }
    html body .stats-grid .stat-card .stat-number {
        font-size: 1.15rem !important;
    }
    html body .stats-grid .stat-card .stat-label {
        font-size: 0.55rem !important;
    }
}
@media (max-width: 420px) {
    html body .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* ============================================================
   ABSOLUTE LAST — force 5 boxes in one straight row
   Covers both .stats-grid (large cards) and .overview-strip (compact)
   ============================================================ */

/* If dashboard uses .stats-grid */
html body .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* If dashboard uses .overview-strip */
html body .overview-strip {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
html body .overview-strip .ov-item {
    width: auto !important;
    min-width: 0 !important;
    flex: initial !important;
}
html body .overview-strip .ov-divider {
    display: none !important;
}

/* Responsive — 3 cols on tablet, 2 cols on phone */
@media (max-width: 900px) {
    html body .stats-grid,
    html body .overview-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 640px) {
    html body .stats-grid,
    html body .overview-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }
}
/* ============================================================
   RESET .stat-number — remove any accidental background/box
   styling inherited from a broader selector.
   ============================================================ */
html body .stat-number,
html body .ov-value,
html body .ov-value span,
html body .stat-number span {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    display: inline !important;
    color: var(--ink) !important;
    font-family: var(--mono) !important;
    font-variant-numeric: tabular-nums !important;
}




/* ============================================================
   THE END — anchor point for future overrides
   (Add any new global rules below this line.)
   ============================================================ */