/* ============================================================
   Tab Mission Control — Dashboard Styles
   Extracted directly from mockup.html — do not modify unless
   also updating the mockup. This is the approved design.
   ============================================================ */

/* ============================================================
   THEMES
   Default (this :root) + a set of [data-theme="…"] palettes.
   The *-rgb vars feed the translucent rgba() tints throughout the UI so a
   theme can recolour everything by overriding a handful of values.
   ============================================================ */
:root,
[data-theme="default"] {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
  color-scheme: dark;
  --text: #f3eee5;
  --bg: #0f1216;
  --neutral: #28303a;
  --muted: #93a0ad;
  --accent-primary: #78a8c8;
  --accent-success: #73937a;
  --accent-info: #7f92ab;
  --accent-danger: #c96e72;
  --status-active: #6ca180;
  --status-cooling: #8fb8d4;
  --status-abandoned: #c96e72;
  --status-active-rgb: 108, 161, 128;
  --status-cooling-rgb: 143, 184, 212;
  --status-abandoned-rgb: 201, 110, 114;
  --card-bg: #14191f;
  --surface-strong: #1b222a;
  --surface-strong-hover: #232c35;
  --shadow: rgba(0, 0, 0, 0.28);
  --accent-rgb: 120, 168, 200;
  --neutral-rgb: 127, 146, 171;
  --danger-rgb: 201, 110, 114;
  --success-rgb: 115, 147, 122;
  --checkbox-hover: #78a8c8;
  --bloom-moon: #8fb8d4;
  --bloom-sun: #d4b978;
  --bloom-surface: #1b222a;
  --bloom-cutout: #1b222a;
  --bloom-border: rgba(143, 184, 212, 0.28);
  --bloom-shadow: 0 7px 18px rgba(0, 0, 0, 0.28);
  --bloom-radius: 50%;
}

/* Graphite — near-black slate with a gold accent */
[data-theme="graphite"] {
  color-scheme: dark;
  --text: #f6f1e3;
  --bg: #111316;
  --neutral: #2b3035;
  --muted: #9ca3ad;
  --accent-primary: #d4af37;
  --accent-success: #64b6ac;
  --accent-info: #7aa2d6;
  --accent-danger: #d7837f;
  --status-active: #64b6ac;
  --status-cooling: #d4af37;
  --status-abandoned: #d7837f;
  --status-active-rgb: 100, 182, 172;
  --status-cooling-rgb: 212, 175, 55;
  --status-abandoned-rgb: 215, 131, 127;
  --card-bg: #1b1f24;
  --surface-strong: #232830;
  --surface-strong-hover: #2c323b;
  --shadow: rgba(0, 0, 0, 0.42);
  --accent-rgb: 212, 175, 55;
  --neutral-rgb: 156, 163, 173;
  --danger-rgb: 215, 131, 127;
  --success-rgb: 100, 182, 172;
  --checkbox-hover: #d4af37;
  --bloom-moon: #b9c0c8;
  --bloom-sun: #d4af37;
  --bloom-surface: #232830;
  --bloom-cutout: #232830;
  --bloom-border: rgba(212, 175, 55, 0.34);
  --bloom-shadow: 0 6px 0 rgba(0, 0, 0, 0.2), 0 10px 24px rgba(0, 0, 0, 0.34);
  --bloom-radius: 12px;
}

/* Solarized — Ethan Schoonover's classic dark base, deepened */
[data-theme="solarized"] {
  color-scheme: dark;
  --text: #b3c0c0;
  --bg: #00222b;
  --neutral: #0c3a45;
  --muted: #72969a;
  --accent-primary: #2f9bd8;
  --accent-success: #93a300;
  --accent-info: #2aa198;
  --accent-danger: #ff6b64;
  --status-active: #93a300;
  --status-cooling: #c79612;
  --status-abandoned: #ff6b64;
  --status-active-rgb: 147, 163, 0;
  --status-cooling-rgb: 199, 150, 18;
  --status-abandoned-rgb: 255, 107, 100;
  --card-bg: #00141b;
  --surface-strong: #022e39;
  --surface-strong-hover: #033a47;
  --shadow: rgba(0, 0, 0, 0.5);
  --accent-rgb: 47, 155, 216;
  --neutral-rgb: 91, 123, 129;
  --danger-rgb: 255, 107, 100;
  --success-rgb: 147, 163, 0;
  --checkbox-hover: #2aa198;
  --bloom-moon: #2aa198;
  --bloom-sun: #c79612;
  --bloom-surface: #022e39;
  --bloom-cutout: #022e39;
  --bloom-border: rgba(42, 161, 152, 0.38);
  --bloom-shadow: inset 0 0 0 1px rgba(42, 161, 152, 0.12), 0 8px 18px rgba(0, 0, 0, 0.28);
  --bloom-radius: 50%;
}

/* Tokyo Night — deep indigo with electric blue */
[data-theme="tokyonight"] {
  color-scheme: dark;
  --text: #c0caf5;
  --bg: #16161e;
  --neutral: #2a2e45;
  --muted: #8b91b1;
  --accent-primary: #7aa2f7;
  --accent-success: #9ece6a;
  --accent-info: #7dcfff;
  --accent-danger: #f7768e;
  --status-active: #9ece6a;
  --status-cooling: #e0af68;
  --status-abandoned: #f7768e;
  --status-active-rgb: 158, 206, 106;
  --status-cooling-rgb: 224, 175, 104;
  --status-abandoned-rgb: 247, 118, 142;
  --card-bg: #1a1b26;
  --surface-strong: #24283b;
  --surface-strong-hover: #2c3047;
  --shadow: rgba(0, 0, 0, 0.5);
  --accent-rgb: 122, 162, 247;
  --neutral-rgb: 86, 95, 137;
  --danger-rgb: 247, 118, 142;
  --success-rgb: 158, 206, 106;
  --checkbox-hover: #bb9af7;
  --bloom-moon: #7aa2f7;
  --bloom-sun: #e0af68;
  --bloom-surface: #24283b;
  --bloom-cutout: #24283b;
  --bloom-border: rgba(122, 162, 247, 0.38);
  --bloom-shadow: 0 0 18px rgba(122, 162, 247, 0.18), 0 9px 22px rgba(0, 0, 0, 0.36);
  --bloom-radius: 50%;
}

/* Catppuccin Mocha — soft pastel dark */
[data-theme="mocha"] {
  color-scheme: dark;
  --text: #cdd6f4;
  --bg: #181825;
  --neutral: #313244;
  --muted: #9399b2;
  --accent-primary: #cba6f7;
  --accent-success: #a6e3a1;
  --accent-info: #89dceb;
  --accent-danger: #f38ba8;
  --status-active: #a6e3a1;
  --status-cooling: #f9e2af;
  --status-abandoned: #f38ba8;
  --status-active-rgb: 166, 227, 161;
  --status-cooling-rgb: 249, 226, 175;
  --status-abandoned-rgb: 243, 139, 168;
  --card-bg: #1e1e2e;
  --surface-strong: #313244;
  --surface-strong-hover: #3a3c54;
  --shadow: rgba(0, 0, 0, 0.42);
  --accent-rgb: 203, 166, 247;
  --neutral-rgb: 108, 112, 134;
  --danger-rgb: 243, 139, 168;
  --success-rgb: 166, 227, 161;
  --checkbox-hover: #cba6f7;
  --bloom-moon: #cba6f7;
  --bloom-sun: #f9e2af;
  --bloom-surface: #313244;
  --bloom-cutout: #313244;
  --bloom-border: rgba(203, 166, 247, 0.32);
  --bloom-shadow: 0 8px 22px rgba(17, 17, 27, 0.38), 0 0 14px rgba(203, 166, 247, 0.12);
  --bloom-radius: 16px;
}

/* Monokai — classic vivid green / pink / orange */
[data-theme="monokai"] {
  color-scheme: dark;
  --text: #f8f8f2;
  --bg: #1e1f1c;
  --neutral: #3a3b34;
  --muted: #a59f85;
  --accent-primary: #a6e22e;
  --accent-success: #a6e22e;
  --accent-info: #66d9ef;
  --accent-danger: #ff4d88;
  --status-active: #a6e22e;
  --status-cooling: #e6db74;
  --status-abandoned: #ff4d88;
  --status-active-rgb: 166, 226, 46;
  --status-cooling-rgb: 230, 219, 116;
  --status-abandoned-rgb: 255, 77, 136;
  --card-bg: #272822;
  --surface-strong: #34352e;
  --surface-strong-hover: #3d3e36;
  --shadow: rgba(0, 0, 0, 0.42);
  --accent-rgb: 166, 226, 46;
  --neutral-rgb: 117, 113, 94;
  --danger-rgb: 255, 77, 136;
  --success-rgb: 166, 226, 46;
  --checkbox-hover: #66d9ef;
  --bloom-moon: #66d9ef;
  --bloom-sun: #e6db74;
  --bloom-surface: #34352e;
  --bloom-cutout: #34352e;
  --bloom-border: rgba(166, 226, 46, 0.28);
  --bloom-shadow: 0 5px 0 rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.3);
  --bloom-radius: 10px;
}

/* Obsidian — clean neutral near-black with an indigo accent */
[data-theme="obsidian"] {
  color-scheme: dark;
  --text: #e6e6ea;
  --bg: #0b0b0d;
  --neutral: #232329;
  --muted: #8a8a93;
  --accent-primary: #818cf8;
  --accent-success: #6ee7b7;
  --accent-info: #7dd3fc;
  --accent-danger: #fb7185;
  --status-active: #6ee7b7;
  --status-cooling: #fcd34d;
  --status-abandoned: #fb7185;
  --status-active-rgb: 110, 231, 183;
  --status-cooling-rgb: 252, 211, 77;
  --status-abandoned-rgb: 251, 113, 133;
  --card-bg: #131316;
  --surface-strong: #1c1c21;
  --surface-strong-hover: #26262d;
  --shadow: rgba(0, 0, 0, 0.55);
  --accent-rgb: 129, 140, 248;
  --neutral-rgb: 138, 138, 147;
  --danger-rgb: 251, 113, 133;
  --success-rgb: 110, 231, 183;
  --checkbox-hover: #818cf8;
  --bloom-moon: #818cf8;
  --bloom-sun: #fcd34d;
  --bloom-surface: #1c1c21;
  --bloom-cutout: #1c1c21;
  --bloom-border: rgba(129, 140, 248, 0.34);
  --bloom-shadow: 0 8px 24px rgba(0, 0, 0, 0.52);
  --bloom-radius: 9px;
}

/* Aurora Glass — deep glass over a slow, subdued field of cool light */
[data-theme="auroraglass"] {
  color-scheme: dark;
  --text: #f4f7ff;
  --bg: #060912;
  --neutral: #26344d;
  --muted: #a8b7d4;
  --accent-primary: #8bb8ff;
  --accent-success: #73e6bd;
  --accent-info: #79d8ff;
  --accent-danger: #ff91ab;
  --status-active: #73e6bd;
  --status-cooling: #ffd783;
  --status-abandoned: #ff91ab;
  --status-active-rgb: 115, 230, 189;
  --status-cooling-rgb: 255, 215, 131;
  --status-abandoned-rgb: 255, 145, 171;
  /* Opaque colours remain the contrast-test and no-blur fallbacks. */
  --card-bg: #111827;
  --surface-strong: #182136;
  --surface-strong-hover: #202c45;
  --shadow: rgba(0, 0, 0, 0.48);
  --accent-rgb: 139, 184, 255;
  --neutral-rgb: 139, 159, 194;
  --danger-rgb: 255, 145, 171;
  --success-rgb: 115, 230, 189;
  --checkbox-hover: #86dfff;
  --glass-surface: rgba(8, 14, 28, 0.36);
  --glass-surface-hover: rgba(12, 20, 39, 0.46);
  --glass-surface-strong: rgba(10, 17, 32, 0.68);
  --glass-control: rgba(14, 24, 43, 0.32);
  --glass-control-hover: rgba(20, 33, 56, 0.44);
  --glass-border: rgba(222, 235, 255, 0.16);
  --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
  --glass-blur: 26px;
  --glass-saturation: 1.08;
  --glass-radius: 14px;
  --bloom-moon: #9cc5ff;
  --bloom-sun: #ffd783;
  --bloom-surface: #172238;
  --bloom-cutout: #172238;
  --bloom-border: rgba(139, 184, 255, 0.42);
  --bloom-shadow: 0 8px 24px rgba(0, 0, 0, 0.44), 0 0 22px rgba(121, 216, 255, 0.2);
  --bloom-radius: 14px;
}

/* Smoke Glass — quiet monochrome glass without decorative reflections */
[data-theme="smokeglass"] {
  color-scheme: dark;
  --text: #f3f4f6;
  --bg: #08090b;
  --neutral: #2d3036;
  --muted: #a7abb3;
  --accent-primary: #c5c9d1;
  --accent-success: #7fceb3;
  --accent-info: #91b8d7;
  --accent-danger: #f08f99;
  --status-active: #7fceb3;
  --status-cooling: #d8bc84;
  --status-abandoned: #f08f99;
  --status-active-rgb: 127, 206, 179;
  --status-cooling-rgb: 216, 188, 132;
  --status-abandoned-rgb: 240, 143, 153;
  --card-bg: #15171b;
  --surface-strong: #1d2025;
  --surface-strong-hover: #272b31;
  --shadow: rgba(0, 0, 0, 0.58);
  --accent-rgb: 197, 201, 209;
  --neutral-rgb: 151, 155, 164;
  --danger-rgb: 240, 143, 153;
  --success-rgb: 127, 206, 179;
  --checkbox-hover: #d3c7b8;
  --glass-surface: rgba(255, 255, 255, 0.05);
  --glass-surface-hover: rgba(255, 255, 255, 0.075);
  --glass-surface-strong: rgba(17, 18, 20, 0.7);
  --glass-control: rgba(255, 255, 255, 0.06);
  --glass-control-hover: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(245, 247, 250, 0.12);
  --glass-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
  --glass-blur: 24px;
  --glass-saturation: 1;
  --glass-radius: 12px;
  --bloom-moon: #e0e3e8;
  --bloom-sun: #f0c982;
  --bloom-surface: #1d2025;
  --bloom-cutout: #1d2025;
  --bloom-border: rgba(224, 227, 232, 0.28);
  --bloom-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --bloom-radius: 14px;
}

/* Pearl Glass — soft cool-grey LIGHT glass without decorative background motion */
[data-theme="pearlglass"] {
  color-scheme: light;
  --text: #252a33;
  --bg: #d7dce2;
  --neutral: #b8c0cb;
  --muted: #535c69;
  --accent-primary: #5a4f9e;
  --accent-success: #326b52;
  --accent-info: #335f7d;
  --accent-danger: #963f52;
  --status-active: #326b52;
  --status-cooling: #7a581c;
  --status-abandoned: #963f52;
  --status-active-rgb: 50, 107, 82;
  --status-cooling-rgb: 122, 88, 28;
  --status-abandoned-rgb: 150, 63, 82;
  --card-bg: #e6e9ed;
  --surface-strong: #f0f2f4;
  --surface-strong-hover: #f6f7f8;
  --shadow: rgba(51, 58, 67, 0.17);
  --accent-rgb: 90, 79, 158;
  --neutral-rgb: 92, 102, 116;
  --danger-rgb: 150, 63, 82;
  --success-rgb: 50, 107, 82;
  --checkbox-hover: #6f5ab0;
  --glass-surface: rgba(255, 255, 255, 0.34);
  --glass-surface-hover: rgba(255, 255, 255, 0.46);
  --glass-surface-strong: rgba(248, 250, 252, 0.66);
  --glass-control: rgba(255, 255, 255, 0.42);
  --glass-control-hover: rgba(255, 255, 255, 0.56);
  --glass-border: rgba(255, 255, 255, 0.58);
  --glass-shadow: 0 14px 32px rgba(56, 65, 77, 0.12), 0 2px 6px rgba(56, 65, 77, 0.05);
  --glass-blur: 24px;
  --glass-saturation: 0.9;
  --glass-radius: 14px;
  --bloom-moon: #554a91;
  --bloom-sun: #8a5b12;
  --bloom-surface: #eef0f3;
  --bloom-cutout: #eef0f3;
  --bloom-border: rgba(90, 79, 158, 0.28);
  --bloom-shadow: 0 10px 24px rgba(51, 58, 67, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --bloom-radius: 14px;
}

/* Paper Glass — Pearl's material in the warm cream palette of Paper Soft */
[data-theme="paperglass"] {
  color-scheme: light;
  --text: #4a4034;
  --bg: #e6dfd0;
  --neutral: #d3cab6;
  --muted: #665d50;
  --accent-primary: #93401f;
  --accent-success: #4b6a3e;
  --accent-info: #465866;
  --accent-danger: #903b37;
  --status-active: #4b6a3e;
  --status-cooling: #a4762a;
  --status-abandoned: #903b37;
  --status-active-rgb: 75, 106, 62;
  --status-cooling-rgb: 164, 118, 42;
  --status-abandoned-rgb: 144, 59, 55;
  --card-bg: #eee7d9;
  --surface-strong: #f4eddf;
  --surface-strong-hover: #f8f2e7;
  --shadow: rgba(120, 100, 70, 0.16);
  --accent-rgb: 147, 64, 31;
  --neutral-rgb: 138, 127, 109;
  --danger-rgb: 144, 59, 55;
  --success-rgb: 75, 106, 62;
  --checkbox-hover: #a4762a;
  --glass-surface: rgba(255, 250, 235, 0.36);
  --glass-surface-hover: rgba(255, 251, 238, 0.5);
  --glass-surface-strong: rgba(255, 250, 238, 0.68);
  --glass-control: rgba(255, 250, 236, 0.44);
  --glass-control-hover: rgba(255, 252, 243, 0.58);
  --glass-border: rgba(255, 252, 242, 0.64);
  --glass-shadow: 0 14px 32px rgba(112, 91, 57, 0.13), 0 2px 6px rgba(112, 91, 57, 0.06);
  --glass-blur: 24px;
  --glass-saturation: 0.92;
  --glass-radius: 14px;
  --bloom-moon: #465866;
  --bloom-sun: #7a5717;
  --bloom-surface: #eee7d9;
  --bloom-cutout: #eee7d9;
  --bloom-border: rgba(102, 93, 80, 0.3);
  --bloom-shadow: 0 10px 24px rgba(112, 91, 57, 0.16);
  --bloom-radius: 14px;
}


/* ============================================================
   NEUMORPHIC (SOFT UI) LIGHT THEMES
   Two soft-UI variants of the light themes. The trick of soft UI:
   the surface is the SAME colour as the page, and depth comes only
   from a pair of shadows — a light highlight (top-left) and a darker
   shadow (bottom-right) — so elements look gently extruded. The
   component overrides below are scoped to just these two themes.
   ============================================================ */

/* Paper Soft — warm cream soft UI */
[data-theme="papersoft"] {
  color-scheme: light;
  --text: #4a4034;
  --bg: #e6dfd0;
  --neutral: #d3cab6;
  --muted: #665d50;
  --accent-primary: #93401f;
  --accent-success: #4b6a3e;
  --accent-info: #465866;
  --accent-danger: #903b37;
  --status-active: #4b6a3e;
  --status-cooling: #b98a3a;
  --status-abandoned: #903b37;
  --status-active-rgb: 75, 106, 62;
  --status-cooling-rgb: 185, 138, 58;
  --status-abandoned-rgb: 144, 59, 55;
  --card-bg: #e6dfd0;
  --surface-strong: #ebe5d8;
  --surface-strong-hover: #f0ebe0;
  --shadow: rgba(120, 100, 70, 0.14);
  --accent-rgb: 147, 64, 31;
  --neutral-rgb: 138, 127, 109;
  --danger-rgb: 144, 59, 55;
  --success-rgb: 75, 106, 62;
  --checkbox-hover: #9a6b38;
  --soft-save-hover: #9a6b38;
  --soft-close-hover: #a65a4f;
  /* Soft-UI highlight + shadow, derived from --bg */
  --neu-light: #f4eedd;
  --neu-dark: #c9c1ac;
  --bloom-moon: #465866;
  --bloom-sun: #7a5717;
  --bloom-surface: #e6dfd0;
  --bloom-cutout: #e6dfd0;
  --bloom-border: rgba(102, 93, 80, 0.3);
  --bloom-shadow: -4px -4px 8px var(--neu-light), 4px 4px 9px var(--neu-dark);
  --bloom-radius: 14px;
}

/* Latte Soft — cool pastel soft UI */
[data-theme="lattesoft"] {
  color-scheme: light;
  --text: #4c4f69;
  --bg: #e0e3ea;
  --neutral: #c6cbd6;
  --muted: #5f6277;
  --accent-primary: #7326cf;
  --accent-success: #286b1d;
  --accent-info: #176f80;
  --accent-danger: #b60b32;
  --status-active: #286b1d;
  --status-cooling: #df8e1d;
  --status-abandoned: #b60b32;
  --status-active-rgb: 40, 107, 29;
  --status-cooling-rgb: 223, 142, 29;
  --status-abandoned-rgb: 182, 11, 50;
  --card-bg: #e0e3ea;
  --surface-strong: #e6e9f0;
  --surface-strong-hover: #eceef4;
  --shadow: rgba(76, 79, 105, 0.14);
  --accent-rgb: 115, 38, 207;
  --neutral-rgb: 124, 127, 147;
  --danger-rgb: 182, 11, 50;
  --success-rgb: 40, 107, 29;
  --checkbox-hover: #7287fd;
  --soft-save-hover: #7287fd;
  --soft-close-hover: #c45d7a;
  --neu-light: #f1f3fb;
  --neu-dark: #c6cad6;
  --bloom-moon: #7326cf;
  --bloom-sun: #965700;
  --bloom-surface: #e0e3ea;
  --bloom-cutout: #e0e3ea;
  --bloom-border: rgba(95, 98, 119, 0.3);
  --bloom-shadow: -4px -4px 8px var(--neu-light), 4px 4px 9px var(--neu-dark);
  --bloom-radius: 14px;
}

/* Kill the dark-oriented decorations on the soft themes */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) body::before { display: none; }
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .mission-card::after { box-shadow: none; }
/* Soft UI needs a perfectly flat canvas — drop the page's radial colour glows
   (the accent one at top-left was the coloured blur breaking the look). */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) body { background: var(--bg); }

/* Raised soft surfaces: same colour as the page, no border, dual shadow */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .dialog, .context-menu, .workspace-drawer,
  .speed-tile, .selection-bar, .toast, .group-control, .tab-cleanup-banner,
  .tab-groups-bar
) {
  background: var(--bg);
  border-color: transparent;
  box-shadow: -5px -5px 11px var(--neu-light), 5px 5px 13px var(--neu-dark);
}

/* Open-tabs cards + folders keep the exact regular-theme geometry so switching
   palettes never reflows the dashboard. Soft UI changes only paint and depth. */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .mission-card::before { display: none; }
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(.mission-card, .folder) {
  background: var(--bg);
  border-color: transparent;
  border-radius: 14px;
  box-shadow: -4px -4px 9px var(--neu-light), 4px 4px 10px var(--neu-dark);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(.mission-card, .folder):hover {
  background: var(--bg);
  border-color: transparent;
  transform: none;
  box-shadow: -3px -3px 8px var(--neu-light), 3px 3px 9px var(--neu-dark);
}

/* Raised soft controls (buttons + the pill) */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .corner-btn, .action-btn, .new-folder-btn, .folders-collapse-all,
  .header-homepage-btn, .dialog-btn, .workspace-edge-save, .workspace-mini-btn,
  .tab-cleanup-btn, .group-control-btn, .speed-tile-add,
  .selection-btn:not(.ghost), .onboarding-btn,
  .focus-sweep-icon-btn,
  .archive-launch
) {
  background: var(--bg);
  border-color: transparent;
  box-shadow: -3px -3px 6px var(--neu-light), 3px 3px 6px var(--neu-dark);
}

/* Hover lifts a touch (softer, closer shadow); press pushes in */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .corner-btn, .action-btn, .new-folder-btn, .folders-collapse-all,
  .header-homepage-btn, .dialog-btn, .workspace-edge-save, .workspace-mini-btn,
  .tab-cleanup-btn, .group-control-btn, .speed-tile,
  .selection-btn:not(.ghost), .onboarding-btn,
  .focus-sweep-icon-btn,
  .archive-launch
):hover {
  background: var(--bg);
  box-shadow: -2px -2px 5px var(--neu-light), 2px 2px 5px var(--neu-dark);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .corner-btn, .action-btn, .new-folder-btn, .folders-collapse-all,
  .header-homepage-btn, .dialog-btn, .workspace-mini-btn, .group-control-btn,
  .selection-btn:not(.ghost), .onboarding-btn, .focus-sweep-icon-btn,
  .archive-launch
):active {
  box-shadow: inset 2px 2px 5px var(--neu-dark), inset -2px -2px 5px var(--neu-light);
}

/* Archive stays a quiet secondary action in soft themes: tactile surface,
   neutral readable copy, and a subtly inset count instead of an accent badge. */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .archive-launch {
  color: var(--archive-label);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .archive-launch:hover {
  color: var(--text);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .archive-count {
  color: var(--archive-label);
  background: var(--bg);
  box-shadow: inset 1px 1px 2px var(--neu-dark), inset -1px -1px 2px var(--neu-light);
}

/* Filled/active controls keep the accent fill in soft themes. */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .onboarding-btn.primary {
  background: var(--accent-primary);
  color: var(--bg);
  box-shadow: -3px -3px 6px var(--neu-light), 3px 3px 6px var(--neu-dark);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .onboarding-btn.primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent-primary) 88%, var(--text));
}

/* Inputs look pressed-in */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .global-search, .archive-search, .new-folder-input, .folder-rename-input, .dialog-input
) {
  background: var(--bg);
  border-color: transparent;
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .global-search, .archive-search, .new-folder-input, .folder-rename-input, .dialog-input
):focus {
  box-shadow: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light),
              0 0 0 2px rgba(var(--accent-rgb), 0.28);
}

/* Custom checkbox: pressed-in when empty, filled accent when checked */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .deferred-checkbox {
  border-color: transparent;
  background: var(--bg);
  box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .deferred-checkbox:checked {
  background: var(--accent-success);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.18);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .deferred-checkbox:hover:not(:checked) {
  background: color-mix(in srgb, var(--bg) 90%, var(--checkbox-hover));
  box-shadow: inset 2px 2px 4px var(--neu-dark), inset -2px -2px 4px var(--neu-light),
              0 0 0 2px color-mix(in srgb, var(--checkbox-hover) 34%, transparent);
}

/* Soft-theme tab actions use flat thematic hover colours instead of
   inheriting the regular-theme green/red tints or looking pressed-in. */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .chip-save:hover {
  color: var(--soft-save-hover);
  background: transparent;
  box-shadow: none;
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .page-chip.clickable:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent-primary) 11%, transparent),
    transparent 76%
  );
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .page-chip.clickable:has(.chip-action:hover) {
  background: transparent;
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .chip-close:hover, .deferred-dismiss:hover
) {
  opacity: 1;
  color: var(--soft-close-hover);
  background: transparent;
  box-shadow: none;
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .chip-save:focus-visible {
  outline-color: var(--soft-save-hover);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(
  .chip-close, .deferred-dismiss
):focus-visible {
  outline-color: var(--soft-close-hover);
}

/* The drawer's top-glow gradient would fight the soft look — plain surface */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .workspace-drawer {
  background: var(--bg);
}

/* Onboarding + Focus Sweep modals: opaque soft-UI panels (no blur/border) */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) :is(.onboarding-card, .focus-sweep-panel) {
  background: var(--bg);
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: -6px -6px 14px var(--neu-light), 6px 6px 16px var(--neu-dark);
}
/* Keep a faint accent ring on the Focus Sweep spotlight so it still stands out */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .focus-sweep-panel {
  box-shadow: -6px -6px 14px var(--neu-light), 6px 6px 16px var(--neu-dark),
              0 0 0 1px rgba(var(--accent-rgb), 0.14);
}

/* ============================================================
   GLASSMORPHIC THEMES
   Aurora, Smoke, Pearl and Paper Glass share one material system.
   Blur belongs to top-level surfaces only; dense nested rows and controls use
   translucent paint without stacking additional backdrop-filter layers.
   ============================================================ */

html[data-theme$="glass"] body {
  background: var(--bg);
}

html[data-theme="auroraglass"] body {
  background:
    radial-gradient(circle at 50% -12%, rgba(86, 128, 223, 0.06), transparent 42%),
    linear-gradient(155deg, #060912 0%, #080b15 48%, #060810 100%);
}

/* A single composited layer supplies the moving colour behind every pane. */
html[data-theme="auroraglass"] body::after {
  content: '';
  position: fixed;
  z-index: 0;
  inset: -28%;
  pointer-events: none;
  opacity: 0.58;
  background:
    radial-gradient(circle at 22% 30%, rgba(70, 190, 224, 0.22), transparent 28%),
    radial-gradient(circle at 76% 24%, rgba(115, 91, 214, 0.2), transparent 30%),
    radial-gradient(circle at 58% 78%, rgba(58, 151, 170, 0.14), transparent 31%);
  filter: blur(96px) saturate(1.03);
  transform: translate3d(-2%, -1%, 0) scale(1.02);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: aurora-glass-drift 36s ease-in-out infinite alternate;
}

@keyframes aurora-glass-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(-0.6deg); }
  48%  { transform: translate3d(2%, 1%, 0) scale(1.07) rotate(0.7deg); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.04) rotate(-0.3deg); }
}

html[data-theme="smokeglass"] body {
  background:
    radial-gradient(ellipse 78% 42% at 50% -14%, rgba(255, 255, 255, 0.045), transparent 72%),
    linear-gradient(160deg, #090a0c 0%, #0c0d0f 52%, #08090b 100%);
}

html[data-theme="pearlglass"] body {
  background: linear-gradient(145deg, #d9dde2 0%, #d1d6dc 100%);
}

html[data-theme="paperglass"] body {
  background: linear-gradient(145deg, #e9e2d3 0%, #dfd5c1 100%);
}

:is(html[data-theme="pearlglass"], html[data-theme="paperglass"]) body::before { display: none; }
:is(html[data-theme="auroraglass"], html[data-theme="smokeglass"]) body::before { opacity: 0.18; }

/* Primary panes: cards, search and fixed dashboard surfaces. */
html[data-theme$="glass"] :is(
  .mission-card, .folder, .speed-tile, .global-search,
  .selection-bar, .tab-cleanup-banner, .tab-groups-bar
) {
  background: var(--glass-surface);
  border-color: var(--glass-border);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
}

/* Text-heavy floating panes use a denser material than dashboard cards. */
html[data-theme$="glass"] :is(
  .dialog, .context-menu, .workspace-drawer, .archive-drawer,
  .toast, .onboarding-card, .focus-sweep-panel
) {
  background: var(--glass-surface-strong);
  border-color: var(--glass-border);
  border-radius: calc(var(--glass-radius) + 2px);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-shadow);
}

/* Controls participate in the same material language without nested blur. */
html[data-theme$="glass"] :is(
  .corner-btn:not(.theme-mode-toggle), .action-btn, .new-folder-btn,
  .folders-collapse-all, .header-homepage-btn, .dialog-btn,
  .workspace-edge-save, .workspace-mini-btn, .tab-cleanup-btn,
  .group-control-btn, .speed-tile-add, .selection-btn:not(.ghost),
  .onboarding-btn, .focus-sweep-icon-btn, .archive-launch
) {
  color: var(--text);
  background: var(--glass-control);
  border-color: var(--glass-border);
  border-radius: 9px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow) 58%, transparent);
}

html[data-theme$="glass"] :is(
  .corner-btn:not(.theme-mode-toggle), .action-btn, .new-folder-btn,
  .folders-collapse-all, .header-homepage-btn, .dialog-btn,
  .workspace-edge-save, .workspace-mini-btn, .tab-cleanup-btn,
  .group-control-btn, .speed-tile, .speed-tile-add,
  .selection-btn:not(.ghost), .onboarding-btn,
  .focus-sweep-icon-btn,
  .archive-launch
):hover {
  color: var(--text);
  background: var(--glass-control-hover);
  border-color: color-mix(in srgb, var(--accent-primary) 30%, var(--glass-border));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow) 62%, transparent);
}

html[data-theme$="glass"] :is(
  .corner-btn:not(.theme-mode-toggle), .action-btn, .new-folder-btn,
  .folders-collapse-all, .header-homepage-btn, .dialog-btn,
  .workspace-mini-btn, .tab-cleanup-btn, .group-control-btn,
  .selection-btn:not(.ghost), .onboarding-btn,
  .focus-sweep-icon-btn,
  .archive-launch
):active {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 52%, transparent);
}

/* Semantic controls retain their meaning inside the glass system. */
html[data-theme$="glass"] :is(
  .action-btn.close-tabs, .dialog-btn.danger, .workspace-mini-btn.danger,
  .workspace-delete-btn, .selection-btn.danger
) {
  color: var(--accent-danger);
  background: rgba(var(--danger-rgb), 0.1);
  border-color: rgba(var(--danger-rgb), 0.34);
}

html[data-theme$="glass"] :is(.onboarding-btn.primary) {
  color: var(--bg);
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

html[data-theme$="glass"] :is(
  .action-btn.close-tabs, .dialog-btn.danger, .workspace-mini-btn.danger,
  .workspace-delete-btn, .selection-btn.danger
):hover {
  color: var(--accent-danger);
  background: rgba(var(--danger-rgb), 0.16);
  border-color: rgba(var(--danger-rgb), 0.52);
}

html[data-theme$="glass"] :is(.onboarding-btn.primary):hover:not(:disabled) {
  color: var(--bg);
  background: color-mix(in srgb, var(--accent-primary) 88%, var(--text));
  border-color: color-mix(in srgb, var(--accent-primary) 88%, var(--text));
}

/* Inputs use the same translucent material without an inset metal edge. */
html[data-theme$="glass"] :is(
  .global-search, .archive-search, .new-folder-input,
  .folder-rename-input, .dialog-input
) {
  color: var(--text);
  background: var(--glass-control);
  border-color: var(--glass-border);
  box-shadow: none;
}

html[data-theme$="glass"] :is(
  .global-search, .archive-search, .new-folder-input,
  .folder-rename-input, .dialog-input
):focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

/* Preserve lightweight hierarchy inside panes instead of making every row a pane. */
html[data-theme$="glass"] :is(
  .page-chip, .deferred-item, .archive-item, .workspace-item
) {
  background: transparent;
  border-color: color-mix(in srgb, var(--glass-border) 62%, transparent);
}

html[data-theme$="glass"] :is(
  .page-chip.clickable, .deferred-item, .archive-item
):hover {
  background: rgba(var(--accent-rgb), 0.08);
}

/* Status remains a quiet material cue; it never becomes a reflective edge. */
html[data-theme$="glass"] .mission-card {
  --glass-card-accent-rgb: var(--neutral-rgb);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

html[data-theme$="glass"] .mission-card.has-primary-bar {
  --glass-card-accent-rgb: var(--accent-rgb);
}

html[data-theme$="glass"] .mission-card.has-active-bar {
  --glass-card-accent-rgb: var(--status-active-rgb);
}

html[data-theme$="glass"] .mission-card::before {
  height: 2px;
  background: rgba(var(--glass-card-accent-rgb), 0.5);
  box-shadow: none;
}

html[data-theme$="glass"] .mission-card::after {
  box-shadow: none;
}

html[data-theme$="glass"] :is(.mission-card, .folder, .speed-tile):hover {
  background: var(--glass-surface-hover);
  border-color: color-mix(in srgb, var(--accent-primary) 24%, var(--glass-border));
  transform: none;
}

html[data-theme$="glass"] .folder {
  border-left-width: 1px;
  border-left-color: var(--glass-border);
}

/* Keyboard focus must remain visible over variable translucent backgrounds.
   Text inputs already own the same single focus ring as the regular themes. */
html[data-theme$="glass"] :is(button, a):focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="auroraglass"] body::after {
    animation: none;
    transform: none;
    opacity: 0.58;
    will-change: auto;
  }
}

/* Progressive accessibility preference: unsupported browsers safely ignore it. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-theme$="glass"] :is(
    .mission-card, .folder, .speed-tile, .global-search,
    .selection-bar, .tab-cleanup-banner, .tab-groups-bar
  ) {
    background: var(--card-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html[data-theme$="glass"] :is(
    .dialog, .context-menu, .workspace-drawer, .archive-drawer,
    .toast, .onboarding-card, .focus-sweep-panel
  ) {
    background: var(--surface-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html[data-theme$="glass"] :is(
    .mission-card, .folder, .speed-tile, .global-search,
    .selection-bar, .tab-cleanup-banner, .tab-groups-bar
  ) {
    background: var(--card-bg);
  }

  html[data-theme$="glass"] :is(
    .dialog, .context-menu, .workspace-drawer, .archive-drawer,
    .toast, .onboarding-card, .focus-sweep-panel
  ) {
    background: var(--surface-strong);
  }
}

@media (forced-colors: active) {
  html[data-theme="auroraglass"] body::after { display: none; }

  html[data-theme$="glass"] :is(
    .mission-card, .folder, .speed-tile, .global-search,
    .selection-bar, .tab-cleanup-banner, .tab-groups-bar,
    .dialog, .context-menu, .workspace-drawer, .archive-drawer,
    .toast, .onboarding-card, .focus-sweep-panel
  ) {
    color: CanvasText !important;
    background: Canvas !important;
    border-color: CanvasText !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

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

/* ---- Scrollbars — thin, rounded, theme-tinted (everywhere) ----
   Use ONLY the WebKit pseudo-elements (full control, incl. hiding the arrow
   buttons). The standard scrollbar-width/scrollbar-color are intentionally
   NOT set: in current Chrome they switch to the system scrollbar and make it
   ignore these rules (so the up/down arrows would come back). */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:double-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:vertical,
::-webkit-scrollbar-button:horizontal {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-track-piece { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--neutral-rgb), 0.4);
  border: 3px solid transparent;        /* padding so the thumb looks slim */
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--neutral-rgb), 0.62);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-sans);
  background:
    radial-gradient(circle at top, rgba(var(--neutral-rgb), 0.14), transparent 34%),
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.08), transparent 30%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

html.focus-sweep-open,
body.focus-sweep-open,
html.onboarding-open,
body.onboarding-open,
html.archive-drawer-open,
body.archive-drawer-open {
  overflow: hidden;
  overscroll-behavior: none;
}

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

.container {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 32px 80px;
}

/* ---- Header ---- */
header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--neutral);
}

.header-left h1 {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 4px;
}

.header-left .date {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* ---- Tab cleanup banner ---- */
.tab-cleanup-banner {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.18));
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 8px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.tab-cleanup-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tab-cleanup-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tab-cleanup-icon svg {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
}

.tab-cleanup-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}

.tab-cleanup-text strong {
  font-weight: 600;
}

.tab-cleanup-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  background: var(--surface-strong);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.tab-cleanup-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  background: var(--surface-strong-hover);
  opacity: 1;
  transform: translateY(-1px);
}

/* ---- Section Headers ---- */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  margin-top: 8px;
}

.section-header h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  font-style: italic;
  color: var(--muted);
  white-space: nowrap;
}

.section-line {
  flex: 1;
  height: 1px;
  background: var(--neutral);
}

.section-count {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.section-mini-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-primary);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.26);
  border-radius: 7px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.section-mini-btn:hover {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.42);
}

/* ---- Mission Cards ---- */
.missions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 40px;
}

.mission-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.004)),
    var(--card-bg);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  border-radius: 8px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

/* Colored top border instead of side bar for grid cards */
.mission-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--neutral);
}

.mission-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.014);
  pointer-events: none;
}

.mission-card.has-active-bar::before { background: var(--status-active); }
.mission-card.has-primary-bar::before { background: var(--accent-primary); }
.mission-card.has-neutral-bar::before { background: var(--neutral); }

.mission-card.has-active-bar {
  border-color: rgba(var(--status-active-rgb), 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 10px 26px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(var(--status-active-rgb), 0.05),
    0 0 18px rgba(var(--status-active-rgb), 0.06);
}

.mission-card.has-primary-bar {
  border-color: rgba(var(--accent-rgb), 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 10px 26px rgba(0, 0, 0, 0.21),
    0 0 0 1px rgba(var(--accent-rgb), 0.06),
    0 0 18px rgba(var(--accent-rgb), 0.06);
}

.mission-card:hover {
  border-color: rgba(var(--accent-rgb), 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(var(--accent-rgb), 0.04);
  transform: translateY(-1px);
}

/* Closing animation — card scales down and fades out */
.mission-card.closing {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.mission-card.collapsed {
  display: none !important;
}

/* Old side status bar — hidden, replaced by top border via ::before */
.status-bar {
  display: none;
}

.mission-content {
  min-width: 0;
}

/* Hide the right-side meta (page count) — info is already in the badge */
.mission-meta {
  display: none;
}

.mission-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.mission-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.2px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.04);
}

/* Tab indicator badge — shows how many Chrome tabs are still open for this mission */
.open-tabs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--accent-primary);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  padding: 2px 8px;
  border-radius: 3px;
}

.open-tabs-badge svg {
  width: 10px;
  height: 10px;
}

.mission-pages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Tab row — each tab is a full-width row with favicon, title, and actions ---- */
.page-chip {
  font-size: 13px;
  color: var(--text);
  background: transparent;
  padding: 8px 4px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(var(--neutral-rgb), 0.1);
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.page-chip:last-child,
.page-chip-overflow {
  border-bottom: none;
}

/* Favicon */
.chip-favicon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
}

/* Title text — wraps naturally, no truncation */
.chip-text {
  flex: 1;
  min-width: 0;
  /* Show up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Duplicate badge — clickable: closes this tab's duplicates, keeps one */
.chip-dupe-badge {
  color: var(--accent-primary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.12);
  border: none;
  border-radius: 5px;
  padding: 1px 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.chip-dupe-badge:hover {
  background: rgba(var(--danger-rgb), 0.18);
  color: var(--accent-danger);
}

/* Duplicate border highlight */
.chip-has-dupes {
  border-color: rgba(var(--accent-rgb), 0.25);
}

/* Action buttons grouped on the right */
.chip-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ---- Chip action buttons (save + close) ---- */
.chip-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.62;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.chip-action svg {
  width: 15px;
  height: 15px;
}

.chip-action:hover {
  opacity: 1;
  background: transparent;
}

.chip-action:focus-visible,
.deferred-dismiss:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.chip-save:hover {
  color: var(--accent-success);
  background: transparent;
}

.chip-close:hover {
  color: var(--status-abandoned);
  background: transparent;
}

.page-chip.clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.page-chip.clickable:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 72%);
}

.page-chip.clickable:has(.chip-action:hover) {
  background: transparent;
}

/* "+N more" overflow chip */
.page-chip-overflow {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 4px;
}

/* mission-meta hidden — see above */

.mission-page-count {
  font-size: 20px;
  font-family: var(--font-serif);
  font-weight: 300;
  color: var(--text);
  line-height: 1;
}

.mission-page-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---- Actions row ---- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.action-btn {
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 4px;
  border: 1px solid var(--neutral);
  background: var(--card-bg);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.action-btn:hover {
  border-color: var(--text);
  color: var(--text);
}

.action-btn svg {
  width: 12px;
  height: 12px;
}

.action-btn.sweep-action {
  border-color: rgba(var(--accent-rgb), 0.24);
  color: var(--accent-primary);
  background: rgba(var(--accent-rgb), 0.05);
  font-weight: 600;
}

.action-btn.sweep-action:hover {
  border-color: rgba(var(--accent-rgb), 0.42);
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.1);
}

.action-btn.close-tabs {
  border-color: rgba(var(--danger-rgb), 0.4);
  color: var(--accent-danger);
  background: rgba(var(--danger-rgb), 0.08);
}

.action-btn.close-tabs:hover {
  background: rgba(var(--danger-rgb), 0.14);
  border-color: var(--accent-danger);
}

.action-btn.dedup-tabs {
  background: transparent;
}

/* ---- Toast notification ---- */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface-strong);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  z-index: 480;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto; /* so the Undo button is clickable */
}

.toast svg {
  width: 16px;
  height: 16px;
  color: var(--status-active);
}

/* ---- Footer ---- */
footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--neutral);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-stats {
  display: flex;
  gap: 32px;
}

.stat {
  text-align: center;
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  transition: all 0.3s;
}

.stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  margin-top: 4px;
}

.last-refresh {
  font-size: 11px;
  color: var(--muted);
}

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

header { animation: fadeUp 0.5s ease both; }
.tab-cleanup-banner { animation: fadeUp 0.5s ease 0.1s both; }
.active-section .section-header { animation: fadeUp 0.5s ease 0.2s both; }
.abandoned-section .section-header { animation: fadeUp 0.5s ease 0.45s both; }
/* No per-card entry animation: the open-tabs grid is re-rendered on tab
   changes, and replaying fadeUp each time made the column flicker. */
footer { animation: fadeUp 0.5s ease 0.65s both; }

.deferred-list .deferred-item:nth-child(1) { animation-delay: 0.05s; }
.deferred-list .deferred-item:nth-child(2) { animation-delay: 0.1s; }
.deferred-list .deferred-item:nth-child(3) { animation-delay: 0.15s; }
.deferred-list .deferred-item:nth-child(4) { animation-delay: 0.2s; }
.deferred-list .deferred-item:nth-child(5) { animation-delay: 0.25s; }
.deferred-column .section-header { animation: fadeUp 0.5s ease 0.1s both; }


/* ================================================================
   MISSIONS EMPTY STATE
   Shown when all mission cards have been closed.
   A calm, satisfying "you did it" moment.
   ================================================================ */

.missions-empty-state {
  /* Takes the full grid width — span all columns */
  grid-column: 1 / -1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 56px 24px;
  text-align: center;

  animation: fadeUp 0.5s ease both;
}

/* CSS-drawn checkmark in a glowing circle */
.empty-checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--success-rgb), 0.1);
  border: 1.5px solid rgba(var(--success-rgb), 0.3);

  /* Soft sage glow */
  box-shadow: 0 0 0 8px rgba(var(--success-rgb), 0.05),
              0 0 0 16px rgba(var(--success-rgb), 0.03);

  display: flex;
  align-items: center;
  justify-content: center;

  /* Pop in with a gentle scale animation */
  animation: checkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}

.empty-checkmark svg {
  width: 26px;
  height: 26px;
  color: var(--accent-success);
  stroke-width: 2.5;
}

@keyframes checkPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.empty-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  color: var(--text);
  letter-spacing: -0.3px;
}

.empty-subtitle {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.3px;
}


/* ================================================================
   SAVED FOR LATER — Checklist Column + Archive
   ================================================================ */

/* ---- Responsive dashboard grid ---- */
.dashboard-columns {
  display: grid;
  --dashboard-sticky-offset: 32px;
  --dashboard-gap: clamp(18px, 2.4vw, 32px);
  --side-column-width: clamp(280px, 26vw, 330px);
  --side-rail-width: clamp(292px, 31vw, 360px);
  gap: var(--dashboard-gap);
  align-items: flex-start;
  grid-template-columns: minmax(360px, 1fr);
  grid-template-areas: "open";
}

.dashboard-columns.has-side-rail.has-deferred.has-folders {
  grid-template-columns: minmax(360px, 1fr) var(--side-column-width) var(--side-column-width);
  grid-template-areas: "open saved folders";
}

.dashboard-columns.has-side-rail.has-deferred:not(.has-folders) {
  grid-template-columns: minmax(360px, 1fr) var(--side-column-width);
  grid-template-areas: "open saved";
}

.dashboard-columns.has-side-rail.has-folders:not(.has-deferred) {
  grid-template-columns: minmax(360px, 1fr) var(--side-column-width);
  grid-template-areas: "open folders";
}

.dashboard-side-rail {
  display: contents;
}

/* Column shells own layout and sticky positioning; their headers stay outside
   the inner scroll viewport so only the content moves. */
.dashboard-columns .active-section,
.deferred-column,
.folders-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: sticky;
  top: var(--dashboard-sticky-offset);
  max-height: calc(100vh - 64px);
  overflow: visible;
  container: dashboard-column / inline-size;
}

.dashboard-columns .active-section {
  grid-area: open;
}

.deferred-column {
  grid-area: saved;
  width: 100%;
}

.dashboard-columns :is(.active-section, .deferred-column, .folders-column) > .section-header,
.folders-column > .new-folder-input-row {
  flex: 0 0 auto;
}

/* The scrollport extends eight pixels beyond the card layout on both sides.
   Its equal padding keeps card widths unchanged while giving diagonal Soft UI
   shadows room to paint before overflow clipping occurs. */
.column-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: calc(100% + 16px);
  margin: -8px -8px 0;
  padding: 8px 8px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

.column-scroll:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.48);
  outline-offset: -3px;
  border-radius: 10px;
}

/* Breathing room on the right so the scrollbar doesn't hug the content */
.dashboard-columns .active-section,
.deferred-column,
.folders-column {
  padding-right: 10px;
}

@container dashboard-column (max-width: 320px) {
  .section-header {
    gap: 7px;
  }

  .section-header h2 {
    font-size: 18px;
  }

  .section-count {
    font-size: 11px;
  }

  .page-chip,
  .deferred-item,
  .folder-header {
    gap: 7px;
  }

  .new-folder-btn {
    padding: 0 8px;
  }
}

@media (max-width: 1239px) and (min-width: 960px) {
  .dashboard-columns.has-side-rail.has-deferred.has-folders,
  .dashboard-columns.has-side-rail.has-deferred:not(.has-folders),
  .dashboard-columns.has-side-rail.has-folders:not(.has-deferred) {
    grid-template-columns: minmax(0, 1fr) var(--side-rail-width);
    grid-template-areas: "open side";
  }

  .dashboard-side-rail {
    grid-area: side;
    display: flex;
    flex-direction: column;
    gap: var(--dashboard-gap);
    min-width: 0;
    position: sticky;
    top: var(--dashboard-sticky-offset);
    max-height: calc(100vh - 64px);
    overflow: visible;
  }

  .dashboard-side-rail .deferred-column,
  .dashboard-side-rail .folders-column {
    width: 100%;
    min-width: 0;
    position: static;
    max-height: calc(100vh - 64px);
    overflow: visible;
  }

  .dashboard-columns.has-deferred.has-folders .dashboard-side-rail .deferred-column,
  .dashboard-columns.has-deferred.has-folders .dashboard-side-rail .folders-column {
    max-height: calc((100vh - 64px - var(--dashboard-gap)) / 2);
  }
}

@media (max-width: 959px) {
  .dashboard-side-rail {
    display: contents;
  }

  .dashboard-columns .active-section,
  .deferred-column,
  .folders-column {
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .column-scroll {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

@media (max-width: 959px) and (min-width: 720px) {
  .dashboard-columns.has-side-rail.has-deferred.has-folders {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "open open"
      "saved folders";
  }

  .dashboard-columns:not(.has-side-rail) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "open";
  }

  .dashboard-columns.has-side-rail.has-deferred:not(.has-folders) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "open"
      "saved";
  }

  .dashboard-columns.has-side-rail.has-folders:not(.has-deferred) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "open"
      "folders";
  }

}

@media (max-width: 800px) {
  header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
}

@media (max-width: 719px) {
  .dashboard-columns.has-side-rail.has-deferred.has-folders {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "open"
      "saved"
      "folders";
  }

  .dashboard-columns:not(.has-side-rail) {
    grid-template-areas: "open";
  }

  .dashboard-columns.has-side-rail.has-deferred:not(.has-folders) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "open"
      "saved";
  }

  .dashboard-columns.has-side-rail.has-folders:not(.has-deferred) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "open"
      "folders";
  }

}

/* ---- Checklist items ---- */
.deferred-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px 10px 12px;
  border-bottom: 1px solid rgba(var(--neutral-rgb), 0.12);
  border-radius: 6px;
  margin: 0 -8px;
  /* No entry animation here: it would replay on every re-render and make
     the list flicker when tabs move between the inbox and folders. */
}

.deferred-item:last-child {
  border-bottom: none;
}

/* Custom checkbox */
.deferred-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--neutral);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s;
  position: relative;
}

.deferred-checkbox:hover:not(:checked) {
  border-color: var(--checkbox-hover);
  background: color-mix(in srgb, var(--checkbox-hover) 10%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--checkbox-hover) 16%, transparent);
}

.deferred-checkbox:focus-visible {
  outline: 2px solid var(--checkbox-hover);
  outline-offset: 2px;
}

.deferred-checkbox:checked {
  background: var(--accent-success);
  border-color: var(--accent-success);
}

/* Checkmark inside the checkbox */
.deferred-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (forced-colors: active) {
  .deferred-checkbox {
    background: Canvas;
    border: 2px solid ButtonText;
    box-shadow: none;
  }

  .deferred-checkbox:hover:not(:checked),
  .deferred-checkbox:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .deferred-checkbox:checked {
    background: Highlight;
    border-color: Highlight;
  }
}

/* Item content (title, domain, time) */
.deferred-info {
  flex: 1;
  min-width: 0;
}

.deferred-title {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}

.deferred-title:hover {
  color: var(--accent-primary);
}

.deferred-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  gap: 8px;
}

/* Checked-off item — strikethrough + faded */
.deferred-item.checked .deferred-title {
  text-decoration: line-through;
  color: var(--muted);
}

.deferred-item.checked .deferred-meta {
  opacity: 0.5;
}

/* Dismiss (X) button */
.deferred-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.62;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
  margin-top: -1px;
}

.deferred-dismiss svg {
  width: 15px;
  height: 15px;
}

.deferred-dismiss:hover {
  opacity: 1;
  color: var(--status-abandoned);
}

/* Slide-out animation for items being removed */
.deferred-item.removing {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ---- Empty state ---- */
.deferred-empty {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 24px 0;
  text-align: center;
}

/* ---- Archive drawer trigger ---- */
.archive-launch {
  --archive-label: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--archive-label);
  background: rgba(var(--neutral-rgb), 0.07);
  border: 1px solid rgba(var(--neutral-rgb), 0.18);
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 13px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.archive-launch:hover {
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.11);
  border-color: rgba(var(--neutral-rgb), 0.3);
}

.archive-launch svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.78;
}

.archive-count {
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--archive-label);
  background: rgba(var(--neutral-rgb), 0.11);
  text-align: center;
  line-height: 1.25;
}

/* ---- Archive drawer ---- */
.archive-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: flex;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.archive-drawer {
  width: min(460px, 100vw);
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 3vw, 32px);
  color: var(--text);
  background: var(--bg);
  border-left: 1px solid rgba(var(--neutral-rgb), 0.22);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.24);
  animation: archiveDrawerIn 0.22s ease-out both;
}

@keyframes archiveDrawerIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.archive-drawer-header,
.archive-drawer-header-actions,
.archive-drawer-tools {
  display: flex;
  align-items: center;
}

.archive-drawer-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.archive-drawer-header-actions {
  gap: 10px;
}

.archive-drawer-eyebrow {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.archive-drawer h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 400;
  line-height: 1;
}

.archive-drawer-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.archive-icon-btn,
.archive-item-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.15s;
}

.archive-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.archive-icon-btn:hover {
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.14);
}

.archive-icon-btn svg,
.archive-item-action svg {
  width: 17px;
  height: 17px;
}

.archive-drawer-tools {
  gap: 12px;
  margin-bottom: 16px;
}

.archive-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.archive-search-wrap > svg {
  position: absolute;
  top: 50%;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.archive-search {
  font-family: var(--font-sans);
  font-size: 12px;
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--neutral);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.archive-search::placeholder {
  color: var(--muted);
}

.archive-clear {
  flex: 0 0 auto;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.archive-clear:hover,
.archive-remove:hover {
  color: var(--danger, #c33);
}

.archive-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.archive-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(var(--neutral-rgb), 0.08);
}

.archive-item:last-child {
  border-bottom: none;
}

.archive-item-title {
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  transition: color 0.15s;
}

.archive-item-title:hover {
  color: var(--text);
}

.archive-item-date {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.archive-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.archive-item-action {
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.archive-item-action:hover {
  background: rgba(var(--neutral-rgb), 0.12);
  transform: translateY(-1px);
}

.archive-restore:hover {
  color: var(--accent-success);
}

.archive-empty {
  padding: 36px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.archive-launch:focus-visible,
.archive-icon-btn:focus-visible,
.archive-item-action:focus-visible,
.archive-clear:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .archive-drawer {
    padding: 18px;
    border-left: 0;
  }

  .archive-drawer-tools {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .archive-clear {
    align-self: flex-end;
  }
}


/* ================================================================
   FOLDERS COLUMN
   ================================================================ */

/* Widen the canvas when side columns are present so 3 columns fit.
   Width is tuned so the open-tabs column stays a single-card-wide ribbon
   (same feel as before) rather than a multi-column grid. */
.container.dashboard-wide {
  max-width: 1280px;
}

/* In the 3-column layout, keep the open-tabs cards as a vertical ribbon
   (one per row) instead of letting the grid pack two across. */
.container.dashboard-wide .missions {
  grid-template-columns: 1fr;
}

/* Saved tabs are draggable into folders */
.deferred-item {
  cursor: grab;
}
.deferred-item.dragging {
  opacity: 0.4;
}

/* Third column — mirrors the saved-for-later column */
.folders-column {
  grid-area: folders;
  width: 100%;
}
.folders-column .section-header { animation: fadeUp 0.5s ease 0.14s both; }

.tab-groups-column {
  position: fixed;
  width: 260px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 90;
  padding-right: 0;
}

/* "+ New folder" button in the column header */
.new-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-primary);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.new-folder-btn svg { width: 13px; height: 13px; }
.new-folder-btn:hover {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent-primary);
}

/* Inline name inputs (new folder + rename) */
.new-folder-input-row { margin: 2px 0 10px; }
.new-folder-input,
.folder-rename-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
}
.new-folder-input::placeholder { color: var(--muted); }
.new-folder-input:focus,
.folder-rename-input:focus { border-color: var(--accent-primary); }
.folder-rename-input {
  font-weight: 600;
  padding: 3px 6px;
  flex: 1;
  min-width: 0;
}

/* A folder card */
.folder {
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  border-radius: 8px;
  margin-bottom: 10px;
  background: var(--card-bg);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
  user-select: none;
}

.folder-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.folder-chevron svg { width: 12px; height: 12px; }
.folder-chevron.open { transform: rotate(90deg); }

.folder-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-count {
  font-size: 11px;
  color: var(--muted);
  background: rgba(var(--neutral-rgb), 0.12);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.folder-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.55;
  flex-shrink: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.folder-menu-btn svg { width: 15px; height: 15px; }
.folder-header:hover .folder-menu-btn { opacity: 1; }
.folder-menu-btn:hover {
  background: rgba(var(--neutral-rgb), 0.14);
  color: var(--text);
}

.folder-body { padding: 0 10px 4px; }
.folder-empty-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 6px 2px 8px;
}

/* Folders empty state */
.folders-empty {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  padding: 8px 2px;
}

/* Drop-zone highlights while dragging */
.deferred-column.drop-target {
  outline: 2px dashed var(--accent-primary);
  outline-offset: 4px;
  border-radius: 10px;
}
.folder.drop-target {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.06);
}


/* ================================================================
   CONTEXT MENU
   ================================================================ */

.context-menu {
  position: fixed;
  z-index: 490;
  min-width: 190px;
  max-width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  font-family: var(--font-sans);
}
.context-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s;
}
.context-menu-item:hover { background: rgba(var(--accent-rgb), 0.14); }
.context-menu-item.danger { color: var(--accent-danger); }
.context-menu-item.danger:hover { background: rgba(var(--danger-rgb), 0.16); }
.context-menu-heading {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  padding: 6px 10px 3px;
}
.context-menu-sep {
  height: 1px;
  background: rgba(var(--neutral-rgb), 0.16);
  margin: 4px 6px;
}


/* ================================================================
   DIALOG (folder delete confirmation)
   ================================================================ */

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.dialog {
  width: 92%;
  max-width: 400px;
  background: var(--card-bg);
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.dialog-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--text);
  margin-bottom: 8px;
}
.dialog-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 18px;
}
.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.dialog-field { margin-bottom: 14px; }
.dialog-field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.dialog-input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.3);
  border-radius: 8px;
  padding: 9px 11px;
  outline: none;
}
.first-folder-dialog .dialog-actions { margin-top: 16px; }
.dialog-input::placeholder { color: var(--muted); }
.dialog-input:focus { border-color: rgba(var(--accent-rgb), 0.6); }
.dialog-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dialog-btn:hover { background: var(--surface-strong-hover); }
.dialog-btn.danger {
  color: var(--accent-danger);
  border-color: rgba(var(--danger-rgb), 0.4);
  background: rgba(var(--danger-rgb), 0.1);
}
.dialog-btn.danger:hover { background: rgba(var(--danger-rgb), 0.18); }


/* ================================================================
   FOLDERS v2 — colors, search, drag affordances, undo, animation
   ================================================================ */

/* Per-folder accent: a coloured left bar + a small dot by the name */
.folder {
  border-left: 3px solid var(--folder-accent, transparent);
}
.folder-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--folder-accent, var(--muted));
  box-shadow: 0 0 6px var(--folder-accent, transparent);
}

/* Drag affordances */
.folder-header { cursor: pointer; }
.page-chip.dragging,
.folder.dragging { opacity: 0.45; }

/* Folder reorder grip */
.folder-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  cursor: grab;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.folder-drag-handle svg { width: 14px; height: 14px; }
.folder-header:hover .folder-drag-handle { opacity: 0.85; }
.folder-drag-handle:active { cursor: grabbing; }

/* Collapse / expand-all button in the Folders header */
.folders-collapse-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--muted);
  background: none;
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.folders-collapse-all svg { width: 14px; height: 14px; }
.folders-collapse-all:hover {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--neutral-rgb), 0.1);
}


/* Undo affordance inside the toast */
.toast-undo {
  margin-left: 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.toast-undo:hover { text-decoration: underline; }

/* Brief highlight when a tab lands in its new place */
@keyframes itemFlash {
  0%   { background: rgba(var(--accent-rgb), 0.28); }
  100% { background: transparent; }
}
.deferred-item.just-moved {
  animation: itemFlash 1s ease;
  border-radius: 6px;
}

/* Colour-picker swatches inside the folder context menu */
.context-menu-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 10px 8px;
}
.context-menu-swatches .swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.context-menu-swatches .swatch:hover { transform: scale(1.15); }
.context-menu-swatches .swatch.active { border-color: var(--text); }
.context-menu-swatches .swatch-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.3);
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
.context-menu-swatches .swatch-none.active { border-color: var(--text); color: var(--text); }


/* Workspace snapshots top drawer */
.workspace-drawer-shell {
  position: fixed;
  top: 0;
  z-index: 110;
  pointer-events: none;
  --workspace-inline-right: max(18px, calc((100vw - min(100vw, 1280px)) / 2 + 32px));
}

.workspace-edge-save {
  position: fixed;
  right: var(--workspace-inline-right);
  top: 0;
  width: 138px;
  height: 38px;
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--surface-strong);
  color: var(--muted);
  writing-mode: horizontal-tb;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.workspace-edge-save:hover,
body.workspace-drawer-open .workspace-edge-save {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.34);
  background: var(--surface-strong-hover);
}

.workspace-drawer {
  position: fixed;
  right: var(--workspace-inline-right);
  top: 38px;
  width: min(360px, calc(100vw - var(--workspace-inline-right) - 18px));
  max-height: min(360px, calc(100vh - 56px));
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 8px;
  padding: 12px;
  /* Style "Top glow": the recessed card surface with a soft accent glow fanning
     from the top centre — gives the panel identity without a flat monotone fill.
     Glow, surface and border all use theme variables, so it recolours for every
     theme automatically. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%),
    var(--card-bg);
  border: 1px solid rgba(var(--neutral-rgb), 0.18);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

@media (max-width: 1180px) and (min-width: 701px) {
  .workspace-drawer-shell {
    --workspace-inline-right: min(248px, calc(100vw - 150px));
  }
}

.workspace-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.workspace-eyebrow {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.workspace-mini-btn {
  background: rgba(var(--neutral-rgb), 0.06);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  color: var(--text);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  padding: 7px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.workspace-plus-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.workspace-mini-btn:hover {
  background: rgba(var(--accent-rgb), 0.11);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.workspace-list {
  display: grid;
  gap: 6px;
  margin-top: 0;
  min-width: 0;
}

.workspace-empty {
  color: var(--muted);
  font-size: 11px;
  padding: 6px 2px 2px;
}

.workspace-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workspace-item + .workspace-item {
  border-top: 1px solid rgba(var(--neutral-rgb), 0.1);
  padding-top: 9px;
}

.workspace-item-main {
  min-width: 0;
  width: 100%;
}

.workspace-item-title {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.workspace-item-meta {
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace-item-actions {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  flex-shrink: 0;
}

.workspace-item-actions .workspace-mini-btn {
  height: 28px;
  font-size: 10.5px;
  font-weight: 700;
}

.workspace-icon-btn,
.workspace-delete-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  color: var(--muted);
  border-color: rgba(var(--neutral-rgb), 0.22);
}

.workspace-icon-btn svg,
.workspace-delete-btn svg {
  width: 15px;
  height: 15px;
  display: block;
}

.workspace-mini-btn.danger {
  color: var(--muted);
  border-color: rgba(var(--neutral-rgb), 0.22);
}

.workspace-delete-btn:hover {
  color: var(--accent-danger);
  border-color: rgba(var(--danger-rgb), 0.42);
  background: rgba(var(--danger-rgb), 0.09);
}

@media (max-width: 700px) {
  .workspace-drawer-shell {
    --workspace-inline-right: min(224px, calc(100vw - 124px));
  }

  .workspace-edge-save {
    width: 112px;
  }

  .workspace-drawer {
    right: 16px;
    top: 38px;
    width: min(360px, calc(100vw - 32px));
    bottom: auto;
  }

  .workspace-item-actions {
    flex-wrap: nowrap;
  }

  .workspace-plus-btn,
  .workspace-icon-btn,
  .workspace-delete-btn {
    width: 28px;
  }

  .tab-groups-column {
    width: auto;
    max-width: none;
    max-height: 38vh;
  }
}


/* ================================================================
   OPEN-TABS FILTER / PRIVACY MODE
   ================================================================ */

/* Unified search row above all columns */
.global-search-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}
.global-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--muted);
  pointer-events: none;
}
.global-search {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-radius: 10px;
  padding: 13px 16px 13px 44px;
  outline: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.global-search::placeholder { color: var(--muted); }
.global-search:focus,
.archive-search:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

@media (max-width: 520px) {
  .global-search-row {
    gap: 8px;
  }

  .archive-launch {
    padding-inline: 10px;
  }
}

@media (forced-colors: active) {
  .archive-launch {
    color: ButtonText;
    background: ButtonFace;
    border: 1px solid ButtonBorder;
    box-shadow: none;
  }

  .archive-launch:focus-visible {
    outline-color: Highlight;
  }
}

/* Top-right controls: one discoverable Customize entry + instant Privacy. */
.corner-btn {
  position: fixed;
  top: 50px;
  z-index: 95;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(var(--neutral-rgb), 0.66);
  background: rgba(var(--neutral-rgb), 0.055);
  border: 1px solid rgba(var(--neutral-rgb), 0.11);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.52;
  box-shadow: none;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.corner-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.corner-btn:hover,
.corner-btn:focus-visible {
  opacity: 0.92;
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.38);
  background: rgba(var(--neutral-rgb), 0.12);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}
.corner-btn:focus-visible {
  outline: none;
}
.privacy-toggle   { right: 18px; }
.customize-toggle {
  right: 62px;
  width: auto;
  padding: 0 13px;
  gap: 7px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  opacity: 0.82;
}

/* Bloom theme toggle. Its geometry stays familiar while every theme supplies
   its own surface, celestial colours, border, depth, and corner language. */
.theme-mode-toggle {
  top: 46px;
  right: 182px;
  width: 44px;
  height: 44px;
  color: var(--bloom-moon);
  background: var(--bloom-surface);
  border-color: var(--bloom-border);
  border-radius: var(--bloom-radius);
  opacity: 0.88;
  box-shadow: var(--bloom-shadow);
  transition:
    opacity 160ms ease,
    color 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease,
    box-shadow 180ms ease,
    transform 160ms ease;
}

.corner-btn.theme-mode-toggle:hover {
  color: var(--bloom-moon);
  background: var(--bloom-surface);
  border-color: var(--bloom-border);
  opacity: 1;
  box-shadow: var(--bloom-shadow), 0 0 0 3px rgba(var(--accent-rgb), 0.1);
  transform: translateY(-1px);
}

.corner-btn.theme-mode-toggle:active {
  transform: scale(0.95);
}

.theme-mode-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  box-shadow: var(--bloom-shadow);
}

.theme-bloom {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  transform: rotate(0deg);
  transition: transform 440ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.theme-bloom-disc {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px color-mix(in srgb, currentColor 34%, transparent);
  transition: inset 400ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 280ms ease, box-shadow 280ms ease;
}

.theme-bloom-cutout {
  position: absolute;
  top: 1px;
  left: 10px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bloom-cutout);
  opacity: 1;
  transition: transform 440ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease, background-color 280ms ease;
}

.theme-bloom-ray {
  position: absolute;
  top: 0;
  left: 13px;
  display: block;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
  scale: 0.2;
  transform-origin: 1px 14px;
  transition: opacity 200ms ease, scale 360ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 280ms ease;
}
.theme-bloom-ray:nth-child(3)  { transform: rotate(0deg); }
.theme-bloom-ray:nth-child(4)  { transform: rotate(45deg); }
.theme-bloom-ray:nth-child(5)  { transform: rotate(90deg); }
.theme-bloom-ray:nth-child(6)  { transform: rotate(135deg); }
.theme-bloom-ray:nth-child(7)  { transform: rotate(180deg); }
.theme-bloom-ray:nth-child(8)  { transform: rotate(225deg); }
.theme-bloom-ray:nth-child(9)  { transform: rotate(270deg); }
.theme-bloom-ray:nth-child(10) { transform: rotate(315deg); }

html[data-theme-mode="light"] .theme-mode-toggle {
  color: var(--bloom-sun);
}
html[data-theme-mode="light"] .theme-mode-toggle:hover {
  color: var(--bloom-sun);
}
html[data-theme-mode="light"] .theme-bloom {
  transform: rotate(90deg);
}
html[data-theme-mode="light"] .theme-bloom-disc {
  inset: 6px;
  box-shadow: 0 0 16px color-mix(in srgb, currentColor 42%, transparent);
}
html[data-theme-mode="light"] .theme-bloom-cutout {
  transform: translate(17px, -14px) scale(0.45);
  opacity: 0;
}
html[data-theme-mode="light"] .theme-bloom-ray {
  opacity: 1;
  scale: 1;
  transition-delay: 100ms;
}

/* Soft variants use the same Bloom morph, but the control is made from the
   page material: raised at rest, closer on hover, and inset while pressed. */
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .theme-mode-toggle {
  color: var(--bloom-moon);
  background: var(--bg);
  border: 1px solid var(--bloom-border);
  box-shadow: var(--bloom-shadow);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"])[data-theme-mode="light"] .theme-mode-toggle {
  color: var(--bloom-sun);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .theme-mode-toggle:hover {
  background: var(--bg);
  box-shadow: -3px -3px 6px var(--neu-light), 3px 3px 7px var(--neu-dark);
}
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .theme-mode-toggle:active {
  box-shadow: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);
}

@media (prefers-reduced-motion: reduce) {
  .theme-mode-toggle,
  .theme-bloom,
  .theme-bloom-disc,
  .theme-bloom-cutout,
  .theme-bloom-ray {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

@media (forced-colors: active) {
  .theme-mode-toggle,
  :is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .theme-mode-toggle {
    color: ButtonText;
    background: ButtonFace;
    border: 1px solid ButtonBorder;
    box-shadow: none;
    forced-color-adjust: none;
  }
  .theme-mode-toggle:focus-visible { outline-color: Highlight; }
  .theme-bloom-disc,
  .theme-bloom-ray { background: ButtonText; box-shadow: none; }
  .theme-bloom-cutout { background: ButtonFace; }
}

/* Theme menu swatch (uses the context-menu engine) */
.context-menu-theme-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Restore privacy mode before first paint (set by theme-init.js on <html>),
   so a new tab never flashes the dashboard. The opaque clock screen covers
   everything; !important overrides the element's inline display:none. */
html[data-privacy="on"] .privacy-screen { display: flex !important; }

/* Full-screen clock that hides the dashboard during screen sharing */
.privacy-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background:
    radial-gradient(circle at top, rgba(var(--accent-rgb), 0.10), transparent 42%),
    var(--bg);
  cursor: pointer;
}
.privacy-clock {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(64px, 14vw, 160px);
  letter-spacing: -2px;
  color: var(--text);
  line-height: 1;
}
.privacy-date {
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.privacy-hint {
  margin-top: 18px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.6;
}

/* ================================================================
   ONBOARDING TOUR
   ================================================================ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 470;
  display: block;
  color: var(--text);
  background: transparent;
}

.onboarding-highlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border: 1px solid rgba(var(--accent-rgb), 0.78);
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.54),
    0 0 0 4px rgba(var(--accent-rgb), 0.12),
    0 0 24px rgba(var(--accent-rgb), 0.34);
  pointer-events: none;
  transition: top 0.22s, left 0.22s, width 0.22s, height 0.22s, opacity 0.16s;
}

.onboarding-card {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--card-bg) 90%, transparent);
  border: 1px solid rgba(var(--neutral-rgb), 0.26);
  border-radius: 8px;
  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(var(--accent-rgb), 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  backdrop-filter: blur(16px) saturate(1.12);
}

.onboarding-step-label {
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.onboarding-title {
  margin: 7px 0 8px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.onboarding-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.48;
}

.onboarding-gesture-demo {
  display: none;
  margin-top: 13px;
  padding: 10px;
  overflow: hidden;
  background: rgba(var(--neutral-rgb), 0.07);
  border: 1px solid rgba(var(--neutral-rgb), 0.17);
  border-radius: 8px;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-gesture-demo,
.onboarding-overlay[data-demo="dragSelection"] .onboarding-gesture-demo {
  display: block;
}

.onboarding-demo-drag-instruction {
  display: none;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-key,
.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-select-instruction {
  display: none;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-drag-instruction {
  display: inline;
}

.onboarding-demo-instruction {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.onboarding-demo-key {
  min-width: 34px;
  padding: 3px 6px;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid rgba(var(--neutral-rgb), 0.28);
  border-bottom-width: 3px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1;
  text-align: center;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-key {
  animation: onboarding-demo-key-press 5.2s ease-in-out infinite;
}

.onboarding-demo-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: stretch;
  gap: 8px;
}

.onboarding-demo-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-stage {
  grid-template-columns: minmax(0, 1fr);
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-list {
  animation: onboarding-demo-list-move 5.4s ease-in-out infinite;
}

.onboarding-demo-link {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 4px 8px;
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.045);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 650;
}

.onboarding-demo-favicon {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: rgba(var(--neutral-rgb), 0.28);
  border-radius: 3px;
}

.onboarding-demo-link-one {
  animation: none;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-link-one {
  animation: onboarding-demo-select-one 5.2s ease-in-out infinite;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-link-two {
  animation: onboarding-demo-select-two 5.2s ease-in-out infinite;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-link-three {
  animation: onboarding-demo-select-three 5.2s ease-in-out infinite;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-link {
  background: rgba(var(--accent-rgb), 0.23);
}

.onboarding-demo-folder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 5px;
  color: var(--muted);
  background: rgba(var(--neutral-rgb), 0.045);
  border: 1px dashed rgba(var(--neutral-rgb), 0.25);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 750;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-folder {
  display: none;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-folder {
  animation: onboarding-demo-folder-drop 5.4s ease-in-out infinite;
}

.onboarding-demo-folder svg {
  width: 25px;
  height: 25px;
  fill: rgba(var(--accent-rgb), 0.16);
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.onboarding-demo-folder-count {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: var(--bg);
  background: var(--accent-primary);
  border-radius: 50%;
  font-size: 9px;
  opacity: 0;
  transform: scale(0.65);
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-folder-count {
  animation: onboarding-demo-folder-count 5.4s ease-in-out infinite;
}

.onboarding-demo-cursor {
  position: absolute;
  top: 1px;
  left: 17px;
  width: 18px;
  height: 21px;
  z-index: 1;
  color: var(--text);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-cursor {
  animation: onboarding-demo-cursor-select 5.2s ease-in-out infinite;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-cursor {
  width: 22px;
  height: 22px;
  animation: onboarding-demo-cursor-drag 5.4s ease-in-out infinite;
}

.onboarding-demo-cursor svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--card-bg);
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.onboarding-demo-grab-icon {
  display: none !important;
  fill: var(--card-bg) !important;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-pointer-icon {
  display: none;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-grab-icon {
  display: block !important;
}

.onboarding-demo-drag-ring {
  position: absolute;
  top: 2px;
  left: 1px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(var(--accent-rgb), 0.75);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.45);
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-drag-ring {
  animation: onboarding-demo-click-ring 5.2s ease-out infinite;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-drag-ring {
  animation: onboarding-demo-grab-ring 5.4s ease-out infinite;
}

.onboarding-demo-drag-stack {
  position: absolute;
  top: -5px;
  left: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 21px;
  height: 17px;
  color: var(--bg);
  background: var(--accent-primary);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 75%, var(--text));
  border-radius: 4px;
  box-shadow: -3px 3px 0 rgba(var(--accent-rgb), 0.42), -6px 6px 0 rgba(var(--accent-rgb), 0.2);
  font-size: 9px;
  font-weight: 900;
  opacity: 0;
  transform: translate(-2px, 2px) scale(0.7);
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-drag-stack {
  animation: onboarding-demo-drag-stack 5.4s ease-in-out infinite;
}

.onboarding-demo-result {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 19px;
  margin-top: 7px;
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(3px);
}

.onboarding-overlay[data-demo="multiSelect"] .onboarding-demo-select-result {
  display: flex;
  animation: onboarding-demo-select-result-in 5.2s ease-in-out infinite;
}

.onboarding-overlay[data-demo="dragSelection"] .onboarding-demo-move-result {
  display: flex;
  animation: onboarding-demo-move-result-in 5.4s ease-in-out infinite;
}

.onboarding-demo-result span {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--bg);
  background: var(--accent-primary);
  border-radius: 50%;
  font-size: 9px;
}

@keyframes onboarding-demo-key-press {
  0%, 6%, 76%, 100% {
    color: var(--text);
    background: var(--card-bg);
    border-bottom-width: 3px;
    transform: translateY(0);
  }
  10%, 68% {
    color: var(--bg);
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    border-bottom-width: 1px;
    transform: translateY(2px);
  }
}

@keyframes onboarding-demo-cursor-select {
  0%, 6% { top: 1px; left: 17px; opacity: 0; }
  11%, 22% { top: 1px; left: 17px; opacity: 1; }
  29%, 40% { top: 29px; left: 17px; opacity: 1; }
  47%, 69% { top: 57px; left: 17px; opacity: 1; }
  77%, 100% { top: 57px; left: 17px; opacity: 0; }
}

@keyframes onboarding-demo-cursor-drag {
  0%, 7% { top: 55px; left: 20px; opacity: 0; transform: scale(1); }
  13%, 25% { top: 55px; left: 20px; opacity: 1; transform: scale(0.88); }
  31% { top: 55px; left: 34px; opacity: 1; transform: scale(0.88); }
  65%, 82% { top: 27px; left: calc(100% - 55px); opacity: 1; transform: scale(0.88); }
  88%, 100% { top: 27px; left: calc(100% - 55px); opacity: 0; transform: scale(1); }
}

@keyframes onboarding-demo-click-ring {
  0%, 11% { opacity: 0; transform: scale(0.45); }
  14% { opacity: 0.9; transform: scale(0.75); }
  20%, 29% { opacity: 0; transform: scale(1.45); }
  32% { opacity: 0.9; transform: scale(0.75); }
  38%, 47% { opacity: 0; transform: scale(1.45); }
  50% { opacity: 0.9; transform: scale(0.75); }
  57%, 100% { opacity: 0; transform: scale(1.45); }
}

@keyframes onboarding-demo-grab-ring {
  0%, 11%, 30%, 100% { opacity: 0; transform: scale(0.55); }
  16% { opacity: 0.9; transform: scale(0.9); }
  25% { opacity: 0; transform: scale(1.5); }
}

@keyframes onboarding-demo-drag-stack {
  0%, 16%, 79%, 100% { opacity: 0; transform: translate(-2px, 2px) scale(0.7); }
  23%, 72% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes onboarding-demo-list-move {
  0%, 24%, 100% { opacity: 1; transform: translateX(0); }
  53% { opacity: 0.68; transform: translateX(4px); }
  68%, 88% { opacity: 0.3; transform: translateX(7px); }
  95% { opacity: 1; transform: translateX(0); }
}

@keyframes onboarding-demo-folder-drop {
  0%, 31%, 96%, 100% {
    color: var(--muted);
    background: rgba(var(--neutral-rgb), 0.045);
    border-color: rgba(var(--neutral-rgb), 0.25);
    transform: scale(1);
  }
  42%, 65% {
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.16);
    border-color: rgba(var(--accent-rgb), 0.72);
    transform: scale(1.04);
  }
  71%, 89% {
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--accent-primary);
    transform: scale(1);
  }
}

@keyframes onboarding-demo-folder-count {
  0%, 66%, 94%, 100% { opacity: 0; transform: scale(0.65); }
  72%, 89% { opacity: 1; transform: scale(1); }
}

@keyframes onboarding-demo-select-one {
  0%, 15%, 90%, 100% { background: rgba(var(--neutral-rgb), 0.045); }
  19%, 84% { background: rgba(var(--accent-rgb), 0.23); }
}

@keyframes onboarding-demo-select-two {
  0%, 33%, 90%, 100% { background: rgba(var(--neutral-rgb), 0.045); }
  37%, 84% { background: rgba(var(--accent-rgb), 0.23); }
}

@keyframes onboarding-demo-select-three {
  0%, 51%, 90%, 100% { background: rgba(var(--neutral-rgb), 0.045); }
  55%, 84% { background: rgba(var(--accent-rgb), 0.23); }
}

@keyframes onboarding-demo-select-result-in {
  0%, 55%, 92%, 100% { opacity: 0; transform: translateY(3px); }
  62%, 86% { opacity: 1; transform: translateY(0); }
}

@keyframes onboarding-demo-move-result-in {
  0%, 72%, 95%, 100% { opacity: 0; transform: translateY(3px); }
  77%, 90% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-demo-key,
  .onboarding-demo-list,
  .onboarding-demo-link,
  .onboarding-demo-folder,
  .onboarding-demo-folder-count,
  .onboarding-demo-drag-ring,
  .onboarding-demo-drag-stack,
  .onboarding-demo-result {
    animation: none !important;
  }

  .onboarding-demo-key {
    color: var(--bg);
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    border-bottom-width: 1px;
    transform: translateY(2px);
  }

  .onboarding-demo-link {
    background: rgba(var(--accent-rgb), 0.23);
  }

  .onboarding-demo-folder {
    color: var(--accent-primary);
    background: rgba(var(--accent-rgb), 0.22);
    border-color: var(--accent-primary);
  }

  .onboarding-demo-folder-count {
    opacity: 1;
    transform: none;
  }

  .onboarding-demo-cursor {
    display: none;
  }

  .onboarding-demo-result {
    opacity: 1;
    transform: none;
  }
}

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.onboarding-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.onboarding-btn {
  height: 32px;
  padding: 0 11px;
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.08);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
}

.onboarding-btn:hover:not(:disabled),
.onboarding-btn:focus-visible {
  color: var(--text);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.42);
  outline: none;
}

.onboarding-btn.primary {
  color: var(--bg);
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}

.onboarding-btn.primary:hover:not(:disabled),
.onboarding-btn.primary:focus-visible {
  background: color-mix(in srgb, var(--accent-primary) 88%, var(--text));
  border-color: color-mix(in srgb, var(--accent-primary) 88%, var(--text));
}

.onboarding-btn.ghost {
  color: var(--muted);
  background: transparent;
}

.onboarding-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.onboarding-overlay.is-centered .onboarding-highlight {
  opacity: 0;
}

@media (max-width: 520px) {
  header { padding-top: 52px; }
  .privacy-toggle   { right: 10px; }
  .customize-toggle { right: 50px; }
  .theme-mode-toggle { right: 174px; }
  .onboarding-card {
    width: calc(100vw - 28px);
    padding: 14px;
  }

  .onboarding-actions {
    align-items: stretch;
  }

  .onboarding-nav {
    gap: 6px;
  }

  .onboarding-btn {
    padding: 0 9px;
  }
}

/* ================================================================
   NATIVE TAB GROUPS COLUMN
   ================================================================ */
.tab-groups-bar-chips {
  display: grid;
  gap: 8px;
}
.group-control {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(5, 24px);
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 6px 6px 6px 10px;
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-radius: 8px;
  overflow: hidden;
}
.group-control-edge {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.group-control-main {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 5px 4px 0;
}
.group-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-chip-count {
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  flex-shrink: 0;
}
.group-control-btn {
  color: var(--muted);
  background: rgba(var(--neutral-rgb), 0.08);
  border: 1px solid rgba(var(--neutral-rgb), 0.16);
  border-radius: 5px;
  font: inherit;
  font-weight: 700;
  font-size: 11px;
  width: 24px;
  height: 24px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.group-control-btn:hover,
.group-control:hover .group-control-main {
  color: var(--text);
}

.group-control-btn:hover {
  background: rgba(var(--accent-rgb), 0.11);
}
.group-color-btn span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}


/* ================================================================
   SPEED DIAL — editable grid of site shortcuts
   ================================================================ */
.speed-dial {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
}
.speed-dial-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.speed-tile {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 220px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-strong);
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.speed-tile:hover {
  background: var(--surface-strong-hover);
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-1px);
}
.speed-tile-fav { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.speed-tile-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speed-tile-add { color: var(--muted); border-style: dashed; }
.speed-tile-add:hover { color: var(--accent-primary); }
.speed-tile-plus { font-size: 15px; line-height: 1; }


/* ================================================================
   MULTI-SELECT — highlighted chips + floating bulk-action bar
   ================================================================ */
.page-chip.clickable { user-select: none; }

:where(.page-chip, .deferred-item).selected {
  --selection-bg: linear-gradient(90deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.09) 62%, transparent);
  background: var(--selection-bg);
  box-shadow: none;
}

.page-chip.selected {
  background: var(--selection-bg) !important;
}

:where(.page-chip, .deferred-item).selected:hover {
  --selection-bg: linear-gradient(90deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.12) 64%, transparent);
}

/* Glass row paint has deliberately high specificity; restore the existing
   saved-selection cue after that material override so batch actions remain
   visible without changing their JavaScript behavior. */
html[data-theme$="glass"] .deferred-item.selected {
  background: var(--selection-bg);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

html[data-theme$="glass"] .deferred-item.selected:hover {
  background: var(--selection-bg);
}

body.selection-brush-active,
body.selection-brush-active .page-chip.clickable,
body.selection-brush-active .deferred-item {
  cursor: crosshair;
}

body.selection-brush-active .page-chip.clickable:hover,
body.selection-brush-active .deferred-item:hover {
  outline: 1px solid rgba(var(--accent-rgb), 0.45);
  outline-offset: -1px;
}

.selection-bar {
  position: fixed;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-strong);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-family: var(--font-sans);
}
.selection-count { font-size: 13px; font-weight: 600; color: var(--text); margin-right: 4px; }
.selection-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid rgba(var(--neutral-rgb), 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.selection-btn:hover { background: var(--surface-strong-hover); border-color: rgba(var(--accent-rgb), 0.4); }
.selection-btn.danger { color: var(--accent-danger); border-color: rgba(var(--danger-rgb), 0.4); }
.selection-btn.danger:hover { background: rgba(var(--danger-rgb), 0.14); }
.selection-btn.ghost { background: none; border-color: transparent; color: var(--muted); padding: 7px 10px; }
.selection-btn.ghost:hover { color: var(--text); background: rgba(var(--neutral-rgb), 0.12); }

/* ================================================================
   FOCUS SWEEP CARD DECK
   These final rules intentionally supersede the legacy Sweep layout
   while retaining the shared theme tokens above.
   ================================================================ */
.focus-sweep-overlay {
  position: fixed;
  inset: 0;
  z-index: 460;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.04);
  backdrop-filter: blur(10px) saturate(1.04);
}

.focus-sweep-panel {
  width: min(520px, calc(100vw - 28px));
  max-width: 520px;
  padding: 17px 18px 18px;
  overflow: visible;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
  border: 1px solid rgba(var(--neutral-rgb), 0.2);
  border-radius: 17px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--shadow) 86%, transparent);
}

.focus-sweep-top {
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 0 12px;
}

.focus-sweep-heading { min-width: 0; }

.focus-sweep-eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.focus-sweep-scope {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.focus-sweep-progress {
  min-height: auto;
  margin: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

.focus-sweep-top-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.focus-sweep-instant-badge {
  height: 25px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  color: var(--accent-primary);
  background: rgba(var(--accent-rgb), 0.09);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.focus-sweep-review-launch {
  height: 28px;
  max-width: 102px;
  padding: 0 9px;
  overflow: hidden;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.focus-sweep-review-launch:hover {
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.07);
  border-color: rgba(var(--neutral-rgb), 0.16);
}

.focus-sweep-icon-btn {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.focus-sweep-icon-btn svg { width: 16px; height: 16px; }
.focus-sweep-icon-btn:hover:not(:disabled) {
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.07);
  border-color: rgba(var(--neutral-rgb), 0.16);
}
.focus-sweep-icon-btn.close:hover:not(:disabled) { color: var(--accent-danger); }
.focus-sweep-icon-btn:disabled { opacity: 0.28; cursor: default; }

.focus-sweep-meter {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  overflow: hidden;
  margin: 0 0 16px;
  background: rgba(var(--neutral-rgb), 0.11);
  border-radius: 999px;
}

.focus-sweep-meter-fill {
  width: 0;
  height: 100%;
  background: var(--accent-primary);
  border-radius: inherit;
  transition: width 0.22s cubic-bezier(.22,.8,.25,1);
}

.focus-sweep-deck-view { min-width: 0; }

.focus-sweep-deck {
  --sweep-card-height: 300px;
  position: relative;
  width: min(420px, 100%);
  height: calc(var(--sweep-card-height) + 24px);
  margin: 0 auto;
  perspective: 900px;
}

.focus-sweep-card {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--sweep-card-height);
  overflow: hidden;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid rgba(var(--neutral-rgb), 0.19);
  border-radius: 20px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 72%, transparent);
  transform-origin: 50% 90%;
  will-change: transform, opacity;
}

.focus-sweep-card-third {
  z-index: 1;
  opacity: 0.52;
  transform: translateY(20px) scale(0.94);
  transition: transform 220ms cubic-bezier(.22,.8,.25,1), opacity 220ms ease;
}

.focus-sweep-card-next {
  z-index: 2;
  opacity: 0.78;
  transform: translateY(10px) scale(0.97);
  transition: transform 220ms cubic-bezier(.22,.8,.25,1), opacity 220ms ease;
}

.focus-sweep-card-current {
  --sweep-drag-x: 0px;
  --sweep-drag-y: 0px;
  --sweep-drag-rotation: 0deg;
  --sweep-drag-progress: 0;
  z-index: 3;
  touch-action: none;
  user-select: none;
  cursor: grab;
  transform: translate3d(var(--sweep-drag-x), var(--sweep-drag-y), 0) rotate(var(--sweep-drag-rotation));
}

.focus-sweep-card-current.is-dragging {
  cursor: grabbing;
  transition: none;
}

.focus-sweep-card-current.is-snapping {
  transition: transform var(--sweep-motion-duration, 180ms) cubic-bezier(.22,.8,.25,1);
}

.focus-sweep-card-current.is-committed {
  opacity: 0;
  transform: translate3d(var(--sweep-exit-x), var(--sweep-exit-y), 0) rotate(var(--sweep-exit-rotation));
  transition:
    transform var(--sweep-motion-duration, 240ms) cubic-bezier(.22,.8,.25,1),
    opacity calc(var(--sweep-motion-duration, 240ms) * 0.85) ease;
}

.focus-sweep-card-current.is-returning {
  opacity: 0;
  transform: translate3d(var(--sweep-exit-x), var(--sweep-exit-y), 0) rotate(var(--sweep-exit-rotation));
  transition: none;
}

.focus-sweep-card-current.is-returning.is-returning-active {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transition:
    transform var(--sweep-motion-duration, 220ms) cubic-bezier(.22,.8,.25,1),
    opacity var(--sweep-motion-duration, 220ms) ease;
}

.focus-sweep-deck.is-advancing .focus-sweep-card-next {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.focus-sweep-deck.is-advancing .focus-sweep-card-third {
  opacity: 0.78;
  transform: translateY(10px) scale(0.97);
}

.focus-sweep-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  content: '';
  opacity: calc(var(--sweep-drag-progress, 0) * 0.95);
  transition: opacity 0.1s linear;
}

.focus-sweep-card-current.intent-close::after {
  background: linear-gradient(105deg, rgba(var(--danger-rgb), 0.2), transparent 62%);
  box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), 0.52);
}

.focus-sweep-card-current.intent-save::after {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.22), transparent 66%);
  box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb), 0.52);
}

.focus-sweep-card-current.intent-keep::after {
  background: linear-gradient(255deg, rgba(var(--success-rgb, var(--accent-rgb)), 0.18), transparent 62%);
  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb, var(--accent-rgb)), 0.46);
}

.focus-sweep-card-open {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: inherit;
  font: inherit;
  cursor: inherit;
}

.focus-sweep-card-open:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -5px;
}

.focus-sweep-card-content {
  height: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 32px 30px 26px;
}

.focus-sweep-favicon-wrap {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(var(--neutral-rgb), 0.07);
  border: 1px solid rgba(var(--neutral-rgb), 0.12);
  border-radius: 12px;
}

.focus-sweep-favicon { width: 26px; height: 26px; border-radius: 5px; }
.focus-sweep-copy { min-width: 0; overflow: hidden; }
.focus-sweep-domain-row {
  min-height: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.focus-sweep-domain { color: var(--muted); font-size: 12px; font-weight: 750; }
.focus-sweep-badge {
  padding: 2px 6px;
  color: var(--muted);
  background: rgba(var(--neutral-rgb), 0.07);
  border: 1px solid rgba(var(--neutral-rgb), 0.15);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.focus-sweep-badge.muted { color: var(--muted); }
.focus-sweep-badge.danger { color: var(--accent-danger); border-color: rgba(var(--danger-rgb), 0.28); }
.focus-sweep-title {
  display: -webkit-box;
  margin: 13px 0 0;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 23px;
  font-weight: 780;
  letter-spacing: -0.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.focus-sweep-url {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.focus-sweep-intent-label {
  position: absolute;
  z-index: 4;
  padding: 6px 10px;
  opacity: 0;
  border: 2px solid currentColor;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity 0.08s linear;
}
.focus-sweep-intent-label.close { top: 24px; left: 24px; color: var(--accent-danger); transform: rotate(-7deg); }
.focus-sweep-intent-label.save { top: 24px; left: 50%; color: var(--accent-primary); transform: translateX(-50%); }
.focus-sweep-intent-label.keep { top: 24px; right: 24px; color: var(--accent-primary); transform: rotate(7deg); }
.focus-sweep-card-current.intent-close .focus-sweep-intent-label.close,
.focus-sweep-card-current.intent-save .focus-sweep-intent-label.save,
.focus-sweep-card-current.intent-keep .focus-sweep-intent-label.keep { opacity: 1; }

.focus-sweep-destination {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px auto 0;
  padding: 0 9px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.focus-sweep-destination svg { width: 15px; height: 15px; }
.focus-sweep-destination:hover:not(:disabled) {
  color: var(--text);
  background: rgba(var(--neutral-rgb), 0.06);
  border-color: rgba(var(--neutral-rgb), 0.15);
}

.focus-sweep-actions {
  width: min(420px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 13px auto 0;
  padding: 13px 0 0;
  border-top: 1px solid rgba(var(--neutral-rgb), 0.12);
}

.focus-sweep-decision {
  min-width: 0;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  background: rgba(var(--neutral-rgb), 0.045);
  border: 1px solid rgba(var(--neutral-rgb), 0.15);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s, opacity 0.15s;
}
.focus-sweep-decision-key {
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  background: rgba(var(--neutral-rgb), 0.07);
  border-radius: 7px;
  font-size: 14px;
}
.focus-sweep-decision:hover:not(:disabled) { color: var(--text); transform: translateY(-1px); }
.focus-sweep-decision.close:hover:not(:disabled) { color: var(--accent-danger); background: rgba(var(--danger-rgb), 0.075); border-color: rgba(var(--danger-rgb), 0.32); }
.focus-sweep-decision.save:hover:not(:disabled) { color: var(--accent-primary); background: rgba(var(--accent-rgb), 0.075); border-color: rgba(var(--accent-rgb), 0.32); }
.focus-sweep-decision.keep:hover:not(:disabled) { color: var(--accent-primary); background: rgba(var(--accent-rgb), 0.055); border-color: rgba(var(--accent-rgb), 0.25); }
.focus-sweep-decision:disabled, .focus-sweep-destination:disabled { opacity: 0.34; cursor: default; transform: none; }

.focus-sweep-summary {
  min-height: 406px;
  padding: 34px 18px 12px;
  text-align: center;
}
.focus-sweep-summary-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: var(--accent-primary);
  background: rgba(var(--accent-rgb), 0.09);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 850;
}
.focus-sweep-summary-title {
  margin: 18px 0 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 450;
}
.focus-sweep-summary-copy { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.focus-sweep-summary-counts {
  width: min(360px, 100%);
  display: grid;
  gap: 0;
  margin: 24px auto 0;
  text-align: left;
  border-top: 1px solid rgba(var(--neutral-rgb), 0.13);
}
.focus-sweep-summary-counts > div {
  min-height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  border-bottom: 1px solid rgba(var(--neutral-rgb), 0.13);
  font-size: 12px;
}
.focus-sweep-summary-counts strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.focus-sweep-summary-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.focus-sweep-btn {
  min-width: 104px;
  height: 36px;
  border-radius: 10px;
}

.focus-sweep-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus-sweep-overlay.is-busy .focus-sweep-panel { cursor: progress; }
.focus-sweep-overlay.is-busy .focus-sweep-card-current { pointer-events: none; }

.focus-sweep-review-launch:focus-visible,
.focus-sweep-icon-btn:focus-visible,
.focus-sweep-destination:focus-visible,
.focus-sweep-decision:focus-visible,
.focus-sweep-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  box-shadow: none;
}

:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .focus-sweep-panel,
:is(html[data-theme="papersoft"], html[data-theme="lattesoft"]) .focus-sweep-card {
  border-color: transparent;
  box-shadow: -5px -5px 12px var(--neu-light), 6px 6px 15px var(--neu-dark);
}

html[data-theme$="glass"] .focus-sweep-panel {
  background: color-mix(in srgb, var(--surface-strong) 90%, transparent);
  border-color: var(--glass-border);
}
html[data-theme$="glass"] .focus-sweep-card {
  background: color-mix(in srgb, var(--card-bg) 92%, transparent);
  border-color: var(--glass-border);
}
html[data-theme$="glass"] .focus-sweep-card-current {
  background: var(--card-bg);
}

@media (max-width: 560px) {
  .focus-sweep-overlay { padding: 14px; }
  .focus-sweep-panel { width: calc(100vw - 28px); padding: 14px; border-radius: 15px; }
  .focus-sweep-top { grid-template-columns: minmax(0, 1fr) auto; }
  .focus-sweep-progress { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 2px; }
  .focus-sweep-top-actions { grid-column: 1 / -1; width: 100%; justify-content: flex-end; }
  .focus-sweep-review-launch { margin-right: auto; }
  .focus-sweep-deck { --sweep-card-height: 280px; }
  .focus-sweep-card-content { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 26px 22px 22px; }
  .focus-sweep-favicon-wrap { width: 38px; height: 38px; border-radius: 10px; }
  .focus-sweep-favicon { width: 23px; height: 23px; }
  .focus-sweep-title { font-size: 20px; }
  .focus-sweep-decision { height: 44px; gap: 6px; }
  .focus-sweep-decision-key { width: 21px; height: 21px; }
  .focus-sweep-summary { min-height: 385px; padding-inline: 4px; }
}

@media (max-height: 680px) {
  .focus-sweep-overlay { align-items: flex-start; }
}

@media (max-width: 390px) {
  .focus-sweep-decision { gap: 4px; font-size: 10px; }
  .focus-sweep-decision-key { width: 23px; height: 23px; }
  .focus-sweep-instant-badge { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .focus-sweep-card,
  .focus-sweep-meter-fill,
  .focus-sweep-decision,
  .focus-sweep-intent-label {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .focus-sweep-card-current { transform: none !important; }
  .focus-sweep-deck.is-advancing .focus-sweep-card-next { transform: none; }
  .focus-sweep-deck.is-advancing .focus-sweep-card-third { transform: translateY(10px) scale(0.97); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .focus-sweep-overlay { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .focus-sweep-panel, html[data-theme$="glass"] .focus-sweep-panel { background: var(--surface-strong); }
  .focus-sweep-card, html[data-theme$="glass"] .focus-sweep-card { background: var(--card-bg); }
}

@media (forced-colors: active) {
  .focus-sweep-panel,
  .focus-sweep-card,
  .focus-sweep-decision,
  .focus-sweep-destination,
  .focus-sweep-review-launch,
  .focus-sweep-icon-btn,
  .focus-sweep-btn {
    color: ButtonText;
    background: ButtonFace;
    border-color: ButtonBorder;
    box-shadow: none;
    forced-color-adjust: none;
  }
  .focus-sweep-card-current.intent-close,
  .focus-sweep-card-current.intent-save,
  .focus-sweep-card-current.intent-keep { outline: 3px solid Highlight; }
  .focus-sweep-review-launch:focus-visible,
  .focus-sweep-icon-btn:focus-visible,
  .focus-sweep-destination:focus-visible,
  .focus-sweep-decision:focus-visible,
  .focus-sweep-btn:focus-visible { outline-color: Highlight; }
}