@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,500;6..72,600&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
/* Resolut 2.0 V3 · four skins on one token set.
   A skin is chosen with data-skin on <html> (or on any container, for side-by-side previews):
   neon (default) · ledger · graphite · harbour. Light is the default for every viewer; dark comes only from the
   page-owned data-mode="dark" toggle on <html>, never from the OS or the host.
   Every skin defines the same tokens, so components never name a colour directly.
   Component-character tokens: --r-btn (buttons, chips), --r-pill, --h-weight / --h-track (headings),
   --btn-glow (primary button shadow), --orb-bg / --orb-shine (the agent's mark). */

/* ---------- light ---------- */
:root, [data-skin="neon"] {
  --bg: #F3F4EE; --bg-2: #EAECE3; --surface: #FFFFFF; --surface-2: #F0F2EA; --surface-3: #E5E8DD;
  --line: #DCDFD4; --line-2: #C9CDBF;
  --ink: #151515; --ink-2: #4C5149; --ink-3: #676C5E; --ink-inv: #F3F4EF;
  --accent: #C5FF3D; --accent-2: #B3F01F; --accent-ink: #151515; --accent-soft: #EEF8D4; --accent-line: #B5D96A; --accent-text: #3F5800; --accent-edge: #5C7D00;
  --good: #15773F; --good-soft: #E1F2E7; --warn: #8A5D00; --warn-soft: #FAF0D2; --bad: #B0281F; --bad-soft: #FBE3E0; --info: #2F5FBF; --info-soft: #E5EDFB; --violet: #6B4FD8; --violet-soft: #EEEAFD;
  --orb-a: #C5FF3D; --orb-b: #3FCB7E; --orb-c: #151515; --orb-bg: conic-gradient(from 200deg, var(--orb-a), var(--orb-b), var(--orb-c), var(--orb-a)); --orb-shine: 1;
  --shadow-sm: 0 1px 2px rgba(20, 24, 10, .06);
  --shadow: 0 1px 2px rgba(20, 24, 10, .05), 0 10px 28px rgba(20, 24, 10, .08);
  --shadow-lg: 0 2px 6px rgba(20, 24, 10, .06), 0 24px 60px rgba(20, 24, 10, .14);
  --glass: rgba(255, 255, 255, .8);
  --f-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 12px; --r-sm: 9px; --r-xs: 7px; --r-btn: 999px; --r-pill: 999px;
  --h-weight: 600; --h-track: -.02em; --btn-glow: 0 6px 16px -8px rgba(110, 148, 0, .55);
  color-scheme: light;
}
/* Ledger: a private bank statement. Navy ink on cool paper, money green for action, a brass seal for the agent. */
:root[data-skin="ledger"], [data-skin="ledger"] {
  --bg: #F7F7F4; --bg-2: #EFEFEA; --surface: #FFFFFF; --surface-2: #FAFAF7; --surface-3: #ECECE6;
  --line: #E3E1D8; --line-2: #CFCCC0;
  --ink: #0F1B2D; --ink-2: #455064; --ink-3: #626B7B; --ink-inv: #F7F7F4;
  --accent: #0B6B4C; --accent-2: #085A3F; --accent-ink: #FFFFFF; --accent-soft: #E3F0EA; --accent-line: #A8D0BF; --accent-text: #0A6447; --accent-edge: #0B6B4C;
  --good: #17784A; --good-soft: #E2F1E8; --warn: #8A5A00; --warn-soft: #F8EED8; --bad: #B02A35; --bad-soft: #F9E4E5; --info: #2B5797; --info-soft: #E5ECF6; --violet: #5A4AA3; --violet-soft: #ECE9F6;
  --orb-a: #EAD7A8; --orb-b: #B08D57; --orb-c: #6F5228; --orb-bg: radial-gradient(circle at 34% 30%, var(--orb-a), var(--orb-b) 58%, var(--orb-c)); --orb-shine: .55;
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .05);
  --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 22px rgba(15, 27, 45, .07);
  --shadow-lg: 0 2px 6px rgba(15, 27, 45, .06), 0 22px 54px rgba(15, 27, 45, .13);
  --glass: rgba(255, 255, 255, .84);
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 10px; --r-sm: 8px; --r-xs: 6px; --r-btn: 8px; --r-pill: 6px;
  --h-weight: 500; --h-track: -.01em; --btn-glow: none;
  color-scheme: light;
}
/* Graphite: a precise work tool. Neutral greys, hairlines, one signal blue, near-flat surfaces. */
:root[data-skin="graphite"], [data-skin="graphite"] {
  --bg: #F6F7F9; --bg-2: #EEF0F3; --surface: #FFFFFF; --surface-2: #F9FAFB; --surface-3: #EEF0F3;
  --line: #E4E6EB; --line-2: #D2D6DD;
  --ink: #0B0D12; --ink-2: #4D5361; --ink-3: #646A77; --ink-inv: #FFFFFF;
  --accent: #1F5BFF; --accent-2: #1849D6; --accent-ink: #FFFFFF; --accent-soft: #EAF0FF; --accent-line: #B8CBFF; --accent-text: #1A4FE0; --accent-edge: #1F5BFF;
  --good: #0E7043; --good-soft: #E3F4EA; --warn: #8F5B00; --warn-soft: #FBF0DA; --bad: #C2263A; --bad-soft: #FCE7EA; --info: #1A4FE0; --info-soft: #EAF0FF; --violet: #6246D8; --violet-soft: #EFEBFD;
  --orb-a: #1F5BFF; --orb-b: rgba(31, 91, 255, .16); --orb-c: #0B0D12; --orb-bg: radial-gradient(circle, var(--orb-a) 0 33%, var(--orb-b) 35% 100%); --orb-shine: 0;
  --shadow-sm: 0 1px 0 rgba(11, 13, 18, .04);
  --shadow: 0 1px 2px rgba(11, 13, 18, .06), 0 0 0 1px rgba(11, 13, 18, .02);
  --shadow-lg: 0 12px 32px rgba(11, 13, 18, .12), 0 0 0 1px rgba(11, 13, 18, .04);
  --glass: rgba(255, 255, 255, .86);
  --f-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 8px; --r-sm: 6px; --r-xs: 5px; --r-btn: 7px; --r-pill: 5px;
  --h-weight: 600; --h-track: -.025em; --btn-glow: none;
  color-scheme: light;
}
/* Harbour: a friendly co-worker. Deep teal for action, saffron for the agent and anything that needs you, soft mist, rounder shapes. */
:root[data-skin="harbour"], [data-skin="harbour"] {
  --bg: #F1F5F4; --bg-2: #E8EFED; --surface: #FFFFFF; --surface-2: #F6F9F8; --surface-3: #E6EEEC;
  --line: #DCE6E3; --line-2: #C5D3CF;
  --ink: #0E2F38; --ink-2: #4A5F65; --ink-3: #596E73; --ink-inv: #F1F5F4;
  --accent: #0F5363; --accent-2: #0B4552; --accent-ink: #FFFFFF; --accent-soft: #E0EDEF; --accent-line: #A6C9D0; --accent-text: #0F5363; --accent-edge: #0F5363;
  --good: #187A55; --good-soft: #E0F2EA; --warn: #925400; --warn-soft: #FDEFD6; --bad: #B83A33; --bad-soft: #FBE5E3; --info: #24639A; --info-soft: #E3EEF7; --violet: #67479E; --violet-soft: #EEE8F7;
  --orb-a: #FFD98A; --orb-b: #F2A33A; --orb-c: #0F5363; --orb-bg: radial-gradient(circle at 32% 30%, var(--orb-a), var(--orb-b) 56%, var(--orb-c)); --orb-shine: .7;
  --shadow-sm: 0 1px 3px rgba(14, 47, 56, .06);
  --shadow: 0 2px 10px rgba(14, 47, 56, .07);
  --shadow-lg: 0 4px 12px rgba(14, 47, 56, .07), 0 26px 60px rgba(14, 47, 56, .14);
  --glass: rgba(255, 255, 255, .82);
  --f-display: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 16px; --r-sm: 12px; --r-xs: 9px; --r-btn: 999px; --r-pill: 999px;
  --h-weight: 700; --h-track: -.025em; --btn-glow: 0 6px 16px -8px rgba(15, 83, 99, .55);
  color-scheme: light;
}

/* ---------- dark: only from the in-page toggle (data-mode on <html>) ---------- */
:root[data-mode="dark"]:not([data-skin]), :root[data-mode="dark"][data-skin="neon"], [data-mode="dark"] [data-skin="neon"] {
  --bg: #0E0F11; --bg-2: #121316; --surface: #16181B; --surface-2: #1C1F23; --surface-3: #25292E;
  --line: #2B3036; --line-2: #3A4048;
  --ink: #F3F4EF; --ink-2: #B3B8AE; --ink-3: #8A9086; --ink-inv: #151515;
  --accent: #C5FF3D; --accent-2: #D4FF6B; --accent-ink: #151515; --accent-soft: #222B10; --accent-line: #4A5E17; --accent-text: #C5FF3D; --accent-edge: #C5FF3D;
  --good: #5FD38D; --good-soft: #13261B; --warn: #F2BE4A; --warn-soft: #2A2312; --bad: #FF6A5E; --bad-soft: #301615; --info: #8DB8FF; --info-soft: #152033; --violet: #A594FF; --violet-soft: #221C44;
  --orb-c: #F3F4EF;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .5);
  --glass: rgba(22, 24, 27, .8); --btn-glow: 0 6px 18px -8px rgba(197, 255, 61, .45);
  color-scheme: dark;
}
:root[data-mode="dark"][data-skin="ledger"], [data-mode="dark"] [data-skin="ledger"] {
  --bg: #0B1220; --bg-2: #0F1727; --surface: #121B2A; --surface-2: #172133; --surface-3: #1E2A3D;
  --line: #25314A; --line-2: #33405B;
  --ink: #ECEEF2; --ink-2: #AEB6C4; --ink-3: #8A93A3; --ink-inv: #0F1B2D;
  --accent: #46BC90; --accent-2: #5FCBA2; --accent-ink: #05140E; --accent-soft: #11291F; --accent-line: #1F5240; --accent-text: #63CDA4; --accent-edge: #63CDA4;
  --good: #55C98F; --good-soft: #12291D; --warn: #E9B758; --warn-soft: #2B2313; --bad: #F27880; --bad-soft: #33171B; --info: #8EB2EC; --info-soft: #172440; --violet: #ACA0EE; --violet-soft: #221E40;
  --orb-c: #8A6A37;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px rgba(0, 0, 0, .32);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 28px 64px rgba(0, 0, 0, .5);
  --glass: rgba(18, 27, 42, .84);
  color-scheme: dark;
}
:root[data-mode="dark"][data-skin="graphite"], [data-mode="dark"] [data-skin="graphite"] {
  --bg: #0A0B0E; --bg-2: #0E1014; --surface: #111317; --surface-2: #15181D; --surface-3: #1B1F25;
  --line: #23272F; --line-2: #2F343D;
  --ink: #EDEEF1; --ink-2: #A3A8B3; --ink-3: #7E8490; --ink-inv: #0B0D12;
  --accent: #7C9DFF; --accent-2: #94B0FF; --accent-ink: #070A14; --accent-soft: #161E36; --accent-line: #2C3E70; --accent-text: #93AFFF; --accent-edge: #7C9DFF;
  --good: #4FCB8C; --good-soft: #10261A; --warn: #E8B14F; --warn-soft: #2A2111; --bad: #FF7385; --bad-soft: #321519; --info: #93AFFF; --info-soft: #161E36; --violet: #A894FF; --violet-soft: #211C40;
  --orb-a: #7C9DFF; --orb-b: rgba(124, 157, 255, .2); --orb-c: #EDEEF1;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .03);
  --shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .05), 0 18px 48px rgba(0, 0, 0, .6);
  --glass: rgba(17, 19, 23, .86);
  color-scheme: dark;
}
:root[data-mode="dark"][data-skin="harbour"], [data-mode="dark"] [data-skin="harbour"] {
  --bg: #0A1D23; --bg-2: #0D232A; --surface: #102930; --surface-2: #133139; --surface-3: #183A43;
  --line: #1F4550; --line-2: #2A5560;
  --ink: #E8F1F0; --ink-2: #A8BFC1; --ink-3: #85999D; --ink-inv: #0E2F38;
  --accent: #6CC2D1; --accent-2: #86CFDB; --accent-ink: #04191E; --accent-soft: #11313A; --accent-line: #275D69; --accent-text: #7FCCD9; --accent-edge: #6CC2D1;
  --good: #57CC9B; --good-soft: #10291F; --warn: #F5B95E; --warn-soft: #2E2412; --bad: #FF8178; --bad-soft: #351A18; --info: #8CC0EC; --info-soft: #14283B; --violet: #B49BF0; --violet-soft: #251E3D;
  --orb-c: #6CC2D1;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow: 0 2px 12px rgba(0, 0, 0, .3);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .3), 0 26px 60px rgba(0, 0, 0, .5);
  --glass: rgba(16, 41, 48, .84); --btn-glow: 0 6px 18px -8px rgba(108, 194, 209, .45);
  color-scheme: dark;
}

/* ================= V3.2 premium skins ================= */
/* Neon Pro: the brand, refined. Geist instead of Poppins, softer squared corners, layered shadows with a faint top light. */
:root[data-skin="neonpro"], [data-skin="neonpro"] {
  --bg: #F5F6F1; --bg-2: #EDEFE6; --surface: #FFFFFF; --surface-2: #F5F6F0; --surface-3: #EAECE3;
  --line: #E3E5DC; --line-2: #D0D3C7;
  --ink: #0F100D; --ink-2: #464A41; --ink-3: #656A5E; --ink-inv: #F5F6F1;
  --accent: #CBFF4D; --accent-2: #BBF52E; --accent-ink: #0F100D; --accent-soft: #F1FADC; --accent-line: #C2E37A; --accent-text: #3D5600; --accent-edge: #5A7A00;
  --good: #15773F; --good-soft: #E1F2E7; --warn: #8A5D00; --warn-soft: #FAF0D2; --bad: #B0281F; --bad-soft: #FBE3E0; --info: #2F5FBF; --info-soft: #E5EDFB; --violet: #6B4FD8; --violet-soft: #EEEAFD;
  --orb-a: #CBFF4D; --orb-b: #2FD08A; --orb-c: #0F100D; --orb-bg: conic-gradient(from 210deg, var(--orb-a), var(--orb-b), var(--orb-c), var(--orb-a)); --orb-shine: 1;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(15, 16, 13, .05);
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 2px rgba(15, 16, 13, .04), 0 10px 26px -8px rgba(15, 16, 13, .12);
  --shadow-lg: 0 2px 4px rgba(15, 16, 13, .04), 0 28px 64px -16px rgba(15, 16, 13, .22);
  --glass: rgba(255, 255, 255, .82);
  --f-display: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px; --r-sm: 10px; --r-xs: 8px; --r-btn: 10px; --r-pill: 999px;
  --h-weight: 600; --h-track: -.035em; --btn-glow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 8px 20px -10px rgba(110, 150, 0, .7);
  color-scheme: light;
}
:root[data-mode="dark"][data-skin="neonpro"], [data-mode="dark"] [data-skin="neonpro"] {
  --bg: #0A0A09; --bg-2: #0E0E0D; --surface: #141413; --surface-2: #1A1A18; --surface-3: #232320;
  --line: #262624; --line-2: #34342F;
  --ink: #F4F5F0; --ink-2: #B6B9AF; --ink-3: #8B8F84; --ink-inv: #0F100D;
  --accent: #CBFF4D; --accent-2: #D8FF73; --accent-ink: #0F100D; --accent-soft: #1F2A0E; --accent-line: #475C16; --accent-text: #CBFF4D; --accent-edge: #CBFF4D;
  --good: #5FD38D; --good-soft: #13261B; --warn: #F2BE4A; --warn-soft: #2A2312; --bad: #FF6A5E; --bad-soft: #301615; --info: #8DB8FF; --info-soft: #152033; --violet: #A594FF; --violet-soft: #221C44;
  --orb-c: #F4F5F0;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 14px 34px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 34px 80px -20px rgba(0, 0, 0, .75);
  --glass: rgba(20, 20, 19, .82); --btn-glow: 0 8px 22px -10px rgba(203, 255, 77, .5);
  color-scheme: dark;
}
/* Aurora: modern fintech. Electric indigo with a cyan-to-pink orb, Plus Jakarta Sans, generous radii, indigo-tinted shadows. */
:root[data-skin="aurora"], [data-skin="aurora"] {
  --bg: #F6F6FB; --bg-2: #EEEEF7; --surface: #FFFFFF; --surface-2: #F4F4FB; --surface-3: #E9E9F4;
  --line: #E3E3EF; --line-2: #CFCFE1;
  --ink: #12121C; --ink-2: #4A4A5E; --ink-3: #66667C; --ink-inv: #F6F6FB;
  --accent: #5B4FFF; --accent-2: #4A3DF0; --accent-ink: #FFFFFF; --accent-soft: #EEECFF; --accent-line: #C8C2FF; --accent-text: #4637DB; --accent-edge: #5B4FFF;
  --good: #15773F; --good-soft: #E1F2E7; --warn: #8A5D00; --warn-soft: #FAF0D2; --bad: #B0281F; --bad-soft: #FBE3E0; --info: #2F5FBF; --info-soft: #E5EDFB; --violet: #6B4FD8; --violet-soft: #EEEAFD;
  --orb-a: #7C6CFF; --orb-b: #22D3EE; --orb-c: #F472B6; --orb-bg: conic-gradient(from 180deg, var(--orb-a), var(--orb-b), var(--orb-c), var(--orb-a)); --orb-shine: 1;
  --shadow-sm: 0 1px 2px rgba(30, 27, 75, .06);
  --shadow: 0 1px 2px rgba(30, 27, 75, .05), 0 12px 32px -10px rgba(30, 27, 75, .16);
  --shadow-lg: 0 2px 6px rgba(30, 27, 75, .06), 0 32px 72px -18px rgba(30, 27, 75, .28);
  --glass: rgba(255, 255, 255, .78);
  --f-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 16px; --r-sm: 11px; --r-xs: 8px; --r-btn: 12px; --r-pill: 999px;
  --h-weight: 700; --h-track: -.03em; --btn-glow: 0 10px 24px -10px rgba(91, 79, 255, .65);
  color-scheme: light;
}
:root[data-mode="dark"][data-skin="aurora"], [data-mode="dark"] [data-skin="aurora"] {
  --bg: #0B0B12; --bg-2: #0F0F18; --surface: #14141F; --surface-2: #1A1A28; --surface-3: #232334;
  --line: #26263A; --line-2: #34344C;
  --ink: #F1F1F8; --ink-2: #B4B4C8; --ink-3: #8A8AA2; --ink-inv: #0B0B12;
  --accent: #8B7DFF; --accent-2: #9E92FF; --accent-ink: #0B0B12; --accent-soft: #1E1B3D; --accent-line: #3D3680; --accent-text: #ACA2FF; --accent-edge: #8B7DFF;
  --good: #5FD38D; --good-soft: #13261B; --warn: #F2BE4A; --warn-soft: #2A2312; --bad: #FF6A5E; --bad-soft: #301615; --info: #8DB8FF; --info-soft: #152033; --violet: #A594FF; --violet-soft: #221C44;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 14px 36px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 36px 80px -20px rgba(0, 0, 0, .75);
  --glass: rgba(20, 20, 31, .8); --btn-glow: 0 10px 26px -10px rgba(139, 125, 255, .6);
  color-scheme: dark;
}
/* Champagne: private banking. Ivory paper, deep emerald action, a gold seal; Fraunces serif headings over Inter. */
:root[data-skin="champagne"], [data-skin="champagne"] {
  --bg: #F7F4EE; --bg-2: #EFEAE1; --surface: #FFFDF9; --surface-2: #F6F1E8; --surface-3: #ECE5D8;
  --line: #E6DED0; --line-2: #D3C8B5;
  --ink: #1C1712; --ink-2: #51473C; --ink-3: #6F6355; --ink-inv: #F7F4EE;
  --accent: #0E5E46; --accent-2: #0B4F3B; --accent-ink: #FFFFFF; --accent-soft: #E3EFE8; --accent-line: #A9CDBA; --accent-text: #0E5E46; --accent-edge: #0E5E46;
  --good: #15773F; --good-soft: #E1F2E7; --warn: #8A5D00; --warn-soft: #FAF0D2; --bad: #B0281F; --bad-soft: #FBE3E0; --info: #2F5FBF; --info-soft: #E5EDFB; --violet: #6B4FD8; --violet-soft: #EEEAFD;
  --orb-a: #D9B76E; --orb-b: #0E5E46; --orb-c: #1C1712; --orb-bg: conic-gradient(from 220deg, var(--orb-a), var(--orb-b), var(--orb-c), var(--orb-a)); --orb-shine: 1;
  --shadow-sm: 0 1px 2px rgba(60, 40, 10, .07);
  --shadow: 0 1px 2px rgba(60, 40, 10, .06), 0 10px 28px -10px rgba(60, 40, 10, .16);
  --shadow-lg: 0 2px 6px rgba(60, 40, 10, .06), 0 28px 64px -18px rgba(60, 40, 10, .26);
  --glass: rgba(255, 253, 249, .85);
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 10px; --r-sm: 8px; --r-xs: 6px; --r-btn: 8px; --r-pill: 999px;
  --h-weight: 600; --h-track: -.01em; --btn-glow: 0 8px 18px -10px rgba(14, 94, 70, .55);
  color-scheme: light;
}
:root[data-mode="dark"][data-skin="champagne"], [data-mode="dark"] [data-skin="champagne"] {
  --bg: #12100D; --bg-2: #171410; --surface: #1C1915; --surface-2: #23201A; --surface-3: #2D2922;
  --line: #332E26; --line-2: #443D32;
  --ink: #F4EFE6; --ink-2: #C4B9A8; --ink-3: #9C907F; --ink-inv: #1C1712;
  --accent: #D9B76E; --accent-2: #E5C887; --accent-ink: #1C1712; --accent-soft: #2E2716; --accent-line: #6B5A33; --accent-text: #E3C483; --accent-edge: #D9B76E;
  --good: #5FD38D; --good-soft: #13261B; --warn: #F2BE4A; --warn-soft: #2A2312; --bad: #FF6A5E; --bad-soft: #301615; --info: #8DB8FF; --info-soft: #152033; --violet: #A594FF; --violet-soft: #221C44;
  --orb-c: #F4EFE6;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 30px 72px -20px rgba(0, 0, 0, .7);
  --glass: rgba(28, 25, 21, .85); --btn-glow: 0 8px 20px -10px rgba(217, 183, 110, .5);
  color-scheme: dark;
}
/* Glacier: calm and clear. Cool slate, a mint signal, Manrope, soft long shadows and round corners. */
:root[data-skin="glacier"], [data-skin="glacier"] {
  --bg: #F4F7F8; --bg-2: #EBF0F2; --surface: #FFFFFF; --surface-2: #F2F6F7; --surface-3: #E4EBEE;
  --line: #DEE6E9; --line-2: #C8D3D8;
  --ink: #0C1A22; --ink-2: #43555F; --ink-3: #5F727C; --ink-inv: #F4F7F8;
  --accent: #34E2A9; --accent-2: #1FD497; --accent-ink: #04231A; --accent-soft: #DDF8EE; --accent-line: #96E6C8; --accent-text: #00775A; --accent-edge: #00936E;
  --good: #15773F; --good-soft: #E1F2E7; --warn: #8A5D00; --warn-soft: #FAF0D2; --bad: #B0281F; --bad-soft: #FBE3E0; --info: #2F5FBF; --info-soft: #E5EDFB; --violet: #6B4FD8; --violet-soft: #EEEAFD;
  --orb-a: #34E2A9; --orb-b: #38BDF8; --orb-c: #0C1A22; --orb-bg: conic-gradient(from 160deg, var(--orb-a), var(--orb-b), var(--orb-c), var(--orb-a)); --orb-shine: 1;
  --shadow-sm: 0 1px 2px rgba(12, 26, 34, .06);
  --shadow: 0 1px 2px rgba(12, 26, 34, .05), 0 18px 40px -14px rgba(12, 26, 34, .18);
  --shadow-lg: 0 2px 6px rgba(12, 26, 34, .05), 0 40px 80px -24px rgba(12, 26, 34, .3);
  --glass: rgba(255, 255, 255, .8);
  --f-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 18px; --r-sm: 12px; --r-xs: 9px; --r-btn: 999px; --r-pill: 999px;
  --h-weight: 700; --h-track: -.03em; --btn-glow: 0 10px 24px -10px rgba(0, 147, 110, .55);
  color-scheme: light;
}
:root[data-mode="dark"][data-skin="glacier"], [data-mode="dark"] [data-skin="glacier"] {
  --bg: #091218; --bg-2: #0C171E; --surface: #101D25; --surface-2: #15252E; --surface-3: #1D303A;
  --line: #1F333D; --line-2: #2B4450;
  --ink: #EAF4F7; --ink-2: #A9BEC7; --ink-3: #7F96A0; --ink-inv: #0C1A22;
  --accent: #34E2A9; --accent-2: #5BF0BF; --accent-ink: #04231A; --accent-soft: #0F2E25; --accent-line: #1E5A47; --accent-text: #5BF0BF; --accent-edge: #34E2A9;
  --good: #5FD38D; --good-soft: #13261B; --warn: #F2BE4A; --warn-soft: #2A2312; --bad: #FF6A5E; --bad-soft: #301615; --info: #8DB8FF; --info-soft: #152033; --violet: #A594FF; --violet-soft: #221C44;
  --orb-c: #EAF4F7;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 16px 40px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .4), 0 40px 90px -24px rgba(0, 0, 0, .75);
  --glass: rgba(16, 29, 37, .82); --btn-glow: 0 10px 24px -10px rgba(52, 226, 169, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--f-ui); -webkit-font-smoothing: antialiased; }
/* a preview container with its own skin also takes that skin's type and ink */
[data-skin]:not(:root) { font-family: var(--f-ui); color: var(--ink); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-edge); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: var(--h-weight); letter-spacing: var(--h-track); text-wrap: balance; }
p { margin: 0; }
.mono, .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.muted { color: var(--ink-2); } .faint { color: var(--ink-3); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 15px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, transform .06s, box-shadow .15s; text-decoration: none !important; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--btn-glow); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--ink-inv); }
.btn.dark:hover { opacity: .9; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.sm { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn.icon { width: 36px; padding: 0; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* inputs */
.input, .textarea, .select { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 10px 13px; color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
/* One chevron for every dropdown, the same distance from the edge in every browser. */
select.select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676C5E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; padding-right: 36px; text-overflow: ellipsis; cursor: pointer; }
[data-mode="dark"] select.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4B9AE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select.select::-ms-expand { display: none; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent-edge); box-shadow: 0 0 0 4px var(--accent-soft); }
.textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
/* one-line composers: a long placeholder stays on one line instead of wrapping into a clipped second line */
textarea[rows="1"]::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

/* pills / chips */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.violet { background: var(--violet-soft); color: var(--violet); }
.pill.accent { background: var(--accent-soft); color: var(--accent-text); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: var(--r-btn); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--accent-edge); background: var(--accent-soft); color: var(--accent-text); }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }

/* agent orb */
.orb { --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; flex: none; position: relative; background: var(--orb-bg); animation: orbSpin 9s linear infinite; box-shadow: 0 0 0 2px var(--surface), 0 4px 14px -4px var(--orb-b); }
.orb::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(255,255,255,.15) 60%, transparent 70%); opacity: var(--orb-shine); }
.orb.lg { --s: 56px; } .orb.xl { --s: 88px; } .orb.sm { --s: 20px; }
.orb.busy { animation: orbSpin 1.6s linear infinite; }
@keyframes orbSpin { to { transform: rotate(360deg); } }

/* avatar */
.av { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 600 12px/1 var(--f-ui); flex: none; color: #fff; }

/* thinking dots */
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dotb 1.1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dotb { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.steps li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; opacity: .35; transition: opacity .3s; }
.steps li.on, .steps li.done { opacity: 1; }
.steps .ic { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; }
.steps li.on .ic { border-color: var(--accent-edge); border-right-color: transparent; animation: orbSpin .8s linear infinite; }
.steps li.done .ic { background: var(--good); border-color: var(--good); }
.steps li.done .ic::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.steps b { font-weight: 600; display: block; } .steps span { font-size: 12.5px; color: var(--ink-3); }

/* toasts */
.toasts { position: fixed; z-index: 120; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; width: min(460px, calc(100vw - 32px)); pointer-events: none; }
.toast { background: var(--ink); color: var(--ink-inv); border-radius: 14px; padding: 11px 14px; font-size: 13.5px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: tin .25s ease-out; }
@keyframes tin { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* simulate-the-world panel */
.sim-btn { position: fixed; z-index: 110; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); height: 40px; padding: 0 16px 0 12px; border-radius: 999px; border: 0; background: var(--ink); color: var(--ink-inv); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; box-shadow: var(--shadow-lg); }
.sim-btn .bolt { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--accent-ink); }
.sim { position: fixed; z-index: 111; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: calc(70px + env(safe-area-inset-bottom, 0px)); width: min(390px, calc(100vw - 36px)); max-height: min(72vh, 640px, calc(100dvh - 140px)); overflow: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 16px; }
.sim h4 { font-size: 15px; }
/* A drawer or dialog owns the screen; the floating simulate controls step aside so they never cover its buttons. */
body:has(.scrim:not([hidden] *)) .sim-btn, body:has(.scrim:not([hidden] *)) .sim { display: none; }
.sim .grp { margin-top: 14px; display: grid; gap: 6px; }
.sim .ev { text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 11px; padding: 9px 12px; font-size: 13px; cursor: pointer; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.sim .ev:hover { border-color: var(--accent-edge); background: var(--accent-soft); }
.sim .ev svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.sim .foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }

/* invoice paper (a document: stays light in both themes) */
.paper { --p-ink: #14161C; --p-mute: #6B7080; --p-line: #E8E9EE; background: #FFFFFF; color: var(--p-ink); border-radius: 12px; padding: 26px 28px; font: 400 12.5px/1.45 var(--f-ui); box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 44px -12px rgba(16,22,40,.28); position: relative; overflow: hidden; }
.paper::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--brand), var(--brand2)); }
.paper-h { display: flex; gap: 12px; align-items: center; }
.paper-logo { width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 700 16px/1 var(--f-display); flex: none; }
.paper-biz { font: 700 16px/1.2 var(--f-display); }
.paper-sub { color: var(--p-mute); font-size: 11px; }
.paper-no { margin-left: auto; text-align: right; display: grid; }
.paper-no span, .paper-meta span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-mute); }
.paper-no b { font: 500 13px var(--f-mono); }
.paper-meta { display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 20px 0 14px; }
.paper-meta > div { display: grid; }
.paper table { width: 100%; border-collapse: collapse; }
.paper th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-mute); text-align: left; font-weight: 600; padding: 6px 0; border-bottom: 1px solid var(--p-line); }
.paper td { padding: 9px 0; border-bottom: 1px solid var(--p-line); }
.paper th:not(:first-child), .paper td:not(:first-child) { text-align: right; font-family: var(--f-mono); padding-left: 10px; white-space: nowrap; }
.paper-total { display: flex; justify-content: flex-end; gap: 16px; align-items: baseline; margin-top: 14px; }
.paper-total b { font: 600 22px/1 var(--f-display); color: var(--brand); }
.paper-pay { margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #F4F5F8; color: var(--p-mute); font-size: 11px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.paper-pay b { color: var(--p-ink); font-weight: 600; }

.scroll { overflow: auto; min-height: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* V3.2 polish shared by every skin: softer elevation on cards, smoother focus and hover */
.card, .panel, .blk, .ccard, .kcard, .met, .nlist, .stile, .otile { box-shadow: var(--shadow-sm); }
.ccard:hover, .kcard:not(.add):hover, .stile:hover, .otile:hover { box-shadow: var(--shadow); }
.btn, .chip, .pill2, .input, .select, .textarea { transition: background .15s, border-color .15s, box-shadow .2s, transform .06s; }
.input, .select, .textarea { border-radius: var(--r-sm); }