/* ============================================================================
   DocStudio · "Aqua" — Apple Liquid Glass (2026)
   Opt-in theme. Activates ONLY on  body.aqua  — the original look is untouched.
   Toggle: topbar glass button  ·  URL ?aqua=1  ·  persisted in localStorage.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0 · Scoped design tokens. Overriding the base variables makes most existing
   components inherit the glass system for free; specifics are layered below.
---------------------------------------------------------------------------- */
body.aqua {
  --aqua-blue:   #0a84ff;            /* Apple system blue            */
  --aqua-blue-2: #64b5ff;
  --aqua-cyan:   #5ac8fa;
  --aqua-indigo: #5e5ce6;

  --glass:        rgba(255,255,255,.072);
  --glass-2:      rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.14);
  --glass-deep:   rgba(20,23,34,.55);
  --hair:    rgba(255,255,255,.16);
  --hair-hi: rgba(255,255,255,.34);
  --sheen:   rgba(255,255,255,.55);

  --txt:      #f4f6fb;
  --txt-dim:  #c8ccd8;
  --txt-mute: #8c92a4;

  --blur: 30px;
  --rr:    22px;
  --rr-sm: 13px;
  --pill:  999px;

  /* remap the app's base tokens → glass */
  --text: var(--txt); --text-dim: var(--txt-dim); --text-mute: var(--txt-mute);
  --accent: var(--aqua-blue); --accent-2: var(--aqua-blue-2); --accent-rgb: 10,132,255;
  --surface: var(--glass); --surface-2: var(--glass-2); --panel: var(--glass-deep);
  --border: var(--hair); --border-hi: var(--hair-hi);
  --radius: 18px; --radius-sm: 12px;

  color: var(--txt);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01" 1, "cv05" 1;
  background: #05060c !important;
}

/* ----------------------------------------------------------------------------
   1 · Living ambient background — a deep mesh the glass refracts, plus a fine
   film grain for that premium "real frost" feel.
---------------------------------------------------------------------------- */
body.aqua {
  background:
    radial-gradient(1100px 720px at 14% -8%,  rgba(10,132,255,.30), transparent 58%),
    radial-gradient(960px 680px at 92% 8%,    rgba(94,92,230,.26),  transparent 55%),
    radial-gradient(900px 760px at 60% 112%,  rgba(90,200,250,.20), transparent 58%),
    radial-gradient(700px 520px at 84% 96%,   rgba(10,132,255,.14), transparent 60%),
    linear-gradient(160deg, #070912 0%, #05060c 60%, #04050a 100%) !important;
  background-attachment: fixed;
}
/* film grain overlay */
body.aqua::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>");
}
/* richer, slower aurora blooms */
body.aqua #aurora { opacity: .58; filter: blur(72px) saturate(1.35); }
body.aqua #aurora i:nth-child(1){ background: radial-gradient(circle, #0a84ff, transparent 70%); }
body.aqua #aurora i:nth-child(2){ background: radial-gradient(circle, #5e5ce6, transparent 70%); }
body.aqua #aurora i:nth-child(3){ background: radial-gradient(circle, #5ac8fa, transparent 70%); }

/* ----------------------------------------------------------------------------
   2 · The glass recipe — every floating chrome surface gets frost + a top
   specular sheen + a soft rim light + a float shadow.
---------------------------------------------------------------------------- */
body.aqua .topbar,
body.aqua .setup-panel,
body.aqua .build-bar,
body.aqua .prompt-card,
body.aqua .examples,
body.aqua .regen-box,
body.aqua .dsm-box,
body.aqua .cd-box {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
          backdrop-filter: blur(var(--blur)) saturate(180%);
  border: 1px solid var(--hair);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,.22) inset,
    0 -1px 0 0 rgba(255,255,255,.05) inset,
    0 28px 64px -30px rgba(0,0,0,.78),
    0 2px 10px -6px rgba(0,0,0,.5);
}
/* specular sheen along the top edge */
body.aqua .topbar::after,
body.aqua .setup-panel::after,
body.aqua .prompt-card::after,
body.aqua .examples::after,
body.aqua .regen-box::after,
body.aqua .dsm-box::after,
body.aqua .cd-box::after {
  content:""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  opacity: .7;
}

/* ----------------------------------------------------------------------------
   3 · Topbar
---------------------------------------------------------------------------- */
body.aqua .topbar {
  border-radius: 0 0 22px 22px;
  border-left: 0; border-right: 0; border-top: 0;
  background: rgba(255,255,255,.05);
}
body.aqua .brand-mark {
  font-weight: 700; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff, #cfe0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.aqua .brand-sub { color: var(--txt-mute); letter-spacing: 0; }

/* ----------------------------------------------------------------------------
   4 · Hero / prompt screen
---------------------------------------------------------------------------- */
body.aqua .hero-title {
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
  background: linear-gradient(176deg, #ffffff 0%, #dfe9ff 55%, #b9d4ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.aqua .hero-sub { color: var(--txt-dim); }

body.aqua .eyebrow-tag {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--hair); border-radius: var(--pill);
  color: var(--aqua-blue-2);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
}

/* type segmented cards (Präsentation / Bericht) */
body.aqua .type-card {
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--hair); border-radius: var(--rr);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), border-color .18s, background .18s, box-shadow .18s;
}
body.aqua .type-card:hover { transform: translateY(-2px); background: var(--glass); border-color: var(--hair-hi); }
body.aqua .type-card.active {
  background: rgba(10,132,255,.10);
  border-color: rgba(10,132,255,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 30px -14px rgba(10,132,255,.55);
}
body.aqua .type-card.active .type-ic { background: rgba(10,132,255,.22); color: var(--aqua-blue-2); }
body.aqua .type-card .type-t { letter-spacing: -0.02em; }

/* language pill */
body.aqua .qpill {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--pill);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
body.aqua .qp-sel { color: var(--txt); }

/* prompt card */
body.aqua .prompt-card { border-radius: var(--rr); background: rgba(255,255,255,.05); }
body.aqua .hero-prompt { background: transparent; color: var(--txt); }
body.aqua .hero-prompt::placeholder { color: var(--txt-mute); }
body.aqua .prompt-tip kbd {
  background: var(--glass); border: 1px solid var(--hair); color: var(--txt-dim); border-radius: 7px;
}
body.aqua .btn-improve {
  background: var(--glass); border: 1px solid var(--hair); color: var(--txt-dim); border-radius: var(--pill);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: .16s;
}
body.aqua .btn-improve:hover { color: var(--txt); border-color: var(--hair-hi); background: var(--glass-strong); }

/* examples block */
body.aqua .examples { border-radius: var(--rr); background: rgba(255,255,255,.04); }
body.aqua .ex-card {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--rr-sm);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: .16s;
}
body.aqua .ex-card:hover { background: var(--glass); border-color: var(--hair-hi); transform: translateY(-1px); }
body.aqua .ex-ic { background: rgba(10,132,255,.16); border-color: rgba(10,132,255,.34); color: var(--aqua-blue-2); }

/* ----------------------------------------------------------------------------
   5 · Buttons — glossy liquid-glass pills
---------------------------------------------------------------------------- */
body.aqua .btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #2a96ff 0%, var(--aqua-blue) 52%, #0073ee 100%);
  border: 0; border-radius: var(--pill); color: #fff; font-weight: 600; letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -8px 16px -10px rgba(0,40,120,.6) inset,
    0 10px 26px -10px rgba(10,132,255,.7);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), filter .16s, box-shadow .16s;
}
body.aqua .btn-primary::after {     /* travelling sheen */
  content:""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .5s ease;
}
body.aqua .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05) saturate(1.05); }
body.aqua .btn-primary:hover::after { left: 120%; }
body.aqua .btn-primary:active { transform: translateY(0) scale(.985); }

body.aqua .btn-ghost, body.aqua .more-themes, body.aqua .link-back {
  background: var(--glass-2); border: 1px solid var(--hair); color: var(--txt-dim);
  border-radius: var(--pill); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: .16s;
}
body.aqua .btn-ghost:hover, body.aqua .more-themes:hover, body.aqua .link-back:hover {
  color: var(--txt); border-color: var(--hair-hi); background: var(--glass-strong);
}
body.aqua .btn-lg { border-radius: var(--pill); }

/* ----------------------------------------------------------------------------
   6 · Setup panel + form controls
---------------------------------------------------------------------------- */
body.aqua .setup-panel { border-radius: var(--rr); background: rgba(255,255,255,.05); }
body.aqua .setup-main, body.aqua .build-stage, body.aqua .stage, body.aqua .screen-center {
  background: transparent !important;
}
body.aqua .setup-h, body.aqua .opt-title { letter-spacing: -0.02em; color: var(--txt); }
body.aqua .field-label { color: var(--txt-mute); letter-spacing: .02em; }
body.aqua .opt-group { border-top-color: var(--hair); }
body.aqua .hint { color: var(--txt-mute); }

body.aqua .text-input, body.aqua .select {
  background: rgba(255,255,255,.045);
  border: 1px solid var(--hair); color: var(--txt); border-radius: var(--rr-sm);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 1px rgba(0,0,0,.18) inset;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
body.aqua .text-input::placeholder { color: var(--txt-mute); }
body.aqua .text-input:focus, body.aqua .select:focus {
  border-color: rgba(10,132,255,.65);
  box-shadow: 0 0 0 4px rgba(10,132,255,.22), 0 1px 1px rgba(0,0,0,.18) inset;
  background: rgba(255,255,255,.07);
}
body.aqua .select option { background: #0c1020; color: var(--txt); }

/* segmented controls → frosted track with a floating glass pill */
body.aqua .seg {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--rr-sm); padding: 4px; gap: 4px;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
body.aqua .seg button {
  border: 0; background: transparent; color: var(--txt-dim); border-radius: 10px; font-weight: 550;
  transition: .15s; letter-spacing: -0.01em;
}
body.aqua .seg button:hover { color: var(--txt); }
body.aqua .seg button.active {
  background: var(--glass-strong); color: var(--txt);
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 6px 16px -10px rgba(0,0,0,.7);
}

/* option / length / image-source / theme / design-preview cards */
body.aqua .len-card, body.aqua .imgsrc-card, body.aqua .theme-card, body.aqua .len-doc,
body.aqua .card-row, body.aqua .ol-chip, body.aqua .rlen-card {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--rr-sm);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  transition: transform .16s cubic-bezier(.2,.7,.2,1), border-color .16s, background .16s, box-shadow .16s;
}
body.aqua .len-card:hover, body.aqua .imgsrc-card:hover, body.aqua .theme-card:hover,
body.aqua .len-doc:hover, body.aqua .rlen-card:hover {
  transform: translateY(-2px); background: var(--glass); border-color: var(--hair-hi);
}
body.aqua .len-card.active, body.aqua .imgsrc-card.active, body.aqua .theme-card.active,
body.aqua .len-doc.active, body.aqua .rlen-card.active {
  border-color: rgba(10,132,255,.55);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 28px -14px rgba(10,132,255,.55);
}
/* the mini-slide preview itself reads as a real (white/dark) slide on the glass */
body.aqua .rlen-card { padding: 6px; }
body.aqua .sl-mini { box-shadow: 0 6px 16px -10px rgba(0,0,0,.6); }

/* upload drop zone */
body.aqua .upload-drop {
  background: var(--glass-2); border: 1px dashed var(--hair-hi); border-radius: var(--rr-sm); color: var(--txt-dim);
}
body.aqua .upload-drop:hover { background: var(--glass); border-color: rgba(10,132,255,.5); }

/* iOS-style toggle switch */
body.aqua .rep-track {
  background: var(--glass-2); border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(0,0,0,.25) inset;
}
body.aqua .rep-thumb {
  background: linear-gradient(180deg, #fff, #e7ecf5);
  box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.6) inset;
}
body.aqua .rep-switch input:checked + .rep-track {
  background: linear-gradient(180deg, #2a96ff, var(--aqua-blue));
  border-color: rgba(10,132,255,.6);
  box-shadow: 0 6px 16px -8px rgba(10,132,255,.7), 0 1px 0 rgba(255,255,255,.35) inset;
}

/* ----------------------------------------------------------------------------
   7 · Build screen — progress + deck stage
---------------------------------------------------------------------------- */
body.aqua .build-bar { border-radius: 22px; margin: 10px; background: rgba(255,255,255,.05); }
body.aqua .progress-track { background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--pill); }
body.aqua .progress-bar {
  background: linear-gradient(90deg, var(--aqua-cyan), var(--aqua-blue));
  box-shadow: 0 0 16px rgba(10,132,255,.6);
}
body.aqua .progress-text { color: var(--txt-dim); font-family: var(--mono); }
body.aqua .slide-wrap, body.aqua .slide-img { border-radius: 16px; }

/* ----------------------------------------------------------------------------
   8 · Modals (regen / design picker / custom design)
---------------------------------------------------------------------------- */
body.aqua .regen-modal, body.aqua .dsm-overlay, body.aqua .cd-overlay {
  background: rgba(5,7,14,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.aqua .regen-box, body.aqua .dsm-box, body.aqua .cd-box {
  background: var(--glass-deep) !important; border: 1px solid var(--hair-hi) !important;
  border-radius: var(--rr) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
}
body.aqua .regen-title, body.aqua .dsm-head h3 { color: var(--txt); letter-spacing: -0.02em; }
body.aqua .rl-card {
  background: var(--glass-2); border: 1px solid var(--hair); border-radius: var(--rr-sm); transition: .16s;
}
body.aqua .rl-card:hover { background: var(--glass); border-color: var(--hair-hi); transform: translateY(-1px); }
body.aqua .rl-card.sel { border-color: rgba(10,132,255,.6); box-shadow: 0 10px 24px -14px rgba(10,132,255,.6); }
body.aqua .regen-instr, body.aqua .dsm-search {
  background: rgba(255,255,255,.05) !important; border: 1px solid var(--hair) !important; color: var(--txt) !important;
  border-radius: var(--rr-sm) !important;
}
body.aqua .regen-x, body.aqua .dsm-x {
  background: var(--glass-2); border: 1px solid var(--hair); color: var(--txt-dim); border-radius: 10px;
}
body.aqua .regen-x:hover, body.aqua .dsm-x:hover { color: var(--txt); border-color: var(--hair-hi); }
body.aqua .regen-fab {
  background: var(--glass-deep); border: 1px solid var(--hair-hi); color: var(--txt);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: var(--pill);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.7);
}
body.aqua .regen-fab:hover { border-color: rgba(10,132,255,.5); color: var(--aqua-blue-2); }

/* ----------------------------------------------------------------------------
   9 · The topbar glass toggle (shows active state in aqua)
---------------------------------------------------------------------------- */
body.aqua .glass-toggle {
  background: rgba(10,132,255,.16); border: 1px solid rgba(10,132,255,.45); color: var(--aqua-blue-2);
  border-radius: var(--pill); width: 38px; height: 34px;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px -10px rgba(10,132,255,.6);
}
body.aqua .glass-toggle:hover { color: #fff; background: rgba(10,132,255,.26); }

/* ----------------------------------------------------------------------------
   10 · Custom scrollbars — thin glass
---------------------------------------------------------------------------- */
body.aqua *::-webkit-scrollbar { width: 11px; height: 11px; }
body.aqua *::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.16); border: 3px solid transparent; background-clip: content-box; border-radius: var(--pill);
}
body.aqua *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: content-box; }
body.aqua *::-webkit-scrollbar-track { background: transparent; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.aqua .btn-primary::after { transition: none; }
}