@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ===================================================================================
   ROOT — colored light theme. Soft per-area tints, dark high-contrast text.
   No pure-black backgrounds anywhere.
   =================================================================================== */
:root {
    color-scheme: dark; /* native controls (date/time pickers) render dark */
    /* THL Sandbox / Star Fort palette — purple-black bg, warm cream text, amber accent */
    --bg-color: #0c0820;
    --text-color: #f6efde;
    --text-soft: #b3a4d4;

    --surface: #181138;
    --surface-2: #221a48;

    --modal-bg: #14102e;
    --modal-card-bg: #1c1542;
    --modal-border-color: #322a5e;
    --modal-input-bg: #221a48;
    --modal-input-border: #3a2f63;
    --modal-secondary-text: #9a8ac0;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* accent palette tuned for a dark UI; "-dark" tokens are the readable-ON-DARK
       text shades (lighter), since text now sits on dark surfaces */
    --c-notes: #4fc3ff;   --c-notes-rgb: 79, 195, 255;    --c-notes-dark: #9bdcff;
    --c-todos: #ffbe1f;   --c-todos-rgb: 255, 190, 31;    --c-todos-dark: #ffd166;
    --c-cal:   #2fe0a6;   --c-cal-rgb: 47, 224, 166;      --c-cal-dark: #7af0cb;
    --c-yellow:#ffd86b;   --c-yellow-rgb: 255, 216, 107;  --c-yellow-dark: #ffe6a0;
    --c-purple:#b18cff;   --c-purple-rgb: 177, 140, 255;  --c-purple-dark: #d2bcff;
    --c-danger:#ff6a6a;   --c-danger-rgb: 255, 106, 106;  --c-danger-dark: #ff9d9d;

    /* per-area background washes (unused on the dark theme) */
    --tint-notes: var(--surface);
    --tint-todos: var(--surface);
    --tint-cal:   var(--surface);

    --topbar-bg: rgba(12, 8, 32, 0.82);
    --chip-soft-bg: rgba(255, 255, 255, 0.10);
}

/* ===================== LIGHT THEME (Day mode) ===================== */
html[data-theme="light"] {
    color-scheme: light;
    --bg-color: #ffffff;
    --text-color: #1c1d22;
    --text-soft: #5d616c;
    --surface: #ffffff;
    --surface-2: #f1f2f5;
    --modal-bg: #ffffff;
    --modal-card-bg: #f6f7f9;
    --modal-border-color: #e3e5eb;
    --modal-input-bg: #ffffff;
    --modal-input-border: #cdd1da;
    --modal-secondary-text: #6b6f7a;

    --c-notes: #0d7fc2;   --c-notes-rgb: 13, 127, 194;   --c-notes-dark: #0a6299;
    --c-todos: #e8730c;   --c-todos-rgb: 232, 115, 12;   --c-todos-dark: #bf5e08;
    --c-cal:   #0a9d6b;   --c-cal-rgb: 10, 157, 107;     --c-cal-dark: #07784f;
    --c-yellow:#d99400;   --c-yellow-rgb: 217, 148, 0;   --c-yellow-dark: #a06d00;
    --c-purple:#7a29d6;   --c-purple-rgb: 122, 41, 214;  --c-purple-dark: #5e1ea8;
    --c-danger:#dc3a2b;   --c-danger-rgb: 220, 58, 43;   --c-danger-dark: #b62c20;

    --topbar-bg: rgba(255, 255, 255, 0.85);
    --chip-soft-bg: rgba(0, 0, 0, 0.07);
}

/* ===================== POP THEME (vibrant) =====================
   A third pole vs black (Night) / white (Day): a bold electric-violet → magenta →
   hot-pink GRADIENT canvas, dark neon cards floating on top, hyper-saturated accents.
   "-dark" tokens are the lighter readable-on-dark text shades. */
html[data-theme="pop"] {
    color-scheme: dark;
    --bg-color: #0a0518;
    --text-color: #ffffff;
    --text-soft: #e7d6ff;

    --surface: #1d1248;
    --surface-2: #2a1a64;

    --modal-bg: #1a1142;
    --modal-card-bg: #251659;
    --modal-border-color: #4e37a0;
    --modal-input-bg: #2a1a64;
    --modal-input-border: #6347be;
    --modal-secondary-text: #c3b1f0;

    --c-notes: #00c2ff;   --c-notes-rgb: 0, 194, 255;     --c-notes-dark: #7fe2ff;
    --c-todos: #ff9500;   --c-todos-rgb: 255, 149, 0;     --c-todos-dark: #ffc266;
    --c-cal:   #00f5a0;   --c-cal-rgb: 0, 245, 160;       --c-cal-dark: #74ffce;
    --c-yellow:#ffe000;   --c-yellow-rgb: 255, 224, 0;    --c-yellow-dark: #fff07a;
    --c-purple:#ff4dd2;   --c-purple-rgb: 255, 77, 210;   --c-purple-dark: #ff9be6;
    --c-danger:#ff2e63;   --c-danger-rgb: 255, 46, 99;    --c-danger-dark: #ff85a6;

    --tint-notes: var(--surface);
    --tint-todos: var(--surface);
    --tint-cal:   var(--surface);

    --topbar-bg: rgba(10, 5, 24, 0.82);
    --chip-soft-bg: rgba(255, 255, 255, 0.16);
}
/* near-black canvas with a subtle violet stage-glow up top, so the neon cards + glowing
   text pop hard against the dark (fixed so it stays put while content scrolls over it) */
html[data-theme="pop"] body {
    background: radial-gradient(125% 85% at 50% -8%, #2a0d52 0%, #0a0518 55%);
    background-attachment: fixed;
}

/* ===== POP VARIANTS (share the neon treatment via [data-theme^="pop"]) ===== */
/* Aqua — cyan / electric-blue neon */
html[data-theme="popaqua"] {
    color-scheme: dark;
    --bg-color: #03121a; --text-color: #ffffff; --text-soft: #b9ecf5;
    --surface: #0c2230; --surface-2: #123140;
    --modal-bg: #071a26; --modal-card-bg: #0e2735; --modal-border-color: #1d4356;
    --modal-input-bg: #123140; --modal-input-border: #235366; --modal-secondary-text: #8fc4d4;
    --c-notes: #19e0ff; --c-notes-rgb: 25, 224, 255; --c-notes-dark: #8df0ff;
    --c-todos: #2f8bff; --c-todos-rgb: 47, 139, 255; --c-todos-dark: #8fc0ff;
    --c-cal:   #00ffc8; --c-cal-rgb: 0, 255, 200;    --c-cal-dark: #7dffe4;
    --c-yellow:#5ef0ff; --c-yellow-rgb: 94, 240, 255; --c-yellow-dark: #aef7ff;
    --c-purple:#19e0ff; --c-purple-rgb: 25, 224, 255; --c-purple-dark: #8df0ff;
    --c-danger:#ff3b6b; --c-danger-rgb: 255, 59, 107; --c-danger-dark: #ff8aa6;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(3, 18, 26, 0.82); --chip-soft-bg: rgba(255, 255, 255, 0.14);
}
html[data-theme="popaqua"] body { background: radial-gradient(125% 85% at 50% -8%, #0a3548 0%, #03121a 55%); background-attachment: fixed; }

/* Magma — fire: hot pink + molten orange neon */
html[data-theme="popmagma"] {
    color-scheme: dark;
    --bg-color: #160208; --text-color: #ffffff; --text-soft: #f3c4cf;
    --surface: #2a0a14; --surface-2: #3a0f1d;
    --modal-bg: #1f0710; --modal-card-bg: #2e0c18; --modal-border-color: #4d1c2c;
    --modal-input-bg: #3a0f1d; --modal-input-border: #5f263a; --modal-secondary-text: #d49aa8;
    --c-notes: #ff3d9a; --c-notes-rgb: 255, 61, 154; --c-notes-dark: #ff8cc2;
    --c-todos: #ff7a00; --c-todos-rgb: 255, 122, 0;  --c-todos-dark: #ffb061;
    --c-cal:   #ffd000; --c-cal-rgb: 255, 208, 0;    --c-cal-dark: #ffe26b;
    --c-yellow:#ffb01f; --c-yellow-rgb: 255, 176, 31; --c-yellow-dark: #ffce75;
    --c-purple:#ff3d9a; --c-purple-rgb: 255, 61, 154; --c-purple-dark: #ff8cc2;
    --c-danger:#ff2e3e; --c-danger-rgb: 255, 46, 62; --c-danger-dark: #ff8088;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(22, 2, 8, 0.84); --chip-soft-bg: rgba(255, 255, 255, 0.13);
}
html[data-theme="popmagma"] body { background: radial-gradient(125% 90% at 50% -8%, #4a0a1e 0%, #160208 55%); background-attachment: fixed; }

/* Grape — violet + magenta neon */
html[data-theme="popgrape"] {
    color-scheme: dark;
    --bg-color: #0c0524; --text-color: #ffffff; --text-soft: #d9c9ff;
    --surface: #1a0f3e; --surface-2: #261552;
    --modal-bg: #150b30; --modal-card-bg: #1f1248; --modal-border-color: #3a2470;
    --modal-input-bg: #261552; --modal-input-border: #4a2f90; --modal-secondary-text: #b3a0e6;
    --c-notes: #b14bff; --c-notes-rgb: 177, 75, 255; --c-notes-dark: #d3a3ff;
    --c-todos: #ff4dd2; --c-todos-rgb: 255, 77, 210; --c-todos-dark: #ff9be6;
    --c-cal:   #00e0ff; --c-cal-rgb: 0, 224, 255;    --c-cal-dark: #7deeff;
    --c-yellow:#c98bff; --c-yellow-rgb: 201, 139, 255; --c-yellow-dark: #e0bcff;
    --c-purple:#c14bff; --c-purple-rgb: 193, 75, 255; --c-purple-dark: #dfa3ff;
    --c-danger:#ff2e63; --c-danger-rgb: 255, 46, 99; --c-danger-dark: #ff86ab;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(12, 5, 36, 0.84); --chip-soft-bg: rgba(255, 255, 255, 0.15);
}
html[data-theme="popgrape"] body { background: radial-gradient(125% 88% at 50% -8%, #34106a 0%, #0c0524 55%); background-attachment: fixed; }

/* ===== SCI-FI SET (standard card treatment) ===== */
/* Neptune — deep blue + purple */
html[data-theme="neptune"] {
    color-scheme: dark;
    --bg-color: #0a0f33; --text-color: #ecefff; --text-soft: #a7b0e6;
    --surface: #15205c; --surface-2: #1e2a72;
    --modal-bg: #0f1644; --modal-card-bg: #18225e; --modal-border-color: #2c3a86;
    --modal-input-bg: #1e2a72; --modal-input-border: #3a4aa0; --modal-secondary-text: #9aa6dc;
    --c-notes: #4d7cff; --c-notes-rgb: 77, 124, 255;  --c-notes-dark: #9db5ff;
    --c-todos: #a06cff; --c-todos-rgb: 160, 108, 255; --c-todos-dark: #c9b0ff;
    --c-cal:   #2fd0ff; --c-cal-rgb: 47, 208, 255;    --c-cal-dark: #8ee6ff;
    --c-yellow:#5b9dff; --c-yellow-rgb: 91, 157, 255; --c-yellow-dark: #9ec3ff;
    --c-purple:#b06cff; --c-purple-rgb: 176, 108, 255; --c-purple-dark: #d2b0ff;
    --c-danger:#ff5a8a; --c-danger-rgb: 255, 90, 138; --c-danger-dark: #ff96b3;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(10, 15, 51, 0.85); --chip-soft-bg: rgba(255, 255, 255, 0.10);
}
html[data-theme="neptune"] body { background: radial-gradient(130% 90% at 50% -10%, #2a1a7a 0%, #0a0f33 55%); background-attachment: fixed; }

/* Toxic — acid green with hazard-orange / magenta contrast */
html[data-theme="toxic"] {
    color-scheme: dark;
    --bg-color: #0a0f08; --text-color: #eafce0; --text-soft: #a6c499;
    --surface: #131c0e; --surface-2: #1c2914;
    --modal-bg: #0e150a; --modal-card-bg: #172110; --modal-border-color: #2c3d1e;
    --modal-input-bg: #1c2914; --modal-input-border: #3a4f28; --modal-secondary-text: #92b285;
    --c-notes: #2bff7a; --c-notes-rgb: 43, 255, 122; --c-notes-dark: #8effb4;
    --c-todos: #b6ff1f; --c-todos-rgb: 182, 255, 31; --c-todos-dark: #d6ff7a;
    --c-cal:   #00ffc0; --c-cal-rgb: 0, 255, 192;    --c-cal-dark: #7dffe2;
    --c-yellow:#dcff33; --c-yellow-rgb: 220, 255, 51; --c-yellow-dark: #ebff85;
    --c-purple:#59ff86; --c-purple-rgb: 89, 255, 134; --c-purple-dark: #a3ffbf;
    --c-danger:#ff3b5c; --c-danger-rgb: 255, 59, 92; --c-danger-dark: #ff8a9f;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(10, 15, 8, 0.85); --chip-soft-bg: rgba(255, 255, 255, 0.10);
}
html[data-theme="toxic"] body { background: radial-gradient(130% 90% at 50% -10%, #16240e 0%, #0a0f08 55%); background-attachment: fixed; }

/* Chrome — muted charcoal: lighter & darker grays, no white. Calm monochrome (danger
   keeps a faint dusty red so warnings/late stay recognizable). */
html[data-theme="chrome"] {
    color-scheme: dark;
    --bg-color: #1f2125; --text-color: #d6d8db; --text-soft: #989ca2;
    --surface: #2a2d31; --surface-2: #34373c;
    --modal-bg: #25282c; --modal-card-bg: #2e3135; --modal-border-color: #3d4147;
    --modal-input-bg: #34373c; --modal-input-border: #4a4e55; --modal-secondary-text: #8a8f96;
    --c-notes: #9aa0a8; --c-notes-rgb: 154, 160, 168; --c-notes-dark: #c7ccd2;
    --c-todos: #b8bdc4; --c-todos-rgb: 184, 189, 196; --c-todos-dark: #d8dce0;
    --c-cal:   #6f757e; --c-cal-rgb: 111, 117, 126;   --c-cal-dark: #aeb4bc;
    --c-yellow:#878d96; --c-yellow-rgb: 135, 141, 150; --c-yellow-dark: #b8bdc4;
    --c-purple:#8a909a; --c-purple-rgb: 138, 144, 154; --c-purple-dark: #c0c5cc;
    --c-danger:#b07070; --c-danger-rgb: 176, 112, 112; --c-danger-dark: #d6a3a3;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(31, 33, 37, 0.85); --chip-soft-bg: rgba(255, 255, 255, 0.07);
}
html[data-theme="chrome"] body { background: linear-gradient(180deg, #25282c 0%, #1b1d20 100%); background-attachment: fixed; }

/* ===================== SUNSET THEME (warm dusk) ===================== */
html[data-theme="sunset"] {
    color-scheme: dark;
    --bg-color: #1a0e1f;
    --text-color: #fff3ea;
    --text-soft: #e0b4ac;
    --surface: #2a1626;
    --surface-2: #391f31;
    --modal-bg: #21121d;
    --modal-card-bg: #2e1828;
    --modal-border-color: #4a2c40;
    --modal-input-bg: #391f31;
    --modal-input-border: #5c3850;
    --modal-secondary-text: #c79aa0;
    --c-notes: #ff8c42;   --c-notes-rgb: 255, 140, 66;   --c-notes-dark: #ffb780;
    --c-todos: #ff5d73;   --c-todos-rgb: 255, 93, 115;   --c-todos-dark: #ff97a6;
    --c-cal:   #ffc24b;   --c-cal-rgb: 255, 194, 75;     --c-cal-dark: #ffd98a;
    --c-yellow:#ffd76b;   --c-yellow-rgb: 255, 215, 107; --c-yellow-dark: #ffe6a0;
    --c-purple:#c86fd6;   --c-purple-rgb: 200, 111, 214; --c-purple-dark: #e0a8e8;
    --c-danger:#ff5252;   --c-danger-rgb: 255, 82, 82;   --c-danger-dark: #ff9090;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(26, 14, 31, 0.85);
    --chip-soft-bg: rgba(255, 255, 255, 0.10);
}
html[data-theme="sunset"] body {
    background: linear-gradient(178deg, #4a1a2e 0%, #2a1226 38%, #1a0e1f 100%);
    background-attachment: fixed;
}

/* ===================== FOREST THEME (deep woods) ===================== */
html[data-theme="forest"] {
    color-scheme: dark;
    --bg-color: #0c1611;
    --text-color: #eef6ec;
    --text-soft: #a9c4ad;
    --surface: #14241b;
    --surface-2: #1d3326;
    --modal-bg: #0f1c15;
    --modal-card-bg: #18291e;
    --modal-border-color: #2c4633;
    --modal-input-bg: #1d3326;
    --modal-input-border: #38573f;
    --modal-secondary-text: #95b39b;
    --c-notes: #4fc77a;   --c-notes-rgb: 79, 199, 122;   --c-notes-dark: #8fe0ac;
    --c-todos: #e0a33c;   --c-todos-rgb: 224, 163, 60;   --c-todos-dark: #f0c87e;
    --c-cal:   #46b0c9;   --c-cal-rgb: 70, 176, 201;     --c-cal-dark: #8ad3e3;
    --c-yellow:#e3c34a;   --c-yellow-rgb: 227, 195, 74;  --c-yellow-dark: #f0db8a;
    --c-purple:#a986e0;   --c-purple-rgb: 169, 134, 224; --c-purple-dark: #c9b3ee;
    --c-danger:#e36055;   --c-danger-rgb: 227, 96, 85;   --c-danger-dark: #f0938b;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(12, 22, 17, 0.85);
    --chip-soft-bg: rgba(255, 255, 255, 0.08);
}
html[data-theme="forest"] body {
    background: radial-gradient(130% 90% at 50% -10%, #173322 0%, #0c1611 55%);
    background-attachment: fixed;
}

/* ===================== CANDY THEME (cute feminine pastel — pop-style) =====================
   Pop-style glowing cards in soft pastels (pink / lavender / mint) on a deep plum canvas
   (no white). Gets the neon treatment via data-fx="neon". */
html[data-theme="candy"] {
    color-scheme: light;
    --bg-color: #ffccdf; --text-color: #5a2a48; --text-soft: #a06d8a;
    --surface: #ffe6f1; --surface-2: #ffd6ea;
    --modal-bg: #fff2f8; --modal-card-bg: #ffe8f2; --modal-border-color: #f8c6dd;
    --modal-input-bg: #ffe6f1; --modal-input-border: #f2b6d2; --modal-secondary-text: #ad7896;
    /* pastel pinks & soft pink-purples; "-dark" stays deep enough to read on the pink cards */
    --c-notes: #ff7eb8; --c-notes-rgb: 255, 126, 184;  --c-notes-dark: #d23c84;
    --c-todos: #c69bf0; --c-todos-rgb: 198, 155, 240;  --c-todos-dark: #8a45c4;
    --c-cal:   #ff9ec9; --c-cal-rgb: 255, 158, 201;    --c-cal-dark: #cc4d8b;
    --c-yellow:#ffb29f; --c-yellow-rgb: 255, 178, 159; --c-yellow-dark: #c2563f;
    --c-purple:#d28ee8; --c-purple-rgb: 210, 142, 232; --c-purple-dark: #8d3fc2;
    --c-danger:#ff8095; --c-danger-rgb: 255, 128, 149; --c-danger-dark: #cc3552;
    --tint-notes: var(--surface); --tint-todos: var(--surface); --tint-cal: var(--surface);
    --topbar-bg: rgba(255, 204, 223, 0.85); --chip-soft-bg: rgba(90, 42, 72, 0.06);
}
html[data-theme="candy"] body { background: linear-gradient(170deg, #ffd9ea 0%, #ffb3d2 100%); background-attachment: fixed; }

/* Pop bulletpoints: bright neon cards, but with a dark scrim that's strongest in the
   TOP-LEFT (where the title/tag/text live) and fades out toward the bottom-right — so
   the light text stays crisp while the rest of the card glows full neon. */
html[data-fx="neon"] .list-item { box-shadow: none; }
html[data-fx="neon"] .list-item.rem {
    background-image:
        linear-gradient(135deg, rgba(8, 3, 26, 0.62) 0%, rgba(8, 3, 26, 0.16) 46%, rgba(8, 3, 26, 0) 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--c-notes) 78%, #fff), var(--c-notes));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 26px -2px rgba(var(--c-notes-rgb), 0.9);
}
html[data-fx="neon"] .list-item.task {
    background-image:
        linear-gradient(135deg, rgba(8, 3, 26, 0.62) 0%, rgba(8, 3, 26, 0.16) 46%, rgba(8, 3, 26, 0) 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--c-todos) 78%, #fff), var(--c-todos));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 26px -2px rgba(var(--c-todos-rgb), 0.9);
}
html[data-fx="neon"] .list-item.task.on-cal,
html[data-fx="neon"] .list-item.meeting {
    background-image:
        linear-gradient(135deg, rgba(8, 3, 26, 0.62) 0%, rgba(8, 3, 26, 0.16) 46%, rgba(8, 3, 26, 0) 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--c-cal) 78%, #fff), var(--c-cal));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 26px -2px rgba(var(--c-cal-rgb), 0.9);
}
html[data-fx="neon"] .list-item.task.late {
    background-image:
        linear-gradient(135deg, rgba(8, 3, 26, 0.62) 0%, rgba(8, 3, 26, 0.16) 46%, rgba(8, 3, 26, 0) 72%),
        linear-gradient(145deg, color-mix(in srgb, var(--c-danger) 78%, #fff), var(--c-danger));
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 26px -2px rgba(var(--c-danger-rgb), 0.9);
}
html[data-fx="neon"] .list-item:hover { transform: translateY(-2px); box-shadow: 0 0 32px 0 rgba(255, 255, 255, 0.45); }
/* light text over the dark top-left scrim (+ a soft shadow for the brighter lower area) */
html[data-fx="neon"] .list-item .li-title { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
html[data-fx="neon"] .list-item .li-sub,
html[data-fx="neon"] .list-item .li-extra,
html[data-fx="neon"] .list-item .li-ttl { color: rgba(255, 255, 255, 0.93); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
/* the top-right cluster sits on the bright part of the card → dark ink reads better there */
html[data-fx="neon"] .list-item .li-ago,
html[data-fx="neon"] .list-item .li-flag { color: rgba(20, 8, 44, 0.82); }
/* dark pill-chips so the date/time read on the bright cards */
html[data-fx="neon"] .li-date-chip,
html[data-fx="neon"] .li-cal-time { background: rgba(20, 8, 44, 0.82); color: #fff; border-color: rgba(20, 8, 44, 0.4); }

/* ============ Pop NEON polish — make it glow, stick out, feel upbeat ============ */
/* glowing headings (text-shadow in currentColor = a self-colored neon glow) */
html[data-fx="neon"] .home-title {
    color: #fff;
    text-shadow: 0 0 7px #fff, 0 0 18px var(--c-purple), 0 0 38px rgba(var(--c-purple-rgb), 0.7);
}
html[data-fx="neon"] .home-sub { color: var(--text-soft); text-shadow: 0 0 12px rgba(var(--c-purple-rgb), 0.6); }
html[data-fx="neon"] .section-head { text-shadow: 0 0 14px currentColor; }
html[data-fx="neon"] .day-label,
html[data-fx="neon"] .today-head,
html[data-fx="neon"] .day-pill,
html[data-fx="neon"] .day-cal-sep { text-shadow: 0 0 10px currentColor; }
/* progress + count pills glow */
html[data-fx="neon"] .day-count { box-shadow: 0 0 12px -2px currentColor; }

/* +New buttons: solid glowing neon outline instead of a flat dashed box */
html[data-fx="neon"] .add-toggle-btn { border-style: solid; color: #fff; background-color: rgba(255, 255, 255, 0.05); }
html[data-fx="neon"] .add-toggle-btn.at-notes {
    border-color: var(--c-notes);
    box-shadow: 0 0 20px -3px rgba(var(--c-notes-rgb), 0.95), inset 0 0 14px -8px rgba(var(--c-notes-rgb), 0.9);
    text-shadow: 0 0 10px rgba(var(--c-notes-rgb), 0.95);
}
html[data-fx="neon"] .add-toggle-btn.at-todos {
    border-color: var(--c-todos);
    box-shadow: 0 0 20px -3px rgba(var(--c-todos-rgb), 0.95), inset 0 0 14px -8px rgba(var(--c-todos-rgb), 0.9);
    text-shadow: 0 0 10px rgba(var(--c-todos-rgb), 0.95);
}
html[data-fx="neon"] .add-toggle-btn.at-notes:hover { background-color: rgba(var(--c-notes-rgb), 0.16); }
html[data-fx="neon"] .add-toggle-btn.at-todos:hover { background-color: rgba(var(--c-todos-rgb), 0.16); }

/* primary action buttons + active tabs light up */
html[data-fx="neon"] .action-btn { box-shadow: 0 0 18px -3px rgba(255, 255, 255, 0.55); }
html[data-fx="neon"] .navbtn.active { box-shadow: 0 0 18px 0 rgba(255, 255, 255, 0.5); }

/* the search frame gets a faint neon edge */
html[data-fx="neon"] .search-row {
    border-color: rgba(var(--c-purple-rgb), 0.45);
    box-shadow: 0 0 18px -6px rgba(var(--c-purple-rgb), 0.7);
}

/* gentle neon "breathing" so it feels alive + upbeat (off for reduced-motion) */
@keyframes popTitlePulse {
    0%, 100% { text-shadow: 0 0 7px #fff, 0 0 16px var(--c-purple), 0 0 30px rgba(var(--c-purple-rgb), 0.55); }
    50%      { text-shadow: 0 0 11px #fff, 0 0 28px var(--c-purple), 0 0 52px rgba(var(--c-purple-rgb), 0.9); }
}
@keyframes popTextPulse {
    0%, 100% { text-shadow: 0 0 9px currentColor; }
    50%      { text-shadow: 0 0 16px currentColor, 0 0 30px currentColor; }
}
@keyframes popNotesPulse {
    0%, 100% { box-shadow: 0 0 16px -4px rgba(var(--c-notes-rgb), 0.8), inset 0 0 14px -8px rgba(var(--c-notes-rgb), 0.9); }
    50%      { box-shadow: 0 0 30px -2px rgba(var(--c-notes-rgb), 1), inset 0 0 16px -6px rgba(var(--c-notes-rgb), 1); }
}
@keyframes popTodosPulse {
    0%, 100% { box-shadow: 0 0 16px -4px rgba(var(--c-todos-rgb), 0.8), inset 0 0 14px -8px rgba(var(--c-todos-rgb), 0.9); }
    50%      { box-shadow: 0 0 30px -2px rgba(var(--c-todos-rgb), 1), inset 0 0 16px -6px rgba(var(--c-todos-rgb), 1); }
}
html[data-fx="neon"] .home-title { animation: popTitlePulse 2.4s ease-in-out infinite; }
html[data-fx="neon"] .section-head { animation: popTextPulse 2.6s ease-in-out infinite; }
html[data-fx="neon"] .add-toggle-btn.at-notes { animation: popNotesPulse 2.4s ease-in-out infinite; }
html[data-fx="neon"] .add-toggle-btn.at-todos { animation: popTodosPulse 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    html[data-fx="neon"] .home-title,
    html[data-fx="neon"] .section-head,
    html[data-fx="neon"] .add-toggle-btn.at-notes,
    html[data-fx="neon"] .add-toggle-btn.at-todos { animation: none; }
}

/* Pop: the editor modal lights up in the opened item's neon color too */
html[data-fx="neon"] .modal.acc-note,
html[data-fx="neon"] .modal.acc-task,
html[data-fx="neon"] .modal.acc-cal {
    border: 1.5px solid var(--accent);
    background-image: linear-gradient(rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.12));
    box-shadow: 0 0 36px -4px rgba(var(--accent-rgb), 0.7), 0 24px 60px -16px rgba(0, 0, 0, 0.75);
}
html[data-fx="neon"] .modal.acc-note .bp-title,
html[data-fx="neon"] .modal.acc-task .bp-title,
html[data-fx="neon"] .modal.acc-cal .bp-title { text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.75); }
html[data-fx="neon"] .modal.acc-note .bp-content,
html[data-fx="neon"] .modal.acc-task .bp-content,
html[data-fx="neon"] .modal.acc-cal .bp-content { border-color: rgba(var(--accent-rgb), 0.4); }
/* editor buttons glow in their own neon color */
html[data-fx="neon"] .btn-notes  { box-shadow: 0 0 20px -3px rgba(var(--c-notes-rgb), 0.9); }
html[data-fx="neon"] .btn-todos  { box-shadow: 0 0 20px -3px rgba(var(--c-todos-rgb), 0.9); }
html[data-fx="neon"] .btn-cal    { box-shadow: 0 0 20px -3px rgba(var(--c-cal-rgb), 0.9); }
html[data-fx="neon"] .btn-danger { box-shadow: 0 0 20px -3px rgba(var(--c-danger-rgb), 0.9); }

/* ===== POPLIGHT — vivid colorful cards + soft glow for the LIGHT themes (candy, chrome).
   Strong color tint (keeps the readable dark accent text) + vivid border + colored halo. ===== */
html[data-fx="poplight"] .list-item.rem {
    background-image: linear-gradient(150deg, rgba(var(--c-notes-rgb), 0.36), rgba(var(--c-notes-rgb), 0.16));
    border-color: var(--c-notes);
    box-shadow: 0 0 20px -7px rgba(var(--c-notes-rgb), 0.8), 0 6px 16px -12px rgba(0, 0, 0, 0.25);
}
html[data-fx="poplight"] .list-item.task {
    background-image: linear-gradient(150deg, rgba(var(--c-todos-rgb), 0.36), rgba(var(--c-todos-rgb), 0.16));
    border-color: var(--c-todos);
    box-shadow: 0 0 20px -7px rgba(var(--c-todos-rgb), 0.8), 0 6px 16px -12px rgba(0, 0, 0, 0.25);
}
html[data-fx="poplight"] .list-item.task.on-cal,
html[data-fx="poplight"] .list-item.meeting {
    background-image: linear-gradient(150deg, rgba(var(--c-cal-rgb), 0.34), rgba(var(--c-cal-rgb), 0.15));
    border-color: var(--c-cal);
    box-shadow: 0 0 20px -7px rgba(var(--c-cal-rgb), 0.8), 0 6px 16px -12px rgba(0, 0, 0, 0.25);
}
html[data-fx="poplight"] .list-item.task.late {
    background-image: linear-gradient(150deg, rgba(var(--c-danger-rgb), 0.36), rgba(var(--c-danger-rgb), 0.16));
    border-color: var(--c-danger);
    box-shadow: 0 0 20px -7px rgba(var(--c-danger-rgb), 0.8), 0 6px 16px -12px rgba(0, 0, 0, 0.25);
}
html[data-fx="poplight"] .list-item:hover { transform: translateY(-2px); box-shadow: 0 0 26px -5px rgba(0, 0, 0, 0.25); }
/* headings + buttons glow in color */
html[data-fx="poplight"] .home-title { text-shadow: 0 0 16px rgba(var(--c-purple-rgb), 0.5); }
html[data-fx="poplight"] .section-head { text-shadow: 0 0 12px color-mix(in srgb, currentColor, transparent 55%); }
html[data-fx="poplight"] .add-toggle-btn { border-style: solid; }
html[data-fx="poplight"] .add-toggle-btn.at-notes { border-color: var(--c-notes); color: var(--c-notes-dark); box-shadow: 0 0 16px -6px rgba(var(--c-notes-rgb), 0.85); }
html[data-fx="poplight"] .add-toggle-btn.at-todos { border-color: var(--c-todos); color: var(--c-todos-dark); box-shadow: 0 0 16px -6px rgba(var(--c-todos-rgb), 0.85); }
html[data-fx="poplight"] .navbtn.active { box-shadow: 0 0 16px -2px rgba(0, 0, 0, 0.22); }
/* editor modal gets the colored glow too */
html[data-fx="poplight"] .modal.acc-note,
html[data-fx="poplight"] .modal.acc-task,
html[data-fx="poplight"] .modal.acc-cal {
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 28px -8px rgba(var(--accent-rgb), 0.55), 0 24px 60px -16px rgba(0, 0, 0, 0.25);
}

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

html, body { height: 100%; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    transition: background-color 0.3s ease;
}
/* the whole page picks up a soft tint of the active area */
/* dark page across every view; items carry the color */
body[data-view] { background-color: var(--bg-color); }

button { font-family: var(--font-family); cursor: pointer; }
input, textarea, select { font-family: var(--font-family); font-size: 1em; }
.hidden { display: none !important; }

/* ===================================================================================
   AUTH / LOADING SCREEN
   =================================================================================== */
.auth-screen {
    position: fixed; inset: 0; z-index: 200;
    background:
      radial-gradient(ellipse at 50% 120%, rgba(var(--c-todos-rgb), 0.10) 0%, transparent 60%),
      var(--bg-color);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 24px; padding: 20px;
}
.neon-logo {
    font-size: 3.2em; margin: 0; font-weight: 900;
    letter-spacing: 2px; text-align: center; line-height: 1;
    color: var(--c-todos);
    animation: ledSwap 7s ease-in-out infinite;
}
/* gentle LED-style color swap through the theme palette, starting on orange */
@keyframes ledSwap {
    0%   { color: var(--c-todos);  text-shadow: 0 0 22px rgba(var(--c-todos-rgb), 0.55); }
    25%  { color: var(--c-yellow); text-shadow: 0 0 22px rgba(var(--c-yellow-rgb), 0.55); }
    50%  { color: var(--c-cal);    text-shadow: 0 0 22px rgba(var(--c-cal-rgb), 0.55); }
    75%  { color: var(--c-notes);  text-shadow: 0 0 22px rgba(var(--c-notes-rgb), 0.55); }
    100% { color: var(--c-todos);  text-shadow: 0 0 22px rgba(var(--c-todos-rgb), 0.55); }
}
.auth-tagline { color: var(--modal-secondary-text); font-weight: 600; letter-spacing: 0.5px; }
.google-btn {
    display: flex; align-items: center; gap: 10px;
    background-color: #fff; color: #1a1a1a;
    border: 1px solid var(--modal-border-color);
    padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 1em;
    box-shadow: 0 6px 18px -10px rgba(0,0,0,0.4);
    transition: all 0.2s;
}
.google-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(var(--c-todos-rgb), 0.6); }
.auth-error {
    color: var(--c-danger); font-size: 0.9em; font-weight: 600; max-width: 420px;
    text-align: center; line-height: 1.5;
    background: rgba(var(--c-danger-rgb), 0.08); border: 1px solid rgba(var(--c-danger-rgb), 0.35);
    border-radius: 8px; padding: 10px 16px;
}
.loader {
    width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid rgba(0,0,0,0.10); border-top-color: var(--c-todos);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================================================================================
   INTRO — dark "TinyBook · THL Sandbox" studio splash (dissipates after ~3s)
   =================================================================================== */
.intro-screen {
    background:
      radial-gradient(ellipse at 50% 38%, rgba(255, 190, 31, 0.14) 0%, transparent 58%),
      #0c0820 !important;
    transition: opacity 0.62s ease, transform 0.62s ease;
}
.intro-screen.intro-out { opacity: 0; transform: scale(1.04); }
.intro-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    animation: introIn 0.8s cubic-bezier(.2, .8, .3, 1.1) both;
}
@keyframes introIn {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: none; }
}
.intro-appicon {
    width: 116px; height: 116px; border-radius: 26px;
    box-shadow: 0 16px 50px -10px rgba(0, 0, 0, 0.7), 0 0 50px -8px rgba(255, 190, 31, 0.3);
    animation: introIconFloat 3.2s ease-in-out infinite;
}
@keyframes introIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.intro-logo { font-size: 2.8em; }

.intro-studio {
    position: absolute; bottom: 52px;
    display: flex; flex-direction: column; align-items: center; gap: 11px;
    animation: introStudioIn 1s ease-out 0.55s both;
}
@keyframes introStudioIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.intro-by-label {
    font-size: 0.62em; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    color: #7d6aa8;
}
/* THL Sandbox wordmark — exact studio brand spec (Orbitron) */
.landing-studio {
    display: inline-flex; align-items: baseline; gap: 7px;
    font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 700;
    letter-spacing: 3.4px; text-transform: uppercase; color: #7d6aa8;
}
.landing-studio-mark {
    background: #ffbe1f; color: #0c0820;
    padding: 3px 6px; border-radius: 3px; font-weight: 800; letter-spacing: 1.6px;
    box-shadow: 0 0 12px rgba(255, 200, 58, 0.55);
}
.landing-studio-name { color: #f6efde; }

/* ===================================================================================
   HEADER
   =================================================================================== */
.topbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px;
    background-color: var(--topbar-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--modal-border-color);
}
.brand {
    font-weight: 900; font-size: 1.2em; color: var(--text-color); letter-spacing: 0.5px;
    cursor: pointer; user-select: none;
}
.brand span { color: var(--c-todos); }

/* generic round icon button (hamburger, calendar) */
.icon-btn {
    width: 40px; height: 40px; flex: none; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-border-color);
    transition: all 0.18s;
}
.icon-btn:hover { color: var(--text-color); border-color: var(--modal-input-border); box-shadow: 0 4px 12px -6px rgba(0,0,0,0.35); }
.icon-btn:active { transform: scale(0.94); }
.cal-icon-btn.active {
    color: #fff; border-color: var(--c-purple);
    background-color: var(--c-purple);
    box-shadow: 0 6px 16px -6px rgba(var(--c-purple-rgb), 0.7);
}
/* the "+" jumps to the landing page (add a note / task / use the assistant) */
.add-icon-btn { color: var(--c-todos); border-color: rgba(var(--c-todos-rgb), 0.5); }
.add-icon-btn:hover { color: #fff; background-color: var(--c-todos); border-color: var(--c-todos); }
.add-icon-btn.active {
    color: #fff; border-color: var(--c-todos);
    background-color: var(--c-todos);
    box-shadow: 0 6px 16px -6px rgba(var(--c-todos-rgb), 0.7);
}
/* The add-new button and the status pill share one top-bar slot. */
.add-slot { display: inline-flex; align-items: center; flex: none; }
.add-icon-btn.swapped-out { display: none; } /* pill takes the slot while transitional */

/* Calendar status pill — icon-only WiFi indicator that sits in the add-new slot.
   Red blinking = connecting / reconnect-needed · solid green = just-synced (brief). */
.gcal-pill {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: none; background: none; border-radius: 10px;
    cursor: default;
    transition: opacity 0.45s ease, color 0.3s ease, background-color 0.15s ease;
}
.gp-wifi { width: 23px; height: 23px; flex: none; }
/* red + blink while trying to reach Google, and while waiting for a manual reconnect */
.gcal-pill.connecting,
.gcal-pill.reconnect {
    color: var(--c-danger);
    animation: gcalBlink 1.2s ease-in-out infinite;
}
.gcal-pill.reconnect { cursor: pointer; }
.gcal-pill.reconnect:hover { background-color: rgba(var(--c-danger-rgb), 0.12); }
.gcal-pill.reconnect:active { transform: scale(0.94); }
/* solid green confirmation flash (no blink) */
.gcal-pill.synced { color: var(--c-cal); animation: none; }
/* fade out smoothly before the add-new button returns */
.gcal-pill.out { opacity: 0; pointer-events: none; }
@keyframes gcalBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
    .gcal-pill.connecting, .gcal-pill.reconnect { animation: none; opacity: 1; }
}

/* Centered, non-blocking "Reconnecting…" notice — a prominent card (~40% from top,
   horizontally centered) with a large blinking WiFi icon over the text. Floats above
   content and never blocks taps. Hidden until .show. */
.gcal-center {
    position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
    z-index: 95; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    padding: 30px 36px; border-radius: 22px;
    background-color: var(--surface);
    border: 1px solid rgba(var(--c-danger-rgb), 0.35);
    box-shadow: 0 26px 64px -16px rgba(0, 0, 0, 0.45);
    color: var(--text-color); font-size: 1.08em; font-weight: 700; text-align: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.gcal-center.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.gcal-center .gp-wifi {
    width: 54px; height: 54px; flex: none; color: var(--c-danger);
    animation: gcalBlink 1.2s ease-in-out infinite;
}
.gcal-center-text { max-width: 260px; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
    .gcal-center .gp-wifi { animation: none; opacity: 1; }
}

/* the two main tabs — larger + bolder now that they're the only ones */
.topnav { display: flex; gap: 10px; }
.navbtn {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--modal-border-color); color: var(--text-soft);
    padding: 9px 18px; border-radius: 10px;
    font-weight: 800; font-size: 0.82em; text-transform: uppercase; letter-spacing: 1.5px;
    transition: all 0.2s;
}
.navbtn .nav-ico { width: 15px; height: 15px; flex: none; }
.nav-count {
    display: inline-block; min-width: 14px; margin-left: 5px;
    padding: 1px 7px; border-radius: 9px;
    background-color: var(--chip-soft-bg);
    font-size: 0.82em; letter-spacing: 0; font-weight: 700;
}
.nav-count:empty { display: none; }
.nav-alert {
    position: absolute; top: -4px; right: -4px;
    width: 10px; height: 10px; border-radius: 50%;
    background-color: var(--c-danger);
    box-shadow: 0 0 0 2px #fff;
    animation: alertPulse 1.6s ease-in-out infinite;
}
@keyframes alertPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}
/* idle tabs already wear their section color (filled solid when active) */
.navbtn.nav-late  { color: var(--c-danger); border-color: rgba(var(--c-danger-rgb), 0.55); background-color: rgba(var(--c-danger-rgb), 0.10); animation: lateTabPulse 1.8s ease-in-out infinite; }
.navbtn.nav-late .nav-count { background-color: rgba(var(--c-danger-rgb), 0.20); color: var(--c-danger-dark); }
/* Late tab is icon-only: the warning glyph + count say "late" without the word
   (which ate a lot of width). The name still surfaces via the button's title. */
.navbtn.nav-late .nav-label { display: none; }
.navbtn.nav-late .nav-ico { width: 16px; height: 16px; }
.navbtn.nav-late .nav-count { margin-left: 4px; }
@keyframes lateTabPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-danger-rgb), 0); } 50% { box-shadow: 0 0 0 3px rgba(var(--c-danger-rgb), 0.18); } }
.navbtn.nav-today { color: var(--c-cal);   border-color: rgba(var(--c-cal-rgb), 0.5);   background-color: rgba(var(--c-cal-rgb), 0.08); }
.navbtn.nav-notes { color: var(--c-notes); border-color: rgba(var(--c-notes-rgb), 0.5); background-color: rgba(var(--c-notes-rgb), 0.08); }
.navbtn.nav-todos { color: var(--c-todos); border-color: rgba(var(--c-todos-rgb), 0.5); background-color: rgba(var(--c-todos-rgb), 0.08); }
.navbtn:hover { filter: brightness(0.97); }
.navbtn.active.nav-notes {
    border-color: var(--c-notes); color: #fff;
    background-color: var(--c-notes);
    box-shadow: 0 6px 16px -6px rgba(var(--c-notes-rgb), 0.7);
}
.navbtn.active.nav-todos {
    border-color: var(--c-todos); color: #fff;
    background-color: var(--c-todos);
    box-shadow: 0 6px 16px -6px rgba(var(--c-todos-rgb), 0.7);
}
.navbtn.active.nav-today {
    border-color: var(--c-cal); color: #fff;
    background-color: var(--c-cal);
    box-shadow: 0 6px 16px -6px rgba(var(--c-cal-rgb), 0.7);
}
.navbtn.active.nav-late {
    border-color: var(--c-danger); color: #fff;
    background-color: var(--c-danger);
    box-shadow: 0 6px 16px -6px rgba(var(--c-danger-rgb), 0.7);
    animation: none;
}
.navbtn.active.nav-late .nav-count { background-color: rgba(255, 255, 255, 0.25); color: #fff; }
.home-title.late-title { color: var(--c-danger); }
.spacer { flex: 1; }

/* ===================================================================================
   HAMBURGER MENU (identity + Settings / Log out placeholders)
   =================================================================================== */
.ham-menu {
    position: fixed; top: 64px; left: 14px; z-index: 80;
    width: min(280px, calc(100vw - 28px));
    background-color: var(--surface);
    border: 1px solid var(--modal-border-color); border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.35);
    padding: 8px;
    animation: hamDrop 0.16s ease;
}
@keyframes hamDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.ham-user {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 14px; margin-bottom: 6px;
    border-bottom: 1px solid var(--modal-border-color);
}
.ham-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex: none;
    object-fit: cover; background-color: var(--surface-2);
    border: 2px solid var(--modal-border-color);
}
.ham-user-text { min-width: 0; }
.ham-user-label {
    font-size: 0.64em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--modal-secondary-text);
}
.ham-email { font-size: 0.92em; font-weight: 700; color: var(--text-color); word-break: break-all; }
.ham-row {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 12px 12px; border: none; border-radius: 10px;
    background: none; color: var(--text-color);
    font-size: 0.95em; font-weight: 600;
    transition: background-color 0.15s;
}
.ham-row:hover { background-color: var(--surface-2); }
.ham-row-ico { font-size: 1.05em; width: 20px; text-align: center; }
#ham-logout { color: var(--c-danger); }

.wrap { max-width: 780px; margin: 0 auto; padding: 26px 16px 90px; }

/* ===================================================================================
   HOME
   =================================================================================== */
.home-title {
    font-size: clamp(2em, 6vw, 3em); font-weight: 900; color: var(--text-color);
    text-align: center; letter-spacing: 1px; margin: 28px 0 6px;
}
.home-sub { text-align: center; color: var(--modal-secondary-text); font-weight: 600; margin-bottom: 36px; }
.home-grid { display: flex; flex-direction: column; gap: 18px; }
#app-shell.is-home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#app-shell.is-home .wrap { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; min-height: 0; }
#app-shell.is-home .home-grid { flex: 1 1 auto; min-height: 0; }
.home-card {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: flex-start; gap: 22px;
    width: 100%; text-align: left;
    min-height: 110px; padding: 22px clamp(22px, 6vw, 32px); border-radius: 20px;
    color: #fff; border: none; cursor: pointer;
    transition: transform 0.18s cubic-bezier(.2, .8, .3, 1.2), filter 0.2s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.home-card:hover { transform: translateY(-4px) scale(1.02); filter: brightness(1.05); }
.home-card:active { transform: translateY(0) scale(0.975); transition-duration: 0.07s; }
@media (prefers-reduced-motion: reduce) { .home-card { transition: filter 0.2s ease; } .home-card:hover, .home-card:active { transform: none; } }
/* dark mode (default): deep accent-tinted panels so white text stays readable */
.hc-notes { background-color: #14102e; background-image: linear-gradient(135deg, rgba(var(--c-notes-rgb), 0.62), rgba(var(--c-notes-rgb), 0.20)); border: 1px solid rgba(var(--c-notes-rgb), 0.5); box-shadow: 0 16px 30px -16px rgba(var(--c-notes-rgb), 0.6); }
.hc-todos { background-color: #14102e; background-image: linear-gradient(135deg, rgba(var(--c-todos-rgb), 0.55), rgba(var(--c-todos-rgb), 0.16)); border: 1px solid rgba(var(--c-todos-rgb), 0.5); box-shadow: 0 16px 30px -16px rgba(var(--c-todos-rgb), 0.6); }
.hc-cal   { background-color: #14102e; background-image: linear-gradient(135deg, rgba(var(--c-cal-rgb), 0.55), rgba(var(--c-cal-rgb), 0.16)); border: 1px solid rgba(var(--c-cal-rgb), 0.5); box-shadow: 0 16px 30px -16px rgba(var(--c-cal-rgb), 0.6); }
.hc-ai    { background-color: #14102e; background-image: linear-gradient(135deg, rgba(var(--c-purple-rgb), 0.6), rgba(var(--c-purple-rgb), 0.20)); border: 1px solid rgba(var(--c-purple-rgb), 0.5); box-shadow: 0 16px 30px -16px rgba(var(--c-purple-rgb), 0.6); }
/* light mode: the original bright solid gradients */
html[data-theme="light"] .hc-notes { background-color: transparent; background-image: linear-gradient(135deg, var(--c-notes), var(--c-notes-dark)); border: none; box-shadow: 0 16px 30px -14px rgba(var(--c-notes-rgb), 0.8); }
html[data-theme="light"] .hc-todos { background-color: transparent; background-image: linear-gradient(135deg, var(--c-todos), var(--c-todos-dark)); border: none; box-shadow: 0 16px 30px -14px rgba(var(--c-todos-rgb), 0.8); }
html[data-theme="light"] .hc-cal   { background-color: transparent; background-image: linear-gradient(135deg, var(--c-cal), var(--c-cal-dark)); border: none; box-shadow: 0 16px 30px -14px rgba(var(--c-cal-rgb), 0.8); }
html[data-theme="light"] .hc-ai    { background-color: transparent; background-image: linear-gradient(135deg, var(--c-purple), var(--c-purple-dark)); border: none; box-shadow: 0 16px 30px -14px rgba(var(--c-purple-rgb), 0.8); }
.home-card .emoji { font-size: clamp(2.2em, 7vh, 3.8em); flex: none; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); display: flex; align-items: center; }
.home-card .emoji svg { width: clamp(34px, 7vh, 48px); height: clamp(34px, 7vh, 48px); }
.home-card h2 { font-size: clamp(1.5em, 4.6vw, 2.05em); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }
.home-card p { font-size: clamp(1em, 2.3vw, 1.18em); opacity: 0.92; margin-top: 7px; font-weight: 500; line-height: 1.35; }

/* native date/time picker indicator on light inputs */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 0.7; padding: 4px; border-radius: 4px;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; background-color: rgba(0,0,0,0.06); }

/* Collapsed add button */
.add-toggle-btn {
    width: 100%; padding: 15px; margin-bottom: 22px;
    background-color: var(--surface); color: var(--text-soft);
    border: 2px dashed var(--modal-input-border); border-radius: 12px;
    font-size: 1em; font-weight: 800; letter-spacing: 1px;
    transition: all 0.25s;
}
.add-toggle-btn.at-todos:hover {
    background-color: rgba(var(--c-todos-rgb), 0.08); border-color: var(--c-todos);
    color: var(--c-todos);
}
.add-toggle-btn.at-notes:hover {
    background-color: rgba(var(--c-notes-rgb), 0.08); border-color: var(--c-notes);
    color: var(--c-notes);
}

/* Tags */
.tag-dot {
    width: 14px; height: 14px; border-radius: 50%; flex: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.chip.tagdot {
    --tagc: #888;
    border: 1px solid color-mix(in srgb, var(--tagc) 55%, transparent);
    color: var(--tagc);
}
.tag-manage-list { margin-bottom: 6px; }
.tag-manage-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tag-manage-row input {
    flex: 1; padding: 8px 10px;
    background-color: var(--modal-input-bg); color: var(--text-color);
    border: 1px solid var(--modal-input-border); border-radius: 6px;
}
.tag-manage-row .sn-del { position: static; font-size: 1em; background: none; border: none; color: var(--text-soft); }
.tag-manage-row .sn-del:hover { color: var(--c-danger); }

/* ===================================================================================
   SECTION VIEWS
   =================================================================================== */
.section-head {
    font-size: 1.4em; font-weight: 900; color: var(--text-color);
    text-transform: uppercase; letter-spacing: 2px; margin-bottom: 18px;
    display: inline-flex; align-items: center; gap: 10px;
}
.section-head .head-ico { display: inline-flex; flex: none; }
.section-head .head-ico svg { width: 24px; height: 24px; }
.section-head.sh-notes { color: var(--c-notes); }
.section-head.sh-todos { color: var(--c-todos); }
.section-head.sh-cal   { color: var(--c-cal); }
.section-head.sh-ai    { color: var(--c-purple); }
/* Tasks header row: title on the left, pulsing overdue jump on the right */
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-head-row .section-head { margin-bottom: 0; }
.sh-actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* calendar button lives in the topbar on desktop; on phones it moves into headers */
.sect-cal-btn { display: none; }
.today-top { display: none; }
.overdue-btn {
    flex: none; cursor: pointer;
    background-color: var(--c-danger); color: #fff; border: none;
    padding: 7px 14px; border-radius: 20px;
    font-weight: 800; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 4px 14px -4px rgba(var(--c-danger-rgb), 0.7);
    animation: overduePulse 1.5s ease-in-out infinite;
}
.overdue-btn:hover { filter: brightness(1.07); }
/* "Back to today" pill — floats over the Tasks list when today scrolls off screen */
.jump-today, .jump-today.hidden { display: block !important; } /* control via opacity, not display, so it can fade */
.jump-today {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
    z-index: 70; cursor: pointer;
    /* dark, saturated green so the white TODAY reads clearly (NOT --c-cal-dark,
       which is a light mint in dark theme and washes the text out) */
    background-color: #07764e; color: #fff; border: none;
    padding: 10px 22px; border-radius: 24px;
    font-weight: 800; font-size: 0.86em; letter-spacing: 0.5px; text-transform: uppercase;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
html[data-theme="light"] .jump-today { background-color: #054d3a; }
.jump-today:not(.hidden) { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.jump-today:hover { filter: brightness(1.08); }
@keyframes overduePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 14px -5px rgba(var(--c-danger-rgb), 0.6); }
    50% { transform: scale(1.06); box-shadow: 0 7px 22px -3px rgba(var(--c-danger-rgb), 0.95); }
}

/* AI assistant chat */
.ai-msg {
    width: fit-content; max-width: 88%;
    padding: 10px 14px; margin: 5px 0;
    border-radius: 14px;
    font-size: 0.92em; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
    box-shadow: 0 3px 10px -6px rgba(0,0,0,0.4);
}
.ai-msg.mine {
    align-self: flex-end; color: #fff;
    background-color: var(--c-notes);
    border-bottom-right-radius: 4px;
}
.ai-msg.bot {
    align-self: flex-start; color: var(--text-color);
    background-color: var(--surface);
    border: 1px solid var(--modal-border-color);
    border-bottom-left-radius: 4px;
}
.ai-msg.ai-thinking { letter-spacing: 3px; opacity: 0.6; animation: ai-pulse 1.2s infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.mic-btn {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border);
    font-size: 1.1em; cursor: pointer; transition: all 0.15s;
}
.mic-btn.on {
    border-color: var(--c-danger); color: var(--c-danger);
    background-color: rgba(var(--c-danger-rgb), 0.10);
    animation: ai-pulse 1.2s infinite;
}

.search {
    width: 100%; padding: 11px 14px; margin-bottom: 16px;
    background-color: var(--surface); color: var(--text-color);
    border: 1px solid var(--modal-input-border); border-radius: 10px;
    transition: all 0.2s;
}
.search:focus { outline: none; border-color: var(--c-purple); box-shadow: 0 0 0 3px rgba(var(--c-purple-rgb), 0.12); }
/* Pinned right under the topbar so search + filter stay reachable while the list scrolls.
   --topbar-h is measured in JS (varies desktop vs phone); 64px is a safe fallback. The
   negative side margins + matching padding let the bar's background span the full width so
   scrolling content can't peek through beside or above it. */
.search-row {
    position: sticky; top: calc(var(--topbar-h, 64px) + 6px); z-index: 30;
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 7px 9px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-color) 62%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--modal-border-color) 70%, transparent);
}
.search-row .search { margin-bottom: 0; flex: 1; }
/* magnifier icon tucked inside the field */
.search-wrap { position: relative; flex: 1; display: flex; align-items: center; }
.search-wrap .search { width: 100%; padding-left: 38px; }
.search-wrap > svg { position: absolute; left: 12px; color: var(--text-soft); pointer-events: none; }
.filter-btn {
    width: 42px; height: 42px; border-radius: 10px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border); cursor: pointer;
    transition: all 0.15s;
}
.filter-btn:hover { color: var(--text-color); border-color: var(--modal-input-border); }
.filter-btn.active { border-color: var(--tagc); color: var(--tagc); }

.action-btn {
    color: #fff; border: none; padding: 10px 20px; border-radius: 8px;
    font-weight: 700; font-size: 0.9em; margin-top: 14px;
    transition: all 0.2s;
}
.action-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-notes { background-color: var(--c-notes); }
.btn-todos { background-color: var(--c-todos); }
.btn-cal { background-color: var(--c-cal); }
.btn-danger { background-color: var(--c-danger); }
.btn-neutral { background-color: #6b7080; }

/* ===================================================================================
   DAY GROUPS (single-column kanban for Tasks)
   =================================================================================== */
.day-group {
    border-radius: 14px; border: 1px solid var(--modal-border-color); margin-bottom: 24px;
    background-color: var(--surface); overflow: hidden;
    box-shadow: 0 8px 22px -16px rgba(0,0,0,0.4);
}
.dg-todos   { border-color: rgba(var(--c-todos-rgb), 0.35); }
.dg-cleanup { border-color: rgba(var(--c-purple-rgb), 0.35); }
.dg-late    { border-color: rgba(var(--c-danger-rgb), 0.4); }
.day-label {
    position: relative;
    padding: 12px 15px; font-weight: 800; font-size: 0.95em; text-align: center;
    text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-color);
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--modal-border-color);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
/* per-day "add a task on this date" button — far right, date stays centered */
.day-add-btn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; border-radius: 9px;
    background: rgba(var(--c-todos-rgb), 0.12); color: var(--c-todos-dark);
    border: 1px solid rgba(var(--c-todos-rgb), 0.35); cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.day-add-btn:hover { background: rgba(var(--c-todos-rgb), 0.22); }
.day-add-btn:active { transform: translateY(-50%) scale(0.9); }
.dg-todos   .day-label { color: var(--c-todos-dark); }
.dg-cleanup .day-label { color: var(--c-purple-dark); }
.dg-late    .day-label { color: var(--c-danger-dark); }
.day-count {
    background-color: var(--chip-soft-bg); font-size: 0.78em;
    padding: 2px 8px; border-radius: 10px; font-weight: 700; color: var(--text-soft);
}
/* TODAY badge — marks today's day-header now that labels show the real date.
   Uses the calendar accent (the app's "today" colour) as a soft tinted chip. */
.today-tag {
    display: inline-block; vertical-align: middle;
    background-color: rgba(var(--c-cal-rgb), 0.18);
    color: var(--c-cal-dark);
    border: 1px solid rgba(var(--c-cal-rgb), 0.45);
    font-size: 0.74em; font-weight: 800; letter-spacing: 1px;
    padding: 1px 7px; border-radius: 8px; text-transform: uppercase;
}
.day-pill .today-tag { font-size: 0.9em; padding: 0 6px; }
.cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; }

/* ===================================================================================
   LIST ITEMS — tight checkbox/bullet rows shared by Notes and Tasks
   =================================================================================== */
/* Modern row card: glassy diagonal tint, a rounded gradient accent PILL on the left
   (inset, not a hard edge-to-edge bar), generous radius, and a soft layered shadow that
   lifts on hover. Same on phone and desktop. */
.list-item {
    position: relative;
    display: flex; align-items: flex-start; gap: 13px;
    width: 100%; text-align: left;
    padding: 15px 16px 15px 22px; border-radius: 16px;
    background-color: var(--surface);
    border: 1px solid var(--modal-border-color);
    color: var(--text-color); cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 24px -16px rgba(0, 0, 0, 0.55);
    user-select: none; -webkit-user-select: none;
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease, border-color 0.18s, background-color 0.15s;
}
.list-item:hover { transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05), 0 18px 32px -18px rgba(0, 0, 0, 0.6); }
.list-item:active { transform: translateY(0) scale(0.992); }
/* the left accent pill — a rounded, vertical gradient stripe in the type's color */
.list-item.rem::before,
.list-item.task::before,
.list-item.meeting::before {
    content: ''; position: absolute; left: 7px; top: 14px; bottom: 14px;
    width: 4px; border-radius: 4px;
    background: linear-gradient(var(--accent-top), var(--accent-bot));
}
/* Each item wears its type's theme: Note = blue, Task = orange, a Task synced to
   Google Calendar (and meetings) = yellow, a late task = red. Glassy tint + colored
   border + the gradient accent pill so the kind reads at a glance. */
.list-item.rem {
    --accent-top: var(--c-notes); --accent-bot: var(--c-notes-dark);
    background-image: linear-gradient(150deg, rgba(var(--c-notes-rgb), 0.18), rgba(var(--c-notes-rgb), 0.04));
    border-color: rgba(var(--c-notes-rgb), 0.30);
}
.list-item.task {
    --accent-top: var(--c-todos); --accent-bot: var(--c-todos-dark);
    background-image: linear-gradient(150deg, rgba(var(--c-todos-rgb), 0.18), rgba(var(--c-todos-rgb), 0.04));
    border-color: rgba(var(--c-todos-rgb), 0.30);
}
.list-item.task.on-cal, .list-item.meeting {
    --accent-top: var(--c-yellow); --accent-bot: var(--c-yellow-dark);
    background-image: linear-gradient(150deg, rgba(var(--c-yellow-rgb), 0.20), rgba(var(--c-yellow-rgb), 0.05));
    border-color: rgba(var(--c-yellow-rgb), 0.38);
}
.list-item.rem  .li-title { color: var(--c-notes-dark); }
.list-item.task .li-title { color: var(--c-todos-dark); }
.list-item.task.on-cal .li-title, .list-item.meeting .li-title { color: var(--c-yellow-dark); }
/* empty markers: a vivid gradient RING with a genuinely HOLLOW center until checked.
   The mask-composite trick paints the gradient only in the padding ring and cuts the
   middle out entirely, so the card shows straight through (a true empty ring). */
.rem-check.rc-note:not(.on),
.rem-check.rc-task:not(.on),
.rem-check.rc-cal:not(.on) {
    border: 0; padding: 3px; background: var(--surface-2);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
}
.rem-check.rc-note:not(.on) { background: linear-gradient(145deg, var(--c-notes), var(--c-notes-dark)); }
.rem-check.rc-task:not(.on) { background: linear-gradient(145deg, var(--c-todos), var(--c-todos-dark)); }
.rem-check.rc-cal:not(.on)  { background: linear-gradient(145deg, var(--c-yellow), var(--c-yellow-dark)); }
/* hover lifts the marker with a soft colored halo + glow in its own theme color */
.rem-check.rc-note:not(.on):hover { box-shadow: 0 0 0 4px rgba(var(--c-notes-rgb), 0.16), 0 4px 10px -3px rgba(var(--c-notes-rgb), 0.4); }
.rem-check.rc-task:not(.on):hover { box-shadow: 0 0 0 4px rgba(var(--c-todos-rgb), 0.16), 0 4px 10px -3px rgba(var(--c-todos-rgb), 0.4); }
.rem-check.rc-cal:not(.on):hover  { box-shadow: 0 0 0 4px rgba(var(--c-yellow-rgb), 0.18), 0 4px 10px -3px rgba(var(--c-yellow-rgb), 0.4); }
.list-item.task.late {
    --accent-top: var(--c-danger); --accent-bot: var(--c-danger-dark);
    border-color: rgba(var(--c-danger-rgb), 0.42);
    background-image: linear-gradient(150deg, rgba(var(--c-danger-rgb), 0.18), rgba(var(--c-danger-rgb), 0.05));
}
.list-item.task.late .li-title { color: var(--c-danger-dark); }
.list-item.done { opacity: 0.55; }
.list-item.done:hover { opacity: 0.8; }
.list-item.done .li-title { text-decoration: line-through; }

.li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.li-title { font-weight: 700; font-size: 1.02em; word-break: break-word; line-height: 1.3; }
.li-sub {
    font-size: 0.86em; color: var(--text-soft); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word; white-space: pre-wrap;
}
/* auto-detected URLs in note/task descriptions and comments */
.auto-link {
    color: var(--c-notes); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
    word-break: break-all;
}
.auto-link:hover { filter: brightness(1.12); }
.li-extra { font-size: 0.7em; color: var(--modal-secondary-text); margin-top: 1px; }
.li-ttl { font-size: 0.68em; font-weight: 700; color: var(--c-yellow-dark); margin-top: 2px; }

/* Settings: completed-task retention options */
.ttl-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ttl-opt {
    flex: 1 1 auto; min-width: 70px; cursor: pointer;
    padding: 11px 12px; border-radius: 10px; font-weight: 800; font-size: 0.82em;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border); transition: all 0.15s;
}
.ttl-opt:hover { border-color: var(--c-cal); color: var(--text-color); }
.ttl-opt.on { color: #fff; background-color: var(--c-cal); border-color: var(--c-cal); box-shadow: 0 6px 16px -8px rgba(var(--c-cal-rgb), 0.7); }

/* Settings: theme + language toggles (wrap so all theme options fit, ~3 per row) */
.theme-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.theme-opt {
    flex: 1 1 28%; min-width: 88px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px; border-radius: 12px; cursor: pointer;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border);
    font-weight: 800; font-size: 0.86em; letter-spacing: 0.5px; transition: all 0.15s;
}
.theme-opt svg { width: 18px; height: 18px; }
.theme-opt:hover { color: var(--text-color); border-color: var(--c-purple); }
.theme-opt.on { color: #fff; background-color: var(--c-purple); border-color: var(--c-purple); box-shadow: 0 6px 16px -8px rgba(var(--c-purple-rgb), 0.7); }

/* Repeat dialog — frequency segments, interval, weekday picker */
.seg-row { display: flex; gap: 6px; margin-bottom: 14px; }
.seg {
    flex: 1; cursor: pointer; padding: 9px 6px; border-radius: 9px;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border);
    font-weight: 800; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.4px;
    transition: all 0.15s;
}
.seg:hover { color: var(--text-color); border-color: var(--c-cal); }
.seg.on { color: #fff; background-color: var(--c-cal); border-color: var(--c-cal); }
.rp-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.rp-label { font-size: 0.82em; font-weight: 700; color: var(--text-soft); }
/* two-class selector so the fixed width beats .form-select{width:100%} (defined later
   in the file); otherwise the number box goes full-width and pushes the unit label
   ("days"/"weeks"/"months") out past the edge of the popup */
.rp-int.form-select { width: 80px; flex: none; text-align: center; }
.rp-days { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-day {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex: none;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border); font-weight: 800; font-size: 0.82em;
    transition: all 0.15s;
}
.rp-day:hover { border-color: var(--c-cal); color: var(--text-color); }
.rp-day.on { color: #fff; background-color: var(--c-cal); border-color: var(--c-cal); }
.rp-preview { margin-top: 12px; font-weight: 700; color: var(--c-cal-dark); }
.li-tag {
    --tagc: #888; flex: none; align-self: flex-start; margin-bottom: 1px;
    font-size: 0.6em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--tagc); padding: 3px 8px; border-radius: 10px;
    background-color: color-mix(in srgb, var(--tagc) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tagc) 35%, transparent);
}
.li-flag {
    flex: none; align-self: flex-start; border: none; background: none;
    color: var(--c-danger); font-size: 0.95em; font-weight: 800;
}
.li-flag.warn { cursor: pointer; }
.li-cal-dot { flex: none; align-self: flex-start; font-size: 0.85em; opacity: 0.8; }
.li-date-chip {
    flex: none; align-self: flex-start; white-space: nowrap;
    font-size: 0.7em; font-weight: 700;
    padding: 5px 10px; border-radius: 12px; cursor: pointer;
    background-color: var(--surface-2); color: var(--text-soft);
    border: 1px solid var(--modal-border-color);
    transition: all 0.15s;
}
.li-date-chip:hover { color: var(--text-color); border-color: var(--modal-input-border); }
.li-date-chip.dated { color: var(--c-todos-dark); border-color: rgba(var(--c-todos-rgb), 0.4); background-color: rgba(var(--c-todos-rgb), 0.08); }

/* checkbox — 26px tap target. Empty = a gradient ring (set per type above); the
   transparent border is what the border-box gradient paints into. Complete = a glossy
   gradient-filled disc with a soft glow + pop. */
.rem-check {
    flex: none; width: 26px; height: 26px; margin-top: 1px; padding: 0;
    border-radius: 50%; border: 2.5px solid transparent;
    background: var(--surface-2); color: #fff; font-size: 0.92em; font-weight: 900; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.3);
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s, box-shadow 0.18s;
}
.rem-check:hover { transform: scale(1.08); }
.rem-check:active { transform: scale(0.9); }
.rem-check.on {
    border-color: transparent;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%) padding-box,
        linear-gradient(145deg, var(--c-cal), var(--c-cal-dark)) border-box;
    box-shadow: 0 4px 14px -4px rgba(var(--c-cal-rgb), 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes checkPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* completing a row flashes the WHOLE card a couple times with a green glow + pop,
   then settles into its dimmed "done" state. Applied transiently via .flash-done. */
.list-item.flash-done { animation: flashDone 0.55s ease-in-out 1; }
@keyframes flashDone {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.55); }
    50% {
        opacity: 1; transform: scale(1.02);
        box-shadow: 0 0 0 3px rgba(var(--c-cal-rgb), 0.55), 0 0 24px 3px rgba(var(--c-cal-rgb), 0.5);
    }
}

/* drag states (note + task reordering) */
.list-item.note-dragging { opacity: 0.3; }
.list-item.msg-ghost { opacity: 0.95; box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.45); }
.list-item.drop-top { box-shadow: 0 -3px 0 0 var(--c-notes); }
.list-item.drop-bottom { box-shadow: 0 3px 0 0 var(--c-notes); }
.day-group.drop-into { box-shadow: 0 0 0 2px var(--c-todos), 0 8px 22px -16px rgba(0,0,0,0.4); }

/* calendar-task time chip (fixed; not draggable) */
.li-cal-time {
    flex: none; align-self: flex-start; white-space: nowrap;
    font-size: 0.7em; font-weight: 800;
    padding: 5px 10px; border-radius: 12px;
    color: var(--c-yellow-dark); border: 1px solid rgba(var(--c-yellow-rgb), 0.45);
    background-color: rgba(var(--c-yellow-rgb), 0.12);
}
/* "On your calendar" divider between the draggable free tasks and the fixed,
   time-ordered calendar tasks within a day */
.day-cal-sep {
    margin: 4px 2px 0; padding-top: 8px;
    border-top: 1px dashed rgba(var(--c-yellow-rgb), 0.5);
    font-size: 0.64em; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--c-yellow-dark); opacity: 0.9; text-align: center;
}

/* created-age label on notes (notes track age, not a due date) */
.li-ago {
    flex: none; align-self: flex-start; white-space: nowrap;
    font-size: 0.66em; font-weight: 700; color: var(--text-soft);
}

/* ===================================================================================
   TODAY VIEW
   =================================================================================== */
.today-notes-btn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    margin: 0 0 18px; padding: 13px 16px; border-radius: 12px;
    background-color: var(--surface); color: var(--c-notes);
    border: 1px solid rgba(var(--c-notes-rgb), 0.4);
    font-weight: 800; font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.6px;
    box-shadow: 0 4px 14px -10px rgba(0, 0, 0, 0.4); transition: all 0.15s;
}
.today-notes-btn:hover { background-color: rgba(var(--c-notes-rgb), 0.06); border-color: var(--c-notes); }
.today-notes-btn .tnb-ico { display: inline-flex; align-items: center; }
.today-notes-btn .tnb-ico svg { width: 17px; height: 17px; }
.today-notes-btn .tnb-count {
    margin-left: auto; min-width: 22px; text-align: center;
    padding: 2px 9px; border-radius: 10px; font-size: 0.92em;
    color: #fff; background-color: var(--c-notes);
}
/* Today progress bar — fills as you complete today's tasks */
.today-progress { margin: 0 2px 18px; }
.tp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.tp-count { font-size: 0.82em; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-color); }
.tp-pct { font-size: 0.82em; font-weight: 800; color: var(--c-cal-dark); }
.tp-track { height: 12px; border-radius: 8px; background-color: var(--surface-2); border: 1px solid var(--modal-border-color); overflow: hidden; }
.tp-fill {
    height: 100%; border-radius: 8px; min-width: 0;
    background-image: linear-gradient(90deg, var(--c-cal), var(--c-cal-dark));
    transition: width 0.55s cubic-bezier(.2, .8, .3, 1);
}
.today-progress.full .tp-fill { background-image: linear-gradient(90deg, var(--c-cal), var(--c-yellow)); box-shadow: 0 0 14px 1px rgba(var(--c-cal-rgb), 0.5); }
.today-progress.full .tp-count, .today-progress.full .tp-pct { color: var(--c-cal-dark); }

/* completion confetti / fireworks burst */
.fx-burst { position: fixed; inset: 0; z-index: 600; pointer-events: none; overflow: hidden; }
.fx-particle {
    position: absolute; width: 10px; height: 10px; border-radius: 50%;
    transform: translate(-50%, -50%); will-change: transform, opacity;
    animation: fxPop 1s ease-out forwards;
}
@keyframes fxPop {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 70px)) scale(0.9) rotate(var(--rot)); opacity: 0; }
}

.today-section { margin-bottom: 20px; }
.today-head {
    display: flex; align-items: center; gap: 8px; margin: 0 2px 10px;
    font-weight: 800; font-size: 0.78em; text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-color);
}
.today-section .cards { padding: 0; }

/* "Completed — auto-deletes in N days" strip with one-tap undo */
.done-strip {
    display: flex; align-items: center; gap: 8px; margin-top: 10px;
    padding: 7px 12px; border-radius: 10px;
    background: rgba(var(--c-yellow-rgb), 0.10); border: 1px solid rgba(var(--c-yellow-rgb), 0.3);
    color: var(--c-yellow-dark); font-size: 0.8em; font-weight: 600;
}
.done-undo {
    margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: none; background: rgba(var(--c-yellow-rgb), 0.22); color: var(--c-yellow-dark);
    cursor: pointer; font-weight: 800; line-height: 1;
}
.done-undo:hover { background: rgba(var(--c-yellow-rgb), 0.4); }

/* manual Google Calendar button row (inside the task modal) */
.cal-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.cal-btn {
    border: 1px solid var(--c-cal); background: rgba(var(--c-cal-rgb), 0.10); color: var(--c-cal-dark);
    border-radius: 12px; padding: 10px 16px; font-size: 0.88em; font-weight: 700;
    cursor: pointer; transition: all 0.15s;
}
.cal-btn:hover { background: rgba(var(--c-cal-rgb), 0.2); }
.cal-btn:active { transform: scale(0.97); }
.cal-btn.is-disabled { opacity: 0.85; cursor: default; background: rgba(var(--c-cal-rgb), 0.10); }
.cal-edit {
    background: none; border: none; color: var(--c-cal-dark); cursor: pointer;
    font-size: 0.82em; font-weight: 700; text-decoration: underline;
}
.cal-edit:hover { color: var(--c-cal); }
.cal-remove {
    background: none; border: none; color: var(--modal-secondary-text);
    cursor: pointer; font-size: 0.8em; text-decoration: underline;
}
.cal-remove:hover { color: var(--c-danger); }
.cal-hint-row {
    margin-top: 14px; padding: 11px 14px; border-radius: 10px;
    background-color: var(--surface-2); border: 1px dashed var(--modal-border-color);
    color: var(--text-soft); font-size: 0.85em; font-weight: 600;
}

/* chips */
.chip {
    font-size: 0.66em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 4px 10px; border-radius: 10px;
    background-color: var(--surface-2); color: var(--text-soft);
    border: 1px solid var(--modal-border-color);
}
.chip.glow-time   { color: var(--c-cal-dark); border-color: rgba(var(--c-cal-rgb), 0.4); background-color: rgba(var(--c-cal-rgb), 0.08); }
.chip.due-chip.no-date { color: var(--text-soft); }
.chip.glow-notes  { color: var(--c-notes); border-color: rgba(var(--c-notes-rgb), 0.4); background-color: rgba(var(--c-notes-rgb), 0.08); }
.chip.warn-chip { color: #fff; background-color: var(--c-danger); border-color: var(--c-danger); }
.chip.repeat-chip { cursor: pointer; }
.chip.repeat-chip.on { color: var(--c-cal-dark); border-color: rgba(var(--c-cal-rgb), 0.45); background-color: rgba(var(--c-cal-rgb), 0.10); }
.chip.repeat-chip.pending { color: var(--c-yellow-dark); border-color: rgba(var(--c-yellow-rgb), 0.45); background-color: rgba(var(--c-yellow-rgb), 0.10); }
.link-btn { background: none; border: none; padding: 0; color: var(--c-purple); font-weight: 700; font-size: inherit; text-decoration: underline; cursor: pointer; }
.tip-dismiss { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.85em; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.tip-dismiss input { width: 16px; height: 16px; }

/* assistant pop-out (floating, draggable, always-on-top — desktop only) */
.ai-expand-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer; margin-bottom: 18px;
    background: var(--surface); color: var(--c-purple);
    border: 1px solid rgba(var(--c-purple-rgb), 0.4); transition: all 0.15s;
}
.ai-expand-btn:hover { background: rgba(var(--c-purple-rgb), 0.10); }
.ai-popout {
    position: fixed; top: 84px; right: 20px; z-index: 500;
    width: 370px; max-width: calc(100vw - 24px);
    height: 540px; max-height: calc(100vh - 110px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--modal-border-color);
    border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.5);
}
.ai-pop-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--surface-2); border-bottom: 1px solid var(--modal-border-color);
    cursor: grab; user-select: none; touch-action: none;
}
.ai-pop-head:active { cursor: grabbing; }
.ai-pop-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.9em; color: var(--c-purple); }
.ai-pop-title .head-ico svg { width: 18px; height: 18px; }
.ai-pop-close {
    flex: none; width: 30px; height: 30px; border-radius: 8px; border: none;
    background: none; color: var(--text-soft); font-size: 1em; cursor: pointer;
}
.ai-pop-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-color); }
.ai-popout .ai-pop-feed { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ai-popout .chat-composer { position: static; background: var(--surface); padding: 10px 12px 12px; border-top: 1px solid var(--modal-border-color); }
/* "+" quick-add floating menu — same shell as the assistant popout, but auto-height
   with three compact pick cards (New Note / New Task / Assistant). */
.quick-add-pop { width: 320px; height: auto; }
.quick-add-body { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.quick-add-body .home-card { flex: none; min-height: 0; gap: 16px; padding: 16px 20px; border-radius: 16px; }
.quick-add-body .home-card .emoji { font-size: 1.7em; }
.quick-add-body .home-card .emoji svg { width: 26px; height: 26px; }
.quick-add-body .home-card h2 { font-size: 1.15em; letter-spacing: 1px; margin: 0; }

/* ===================================================================================
   NOTES = chat with yourself (composer + day pills)
   =================================================================================== */
.chat-feed { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.day-pill {
    align-self: center; margin: 14px auto 6px;
    font-size: 0.64em; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--modal-secondary-text);
    background-color: var(--chip-soft-bg);
    padding: 4px 12px; border-radius: 10px;
}
.chat-composer {
    position: sticky; bottom: 0; z-index: 40;
    display: flex; gap: 10px; align-items: flex-end;
    padding: 12px 0 14px;
    background: linear-gradient(transparent, var(--tint-notes) 35%);
}
.composer-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.composer-fields input, .composer-fields textarea {
    width: 100%; padding: 11px 16px; border-radius: 14px;
    background-color: var(--surface); color: var(--text-color);
    border: 1px solid var(--modal-input-border);
    resize: none; font-family: inherit;
}
.composer-fields input { font-weight: 700; }
.composer-fields input:focus, .composer-fields textarea:focus {
    outline: none; border-color: var(--c-notes); box-shadow: 0 0 0 3px rgba(var(--c-notes-rgb), 0.12);
}
/* assistant input: one row by default, grows as you type (JS sets the height) */
.ai-textarea {
    display: block; min-height: 44px; max-height: 140px; line-height: 1.35;
    overflow-y: auto; resize: none; font-weight: 700;
}
.send-btn {
    width: 44px; height: 44px; border-radius: 50%; border: none; flex: none;
    background-color: var(--c-notes); color: #fff; font-size: 1.05em; cursor: pointer;
    transition: all 0.15s;
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:disabled, .send-btn:disabled:hover {
    opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4);
}

/* fading inline nudges + error shake */
.field-hint {
    font-size: 0.8em; color: var(--c-danger); font-weight: 600; padding: 0 8px;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.2s ease;
}
.field-hint.show { opacity: 1; max-height: 40px; margin-top: 4px; }
.field-error {
    border-color: var(--c-danger) !important;
    box-shadow: 0 0 0 3px rgba(var(--c-danger-rgb), 0.18) !important;
    animation: fieldShake 0.4s ease;
}
@keyframes fieldShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}
.action-btn:disabled, .action-btn:disabled:hover,
.action-btn.is-disabled, .action-btn.is-disabled:hover {
    opacity: 0.45; filter: grayscale(0.3); transform: none;
}
.action-btn:disabled { cursor: not-allowed; }
.action-btn.is-disabled { cursor: pointer; }
.note-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

/* ===================================================================================
   BULLETPOINT (open task / note modal body)
   =================================================================================== */
.bp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bp-h-left { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; flex: 1; flex-wrap: wrap; }
.bp-h-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tiny-label {
    font-size: 0.65em; color: var(--modal-secondary-text);
    text-transform: uppercase; font-weight: 700; letter-spacing: 1px;
    padding-left: 4px; margin-top: 10px;
}
.bp-title {
    font-weight: 800; font-size: 1.35em; color: var(--text-color);
    padding: 4px 4px 4px 24px; position: relative;
    white-space: pre-wrap; word-break: break-word;
}
.bp-title::before { content: '•'; position: absolute; left: 6px; color: var(--c-todos); font-weight: bold; }
.bp-content {
    font-size: 0.95em; line-height: 1.5; color: var(--text-color);
    min-height: 48px; border-radius: 8px; padding: 12px;
    margin-top: 8px;
    background-color: var(--surface-2);
    white-space: pre-wrap; word-break: break-word;
}
.bp-empty { color: var(--modal-secondary-text); font-style: italic; font-size: 0.9em; }
.bp-title:hover, .bp-content:hover { background-color: rgba(var(--c-purple-rgb), 0.06); border-radius: 8px; cursor: text; }
.editing-field {
    outline: 2px solid var(--c-purple); border-radius: 8px;
    background-color: var(--surface-2) !important;
}

/* selector popovers */
.bp-sel { position: relative; display: inline-flex; }
.sel-chip { border: none; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.sel-chip:hover { filter: brightness(0.96); }
.bp-popover {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 90;
    min-width: 180px; padding: 6px; margin: 0; list-style: none;
    background-color: var(--surface);
    border: 1px solid var(--modal-border-color); border-radius: 10px;
    box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.3);
    display: none; text-align: left;
}
.bp-popover.left { right: auto; left: 0; }
.bp-popover.show { display: block; }
.bp-popover li {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px; border-radius: 7px; cursor: pointer;
    font-size: 0.86em; font-weight: 600;
    color: var(--text-color); white-space: nowrap;
}
.bp-popover li:hover { background-color: var(--surface-2); }
.bp-popover li.on { color: var(--c-cal-dark); font-weight: 800; }
.bp-popover li.pop-manage {
    border-top: 1px solid var(--modal-border-color); margin-top: 4px;
    color: var(--modal-secondary-text);
}
.bp-popover li.bp-empty-li { color: var(--modal-secondary-text); font-style: italic; cursor: default; }
.bp-popover li.bp-empty-li:hover { background: none; }
.bp-popover li.danger-li { color: var(--c-danger); }
.bp-popover li.pop-label {
    color: var(--modal-secondary-text); font-size: 0.78em; cursor: default;
    border-bottom: 1px solid var(--modal-border-color); margin-bottom: 4px;
    border-radius: 0; white-space: normal; word-break: break-all;
}
.bp-popover li.pop-label:hover { background: none; }

/* account dot + frameless tag word */
.acc-dot {
    --accc: #4285F4;
    width: 24px; height: 24px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.72em; font-weight: 800; color: #fff;
    border: 1px solid var(--accc);
    background-color: var(--accc);
}
.acc-dot.none { --accc: #aeb2bd; color: #fff; border-style: dashed; background-color: #aeb2bd; }
.acc-dot.sel-chip { cursor: pointer; }
.acc-dot.sel-chip:hover { filter: brightness(0.95); }
.tag-word {
    background: none; border: none; padding: 3px 6px; cursor: pointer;
    font-family: inherit; font-size: 0.7em; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--modal-secondary-text); border-radius: 8px;
    transition: all 0.15s;
}
.tag-word:hover { color: var(--text-color); background-color: var(--surface-2); }

/* note bubbles (comments) */
.bp-notes { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--modal-border-color); }
.bp-notes .tiny-label { margin: 0 0 8px; padding-left: 0; }
.bubble {
    position: relative;
    background-color: var(--surface-2);
    border: 1px solid var(--modal-border-color);
    border-radius: 10px;
    padding: 10px 36px 10px 12px;
    margin-bottom: 8px;
    font-size: 0.92em; line-height: 1.5;
}
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble-menu { position: absolute; top: 4px; right: 6px; }
.bubble-menu-btn {
    background: none; border: none; color: var(--modal-secondary-text);
    font-weight: 800; font-size: 1em; cursor: pointer; padding: 2px 6px;
}
.bubble-menu-btn:hover { color: var(--text-color); }
.subnote-add { display: flex; gap: 8px; margin-top: 10px; }
.subnote-add input {
    flex: 1; padding: 9px 10px;
    background-color: var(--modal-input-bg); color: var(--text-color);
    border: 1px solid var(--modal-input-border); border-radius: 6px;
}

/* Guests & Google Meet (Meet toggle lives in the calendar setup dialog) */
.guest-list { display: flex; gap: 6px; flex-wrap: wrap; }
.guest-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.74em; font-weight: 600;
    padding: 4px 8px; border-radius: 12px;
    background-color: rgba(66, 133, 244, 0.10);
    border: 1px solid rgba(66, 133, 244, 0.45);
}
.guest-x { background: none; border: none; color: var(--text-soft); cursor: pointer; padding: 0; font-size: 0.85em; }
.guest-x:hover { color: var(--c-danger); }
.meet-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.meet-toggle {
    background: var(--surface); cursor: pointer;
    border: 1px dashed var(--modal-input-border); border-radius: 14px;
    color: var(--text-soft);
    padding: 8px 14px; font-size: 0.78em; font-weight: 700;
    transition: all 0.15s;
}
.meet-toggle.on {
    border-style: solid; border-color: var(--c-cal);
    background-color: rgba(var(--c-cal-rgb), 0.10); color: var(--c-cal-dark);
}
.meet-link { font-size: 0.78em; font-weight: 700; color: var(--c-cal-dark); text-decoration: none; }
.meet-link:hover { text-decoration: underline; }

.form-select {
    width: 100%; padding: 10px 12px;
    background-color: var(--modal-input-bg); color: var(--text-color);
    border: 1px solid var(--modal-input-border); border-radius: 8px;
}
.form-select:focus { outline: none; border-color: var(--c-cal); box-shadow: 0 0 0 3px rgba(var(--c-cal-rgb), 0.12); }
/* custom time picker in the calendar-setup dialog */
.time-pick { position: relative; }
.time-pick-btn { text-align: left; cursor: pointer; }
.time-list {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
    max-height: 230px; overflow-y: auto;
    background: var(--modal-input-bg); border: 1px solid var(--modal-input-border);
    border-radius: 10px; box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.45);
}
.time-list.hidden { display: none; }
.time-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 10px 13px; background: none; border: none;
    border-bottom: 1px solid var(--modal-border-color);
    color: var(--text-color); font-size: 0.9em; font-weight: 600; cursor: pointer;
}
.time-opt:last-child { border-bottom: none; }
.time-opt:hover { background: rgba(var(--c-cal-rgb), 0.08); }
.time-opt.sel { background: var(--c-cal); color: #fff; font-weight: 800; }
.time-opt.busy .time-lbl { color: var(--c-danger-dark); }
.time-opt.sel.busy .time-lbl { color: #fff; }
/* a little glowing red light marking a blocked slot */
.busy-led {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: #ff3b30;
    box-shadow: 0 0 6px 2px rgba(255, 59, 48, 0.85), 0 0 2px 1px rgba(255, 59, 48, 1);
    animation: ledGlow 1.4s ease-in-out infinite;
}
@keyframes ledGlow {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 4px 1px rgba(255, 59, 48, 0.55); }
    50% { opacity: 1; box-shadow: 0 0 10px 3px rgba(255, 59, 48, 0.95); }
}

/* connected-email rows (Manage emails + sync-trouble popup) */
.ends-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 0.92em; }
.contacts-list { max-height: 360px; overflow-y: auto; margin-bottom: 4px; }
.contact-id { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; }
.contact-text { display: flex; flex-direction: column; min-width: 0; }
.contact-name { font-weight: 700; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-email { font-size: 0.78em; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prim-tag {
    font-size: 0.62em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 7px; border-radius: 8px; white-space: nowrap;
    color: var(--c-cal-dark); background-color: rgba(var(--c-cal-rgb), 0.14);
}

.empty {
    padding: 34px 20px; text-align: center; font-weight: 600;
    color: var(--modal-secondary-text);
    border: 2px dashed var(--modal-input-border); border-radius: 12px;
    background-color: var(--surface);
}

/* ===================================================================================
   CALENDAR
   =================================================================================== */
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border: 1px solid rgba(var(--c-cal-rgb), 0.4); border-radius: 12px; overflow: hidden;
    background-color: var(--surface);
    box-shadow: 0 8px 22px -16px rgba(var(--c-cal-rgb), 0.6);
    grid-auto-rows: minmax(84px, auto);
}
.cal-dow {
    font-size: 0.62em; font-weight: 800; text-align: center; text-transform: uppercase;
    letter-spacing: 1px; padding: 9px 2px; color: var(--c-cal-dark);
    background-color: rgba(var(--c-cal-rgb), 0.10);
}
.cal-cell { border: 1px solid var(--modal-border-color); padding: 4px; min-width: 0; }
.cal-cell.dim { background-color: var(--surface-2); opacity: 0.6; }
.cal-cell .dnum { font-size: 0.7em; font-weight: 700; padding: 2px 5px; display: inline-block; color: var(--text-soft); }
.cal-cell.today-cell .dnum {
    color: #fff; background-color: var(--c-cal);
    border-radius: 6px;
}
/* month overview: a tappable cell that shows only the day's task count */
.cal-cell.month-cell { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: background-color 0.15s; }
.cal-cell.month-cell:hover { background-color: rgba(var(--c-cal-rgb), 0.08); }
.cal-cell.month-cell .dnum { align-self: flex-start; }
.cal-count {
    font-size: 0.62em; font-weight: 800; letter-spacing: 0.3px;
    padding: 3px 8px; border-radius: 10px; white-space: nowrap;
    color: var(--c-todos-dark); background-color: rgba(var(--c-todos-rgb), 0.14);
}
.cal-count.late { color: var(--c-danger-dark); background-color: rgba(var(--c-danger-rgb), 0.16); }
.cal-ev {
    display: block; width: 100%; text-align: left; margin-top: 3px;
    font-size: 0.6em; font-weight: 700; padding: 3px 6px; border-radius: 5px;
    border: none; border-left: 3px solid; color: var(--text-color);
    background-color: var(--surface-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: all 0.15s;
}
.cal-ev:hover { filter: brightness(0.97); }
.cal-ev.low    { border-left-color: var(--c-cal); }
.cal-ev.medium { border-left-color: var(--c-yellow); }
.cal-ev.high   { border-left-color: var(--c-danger); }
.cal-ev.done { opacity: 0.45; text-decoration: line-through; }
.cal-ev.gcal { border-left-color: #4285F4; }

/* Day grid (hour grid with draggable blocks) */
.day-grid {
    position: relative; overflow: hidden;
    border: 1px solid var(--modal-border-color); border-radius: 12px;
    background-color: var(--surface);
    user-select: none; -webkit-user-select: none;
}
.cal-grid, .agenda-day, .cal-ev { user-select: none; -webkit-user-select: none; }
.dg-indicator {
    position: absolute; left: 62px; right: 8px; z-index: 6; pointer-events: none;
    border: 2px dashed var(--c-cal); border-radius: 6px;
    background-color: rgba(var(--c-cal-rgb), 0.12);
    color: var(--c-cal-dark); font-size: 0.72em; font-weight: 800; padding: 2px 8px;
}
.dg-hour { position: absolute; left: 0; right: 0; height: 76px; border-top: 1px solid var(--modal-border-color); pointer-events: none; }
.dg-hour::after { content: ''; position: absolute; top: 50%; left: 50px; right: 0; border-top: 1px dashed rgba(0,0,0,0.05); }
.dg-hour-label { position: absolute; top: -8px; left: 8px; font-size: 0.72em; font-weight: 700; color: var(--modal-secondary-text); }
.dg-now { position: absolute; left: 0; right: 0; height: 2px; z-index: 5; pointer-events: none; background-color: var(--c-danger); }
.dg-block {
    position: absolute; left: 62px; right: 8px; z-index: 4;
    border-left: 4px solid var(--c-todos); border-radius: 8px;
    background-color: var(--surface);
    border-top: 1px solid var(--modal-border-color);
    border-right: 1px solid var(--modal-border-color);
    border-bottom: 1px solid var(--modal-border-color);
    padding: 6px 10px; font-size: 0.86em; font-weight: 600;
    overflow: hidden; box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.3);
    color: var(--text-color);
}
.dg-block.done { opacity: 0.45; text-decoration: line-through; }
.dg-block-time { color: var(--modal-secondary-text); margin-right: 5px; }

.sch-row { display: flex; gap: 10px; }
.slot-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* draggable affordances */
[data-drag] { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.drag-ghost { opacity: 0.95; box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.45) !important; }
.dragging-src { opacity: 0.3; }

/* calendar control strip */
.cal-ctrl { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.cal-arrow {
    width: 32px; height: 32px; border-radius: 8px; flex: none;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-border-color); font-weight: 800; cursor: pointer;
}
.cal-arrow:hover { border-color: var(--c-cal); color: var(--c-cal-dark); }
.cal-title {
    font-size: 0.9em; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--c-cal-dark); margin: 0 4px; white-space: nowrap;
}
.cal-scroll { position: relative; overflow-y: auto; border-radius: 12px; }
.cal-mode { display: flex; gap: 4px; }
.cal-mode button {
    flex: none; padding: 7px 10px; border-radius: 7px;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-border-color);
    font-weight: 700; font-size: 0.62em; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.2s;
}
.cal-mode button:hover { color: var(--text-color); }
.cal-mode button.sel {
    color: #fff; border-color: var(--c-cal); background-color: var(--c-cal);
}
/* Today pill — sits right of the date, only when viewing a non-today day */
.today-btn {
    flex: none; padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-left: 4px;
    background-color: rgba(var(--c-cal-rgb), 0.12);
    border: 1px solid var(--c-cal); color: var(--c-cal-dark);
    font-weight: 800; font-size: 0.62em; text-transform: uppercase; letter-spacing: 1px;
    transition: all 0.2s;
}
.today-btn:hover { background-color: var(--c-cal); color: #fff; }

/* tools row: account selector + refresh on the left, Month/Week/Day on the right */
.cal-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-tools .small-btn { padding: 6px 9px; font-size: 0.7em; }
.cal-loading { font-size: 0.72em; color: var(--text-soft); opacity: 0.75; }

/* week / day agenda */
.agenda-day {
    border: 1px solid var(--modal-border-color); border-radius: 12px;
    margin-bottom: 12px; overflow: hidden; background-color: var(--surface);
}
.agenda-day.today { border-color: var(--c-cal); box-shadow: 0 0 0 1px rgba(var(--c-cal-rgb),0.3); }
.agenda-day-head {
    padding: 9px 14px; font-weight: 800; font-size: 0.78em;
    text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-color);
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--modal-border-color);
}
.agenda-day.today .agenda-day-head { color: var(--c-cal-dark); }
.agenda-evs { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.cal-ev.big { font-size: 0.8em; padding: 8px 10px; margin-top: 0; white-space: normal; }
.agenda-empty { font-size: 0.72em; color: var(--modal-secondary-text); font-weight: 500; }
.agenda-day-num { color: var(--modal-secondary-text); font-weight: 600; margin-left: 6px; }
.agenda-day.today .agenda-day-num { color: inherit; opacity: 0.85; }

/* gcal account selector (now lives in the cal-tools row) */
.cal-acc-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
.cal-acc-btn:hover .acc-dot { filter: brightness(0.95); }
.acc-stack { display: flex; }
.acc-stack .acc-dot { margin-left: -9px; border: 2px solid var(--surface); }
.acc-stack .acc-dot:first-child { margin-left: 0; }
.acc-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcal-err { width: 100%; color: var(--c-danger); font-size: 0.9em; margin-bottom: 8px; }
.due-row { display: flex; gap: 8px; flex-wrap: wrap; }
.due-row input, .due-row select {
    flex: 1; min-width: 180px; padding: 9px 10px;
    background-color: var(--modal-input-bg); color: var(--text-color);
    border: 1px solid var(--modal-input-border); border-radius: 8px;
}
.small-btn {
    padding: 9px 14px; border-radius: 8px; border: none; color: #fff;
    background-color: #6b7080; font-weight: 700; font-size: 0.72em;
    text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s;
}
.small-btn:hover { filter: brightness(1.06); }
.small-btn.accent { background-color: var(--c-todos); }
.small-btn.accent-cal { background-color: #4285F4; }
.small-btn.icon-only {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 7px; background-color: var(--surface); color: var(--c-cal-dark);
    border: 1px solid rgba(var(--c-cal-rgb), 0.4);
}
.small-btn.icon-only:hover { background-color: rgba(var(--c-cal-rgb), 0.10); filter: none; }
.small-btn.icon-only svg { display: block; }
a.action-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* status pick (used by the New Event modal duration buttons) */
.status-pick { display: flex; gap: 8px; }
.status-pick button {
    flex: 1; padding: 9px 4px; border-radius: 8px;
    background-color: var(--surface); color: var(--text-soft);
    border: 1px solid var(--modal-input-border);
    font-weight: 700; font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.5px;
    transition: all 0.2s;
}
.status-pick button.sel, .status-pick button.s-completed.sel {
    color: #fff; border-color: var(--c-cal); background-color: var(--c-cal);
}

/* ===================================================================================
   MODALS
   =================================================================================== */
.overlay {
    position: fixed; inset: 0; z-index: 100;
    background-color: rgba(30, 32, 40, 0.4); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 14px; overflow-y: auto;
}
.modal {
    width: 100%; max-width: 620px; padding: 22px;
    background-color: var(--modal-bg); color: var(--text-color);
    border: 1px solid var(--modal-border-color); border-radius: 16px;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.4);
}
.modal--full { max-width: 780px; }
@media (max-width: 700px) {
    #modal-overlay:has(.modal--full) { padding: 0; }
    .modal--full { min-height: 100dvh; border-radius: 0; border-left: none; border-right: none; }
}
/* Editor wears the opened item's color theme (note=blue, task=orange, calendar=yellow):
   accent border, a soft color wash, and the title + bullet in the type color. */
.modal.acc-note { --accent: var(--c-notes); --accent-rgb: var(--c-notes-rgb); --accent-dark: var(--c-notes-dark); }
.modal.acc-task { --accent: var(--c-todos); --accent-rgb: var(--c-todos-rgb); --accent-dark: var(--c-todos-dark); }
.modal.acc-cal  { --accent: var(--c-yellow); --accent-rgb: var(--c-yellow-rgb); --accent-dark: var(--c-yellow-dark); }
.modal.acc-note, .modal.acc-task, .modal.acc-cal {
    border-color: rgba(var(--accent-rgb), 0.55);
    background-image: linear-gradient(rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0.07));
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 24px 60px -16px rgba(0, 0, 0, 0.5);
}
.modal.acc-note .bp-title, .modal.acc-task .bp-title, .modal.acc-cal .bp-title { color: var(--accent-dark); }
.modal.acc-note .bp-title::before, .modal.acc-task .bp-title::before, .modal.acc-cal .bp-title::before { color: var(--accent); }
.modal.acc-note .bp-content, .modal.acc-task .bp-content, .modal.acc-cal .bp-content { border: 1px solid rgba(var(--accent-rgb), 0.25); }
.modal-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.modal-top h2 { font-size: 1.3em; font-weight: 800; color: var(--text-color); flex: 1; word-break: break-word; }
.xbtn {
    width: 36px; height: 36px; flex: none; border-radius: 8px;
    background: none; border: 1px solid var(--modal-border-color); color: var(--text-soft);
    font-weight: 700; transition: all 0.2s;
}
.xbtn:hover { border-color: var(--c-danger); color: var(--c-danger); }
.date-line {
    font-size: 0.78em; font-weight: 600; letter-spacing: 0.5px;
    color: var(--modal-secondary-text); margin-bottom: 14px; line-height: 1.5;
}
.modal .content {
    background-color: var(--surface-2); border: 1px solid var(--modal-border-color);
    border-radius: 8px; padding: 14px 16px; line-height: 1.6; min-height: 56px;
    white-space: pre-wrap; word-break: break-word; margin-bottom: 16px;
}
.modal-warn {
    padding: 11px 14px; margin-bottom: 14px; border-radius: 10px;
    color: var(--c-danger-dark); font-weight: 600; font-size: 0.9em;
    border: 1px solid rgba(var(--c-danger-rgb), 0.4);
    background-color: rgba(var(--c-danger-rgb), 0.08);
}
.field-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.flabel {
    font-size: 0.68em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--modal-secondary-text); margin-bottom: 6px;
}
.modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.modal-actions .action-btn { margin-top: 0; }

/* calendar-setup: invite field + Meet toggle share one row */
.cs-invite-row { align-items: flex-end; }
.cs-meet-cell { flex: none; }
.cs-invite-row .meet-toggle { white-space: nowrap; }

/* calendar-setup: the chosen day's existing agenda + overlap warning */
.cs-agenda { margin-top: 4px; }
.cs-ev-list { display: flex; flex-direction: column; gap: 5px; max-height: 168px; overflow-y: auto; }
.cs-ev {
    font-size: 0.78em; font-weight: 600; color: var(--text-color);
    padding: 7px 11px; border-radius: 9px;
    background-color: var(--surface-2); border-left: 3px solid var(--c-yellow);
}
.cs-ev.empty { color: var(--text-soft); font-weight: 500; border-left-color: var(--modal-border-color); }
.cs-ev.clash { background-color: rgba(var(--c-danger-rgb), 0.10); border-left-color: var(--c-danger); color: var(--c-danger-dark); }
.cs-warn {
    margin-bottom: 8px; padding: 8px 12px; border-radius: 9px;
    font-size: 0.78em; font-weight: 700;
    color: var(--c-danger-dark); background-color: rgba(var(--c-danger-rgb), 0.12);
    border: 1px solid rgba(var(--c-danger-rgb), 0.3);
}

/* toast + sync dot */
.tb-toast {
    position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 400; pointer-events: none;
    background-color: #2b2d36; color: #fff;
    border-radius: 20px;
    padding: 10px 20px; font-size: 0.84em; font-weight: 600;
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
    opacity: 0; transition: opacity 0.3s, transform 0.3s;
}
.tb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.sync-dot {
    position: fixed; bottom: 14px; right: 14px; z-index: 60;
    font-size: 0.66em; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--c-cal-dark);
    background-color: var(--surface); border: 1px solid rgba(var(--c-cal-rgb), 0.4);
    padding: 5px 11px; border-radius: 10px; pointer-events: none;
    box-shadow: 0 4px 12px -6px rgba(0,0,0,0.3);
    opacity: 0; transition: opacity 0.4s;
}
.sync-dot.show { opacity: 1; }

/* ===================================================================================
   RESPONSIVE
   =================================================================================== */
@media (max-width: 560px) {
    .topbar { padding: 10px 12px; gap: 10px; }
    .brand { display: none; } /* keep room for the tabs on narrow phones */
    .topnav { gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .topnav::-webkit-scrollbar { display: none; }
    /* Phones: drop the tab NAMES — show only the icon + count so 4 tabs stay roomy
       and tappable. The name still surfaces via each button's title (long-press). */
    .navbtn { padding: 8px 13px; gap: 6px; flex: none; }
    .navbtn .nav-label { display: none; }
    .navbtn .nav-ico { width: 18px; height: 18px; }
    .navbtn .nav-count { margin-left: 2px; font-size: 0.9em; }
    /* move the calendar icon off the topbar and into the section headers / Today */
    .cal-icon-btn { display: none; }
    .sect-cal-btn { display: inline-flex; }
    .today-top { display: flex; justify-content: flex-end; margin: -2px 0 4px; }
    .cal-grid { grid-auto-rows: minmax(64px, auto); }
    .ham-menu { top: 60px; left: 10px; }
}

/* Tighter phones: the tabs are already icon + count only — just close the spacing
   so all 4 (incl. Late) stay on one row without crowding. */
@media (max-width: 420px) {
    .topnav { gap: 4px; }
    .navbtn { padding: 7px 10px; gap: 5px; }
    .navbtn .nav-ico { width: 16px; height: 16px; }
    .navbtn .nav-count { padding: 0 6px; font-size: 0.9em; }
}
/* Extra-narrow phones (≤360px): shave a touch more so 4 tabs still fit. */
@media (max-width: 360px) {
    .topnav { gap: 3px; }
    .navbtn { padding: 6px 8px; gap: 4px; }
    .navbtn .nav-ico { width: 15px; height: 15px; }
    .navbtn .nav-count { padding: 0 5px; }
}

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--modal-input-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #b0b4c0; }