/* ══════════════════════════════════════
   U-CIM · 暗色主题 · 侧边栏布局
══════════════════════════════════════ */
:root {
  --bg: #070b1d;
  --surface: #0f1633;
  --surface2: #172149;
  --border: rgba(154,171,255,0.20);
  --accent: #78a7ff;
  --accent-rgb: 120,167,255;
  --accent2: #8fb3ff;
  --accent2-rgb: 143,179,255;
  --accent3: #a787ff;
  --accent3-rgb: 167,135,255;
  --text: #e7ecff;
  --text-muted: #92a1cb;
  --text-dim: #b1bce0;
  --danger: #e58ea8;
  --money: #67d5b7;
  --radius: 12px;

  /* zip 兼容 tokens */
  --sa: rgba(16,22,51,0.74);
  --sb: rgba(18,27,60,0.90);
  --sc: rgba(24,34,73,0.96);
  --ba: rgba(var(--accent-rgb),0.10);
  --bb: rgba(var(--accent-rgb),0.18);
  --bc: rgba(var(--accent-rgb),0.32);
  --tx: #e7ecff;
  --tx2: #b1bce0;
  --tx3: #92a1cb;
  --s1: 0 1px 3px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.38);
  --s2: 0 4px 16px rgba(0,0,0,.60),0 1px 4px rgba(0,0,0,.38);
  --s3: 0 10px 36px rgba(0,0,0,.70),0 3px 10px rgba(0,0,0,.42);
  --s4: 0 20px 60px rgba(0,0,0,.80),0 6px 20px rgba(0,0,0,.48);
  --sd: 0 8px 40px rgba(0,0,0,.65);
  --r1:8px;--r2:12px;--r3:14px;--r4:16px;--r5:20px;--r6:24px;--rp:9999px;
  --p-or:#78a7ff;--p-pk:#a787ff;--p-pc:#8b7cff;--p-am:#78a7ff;
  --p-ok:#67d5b7;--p-ng:#e58ea8;--p-wn:#f0c36c;--p-bl:#8fb3ff;--p-pp:#a787ff;--p-tl:#72c9ff;
  --tl-r:#e58ea8;--tl-y:#f0c36c;--tl-g:#67d5b7;
  --ease-standard: cubic-bezier(.18,1.08,.28,1);
  --ease-emphasized: cubic-bezier(.16,1,.26,1.1);
  --ease-snappy: cubic-bezier(.34,1.56,.64,1);
  --motion-fast: .18s;
  --motion-base: .28s;
  --motion-slow: .42s;
  --motion-slower: .52s;
  --esp: var(--ease-snappy);
  --esm: var(--ease-standard);
  --hover-lift-1: -2px;
  --hover-lift-2: -4px;
  --hover-lift-3: -6px;
  --press-scale: .965;
  --topbar-h:calc(60px * var(--ui-scale));--th:calc(60px * var(--ui-scale));--dh:0px;
  --primary:#78a7ff;--primary-2:#5f8dff;--accent-var:#a787ff;--accent-2:#c2adff;
  --money-var:#67d5b7;--danger-var:#e58ea8;
  --frame-soft:rgba(167,182,255,0.12);--frame-dash:rgba(167,182,255,0.20);
  --shadow:0 4px 16px rgba(0,0,0,0.45);--shadow-strong:0 12px 32px rgba(0,0,0,0.65);
  --primary-soft-14:rgba(var(--accent-rgb),0.10);--primary-soft-08:rgba(var(--accent-rgb),0.06);
  --primary-soft-28:rgba(var(--accent-rgb),0.18);--primary-shadow:rgba(var(--accent-rgb),0.15);
  --accent-soft-14:rgba(var(--accent3-rgb),0.10);--accent-soft-08:rgba(var(--accent3-rgb),0.06);
  --accent-soft-26:rgba(var(--accent3-rgb),0.16);--accent-shadow:rgba(var(--accent3-rgb),0.12);
  --money-soft-14:rgba(126,200,160,0.10);--money-shadow:rgba(126,200,160,0.10);
  --ink-soft-10:rgba(230,238,255,0.06);--ink-soft-18:rgba(230,238,255,0.10);
  --ring:rgba(var(--accent-rgb),0.15);--qq-bg:rgba(var(--accent-rgb),0.08);
  --card-accent:rgba(var(--accent-rgb),0.30);--badge-bg:rgba(var(--accent-rgb),0.12);
  --badge-border:rgba(var(--accent-rgb),0.22);--badge-text:#78a7ff;
  --glass:rgba(16,22,51,0.88);--stroke:rgba(167,182,255,0.18);
  --grid-line: rgba(90,122,255,0.35);
  --grid-accent: rgba(140,102,255,0.35);
  --grid-bright: rgba(var(--accent-rgb),0.16);
  --ba1:blur(14px) saturate(140%);--ba2:blur(20px) saturate(160%);--ba3:blur(36px) saturate(180%);

  /* button theming */
  --btn-primary-start: #6f98ff;
  --btn-primary-end: #9d7dff;
  --btn-primary-text: #070b1d;
  --btn-primary-shadow: rgba(var(--accent2-rgb),0.28);
  --lux-glow-a: var(--accent-rgb);
  --lux-glow-b: var(--accent3-rgb);
  --lux-grain-alpha: 0.06;
  --lux-glass-tint: rgba(255,255,255,0.06);

  /* 全局 UI 缩放系数 */
  --ui-scale: 1.25;
  --sz-sidebar-w: calc(72px * var(--ui-scale));
  --sz-subnav-w: calc(200px * var(--ui-scale));
  --sz-panel-pad: calc(28px * var(--ui-scale));
  --sz-topbar-pad-x: calc(28px * var(--ui-scale));
  --sz-page-title: calc(16px * var(--ui-scale));
  --sz-control-h: calc(38px * var(--ui-scale));
  --sz-control-fs: calc(13px * var(--ui-scale));
}

html[data-tm="light"] {
  --bg: #fff8eb;
  --surface: #fffdf7;
  --surface2: #ffefcf;
  --border: rgba(120,78,12,0.20);
  --accent: #e7ab22;
  --accent-rgb: 231,171,34;
  --accent2: #ffd468;
  --accent2-rgb: 255,212,104;
  --accent3: #ff8f2c;
  --accent3-rgb: 255,143,44;
  --text: #2b1f08;
  --text-muted: #6f5327;
  --text-dim: #4f3a16;
  --danger: #bc5c5c;
  --money: #3d9b62;

  --sa: rgba(255,249,236,0.80);
  --sb: rgba(255,242,217,0.92);
  --sc: rgba(255,235,203,0.96);
  --ba: rgba(var(--accent-rgb),0.10);
  --bb: rgba(var(--accent-rgb),0.18);
  --bc: rgba(var(--accent-rgb),0.28);
  --tx: #2b1f08;
  --tx2: #6f5327;
  --tx3: #9f7b3d;
  --s1: 0 1px 3px rgba(68,45,20,.12),0 2px 9px rgba(68,45,20,.08);
  --s2: 0 8px 24px rgba(68,45,20,.14),0 1px 4px rgba(68,45,20,.08);
  --s3: 0 18px 40px rgba(68,45,20,.18),0 4px 12px rgba(68,45,20,.10);
  --s4: 0 24px 60px rgba(68,45,20,.22),0 8px 22px rgba(68,45,20,.12);
  --sd: 0 10px 36px rgba(68,45,20,.16);
  --p-or:#e7ab22;--p-pk:#ff8f2c;--p-pc:#ffb24a;--p-am:#e7ab22;
  --p-ok:#3d9b62;--p-ng:#bc5c5c;--p-wn:#e3a21d;--p-bl:#ffd468;--p-pp:#ff8f2c;--p-tl:#eab95a;
  --tl-r:#c87070;--tl-y:#e3a21d;--tl-g:#3d9b62;
  --primary:#e7ab22;--primary-2:#d58b1a;--accent-var:#ff8f2c;--accent-2:#ffbf5d;
  --money-var:#3d9b62;--danger-var:#bc5c5c;
  --frame-soft:rgba(26,16,8,0.12);--frame-dash:rgba(26,16,8,0.16);
  --shadow:0 8px 22px rgba(26,16,8,0.16);--shadow-strong:0 18px 42px rgba(26,16,8,0.24);
  --primary-soft-14:rgba(var(--accent-rgb),0.14);--primary-soft-08:rgba(var(--accent-rgb),0.10);
  --primary-soft-28:rgba(var(--accent-rgb),0.20);--primary-shadow:rgba(var(--accent-rgb),0.14);
  --accent-soft-14:rgba(var(--accent3-rgb),0.16);--accent-soft-08:rgba(var(--accent3-rgb),0.10);
  --accent-soft-26:rgba(var(--accent3-rgb),0.22);--accent-shadow:rgba(var(--accent3-rgb),0.16);
  --money-soft-14:rgba(75,154,107,0.16);--money-shadow:rgba(75,154,107,0.14);
  --ink-soft-10:rgba(26,16,8,0.08);--ink-soft-18:rgba(26,16,8,0.12);
  --ring:rgba(var(--accent-rgb),0.22);--qq-bg:rgba(var(--accent-rgb),0.12);
  --card-accent:rgba(var(--accent-rgb),0.28);--badge-bg:rgba(var(--accent-rgb),0.14);
  --badge-border:rgba(var(--accent-rgb),0.24);--badge-text:#e7ab22;
  --glass:rgba(255,252,246,0.94);--stroke:rgba(26,16,8,0.14);
  --grid-line: rgba(209,152,45,0.35);
  --grid-accent: rgba(240,129,38,0.35);
  --grid-bright: rgba(var(--accent-rgb),0.20);

  /* light-theme primary buttons (vivid yellow-orange) */
  --btn-primary-start: #ffd66f;
  --btn-primary-end: #ff9a2f;
  --btn-primary-text: #2b160f;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.28);

  /* chat light accents */
  --chat-light-start: #ffd978;
  --chat-light-end: #ff982f;
  --chat-light-text: #2f1d08;
}

/* ===== Theme Palettes ===== */
:root[data-palette="washi"] {
  --bg: #0e151d;
  --surface: #18212b;
  --surface2: #22303d;
  --border: rgba(154,170,192,0.27);
  --accent: #8ca9cc;
  --accent-rgb: 140,169,204;
  --accent2: #b3c5db;
  --accent2-rgb: 179,197,219;
  --accent3: #c1986d;
  --accent3-rgb: 193,152,109;
  --text: #f1ece4;
  --text-muted: #a79d90;
  --text-dim: #c2b7a8;
  --btn-primary-start: #96b1d2;
  --btn-primary-end: #bf9569;
  --btn-primary-text: #0f151d;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.30);
  --lux-glow-a: 140,169,204;
  --lux-glow-b: 193,152,109;
  --lux-grain-alpha: 0.07;
  --lux-glass-tint: rgba(210,194,170,0.08);
  --grid-line: rgba(128,151,188,0.36);
  --grid-accent: rgba(194,152,105,0.38);
}

:root[data-tm="light"][data-palette="washi"] {
  --bg: #f5f1e8;
  --surface: #fffcf6;
  --surface2: #ece4d6;
  --border: rgba(78,86,97,0.24);
  --accent: #566f8e;
  --accent-rgb: 86,111,142;
  --accent2: #7892b0;
  --accent2-rgb: 120,146,176;
  --accent3: #9a7655;
  --accent3-rgb: 154,118,85;
  --text: #2d2a26;
  --text-muted: #6e675f;
  --text-dim: #5c5550;
  --btn-primary-start: #6783a5;
  --btn-primary-end: #a07a57;
  --btn-primary-text: #f8f3ea;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.28);
  --lux-grain-alpha: 0.04;
  --lux-glass-tint: rgba(255,249,238,0.80);
  --chat-light-start: #7892b0;
  --chat-light-end: #9a7655;
  --chat-light-text: #f8f3ea;
  --grid-line: rgba(98,121,151,0.35);
  --grid-accent: rgba(169,136,98,0.35);
}

:root[data-palette="matcha"] {
  --bg: #11160f;
  --surface: #1b2418;
  --surface2: #263222;
  --border: rgba(164,179,142,0.26);
  --accent: #94ab7a;
  --accent-rgb: 148,171,122;
  --accent2: #afc595;
  --accent2-rgb: 175,197,149;
  --accent3: #d1725e;
  --accent3-rgb: 209,114,94;
  --text: #ece9df;
  --text-muted: #a8a394;
  --text-dim: #c3bdae;
  --btn-primary-start: #9db687;
  --btn-primary-end: #ce6f5a;
  --btn-primary-text: #10150f;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.30);
  --lux-glow-a: 148,171,122;
  --lux-glow-b: 209,114,94;
  --lux-grain-alpha: 0.075;
  --lux-glass-tint: rgba(192,204,164,0.08);
  --grid-line: rgba(145,167,110,0.36);
  --grid-accent: rgba(206,111,90,0.38);
}

:root[data-tm="light"][data-palette="matcha"] {
  --bg: #f5f2e7;
  --surface: #fffdf6;
  --surface2: #eee7d7;
  --border: rgba(87,90,68,0.24);
  --accent: #728259;
  --accent-rgb: 114,130,89;
  --accent2: #92a577;
  --accent2-rgb: 146,165,119;
  --accent3: #bf5542;
  --accent3-rgb: 191,85,66;
  --text: #2c2b24;
  --text-muted: #6d675b;
  --text-dim: #565043;
  --btn-primary-start: #829467;
  --btn-primary-end: #c5604c;
  --btn-primary-text: #f8f3e9;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.25);
  --lux-grain-alpha: 0.04;
  --lux-glass-tint: rgba(250,246,234,0.82);
  --chat-light-start: #92a577;
  --chat-light-end: #bf5542;
  --chat-light-text: #f8f3e9;
  --grid-line: rgba(139,153,108,0.35);
  --grid-accent: rgba(186,89,72,0.36);
}

:root[data-palette="tsukimi"] {
  --bg: #0d131a;
  --surface: #16202b;
  --surface2: #20303d;
  --border: rgba(158,173,192,0.25);
  --accent: #d3b577;
  --accent-rgb: 211,181,119;
  --accent2: #8ca2c1;
  --accent2-rgb: 140,162,193;
  --accent3: #b1c1d8;
  --accent3-rgb: 177,193,216;
  --text: #ece5d8;
  --text-muted: #a29a8c;
  --text-dim: #c0b6a7;
  --btn-primary-start: #cfb67f;
  --btn-primary-end: #88a0c0;
  --btn-primary-text: #0d131a;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.29);
  --lux-glow-a: 140,162,193;
  --lux-glow-b: 211,181,119;
  --lux-grain-alpha: 0.065;
  --lux-glass-tint: rgba(205,191,162,0.08);
  --grid-line: rgba(138,157,189,0.36);
  --grid-accent: rgba(211,181,119,0.38);
}

:root[data-tm="light"][data-palette="tsukimi"] {
  --bg: #faf6ec;
  --surface: #fffdfa;
  --surface2: #efe7d9;
  --border: rgba(88,85,76,0.24);
  --accent: #bf9a55;
  --accent-rgb: 191,154,85;
  --accent2: #6f819d;
  --accent2-rgb: 111,129,157;
  --accent3: #8ea2bf;
  --accent3-rgb: 142,162,191;
  --text: #27241f;
  --text-muted: #6a6359;
  --text-dim: #565046;
  --btn-primary-start: #c9a966;
  --btn-primary-end: #7287a4;
  --btn-primary-text: #f9f5ec;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.26);
  --lux-grain-alpha: 0.038;
  --lux-glass-tint: rgba(255,251,241,0.82);
  --chat-light-start: #cfb477;
  --chat-light-end: #7288a7;
  --chat-light-text: #f9f5ec;
  --grid-line: rgba(116,133,158,0.35);
  --grid-accent: rgba(191,154,85,0.36);
}

:root[data-palette="sakura"] {
  --bg: #151217;
  --surface: #1f1a21;
  --surface2: #2a232b;
  --border: rgba(188,166,176,0.25);
  --accent: #c79aa6;
  --accent-rgb: 199,154,166;
  --accent2: #90a6bd;
  --accent2-rgb: 144,166,189;
  --accent3: #deb5be;
  --accent3-rgb: 222,181,190;
  --text: #f0e7ea;
  --text-muted: #afa2a8;
  --text-dim: #c9bcc1;
  --btn-primary-start: #c394a0;
  --btn-primary-end: #8fa4bc;
  --btn-primary-text: #151217;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.29);
  --lux-glow-a: 199,154,166;
  --lux-glow-b: 144,166,189;
  --lux-grain-alpha: 0.07;
  --lux-glass-tint: rgba(220,193,202,0.08);
  --grid-line: rgba(146,163,188,0.36);
  --grid-accent: rgba(203,155,168,0.39);
}

:root[data-tm="light"][data-palette="sakura"] {
  --bg: #faf3f2;
  --surface: #fffdfc;
  --surface2: #f2e8ea;
  --border: rgba(108,93,99,0.24);
  --accent: #b98390;
  --accent-rgb: 185,131,144;
  --accent2: #687d93;
  --accent2-rgb: 104,125,147;
  --accent3: #cc93a0;
  --accent3-rgb: 204,147,160;
  --text: #302a2c;
  --text-muted: #756b6f;
  --text-dim: #61575b;
  --btn-primary-start: #c28a97;
  --btn-primary-end: #6f8399;
  --btn-primary-text: #fbf4f3;
  --btn-primary-shadow: rgba(var(--accent-rgb),0.26);
  --lux-grain-alpha: 0.04;
  --lux-glass-tint: rgba(255,247,249,0.84);
  --chat-light-start: #cc93a0;
  --chat-light-end: #7288a0;
  --chat-light-text: #fbf4f3;
  --grid-line: rgba(119,136,157,0.35);
  --grid-accent: rgba(186,130,145,0.36);
}

:root[data-palette]:not([data-tm="light"]) {
  --sa: color-mix(in srgb, var(--surface) 76%, transparent);
  --sb: color-mix(in srgb, var(--surface2) 84%, transparent);
  --sc: color-mix(in srgb, var(--surface2) 94%, var(--surface));
  --ba: rgba(var(--accent-rgb),0.14);
  --bb: rgba(var(--accent-rgb),0.23);
  --bc: rgba(var(--accent-rgb),0.34);
  --tx: var(--text);
  --tx2: var(--text-dim);
  --tx3: var(--text-muted);
  --s1: 0 1px 4px rgba(0,0,0,.52),0 3px 10px rgba(var(--lux-glow-a),0.10);
  --s2: 0 10px 28px rgba(0,0,0,.48),0 2px 10px rgba(var(--lux-glow-a),0.14);
  --s3: 0 22px 52px rgba(0,0,0,.58),0 6px 18px rgba(var(--lux-glow-b),0.16);
  --s4: 0 32px 72px rgba(0,0,0,.66),0 10px 24px rgba(var(--lux-glow-a),0.18);
  --sd: 0 12px 42px rgba(0,0,0,.60),0 2px 14px rgba(var(--lux-glow-b),0.14);
  --primary: var(--accent);
  --primary-2: var(--accent2);
  --accent-var: var(--accent3);
  --accent-2: var(--accent2);
  --frame-soft: rgba(var(--accent-rgb),0.13);
  --frame-dash: rgba(var(--accent-rgb),0.22);
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --shadow-strong: 0 20px 48px rgba(0,0,0,0.62);
  --primary-soft-14: rgba(var(--accent-rgb),0.14);
  --primary-soft-08: rgba(var(--accent-rgb),0.09);
  --primary-soft-28: rgba(var(--accent-rgb),0.24);
  --primary-shadow: rgba(var(--accent-rgb),0.20);
  --accent-soft-14: rgba(var(--accent3-rgb),0.14);
  --accent-soft-08: rgba(var(--accent3-rgb),0.08);
  --accent-soft-26: rgba(var(--accent3-rgb),0.24);
  --accent-shadow: rgba(var(--accent3-rgb),0.16);
  --money-soft-14: rgba(126,200,160,0.14);
  --money-shadow: rgba(126,200,160,0.15);
  --ink-soft-10: rgba(255,255,255,0.06);
  --ink-soft-18: rgba(255,255,255,0.11);
  --ring: rgba(var(--accent-rgb),0.24);
  --qq-bg: rgba(var(--accent-rgb),0.13);
  --card-accent: rgba(var(--accent-rgb),0.34);
  --badge-bg: rgba(var(--accent-rgb),0.16);
  --badge-border: rgba(var(--accent-rgb),0.28);
  --badge-text: var(--accent2);
  --glass: color-mix(in srgb, var(--surface) 82%, var(--lux-glass-tint));
  --stroke: rgba(var(--lux-glow-a),0.24);
  --grid-bright: rgba(var(--accent-rgb),0.22);
}

:root[data-tm="light"][data-palette] {
  --sa: color-mix(in srgb, var(--surface) 84%, transparent);
  --sb: color-mix(in srgb, var(--surface2) 90%, transparent);
  --sc: color-mix(in srgb, var(--surface2) 94%, var(--surface));
  --ba: rgba(var(--accent-rgb),0.11);
  --bb: rgba(var(--accent-rgb),0.19);
  --bc: rgba(var(--accent-rgb),0.30);
  --tx: var(--text);
  --tx2: var(--text-dim);
  --tx3: var(--text-muted);
  --s1: 0 1px 3px rgba(43,26,14,.10),0 2px 8px rgba(var(--lux-glow-a),0.10);
  --s2: 0 10px 24px rgba(43,26,14,.14),0 2px 8px rgba(var(--lux-glow-a),0.12);
  --s3: 0 20px 42px rgba(43,26,14,.16),0 6px 16px rgba(var(--lux-glow-b),0.14);
  --s4: 0 28px 60px rgba(43,26,14,.20),0 10px 22px rgba(var(--lux-glow-a),0.15);
  --sd: 0 10px 34px rgba(43,26,14,.16),0 2px 10px rgba(var(--lux-glow-b),0.12);
  --primary: var(--accent);
  --primary-2: var(--accent2);
  --accent-var: var(--accent3);
  --accent-2: var(--accent2);
  --frame-soft: rgba(43,26,14,0.10);
  --frame-dash: rgba(var(--accent-rgb),0.24);
  --shadow: 0 10px 26px rgba(43,26,14,0.15);
  --shadow-strong: 0 18px 44px rgba(43,26,14,0.22);
  --primary-soft-14: rgba(var(--accent-rgb),0.13);
  --primary-soft-08: rgba(var(--accent-rgb),0.08);
  --primary-soft-28: rgba(var(--accent-rgb),0.22);
  --primary-shadow: rgba(var(--accent-rgb),0.16);
  --accent-soft-14: rgba(var(--accent3-rgb),0.14);
  --accent-soft-08: rgba(var(--accent3-rgb),0.09);
  --accent-soft-26: rgba(var(--accent3-rgb),0.22);
  --accent-shadow: rgba(var(--accent3-rgb),0.14);
  --money-soft-14: rgba(75,154,107,0.14);
  --money-shadow: rgba(75,154,107,0.13);
  --ink-soft-10: rgba(24,16,8,0.06);
  --ink-soft-18: rgba(24,16,8,0.10);
  --ring: rgba(var(--accent-rgb),0.22);
  --qq-bg: rgba(var(--accent-rgb),0.10);
  --card-accent: rgba(var(--accent-rgb),0.30);
  --badge-bg: rgba(var(--accent-rgb),0.14);
  --badge-border: rgba(var(--accent-rgb),0.25);
  --badge-text: var(--accent);
  --glass: color-mix(in srgb, var(--surface) 90%, var(--lux-glass-tint));
  --stroke: rgba(var(--lux-glow-a),0.20);
  --grid-bright: rgba(var(--accent-rgb),0.18);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; min-height:100%; overflow:hidden; }

:where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--ring);
}

body {
  position: relative;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Noto Serif SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', serif;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  z-index: 0;
  isolation: isolate;
}
body::before {
  content:'';
  position:fixed;
  inset:-20% -14% 0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58% 52% at 8% 4%, rgba(var(--lux-glow-a),0.24) 0%, rgba(var(--lux-glow-a),0) 72%),
    radial-gradient(54% 46% at 92% 0%, rgba(var(--lux-glow-b),0.20) 0%, rgba(var(--lux-glow-b),0) 74%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 58%);
  opacity:.92;
  transform:translateZ(0);
}
html[data-tm="light"] body::before {
  opacity:.58;
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,var(--lux-grain-alpha)) 1px, transparent 0);
  background-size:4px 4px;
  mix-blend-mode:soft-light;
  opacity:.32;
}

@keyframes gridDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-180px, 180px, 0); }
}

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

@keyframes ucimEnter {
  from { opacity: 0; transform: translateY(12px) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ucimModalPop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ucimSpin {
  to { transform: rotate(360deg); }
}

@keyframes ucimShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes ucimPulse {
  0%,100% { transform: scale(.82); opacity: .45; }
  40% { transform: scale(1.08); opacity: 1; }
}

/* ══ Loading Overlay ══ */
#loadingOverlay {
  position:fixed; inset:0; z-index:900;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity 0.26s;
}
#loadingOverlay.fadeout { opacity:0; pointer-events:none; }
#loadingOverlay.hidden { display:none !important; }
.loading-card {
  background: var(--surface); border:1px solid var(--border);
  border-radius:20px; padding:40px 36px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  min-width:260px; box-shadow:var(--s4);
}
.loading-icon-wrapper { position:relative; width:64px; height:64px; }
.loading-icon {
  width:64px; height:64px; border-radius:16px;
  background:rgba(var(--accent-rgb),0.08); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Mono',monospace; font-size:20px; font-weight:700; color:var(--accent);
  animation: loadingBounce 1.6s ease-in-out infinite;
}
.loading-icon img { display:none; }
.loading-particles { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.loading-particles span {
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  opacity:0; filter:blur(.2px);
}
.loading-particles span:nth-child(1) { animation:loadingSpark 1.4s ease-in-out infinite; }
.loading-particles span:nth-child(2) { animation:loadingSpark 1.4s ease-in-out infinite .2s; }
.loading-particles span:nth-child(3) { animation:loadingSpark 1.4s ease-in-out infinite .4s; }
@keyframes loadingSpark {
  0% { opacity:.9; transform:translateY(0) scale(.45); }
  55% { opacity:1; transform:translateY(-14px) scale(.9); }
  100% { opacity:0; transform:translateY(-24px) scale(1.1); }
}
@keyframes loadingBounce {
  0% { transform:translateY(0) scale(1); }
  18% { transform:translateY(-14px) scale(1.04); }
  32% { transform:translateY(0) scale(1); }
  48% { transform:translateY(-10px) scale(1.03); }
  62% { transform:translateY(0) scale(1); }
  78% { transform:translateY(-6px) scale(1.02); }
  100% { transform:translateY(0) scale(1); }
}
.loading-title { font-size:14px; font-weight:600; color:var(--text); letter-spacing:1px; }
.loading-subtitle { font-size:12px; color:var(--text-muted); }
.loading-bar { width:180px; height:2px; background:var(--surface2); border-radius:2px; overflow:hidden; }
.loading-bar-fill { height:100%; width:60%; background:linear-gradient(90deg,var(--accent),var(--accent3)); animation:loadBar 1.5s ease-in-out infinite; }
@keyframes loadBar { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
.loading-bar-shimmer { display:none; }
.loading-text { font-size:13px; color:var(--text-muted); font-family:'Space Mono',monospace; }
.loading-dot { animation:dotBlink 1.2s ease-in-out infinite; }
.loading-dot:nth-child(2){animation-delay:.2s} .loading-dot:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* Global entrance animation (light fade/slide) */
:root { --global-enter: ucimEnter var(--motion-slow) var(--ease-snappy) both; }
:where(.page.active,.panel,.section,.settings-row,.stat-card,.benefit-card,.arc-panel-header,.history-list-panel,.nav-card,.rec-card,.archive-card,.dc-card,.tpl-card,.persona-card,.chat-contact-card,.card) {
  animation: var(--entry-anim, var(--global-enter));
  animation-delay: calc(var(--anim-order, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  :where(.page.active,.panel,.section,.settings-row,.stat-card,.benefit-card,.arc-panel-header,.history-list-panel,.nav-card,.rec-card,.archive-card,.dc-card,.tpl-card,.persona-card,.chat-contact-card,.card) {
    animation: none !important;
  }
  .modal-card, .modal-backdrop, .profile-inline-editor:not(.hidden) { animation: none !important; }
  .loading-icon, .loading-bar-fill, .loading-dot, .request-overlay__spinner, .typing-dot, .chat-inline-status__spinner, .chat-room-skeleton__bubble {
    animation: none !important;
  }
}

/* Keep top navigation/static chrome fixed (no entrance animation) */
.topbar, .sidebar { animation: none !important; transform: none !important; }
.loading-steps { display:flex; gap:8px; }
.loading-step { width:8px; height:8px; border-radius:50%; background:var(--surface2); border:1px solid var(--border); }
.loading-step.active { background:var(--accent); border-color:var(--accent); }
.loading-particles { display:none; }

/* ══ Auth Gate ══ */
#authGate {
  position:fixed; inset:0; z-index:800;
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; overflow-y:auto;
}
#authGate.hidden { display:none !important; }
.auth-gate__bg {
  position:fixed; inset:0; z-index:0;
  background: rgba(8,8,12,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.auth-screen { position:relative; z-index:1; width:min(480px,100%); display:none; }
#authGate[data-mode="login"] [data-auth-screen="login"] { display:block; }
#authGate[data-mode="register"] [data-auth-screen="register"] { display:block; }
.auth-card {
  background:rgba(20,20,26,0.94);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  border:1px solid var(--border); border-radius:22px;
  box-shadow:var(--s4),inset 0 1px 0 rgba(255,255,255,0.04);
  padding:32px 28px 28px; width:100%; position:relative;
}
.auth-brand-row { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.auth-logo {
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  display:flex; align-items:center; justify-content:center;
}
.auth-logo > span { font-size:26px; font-weight:900; color:#0c0c10; font-family:'Space Mono',monospace; }
.auth-logo > svg { display:none; }
.auth-title { font-size:20px; font-weight:700; color:var(--text); }
.auth-subtitle { font-size:13px; color:var(--text-muted); margin-top:3px; }
.auth-field { display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.auth-field label { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.2px; font-family:'Space Mono',monospace; }
.auth-field-label { font-size:10px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:1.2px; font-family:'Space Mono',monospace; }
.auth-field input {
  width:100%; padding:10px 13px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:10px; font-size:14px; font-family:inherit;
  color:var(--text); outline:none; transition:border-color .18s,box-shadow .18s;
}
.auth-field input::placeholder { color:var(--text-muted); }
.auth-field input:focus { border-color:rgba(var(--accent-rgb),0.50); box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.10); }
.auth-password-row,.auth-code-row { display:flex; gap:10px; align-items:center; }
.auth-password-row input,.auth-code-row input { flex:1; min-width:0; }
.auth-submit {
  width:100%; margin-top:32px; padding:12px;
  min-height:46px;
  border:none; border-radius:12px; font-size:15px; font-weight:600;
  color:#0c0c10; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  box-shadow:0 5px 18px rgba(var(--accent-rgb),0.22);
  transition:all .22s var(--esp); display:flex; align-items:center; justify-content:center;
}
.auth-submit:hover { transform:translateY(-2px); filter:brightness(1.08); }
.auth-submit:active { transform:scale(.96); }
.auth-toggle,.auth-code-btn {
  padding:10px 16px; min-height:42px; flex-shrink:0;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:9px; font-size:12px; font-weight:500;
  color:var(--text-dim); cursor:pointer; white-space:nowrap; font-family:inherit; transition:all .18s;
  width:100px; /* keep Show/Send buttons aligned but shorter */
}
#btnHumanVerify {
  min-width:160px; max-width:220px; justify-content:center; flex-shrink:0; gap:6px;
  background:linear-gradient(180deg,#1b2838,#0f141b);
  color:#c7d5e0;
  border:1px solid #66c0f4;
  box-shadow:0 8px 18px rgba(12,17,24,0.55), 0 0 0 1px rgba(102,192,244,0.25) inset;
  display:inline-flex; align-items:center;
  transition:all .18s;
}
#btnHumanVerify:hover { filter:brightness(1.06); box-shadow:0 10px 20px rgba(12,17,24,0.65), 0 0 0 1px rgba(102,192,244,0.35) inset; }
#btnHumanVerify:active { transform:scale(.98); }
#btnHumanVerify.is-verified {
  background:linear-gradient(180deg,#1c3b2a,#12291f);
  border-color:#8de26f;
  box-shadow:0 8px 18px rgba(12,24,18,0.55), 0 0 0 1px rgba(141,226,111,0.28) inset;
  color:#d5f5c3;
}
#btnHumanVerify.is-verified:hover { filter:brightness(1.05); }
#btnHumanVerify.is-failed {
  background:linear-gradient(180deg,#3c0f12,#25090b);
  border-color:rgba(214,86,86,0.5);
  box-shadow:0 8px 18px rgba(37,9,11,0.55), 0 0 0 1px rgba(214,86,86,0.28) inset;
  color:#f8dede;
}

/* Light theme Human Verify button */
html[data-tm="light"] #btnHumanVerify {
  background:linear-gradient(180deg,#f7fbff,#e8f1fa);
  color:#1a2b3a;
  border-color:rgba(75,131,191,0.45);
  box-shadow:0 8px 18px rgba(23,44,68,0.18), 0 0 0 1px rgba(75,131,191,0.20) inset;
}
html[data-tm="light"] #btnHumanVerify:hover { box-shadow:0 10px 22px rgba(23,44,68,0.22), 0 0 0 1px rgba(75,131,191,0.30) inset; }
html[data-tm="light"] #btnHumanVerify.is-verified {
  background:linear-gradient(180deg,#f1fff6,#def5e7);
  border-color:rgba(74,150,102,0.65);
  box-shadow:0 8px 18px rgba(34,87,55,0.18), 0 0 0 1px rgba(74,150,102,0.28) inset;
  color:#0f2617;
}
html[data-tm="light"] #btnHumanVerify.is-failed {
  background:linear-gradient(180deg,#fff6f6,#fde9e9);
  border-color:rgba(214,86,86,0.55);
  box-shadow:0 8px 18px rgba(110,35,35,0.18), 0 0 0 1px rgba(214,86,86,0.26) inset;
  color:#3d0f0f;
}
.auth-toggle:hover,.auth-code-btn:hover { border-color:rgba(var(--accent-rgb),0.40); color:var(--accent); }
.auth-link { display:block; width:100%; text-align:center; margin-top:14px; padding:8px; background:none; border:none; font-size:13px; font-weight:500; color:var(--accent); cursor:pointer; font-family:inherit; opacity:.85; }
.auth-link:hover { opacity:1; }
.auth-status { margin-top:12px; padding:10px 13px; border-radius:10px; font-size:13px; font-weight:500; line-height:1.4; }
.auth-status.hidden { display:none; }
.auth-status--error { background:rgba(200,126,126,0.08); border:1px solid rgba(200,126,126,0.20); color:var(--danger); }
.auth-status--success { background:rgba(126,200,160,0.08); border:1px solid rgba(126,200,160,0.20); color:var(--money); }
.auth-dev-section { margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.auth-dev-btn { width:100%; padding:10px 16px; background:rgba(200,184,126,0.06); border:1.5px dashed rgba(200,184,126,0.30); border-radius:11px; color:var(--p-wn); font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; font-family:inherit; transition:all .20s; }
.auth-dev-btn:hover { background:rgba(200,184,126,0.12); border-color:rgba(200,184,126,0.55); transform:translateY(-1px); }


/* Auth Gate · Light theme overrides */
html[data-tm="light"] .auth-gate__bg {
  background: rgba(255,252,246,0.94);
}
html[data-tm="light"] .auth-card {
  background:rgba(255,252,246,0.96);
  border:1px solid rgba(84,59,31,0.12);
  box-shadow:0 18px 40px rgba(68,45,20,0.14);
}
html[data-tm="light"] .auth-logo {
  background:linear-gradient(135deg,#e0b088,#b48dd9);
}
html[data-tm="light"] .auth-logo > span { color:#2b2116; }
html[data-tm="light"] .auth-title { color:var(--text); }
html[data-tm="light"] .auth-subtitle { color:var(--text-muted); }
html[data-tm="light"] .auth-field label { color:var(--text-dim); }
html[data-tm="light"] .auth-field input {
  background:var(--surface2);
  border-color:rgba(84,59,31,0.15);
  color:var(--text);
}
html[data-tm="light"] .auth-field input:focus {
  border-color:rgba(159,109,63,0.45);
  box-shadow:0 0 0 3px rgba(159,109,63,0.12);
  background:var(--surface);
}
html[data-tm="light"] .auth-submit {
  background:linear-gradient(135deg,var(--btn-primary-start),var(--btn-primary-end));
  color:var(--btn-primary-text);
  box-shadow:0 5px 18px var(--btn-primary-shadow);
}
html[data-tm="light"] .auth-toggle,
html[data-tm="light"] .auth-code-btn {
  background:var(--surface2);
  border-color:rgba(84,59,31,0.16);
  color:var(--text-dim);
}
html[data-tm="light"] .auth-toggle:hover,
html[data-tm="light"] .auth-code-btn:hover { border-color:rgba(159,109,63,0.40); color:var(--accent); }
html[data-tm="light"] .auth-link { color:var(--accent); }
html[data-tm="light"] .auth-status--error { background:rgba(179,86,86,0.12); border-color:rgba(179,86,86,0.28); color:var(--danger); }
html[data-tm="light"] .auth-status--success { background:rgba(77,141,103,0.10); border-color:rgba(77,141,103,0.26); color:var(--money); }
html[data-tm="light"] .auth-dev-btn {
  background:rgba(159,109,63,0.08);
  border-color:rgba(159,109,63,0.28);
  color:var(--accent);
}
html[data-tm="light"] .auth-dev-btn:hover {
  background:rgba(159,109,63,0.14);
  border-color:rgba(159,109,63,0.45);
}