/* ============================================================================
   DocStudio · extra experimental looks (opt-in, fully revertible)
     · body.aqua.aqua-day  — light Apple glass ("Day")
     · body.nova           — holographic / iridescent dark ("Nova")
   Switch: topbar glass button cycles  Original → Aqua → Day → Nova,
           or URL ?look=aqua|day|nova|off.  Original look untouched.
   ============================================================================ */

/* ============================ AQUA · DAY (light glass) ====================== */
body.aqua.aqua-day {
  --glass:        rgba(255,255,255,.58);
  --glass-2:      rgba(255,255,255,.42);
  --glass-strong: rgba(255,255,255,.78);
  --glass-deep:   rgba(255,255,255,.66);
  --hair:    rgba(20,40,90,.12);
  --hair-hi: rgba(20,40,90,.24);
  --sheen:   rgba(255,255,255,.95);
  --txt:      #16203a;
  --txt-dim:  #44506c;
  --txt-mute: #79829a;

  --text: var(--txt); --text-dim: var(--txt-dim); --text-mute: var(--txt-mute);
  --surface: var(--glass); --surface-2: var(--glass-2); --panel: var(--glass-deep);
  --border: var(--hair); --border-hi: var(--hair-hi);
  color: var(--txt);
  background:
    radial-gradient(1100px 720px at 14% -8%,  #cfe0ff, transparent 56%),
    radial-gradient(980px 680px at 92% 6%,     #ecdfff, transparent 54%),
    radial-gradient(920px 760px at 60% 112%,   #d2f2ff, transparent 56%),
    linear-gradient(160deg, #eef3ff 0%, #e7edfb 60%, #eef4ff 100%) !important;
}
body.aqua.aqua-day::before { mix-blend-mode: multiply; opacity: .035; }
body.aqua.aqua-day #aurora { opacity: .5; filter: blur(82px) saturate(1.05); }
body.aqua.aqua-day #aurora i:nth-child(1){ background: radial-gradient(circle, #9cc2ff, transparent 70%); }
body.aqua.aqua-day #aurora i:nth-child(2){ background: radial-gradient(circle, #c5b1ff, transparent 70%); }
body.aqua.aqua-day #aurora i:nth-child(3){ background: radial-gradient(circle, #a6e6ff, transparent 70%); }

/* flip dark-only bits to light */
body.aqua.aqua-day .topbar,
body.aqua.aqua-day .setup-panel,
body.aqua.aqua-day .prompt-card,
body.aqua.aqua-day .examples { background: rgba(255,255,255,.5); }
body.aqua.aqua-day .brand-mark {
  background: linear-gradient(180deg, #182343, #3a63b8); -webkit-background-clip: text; background-clip: text;
}
body.aqua.aqua-day .hero-title {
  background: linear-gradient(176deg, #16203a 0%, #274a8f 60%, #3367c4 100%);
  -webkit-background-clip: text; background-clip: text;
}
body.aqua.aqua-day .hero-prompt { color: var(--txt); }
body.aqua.aqua-day .hero-prompt::placeholder { color: var(--txt-mute); }
body.aqua.aqua-day .text-input, body.aqua.aqua-day .select {
  background: rgba(255,255,255,.62); color: var(--txt); box-shadow: 0 1px 1px rgba(20,40,90,.05) inset;
}
body.aqua.aqua-day .select option { background: #fff; color: var(--txt); }
body.aqua.aqua-day .eyebrow-tag { color: #2f62c8; }
body.aqua.aqua-day .seg button.active,
body.aqua.aqua-day .len-card, body.aqua.aqua-day .imgsrc-card, body.aqua.aqua-day .theme-card,
body.aqua.aqua-day .rlen-card, body.aqua.aqua-day .ex-card, body.aqua.aqua-day .btn-ghost,
body.aqua.aqua-day .more-themes, body.aqua.aqua-day .link-back, body.aqua.aqua-day .btn-improve,
body.aqua.aqua-day .qpill { color: var(--txt-dim); }
body.aqua.aqua-day .setup-h, body.aqua.aqua-day .opt-title,
body.aqua.aqua-day .seg button.active { color: var(--txt); }
body.aqua.aqua-day .glass-toggle { color: #2f62c8; background: rgba(10,132,255,.12); border-color: rgba(10,132,255,.34); }
body.aqua.aqua-day *::-webkit-scrollbar-thumb { background: rgba(20,40,90,.18); background-clip: content-box; }
body.aqua.aqua-day .regen-box, body.aqua.aqua-day .dsm-box, body.aqua.aqua-day .cd-box {
  background: rgba(255,255,255,.78) !important; color: var(--txt);
}
body.aqua.aqua-day .regen-title, body.aqua.aqua-day .dsm-head h3 { color: #16203a; }


/* ============================ NOVA (holographic dark) ====================== */
body.nova {
  --iri-a: #22d3ee;   /* cyan   */
  --iri-b: #7c5cff;   /* violet */
  --iri-c: #ec4899;   /* magenta*/

  --txt:      #eef0ff;
  --txt-dim:  #b8bddc;
  --txt-mute: #7f85a8;

  --glass:        rgba(124,92,255,.07);
  --glass-2:      rgba(255,255,255,.035);
  --glass-strong: rgba(124,92,255,.16);
  --panel:        rgba(14,12,26,.6);
  --hair:    rgba(255,255,255,.10);
  --hair-hi: rgba(124,92,255,.55);

  --text: var(--txt); --text-dim: var(--txt-dim); --text-mute: var(--txt-mute);
  --accent: var(--iri-b); --accent-2: var(--iri-a); --accent-rgb: 124,92,255;
  --surface: var(--glass); --surface-2: var(--glass-2); --border: var(--hair); --border-hi: var(--hair-hi);
  --radius: 18px; --radius-sm: 12px;

  color: var(--txt);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1;
  background:
    radial-gradient(1000px 700px at 10% -6%, rgba(124,92,255,.36), transparent 56%),
    radial-gradient(900px 680px at 92% 4%,   rgba(236,72,153,.24), transparent 54%),
    radial-gradient(920px 780px at 62% 114%, rgba(34,211,238,.22), transparent 56%),
    linear-gradient(160deg, #0a0814 0%, #08060f 60%, #0a0716 100%) !important;
  background-attachment: fixed;
}
body.nova::before {
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body.nova #aurora { opacity: .6; filter: blur(70px) saturate(1.5); }
body.nova #aurora i:nth-child(1){ background: radial-gradient(circle, var(--iri-b), transparent 70%); }
body.nova #aurora i:nth-child(2){ background: radial-gradient(circle, var(--iri-c), transparent 70%); }
body.nova #aurora i:nth-child(3){ background: radial-gradient(circle, var(--iri-a), transparent 70%); }
body.nova .screen { position: relative; z-index: 1; }

/* iridescent gradient-border surfaces */
body.nova .topbar, body.nova .setup-panel, body.nova .prompt-card, body.nova .examples,
body.nova .regen-box, body.nova .dsm-box, body.nova .cd-box {
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.7), rgba(124,92,255,.7) 48%, rgba(236,72,153,.7)) border-box;
  border: 1px solid transparent;
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.85), 0 0 46px -22px rgba(124,92,255,.55);
}
body.nova .setup-main, body.nova .build-stage, body.nova .stage, body.nova .screen-center { background: transparent !important; }

body.nova .brand-mark, body.nova .hero-title {
  background: linear-gradient(110deg, var(--iri-a), var(--iri-b) 50%, var(--iri-c));
  -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.03em;
}
body.nova .hero-sub, body.nova .hint { color: var(--txt-dim); }
body.nova .eyebrow-tag {
  border: 1px solid transparent; border-radius: 999px;
  background: linear-gradient(#11101f,#11101f) padding-box, linear-gradient(120deg,var(--iri-a),var(--iri-c)) border-box;
  color: #d7c9ff;
}

/* controls */
body.nova .text-input, body.nova .select {
  background: rgba(255,255,255,.04); border: 1px solid var(--hair); color: var(--txt); border-radius: 12px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body.nova .text-input:focus, body.nova .select:focus {
  border-color: var(--iri-b); box-shadow: 0 0 0 4px rgba(124,92,255,.22);
}
body.nova .text-input::placeholder { color: var(--txt-mute); }
body.nova .select option { background: #0c0a18; color: var(--txt); }
body.nova .seg { background: rgba(255,255,255,.04); border: 1px solid var(--hair); border-radius: 12px; padding: 4px; }
body.nova .seg button { border: 0; background: transparent; color: var(--txt-dim); border-radius: 9px; }
body.nova .seg button.active {
  color: #fff;
  background: linear-gradient(120deg, rgba(34,211,238,.28), rgba(124,92,255,.32) 50%, rgba(236,72,153,.28));
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
}

/* cards */
body.nova .type-card, body.nova .len-card, body.nova .imgsrc-card, body.nova .theme-card,
body.nova .rlen-card, body.nova .ex-card, body.nova .len-doc {
  background: rgba(255,255,255,.035); border: 1px solid var(--hair); border-radius: 14px;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .16s, background .16s, box-shadow .16s;
}
body.nova .type-card:hover, body.nova .len-card:hover, body.nova .imgsrc-card:hover,
body.nova .theme-card:hover, body.nova .rlen-card:hover, body.nova .ex-card:hover {
  transform: translateY(-2px); background: rgba(255,255,255,.06);
  border-color: transparent;
  background:
    linear-gradient(#13111f,#13111f) padding-box,
    linear-gradient(135deg, rgba(34,211,238,.6), rgba(124,92,255,.6), rgba(236,72,153,.6)) border-box;
}
body.nova .type-card.active, body.nova .len-card.active, body.nova .imgsrc-card.active,
body.nova .theme-card.active, body.nova .rlen-card.active {
  border-color: transparent;
  background:
    linear-gradient(#15122244,#15122244) padding-box,
    linear-gradient(135deg, var(--iri-a), var(--iri-b) 50%, var(--iri-c)) border-box;
  box-shadow: 0 12px 30px -14px rgba(124,92,255,.6);
}
body.nova .type-card.active .type-ic { background: rgba(124,92,255,.24); color: #c9b8ff; }

/* primary button — vivid gradient pill */
body.nova .btn-primary {
  position: relative; overflow: hidden; border: 0; border-radius: 999px; color: #fff; font-weight: 600;
  background: linear-gradient(110deg, var(--iri-a) 0%, var(--iri-b) 50%, var(--iri-c) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px -10px rgba(124,92,255,.7);
  transition: transform .16s, filter .16s;
}
body.nova .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.05); }
body.nova .btn-primary:active { transform: translateY(0) scale(.985); }
body.nova .btn-ghost, body.nova .more-themes, body.nova .link-back, body.nova .btn-improve, body.nova .qpill {
  background: rgba(255,255,255,.04); border: 1px solid var(--hair); color: var(--txt-dim); border-radius: 999px;
}
body.nova .btn-ghost:hover, body.nova .more-themes:hover, body.nova .link-back:hover, body.nova .btn-improve:hover {
  color: #fff; border-color: var(--iri-b);
}

/* progress + toggle + scrollbars */
body.nova .progress-bar { background: linear-gradient(90deg, var(--iri-a), var(--iri-b), var(--iri-c)); box-shadow: 0 0 16px rgba(124,92,255,.6); }
body.nova .progress-track { background: rgba(255,255,255,.05); border: 1px solid var(--hair); }
body.nova .glass-toggle {
  border: 1px solid transparent; border-radius: 999px; color: #d7c9ff;
  background: linear-gradient(#14101f,#14101f) padding-box, linear-gradient(120deg,var(--iri-a),var(--iri-c)) border-box;
}
body.nova *::-webkit-scrollbar { width: 11px; height: 11px; }
body.nova *::-webkit-scrollbar-thumb { background: rgba(124,92,255,.3); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
body.nova *::-webkit-scrollbar-track { background: transparent; }

/* modals */
body.nova .regen-modal, body.nova .dsm-overlay, body.nova .cd-overlay {
  background: rgba(5,4,12,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.nova .regen-title, body.nova .dsm-head h3 { color: var(--txt); }
body.nova .rl-card.sel { border-color: transparent;
  background: linear-gradient(#15122233,#15122233) padding-box, linear-gradient(135deg,var(--iri-a),var(--iri-c)) border-box; }


/* ===================== EDITORIAL (paper · serif · flat) ==================== */
/* A deliberately DIFFERENT design world: warm paper, ink, razor hairlines,
   serif display type, flat surfaces, no glass/blur/shadow. Magazine-grade. */
body.edito {
  --serif: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif;
  --ink:   #1a1a17;
  --paper: #f4f2ea;
  --card:  #ffffff;
  --line:  #e2ded2;
  --line-2:#cfcab9;
  --accent:#1b3a8c; --accent-rgb: 27,58,140;     /* one restrained editorial ink-blue */

  --text: var(--ink); --text-dim: #56544c; --text-mute: #8c887c;
  --accent-2: var(--accent);
  --surface: var(--card); --surface-2: #faf8f1; --panel: var(--card);
  --border: var(--line); --border-hi: var(--line-2);
  --radius: 6px; --radius-sm: 5px;
  color: var(--ink); letter-spacing: 0;
  background: var(--paper) !important;
}
body.edito #aurora { display: none; }
body.edito::before {                                  /* fine paper grain */
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body.edito .screen { position: relative; z-index: 1; }

/* flat surfaces with hairline borders, no blur/shadow */
body.edito .topbar, body.edito .setup-panel, body.edito .build-bar, body.edito .prompt-card,
body.edito .examples, body.edito .regen-box, body.edito .dsm-box, body.edito .cd-box {
  background: var(--card); border: 1px solid var(--line);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 6px;
}
body.edito .topbar { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid var(--line-2); }
body.edito .setup-main, body.edito .build-stage, body.edito .stage, body.edito .screen-center { background: transparent !important; }

/* serif display type */
body.edito .brand-mark {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink);
}
body.edito .brand-sub { color: var(--text-mute); }
body.edito .hero-title {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; color: var(--ink);
  background: none; -webkit-text-fill-color: var(--ink);
}
body.edito .hero-sub { color: var(--text-dim); }
body.edito .setup-h, body.edito .opt-title, body.edito .regen-title, body.edito .dsm-head h3 {
  font-family: var(--serif); font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
body.edito .hint, body.edito .field-label { color: var(--text-mute); }
body.edito .field-label, body.edito .ex-title { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
body.edito .opt-group { border-top: 1px solid var(--line); }

/* eyebrow as a mono tag */
body.edito .eyebrow-tag {
  background: var(--card); border: 1px solid var(--line); color: var(--accent);
  border-radius: 3px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase;
}

/* inputs — flat, hairline, square-ish */
body.edito .text-input, body.edito .select, body.edito .hero-prompt {
  background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 5px;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.edito .hero-prompt { background: transparent; }
body.edito .text-input:focus, body.edito .select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 2px rgba(27,58,140,.14);
}
body.edito .text-input::placeholder, body.edito .hero-prompt::placeholder { color: var(--text-mute); }
body.edito .select option { background: #fff; color: var(--ink); }

/* segmented control → bordered tab strip */
body.edito .seg { background: #faf8f1; border: 1px solid var(--line); border-radius: 5px; padding: 3px; }
body.edito .seg button { border: 0; background: transparent; color: var(--text-dim); border-radius: 3px; font-weight: 600; }
body.edito .seg button.active { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2); }

/* buttons — solid ink primary, bordered ghost (flat, sharp) */
body.edito .btn-primary {
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 5px;
  box-shadow: none; font-weight: 600; letter-spacing: .01em;
}
body.edito .btn-primary::after { display: none; }
body.edito .btn-primary:hover { background: #000; transform: none; filter: none; }
body.edito .btn-ghost, body.edito .more-themes, body.edito .link-back, body.edito .btn-improve, body.edito .qpill {
  background: var(--card); border: 1px solid var(--line); color: var(--text-dim); border-radius: 5px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.edito .btn-ghost:hover, body.edito .more-themes:hover, body.edito .link-back:hover { border-color: var(--ink); color: var(--ink); }

/* cards — white, hairline; active = editorial left-marker (no glow) */
body.edito .type-card, body.edito .len-card, body.edito .imgsrc-card, body.edito .theme-card,
body.edito .rlen-card, body.edito .ex-card, body.edito .len-doc, body.edito .card-row, body.edito .ol-chip {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: border-color .15s, box-shadow .15s;
}
body.edito .type-card:hover, body.edito .len-card:hover, body.edito .imgsrc-card:hover,
body.edito .theme-card:hover, body.edito .rlen-card:hover, body.edito .ex-card:hover {
  border-color: var(--line-2); transform: none; background: var(--card);
}
body.edito .type-card.active, body.edito .len-card.active, body.edito .imgsrc-card.active,
body.edito .theme-card.active, body.edito .rlen-card.active, body.edito .len-doc.active {
  border-color: var(--ink); box-shadow: inset 3px 0 0 var(--accent);
}
body.edito .type-card.active .type-ic { background: rgba(27,58,140,.1); color: var(--accent); }
body.edito .ex-ic { background: rgba(27,58,140,.08); border-color: rgba(27,58,140,.2); color: var(--accent); }

/* toggle switch */
body.edito .rep-track { background: #e7e3d7; border: 1px solid var(--line-2); box-shadow: none; }
body.edito .rep-thumb { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
body.edito .rep-switch input:checked + .rep-track { background: var(--accent); border-color: var(--accent); }

/* build screen */
body.edito .build-bar { border-radius: 0; margin: 0; border-left: 0; border-right: 0; }
body.edito .progress-track { background: #e7e3d7; border: 1px solid var(--line); }
body.edito .progress-bar { background: var(--accent); box-shadow: none; }
body.edito .progress-text { color: var(--text-dim); font-family: var(--mono); }

/* modals */
body.edito .regen-modal, body.edito .dsm-overlay, body.edito .cd-overlay {
  background: rgba(26,26,23,.32); -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.edito .regen-instr, body.edito .dsm-search {
  background: var(--card) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; border-radius: 5px !important;
}
body.edito .regen-x, body.edito .dsm-x { background: var(--card); border: 1px solid var(--line); color: var(--text-dim); border-radius: 5px; }
body.edito .rl-card.sel { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
body.edito .regen-fab {
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 5px;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}

/* glass toggle button in editorial */
body.edito .glass-toggle { background: var(--card); border: 1px solid var(--line-2); color: var(--ink); border-radius: 5px; }

/* thin warm scrollbars */
body.edito *::-webkit-scrollbar { width: 12px; height: 12px; }
body.edito *::-webkit-scrollbar-thumb { background: #cfcab9; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
body.edito *::-webkit-scrollbar-track { background: transparent; }


/* ============ NEXORIA · BLUE LIQUID GLASS (Apple 2026, strong frost) ========= */
/* Apple-2026 "Liquid Glass": deep blue mesh, heavily frosted translucent surfaces,
   bright specular edges, lensed depth. Single Apple-blue accent. */
body.nexo {
  --blu:      #0a84ff;            /* Apple system blue */
  --blu-2:    #5ab0ff;
  --blu-soft: rgba(10,132,255,.22);
  --txt:      #f1f5fb;
  --txt-dim:  #c3ccdd;
  --txt-mute: #b4bccd;                 /* AA on the frosted glass (was #868fa3, ~2:1) */
  --glass:        rgba(255,255,255,.13);
  --glass-2:      rgba(120,170,255,.085);     /* subtle blue glass → cards feel alive (look #1) */
  --glass-strong: rgba(10,132,255,.26);
  --panel-2:      rgba(255,255,255,.075);
  --line:   rgba(255,255,255,.18);
  --line-2: rgba(255,255,255,.32);
  --sheen:  rgba(190,212,250,.5);

  --text: var(--txt); --text-dim: var(--txt-dim); --text-mute: var(--txt-mute);
  --accent: var(--blu); --accent-2: var(--blu-2); --accent-rgb: 10,132,255;
  --surface: var(--glass); --surface-2: var(--glass-2); --panel: rgba(16,24,42,.5);
  --border: var(--line); --border-hi: var(--line-2);
  --radius: 16px; --radius-sm: 12px; --radius-panel: 24px;
  color: var(--txt); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1080px 720px at 8% -6%,  rgba(10,132,255,.28), transparent 56%),
    radial-gradient(940px 680px at 96% 4%,    rgba(40,110,235,.17), transparent 54%),
    radial-gradient(940px 800px at 60% 116%,  rgba(90,200,255,.14), transparent 58%),
    linear-gradient(160deg, #0a1022 0%, #070a14 60%, #080b17 100%) !important;
  background-attachment: fixed;
}
body.nexo::before {                                   /* fine film grain on the glass */
  content:""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body.nexo #aurora { display: block; opacity: .4; filter: blur(72px) saturate(1.4); }
body.nexo #aurora i:nth-child(1){ background: radial-gradient(circle, #0a84ff, transparent 70%); }
body.nexo #aurora i:nth-child(2){ background: radial-gradient(circle, #4aa3ff, transparent 70%); }
body.nexo #aurora i:nth-child(3){ background: radial-gradient(circle, #2bd4ff, transparent 70%); }
body.nexo .screen { position: relative; z-index: 1; }

/* STRONG liquid glass surfaces — heavy frost + bright specular + lensed depth */
body.nexo .topbar, body.nexo .setup-panel, body.nexo .build-bar, body.nexo .prompt-card,
body.nexo .examples, body.nexo .regen-box, body.nexo .dsm-box, body.nexo .cd-box {
  position: relative;
  background: linear-gradient(rgba(24,36,64,.5), rgba(15,24,46,.6));
  border: 1px solid var(--line); border-radius: var(--radius-panel);
  -webkit-backdrop-filter: blur(64px) saturate(205%); backdrop-filter: blur(64px) saturate(205%);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.18) inset,
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 40px 90px -34px rgba(0,0,0,.9),
    0 0 80px -26px rgba(10,132,255,.5);
}
body.nexo .topbar::after, body.nexo .setup-panel::after, body.nexo .prompt-card::after,
body.nexo .examples::after, body.nexo .regen-box::after, body.nexo .dsm-box::after, body.nexo .cd-box::after {
  content:""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent); opacity: .4;
}
body.nexo .topbar { border-radius: 0 0 var(--radius-panel) var(--radius-panel); border-left: 0; border-right: 0; border-top: 0;
  background: linear-gradient(180deg, rgba(12,18,32,.80), rgba(10,15,28,.68)); }
body.nexo .setup-main, body.nexo .build-stage, body.nexo .stage, body.nexo .screen-center { background: transparent !important; }

/* type */
body.nexo .brand-mark {
  font-weight: 700; letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff, #cfe2ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.nexo .brand-sub { color: var(--txt-dim); }
body.nexo .hero-title {
  font-weight: 750; letter-spacing: -.03em; line-height: 1.05;
  background: linear-gradient(176deg, #ffffff, #e2efff 60%, #bcdcff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.nexo .hero-sub { color: var(--txt-dim); }
body.nexo .setup-h, body.nexo .opt-title, body.nexo .regen-title, body.nexo .dsm-head h3 { color: var(--txt); }
body.nexo .hint, body.nexo .field-label { color: var(--txt-mute); }
body.nexo .eyebrow-tag {
  background: var(--blu-soft); border: 1px solid rgba(10,132,255,.42); color: var(--blu-2); border-radius: 999px;
}

/* inputs */
body.nexo .text-input, body.nexo .select, body.nexo .hero-prompt {
  background: rgba(8,13,26,.46); border: 1px solid var(--line); color: var(--txt); border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
}
body.nexo .hero-prompt { background: transparent; }   /* sits on the dark-tinted prompt-card */
body.nexo .text-input::placeholder, body.nexo .hero-prompt::placeholder { color: var(--txt-mute); }
body.nexo .text-input:focus, body.nexo .select:focus {
  border-color: rgba(10,132,255,.7); box-shadow: 0 0 0 4px rgba(10,132,255,.22);
}
body.nexo .select option { background: #0c1322; color: var(--txt); }

/* segmented control — glass track, blue-tinted active pill */
body.nexo .seg { background: var(--glass-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px;
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
body.nexo .seg button { border: 0; background: transparent; color: var(--txt-dim); border-radius: 9px; font-weight: 550; }
body.nexo .seg button:hover { color: var(--txt); }
body.nexo .seg button.active { background: var(--blu-soft); color: #fff; box-shadow: inset 0 0 0 1px rgba(10,132,255,.45); }

/* buttons — glossy blue glass pill */
body.nexo .btn-primary {
  background: linear-gradient(180deg, #1873e0 0%, #0a6fde 50%, #0061cf 100%);
  border: 0; border-radius: 999px; color: #fff; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -8px 16px -10px rgba(0,40,120,.6) inset, 0 12px 28px -10px rgba(10,132,255,.7);
  transition: transform .15s, filter .15s;
}
body.nexo .btn-primary::after { display: none; }
body.nexo .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06) saturate(1.04); }
body.nexo .btn-primary:active { transform: translateY(0) scale(.99); }
body.nexo .btn-ghost, body.nexo .more-themes, body.nexo .link-back, body.nexo .btn-improve, body.nexo .qpill {
  background: var(--glass-2); border: 1px solid var(--line); color: var(--txt-dim); border-radius: 999px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
/* .link-back base has padding:0 → the pill border hugged the text. Give it room. */
body.nexo .link-back { padding: 6px 13px; display: inline-flex; align-items: center; gap: 5px; line-height: 1; }
body.nexo .btn-ghost:hover, body.nexo .more-themes:hover, body.nexo .link-back:hover, body.nexo .btn-improve:hover {
  color: var(--txt); border-color: rgba(10,132,255,.5);
}

/* cards — glass tiles; active = blue glass */
body.nexo .type-card, body.nexo .len-card, body.nexo .imgsrc-card, body.nexo .theme-card,
body.nexo .rlen-card, body.nexo .ex-card, body.nexo .len-doc, body.nexo .card-row, body.nexo .ol-chip {
  background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px;
  -webkit-backdrop-filter: blur(34px) saturate(185%); backdrop-filter: blur(34px) saturate(185%);
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .16s, background .16s, box-shadow .16s;
}
body.nexo .type-card:hover, body.nexo .len-card:hover, body.nexo .imgsrc-card:hover,
body.nexo .theme-card:hover, body.nexo .rlen-card:hover, body.nexo .ex-card:hover {
  transform: translateY(-2px); border-color: var(--line-2); background: rgba(255,255,255,.15);
}
body.nexo .type-card.active, body.nexo .len-card.active, body.nexo .imgsrc-card.active,
body.nexo .theme-card.active, body.nexo .rlen-card.active, body.nexo .len-doc.active {
  background: var(--blu-soft); border-color: rgba(10,132,255,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 0 0 1px rgba(10,132,255,.3), 0 12px 28px -16px rgba(10,132,255,.55);
}
body.nexo .type-card.active .type-ic { background: rgba(10,132,255,.28); color: var(--blu-2); }
body.nexo .ex-ic { background: rgba(10,132,255,.18); border-color: rgba(10,132,255,.36); color: var(--blu-2); }

/* toggle switch */
body.nexo .rep-track { background: var(--panel-2); border: 1px solid var(--line); }
body.nexo .rep-thumb { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
body.nexo .rep-switch input:checked + .rep-track { background: var(--blu); border-color: rgba(10,132,255,.6); }

/* build screen */
body.nexo .build-bar { border-radius: 22px; margin: 10px; }
body.nexo .progress-track { background: var(--panel-2); border: 1px solid var(--line); }
body.nexo .progress-bar { background: linear-gradient(90deg, #2bd4ff, var(--blu)); box-shadow: 0 0 16px rgba(10,132,255,.55); }
body.nexo .progress-text { color: var(--txt-dim); font-family: var(--mono); }

/* modals */
body.nexo .regen-modal, body.nexo .dsm-overlay, body.nexo .cd-overlay {
  background: rgba(6,10,20,.45); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
body.nexo .regen-box, body.nexo .dsm-box, body.nexo .cd-box {
  -webkit-backdrop-filter: blur(72px) saturate(205%); backdrop-filter: blur(72px) saturate(205%);
}
body.nexo .regen-instr, body.nexo .dsm-search {
  background: rgba(255,255,255,.06) !important; border: 1px solid var(--line) !important; color: var(--txt) !important; border-radius: 12px !important;
}
body.nexo .regen-x, body.nexo .dsm-x { background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-dim); border-radius: 10px; }
body.nexo .rl-card.sel { border-color: rgba(10,132,255,.6); box-shadow: 0 0 0 1px rgba(10,132,255,.35); }
body.nexo .regen-fab {
  background: linear-gradient(180deg, #2a96ff, var(--blu)); border: 0; color: #fff; border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(10,132,255,.7); -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* topbar toggle + scrollbars */
body.nexo .glass-toggle { background: var(--blu-soft); border: 1px solid rgba(10,132,255,.42); color: var(--blu-2); border-radius: 999px; }
body.nexo *::-webkit-scrollbar { width: 10px; height: 10px; }
body.nexo *::-webkit-scrollbar-thumb { background: rgba(10,132,255,.34); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
/* inset the track so the thumb keeps clear of the rounded panel corners (top & bottom) */
body.nexo *::-webkit-scrollbar-track { background: transparent; margin: 20px 0; }

/* ---------- audit polish: a11y focus rings, contrast, coverage, single-blue ---------- */
/* keyboard focus-visible (WCAG 2.4.7) — invisible UA outline replaced by a blue ring */
body.nexo :focus-visible { outline: 2px solid var(--blu-2); outline-offset: 2px; }
body.nexo .btn-primary:focus-visible, body.nexo .btn-ghost:focus-visible, body.nexo .more-themes:focus-visible,
body.nexo .link-back:focus-visible, body.nexo .btn-improve:focus-visible, body.nexo .qpill:focus-within,
body.nexo .type-card:focus-visible, body.nexo .len-card:focus-visible, body.nexo .imgsrc-card:focus-visible,
body.nexo .theme-card:focus-visible, body.nexo .rlen-card:focus-visible, body.nexo .ex-card:focus-visible,
body.nexo .seg button:focus-visible, body.nexo .glass-toggle:focus-visible, body.nexo .qp-sel:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(10,132,255,.55); }
body.nexo .rep-switch input:focus-visible + .rep-track { box-shadow: 0 0 0 3px rgba(10,132,255,.5); }
body.nexo #imgUploadInput:focus-visible + .upload-drop { box-shadow: 0 0 0 3px rgba(10,132,255,.5); }
body.nexo .dsm-x:focus-visible, body.nexo .regen-x:focus-visible { outline: none; border-color: rgba(10,132,255,.7); box-shadow: 0 0 0 4px rgba(10,132,255,.22); }

/* disabled primary — desaturate, don't collapse to a 2.5:1 ghost */
body.nexo .btn-primary:disabled { opacity: 1; background: rgba(255,255,255,.12); color: var(--txt-mute);
  box-shadow: none; cursor: default; border: 1px solid var(--line); }

/* accent micro-pills made OPAQUE so the mesh glow can't wash them out */
body.nexo .eyebrow-tag, body.nexo .glass-toggle, body.nexo .ex-ic {
  background: #0e2748; border-color: rgba(10,132,255,.45); color: #8ec6ff; }

/* accent-as-text routed to the lighter, legible tint */
body.nexo .prompt-meta .imp-status, body.nexo .prompt-meta .undo, body.nexo .prompt-meta .ok,
body.nexo .ol-type, body.nexo .card-type, body.nexo .ol-points li::before { color: var(--blu-2); }

/* image-upload dropzone: frost + radius + on-brand states + blue caret on layout select */
body.nexo .upload-drop { background: var(--glass-2); border: 1px dashed var(--line); border-radius: 14px;
  color: var(--txt-dim); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
body.nexo .upload-drop:hover { border-color: rgba(10,132,255,.5); color: var(--txt); background: var(--blu-soft); }
body.nexo .ud-ic { color: var(--blu-2); }
body.nexo .card-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230a84ff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
body.nexo .card-type:focus { border-color: rgba(10,132,255,.7); box-shadow: 0 0 0 4px rgba(10,132,255,.22); }

/* keep depth on the prompt-card focus ring */
body.nexo .prompt-card:focus-within { border-color: rgba(10,132,255,.7);
  box-shadow: 0 0 0 3px rgba(10,132,255,.22), 0 20px 60px -28px rgba(0,0,0,.8); }

/* radius rhythm — unify off-scale stragglers */
body.nexo .build-bar { border-radius: var(--radius-panel); }
body.nexo .ai-border { border-radius: var(--radius-panel); }
body.nexo .ol-chip, body.nexo .card-add { border-radius: 14px; }
body.nexo .rsec-num { border-radius: 10px; }
body.nexo .swatch { border-radius: 12px; }

/* examples shuffle button gets the ghost-pill treatment */
body.nexo .ex-shuffle { background: var(--glass-2); border: 1px solid var(--line); color: var(--txt-dim);
  border-radius: 999px; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
body.nexo .ex-shuffle:hover { color: var(--txt); border-color: rgba(10,132,255,.5); }

/* re-audit nits: uniform 3px focus ring on the text fields; theme the custom-design swatch */
body.nexo .hero-prompt:focus-visible, body.nexo .text-input:focus-visible, body.nexo .select:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(10,132,255,.55); }
body.nexo .cd-color input[type=color] {
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.06); padding: 2px; }
body.nexo .cd-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 9px; }
body.nexo .cd-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }