/* NEO Design Kit v1.0 (22 Oct 2026) — every look's tokens. Default look: classic (Geekay Classic Fresh). Set <html data-skin="classic" data-brandskin="1">. */
/* ===== Logo-matched options (22 Oct 2026): G Geekay Classic Fresh, H Navy & Coral.
   Built on the logo's navy #283C55 and cyan #1589AD. Mild drifting gradient in the background;
   a flowing gradient appears only while NEO is working (top progress line, "thinking" shimmer). ===== */

:root[data-skin="classic"]{
  --canvas:#f4f8fb; --rail:#eef4f8; --surface:#ffffff; --muted:#eaf1f6; --line:#dce5ec; --line-strong:#8796a6;
  --ink:#1c2b3d; --ink-2:#3a4a5d; --ink-3:#56677a;
  --primary:#283c55; --primary-hover:#1e2f44; --on-primary:#ffffff; --soft:#e3f3f8; --accent-ink:#0e6f8e;
  --neo:#ff7a59; --on-neo:#2a0e05; --ai-ink:#a8391b; --badge:#7fd6ea; --on-badge:#0a2a33;
  --risk-soft:#fde7e4; --risk-ink:#b42318; --ok:#157a46; --ok-soft:#dff5e8; --warn-soft:#fff2da; --warn-ink:#8a4b00;
  --inverse:#1c2b3d; --on-inverse:#f4f8fb; --scrim:rgb(28 43 61/.35);
  --shadow:0 20px 50px rgb(40 60 85/.14),0 2px 6px rgb(40 60 85/.06);
  --lift:0 1px 2px rgb(40 60 85/.05),0 8px 24px -14px rgb(40 60 85/.18);
  --flow:linear-gradient(90deg,#283c55,#1589ad,#7fd6ea,#1589ad,#283c55);
  --mesh:radial-gradient(42% 36% at 8% 6%,rgb(21 137 173/.16),transparent 70%),radial-gradient(38% 32% at 96% 4%,rgb(127 214 234/.22),transparent 70%),radial-gradient(40% 34% at 80% 96%,rgb(40 60 85/.10),transparent 70%),radial-gradient(34% 30% at 14% 92%,rgb(255 122 89/.07),transparent 70%);
  --body:"Plus Jakarta Sans",system-ui,sans-serif; --display:"Plus Jakarta Sans",system-ui,sans-serif;
}
:root[data-skin="classic"][data-theme="dark"]{
  --canvas:#0e1724; --rail:#111c2b; --surface:#152235; --muted:#1b2a40; --line:#24354d; --line-strong:#5a6e86;
  --ink:#eaf2f8; --ink-2:#c2d0dc; --ink-3:#9fb2c4;
  --primary:#4cc3e6; --primary-hover:#7cd4ee; --on-primary:#062433; --soft:rgb(76 195 230/.14); --accent-ink:#7cd4ee;
  --neo:#ff9478; --on-neo:#2a0e05; --ai-ink:#ffa68f; --badge:#7fd6ea; --on-badge:#0a2a33;
  --risk-soft:rgb(255 100 90/.16); --risk-ink:#ffa198; --ok:#8ee0a8; --ok-soft:rgb(142 224 168/.12); --warn-soft:rgb(255 200 90/.12); --warn-ink:#ffd27a;
  --inverse:#eaf2f8; --on-inverse:#0e1724; --scrim:rgb(2 6 12/.6); --shadow:0 20px 50px rgb(0 0 0/.5);
  --lift:0 1px 0 rgb(255 255 255/.04) inset,0 10px 28px -14px rgb(0 0 0/.6);
  --flow:linear-gradient(90deg,#1589ad,#4cc3e6,#a8e6f5,#4cc3e6,#1589ad);
  --mesh:radial-gradient(42% 36% at 8% 6%,rgb(21 137 173/.22),transparent 70%),radial-gradient(38% 32% at 96% 4%,rgb(76 195 230/.12),transparent 70%),radial-gradient(40% 34% at 80% 96%,rgb(70 100 150/.16),transparent 70%),radial-gradient(34% 30% at 14% 92%,rgb(255 148 120/.06),transparent 70%);
}
@media (prefers-color-scheme:dark){:root[data-skin="classic"]:not([data-theme="light"]){
  --canvas:#0e1724; --rail:#111c2b; --surface:#152235; --muted:#1b2a40; --line:#24354d; --line-strong:#5a6e86;
  --ink:#eaf2f8; --ink-2:#c2d0dc; --ink-3:#9fb2c4;
  --primary:#4cc3e6; --primary-hover:#7cd4ee; --on-primary:#062433; --soft:rgb(76 195 230/.14); --accent-ink:#7cd4ee;
  --neo:#ff9478; --on-neo:#2a0e05; --ai-ink:#ffa68f; --badge:#7fd6ea; --on-badge:#0a2a33;
  --risk-soft:rgb(255 100 90/.16); --risk-ink:#ffa198; --ok:#8ee0a8; --ok-soft:rgb(142 224 168/.12); --warn-soft:rgb(255 200 90/.12); --warn-ink:#ffd27a;
  --inverse:#eaf2f8; --on-inverse:#0e1724; --scrim:rgb(2 6 12/.6); --shadow:0 20px 50px rgb(0 0 0/.5);
  --lift:0 1px 0 rgb(255 255 255/.04) inset,0 10px 28px -14px rgb(0 0 0/.6);
  --flow:linear-gradient(90deg,#1589ad,#4cc3e6,#a8e6f5,#4cc3e6,#1589ad);
  --mesh:radial-gradient(42% 36% at 8% 6%,rgb(21 137 173/.22),transparent 70%),radial-gradient(38% 32% at 96% 4%,rgb(76 195 230/.12),transparent 70%),radial-gradient(40% 34% at 80% 96%,rgb(70 100 150/.16),transparent 70%),radial-gradient(34% 30% at 14% 92%,rgb(255 148 120/.06),transparent 70%);
}}

:root[data-skin="coral"]{
  --canvas:#faf7f2; --rail:#f4efe7; --surface:#ffffff; --muted:#f2ece3; --line:#e6ded2; --line-strong:#998f82;
  --ink:#1f2a38; --ink-2:#3d4756; --ink-3:#5e6672;
  --primary:#283c55; --primary-hover:#1e2f44; --on-primary:#ffffff; --soft:#ffe9e1; --accent-ink:#0e6f8e;
  --neo:#ff6f59; --on-neo:#2a0a04; --ai-ink:#a83420; --badge:#ffc857; --on-badge:#2b1d00;
  --risk-soft:#fce4ea; --risk-ink:#9f1239; --ok:#157a46; --ok-soft:#dff5e8; --warn-soft:#fff2da; --warn-ink:#8a4b00;
  --inverse:#1f2a38; --on-inverse:#faf7f2; --scrim:rgb(31 42 56/.35);
  --shadow:0 20px 50px rgb(90 60 40/.14),0 2px 6px rgb(90 60 40/.06);
  --lift:0 1px 2px rgb(90 60 40/.05),0 8px 24px -14px rgb(90 60 40/.18);
  --flow:linear-gradient(90deg,#283c55,#1589ad,#ff6f59,#ffc857,#ff6f59,#1589ad,#283c55);
  --mesh:radial-gradient(42% 36% at 8% 6%,rgb(255 111 89/.13),transparent 70%),radial-gradient(38% 32% at 96% 4%,rgb(21 137 173/.12),transparent 70%),radial-gradient(40% 34% at 80% 96%,rgb(255 200 87/.14),transparent 70%),radial-gradient(34% 30% at 14% 92%,rgb(255 170 140/.12),transparent 70%);
  --body:"Plus Jakarta Sans",system-ui,sans-serif; --display:"Plus Jakarta Sans",system-ui,sans-serif;
}
:root[data-skin="coral"][data-theme="dark"]{
  --canvas:#12161e; --rail:#151a23; --surface:#1b2130; --muted:#222a3b; --line:#2b3446; --line-strong:#636e82;
  --ink:#f3f0ea; --ink-2:#cfcac2; --ink-3:#aab1bc;
  --primary:#56c4e3; --primary-hover:#82d4eb; --on-primary:#062433; --soft:rgb(255 140 120/.14); --accent-ink:#82d4eb;
  --neo:#ff8c78; --on-neo:#2a0a04; --ai-ink:#ffa494; --badge:#ffc857; --on-badge:#2b1d00;
  --risk-soft:rgb(255 90 130/.16); --risk-ink:#ff9eb5; --ok:#8ee0a8; --ok-soft:rgb(142 224 168/.12); --warn-soft:rgb(255 200 90/.12); --warn-ink:#ffd27a;
  --inverse:#f3f0ea; --on-inverse:#12161e; --scrim:rgb(2 4 8/.6); --shadow:0 20px 50px rgb(0 0 0/.5);
  --lift:0 1px 0 rgb(255 255 255/.04) inset,0 10px 28px -14px rgb(0 0 0/.6);
  --flow:linear-gradient(90deg,#1589ad,#56c4e3,#ff8c78,#ffc857,#ff8c78,#56c4e3,#1589ad);
  --mesh:radial-gradient(42% 36% at 8% 6%,rgb(255 120 100/.14),transparent 70%),radial-gradient(38% 32% at 96% 4%,rgb(21 137 173/.18),transparent 70%),radial-gradient(40% 34% at 80% 96%,rgb(255 200 87/.08),transparent 70%),radial-gradient(34% 30% at 14% 92%,rgb(255 140 120/.08),transparent 70%);
}
@media (prefers-color-scheme:dark){:root[data-skin="coral"]:not([data-theme="light"]){
  --canvas:#12161e; --rail:#151a23; --surface:#1b2130; --muted:#222a3b; --line:#2b3446; --line-strong:#636e82;
  --ink:#f3f0ea; --ink-2:#cfcac2; --ink-3:#aab1bc;
  --primary:#56c4e3; --primary-hover:#82d4eb; --on-primary:#062433; --soft:rgb(255 140 120/.14); --accent-ink:#82d4eb;
  --neo:#ff8c78; --on-neo:#2a0a04; --ai-ink:#ffa494; --badge:#ffc857; --on-badge:#2b1d00;
  --risk-soft:rgb(255 90 130/.16); --risk-ink:#ff9eb5; --ok:#8ee0a8; --ok-soft:rgb(142 224 168/.12); --warn-soft:rgb(255 200 90/.12); --warn-ink:#ffd27a;
  --inverse:#f3f0ea; --on-inverse:#12161e; --scrim:rgb(2 4 8/.6); --shadow:0 20px 50px rgb(0 0 0/.5);
  --lift:0 1px 0 rgb(255 255 255/.04) inset,0 10px 28px -14px rgb(0 0 0/.6);
  --flow:linear-gradient(90deg,#1589ad,#56c4e3,#ff8c78,#ffc857,#ff8c78,#56c4e3,#1589ad);
  --mesh:radial-gradient(42% 36% at 8% 6%,rgb(255 120 100/.14),transparent 70%),radial-gradient(38% 32% at 96% 4%,rgb(21 137 173/.18),transparent 70%),radial-gradient(40% 34% at 80% 96%,rgb(255 200 87/.08),transparent 70%),radial-gradient(34% 30% at 14% 92%,rgb(255 140 120/.08),transparent 70%);
}}

/* ---------- Shared for both: calm surfaces, mild moving background, activity gradient ---------- */
:root[data-brandskin] body{background:var(--canvas)}
:root[data-brandskin] body::after{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;background:var(--mesh);animation:gk-drift 40s ease-in-out infinite alternate;will-change:transform}
@keyframes gk-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.05)}100%{transform:translate3d(-3%,2%,0) scale(1.02)}}
:root[data-brandskin] .top{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root[data-brandskin] .rail{background:color-mix(in srgb,var(--rail) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
:root[data-brandskin] .card,:root[data-brandskin] .kpi{border-radius:18px;box-shadow:var(--lift)}
:root[data-brandskin] .kpi{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
:root[data-brandskin] .kpi:hover{transform:translateY(-2px)}
:root[data-brandskin] .tile{background:var(--soft);color:var(--accent-ink);border-radius:12px}
:root[data-brandskin] .navi[aria-current="page"]{background:var(--soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent-ink)}
:root[data-brandskin] .today{background:linear-gradient(100deg,var(--soft),var(--surface) 60%)}
:root[data-brandskin] .bar i{background:linear-gradient(90deg,var(--primary),#1589ad)}
:root[data-brandskin][data-theme="dark"] .bar i{background:linear-gradient(90deg,#1589ad,var(--primary))}
:root[data-brandskin] .eyebrow{color:var(--accent-ink)}
:root[data-brandskin] .avatar{background:linear-gradient(135deg,#283c55,#1589ad);color:#fff}
:root[data-skin="coral"] .avatar{background:linear-gradient(135deg,#283c55,#1589ad 60%,#ff6f59)}

/* Activity: a flowing gradient line under the top bar while NEO is working */
#gk-busy{position:fixed;left:0;right:0;top:calc(var(--top) + env(safe-area-inset-top,0px) - 1px);height:3px;z-index:66;pointer-events:none;opacity:0;transition:opacity .2s;background:var(--flow,linear-gradient(90deg,var(--primary),var(--neo),var(--primary),var(--neo)));background-size:300% 100%}
:root.gk-busy #gk-busy{opacity:1;animation:gk-flow 1.4s linear infinite}
@keyframes gk-flow{0%{background-position:0% 0}100%{background-position:300% 0}}
/* Ask NEO "thinking" card and busy buttons shimmer softly */
.gk-thinking{border-radius:14px;padding:12px;display:grid;gap:8px;background:linear-gradient(90deg,var(--soft),var(--surface),var(--soft));background-size:200% 100%;animation:gk-shimmer 1.6s ease-in-out infinite;border:1px solid var(--line)}
.gk-thinking i{display:block;height:9px;border-radius:5px;background:color-mix(in srgb,var(--ink-3) 22%,transparent)}
.gk-thinking i:nth-child(2){width:86%} .gk-thinking i:nth-child(3){width:62%}
.gk-thinking b{font:700 .7rem var(--body);letter-spacing:.04em;color:var(--ai-ink)}
@keyframes gk-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){:root[data-brandskin] body::after,:root.gk-busy #gk-busy,.gk-thinking{animation:none!important}}
/* ===== Design options (22 Oct 2026). Same layout and behaviour as frozen v0.7; only the skin changes. ===== */

/* ---------- Option A · Aurora Glass: light, frosted glass over a soft colour aurora (Fluent / Mica feel) ---------- */
:root[data-skin="aurora"]{
  --canvas:#f3f6fc; --rail:rgb(255 255 255/.55); --surface:rgb(255 255 255/.74); --muted:rgb(15 23 42/.06); --line:rgb(15 23 42/.09); --line-strong:#8792a8;
  --ink:#0f172a; --ink-2:#334155; --ink-3:#546072;
  --primary:#0b6bd3; --primary-hover:#0a5cb6; --on-primary:#fff; --soft:#dbe9ff; --accent-ink:#0a56ad;
  --neo:#ff8a3d; --on-neo:#2a1300; --ai-ink:#a14a00; --badge:#b6ff3b;
  --risk-soft:#ffe4e6; --risk-ink:#be123c; --ok:#15803d;
  --inverse:#0f172a; --on-inverse:#f8fafc;
  --shadow:0 20px 50px rgb(30 50 110/.14),0 2px 8px rgb(30 50 110/.06);
  --body:"Plus Jakarta Sans",system-ui,sans-serif; --display:"Plus Jakarta Sans",system-ui,sans-serif;
  --grad:linear-gradient(135deg,#0b6bd3,#5b4bdb); --grad-ai:linear-gradient(135deg,#ffa24d,#ff6b6b);
  --aurora:radial-gradient(60vw 50vh at 8% -10%,rgb(0 170 255/.34),transparent 60%),radial-gradient(50vw 50vh at 95% 5%,rgb(140 90 255/.30),transparent 60%),radial-gradient(60vw 45vh at 55% 110%,rgb(255 140 80/.26),transparent 60%);
}
:root[data-skin="aurora"][data-theme="dark"]{
  --canvas:#0a0f1e; --rail:rgb(16 22 42/.55); --surface:rgb(20 27 50/.66); --muted:rgb(255 255 255/.06); --line:rgb(255 255 255/.09); --line-strong:#56607a;
  --ink:#eef2ff; --ink-2:#c7cfe3; --ink-3:#9aa5bf; --primary:#5cc8ff; --primary-hover:#86d6ff; --on-primary:#06122b; --soft:rgb(92 200 255/.16); --accent-ink:#8fd8ff;
  --ai-ink:#ffab70; --risk-soft:rgb(244 63 94/.18); --risk-ink:#ff8fa3; --ok:#86efac; --inverse:#eef2ff; --on-inverse:#0a0f1e;
  --shadow:0 20px 50px rgb(0 0 0/.5); --grad:linear-gradient(135deg,#5cc8ff,#9d8cff);
  --aurora:radial-gradient(60vw 50vh at 8% -10%,rgb(0 170 255/.28),transparent 60%),radial-gradient(50vw 50vh at 95% 5%,rgb(140 90 255/.26),transparent 60%),radial-gradient(60vw 45vh at 55% 110%,rgb(255 120 80/.16),transparent 60%);
}
@media (prefers-color-scheme:dark){:root[data-skin="aurora"]:not([data-theme="light"]){
  --canvas:#0a0f1e; --rail:rgb(16 22 42/.55); --surface:rgb(20 27 50/.66); --muted:rgb(255 255 255/.06); --line:rgb(255 255 255/.09); --line-strong:#56607a;
  --ink:#eef2ff; --ink-2:#c7cfe3; --ink-3:#9aa5bf; --primary:#5cc8ff; --primary-hover:#86d6ff; --on-primary:#06122b; --soft:rgb(92 200 255/.16); --accent-ink:#8fd8ff;
  --ai-ink:#ffab70; --risk-soft:rgb(244 63 94/.18); --risk-ink:#ff8fa3; --ok:#86efac; --inverse:#eef2ff; --on-inverse:#0a0f1e;
  --shadow:0 20px 50px rgb(0 0 0/.5); --grad:linear-gradient(135deg,#5cc8ff,#9d8cff);
  --aurora:radial-gradient(60vw 50vh at 8% -10%,rgb(0 170 255/.28),transparent 60%),radial-gradient(50vw 50vh at 95% 5%,rgb(140 90 255/.26),transparent 60%),radial-gradient(60vw 45vh at 55% 110%,rgb(255 120 80/.16),transparent 60%);
}}
:root[data-skin="aurora"] body{background:var(--aurora),var(--canvas);background-attachment:fixed}
:root[data-skin="aurora"] .top,:root[data-skin="aurora"] .rail,:root[data-skin="aurora"] .card,:root[data-skin="aurora"] .kpi,:root[data-skin="aurora"] .today,:root[data-skin="aurora"] .status,:root[data-skin="aurora"] .panel,:root[data-skin="aurora"] .omni-btn{backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
:root[data-skin="aurora"] .top{background:rgb(255 255 255/.5);border-bottom-color:var(--line)}
:root[data-skin="aurora"][data-theme="dark"] .top{background:rgb(10 15 30/.45)}
@media (prefers-color-scheme:dark){:root[data-skin="aurora"]:not([data-theme="light"]) .top{background:rgb(10 15 30/.45)}}
:root[data-skin="aurora"] .card,:root[data-skin="aurora"] .kpi{border-radius:22px;border-color:rgb(255 255 255/.55);box-shadow:0 1px 0 rgb(255 255 255/.6) inset,0 10px 30px rgb(30 50 110/.08)}
:root[data-skin="aurora"] .btn:not(.ghost):not(.neo){background:var(--grad);box-shadow:0 6px 16px rgb(11 107 211/.28)}
:root[data-skin="aurora"] .btn.neo{background:var(--grad-ai);color:#2a1300;box-shadow:0 6px 16px rgb(255 120 80/.3)}
:root[data-skin="aurora"] .btn,:root[data-skin="aurora"] .chip,:root[data-skin="aurora"] .omni-btn{border-radius:999px}
:root[data-skin="aurora"] .btn.ghost{background:rgb(255 255 255/.45)}
:root[data-skin="aurora"] .navi[aria-current="page"]{background:var(--surface);box-shadow:0 4px 14px rgb(30 50 110/.10),inset 0 0 0 1px rgb(255 255 255/.6)}
:root[data-skin="aurora"] .tile{background:var(--grad);color:#fff;border-radius:12px}
:root[data-skin="aurora"] .kpi b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-skin="aurora"] .bar i{background:var(--grad)}
:root[data-skin="aurora"] h1{font-weight:800;letter-spacing:-.02em}
:root[data-skin="aurora"] .avatar{background:var(--grad)}

/* ---------- Option B · Midnight Calm: dark-first, deep indigo with soft aqua and lavender, low-glare (Linear / Arc night feel) ---------- */
:root[data-skin="calm"],:root[data-skin="calm"][data-theme="dark"]{
  --canvas:#0c1020; --rail:#0f1427; --surface:#141a30; --muted:#1b2340; --line:#252e4d; --line-strong:#56608a;
  --ink:#e9edfb; --ink-2:#bcc4e0; --ink-3:#919ac0;
  --primary:#7fd8c8; --primary-hover:#a3e6da; --on-primary:#06221d; --soft:rgb(127 216 200/.14); --accent-ink:#a3e6da;
  --neo:#c4a8ff; --on-neo:#1b0f38; --ai-ink:#cdb6ff; --badge:#b9f27c; --on-badge:#142400;
  --risk-soft:rgb(255 128 150/.16); --risk-ink:#ffa3b4; --ok:#9be3b0; --ok-soft:rgb(155 227 176/.12);
  --inverse:#e9edfb; --on-inverse:#0c1020; --scrim:rgb(4 6 14/.6);
  --shadow:0 24px 60px rgb(2 4 12/.55),0 0 0 1px rgb(255 255 255/.03);
  --body:"Inter",system-ui,sans-serif; --display:"Space Grotesk","Inter",system-ui,sans-serif;
  --grad:linear-gradient(135deg,#7fd8c8,#9fb4ff); --grad-ai:linear-gradient(135deg,#c4a8ff,#ffb3c7);
  color-scheme:dark;
}
:root[data-skin="calm"][data-theme="light"]{
  --canvas:#f4f5fb; --rail:#eef0f9; --surface:#ffffff; --muted:#eceff8; --line:#dfe3f1; --line-strong:#8a92b2;
  --ink:#141a33; --ink-2:#3a4263; --ink-3:#5a6286;
  --primary:#0e7c6b; --primary-hover:#0b6a5b; --on-primary:#ffffff; --soft:#dcf2ed; --accent-ink:#0b6a5b;
  --neo:#7c5cf0; --on-neo:#ffffff; --ai-ink:#5b3fd1; --badge:#b9f27c; --on-badge:#142400;
  --risk-soft:#ffe3e8; --risk-ink:#b4234a; --ok:#15803d; --ok-soft:#dcfce7;
  --inverse:#141a33; --on-inverse:#f4f5fb; --scrim:rgb(20 26 51/.4);
  --shadow:0 20px 50px rgb(30 40 90/.12),0 2px 6px rgb(30 40 90/.06);
  --grad:linear-gradient(135deg,#0e7c6b,#4f63d8); --grad-ai:linear-gradient(135deg,#7c5cf0,#a8437a);
  color-scheme:light;
}
:root[data-skin="calm"]:not([data-theme="light"]) .logo.light{display:none!important} :root[data-skin="calm"]:not([data-theme="light"]) .logo.dark{display:block!important}
:root[data-skin="calm"][data-theme="light"] .logo.light{display:block!important} :root[data-skin="calm"][data-theme="light"] .logo.dark{display:none!important}
:root[data-skin="calm"]:not([data-theme="light"]) body{background:radial-gradient(55vw 45vh at 90% -10%,rgb(159 180 255/.14),transparent 62%),radial-gradient(50vw 45vh at -5% 105%,rgb(127 216 200/.10),transparent 60%),var(--canvas)}
:root[data-skin="calm"][data-theme="light"] body{background:radial-gradient(55vw 45vh at 90% -10%,rgb(79 99 216/.10),transparent 62%),radial-gradient(50vw 45vh at -5% 105%,rgb(14 124 107/.08),transparent 60%),var(--canvas)}
:root[data-skin="calm"] .top{background:color-mix(in srgb,var(--canvas) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
:root[data-skin="calm"] .card,:root[data-skin="calm"] .kpi{border-radius:20px;box-shadow:0 1px 0 rgb(255 255 255/.04) inset}
:root[data-skin="calm"] .kpi:hover,:root[data-skin="calm"] .today:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
:root[data-skin="calm"] .btn,:root[data-skin="calm"] .chip,:root[data-skin="calm"] .omni-btn{border-radius:12px}
:root[data-skin="calm"] .btn.neo{background:var(--grad-ai);color:var(--on-neo)}
:root[data-skin="calm"] .tile{background:var(--soft);color:var(--accent-ink);border-radius:12px;font-family:var(--display)}
:root[data-skin="calm"] .navi[aria-current="page"]{background:var(--soft);color:var(--ink);box-shadow:inset 3px 0 0 var(--primary)}
:root[data-skin="calm"] h1,:root[data-skin="calm"] .kpi b{font-family:var(--display);letter-spacing:-.02em}
:root[data-skin="calm"] .eyebrow{color:var(--accent-ink)}
:root[data-skin="calm"] .bar i{background:var(--grad)}
:root[data-skin="calm"] .avatar{background:var(--grad);color:var(--on-primary)}

/* ---------- Option C · Bento Pop: light, bold colour blocks, playful and confident (Apple widgets / Notion Calendar feel) ---------- */
:root[data-skin="bento"]{
  --canvas:#f7f5f0; --rail:#ffffff; --surface:#ffffff; --muted:#f0eee8; --line:#e7e3da; --line-strong:#9a9385;
  --ink:#17151f; --ink-2:#3d3a48; --ink-3:#5d5967;
  --primary:#4f46e5; --primary-hover:#4338ca; --on-primary:#fff; --soft:#e8e7ff; --accent-ink:#3f37c9;
  --neo:#ff7a1a; --on-neo:#2a1100; --ai-ink:#a34700; --badge:#b6ff3b;
  --risk-soft:#ffe2e2; --risk-ink:#c01f1f; --ok:#15803d;
  --t-dec:#eef0ff; --t-dec-line:#d9ddff; --t-ann:#fff1e4; --t-ann-line:#ffdcbd; --t-today:#e6f8ef; --t-today-line:#c4ecd8;
  --t1:#e3f1ff; --t2:#f1e8ff; --t3:#fff6cc; --t4:#e2f7ec; --t5:#ffe9df;
  --shadow:0 18px 44px rgb(40 30 80/.14);
  --body:"Manrope",system-ui,sans-serif; --display:"Manrope",system-ui,sans-serif;
}
:root[data-skin="bento"][data-theme="dark"]{
  --canvas:#111018; --rail:#17161f; --surface:#1c1b25; --muted:#25232f; --line:#2f2d3a; --line-strong:#6b6780; --ink:#f4f2fb; --ink-2:#c9c5d8; --ink-3:#a29eb4;
  --primary:#8b85ff; --primary-hover:#a7a2ff; --on-primary:#120f33; --soft:rgb(139 133 255/.18); --accent-ink:#b3afff; --ai-ink:#ffa45c; --risk-soft:rgb(255 90 90/.16); --risk-ink:#ff9a9a; --ok:#86efac;
  --t-dec:#1e1d33; --t-dec-line:#2e2c52; --t-ann:#2a1f17; --t-ann-line:#4a3424; --t-today:#16261f; --t-today-line:#24402f;
  --t1:#16243a; --t2:#231a37; --t3:#2c2814; --t4:#15291f; --t5:#2d1d17;
}
@media (prefers-color-scheme:dark){:root[data-skin="bento"]:not([data-theme="light"]){
  --canvas:#111018; --rail:#17161f; --surface:#1c1b25; --muted:#25232f; --line:#2f2d3a; --line-strong:#6b6780; --ink:#f4f2fb; --ink-2:#c9c5d8; --ink-3:#a29eb4;
  --primary:#8b85ff; --primary-hover:#a7a2ff; --on-primary:#120f33; --soft:rgb(139 133 255/.18); --accent-ink:#b3afff; --ai-ink:#ffa45c; --risk-soft:rgb(255 90 90/.16); --risk-ink:#ff9a9a; --ok:#86efac;
  --t-dec:#1e1d33; --t-dec-line:#2e2c52; --t-ann:#2a1f17; --t-ann-line:#4a3424; --t-today:#16261f; --t-today-line:#24402f;
  --t1:#16243a; --t2:#231a37; --t3:#2c2814; --t4:#15291f; --t5:#2d1d17;
}}
:root[data-skin="bento"] .card{border-radius:26px;border-width:1.5px}
:root[data-skin="bento"] section[aria-labelledby="hDec"]{background:var(--t-dec);border-color:var(--t-dec-line)}
:root[data-skin="bento"] section[aria-labelledby="hAnn"]{background:var(--t-ann);border-color:var(--t-ann-line)}
:root[data-skin="bento"] .today{background:var(--t-today);border-color:var(--t-today-line);border-radius:18px}
:root[data-skin="bento"] .kpi{border-radius:24px;border:0;min-height:140px}
:root[data-skin="bento"] .pulse .kpi:nth-child(1){background:var(--t1)} :root[data-skin="bento"] .pulse .kpi:nth-child(2){background:var(--t2)}
:root[data-skin="bento"] .pulse .kpi:nth-child(3){background:var(--t3)} :root[data-skin="bento"] .pulse .kpi:nth-child(4){background:var(--t4)}
:root[data-skin="bento"] .pulse .kpi:nth-child(5){background:var(--t5)}
:root[data-skin="bento"] .kpi b{font-size:2rem;font-weight:800;letter-spacing:-.03em}
:root[data-skin="bento"] h1{font-size:2rem;font-weight:800;letter-spacing:-.03em}
:root[data-skin="bento"] h2{font-weight:800}
:root[data-skin="bento"] .btn,:root[data-skin="bento"] .chip,:root[data-skin="bento"] .omni-btn{border-radius:999px}
:root[data-skin="bento"] .btn{font-weight:700}
:root[data-skin="bento"] .btn.ghost{background:var(--surface)}
:root[data-skin="bento"] .dec{border-top-color:var(--t-dec-line)} :root[data-skin="bento"] .ann{border-top-color:var(--t-ann-line)}
:root[data-skin="bento"] .tile{background:var(--primary);color:var(--on-primary);border-radius:12px}
:root[data-skin="bento"] .navi[aria-current="page"]{background:var(--primary);color:var(--on-primary);box-shadow:none}
:root[data-skin="bento"] .navi[aria-current="page"] .glyph{color:var(--on-primary)}
:root[data-skin="bento"] .rail{border-color:var(--line)}
:root[data-skin="bento"] .status{background:var(--t-today);border-color:var(--t-today-line)}
:root[data-skin="bento"] .avatar{background:linear-gradient(135deg,#4f46e5,#ff7a1a)}
/* ===== Fluid design options D, E, F (22 Oct 2026). Same layout and behaviour as frozen v0.7.
   Shared idea: a slowly drifting mesh of soft colour behind translucent surfaces, gradient accents,
   gradient-edged cards and gentle motion. Motion stops for anyone who sets "reduce motion". ===== */

/* ---------- Shared fluid layer (active when data-fluid is set) ---------- */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
:root[data-fluid] body{background:var(--canvas)}
:root[data-fluid] body::after{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;background:var(--blobs);filter:blur(var(--blur,48px)) saturate(1.1);animation:neo-drift 30s ease-in-out infinite alternate;will-change:transform}
@keyframes neo-drift{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}50%{transform:translate3d(4%,-3%,0) scale(1.08) rotate(6deg)}100%{transform:translate3d(-4%,3%,0) scale(1.03) rotate(-5deg)}}
:root[data-fluid] .top{background:color-mix(in srgb,var(--surface-solid) 62%,transparent);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom-color:var(--line)}
:root[data-fluid] .rail{background:var(--rail);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
:root[data-fluid] .panel{background:color-mix(in srgb,var(--surface-solid) 88%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
:root[data-fluid] .card,:root[data-fluid] .kpi,:root[data-fluid] .today,:root[data-fluid] .status,:root[data-fluid] .omni-btn{background:var(--surface);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
:root[data-fluid] .card,:root[data-fluid] .kpi{border-radius:24px;border-color:var(--line);box-shadow:var(--lift)}
:root[data-fluid] .kpi,:root[data-fluid] .today,:root[data-fluid] .btn,:root[data-fluid] .navi,:root[data-fluid] .tool{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,background-position .6s ease,background-color .2s}
:root[data-fluid] .kpi:hover{transform:translateY(-3px);box-shadow:var(--lift-hover)}
:root[data-fluid] .btn:active,:root[data-fluid] .kpi:active{transform:scale(.98)}
/* gradient edge on cards and the Ask NEO button */
:root[data-fluid] .card,:root[data-fluid] .kpi,:root[data-fluid] .omni-btn,:root[data-fluid] .today{position:relative}
:root[data-fluid] .card::before,:root[data-fluid] .kpi::before,:root[data-fluid] .omni-btn::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--edge);background-size:300% 300%;animation:neo-edge 12s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:var(--edge-o,.7)}
@keyframes neo-edge{0%{background-position:0% 50%}100%{background-position:300% 50%}}
/* gradient actions */
:root[data-fluid] .btn:not(.ghost):not(.neo){background:var(--grad);background-size:200% 100%;color:var(--on-primary);box-shadow:0 8px 20px -8px var(--glow)}
:root[data-fluid] .btn:not(.ghost):not(.neo):hover{background-position:100% 0}
:root[data-fluid] .btn.neo{background:var(--grad-ai);background-size:200% 100%;color:var(--on-neo);box-shadow:0 8px 20px -8px var(--glow-ai)}
:root[data-fluid] .btn.neo:hover{background-position:100% 0}
:root[data-fluid] .btn,:root[data-fluid] .chip,:root[data-fluid] .omni-btn{border-radius:999px}
:root[data-fluid] .btn.ghost{background:color-mix(in srgb,var(--surface-solid) 70%,transparent)}
/* gradient type and data */
:root[data-fluid] h1{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.025em;font-weight:700}
:root[data-fluid] .kpi b{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-fluid] .bar i{background:var(--grad)}
:root[data-fluid] .tile{background:var(--grad);color:var(--on-primary);border-radius:12px}
:root[data-fluid] .avatar{background:var(--grad);color:var(--on-primary)}
:root[data-fluid] .navi[aria-current="page"]{background:linear-gradient(90deg,var(--soft),transparent);color:var(--ink);box-shadow:inset 3px 0 0 var(--primary)}
:root[data-fluid] .today{background:linear-gradient(100deg,var(--soft),var(--surface) 55%)}
:root[data-fluid] .eyebrow{color:var(--accent-ink)}
/* one gentle entrance on first load only */
:root[data-fluid].boot .wrap>*{animation:neo-rise .6s cubic-bezier(.2,.8,.2,1) both}
:root[data-fluid].boot .wrap>*:nth-child(2){animation-delay:.05s} :root[data-fluid].boot .wrap>*:nth-child(3){animation-delay:.1s}
:root[data-fluid].boot .wrap>*:nth-child(4){animation-delay:.15s} :root[data-fluid].boot .wrap>*:nth-child(5){animation-delay:.2s}
@keyframes neo-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:root[data-fluid] *,:root[data-fluid] body::after,:root[data-fluid] *::before{animation:none!important;transition:none!important}}

/* ---------- Option D · Liquid Sunrise: light, peach-rose-lilac-sky mesh, indigo actions, coral AI ---------- */
:root[data-skin="sunrise"]{
  --canvas:#fff6f2; --surface:rgb(255 255 255/.74); --surface-solid:#ffffff; --rail:rgb(255 255 255/.52); --muted:rgb(110 50 60/.06); --line:rgb(110 50 60/.11); --line-strong:#9b8a8f;
  --ink:#22151c; --ink-2:#4a3440; --ink-3:#6a5360;
  --primary:#4338ca; --primary-hover:#3730a3; --on-primary:#ffffff; --soft:#ebe8ff; --accent-ink:#3730a3;
  --neo:#ff7a6b; --on-neo:#2a0a12; --ai-ink:#b02a5a; --badge:#ffd166; --on-badge:#2b1d00;
  --risk-soft:#ffe1dc; --risk-ink:#b42318; --ok:#157a46; --ok-soft:#dcf7e6; --warn-soft:#fff0d6; --warn-ink:#8a4b00;
  --inverse:#22151c; --on-inverse:#fff6f2; --scrim:rgb(34 21 28/.35);
  --shadow:0 24px 60px rgb(120 50 60/.16),0 2px 8px rgb(120 50 60/.06);
  --lift:0 1px 0 rgb(255 255 255/.7) inset,0 10px 30px -12px rgb(120 50 60/.18); --lift-hover:0 1px 0 rgb(255 255 255/.7) inset,0 18px 40px -14px rgb(120 50 60/.28);
  --grad:linear-gradient(110deg,#4338ca,#7c3aed,#4338ca); --grad-ai:linear-gradient(110deg,#ff8a6b,#ff6f9a,#ff8a6b);
  --grad-text:linear-gradient(100deg,#3730a3,#a61e6a); --glow:rgb(67 56 202/.55); --glow-ai:rgb(255 111 154/.6);
  --edge:linear-gradient(90deg,rgb(255 160 120/.9),rgb(255 130 175/.9),rgb(170 150 255/.9),rgb(120 200 255/.9),rgb(255 160 120/.9));
  --blobs:radial-gradient(circle at 12% 18%,rgb(255 170 130/.55) 0,transparent 32%),radial-gradient(circle at 88% 8%,rgb(255 140 185/.45) 0,transparent 30%),radial-gradient(circle at 75% 82%,rgb(175 155 255/.45) 0,transparent 34%),radial-gradient(circle at 18% 88%,rgb(130 205 255/.40) 0,transparent 32%);
  --body:"Outfit",system-ui,sans-serif; --display:"Outfit",system-ui,sans-serif;
}
:root[data-skin="sunrise"][data-theme="dark"]{
  --canvas:#150d1b; --surface:rgb(34 22 44/.72); --surface-solid:#22162c; --rail:rgb(26 16 34/.56); --muted:rgb(255 255 255/.06); --line:rgb(255 255 255/.10); --line-strong:#7c6a88;
  --ink:#f8eef7; --ink-2:#d8c7da; --ink-3:#bdaec3; --primary:#aeb0ff; --primary-hover:#c7c8ff; --on-primary:#12123a; --soft:rgb(174 176 255/.16); --accent-ink:#c7c8ff;
  --neo:#ff8f80; --on-neo:#2a0a12; --ai-ink:#ffa3bd; --badge:#ffd166; --on-badge:#2b1d00; --risk-soft:rgb(255 90 90/.18); --risk-ink:#ffa198; --ok:#8ee0a8; --ok-soft:rgb(142 224 168/.12);
  --inverse:#f8eef7; --on-inverse:#150d1b; --scrim:rgb(5 2 8/.6); --shadow:0 24px 60px rgb(0 0 0/.55);
  --lift:0 1px 0 rgb(255 255 255/.05) inset,0 12px 32px -14px rgb(0 0 0/.6); --lift-hover:0 18px 44px -14px rgb(0 0 0/.7);
  --grad:linear-gradient(110deg,#aeb0ff,#d6a8ff,#aeb0ff); --grad-ai:linear-gradient(110deg,#ff9a80,#ff8fb8,#ff9a80); --grad-text:linear-gradient(100deg,#c7c8ff,#ffb0c8); --glow:rgb(174 176 255/.45); --glow-ai:rgb(255 143 184/.45);
  --blobs:radial-gradient(circle at 12% 18%,rgb(255 140 110/.30) 0,transparent 32%),radial-gradient(circle at 88% 8%,rgb(255 110 170/.26) 0,transparent 30%),radial-gradient(circle at 75% 82%,rgb(150 120 255/.30) 0,transparent 34%),radial-gradient(circle at 18% 88%,rgb(90 170 255/.22) 0,transparent 32%);
}
@media (prefers-color-scheme:dark){:root[data-skin="sunrise"]:not([data-theme="light"]){
  --canvas:#150d1b; --surface:rgb(34 22 44/.72); --surface-solid:#22162c; --rail:rgb(26 16 34/.56); --muted:rgb(255 255 255/.06); --line:rgb(255 255 255/.10); --line-strong:#7c6a88;
  --ink:#f8eef7; --ink-2:#d8c7da; --ink-3:#bdaec3; --primary:#aeb0ff; --primary-hover:#c7c8ff; --on-primary:#12123a; --soft:rgb(174 176 255/.16); --accent-ink:#c7c8ff;
  --neo:#ff8f80; --on-neo:#2a0a12; --ai-ink:#ffa3bd; --badge:#ffd166; --on-badge:#2b1d00; --risk-soft:rgb(255 90 90/.18); --risk-ink:#ffa198; --ok:#8ee0a8; --ok-soft:rgb(142 224 168/.12);
  --inverse:#f8eef7; --on-inverse:#150d1b; --scrim:rgb(5 2 8/.6); --shadow:0 24px 60px rgb(0 0 0/.55);
  --lift:0 1px 0 rgb(255 255 255/.05) inset,0 12px 32px -14px rgb(0 0 0/.6); --lift-hover:0 18px 44px -14px rgb(0 0 0/.7);
  --grad:linear-gradient(110deg,#aeb0ff,#d6a8ff,#aeb0ff); --grad-ai:linear-gradient(110deg,#ff9a80,#ff8fb8,#ff9a80); --grad-text:linear-gradient(100deg,#c7c8ff,#ffb0c8); --glow:rgb(174 176 255/.45); --glow-ai:rgb(255 143 184/.45);
  --blobs:radial-gradient(circle at 12% 18%,rgb(255 140 110/.30) 0,transparent 32%),radial-gradient(circle at 88% 8%,rgb(255 110 170/.26) 0,transparent 30%),radial-gradient(circle at 75% 82%,rgb(150 120 255/.30) 0,transparent 34%),radial-gradient(circle at 18% 88%,rgb(90 170 255/.22) 0,transparent 32%);
}}

/* ---------- Option E · Ocean Flow: dark-first deep sea, mint-aqua actions, periwinkle AI, flowing teal-blue-violet currents ---------- */
:root[data-skin="ocean"],:root[data-skin="ocean"][data-theme="dark"]{
  --canvas:#03121a; --surface:rgb(8 32 44/.72); --surface-solid:#0a2633; --rail:rgb(4 22 31/.6); --muted:rgb(160 240 255/.07); --line:rgb(160 240 255/.11); --line-strong:#527884;
  --ink:#e6fbff; --ink-2:#b6d9e1; --ink-3:#a9ccd5;
  --primary:#3ee6c4; --primary-hover:#7af0d7; --on-primary:#00231b; --soft:rgb(62 230 196/.14); --accent-ink:#7af0d7;
  --neo:#8aa9ff; --on-neo:#06123a; --ai-ink:#a8beff; --badge:#d4ff5e; --on-badge:#1a2600;
  --risk-soft:rgb(255 110 130/.17); --risk-ink:#ff9fae; --ok:#7af0a0; --ok-soft:rgb(122 240 160/.12); --warn-soft:rgb(255 200 90/.12); --warn-ink:#ffd27a;
  --inverse:#e6fbff; --on-inverse:#03121a; --scrim:rgb(0 6 10/.6); --shadow:0 24px 60px rgb(0 0 0/.55);
  --lift:0 1px 0 rgb(160 240 255/.06) inset,0 14px 34px -16px rgb(0 0 0/.7); --lift-hover:0 0 0 1px rgb(62 230 196/.25),0 20px 44px -16px rgb(0 0 0/.8);
  --grad:linear-gradient(110deg,#3ee6c4,#8aa9ff,#3ee6c4); --grad-ai:linear-gradient(110deg,#8aa9ff,#c3a6ff,#8aa9ff); --grad-text:linear-gradient(100deg,#7af0d7,#a8beff);
  --glow:rgb(62 230 196/.45); --glow-ai:rgb(138 169 255/.5);
  --edge:linear-gradient(90deg,rgb(62 230 196/.85),rgb(56 140 255/.75),rgb(150 110 255/.75),rgb(62 230 196/.85)); --edge-o:.65;
  --blobs:radial-gradient(ellipse 45% 30% at 15% 20%,rgb(15 181 167/.36) 0,transparent 70%),radial-gradient(ellipse 40% 28% at 85% 15%,rgb(37 99 235/.34) 0,transparent 70%),radial-gradient(ellipse 50% 30% at 65% 85%,rgb(124 58 237/.32) 0,transparent 70%),radial-gradient(ellipse 35% 25% at 20% 85%,rgb(14 165 233/.30) 0,transparent 70%);
  --blur:60px;
  --body:"Lexend",system-ui,sans-serif; --display:"Lexend",system-ui,sans-serif;
  color-scheme:dark;
}
:root[data-skin="ocean"][data-theme="light"]{
  --canvas:#effbfb; --surface:rgb(255 255 255/.76); --surface-solid:#ffffff; --rail:rgb(255 255 255/.55); --muted:rgb(0 60 70/.06); --line:rgb(0 60 70/.11); --line-strong:#7b9aa1;
  --ink:#072a33; --ink-2:#24505a; --ink-3:#36585f;
  --primary:#0b7a6c; --primary-hover:#08665a; --on-primary:#ffffff; --soft:#d4f3ee; --accent-ink:#08665a;
  --neo:#3f5fe0; --on-neo:#ffffff; --ai-ink:#3450c8; --badge:#d4ff5e; --on-badge:#1a2600;
  --risk-soft:#ffe2e6; --risk-ink:#b4233f; --ok:#157a46; --ok-soft:#dcf7e6; --warn-soft:#fff3d6; --warn-ink:#8a4b00;
  --inverse:#072a33; --on-inverse:#effbfb; --scrim:rgb(7 42 51/.35); --shadow:0 24px 60px rgb(0 70 80/.16);
  --lift:0 1px 0 rgb(255 255 255/.7) inset,0 10px 30px -12px rgb(0 70 80/.2); --lift-hover:0 18px 40px -14px rgb(0 70 80/.3);
  --grad:linear-gradient(110deg,#0b7a6c,#2f5bd8,#0b7a6c); --grad-ai:linear-gradient(110deg,#3f5fe0,#7c3aed,#3f5fe0); --grad-text:linear-gradient(100deg,#08665a,#3450c8);
  --glow:rgb(11 122 108/.5); --glow-ai:rgb(63 95 224/.5);
  --blobs:radial-gradient(ellipse 45% 30% at 15% 20%,rgb(45 212 191/.40) 0,transparent 70%),radial-gradient(ellipse 40% 28% at 85% 15%,rgb(96 165 250/.38) 0,transparent 70%),radial-gradient(ellipse 50% 30% at 65% 85%,rgb(167 139 250/.30) 0,transparent 70%),radial-gradient(ellipse 35% 25% at 20% 85%,rgb(56 189 248/.30) 0,transparent 70%);
  color-scheme:light;
}
:root[data-skin="ocean"]:not([data-theme="light"]) .logo.light{display:none!important} :root[data-skin="ocean"]:not([data-theme="light"]) .logo.dark{display:block!important}
:root[data-skin="ocean"][data-theme="light"] .logo.light{display:block!important} :root[data-skin="ocean"][data-theme="light"] .logo.dark{display:none!important}

/* ---------- Option F · Iris Holographic: light pearl with iridescent accents that slowly rotate ---------- */
:root[data-skin="iris"]{
  --canvas:#f6f6fb; --surface:rgb(255 255 255/.78); --surface-solid:#ffffff; --rail:rgb(255 255 255/.6); --muted:rgb(30 30 70/.05); --line:rgb(30 30 70/.10); --line-strong:#8d8eaa;
  --ink:#15152b; --ink-2:#3c3c5a; --ink-3:#5c5c7a;
  --primary:#4f46e5; --primary-hover:#4338ca; --on-primary:#ffffff; --soft:#ecebff; --accent-ink:#4338ca;
  --neo:#ff7ab8; --on-neo:#2b0619; --ai-ink:#a8236a; --badge:#9dffcf; --on-badge:#00301a;
  --risk-soft:#ffe3e3; --risk-ink:#b42318; --ok:#15803d; --ok-soft:#dcfce7; --warn-soft:#fff3d6; --warn-ink:#8a4b00;
  --inverse:#15152b; --on-inverse:#f6f6fb; --scrim:rgb(21 21 43/.35); --shadow:0 24px 60px rgb(60 50 120/.16);
  --lift:0 1px 0 rgb(255 255 255/.8) inset,0 10px 30px -12px rgb(60 50 120/.18); --lift-hover:0 18px 40px -14px rgb(60 50 120/.3);
  --holo:conic-gradient(from var(--a),#ff9ad5,#b69cff,#7dd3fc,#86efac,#fde68a,#ff9ad5);
  --grad:linear-gradient(110deg,#4f46e5,#2563eb,#0e7490,#4f46e5); --grad-ai:linear-gradient(110deg,#ff8ac2,#c4a1ff,#ff8ac2); --grad-text:linear-gradient(100deg,#4338ca,#0e7490 60%,#a8236a);
  --glow:rgb(79 70 229/.5); --glow-ai:rgb(255 122 184/.55);
  --edge:linear-gradient(90deg,#ff9ad5,#b69cff,#7dd3fc,#86efac,#fde68a,#ff9ad5); --edge-o:.85;
  --blobs:radial-gradient(circle at 15% 15%,rgb(255 154 213/.40) 0,transparent 30%),radial-gradient(circle at 85% 12%,rgb(125 211 252/.42) 0,transparent 30%),radial-gradient(circle at 80% 85%,rgb(134 239 172/.32) 0,transparent 32%),radial-gradient(circle at 20% 85%,rgb(182 156 255/.40) 0,transparent 32%);
  --body:"DM Sans",system-ui,sans-serif; --display:"DM Sans",system-ui,sans-serif;
}
:root[data-skin="iris"][data-theme="dark"]{
  --canvas:#0c0c16; --surface:rgb(24 24 42/.74); --surface-solid:#181829; --rail:rgb(16 16 28/.6); --muted:rgb(255 255 255/.06); --line:rgb(255 255 255/.10); --line-strong:#62637f;
  --ink:#f2f2ff; --ink-2:#c7c7e2; --ink-3:#9c9cba; --primary:#a9a5ff; --primary-hover:#c5c2ff; --on-primary:#12103a; --soft:rgb(169 165 255/.16); --accent-ink:#c5c2ff;
  --neo:#ff8cc6; --on-neo:#2b0619; --ai-ink:#ffa8d4; --badge:#9dffcf; --on-badge:#00301a; --risk-soft:rgb(255 90 90/.16); --risk-ink:#ffa3a3; --ok:#86efac; --ok-soft:rgb(134 239 172/.12);
  --inverse:#f2f2ff; --on-inverse:#0c0c16; --scrim:rgb(0 0 5/.6); --shadow:0 24px 60px rgb(0 0 0/.55);
  --lift:0 1px 0 rgb(255 255 255/.05) inset,0 12px 32px -14px rgb(0 0 0/.6); --lift-hover:0 18px 44px -14px rgb(0 0 0/.7);
  --grad:linear-gradient(110deg,#a9a5ff,#8fd3ff,#9ff0c8,#a9a5ff); --grad-ai:linear-gradient(110deg,#ff9cce,#c9adff,#ff9cce); --grad-text:linear-gradient(100deg,#c5c2ff,#8fd3ff 55%,#ffa8d4);
  --glow:rgb(169 165 255/.45); --glow-ai:rgb(255 140 198/.45);
  --blobs:radial-gradient(circle at 15% 15%,rgb(255 120 200/.22) 0,transparent 30%),radial-gradient(circle at 85% 12%,rgb(90 190 252/.24) 0,transparent 30%),radial-gradient(circle at 80% 85%,rgb(110 230 160/.16) 0,transparent 32%),radial-gradient(circle at 20% 85%,rgb(160 130 255/.24) 0,transparent 32%);
}
@media (prefers-color-scheme:dark){:root[data-skin="iris"]:not([data-theme="light"]){
  --canvas:#0c0c16; --surface:rgb(24 24 42/.74); --surface-solid:#181829; --rail:rgb(16 16 28/.6); --muted:rgb(255 255 255/.06); --line:rgb(255 255 255/.10); --line-strong:#62637f;
  --ink:#f2f2ff; --ink-2:#c7c7e2; --ink-3:#9c9cba; --primary:#a9a5ff; --primary-hover:#c5c2ff; --on-primary:#12103a; --soft:rgb(169 165 255/.16); --accent-ink:#c5c2ff;
  --neo:#ff8cc6; --on-neo:#2b0619; --ai-ink:#ffa8d4; --badge:#9dffcf; --on-badge:#00301a; --risk-soft:rgb(255 90 90/.16); --risk-ink:#ffa3a3; --ok:#86efac; --ok-soft:rgb(134 239 172/.12);
  --inverse:#f2f2ff; --on-inverse:#0c0c16; --scrim:rgb(0 0 5/.6); --shadow:0 24px 60px rgb(0 0 0/.55);
  --lift:0 1px 0 rgb(255 255 255/.05) inset,0 12px 32px -14px rgb(0 0 0/.6); --lift-hover:0 18px 44px -14px rgb(0 0 0/.7);
  --grad:linear-gradient(110deg,#a9a5ff,#8fd3ff,#9ff0c8,#a9a5ff); --grad-ai:linear-gradient(110deg,#ff9cce,#c9adff,#ff9cce); --grad-text:linear-gradient(100deg,#c5c2ff,#8fd3ff 55%,#ffa8d4);
  --glow:rgb(169 165 255/.45); --glow-ai:rgb(255 140 198/.45);
  --blobs:radial-gradient(circle at 15% 15%,rgb(255 120 200/.22) 0,transparent 30%),radial-gradient(circle at 85% 12%,rgb(90 190 252/.24) 0,transparent 30%),radial-gradient(circle at 80% 85%,rgb(110 230 160/.16) 0,transparent 32%),radial-gradient(circle at 20% 85%,rgb(160 130 255/.24) 0,transparent 32%);
}}
/* iridescent signature: rotating holo on the AI button, active app tile, avatar and the Ask NEO edge */
:root[data-skin="iris"] .tile,:root[data-skin="iris"] .avatar{background:var(--holo);color:#15152b;animation:neo-spin 14s linear infinite}
:root[data-skin="iris"] .omni-btn::before{background:var(--holo);background-size:auto;animation:neo-spin 8s linear infinite;opacity:.95}
:root[data-skin="iris"] .count,:root[data-skin="iris"] .dot,:root[data-skin="iris"] .navi .n{background:var(--holo);color:#15152b;animation:neo-spin 10s linear infinite}
@keyframes neo-spin{to{--a:360deg}}


/* ===== Original warm (v0.7) — "More looks" ===== */
:root[data-skin="original"]{
  --canvas:#f5f1e8; --rail:#efeadf; --surface:#fcfaf5; --muted:#ebe5d8; --line:#ddd6c6; --line-strong:#857d6c;
  --ink:#1f1c15; --ink-2:#4b463a; --ink-3:#655f51;
  --primary:#00729e; --primary-hover:#005f84; --on-primary:#fff; --soft:#d8e2df; --accent-ink:#005f84;
  --neo:#ff8a3d; --on-neo:#2a1300; --warn-soft:#f7e1cd; --warn-ink:#9a4400; --ai-ink:#9a4400;
  --risk-soft:#fbe4e1; --risk-ink:#b42318;
  --ok:#3d6100; --ok-soft:#dfe0cc; --badge:#b6ff3b; --on-badge:#2a1300;
  --inverse:#1f1c15; --on-inverse:#f5f1e8; --scrim:rgb(31 28 21/.4);
  --shadow:0 18px 48px rgb(60 50 30/.14),0 2px 6px rgb(60 50 30/.08);
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Sora","IBM Plex Sans",system-ui,sans-serif;
  --on-mark:#ffffff; --tap:44px; --railw:64px; --leftw:256px; --rightw:360px; --top:60px;
}
:root[data-skin="original"][data-theme="dark"]{
  --canvas:#100f0c; --rail:#151410; --surface:#1a1813; --muted:#211e18; --line:#2e2b24; --line-strong:#756f62;
  --ink:#f5f3ee; --ink-2:#bfb9ae; --ink-3:#a29c90;
  --primary:#009ed6; --primary-hover:#33b4e0; --on-primary:#03222f; --soft:#0d262c; --accent-ink:#33b4e0;
  --warn-soft:#362314; --warn-ink:#ff8a3d; --ai-ink:#ff8a3d; --risk-soft:#3a1714; --risk-ink:#ff8b80; --ok:#b6ff3b; --ok-soft:#242c12;
  --inverse:#f5f3ee; --on-inverse:#100f0c; --scrim:rgb(0 0 0/.6); --shadow:0 18px 48px rgb(0 0 0/.55),0 2px 6px rgb(0 0 0/.3);
}
@media (prefers-color-scheme:dark){:root[data-skin="original"]:not([data-theme="light"]){
  --canvas:#100f0c; --rail:#151410; --surface:#1a1813; --muted:#211e18; --line:#2e2b24; --line-strong:#756f62;
  --ink:#f5f3ee; --ink-2:#bfb9ae; --ink-3:#a29c90;
  --primary:#009ed6; --primary-hover:#33b4e0; --on-primary:#03222f; --soft:#0d262c; --accent-ink:#33b4e0;
  --warn-soft:#362314; --warn-ink:#ff8a3d; --ai-ink:#ff8a3d; --risk-soft:#3a1714; --risk-ink:#ff8b80; --ok:#b6ff3b; --ok-soft:#242c12;
  --inverse:#f5f3ee; --on-inverse:#100f0c; --scrim:rgb(0 0 0/.6); --shadow:0 18px 48px rgb(0 0 0/.55),0 2px 6px rgb(0 0 0/.3);
}}