/* ═══════════════════════════════════════════════════════════════
   Notepad – Adaptive Theme Stylesheet (Dark Variants + Light)
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Base Colors */
  --clr-bg:          #0d0f1a;
  --clr-surface:     #13162a;
  --clr-surface-2:   #1a1e35;
  --clr-surface-3:   #202540;
  --clr-border:      rgba(255,255,255,0.06);
  --clr-border-soft: rgba(255,255,255,0.04);

  /* Accent */
  --clr-accent:      #6c63ff;
  --clr-accent-glow: rgba(108,99,255,0.25);
  --clr-accent-2:    #00d9ff;
  --clr-accent-3:    #ff6b9d;
  --clr-accent-soft: rgba(108,99,255,0.14);
  --clr-accent-soft-2: rgba(108,99,255,0.08);
  --clr-focus-ring:  rgba(108,99,255,0.30);
  --clr-selection-fill: rgba(108,99,255,0.30);
  --clr-accent-hover: #7c74ff;
  --clr-danger-hover: #e0284c;
  --shadow-danger: 0 4px 16px rgba(244,63,94,0.3);

  /* Text */
  --clr-text:        #e4e6f0;
  --clr-text-muted:  #7a7fa0;
  --clr-text-faint:  #474b70;
  --clr-selected-emphasis: #ffd7b0;
  --clr-brand-text-start: #fbfcff;
  --clr-brand-text-end:   #9aefff;
  --clr-control-icon: #b3bad7;
  --clr-control-icon-strong: #eef2ff;
  --clr-folder-text: #cbd1e8;
  --clr-folder-count-text: #9ea7cb;
  --clr-folder-icon: #7ee3ff;
  --clr-button-hover-border: rgba(255,255,255,0.12);
  --clr-thumb-border: rgba(255,255,255,0.92);
  --clr-overlay: rgba(0,0,0,0.55);
  --clr-overlay-soft: rgba(0,0,0,0.50);

  /* Control Surfaces */
  --clr-key-surface: var(--clr-surface-2);
  --clr-key-surface-hover: var(--clr-surface-3);

  /* Shadows */
  --shadow-elevated: 0 24px 64px rgba(0,0,0,0.6);
  --shadow-floating: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-toast:    0 8px 30px rgba(0,0,0,0.4);
  --shadow-panel:   -24px 0 60px rgba(0,0,0,0.45);
  --shadow-card:
    0 40px 80px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-auth-key: 0 4px 16px rgba(0,0,0,0.2);
  --shadow-thumb: 0 0 8px var(--clr-accent-glow), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-thumb-hover: 0 0 16px var(--clr-accent-glow), 0 2px 8px rgba(0,0,0,0.4);

  /* Status */
  --clr-success:     #22d3a5;
  --clr-warning:     #f59e0b;
  --clr-danger:      #f43f5e;
  --clr-danger-bg:   rgba(244,63,94,0.12);

  /* Geometry */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --ui-font:      'Inter', system-ui, sans-serif;
  --pane-font:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --ui-font-size: 14px;
  --ui-scale: 1;
  --font-ui-2xs: calc(9px * var(--ui-scale));
  --font-ui-xs: calc(10px * var(--ui-scale));
  --font-ui-sm: calc(11px * var(--ui-scale));
  --font-ui-md: calc(12px * var(--ui-scale));
  --font-ui-base: calc(13px * var(--ui-scale));
  --font-ui-lg: calc(14px * var(--ui-scale));
  --font-ui-xl: calc(15px * var(--ui-scale));
  --font-ui-2xl: calc(16px * var(--ui-scale));
  --font-ui-display: calc(20px * var(--ui-scale));
  --font-ui-base-strong: calc(13px * var(--ui-scale) * 1.2);

  /* Sidebar */
  --sidebar-w:  260px;
  --sidebar-current-w: var(--sidebar-w);
  --sidebar-tree-indent: 14px;
  --sidebar-folder-font-size: 13px;
  --sidebar-folder-active-font-size: 16px;
  --sidebar-file-font-size: 13px;
  --sidebar-file-active-font-size: 16px;
  --sidebar-header-h: 56px;
  --topbar-h: 44px;
  --topbar-gap: 10px;
  --topbar-padding-x: 12px;
  --topbar-control-size: 32px;
  --topbar-control-icon-size: 18px;
  --topbar-segment-btn-width: 32px;
  --topbar-segment-btn-height: 28px;
  --topbar-pill-height: 36px;
  --pane-toolbar-h: 22px;
  --pane-toolbar-gap: 6px;
  --pane-toolbar-padding-x: 8px;
  --pane-toolbar-padding-bottom: 2px;
  --pane-toolbar-action-gap: 2px;
  --pane-toolbar-control-size: 18px;
  --pane-toolbar-select-height: 20px;
  --pane-toolbar-label-size: 9px;
}

/* ── Dark Theme Variants ─────────────────────────────────────── */
[data-theme="graphite"] {
  --clr-bg: #0f1115; --clr-surface: #16191e; --clr-surface-2: #1d2128; --clr-surface-3: #262b34; --clr-border: rgba(255,255,255,0.07); --clr-border-soft: rgba(255,255,255,0.04);
  --clr-accent: #9aa4b2; --clr-accent-glow: rgba(154,164,178,0.24); --clr-accent-2: #6dd3ff; --clr-accent-3: #f59e0b; --clr-accent-soft: rgba(154,164,178,0.15); --clr-accent-soft-2: rgba(154,164,178,0.08); --clr-focus-ring: rgba(154,164,178,0.32); --clr-selection-fill: rgba(154,164,178,0.28); --clr-accent-hover: #b3bcc9;
  --clr-text: #edf1f7; --clr-text-muted: #9ba4b5; --clr-text-faint: #697384; --clr-selected-emphasis: #ffe0b0; --clr-brand-text-start: #f7fafc; --clr-brand-text-end: #bcc8d5; --clr-control-icon: #c1cada; --clr-control-icon-strong: #f5f7fb; --clr-folder-text: #d4d9e3; --clr-folder-count-text: #9ea6b7; --clr-folder-icon: #8fd7f5;
}

[data-theme="obsidian"] {
  --clr-bg: #090c14; --clr-surface: #0f1420; --clr-surface-2: #151b2b; --clr-surface-3: #1d2540; --clr-border: rgba(120,164,255,0.13); --clr-border-soft: rgba(120,164,255,0.06);
  --clr-accent: #4f7cff; --clr-accent-glow: rgba(79,124,255,0.28); --clr-accent-2: #5eead4; --clr-accent-3: #f97316; --clr-accent-soft: rgba(79,124,255,0.17); --clr-accent-soft-2: rgba(79,124,255,0.08); --clr-focus-ring: rgba(79,124,255,0.32); --clr-selection-fill: rgba(79,124,255,0.29); --clr-accent-hover: #6890ff;
  --clr-text: #e6ecff; --clr-text-muted: #8ea2d8; --clr-text-faint: #53638e; --clr-selected-emphasis: #ffd7ad; --clr-brand-text-start: #f7f9ff; --clr-brand-text-end: #7fdfff; --clr-control-icon: #a9b8ea; --clr-control-icon-strong: #eef3ff; --clr-folder-text: #c9d5f8; --clr-folder-count-text: #8798c9; --clr-folder-icon: #72d7ff;
}

[data-theme="ember"] {
  --clr-bg: #140d0d; --clr-surface: #1d1314; --clr-surface-2: #28191b; --clr-surface-3: #372124; --clr-border: rgba(255,201,168,0.11); --clr-border-soft: rgba(255,201,168,0.05);
  --clr-accent: #ff7a45; --clr-accent-glow: rgba(255,122,69,0.26); --clr-accent-2: #ffb86b; --clr-accent-3: #ff4d6d; --clr-accent-soft: rgba(255,122,69,0.16); --clr-accent-soft-2: rgba(255,122,69,0.08); --clr-focus-ring: rgba(255,122,69,0.33); --clr-selection-fill: rgba(255,122,69,0.27); --clr-accent-hover: #ff9064;
  --clr-text: #f7e9e4; --clr-text-muted: #c29e94; --clr-text-faint: #795955; --clr-selected-emphasis: #ffe6b8; --clr-brand-text-start: #fff6f2; --clr-brand-text-end: #ffb38f; --clr-control-icon: #e1beb3; --clr-control-icon-strong: #fff4ef; --clr-folder-text: #ecd0c8; --clr-folder-count-text: #bf978c; --clr-folder-icon: #ffb067;
}

[data-theme="aurora"] {
  --clr-bg: #071217; --clr-surface: #0d1820; --clr-surface-2: #12232d; --clr-surface-3: #183041; --clr-border: rgba(93,235,203,0.10); --clr-border-soft: rgba(93,235,203,0.05);
  --clr-accent: #2dd4bf; --clr-accent-glow: rgba(45,212,191,0.24); --clr-accent-2: #60a5fa; --clr-accent-3: #f472b6; --clr-accent-soft: rgba(45,212,191,0.15); --clr-accent-soft-2: rgba(45,212,191,0.07); --clr-focus-ring: rgba(45,212,191,0.30); --clr-selection-fill: rgba(45,212,191,0.24); --clr-accent-hover: #5debc9;
  --clr-text: #e2fbf7; --clr-text-muted: #8ac4bc; --clr-text-faint: #4d7974; --clr-selected-emphasis: #fff0b8; --clr-brand-text-start: #f3fffd; --clr-brand-text-end: #8ef0ff; --clr-control-icon: #a6ddd6; --clr-control-icon-strong: #eefffc; --clr-folder-text: #c8ebe6; --clr-folder-count-text: #7fb4ae; --clr-folder-icon: #6ae9d7;
}

[data-theme="oceanic"] {
  --clr-bg: #07111b; --clr-surface: #0c1825; --clr-surface-2: #102235; --clr-surface-3: #153049; --clr-border: rgba(93,173,226,0.11); --clr-border-soft: rgba(93,173,226,0.05);
  --clr-accent: #38bdf8; --clr-accent-glow: rgba(56,189,248,0.24); --clr-accent-2: #22d3ee; --clr-accent-3: #fb7185; --clr-accent-soft: rgba(56,189,248,0.15); --clr-accent-soft-2: rgba(56,189,248,0.08); --clr-focus-ring: rgba(56,189,248,0.30); --clr-selection-fill: rgba(56,189,248,0.25); --clr-accent-hover: #67cdfa;
  --clr-text: #e3f6ff; --clr-text-muted: #8fb7cb; --clr-text-faint: #50758b; --clr-selected-emphasis: #ffe4b5; --clr-brand-text-start: #f5fbff; --clr-brand-text-end: #81ddff; --clr-control-icon: #aed5e9; --clr-control-icon-strong: #eff8ff; --clr-folder-text: #cae6f4; --clr-folder-count-text: #82a8bb; --clr-folder-icon: #5cd7ff;
}

[data-theme="forest"] {
  --clr-bg: #0b130f; --clr-surface: #111b16; --clr-surface-2: #17251e; --clr-surface-3: #203428; --clr-border: rgba(126,231,135,0.10); --clr-border-soft: rgba(126,231,135,0.05);
  --clr-accent: #4ade80; --clr-accent-glow: rgba(74,222,128,0.23); --clr-accent-2: #22c55e; --clr-accent-3: #facc15; --clr-accent-soft: rgba(74,222,128,0.15); --clr-accent-soft-2: rgba(74,222,128,0.07); --clr-focus-ring: rgba(74,222,128,0.29); --clr-selection-fill: rgba(74,222,128,0.24); --clr-accent-hover: #72e69a;
  --clr-text: #e7f8ed; --clr-text-muted: #95bea1; --clr-text-faint: #587862; --clr-selected-emphasis: #fff2b3; --clr-brand-text-start: #f6fff8; --clr-brand-text-end: #92f0b2; --clr-control-icon: #b2dcc0; --clr-control-icon-strong: #f0fff4; --clr-folder-text: #d0ead8; --clr-folder-count-text: #89ae94; --clr-folder-icon: #7bea9b;
}

[data-theme="moss"] {
  --clr-bg: #10140c; --clr-surface: #171c11; --clr-surface-2: #202716; --clr-surface-3: #2c361e; --clr-border: rgba(181,230,91,0.10); --clr-border-soft: rgba(181,230,91,0.05);
  --clr-accent: #a3e635; --clr-accent-glow: rgba(163,230,53,0.23); --clr-accent-2: #4ade80; --clr-accent-3: #fb923c; --clr-accent-soft: rgba(163,230,53,0.15); --clr-accent-soft-2: rgba(163,230,53,0.08); --clr-focus-ring: rgba(163,230,53,0.28); --clr-selection-fill: rgba(163,230,53,0.23); --clr-accent-hover: #b8ec62;
  --clr-text: #f0f7e1; --clr-text-muted: #b1c28a; --clr-text-faint: #6d7a50; --clr-selected-emphasis: #fff1b8; --clr-brand-text-start: #fbfff3; --clr-brand-text-end: #d6f58a; --clr-control-icon: #cfdbb2; --clr-control-icon-strong: #fbfff1; --clr-folder-text: #e0e8cc; --clr-folder-count-text: #a6b583; --clr-folder-icon: #c9eb6e;
}

[data-theme="cobalt"] {
  --clr-bg: #090f1f; --clr-surface: #101730; --clr-surface-2: #162148; --clr-surface-3: #1d2e66; --clr-border: rgba(109,115,255,0.13); --clr-border-soft: rgba(109,115,255,0.06);
  --clr-accent: #6366f1; --clr-accent-glow: rgba(99,102,241,0.28); --clr-accent-2: #38bdf8; --clr-accent-3: #f472b6; --clr-accent-soft: rgba(99,102,241,0.17); --clr-accent-soft-2: rgba(99,102,241,0.08); --clr-focus-ring: rgba(99,102,241,0.33); --clr-selection-fill: rgba(99,102,241,0.28); --clr-accent-hover: #7b7df4;
  --clr-text: #e4e8ff; --clr-text-muted: #99a5d6; --clr-text-faint: #606a97; --clr-selected-emphasis: #ffdcbd; --clr-brand-text-start: #f7f8ff; --clr-brand-text-end: #8fbcff; --clr-control-icon: #b7c0ee; --clr-control-icon-strong: #f1f3ff; --clr-folder-text: #ccd2f7; --clr-folder-count-text: #8d98c7; --clr-folder-icon: #7ab4ff;
}

[data-theme="crimson"] {
  --clr-bg: #16090f; --clr-surface: #21101a; --clr-surface-2: #2d1522; --clr-surface-3: #401b2d; --clr-border: rgba(251,113,133,0.12); --clr-border-soft: rgba(251,113,133,0.05);
  --clr-accent: #f43f5e; --clr-accent-glow: rgba(244,63,94,0.27); --clr-accent-2: #fb7185; --clr-accent-3: #f59e0b; --clr-accent-soft: rgba(244,63,94,0.16); --clr-accent-soft-2: rgba(244,63,94,0.08); --clr-focus-ring: rgba(244,63,94,0.31); --clr-selection-fill: rgba(244,63,94,0.26); --clr-accent-hover: #fb5e78;
  --clr-text: #fae8ee; --clr-text-muted: #c9a0af; --clr-text-faint: #845c69; --clr-selected-emphasis: #ffe2b2; --clr-brand-text-start: #fff5f7; --clr-brand-text-end: #ff9fb4; --clr-control-icon: #e5bec8; --clr-control-icon-strong: #fff1f4; --clr-folder-text: #efd0d7; --clr-folder-count-text: #c295a3; --clr-folder-icon: #ff8aa3;
}

[data-theme="rose"] {
  --clr-bg: #170d18; --clr-surface: #201321; --clr-surface-2: #2b1930; --clr-surface-3: #3b2342; --clr-border: rgba(244,114,182,0.12); --clr-border-soft: rgba(244,114,182,0.05);
  --clr-accent: #ec4899; --clr-accent-glow: rgba(236,72,153,0.26); --clr-accent-2: #f472b6; --clr-accent-3: #f59e0b; --clr-accent-soft: rgba(236,72,153,0.16); --clr-accent-soft-2: rgba(236,72,153,0.08); --clr-focus-ring: rgba(236,72,153,0.31); --clr-selection-fill: rgba(236,72,153,0.25); --clr-accent-hover: #f168ab;
  --clr-text: #fbeaf4; --clr-text-muted: #c9a1bb; --clr-text-faint: #865f78; --clr-selected-emphasis: #ffe4b8; --clr-brand-text-start: #fff7fb; --clr-brand-text-end: #ffaad8; --clr-control-icon: #e8c1d9; --clr-control-icon-strong: #fff2fa; --clr-folder-text: #f0d3e4; --clr-folder-count-text: #c49ab4; --clr-folder-icon: #ff91cf;
}

[data-theme="violet"] {
  --clr-bg: #110d1c; --clr-surface: #181326; --clr-surface-2: #221a35; --clr-surface-3: #30224b; --clr-border: rgba(167,139,250,0.12); --clr-border-soft: rgba(167,139,250,0.05);
  --clr-accent: #8b5cf6; --clr-accent-glow: rgba(139,92,246,0.27); --clr-accent-2: #c084fc; --clr-accent-3: #22d3ee; --clr-accent-soft: rgba(139,92,246,0.16); --clr-accent-soft-2: rgba(139,92,246,0.08); --clr-focus-ring: rgba(139,92,246,0.33); --clr-selection-fill: rgba(139,92,246,0.27); --clr-accent-hover: #a17af8;
  --clr-text: #efe8ff; --clr-text-muted: #b09fd1; --clr-text-faint: #6f6190; --clr-selected-emphasis: #ffe4b8; --clr-brand-text-start: #faf7ff; --clr-brand-text-end: #c6a4ff; --clr-control-icon: #cdbde8; --clr-control-icon-strong: #f7f1ff; --clr-folder-text: #ded2f4; --clr-folder-count-text: #a293c1; --clr-folder-icon: #c39bff;
}

[data-theme="amethyst"] {
  --clr-bg: #120919; --clr-surface: #1a1023; --clr-surface-2: #261732; --clr-surface-3: #351f47; --clr-border: rgba(192,132,252,0.12); --clr-border-soft: rgba(192,132,252,0.05);
  --clr-accent: #c084fc; --clr-accent-glow: rgba(192,132,252,0.26); --clr-accent-2: #f0abfc; --clr-accent-3: #fb7185; --clr-accent-soft: rgba(192,132,252,0.16); --clr-accent-soft-2: rgba(192,132,252,0.08); --clr-focus-ring: rgba(192,132,252,0.31); --clr-selection-fill: rgba(192,132,252,0.26); --clr-accent-hover: #cf9dfd;
  --clr-text: #f5eaff; --clr-text-muted: #bfa3d5; --clr-text-faint: #7b628f; --clr-selected-emphasis: #ffe4c1; --clr-brand-text-start: #fcf7ff; --clr-brand-text-end: #efb4ff; --clr-control-icon: #dbc2ed; --clr-control-icon-strong: #faf2ff; --clr-folder-text: #e9d6f6; --clr-folder-count-text: #b49bc8; --clr-folder-icon: #e2a3ff;
}

[data-theme="neon"] {
  --clr-bg: #05090f; --clr-surface: #0b1220; --clr-surface-2: #101a2d; --clr-surface-3: #152542; --clr-border: rgba(45,212,191,0.14); --clr-border-soft: rgba(45,212,191,0.06);
  --clr-accent: #00f5d4; --clr-accent-glow: rgba(0,245,212,0.30); --clr-accent-2: #00bbf9; --clr-accent-3: #f15bb5; --clr-accent-soft: rgba(0,245,212,0.17); --clr-accent-soft-2: rgba(0,245,212,0.08); --clr-focus-ring: rgba(0,245,212,0.35); --clr-selection-fill: rgba(0,245,212,0.28); --clr-accent-hover: #4ff9e0;
  --clr-text: #ddfffa; --clr-text-muted: #82c9bf; --clr-text-faint: #438178; --clr-selected-emphasis: #fff2b8; --clr-brand-text-start: #f4fffd; --clr-brand-text-end: #72efff; --clr-control-icon: #a8efe4; --clr-control-icon-strong: #f0fffd; --clr-folder-text: #c7f7f0; --clr-folder-count-text: #74b5ab; --clr-folder-icon: #54f6e0;
}

[data-theme="teal"] {
  --clr-bg: #071515; --clr-surface: #0c1e1d; --clr-surface-2: #112a29; --clr-surface-3: #173837; --clr-border: rgba(45,212,191,0.11); --clr-border-soft: rgba(45,212,191,0.05);
  --clr-accent: #14b8a6; --clr-accent-glow: rgba(20,184,166,0.24); --clr-accent-2: #2dd4bf; --clr-accent-3: #fb7185; --clr-accent-soft: rgba(20,184,166,0.15); --clr-accent-soft-2: rgba(20,184,166,0.07); --clr-focus-ring: rgba(20,184,166,0.30); --clr-selection-fill: rgba(20,184,166,0.24); --clr-accent-hover: #34ccb8;
  --clr-text: #e4fbf8; --clr-text-muted: #8fbfb8; --clr-text-faint: #537a75; --clr-selected-emphasis: #ffeab8; --clr-brand-text-start: #f4fffd; --clr-brand-text-end: #8ceade; --clr-control-icon: #abdcd6; --clr-control-icon-strong: #effffc; --clr-folder-text: #c9ebe6; --clr-folder-count-text: #82afa9; --clr-folder-icon: #6ce6d7;
}

[data-theme="slate"] {
  --clr-bg: #0d1117; --clr-surface: #141a22; --clr-surface-2: #1b2430; --clr-surface-3: #253142; --clr-border: rgba(148,163,184,0.12); --clr-border-soft: rgba(148,163,184,0.05);
  --clr-accent: #94a3b8; --clr-accent-glow: rgba(148,163,184,0.24); --clr-accent-2: #60a5fa; --clr-accent-3: #f97316; --clr-accent-soft: rgba(148,163,184,0.15); --clr-accent-soft-2: rgba(148,163,184,0.08); --clr-focus-ring: rgba(148,163,184,0.29); --clr-selection-fill: rgba(148,163,184,0.24); --clr-accent-hover: #a9b6c8;
  --clr-text: #edf2f7; --clr-text-muted: #9eadc0; --clr-text-faint: #66758a; --clr-selected-emphasis: #ffe5bd; --clr-brand-text-start: #f8fbff; --clr-brand-text-end: #bbd2f1; --clr-control-icon: #c3cfdd; --clr-control-icon-strong: #f7fafd; --clr-folder-text: #d6e0eb; --clr-folder-count-text: #94a3b4; --clr-folder-icon: #93c5fd;
}

[data-theme="sepia"] {
  --clr-bg: #16110d; --clr-surface: #1f1813; --clr-surface-2: #2c2118; --clr-surface-3: #3a2c20; --clr-border: rgba(216,180,122,0.12); --clr-border-soft: rgba(216,180,122,0.05);
  --clr-accent: #d4a373; --clr-accent-glow: rgba(212,163,115,0.24); --clr-accent-2: #e9c46a; --clr-accent-3: #e76f51; --clr-accent-soft: rgba(212,163,115,0.15); --clr-accent-soft-2: rgba(212,163,115,0.08); --clr-focus-ring: rgba(212,163,115,0.30); --clr-selection-fill: rgba(212,163,115,0.25); --clr-accent-hover: #ddb389;
  --clr-text: #f7ede3; --clr-text-muted: #c1a890; --clr-text-faint: #7e6958; --clr-selected-emphasis: #fff1c5; --clr-brand-text-start: #fff9f2; --clr-brand-text-end: #f0c48a; --clr-control-icon: #dcc6ae; --clr-control-icon-strong: #fff8ef; --clr-folder-text: #ead8c7; --clr-folder-count-text: #b79d84; --clr-folder-icon: #edc48d;
}

[data-theme="nord"] {
  --clr-bg: #0d1117; --clr-surface: #141b24; --clr-surface-2: #1d2733; --clr-surface-3: #263445; --clr-border: rgba(143,188,187,0.11); --clr-border-soft: rgba(143,188,187,0.05);
  --clr-accent: #88c0d0; --clr-accent-glow: rgba(136,192,208,0.24); --clr-accent-2: #81a1c1; --clr-accent-3: #ebcb8b; --clr-accent-soft: rgba(136,192,208,0.15); --clr-accent-soft-2: rgba(136,192,208,0.08); --clr-focus-ring: rgba(136,192,208,0.29); --clr-selection-fill: rgba(136,192,208,0.24); --clr-accent-hover: #9dcbd8;
  --clr-text: #e8eff7; --clr-text-muted: #9fb0c4; --clr-text-faint: #65758a; --clr-selected-emphasis: #fff0bd; --clr-brand-text-start: #f7fbff; --clr-brand-text-end: #b2dae3; --clr-control-icon: #c2d1df; --clr-control-icon-strong: #f6faff; --clr-folder-text: #d6e2ec; --clr-folder-count-text: #91a3b6; --clr-folder-icon: #9bd5e3;
}

[data-theme="sunset"] {
  --clr-bg: #140e14; --clr-surface: #1c1320; --clr-surface-2: #27192c; --clr-surface-3: #371f3c; --clr-border: rgba(251,146,60,0.12); --clr-border-soft: rgba(251,146,60,0.05);
  --clr-accent: #fb923c; --clr-accent-glow: rgba(251,146,60,0.26); --clr-accent-2: #f97316; --clr-accent-3: #f472b6; --clr-accent-soft: rgba(251,146,60,0.16); --clr-accent-soft-2: rgba(251,146,60,0.08); --clr-focus-ring: rgba(251,146,60,0.31); --clr-selection-fill: rgba(251,146,60,0.26); --clr-accent-hover: #fba85d;
  --clr-text: #f9ece7; --clr-text-muted: #c6a59a; --clr-text-faint: #815f59; --clr-selected-emphasis: #fff0ba; --clr-brand-text-start: #fff8f5; --clr-brand-text-end: #ffb48d; --clr-control-icon: #e3c3b8; --clr-control-icon-strong: #fff4f0; --clr-folder-text: #edd5cd; --clr-folder-count-text: #bd9a8f; --clr-folder-icon: #ffb074;
}

[data-theme="volcanic"] {
  --clr-bg: #120b09; --clr-surface: #1a120f; --clr-surface-2: #241915; --clr-surface-3: #33211b; --clr-border: rgba(249,115,22,0.12); --clr-border-soft: rgba(249,115,22,0.05);
  --clr-accent: #ea580c; --clr-accent-glow: rgba(234,88,12,0.27); --clr-accent-2: #fb923c; --clr-accent-3: #facc15; --clr-accent-soft: rgba(234,88,12,0.16); --clr-accent-soft-2: rgba(234,88,12,0.08); --clr-focus-ring: rgba(234,88,12,0.32); --clr-selection-fill: rgba(234,88,12,0.26); --clr-accent-hover: #f07233;
  --clr-text: #f8ebe4; --clr-text-muted: #c7a292; --clr-text-faint: #825d51; --clr-selected-emphasis: #fff0be; --clr-brand-text-start: #fff6f2; --clr-brand-text-end: #ffb17f; --clr-control-icon: #e3c1b3; --clr-control-icon-strong: #fff3ef; --clr-folder-text: #edd4c9; --clr-folder-count-text: #be9889; --clr-folder-icon: #ff9e5f;
}

/* ── Light Theme Variants ────────────────────────────────────── */
[data-theme="light"],
[data-theme="porcelain"],
[data-theme="cloud"],
[data-theme="linen"],
[data-theme="sand"],
[data-theme="dawn"],
[data-theme="blush"],
[data-theme="rosewater"],
[data-theme="peach"],
[data-theme="marigold"],
[data-theme="sage"],
[data-theme="mint"],
[data-theme="meadow"],
[data-theme="aqua"],
[data-theme="sky"],
[data-theme="glacier"],
[data-theme="lagoon"],
[data-theme="lilac"],
[data-theme="iris"],
[data-theme="petal"] {
  --clr-bg: #f0f2f8;
  --clr-surface: #ffffff;
  --clr-surface-2: #edf0f7;
  --clr-surface-3: #e2e6f0;
  --clr-border: rgba(0,0,0,0.08);
  --clr-border-soft: rgba(0,0,0,0.05);

  --clr-accent: #5a52e0;
  --clr-accent-glow: rgba(90,82,224,0.18);
  --clr-accent-2: #0099cc;
  --clr-accent-3: #e8457a;
  --clr-accent-soft: rgba(90,82,224,0.12);
  --clr-accent-soft-2: rgba(90,82,224,0.08);
  --clr-focus-ring: rgba(90,82,224,0.24);
  --clr-selection-fill: rgba(90,82,224,0.22);
  --clr-accent-hover: #4d45cf;
  --clr-danger-hover: #c8244a;
  --shadow-danger: 0 4px 16px rgba(220,38,83,0.2);

  --clr-text: #1a1d2e;
  --clr-text-muted: #474e67;
  --clr-text-faint: #727b96;
  --clr-selected-emphasis: #4e2f1c;
  --clr-brand-text-start: #243055;
  --clr-brand-text-end: #167aa8;
  --clr-control-icon: #4b5573;
  --clr-control-icon-strong: #1a1d2e;
  --clr-folder-text: #313957;
  --clr-folder-count-text: #69728f;
  --clr-folder-icon: #0f86b6;
  --clr-button-hover-border: rgba(15,23,42,0.12);
  --clr-thumb-border: rgba(255,255,255,0.96);
  --clr-overlay: rgba(23,33,62,0.26);
  --clr-overlay-soft: rgba(23,33,62,0.22);

  --clr-key-surface: #f4f6fc;
  --clr-key-surface-hover: #e8ecf8;

  --shadow-elevated: 0 22px 56px rgba(44,59,101,0.18);
  --shadow-floating: 0 14px 36px rgba(44,59,101,0.16);
  --shadow-toast: 0 10px 28px rgba(44,59,101,0.14);
  --shadow-panel: -24px 0 60px rgba(44,59,101,0.18);
  --shadow-card:
    0 40px 80px rgba(44,59,101,0.18),
    0 0 0 1px rgba(90,82,224,0.08);
  --shadow-auth-key: 0 2px 8px rgba(44,59,101,0.10);
  --shadow-thumb: 0 0 8px var(--clr-accent-glow), 0 2px 6px rgba(44,59,101,0.18);
  --shadow-thumb-hover: 0 0 16px var(--clr-accent-glow), 0 4px 10px rgba(44,59,101,0.22);

  --clr-success: #0faa82;
  --clr-warning: #d97706;
  --clr-danger: #dc2653;
  --clr-danger-bg: rgba(220,38,83,0.10);
}

[data-theme="light"] {
  --clr-bg: #f0f2f8; --clr-surface: #ffffff; --clr-surface-2: #edf0f7; --clr-surface-3: #e2e6f0; --clr-border: rgba(0,0,0,0.08); --clr-border-soft: rgba(0,0,0,0.05);
  --clr-accent: #5a52e0; --clr-accent-glow: rgba(90,82,224,0.18); --clr-accent-2: #0099cc; --clr-accent-3: #e8457a; --clr-accent-soft: rgba(90,82,224,0.12); --clr-accent-soft-2: rgba(90,82,224,0.08); --clr-focus-ring: rgba(90,82,224,0.24); --clr-selection-fill: rgba(90,82,224,0.22); --clr-accent-hover: #4d45cf;
  --clr-text: #1a1d2e; --clr-text-muted: #474e67; --clr-text-faint: #727b96; --clr-brand-text-start: #243055; --clr-brand-text-end: #167aa8; --clr-control-icon: #4b5573; --clr-control-icon-strong: #1a1d2e; --clr-folder-text: #313957; --clr-folder-count-text: #69728f; --clr-folder-icon: #0f86b6;
}

[data-theme="porcelain"] {
  --clr-bg: #f5f6fa; --clr-surface: #fffefe; --clr-surface-2: #f0f2f7; --clr-surface-3: #e6eaf1; --clr-border: rgba(42,57,87,0.10); --clr-border-soft: rgba(42,57,87,0.05);
  --clr-accent: #4868b8; --clr-accent-glow: rgba(72,104,184,0.18); --clr-accent-2: #6bb4d6; --clr-accent-3: #e28b7c; --clr-accent-soft: rgba(72,104,184,0.11); --clr-accent-soft-2: rgba(72,104,184,0.07); --clr-focus-ring: rgba(72,104,184,0.22); --clr-selection-fill: rgba(72,104,184,0.18); --clr-accent-hover: #3957a3;
  --clr-text: #1f2a3d; --clr-text-muted: #5c667b; --clr-text-faint: #8892a8; --clr-brand-text-start: #22304c; --clr-brand-text-end: #6c9ac8; --clr-control-icon: #556279; --clr-control-icon-strong: #1f2a3d; --clr-folder-text: #2d3953; --clr-folder-count-text: #73809a; --clr-folder-icon: #5a8fc6;
}

[data-theme="cloud"] {
  --clr-bg: #eef4fb; --clr-surface: #ffffff; --clr-surface-2: #e8f0fa; --clr-surface-3: #dbe7f5; --clr-border: rgba(40,88,139,0.09); --clr-border-soft: rgba(40,88,139,0.05);
  --clr-accent: #3f72c7; --clr-accent-glow: rgba(63,114,199,0.18); --clr-accent-2: #4fb6df; --clr-accent-3: #ff8a65; --clr-accent-soft: rgba(63,114,199,0.11); --clr-accent-soft-2: rgba(63,114,199,0.07); --clr-focus-ring: rgba(63,114,199,0.22); --clr-selection-fill: rgba(63,114,199,0.18); --clr-accent-hover: #2f5fb2;
  --clr-text: #17314f; --clr-text-muted: #56708c; --clr-text-faint: #859ab2; --clr-brand-text-start: #16345a; --clr-brand-text-end: #4fa8da; --clr-control-icon: #4c6886; --clr-control-icon-strong: #16314f; --clr-folder-text: #234464; --clr-folder-count-text: #6e89a6; --clr-folder-icon: #4298d2;
}

[data-theme="linen"] {
  --clr-bg: #f7f2ea; --clr-surface: #fffdf8; --clr-surface-2: #f2ece3; --clr-surface-3: #e8ded2; --clr-border: rgba(84,61,40,0.10); --clr-border-soft: rgba(84,61,40,0.05);
  --clr-accent: #9a6b3d; --clr-accent-glow: rgba(154,107,61,0.17); --clr-accent-2: #c88a53; --clr-accent-3: #bf5a4b; --clr-accent-soft: rgba(154,107,61,0.11); --clr-accent-soft-2: rgba(154,107,61,0.07); --clr-focus-ring: rgba(154,107,61,0.21); --clr-selection-fill: rgba(154,107,61,0.18); --clr-accent-hover: #84592e;
  --clr-text: #34261c; --clr-text-muted: #6b5746; --clr-text-faint: #9d8b7b; --clr-brand-text-start: #4a372a; --clr-brand-text-end: #b07a46; --clr-control-icon: #675445; --clr-control-icon-strong: #34261c; --clr-folder-text: #463426; --clr-folder-count-text: #8b7868; --clr-folder-icon: #ad7741;
}

[data-theme="sand"] {
  --clr-bg: #f8f3e6; --clr-surface: #fffef8; --clr-surface-2: #f4ecdb; --clr-surface-3: #eadfc8; --clr-border: rgba(120,90,37,0.10); --clr-border-soft: rgba(120,90,37,0.05);
  --clr-accent: #b7822f; --clr-accent-glow: rgba(183,130,47,0.18); --clr-accent-2: #d8a34a; --clr-accent-3: #e66a4e; --clr-accent-soft: rgba(183,130,47,0.11); --clr-accent-soft-2: rgba(183,130,47,0.07); --clr-focus-ring: rgba(183,130,47,0.22); --clr-selection-fill: rgba(183,130,47,0.18); --clr-accent-hover: #9f6f1c;
  --clr-text: #3a2d16; --clr-text-muted: #715d39; --clr-text-faint: #a08d66; --clr-brand-text-start: #5a431d; --clr-brand-text-end: #d1983e; --clr-control-icon: #6f5b36; --clr-control-icon-strong: #3a2d16; --clr-folder-text: #4f3d1e; --clr-folder-count-text: #927d53; --clr-folder-icon: #c38a2e;
}

[data-theme="dawn"] {
  --clr-bg: #fff2ea; --clr-surface: #fffdf9; --clr-surface-2: #ffebe0; --clr-surface-3: #ffdccc; --clr-border: rgba(176,99,62,0.10); --clr-border-soft: rgba(176,99,62,0.05);
  --clr-accent: #e07a48; --clr-accent-glow: rgba(224,122,72,0.18); --clr-accent-2: #f2ab52; --clr-accent-3: #d84f6f; --clr-accent-soft: rgba(224,122,72,0.12); --clr-accent-soft-2: rgba(224,122,72,0.07); --clr-focus-ring: rgba(224,122,72,0.22); --clr-selection-fill: rgba(224,122,72,0.18); --clr-accent-hover: #cc6732;
  --clr-text: #44251f; --clr-text-muted: #7b5b53; --clr-text-faint: #ab8880; --clr-brand-text-start: #5d3027; --clr-brand-text-end: #dd9347; --clr-control-icon: #764f47; --clr-control-icon-strong: #44251f; --clr-folder-text: #5d372d; --clr-folder-count-text: #94716a; --clr-folder-icon: #de8f47;
}

[data-theme="blush"] {
  --clr-bg: #fff1f5; --clr-surface: #fffdfd; --clr-surface-2: #fde8ef; --clr-surface-3: #f8d9e3; --clr-border: rgba(173,74,110,0.10); --clr-border-soft: rgba(173,74,110,0.05);
  --clr-accent: #d85a86; --clr-accent-glow: rgba(216,90,134,0.18); --clr-accent-2: #f49ab0; --clr-accent-3: #f09d4f; --clr-accent-soft: rgba(216,90,134,0.12); --clr-accent-soft-2: rgba(216,90,134,0.07); --clr-focus-ring: rgba(216,90,134,0.22); --clr-selection-fill: rgba(216,90,134,0.18); --clr-accent-hover: #c64672;
  --clr-text: #481f31; --clr-text-muted: #7e5b69; --clr-text-faint: #af8592; --clr-brand-text-start: #6a2943; --clr-brand-text-end: #db7b9c; --clr-control-icon: #7a5364; --clr-control-icon-strong: #481f31; --clr-folder-text: #5f2e41; --clr-folder-count-text: #99707f; --clr-folder-icon: #d86b92;
}

[data-theme="rosewater"] {
  --clr-bg: #fff5f7; --clr-surface: #ffffff; --clr-surface-2: #feecf0; --clr-surface-3: #fadce4; --clr-border: rgba(150,82,105,0.10); --clr-border-soft: rgba(150,82,105,0.05);
  --clr-accent: #c96d8a; --clr-accent-glow: rgba(201,109,138,0.18); --clr-accent-2: #f2a7b8; --clr-accent-3: #8d6de8; --clr-accent-soft: rgba(201,109,138,0.11); --clr-accent-soft-2: rgba(201,109,138,0.07); --clr-focus-ring: rgba(201,109,138,0.21); --clr-selection-fill: rgba(201,109,138,0.17); --clr-accent-hover: #b75d7a;
  --clr-text: #442534; --clr-text-muted: #765c68; --clr-text-faint: #a48a95; --clr-brand-text-start: #5c3144; --clr-brand-text-end: #d98fa7; --clr-control-icon: #725665; --clr-control-icon-strong: #442534; --clr-folder-text: #583546; --clr-folder-count-text: #8f7480; --clr-folder-icon: #c96e8f;
}

[data-theme="peach"] {
  --clr-bg: #fff4ef; --clr-surface: #fffefc; --clr-surface-2: #ffeae1; --clr-surface-3: #ffdace; --clr-border: rgba(175,97,62,0.10); --clr-border-soft: rgba(175,97,62,0.05);
  --clr-accent: #e58a5f; --clr-accent-glow: rgba(229,138,95,0.18); --clr-accent-2: #ffb37d; --clr-accent-3: #dc5b73; --clr-accent-soft: rgba(229,138,95,0.12); --clr-accent-soft-2: rgba(229,138,95,0.07); --clr-focus-ring: rgba(229,138,95,0.22); --clr-selection-fill: rgba(229,138,95,0.18); --clr-accent-hover: #d87746;
  --clr-text: #44291f; --clr-text-muted: #7b5e52; --clr-text-faint: #ac8d7f; --clr-brand-text-start: #63392b; --clr-brand-text-end: #ec9d66; --clr-control-icon: #76574c; --clr-control-icon-strong: #44291f; --clr-folder-text: #5b372b; --clr-folder-count-text: #947568; --clr-folder-icon: #e98958;
}

[data-theme="marigold"] {
  --clr-bg: #fff8e8; --clr-surface: #fffef9; --clr-surface-2: #fff1cf; --clr-surface-3: #ffe4b2; --clr-border: rgba(163,119,20,0.10); --clr-border-soft: rgba(163,119,20,0.05);
  --clr-accent: #d99a1f; --clr-accent-glow: rgba(217,154,31,0.18); --clr-accent-2: #f0be42; --clr-accent-3: #d76a3d; --clr-accent-soft: rgba(217,154,31,0.12); --clr-accent-soft-2: rgba(217,154,31,0.07); --clr-focus-ring: rgba(217,154,31,0.22); --clr-selection-fill: rgba(217,154,31,0.18); --clr-accent-hover: #c28600;
  --clr-text: #3f2d0f; --clr-text-muted: #735f37; --clr-text-faint: #a28d61; --clr-brand-text-start: #5d430d; --clr-brand-text-end: #d9a52b; --clr-control-icon: #705a31; --clr-control-icon-strong: #3f2d0f; --clr-folder-text: #573f16; --clr-folder-count-text: #917b4d; --clr-folder-icon: #d99a1f;
}

[data-theme="sage"] {
  --clr-bg: #f2f6ee; --clr-surface: #ffffff; --clr-surface-2: #eaf1e4; --clr-surface-3: #dde8d3; --clr-border: rgba(75,112,76,0.10); --clr-border-soft: rgba(75,112,76,0.05);
  --clr-accent: #5c8f61; --clr-accent-glow: rgba(92,143,97,0.18); --clr-accent-2: #8cbc74; --clr-accent-3: #d3825f; --clr-accent-soft: rgba(92,143,97,0.11); --clr-accent-soft-2: rgba(92,143,97,0.07); --clr-focus-ring: rgba(92,143,97,0.22); --clr-selection-fill: rgba(92,143,97,0.18); --clr-accent-hover: #4c7c51;
  --clr-text: #213126; --clr-text-muted: #566a59; --clr-text-faint: #87998a; --clr-brand-text-start: #2d4933; --clr-brand-text-end: #78a567; --clr-control-icon: #526756; --clr-control-icon-strong: #213126; --clr-folder-text: #314936; --clr-folder-count-text: #718474; --clr-folder-icon: #6b9a62;
}

[data-theme="mint"] {
  --clr-bg: #eefaf5; --clr-surface: #ffffff; --clr-surface-2: #e2f5ee; --clr-surface-3: #d2ecdf; --clr-border: rgba(44,135,111,0.10); --clr-border-soft: rgba(44,135,111,0.05);
  --clr-accent: #22a37d; --clr-accent-glow: rgba(34,163,125,0.18); --clr-accent-2: #5bc9a4; --clr-accent-3: #3b82f6; --clr-accent-soft: rgba(34,163,125,0.11); --clr-accent-soft-2: rgba(34,163,125,0.07); --clr-focus-ring: rgba(34,163,125,0.22); --clr-selection-fill: rgba(34,163,125,0.18); --clr-accent-hover: #168d69;
  --clr-text: #14362d; --clr-text-muted: #4d7268; --clr-text-faint: #7ea39a; --clr-brand-text-start: #1a4d40; --clr-brand-text-end: #38b78e; --clr-control-icon: #486b61; --clr-control-icon-strong: #14362d; --clr-folder-text: #235044; --clr-folder-count-text: #67897f; --clr-folder-icon: #2eb18a;
}

[data-theme="meadow"] {
  --clr-bg: #f1f8ef; --clr-surface: #ffffff; --clr-surface-2: #e7f1e3; --clr-surface-3: #d9e8d2; --clr-border: rgba(68,126,82,0.10); --clr-border-soft: rgba(68,126,82,0.05);
  --clr-accent: #3f8b55; --clr-accent-glow: rgba(63,139,85,0.18); --clr-accent-2: #63b17b; --clr-accent-3: #e29a54; --clr-accent-soft: rgba(63,139,85,0.11); --clr-accent-soft-2: rgba(63,139,85,0.07); --clr-focus-ring: rgba(63,139,85,0.21); --clr-selection-fill: rgba(63,139,85,0.17); --clr-accent-hover: #337444;
  --clr-text: #1c3122; --clr-text-muted: #53695a; --clr-text-faint: #84978a; --clr-brand-text-start: #284532; --clr-brand-text-end: #58a36b; --clr-control-icon: #506655; --clr-control-icon-strong: #1c3122; --clr-folder-text: #2a4532; --clr-folder-count-text: #6d8274; --clr-folder-icon: #4a995e;
}

[data-theme="aqua"] {
  --clr-bg: #eefbfd; --clr-surface: #ffffff; --clr-surface-2: #e2f6f9; --clr-surface-3: #d1edf2; --clr-border: rgba(34,127,149,0.10); --clr-border-soft: rgba(34,127,149,0.05);
  --clr-accent: #1098b6; --clr-accent-glow: rgba(16,152,182,0.18); --clr-accent-2: #48c7d9; --clr-accent-3: #5b7cfa; --clr-accent-soft: rgba(16,152,182,0.11); --clr-accent-soft-2: rgba(16,152,182,0.07); --clr-focus-ring: rgba(16,152,182,0.22); --clr-selection-fill: rgba(16,152,182,0.18); --clr-accent-hover: #0b83a0;
  --clr-text: #173740; --clr-text-muted: #4f7178; --clr-text-faint: #81a1a8; --clr-brand-text-start: #1a4d58; --clr-brand-text-end: #1ab7cb; --clr-control-icon: #4b6970; --clr-control-icon-strong: #173740; --clr-folder-text: #24505b; --clr-folder-count-text: #688991; --clr-folder-icon: #189db6;
}

[data-theme="sky"] {
  --clr-bg: #edf6ff; --clr-surface: #ffffff; --clr-surface-2: #e2efff; --clr-surface-3: #d1e3fa; --clr-border: rgba(54,112,187,0.10); --clr-border-soft: rgba(54,112,187,0.05);
  --clr-accent: #3678d4; --clr-accent-glow: rgba(54,120,212,0.18); --clr-accent-2: #61a9ff; --clr-accent-3: #ff8d6b; --clr-accent-soft: rgba(54,120,212,0.11); --clr-accent-soft-2: rgba(54,120,212,0.07); --clr-focus-ring: rgba(54,120,212,0.22); --clr-selection-fill: rgba(54,120,212,0.18); --clr-accent-hover: #2463c0;
  --clr-text: #173154; --clr-text-muted: #536f92; --clr-text-faint: #869db8; --clr-brand-text-start: #1d4070; --clr-brand-text-end: #429ee8; --clr-control-icon: #4f698a; --clr-control-icon-strong: #173154; --clr-folder-text: #25466f; --clr-folder-count-text: #6f86a9; --clr-folder-icon: #387dd8;
}

[data-theme="glacier"] {
  --clr-bg: #f2f8fd; --clr-surface: #ffffff; --clr-surface-2: #e9f2fb; --clr-surface-3: #dce8f5; --clr-border: rgba(67,120,163,0.10); --clr-border-soft: rgba(67,120,163,0.05);
  --clr-accent: #5b8fc2; --clr-accent-glow: rgba(91,143,194,0.18); --clr-accent-2: #8bc5e8; --clr-accent-3: #6d82e4; --clr-accent-soft: rgba(91,143,194,0.11); --clr-accent-soft-2: rgba(91,143,194,0.07); --clr-focus-ring: rgba(91,143,194,0.22); --clr-selection-fill: rgba(91,143,194,0.18); --clr-accent-hover: #497caf;
  --clr-text: #1a3347; --clr-text-muted: #587185; --clr-text-faint: #89a0b2; --clr-brand-text-start: #28485f; --clr-brand-text-end: #75afdb; --clr-control-icon: #536b7e; --clr-control-icon-strong: #1a3347; --clr-folder-text: #28465d; --clr-folder-count-text: #71889a; --clr-folder-icon: #6498ca;
}

[data-theme="lagoon"] {
  --clr-bg: #edf8f8; --clr-surface: #ffffff; --clr-surface-2: #e0f1f2; --clr-surface-3: #cfe6e8; --clr-border: rgba(41,117,127,0.10); --clr-border-soft: rgba(41,117,127,0.05);
  --clr-accent: #0f8d98; --clr-accent-glow: rgba(15,141,152,0.18); --clr-accent-2: #4fb8c5; --clr-accent-3: #4f73dd; --clr-accent-soft: rgba(15,141,152,0.11); --clr-accent-soft-2: rgba(15,141,152,0.07); --clr-focus-ring: rgba(15,141,152,0.22); --clr-selection-fill: rgba(15,141,152,0.18); --clr-accent-hover: #087680;
  --clr-text: #17343a; --clr-text-muted: #4d6f75; --clr-text-faint: #7e9fa4; --clr-brand-text-start: #18474f; --clr-brand-text-end: #13a8b7; --clr-control-icon: #48686d; --clr-control-icon-strong: #17343a; --clr-folder-text: #235057; --clr-folder-count-text: #66868b; --clr-folder-icon: #1296a2;
}

[data-theme="lilac"] {
  --clr-bg: #f6f2ff; --clr-surface: #ffffff; --clr-surface-2: #eee7fb; --clr-surface-3: #e1d7f5; --clr-border: rgba(110,86,171,0.10); --clr-border-soft: rgba(110,86,171,0.05);
  --clr-accent: #8a68d9; --clr-accent-glow: rgba(138,104,217,0.18); --clr-accent-2: #bb9dff; --clr-accent-3: #f28eb2; --clr-accent-soft: rgba(138,104,217,0.11); --clr-accent-soft-2: rgba(138,104,217,0.07); --clr-focus-ring: rgba(138,104,217,0.22); --clr-selection-fill: rgba(138,104,217,0.18); --clr-accent-hover: #7754c9;
  --clr-text: #2f2447; --clr-text-muted: #675b84; --clr-text-faint: #978cb2; --clr-brand-text-start: #49346c; --clr-brand-text-end: #a27ce8; --clr-control-icon: #625979; --clr-control-icon-strong: #2f2447; --clr-folder-text: #43355f; --clr-folder-count-text: #81769a; --clr-folder-icon: #906fe0;
}

[data-theme="iris"] {
  --clr-bg: #f4f2ff; --clr-surface: #ffffff; --clr-surface-2: #ebe8ff; --clr-surface-3: #ddd8fa; --clr-border: rgba(92,98,191,0.10); --clr-border-soft: rgba(92,98,191,0.05);
  --clr-accent: #5f66db; --clr-accent-glow: rgba(95,102,219,0.18); --clr-accent-2: #8b92ff; --clr-accent-3: #dd76c5; --clr-accent-soft: rgba(95,102,219,0.11); --clr-accent-soft-2: rgba(95,102,219,0.07); --clr-focus-ring: rgba(95,102,219,0.22); --clr-selection-fill: rgba(95,102,219,0.18); --clr-accent-hover: #4e55c7;
  --clr-text: #26294d; --clr-text-muted: #5c6287; --clr-text-faint: #8c92b6; --clr-brand-text-start: #30386c; --clr-brand-text-end: #6f8be8; --clr-control-icon: #585f7d; --clr-control-icon-strong: #26294d; --clr-folder-text: #363e62; --clr-folder-count-text: #767da0; --clr-folder-icon: #6273dd;
}

[data-theme="petal"] {
  --clr-bg: #fff2fb; --clr-surface: #ffffff; --clr-surface-2: #fae6f4; --clr-surface-3: #f2d5eb; --clr-border: rgba(170,67,143,0.10); --clr-border-soft: rgba(170,67,143,0.05);
  --clr-accent: #cc4ea2; --clr-accent-glow: rgba(204,78,162,0.18); --clr-accent-2: #f08acb; --clr-accent-3: #7a70e8; --clr-accent-soft: rgba(204,78,162,0.11); --clr-accent-soft-2: rgba(204,78,162,0.07); --clr-focus-ring: rgba(204,78,162,0.22); --clr-selection-fill: rgba(204,78,162,0.18); --clr-accent-hover: #b83a8e;
  --clr-text: #401f37; --clr-text-muted: #74596d; --clr-text-faint: #a6889e; --clr-brand-text-start: #5d2b50; --clr-brand-text-end: #d66bb5; --clr-control-icon: #705565; --clr-control-icon-strong: #401f37; --clr-folder-text: #553248; --clr-folder-count-text: #8e7183; --clr-folder-icon: #ce58a6;
}

/* ── Theme Transition ─────────────────────────────────────────── */
html.theme-transitioning {
  transition:
    background-color 0.22s ease,
    color 0.22s ease;
}

html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-property: background-color, border-color, color, box-shadow, outline-color;
  transition-duration: 0.22s;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition: none !important;
  }
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: var(--ui-font-size);
  background: var(--clr-bg);
  color: var(--clr-text);
  -webkit-font-smoothing: antialiased;
}

input, textarea, button, select {
  font-family: var(--ui-font);
  font-size: inherit;
}
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--clr-surface-3); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-text-faint); }

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */

body {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-current-w);
  min-width: var(--sidebar-current-w);
  height: 100vh;
  background: var(--clr-surface);
  border-right: 1px solid var(--clr-border);
  display: flex;
  flex-direction: column;
  transition: width 0.28s var(--ease-out), min-width 0.28s var(--ease-out),
              transform 0.28s var(--ease-out);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 100;
}

.sidebar.file-drop-active {
  border-right-color: var(--clr-accent);
  box-shadow: inset 0 0 0 1px var(--clr-accent-soft);
}

.sidebar.collapsed {
  width: 0;
  min-width: 0;
  border-right-color: transparent;
}

.sidebar-resizer {
  width: 5px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--clr-border-soft);
  position: relative;
  z-index: 110;
  transition: background 0.15s, width 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.sidebar-resizer:hover,
.sidebar-resizer.active {
  background: var(--clr-accent);
}

.sidebar-resizer::after {
  content: '';
  position: absolute;
  inset: 0 -4px;
  background: transparent;
}

.sidebar.collapsed + .sidebar-resizer {
  width: 0;
  opacity: 0;
  pointer-events: none;
}

body.sidebar-resizing {
  cursor: col-resize;
  user-select: none;
}

/* ── Sidebar Header ─────────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  height: var(--sidebar-header-h);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
  overflow: hidden;
  min-width: 0;
}

.sidebar-toggle-btn {
  flex-shrink: 0;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--clr-accent-glow);
  overflow: hidden;
}

.brand-icon-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.brand-name {
  font-size: var(--font-ui-xl);
  font-weight: 700;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--clr-brand-text-start) 30%, var(--clr-brand-text-end) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-description {
  margin-top: 1px;
  font-size: var(--font-ui-xs);
  line-height: 1.2;
  color: var(--clr-folder-count-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sidebar Actions ─────────────────────────────────────────── */
.sidebar-actions {
  padding: 12px 12px 8px;
  flex-shrink: 0;
}

.sidebar-action-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.sidebar-action-btn {
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 0;
  height: 36px;
  color: var(--clr-control-icon);
}

.sidebar-action-btn svg {
  flex-shrink: 0;
}

.search-wrap {
  position: relative;
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-control-icon);
  pointer-events: none;
}

#searchInput {
  width: 100%;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  padding: 7px 34px 7px 30px;
  font-size: var(--font-ui-base);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

#searchInput::placeholder { color: var(--clr-folder-count-text); }
#searchInput:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-glow);
}

.search-clear-btn {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--clr-control-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.search-clear-btn:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

.search-clear-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
}

/* ── Notes List Label ─────────────────────────────────────────── */
.notes-list-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 4px;
  font-size: var(--font-ui-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--clr-folder-count-text);
  flex-shrink: 0;
}

.notes-list-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notes-count {
  background: var(--clr-surface-3);
  border-radius: 99px;
  padding: 1px 7px;
  font-size: var(--font-ui-xs);
  font-weight: 600;
  color: var(--clr-folder-count-text);
}

.tree-toggle-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 7px;
  color: var(--clr-control-icon);
}

.tree-toggle-btn:hover:not(:disabled),
.tree-toggle-btn.active {
  color: var(--clr-text);
  background: var(--clr-surface-2);
}

.tree-toggle-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Notes List ───────────────────────────────────────────────── */
.notes-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.notes-list.file-drag-over {
  background:
    linear-gradient(180deg, var(--clr-accent-soft), transparent 22%),
    linear-gradient(180deg, transparent, var(--clr-accent-soft-2));
}

.folder-node {
  display: block;
  min-width: 0;
}

.folder-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.folder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-left: calc(10px + var(--tree-depth, 0) * var(--sidebar-tree-indent));
  border-radius: var(--radius-sm);
  color: var(--clr-folder-text);
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.folder-row[draggable="true"] {
  cursor: grab;
}

.folder-row.dragging {
  opacity: 0.35;
}

.folder-row:hover {
  background: var(--clr-surface-2);
  color: var(--clr-text);
}

.folder-row.selected {
  background: transparent;
  color: var(--clr-selected-emphasis);
  box-shadow: none;
}

.folder-row.selected .folder-title {
  font-weight: 800;
  color: var(--clr-selected-emphasis);
  font-size: var(--sidebar-folder-active-font-size);
}

.folder-row.selected .folder-icon {
  color: var(--clr-selected-emphasis);
  transform: scale(1.2);
  transform-origin: center;
}

.folder-row.selected .folder-icon svg {
  stroke-width: 2.4;
}

.folder-row.selected .folder-count {
  color: var(--clr-selected-emphasis);
  background: transparent;
  font-weight: 700;
}

.folder-row.drag-over {
  background: var(--clr-accent-soft-2);
  outline: 1px dashed var(--clr-accent);
  outline-offset: -2px;
}

.root-folder-row {
  margin-bottom: 2px;
  border-bottom: 1px solid var(--clr-border-soft);
}

.folder-toggle {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.folder-toggle:hover {
  background: var(--clr-surface-3);
}

.folder-toggle.placeholder {
  visibility: hidden;
  pointer-events: none;
}

.folder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-folder-icon);
  flex-shrink: 0;
}

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

.folder-count {
  font-size: var(--font-ui-xs);
  color: var(--clr-folder-count-text);
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--clr-surface-3);
  flex-shrink: 0;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-left: calc(34px + var(--tree-depth, 0) * var(--sidebar-tree-indent));
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.note-item:hover { background: var(--clr-surface-2); }
.note-item.active {
  background: transparent;
  color: var(--clr-selected-emphasis);
}

.note-item.active .note-title {
  font-weight: 700;
  color: var(--clr-selected-emphasis);
  font-size: var(--sidebar-file-active-font-size);
}

.note-item.active .note-icon {
  color: var(--clr-selected-emphasis);
  transform: scale(1.2);
  transform-origin: center;
}

.note-item.active .note-icon svg {
  stroke-width: 2.4;
}

.note-item.active .note-meta {
  color: var(--clr-selected-emphasis);
  font-weight: 600;
}

.note-item.active .note-word-count {
  color: var(--clr-selected-emphasis);
  font-weight: 700;
}

.note-item[draggable="true"] { cursor: grab; }
.note-item.dragging { opacity: 0.35; }

.note-icon {
  flex-shrink: 0;
  color: var(--clr-folder-count-text);
  transition: color 0.15s;
}

.note-title {
  flex: 1;
  min-width: 0;
  font-size: var(--sidebar-file-font-size);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-meta {
  font-size: var(--font-ui-xs);
  color: var(--clr-folder-count-text);
  flex-shrink: 0;
}

.note-word-count {
  min-width: 42px;
  flex-shrink: 0;
  text-align: right;
  font-size: var(--font-ui-xs);
  font-variant-numeric: tabular-nums;
  color: var(--clr-folder-count-text);
}

.note-modified-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-accent);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.note-modified-dot.visible { opacity: 1; }

.notes-empty-state {
  color: var(--clr-folder-count-text);
  font-size: var(--font-ui-md);
  padding: 10px 12px 10px 24px;
}

/* ── Sidebar Footer ───────────────────────────────────────────── */
.sidebar-footer {
  border-top: 1px solid var(--clr-border);
  padding: 10px 16px;
  flex-shrink: 0;
}

.sidebar-footer-info {
  font-size: var(--font-ui-sm);
  color: var(--clr-folder-count-text);
}

/* ══════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ══════════════════════════════════════════════════════════════ */

.main-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--topbar-gap);
  padding: 0 var(--topbar-padding-x);
  border-bottom: 1px solid var(--clr-border);
  background: var(--clr-surface);
  flex-shrink: 0;
  backdrop-filter: blur(12px);
  z-index: 90;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--topbar-gap);
  min-width: 0;
  flex: 1;
}

.topbar-title {
  font-size: var(--font-ui-lg);
  font-weight: 500;
  color: var(--clr-control-icon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  flex-shrink: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: max(4px, calc(var(--topbar-gap) - 4px));
  flex-shrink: 0;
}

/* ── View Mode Switcher ───────────────────────────────────────── */
.view-controls {
  display: flex;
  align-items: center;
  gap: max(6px, calc(var(--topbar-gap) - 2px));
  min-width: 0;
}

.view-mode-switcher {
  display: flex;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.layout-mode-switcher {
  display: flex;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.view-mode-btn,
.layout-mode-btn {
  width: var(--topbar-segment-btn-width);
  height: var(--topbar-segment-btn-height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: var(--clr-control-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-mode-btn {
  font-size: var(--font-ui-md);
  font-weight: 700;
}

.view-mode-btn:hover,
.layout-mode-btn:hover {
  background: var(--clr-surface-3);
  color: var(--clr-text);
}

.view-mode-btn.active,
.layout-mode-btn.active {
  background: transparent;
  color: var(--clr-text);
  box-shadow: none;
}

.view-mode-btn.active {
  font-weight: 800;
}

.layout-mode-btn.active svg {
  stroke-width: 2.5;
}

.layout-mode-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.layout-mode-btn:disabled:hover {
  background: transparent;
  color: var(--clr-text-faint);
}

.pane-count-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: var(--topbar-pill-height);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
  color: var(--clr-control-icon);
}

.pane-count-control span {
  font-size: var(--font-ui-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#viewModeCount {
  width: 58px;
  border: 1px solid var(--clr-border);
  border-radius: 5px;
  background: var(--clr-surface);
  color: var(--clr-text);
  padding: 4px 6px;
  font-size: var(--font-ui-md);
  font-weight: 600;
  text-align: center;
  outline: none;
}

#viewModeCount:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-glow);
}

/* ── Auto-save indicator ──────────────────────────────────────── */
.autosave-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--font-ui-sm);
  color: var(--clr-control-icon);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
  transition: color 0.3s;
}

.autosave-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clr-success);
  transition: background 0.3s;
}

.autosave-indicator.saving { color: var(--clr-warning); }
.autosave-indicator.saving .autosave-dot { background: var(--clr-warning); animation: pulse 0.8s infinite; }
.autosave-indicator.saved  { color: var(--clr-success); }
.autosave-indicator.saved  .autosave-dot { background: var(--clr-success); }
.autosave-indicator.error  { color: var(--clr-danger); }
.autosave-indicator.error  .autosave-dot { background: var(--clr-danger); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ══════════════════════════════════════════════════════════════
   EDITOR AREA
   ══════════════════════════════════════════════════════════════ */

.editor-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  background: var(--clr-bg);
}

.editor-area.layout-vertical {
  flex-direction: row;
}

.editor-area.layout-horizontal {
  flex-direction: column;
}

.pane-row {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

/* Empty state */
.empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--clr-control-icon);
  pointer-events: none;
}

.empty-state.hidden { display: none; }

.empty-state-icon {
  color: var(--clr-text-faint);
  opacity: 0.4;
}

.empty-state h2 { font-size: var(--font-ui-display); font-weight: 600; color: var(--clr-text-muted); }
.empty-state p { font-size: var(--font-ui-base); color: var(--clr-text-faint); }
.empty-state .btn-primary { pointer-events: all; margin-top: 4px; }

/* ── Pane ─────────────────────────────────────────────────────── */
.pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  container-type: inline-size;
  overflow: hidden;
  position: relative;
  background: var(--clr-bg);
  transition: outline 0.15s;
}

.pane.focused { outline: 1px solid var(--clr-focus-ring); outline-offset: -1px; }

/* Drag-over highlight */
.pane.drag-over {
  background: var(--clr-accent-soft-2);
  outline: 2px dashed var(--clr-accent);
  outline-offset: -3px;
}

/* ── Pane Tab Bar ─────────────────────────────────────────────── */
.pane-header {
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.pane-tabbar,
.pane-toolbar {
  display: flex;
  align-items: center;
  min-width: 0;
}

.pane-tabbar {
  padding: 2px 8px 0;
  gap: 8px;
}

.pane-tabbar.tab-drag-over {
  background: var(--clr-accent-soft-2);
  box-shadow: inset 0 -2px 0 var(--clr-accent);
}

.pane-toolbar {
  min-height: var(--pane-toolbar-h);
  padding: 0 var(--pane-toolbar-padding-x) var(--pane-toolbar-padding-bottom);
  gap: var(--pane-toolbar-gap);
}

.pane-tabs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.pane-tabs::-webkit-scrollbar {
  display: none;
}

.pane-tabs-empty {
  font-size: var(--font-ui-sm);
  font-weight: 600;
  color: var(--clr-control-icon);
  padding-left: 2px;
  white-space: nowrap;
}

.pane-tab-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, calc(var(--topbar-control-size) - 4px), 28px);
  height: clamp(24px, calc(var(--topbar-control-size) - 4px), 28px);
  margin-left: clamp(1px, calc(var(--pane-toolbar-action-gap) + 1px), 4px);
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--clr-surface-2);
  color: var(--clr-control-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.pane-tab-add-btn svg {
  width: clamp(12px, calc(var(--pane-toolbar-control-size) - 4px), 15px);
  height: clamp(12px, calc(var(--pane-toolbar-control-size) - 4px), 15px);
  display: block;
}

.pane-tab-add-btn:hover {
  background: var(--clr-surface-3);
  color: var(--clr-control-icon-strong);
  border-color: var(--clr-border);
}

.pane-tab-add-btn:focus-visible {
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px var(--clr-accent-soft-2);
}

.pane-tab-add-btn:active {
  transform: translateY(1px);
}

.pane-tab {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 220px;
  min-width: 0;
  border: 1px solid var(--clr-border);
  border-radius: 8px 8px 0 0;
  background: var(--clr-surface-2);
  color: var(--clr-control-icon);
  cursor: grab;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pane-tab:hover {
  background: var(--clr-surface-3);
  color: var(--clr-control-icon-strong);
}

.pane-tab.dragging {
  opacity: 0.42;
  cursor: grabbing;
}

.pane-tab.drop-before {
  box-shadow: inset 2px 0 0 var(--clr-accent);
}

.pane-tab.drop-after {
  box-shadow: inset -2px 0 0 var(--clr-accent);
}

.pane-tab.active {
  background: var(--clr-bg);
  color: var(--clr-text);
  border-color: var(--clr-border);
  border-bottom-color: var(--clr-bg);
}

.pane-tab.pinned:not(.active) {
  box-shadow: inset 0 0 0 1px var(--clr-accent-soft-2);
}

.pane-tab-button,
.pane-tab-close-btn {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pane-tab-button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 10px;
  color: inherit;
  line-height: 1.1;
}

.pane-tab-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent);
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.15s, width 0.15s;
  flex-shrink: 0;
}

.pane-tab.pinned .pane-tab-pin {
  opacity: 1;
  width: 11px;
}

.pane-tab-close-btn {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-right: 3px;
}

.pane-tab-close-btn:hover {
  background: var(--clr-surface);
  color: var(--clr-text);
}

.pane-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-ui-sm);
  font-weight: 600;
}

.pane-tab-dirty-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--clr-accent);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.pane-tab.dirty .pane-tab-dirty-dot {
  opacity: 1;
  transform: scale(1);
}

.pane-title {
  flex: 1;
  font-size: var(--font-ui-sm);
  font-weight: 600;
  color: var(--clr-control-icon);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.pane-actions {
  display: flex;
  align-items: center;
  gap: var(--pane-toolbar-action-gap);
  flex-shrink: 1;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.pane-actions::-webkit-scrollbar {
  display: none;
}

.pane-list-trigger {
  width: var(--pane-toolbar-control-size);
  height: var(--pane-toolbar-control-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--clr-control-icon);
  background: transparent;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

.pane-list-trigger:hover {
  background: var(--clr-surface);
  color: var(--clr-text);
}

.pane-list-trigger:focus-within {
  background: var(--clr-surface);
  color: var(--clr-text);
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
}

.pane-list-trigger.is-disabled {
  opacity: 0.4;
}

.pane-list-trigger.is-disabled:hover {
  background: transparent;
  color: var(--clr-control-icon);
}

.pane-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pane-list-icon svg {
  width: clamp(11px, calc(var(--pane-toolbar-control-size) - 5px), 18px);
  height: clamp(11px, calc(var(--pane-toolbar-control-size) - 5px), 18px);
  display: block;
}

.pane-list-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.pane-list-select:disabled {
  cursor: not-allowed;
}

.pane-action-group {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0;
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  background: var(--clr-surface-2);
  flex-shrink: 0;
}

.pane-font-controls {
  gap: 2px;
  padding-inline: 2px;
}

.pane-font-size-label {
  min-width: 30px;
  text-align: center;
  font-size: var(--pane-toolbar-label-size);
  font-weight: 700;
  color: var(--clr-control-icon);
  font-variant-numeric: tabular-nums;
}

.pane-icon-btn,
.pane-download-btn {
  width: var(--pane-toolbar-control-size);
  height: var(--pane-toolbar-control-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--clr-control-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.pane-close-btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--clr-control-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.pane-icon-btn:hover { background: var(--clr-surface); color: var(--clr-text); }
.pane-download-btn:hover { background: var(--clr-surface-2); color: var(--clr-text); }
.pane-close-btn:hover { background: var(--clr-danger-bg); color: var(--clr-danger); }
.pane-icon-btn.active {
  background: var(--clr-accent-soft);
  color: var(--clr-accent-2);
}

.pane-icon-btn svg,
.pane-download-btn svg {
  width: clamp(11px, calc(var(--pane-toolbar-control-size) - 5px), 18px);
  height: clamp(11px, calc(var(--pane-toolbar-control-size) - 5px), 18px);
  display: block;
}

.pane-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.topbar-icon-action {
  display: inline-flex;
  align-items: center;
  width: var(--topbar-control-size);
  height: var(--topbar-control-size);
  padding: 0;
  gap: 0;
  justify-content: center;
  font-size: 0;
}

.topbar-icon-action svg {
  width: var(--topbar-control-icon-size);
  height: var(--topbar-control-icon-size);
  display: block;
  flex-shrink: 0;
  vector-effect: non-scaling-stroke;
}

.pane-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pane-download-btn:disabled,
.pane-tab-button:disabled,
.pane-tab-close-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pane-icon-btn:disabled:hover {
  background: transparent;
  color: var(--clr-control-icon);
}

.emoji-picker {
  position: fixed;
  z-index: 1200;
  width: min(420px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--clr-surface), var(--clr-surface-2));
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.emoji-picker-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.emoji-picker-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.emoji-picker-title {
  font-size: var(--font-ui-lg);
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: 0.01em;
}

.emoji-picker-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.emoji-picker-search {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px 0 38px;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background: var(--clr-surface-2);
}

.emoji-picker-search:focus-within {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
}

.emoji-picker-search-icon {
  position: absolute;
  left: 14px;
  color: var(--clr-text-muted);
}

.emoji-picker-search input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--clr-text);
  font-size: var(--font-ui-base);
  outline: none;
}

.emoji-picker-search input::placeholder {
  color: var(--clr-text-muted);
}

.emoji-picker-clear {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--clr-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.emoji-picker-clear:hover {
  background: var(--clr-surface);
  color: var(--clr-text);
}

.emoji-picker-categories {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  flex: 0 0 auto;
}

.emoji-picker-categories::-webkit-scrollbar,
.emoji-picker-content::-webkit-scrollbar {
  display: none;
}

.emoji-picker-category-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-border);
  border-radius: 999px;
  background: var(--clr-surface-2);
  color: var(--clr-text);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}

.emoji-picker-category-btn:hover {
  transform: translateY(-1px);
  background: var(--clr-surface);
}

.emoji-picker-category-btn.active {
  border-color: var(--clr-accent);
  background: var(--clr-accent-soft);
  box-shadow: 0 0 0 1px var(--clr-accent-soft);
}

.emoji-picker-category-icon {
  font-size: 16px;
  line-height: 1;
}

.emoji-picker-content {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  flex: 1 1 auto;
}

.emoji-picker-section + .emoji-picker-section {
  margin-top: 16px;
}

.emoji-picker-section-featured .emoji-picker-section-title {
  color: var(--clr-accent-2);
}

.emoji-picker-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.emoji-picker-section-title {
  font-size: var(--font-ui-sm);
  font-weight: 700;
  color: var(--clr-text);
}

.emoji-picker-section-count,
.emoji-picker-meta {
  font-size: var(--font-ui-xs);
  color: var(--clr-text-muted);
}

.emoji-picker-section-empty {
  padding: 12px 14px;
  border: 1px dashed var(--clr-border);
  border-radius: 12px;
  background: var(--clr-surface-2);
  color: var(--clr-text-muted);
  font-size: var(--font-ui-sm);
}

.emoji-picker-meta {
  flex-shrink: 0;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 8px;
}

.emoji-picker-emoji-btn {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.emoji-picker-emoji-btn:hover,
.emoji-picker-emoji-btn:focus-visible {
  transform: translateY(-1px) scale(1.04);
  border-color: var(--clr-border);
  background: var(--clr-surface-2);
  outline: none;
}

.divider-picker,
.timestamp-picker,
.text-tool-picker {
  position: fixed;
  z-index: 1200;
  width: min(460px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--clr-surface), var(--clr-surface-2));
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.divider-picker-header,
.timestamp-picker-header,
.text-tool-picker-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.divider-picker-title-row,
.timestamp-picker-title-row,
.text-tool-picker-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.divider-picker-title,
.timestamp-picker-title,
.text-tool-picker-title {
  font-size: var(--font-ui-lg);
  font-weight: 700;
  color: var(--clr-text);
  letter-spacing: 0.01em;
}

.divider-picker-subtitle,
.timestamp-picker-subtitle,
.text-tool-picker-subtitle {
  margin: 0;
  font-size: var(--font-ui-sm);
  color: var(--clr-text-muted);
}

.divider-picker-close,
.timestamp-picker-close,
.text-tool-picker-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.divider-picker-content,
.timestamp-picker-content,
.text-tool-picker-content {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: none;
}

.divider-picker-content::-webkit-scrollbar {
  display: none;
}

.timestamp-picker-content::-webkit-scrollbar {
  display: none;
}

.text-tool-picker-content::-webkit-scrollbar {
  display: none;
}

.divider-picker-option,
.timestamp-picker-option,
.text-tool-picker-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--clr-surface-2), var(--clr-surface));
  color: var(--clr-text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.divider-picker-option:hover,
.divider-picker-option:focus-visible,
.timestamp-picker-option:hover,
.timestamp-picker-option:focus-visible,
.text-tool-picker-option:hover,
.text-tool-picker-option:focus-visible {
  transform: translateY(-1px);
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-soft);
  outline: none;
}

.divider-picker-option-label,
.timestamp-picker-option-label,
.text-tool-picker-option-label {
  font-size: var(--font-ui-xs);
  font-weight: 700;
  color: var(--clr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.divider-picker-option-preview,
.timestamp-picker-option-preview,
.text-tool-picker-option-preview {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--pane-font);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.divider-picker-meta,
.timestamp-picker-meta,
.text-tool-picker-meta {
  flex-shrink: 0;
  font-size: var(--font-ui-xs);
  color: var(--clr-text-muted);
}

.emoji-picker-empty {
  padding: 26px 12px;
  text-align: center;
  color: var(--clr-text-muted);
  font-size: var(--font-ui-base);
}

.pane-download-btn:disabled:hover,
.pane-tab-button:disabled:hover,
.pane-tab-close-btn:disabled:hover {
  background: transparent;
  color: inherit;
}

@container (max-width: 760px) {
  .pane-title {
    display: none;
  }
}

@container (max-width: 680px) {
  .pane-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    padding-top: 2px;
    padding-bottom: 4px;
  }

  .pane-actions {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }
}

@container (max-width: 520px) {
  .pane-toolbar {
    gap: 3px 4px;
    padding-inline: 6px;
  }

  .pane-actions {
    gap: 1px;
  }

  .pane-action-group {
    flex-wrap: wrap;
  }

  .pane-font-size-label {
    min-width: 24px;
    font-size: var(--font-ui-2xs);
  }
}

@media (max-width: 900px) {
  .pane-tabbar {
    gap: 6px;
  }

  .pane-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    padding-top: 2px;
    padding-bottom: 4px;
  }

  .pane-tab {
    max-width: 160px;
  }

  .pane-title {
    flex-basis: 100%;
  }

  .pane-actions {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
  }

  .pane-font-size-label {
    min-width: 24px;
    font-size: var(--font-ui-2xs);
  }
}

.pane-drop-indicator {
  font-size: var(--font-ui-sm);
  color: var(--clr-control-icon);
  padding: 4px 8px;
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ── Textarea ─────────────────────────────────────────────────── */
.pane-editor-shell {
  flex: 1;
  min-height: 0;
  position: relative;
}

.pane-editor {
  display: block;
  width: 100%;
  height: 100%;
  resize: none;
  background: var(--clr-bg);
  color: var(--clr-text);
  border: none;
  outline: none;
  padding: 18px 22px;
  font-family: var(--pane-font);
  font-size: 14px;
  line-height: 1.7;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-y: auto;
  caret-color: var(--clr-accent);
  scrollbar-width: auto;
  scrollbar-color: var(--clr-surface-3) transparent;
}

.pane-editor-nowrap {
  white-space: pre;
  overflow-x: auto;
  overflow-wrap: normal;
}

.pane-editor::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.pane-editor::-webkit-scrollbar-track {
  background: transparent;
}

.pane-editor::-webkit-scrollbar-thumb {
  background: var(--clr-surface-3);
  border-radius: 99px;
}

.pane-editor::-webkit-scrollbar-thumb:hover {
  background: var(--clr-text-faint);
}

.pane-editor::selection { background: var(--clr-selection-fill); }

.pane-editor-multi-cursor-active {
  caret-color: transparent;
}

.multi-cursor-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.multi-cursor-caret {
  position: absolute;
  width: 1px;
  background: var(--clr-accent);
  animation: multiCursorBlink 1s step-end infinite;
}

.multi-cursor-selection {
  position: absolute;
  background: var(--clr-selection-fill);
}

@keyframes multiCursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── Pane Status Bar ──────────────────────────────────────────── */
.pane-statusbar {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: var(--font-ui-xs);
  color: var(--clr-text-faint);
  background: var(--clr-surface);
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
}

.pane-statusbar-left { display: flex; align-items: center; gap: 10px; }
.pane-statusbar-right { display: flex; align-items: center; gap: 10px; }

/* ── Resizer ──────────────────────────────────────────────────── */
.resizer {
  flex-shrink: 0;
  background: var(--clr-border-soft);
  transition: background 0.15s;
  position: relative;
  z-index: 10;
}

.resizer.vertical {
  width: 5px;
  cursor: col-resize;
}

.resizer.horizontal {
  height: 5px;
  cursor: row-resize;
  width: 100%;
}

.resizer:hover,
.resizer.active {
  background: var(--clr-accent);
}

.resizer::after {
  content: '';
  position: absolute;
  background: transparent;
}
.resizer.vertical::after   { inset: 0 -4px; }
.resizer.horizontal::after { inset: -4px 0; }

/* ── Layout Modes ─────────────────────────────────────────────── */
.editor-area.layout-grid {
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--clr-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-ui-base);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.btn-primary:hover {
  background: var(--clr-accent-hover);
  box-shadow: 0 4px 20px var(--clr-accent-glow);
}

.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled,
.btn-ghost:disabled {
  opacity: 0.6;
  cursor: wait;
  box-shadow: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--clr-surface-2);
  color: var(--clr-control-icon);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-ui-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-ghost:hover { background: var(--clr-surface-3); color: var(--clr-text); border-color: var(--clr-button-hover-border); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--clr-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--font-ui-base);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-danger:hover {
  background: var(--clr-danger-hover);
  box-shadow: var(--shadow-danger);
}

.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--clr-control-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.topbar .icon-btn {
  width: var(--topbar-control-size);
  height: var(--topbar-control-size);
}

.topbar .icon-btn svg {
  width: var(--topbar-control-icon-size);
  height: var(--topbar-control-icon-size);
}

.icon-btn:hover { background: var(--clr-surface-2); color: var(--clr-control-icon-strong); }

/* ── Theme Toggle Button ──────────────────────────────────────── */
#fullscreenToggle,
#themeToggle {
  position: relative;
  overflow: hidden;
}

#fullscreenToggle .fullscreen-icon-enter,
#fullscreenToggle .fullscreen-icon-exit,
#themeToggle .theme-icon-dark,
#themeToggle .theme-icon-light {
  position: absolute;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  transform-origin: center;
  transition: opacity 0.2s, transform 0.25s var(--ease-spring);
}

#fullscreenToggle .fullscreen-icon-exit {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

#themeToggle .theme-icon-light {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

[data-fullscreen="true"] #fullscreenToggle .fullscreen-icon-enter {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

[data-fullscreen="true"] #fullscreenToggle .fullscreen-icon-exit {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

[data-theme-scheme="light"] #themeToggle .theme-icon-dark {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

[data-theme-scheme="light"] #themeToggle .theme-icon-light {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ══════════════════════════════════════════════════════════════
   CONTEXT MENU
   ══════════════════════════════════════════════════════════════ */

.context-menu {
  position: fixed;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating), 0 0 0 1px var(--clr-border);
  min-width: 160px;
  z-index: 9999;
  overflow: hidden;
  backdrop-filter: blur(10px);
  animation: ctxFadeIn 0.12s var(--ease-out);
}

@keyframes ctxFadeIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.context-menu.hidden { display: none; }

.ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: var(--font-ui-base);
  color: var(--clr-text);
  cursor: pointer;
  transition: background 0.1s;
}

.ctx-item:hover { background: var(--clr-surface-3); }
.ctx-item.disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}
.ctx-item.disabled:hover { background: transparent; }
.ctx-item.danger { color: var(--clr-danger); }
.ctx-item.danger:hover { background: var(--clr-danger-bg); }
.ctx-item.hidden { display: none; }
.ctx-separator {
  height: 1px;
  margin: 4px 10px;
  background: var(--clr-border);
}
.ctx-separator.hidden { display: none; }

/* ══════════════════════════════════════════════════════════════
   CUSTOM TOOLTIP
   ══════════════════════════════════════════════════════════════ */

.app-tooltip {
  --tooltip-anchor: 50%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100000;
  max-width: min(280px, calc(100vw - 24px));
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(108,99,255,0.18), rgba(0,217,255,0.08)),
    rgba(13,15,26,0.92);
  color: var(--clr-text);
  box-shadow:
    0 18px 40px rgba(4, 8, 18, 0.42),
    0 0 0 1px rgba(255,255,255,0.03);
  backdrop-filter: blur(16px);
  font-size: var(--font-ui-md);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: center;
  transition: opacity 0.16s var(--ease-out), transform 0.18s var(--ease-out);
}

.app-tooltip::after {
  content: '';
  position: absolute;
  left: clamp(18px, var(--tooltip-anchor), calc(100% - 18px));
  width: 12px;
  height: 12px;
  background: inherit;
  border-radius: 3px;
  border: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.app-tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.app-tooltip[data-placement="top"]::after {
  bottom: -7px;
  border-left: 0;
  border-top: 0;
}

.app-tooltip[data-placement="bottom"] {
  transform: translateY(-8px) scale(0.96);
}

.app-tooltip[data-placement="bottom"].visible {
  transform: translateY(0) scale(1);
}

.app-tooltip[data-placement="bottom"]::after {
  top: -7px;
  border-right: 0;
  border-bottom: 0;
}

[data-theme-scheme="light"] .app-tooltip {
  border-color: rgba(90,82,224,0.12);
  background:
    linear-gradient(135deg, rgba(90,82,224,0.14), rgba(0,153,204,0.06)),
    rgba(255,255,255,0.92);
  box-shadow:
    0 18px 36px rgba(44, 59, 101, 0.16),
    0 0 0 1px rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--clr-bg) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: fadeIn 0.18s var(--ease-out);
}

.modal-overlay.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  width: 420px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-elevated);
  animation: modalIn 0.22s var(--ease-spring);
}

.modal.is-positioned {
  position: fixed;
  margin: 0;
}

.modal.dragging {
  user-select: none;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--clr-border);
  cursor: move;
  touch-action: none;
  user-select: none;
}

.modal-header h3 { font-size: var(--font-ui-2xl); font-weight: 600; }

.modal-body {
  padding: 18px 20px;
}

.modal-body label {
  display: block;
  font-size: var(--font-ui-md);
  font-weight: 600;
  color: var(--clr-control-icon);
  letter-spacing: 0.04em;
  margin-bottom: 7px;
}

.modal-body input,
.modal-body select {
  width: 100%;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  color: var(--clr-text);
  padding: 10px 12px;
  font-size: var(--font-ui-lg);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.modal-body input:focus,
.modal-body select:focus {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px var(--clr-accent-glow);
}

.modal-body input[type="file"] {
  cursor: pointer;
}

.modal-body input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  background: var(--clr-surface-3);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-ui-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.modal-body input[type="file"]::file-selector-button:hover {
  background: var(--clr-surface);
  border-color: var(--clr-button-hover-border);
}

.modal-field-spacer {
  margin-top: 14px;
}

.find-replace-modal {
  width: 460px;
}

.modal-body .modal-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--clr-text-muted);
  font-size: var(--font-ui-md);
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
}

.modal-body .modal-checkbox-row input {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--clr-accent);
  cursor: pointer;
}

.find-replace-meta {
  min-height: 20px;
}

.find-replace-footer {
  flex-wrap: wrap;
}

.input-hint { font-size: var(--font-ui-sm); color: var(--clr-text-faint); margin-top: 6px; }

.modal-body p { font-size: var(--font-ui-lg); color: var(--clr-text-muted); line-height: 1.5; }
.modal-body .danger-text { font-size: var(--font-ui-md); color: var(--clr-danger); margin-top: 4px; }
.modal-body input[aria-invalid="true"] {
  border-color: var(--clr-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clr-danger) 20%, transparent);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--clr-border);
}

.recycle-bin-modal {
  width: min(720px, calc(100vw - 24px));
}

.empty-recycle-bin-modal {
  width: min(460px, calc(100vw - 24px));
}

.recycle-bin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(52vh, 520px);
  overflow: auto;
}

.recycle-bin-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  color: var(--clr-text-muted);
  border: 1px dashed var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
}

.recycle-bin-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-2);
}

.recycle-bin-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--clr-folder-icon);
  border-radius: var(--radius-sm);
  background: var(--clr-surface-3);
}

.recycle-bin-item-main {
  min-width: 0;
}

.recycle-bin-item-title,
.recycle-bin-item-path,
.recycle-bin-item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recycle-bin-item-title {
  color: var(--clr-text);
  font-size: var(--font-ui-lg);
  font-weight: 600;
}

.recycle-bin-item-path {
  margin-top: 2px;
  color: var(--clr-text-muted);
  font-size: var(--font-ui-sm);
}

.recycle-bin-item-meta {
  margin-top: 4px;
  color: var(--clr-text-faint);
  font-size: var(--font-ui-sm);
}

.recycle-bin-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recycle-bin-item-actions .btn-ghost,
.recycle-bin-item-actions .btn-danger {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════════ */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 99999;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-toast);
  font-size: var(--font-ui-base);
  color: var(--clr-text);
  min-width: 240px;
  max-width: 360px;
  backdrop-filter: blur(8px);
  animation: toastIn 0.25s var(--ease-spring);
}

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

.toast.removing { animation: toastOut 0.2s var(--ease-out) forwards; }
@keyframes toastOut {
  to { opacity: 0; transform: translateX(24px) scale(0.95); }
}

.toast-icon { flex-shrink: 0; }
.toast.success .toast-icon { color: var(--clr-success); }
.toast.error   .toast-icon { color: var(--clr-danger); }
.toast.info    .toast-icon { color: var(--clr-accent-2); }
.toast.warning .toast-icon { color: var(--clr-warning); }

/* ══════════════════════════════════════════════════════════════
   MISC UTILITIES
   ══════════════════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* Drag-ghost style */
.drag-ghost {
  background: var(--clr-surface-2);
  border: 1px solid var(--clr-accent);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--font-ui-md);
  color: var(--clr-text);
  position: fixed;
  top: -100px;
  left: -100px;
  pointer-events: none;
  z-index: 99999;
}

/* Pane drop zone empty text */
.pane-drop-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--clr-text-faint);
  font-size: var(--font-ui-base);
  padding: 20px;
  text-align: center;
}

.pane-drop-zone svg { opacity: 0.3; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root { --sidebar-w: 240px; }
  .sidebar { position: fixed; left: 0; top: 0; height: 100%; z-index: 200; transform: translateX(0); }
  .sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important; }
  .sidebar-resizer { display: none; }
  .recycle-bin-item {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .recycle-bin-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    padding: 8px 12px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .topbar-left,
  .topbar-center,
  .topbar-right {
    width: 100%;
  }
  .topbar-center,
  .topbar-right {
    justify-content: flex-start;
  }
  .topbar-right {
    flex-wrap: wrap;
  }
  .view-controls {
    width: 100%;
    flex-wrap: wrap;
  }
  .pane-count-control {
    width: 100%;
    justify-content: space-between;
  }
  #viewModeCount {
    width: 72px;
  }
  #downloadAllBtn,
  #saveAllBtn {
    width: 32px;
    height: 32px;
    padding: 0;
    gap: 0;
    font-size: 0;
    justify-content: center;
  }
  .emoji-picker {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    padding: 12px;
    border-radius: 18px;
  }
  .emoji-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  }
}