/* ============================================================
   EMPIRE UI — style-first component library
   Four visual universes. Each is a coherent token system.
   App chrome stays neutral; previews live in their own world.
   ============================================================ */

:root{
  --ink:#0e0e12;
  --chrome-bg:#0b0b0f;
  --chrome-panel:#15151b;
  --chrome-line:#26262f;
  --chrome-text:#e7e7ee;
  --chrome-sub:#9a9aa6;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

/* Tailwind preflight is OFF here, so reset interactive elements ourselves —
   otherwise bare <button>/<input> show native grey chrome (this made inactive
   segmented/tab/toggle buttons look broken, esp. on glass). Token classes
   like .gl-btn override these via higher specificity. */
button{ background:transparent; border:0; margin:0; padding:0; color:inherit; font:inherit; line-height:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
input,select,textarea{ font:inherit; color:inherit; background:transparent; -webkit-appearance:none; appearance:none; }
button:disabled{ cursor:default; }

body{
  background:var(--chrome-bg);
  color:var(--chrome-text);
  font-family:'Space Grotesk',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:#5b5bff; color:#fff; }

/* slim scrollbars in code/panels */
.thin-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.thin-scroll::-webkit-scrollbar-thumb{ background:#33333f; border-radius:8px; }
.thin-scroll::-webkit-scrollbar-track{ background:transparent; }

/* generic slide/scale for route + modal transitions.
   NOTE: content is visible at rest (no opacity:0 keyframes) so it
   never disappears if the animation clock is frozen (capture/export). */
@keyframes fadeUp{ from{ transform:translateY(12px); } to{ transform:none; } }
@keyframes scaleIn{ from{ transform:scale(.965); } to{ transform:scale(1); } }
@keyframes swapIn{ from{ transform:translateY(5px); } to{ transform:none; } }
@media (prefers-reduced-motion: no-preference){
  .anim-fadeUp{ animation:fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
  .anim-scaleIn{ animation:scaleIn .32s cubic-bezier(.2,.9,.25,1) both; }
  /* grid refresh on style/filter switch: barely-there settle, no jump */
  .anim-swap{ animation:swapIn .28s cubic-bezier(.25,.6,.3,1) both; }
}
.anim-fadeIn{ /* opacity fade removed for capture-safety; kept as no-op hook */ }

/* ============================================================
   1. GLASSMORPHISM
   Frosted translucent surfaces on a vivid blurred backdrop.
   ============================================================ */
.gl-canvas{
  font-family:'Manrope',sans-serif;
  color:#fff;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(60% 80% at 18% 12%, #7c4dff 0%, transparent 60%),
    radial-gradient(55% 70% at 88% 20%, #ff5d8f 0%, transparent 55%),
    radial-gradient(70% 80% at 70% 95%, #2bd6ff 0%, transparent 55%),
    linear-gradient(135deg,#3a1d6e 0%,#16123a 100%);
}
.gl-canvas::before{ /* floating light orbs */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 30% 70%, rgba(255,255,255,.18), transparent),
    radial-gradient(closest-side at 80% 40%, rgba(255,255,255,.12), transparent);
  mix-blend-mode:screen;
}
.gl-surface{
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 40px rgba(10,5,40,.35), inset 0 1px 0 rgba(255,255,255,.35);
  border-radius:24px;
}
.gl-surface-2{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  border-radius:18px;
}
.gl-btn{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.32);
  color:#fff; border-radius:14px; font-weight:600;
  backdrop-filter:blur(8px);
  transition:.25s cubic-bezier(.2,.7,.2,1);
}
.gl-btn:hover{ background:rgba(255,255,255,.28); transform:translateY(-1px); }
.gl-btn:active{ transform:scale(.985); transition-duration:.1s; }
.gl-btn-primary{
  background:linear-gradient(135deg,#fff,#dfe6ff);
  color:#2a1d5e; border:1px solid #fff; border-radius:14px; font-weight:700;
  box-shadow:0 8px 24px rgba(255,255,255,.25);
  transition:.25s cubic-bezier(.2,.7,.2,1);
}
.gl-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,255,255,.35); }
.gl-btn-primary:active{ transform:scale(.985); transition-duration:.1s; }
.gl-input{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25);
  color:#fff; border-radius:12px;
}
.gl-input::placeholder{ color:rgba(255,255,255,.55); }
.gl-chip{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:999px; }

/* ============================================================
   2. MAXIMALISM
   Clashing color blocks, fat black borders, hard offset shadows.
   ============================================================ */
.mx-canvas{
  font-family:'Space Grotesk',sans-serif;
  color:#111;
  position:relative; overflow:hidden;
  background:#ffe600;
  background-image:
    repeating-linear-gradient(45deg, rgba(17,17,17,.06) 0 14px, transparent 14px 28px);
}
.mx-canvas::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 85% 12%, #2d6bff 0 60px, transparent 61px),
    radial-gradient(circle at 12% 88%, #ff2d75 0 90px, transparent 91px);
  opacity:.9;
}
.mx-display{ font-family:'Syne',sans-serif; font-weight:800; letter-spacing:-.02em; }
.mx-surface{
  background:#fff; border:3px solid #111; border-radius:6px;
  box-shadow:8px 8px 0 #111;
}
.mx-surface-pink{ background:#ff2d75; color:#fff; border:3px solid #111; border-radius:6px; box-shadow:8px 8px 0 #111; }
.mx-surface-blue{ background:#2d6bff; color:#fff; border:3px solid #111; border-radius:6px; box-shadow:8px 8px 0 #111; }
.mx-surface-lime{ background:#b6ff3c; color:#111; border:3px solid #111; border-radius:6px; box-shadow:8px 8px 0 #111; }
.mx-btn{
  background:#111; color:#fff; border:3px solid #111; border-radius:4px;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  box-shadow:4px 4px 0 #ff2d75; transition:.12s ease;
}
.mx-btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 #ff2d75; }
.mx-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #ff2d75; }
.mx-btn-pink{ background:#ff2d75; color:#fff; box-shadow:4px 4px 0 #111; }
.mx-btn-pink:hover{ box-shadow:6px 6px 0 #111; }
.mx-btn-blue{ background:#2d6bff; color:#fff; box-shadow:4px 4px 0 #111; }
.mx-input{ background:#fff; border:3px solid #111; border-radius:4px; color:#111; font-weight:600; }
.mx-input::placeholder{ color:#888; }
.mx-chip{ background:#111; color:#ffe600; border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

/* ============================================================
   3. MOTION MORPHISM
   Animated gradients, morphing blobs, springy surfaces.
   ============================================================ */
.mo-canvas{
  font-family:'Sora',sans-serif;
  color:#1a1240;
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#ffd6f5,#d9e4ff,#d4fff0,#fff0d6);
  background-size:300% 300%;
  animation:moGradient 16s ease infinite;
}
@keyframes moGradient{ 0%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0% 50%; } }
.mo-blob{
  position:absolute; filter:blur(2px); opacity:.55; pointer-events:none;
  background:linear-gradient(135deg,#ff7ad9,#7a9bff);
  border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
  animation:moMorph 12s ease-in-out infinite, moFloat 9s ease-in-out infinite;
}
@keyframes moMorph{
  0%,100%{ border-radius:42% 58% 63% 37% / 41% 44% 56% 59%; }
  50%{ border-radius:62% 38% 41% 59% / 56% 63% 37% 44%; }
}
@keyframes moFloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-26px) rotate(8deg); } }
.mo-surface{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:28px;
  box-shadow:0 18px 50px rgba(120,80,200,.18);
  transition:transform .4s cubic-bezier(.25,1.15,.35,1), box-shadow .4s ease;
}
.mo-surface:hover{ transform:translateY(-4px) scale(1.008); box-shadow:0 24px 60px rgba(120,80,200,.24); }
.mo-btn{
  background:linear-gradient(135deg,#7a5cff,#ff6fd8);
  color:#fff; border:none; border-radius:999px; font-weight:700;
  box-shadow:0 10px 24px rgba(122,92,255,.4);
  transition:transform .3s cubic-bezier(.25,1.2,.35,1), box-shadow .3s ease;
}
.mo-btn:hover{ transform:translateY(-2px) scale(1.025); box-shadow:0 14px 30px rgba(122,92,255,.48); }
.mo-btn:active{ transform:scale(.97); transition-duration:.12s; }
.mo-btn-ghost{
  background:rgba(255,255,255,.6); color:#5a3cff; border:1px solid rgba(122,92,255,.3);
  border-radius:999px; font-weight:700; transition:transform .3s cubic-bezier(.25,1.2,.35,1);
}
.mo-btn-ghost:hover{ transform:scale(1.02); }
.mo-grad-text{ background:linear-gradient(120deg,#7a5cff,#ff6fd8,#5ad0ff); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200%; animation:moGradient 6s ease infinite; }
.mo-input{ background:rgba(255,255,255,.7); border:1px solid rgba(122,92,255,.25); border-radius:16px; color:#1a1240; transition:.3s; }
.mo-input:focus{ outline:none; border-color:#7a5cff; box-shadow:0 0 0 4px rgba(122,92,255,.15); }
.mo-chip{ background:rgba(122,92,255,.12); color:#5a3cff; border-radius:999px; font-weight:600; }

/* ============================================================
   4. RETRO FUTURISM
   Neon on near-black, grid horizon, scanlines, glow.
   ============================================================ */
.rf-canvas{
  font-family:'Space Mono',monospace;
  color:#d7f7ff;
  position:relative; overflow:hidden;
  background:#070713;
}
.rf-canvas::before{ /* perspective grid horizon */
  content:""; position:absolute; left:-20%; right:-20%; bottom:-10%; height:60%;
  background-image:
    linear-gradient(rgba(45,212,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,255,.25) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(420px) rotateX(62deg);
  transform-origin:bottom; pointer-events:none;
  mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%);
}
.rf-canvas::after{ /* scanlines */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.22) 2px 3px);
  opacity:.5;
}
.rf-sun{ /* synthwave sun glow */
  position:absolute; left:50%; top:14%; width:320px; height:320px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,55,230,.5), rgba(255,55,230,0) 65%);
  pointer-events:none; filter:blur(8px);
}
.rf-display{ font-family:'Orbitron',sans-serif; letter-spacing:.06em; }
.rf-surface{
  background:rgba(12,12,34,.66);
  backdrop-filter:blur(6px);
  border:1px solid rgba(45,212,255,.55);
  border-radius:8px;
  box-shadow:0 0 22px rgba(45,212,255,.25), inset 0 0 22px rgba(45,212,255,.06);
}
.rf-surface-mag{ border-color:rgba(255,55,230,.6); box-shadow:0 0 22px rgba(255,55,230,.3), inset 0 0 22px rgba(255,55,230,.06); }
.rf-btn{
  background:rgba(45,212,255,.08); color:#5ee7ff; border:1px solid #2dd4ff;
  border-radius:6px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-shadow:0 0 8px rgba(94,231,255,.8); box-shadow:0 0 14px rgba(45,212,255,.45);
  transition:.2s;
}
.rf-btn:hover{ background:rgba(45,212,255,.2); box-shadow:0 0 24px rgba(45,212,255,.7); }
.rf-btn:active{ transform:scale(.985); transition-duration:.1s; }
.rf-btn-mag{
  background:rgba(255,55,230,.08); color:#ff7bee; border:1px solid #ff37e6;
  text-shadow:0 0 8px rgba(255,123,238,.8); box-shadow:0 0 14px rgba(255,55,230,.45);
}
.rf-btn-mag:hover{ background:rgba(255,55,230,.2); box-shadow:0 0 24px rgba(255,55,230,.7); }
.rf-glow{ text-shadow:0 0 8px currentColor, 0 0 18px currentColor; }
.rf-input{ background:rgba(8,8,24,.7); border:1px solid rgba(45,212,255,.45); color:#d7f7ff; border-radius:6px; font-family:'Space Mono',monospace; }
.rf-input::placeholder{ color:rgba(140,200,230,.5); }
.rf-chip{ background:rgba(255,55,230,.12); color:#ff7bee; border:1px solid rgba(255,55,230,.5); border-radius:4px; letter-spacing:.06em; text-transform:uppercase; }

/* window frame (app chrome around each block) */
.win{
  background:#101016; border:1px solid #24242e; border-radius:14px; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.win:hover{ transform:translateY(-4px); border-color:#3a3a48; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.win-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:#16161d; border-bottom:1px solid #24242e; }
.win-dot{ width:10px; height:10px; border-radius:50%; }
.win-canvas{ position:relative; min-height:230px; display:flex; align-items:center; justify-content:center; padding:26px; overflow:hidden; }
/* finish guards: keep every preview inside its frame, never spill out */
.win-canvas > *{ max-width:100%; }
.win-canvas svg, .win-canvas img, .win-canvas video{ max-width:100%; }
.win-canvas button, .win-canvas a{ max-width:100%; }
/* inputs adapt to the active style (rounded unless the style is intentionally sharp) */
.win-canvas input, .win-canvas textarea, .win-canvas select{ max-width:100%; }

/* ambiance temperatures — re-tint a style's previews warm / cool / neutral */
.temp-shift{ transition:filter .4s ease; }
.temp-warm{ filter:hue-rotate(-16deg) saturate(1.14) brightness(1.02); }
.temp-cool{ filter:hue-rotate(18deg) saturate(1.06); }
.temp-base{ filter:none; }

/* utility */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ scrollbar-width:none; }

/* ============================================================
   SIGNATURE MOTIFS — lightweight per-card overlays for the
   40-style gallery. Each card sets --sig to its accent color.
   ============================================================ */
.sig{ position:absolute; inset:0; pointer-events:none; }
.sig-grid{ background-image:linear-gradient(var(--sig) 1px,transparent 1px),linear-gradient(90deg,var(--sig) 1px,transparent 1px); background-size:26px 26px; opacity:.12; }
.sig-grid-persp{ left:-20%; right:-20%; bottom:-10%; top:auto; height:60%;
  background-image:linear-gradient(var(--sig) 1px,transparent 1px),linear-gradient(90deg,var(--sig) 1px,transparent 1px);
  background-size:34px 34px; transform:perspective(360px) rotateX(60deg); transform-origin:bottom; opacity:.35;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 80%); mask-image:linear-gradient(to top,#000 10%,transparent 80%); }
.sig-scanlines{ background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.28) 2px 3px); opacity:.45; }
.sig-dots{ background-image:radial-gradient(var(--sig) 1.4px, transparent 1.6px); background-size:13px 13px; opacity:.2; }
.sig-halftone{ background-image:radial-gradient(var(--sig) 2.2px, transparent 2.4px); background-size:11px 11px; opacity:.3; }
.sig-stripes{ background-image:repeating-linear-gradient(45deg,var(--sig) 0 2px,transparent 2px 13px); opacity:.14; }
.sig-pixel{ background-image:linear-gradient(var(--sig) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--sig) 1.5px,transparent 1.5px); background-size:9px 9px; opacity:.16; }
.sig-confetti{ background-image:
  radial-gradient(circle at 18% 28%, var(--sig) 0 5px, transparent 6px),
  radial-gradient(circle at 82% 18%, var(--sig) 0 7px, transparent 8px),
  radial-gradient(circle at 70% 78%, var(--sig) 0 4px, transparent 5px),
  radial-gradient(circle at 30% 82%, var(--sig) 0 3px, transparent 4px); opacity:.5; }
.sig-rays{ background:repeating-conic-gradient(from 0deg at 50% 0%, var(--sig) 0deg 3deg, transparent 3deg 15deg); opacity:.09; }
.sig-glow{ background:radial-gradient(circle at 50% 30%, var(--sig), transparent 60%); opacity:.28; filter:blur(6px); }
.sig-mesh{ background:
  radial-gradient(40% 50% at 15% 20%, var(--sig), transparent 60%),
  radial-gradient(45% 55% at 85% 30%, var(--sig), transparent 55%),
  radial-gradient(50% 60% at 60% 90%, var(--sig), transparent 55%); opacity:.4; filter:blur(4px); }
.sig-noise{ background-image:repeating-linear-gradient(0deg, var(--sig) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--sig) 0 1px, transparent 1px 5px); opacity:.07; mix-blend-mode:overlay; }
.sig-vhs{ background:repeating-linear-gradient(transparent 0 3px, rgba(255,255,255,.04) 3px 4px); opacity:.5; }
.sig-emboss{ box-shadow:inset 6px 6px 14px rgba(0,0,0,.12), inset -6px -6px 14px rgba(255,255,255,.55); }
.sig-iridescent{ background:linear-gradient(120deg,#ff9be6,#9be7ff,#c4ffd0,#fff6a8,#ffb3c8); background-size:300% 300%; animation:moGradient 9s ease infinite; opacity:.55; mix-blend-mode:overlay; }
.sig-none{ display:none; }

/* generic card hover lift for the gallery */
.gcard{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.gcard:hover{ transform:translateY(-5px); box-shadow:0 24px 60px rgba(0,0,0,.45); }
.gcard-soon{ filter:saturate(.92); }
.blob-mini{ animation:moMorph 10s ease-in-out infinite; }