/* [FBP] direction: dream · dark-first · for: creative tools, AI products, music, events, launches, anything "fever dreamy"
   feel: deep violet-indigo field, big soft glow, generous radii · hero: centered, glow behind the headline, glass product shot below
   fonts: <link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600&f[]=cabinet-grotesk@700,800&display=swap" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400,500&display=swap" rel="stylesheet">
   load after tokens.css · theme: leave <html> without data-theme (dark) */
:root {
  --hue: 285; --accent-l: 76%; --accent-c: .14; --accent-h: 285;
  --font-sans: "General Sans", ui-sans-serif, system-ui, sans-serif; --font-display: "Cabinet Grotesk", var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --radius-sm: 12px; --radius: 16px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; --radius-ctl: 9999px;
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
}
:root { --bg-0: oklch(12% .02 285); --bg-1: oklch(16% .022 285); --bg-2: oklch(20% .024 285); --bg-3: oklch(25% .026 285); }
h1, h2 { font-weight: 500; letter-spacing: -.025em; }
:root { --grain: .04; }
:root[data-theme="light"] { --grain: .03; }
/* [FBP] fbp-web · direction: dream · accent: violet · reusable layout primitives */
/* Gradient modes stay opt-in: one active mode per surface keeps hierarchy clear while admin panels can reuse the same tokens. */
.gradient-halo { background:radial-gradient(120% 100% at 72% 0%, oklch(var(--accent-l) calc(var(--accent-c) * .7) var(--accent-h) / .32), transparent 62%), var(--bg-0); }
.gradient-mesh { background-color:var(--bg-0); background-image:radial-gradient(at 18% 16%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .30) 0, transparent 52%),radial-gradient(at 82% 8%, oklch(var(--accent-l) calc(var(--accent-c) * .8) calc(var(--accent-h) + 28) / .26) 0, transparent 50%),radial-gradient(at 72% 82%, oklch(calc(var(--accent-l) - 8%) calc(var(--accent-c) * .7) calc(var(--accent-h) - 10) / .24) 0, transparent 54%),radial-gradient(at 12% 88%, oklch(var(--accent-l) calc(var(--accent-c) * .5) calc(var(--accent-h) + 15) / .20) 0, transparent 52%); background-size:160% 160%; }
.gradient-orbit { background:radial-gradient(60% 70% at 50% 18%, oklch(var(--accent-l) var(--accent-c) var(--accent-h) / .34), transparent 70%),radial-gradient(48% 60% at 88% 88%, oklch(var(--accent-l) calc(var(--accent-c) * .75) calc(var(--accent-h) + 30) / .25), transparent 72%),var(--bg-0); }
/* Gradient presets are static; movement belongs to a separate atmosphere layer. */
.gradient-mesh { animation:none; }
/* All glass surfaces reset to their default highlight, including future admin chrome. */
.glass::before { opacity:0; transition:opacity var(--t-base) var(--ease-out); }
@media (max-width:760px) { .nav.glass { -webkit-backdrop-filter:blur(12px) saturate(1.5); backdrop-filter:blur(12px) saturate(1.5); } }
@media (hover:hover) and (pointer:fine) { .glass:hover::before { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .glass::before { transition:none; } }
/* Future admin shell: layout only; surfaces and controls remain the supplied FBP primitives. */
.app-shell { display:grid; grid-template-columns:minmax(208px,240px) minmax(0,1fr); min-height:100dvh; gap:24px; }
.admin-sidebar { position:sticky; top:24px; align-self:start; display:grid; gap:24px; min-height:calc(100dvh - 48px); }
.admin-main { min-width:0; display:grid; align-content:start; gap:24px; padding:24px 0 48px; }
.admin-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.admin-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.admin-grid > .span-3 { grid-column:span 3; } .admin-grid > .span-4 { grid-column:span 4; } .admin-grid > .span-6 { grid-column:span 6; } .admin-grid > .span-8 { grid-column:span 8; } .admin-grid > .span-12 { grid-column:1/-1; }
/* Combine .panel with .card: .panel supplies spacing, .card owns the surface. */
.panel { min-width:0; padding:24px; }
.data-table-wrap { overflow:auto; border-radius:var(--radius-md); box-shadow:inset 0 0 0 1px var(--border); }
@media (max-width:760px) { .app-shell { grid-template-columns:1fr; gap:16px; } .admin-sidebar { position:static; min-height:auto; } .admin-main { padding-top:8px; } .admin-grid > [class*="span-"] { grid-column:1/-1; } }
/* Form/table layouts compose with .field, .input, .table, .empty and .skeleton from tokens.css. */
.admin-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.admin-form > .full-width { grid-column:1/-1; }
.admin-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.admin-nav { display:grid; gap:8px; }
.admin-nav .btn { justify-content:flex-start; min-height:44px; }
.admin-nav [aria-current="page"] { color:var(--accent-text); background-color:var(--accent-soft); }
@media (max-width:760px) { .admin-form { grid-template-columns:1fr; } }
.btn > [aria-hidden] { transition:transform 220ms var(--ease-spring); }
@media (hover:hover) and (pointer:fine) { .btn:hover { transform:translateY(-2px) scale(1.015); } .btn-primary:hover { transform:translateY(-2px) scale(1.02); } .btn:hover > [aria-hidden] { transform:translate(3px,-3px) scale(1.08); } }
.btn:active { transform:translateY(1px) scale(.975); transition-duration:70ms; }
@media (prefers-reduced-motion:reduce) { .btn > [aria-hidden] { transition:none; } .btn:hover > [aria-hidden] { transform:none; } }
body:has(.admin-page), body:has(.admin-app) { isolation:isolate; }
.admin-page, .admin-app, .shop-main, .shop-header { position:relative; z-index:1; }
/* [FBP] fbp-web · direction: quiet night sky · shared by the admin gate, temp gate and panel
   Layer contract: .galaxy-backdrop (-3) deep sky + nebula + far field · .galaxy-rim (-2) mid field + horizon haze
   · .shop-stars (-1) near field + twinkle + glints · .grain sits above the sky, below content.
   Every star is a hard-edged radial-gradient stop (0.4-0.9px radius = 1-2 device px at 2x), never a blurred blob. */
.galaxy-backdrop { position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; background:
  radial-gradient(110% 80% at 82% -20%, oklch(34% .09 292 / .16), transparent 60%),
  radial-gradient(90% 70% at 0% 106%, oklch(30% .07 232 / .12), transparent 64%),
  radial-gradient(70% 54% at 46% 48%, oklch(28% .05 305 / .07), transparent 72%),
  linear-gradient(180deg, oklch(7.5% .012 266) 0%, oklch(9.5% .016 272) 44%, oklch(11.5% .018 282) 100%); }
/* Milky Way: one faint diagonal dust band, static, behind every star layer. Narrow and low so it reads as dust, not glare. */
.galaxy-backdrop::after { content:""; position:absolute; inset:-20%; pointer-events:none; background:
  linear-gradient(103deg, transparent 41%, oklch(80% .03 282 / .022) 47%, oklch(92% .015 282 / .038) 50%, oklch(80% .03 282 / .022) 53%, transparent 59%); }
/* Far field: dense and dim, slow drift. */
.galaxy-backdrop::before { content:""; position:absolute; inset:-48px; opacity:.9; background-image:
  radial-gradient(circle at 45.4% 55.8%, oklch(97% .01 260 / 0.39) 0.71px, transparent 0.9px),
  radial-gradient(circle at 19.4% 51.2%, oklch(97% .01 260 / 0.47) 0.66px, transparent 0.81px),
  radial-gradient(circle at 15.3% 53.8%, oklch(95% .02 240 / 0.43) 0.7px, transparent 0.9px),
  radial-gradient(circle at 95.1% 64.9%, oklch(97% .01 260 / 0.32) 0.65px, transparent 0.79px),
  radial-gradient(circle at 7.3% 20.0%, oklch(95% .02 240 / 0.29) 0.59px, transparent 0.78px),
  radial-gradient(circle at 58.8% 20.4%, oklch(97% .01 260 / 0.35) 0.59px, transparent 0.73px),
  radial-gradient(circle at 45.9% 28.5%, oklch(97% .01 260 / 0.52) 0.72px, transparent 0.94px),
  radial-gradient(circle at 32.1% 23.8%, oklch(95% .02 240 / 0.3) 0.6px, transparent 0.82px),
  radial-gradient(circle at 12.0% 29.7%, oklch(97% .01 260 / 0.28) 0.56px, transparent 0.77px),
  radial-gradient(circle at 21.8% 89.8%, oklch(97% .01 260 / 0.52) 0.63px, transparent 0.81px),
  radial-gradient(circle at 56.4% 20.8%, oklch(97% .01 260 / 0.36) 0.66px, transparent 0.83px),
  radial-gradient(circle at 95.0% 75.0%, oklch(97% .01 260 / 0.34) 0.57px, transparent 0.72px),
  radial-gradient(circle at 46.6% 48.7%, oklch(97% .01 260 / 0.33) 0.67px, transparent 0.86px),
  radial-gradient(circle at 42.2% 38.7%, oklch(97% .01 260 / 0.52) 0.62px, transparent 0.76px),
  radial-gradient(circle at 98.3% 3.4%, oklch(97% .01 260 / 0.52) 0.58px, transparent 0.78px),
  radial-gradient(circle at 5.6% 15.7%, oklch(97% .01 260 / 0.28) 0.63px, transparent 0.83px),
  radial-gradient(circle at 39.0% 8.7%, oklch(97% .01 260 / 0.43) 0.59px, transparent 0.73px),
  radial-gradient(circle at 37.6% 45.5%, oklch(95% .02 240 / 0.4) 0.71px, transparent 0.91px),
  radial-gradient(circle at 19.2% 16.5%, oklch(97% .01 260 / 0.48) 0.7px, transparent 0.86px),
  radial-gradient(circle at 16.9% 62.5%, oklch(95% .02 240 / 0.44) 0.64px, transparent 0.82px),
  radial-gradient(circle at 60.0% 42.4%, oklch(97% .01 260 / 0.29) 0.57px, transparent 0.81px),
  radial-gradient(circle at 73.3% 39.5%, oklch(97% .01 260 / 0.5) 0.62px, transparent 0.81px),
  radial-gradient(circle at 91.6% 96.3%, oklch(97% .01 260 / 0.4) 0.57px, transparent 0.78px),
  radial-gradient(circle at 28.7% 90.5%, oklch(95% .02 240 / 0.28) 0.58px, transparent 0.75px),
  radial-gradient(circle at 25.7% 6.0%, oklch(97% .01 260 / 0.41) 0.6px, transparent 0.84px),
  radial-gradient(circle at 36.6% 87.9%, oklch(97% .01 260 / 0.44) 0.72px, transparent 0.93px),
  radial-gradient(circle at 58.7% 91.1%, oklch(97% .01 260 / 0.37) 0.63px, transparent 0.8px),
  radial-gradient(circle at 3.6% 63.2%, oklch(97% .01 260 / 0.46) 0.63px, transparent 0.8px),
  radial-gradient(circle at 8.8% 54.5%, oklch(97% .01 260 / 0.5) 0.68px, transparent 0.89px),
  radial-gradient(circle at 78.4% 90.3%, oklch(95% .02 240 / 0.44) 0.61px, transparent 0.84px),
  radial-gradient(circle at 93.1% 4.4%, oklch(95% .02 240 / 0.28) 0.63px, transparent 0.84px),
  radial-gradient(circle at 58.0% 60.6%, oklch(95% .02 240 / 0.43) 0.56px, transparent 0.8px),
  radial-gradient(circle at 72.1% 39.2%, oklch(97% .01 260 / 0.42) 0.67px, transparent 0.85px),
  radial-gradient(circle at 51.8% 51.4%, oklch(97% .01 260 / 0.3) 0.6px, transparent 0.74px),
  radial-gradient(circle at 49.7% 61.1%, oklch(97% .01 260 / 0.34) 0.71px, transparent 0.85px),
  radial-gradient(circle at 15.4% 60.8%, oklch(95% .02 240 / 0.46) 0.64px, transparent 0.81px),
  radial-gradient(circle at 49.8% 24.9%, oklch(97% .01 260 / 0.34) 0.62px, transparent 0.82px),
  radial-gradient(circle at 86.9% 38.8%, oklch(95% .02 240 / 0.36) 0.65px, transparent 0.8px),
  radial-gradient(circle at 35.5% 88.4%, oklch(97% .01 260 / 0.3) 0.56px, transparent 0.8px),
  radial-gradient(circle at 12.4% 47.2%, oklch(95% .02 240 / 0.48) 0.71px, transparent 0.89px);
  animation:sky-drift-far 240s ease-in-out infinite alternate; }

/* Mid field: fewer, brighter, opposite drift. */
.galaxy-rim { position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none; background:
  radial-gradient(80% 26% at 14% 104%, oklch(38% .06 282 / .10), transparent 70%),
  radial-gradient(70% 22% at 88% 106%, oklch(40% .05 230 / .07), transparent 72%); }
.galaxy-rim::before { content:""; position:absolute; inset:-48px; opacity:.95; background-image:
  radial-gradient(circle at 94.4% 15.1%, oklch(97% .01 260 / 0.68) 0.7px, transparent 0.86px),
  radial-gradient(circle at 73.2% 86.7%, oklch(97% .01 260 / 0.44) 0.84px, transparent 1.01px),
  radial-gradient(circle at 32.5% 59.8%, oklch(97% .01 260 / 0.6) 0.87px, transparent 1.1px),
  radial-gradient(circle at 57.5% 3.6%, oklch(97% .01 260 / 0.53) 0.75px, transparent 0.91px),
  radial-gradient(circle at 58.0% 92.5%, oklch(96% .03 82 / 0.67) 0.84px, transparent 1.04px),
  radial-gradient(circle at 60.9% 26.6%, oklch(97% .01 260 / 0.5) 0.87px, transparent 1.09px),
  radial-gradient(circle at 28.6% 27.7%, oklch(97% .01 260 / 0.53) 0.82px, transparent 0.99px),
  radial-gradient(circle at 42.2% 25.9%, oklch(97% .01 260 / 0.65) 0.75px, transparent 0.93px),
  radial-gradient(circle at 31.3% 37.8%, oklch(95% .02 240 / 0.5) 0.8px, transparent 1.0px),
  radial-gradient(circle at 75.0% 88.7%, oklch(97% .01 260 / 0.44) 0.78px, transparent 0.96px),
  radial-gradient(circle at 43.4% 40.6%, oklch(95% .02 240 / 0.67) 0.87px, transparent 1.06px),
  radial-gradient(circle at 2.2% 46.0%, oklch(97% .01 260 / 0.43) 0.73px, transparent 0.91px),
  radial-gradient(circle at 33.3% 36.1%, oklch(97% .01 260 / 0.43) 0.73px, transparent 0.92px),
  radial-gradient(circle at 65.1% 11.3%, oklch(95% .02 240 / 0.45) 0.74px, transparent 0.89px),
  radial-gradient(circle at 5.7% 13.1%, oklch(95% .02 240 / 0.46) 0.83px, transparent 1.0px),
  radial-gradient(circle at 47.7% 7.9%, oklch(96% .03 82 / 0.67) 0.83px, transparent 0.98px),
  radial-gradient(circle at 92.9% 3.3%, oklch(97% .01 260 / 0.58) 0.79px, transparent 0.96px),
  radial-gradient(circle at 62.5% 59.4%, oklch(97% .01 260 / 0.47) 0.83px, transparent 0.98px),
  radial-gradient(circle at 35.7% 13.0%, oklch(97% .01 260 / 0.49) 0.74px, transparent 0.97px),
  radial-gradient(circle at 3.8% 74.5%, oklch(97% .01 260 / 0.58) 0.8px, transparent 0.98px),
  radial-gradient(circle at 72.8% 91.2%, oklch(97% .01 260 / 0.43) 0.85px, transparent 1.03px),
  radial-gradient(circle at 21.4% 74.6%, oklch(95% .02 240 / 0.43) 0.81px, transparent 1.02px),
  radial-gradient(circle at 46.6% 25.7%, oklch(97% .01 260 / 0.49) 0.74px, transparent 0.89px),
  radial-gradient(circle at 18.8% 94.8%, oklch(96% .03 82 / 0.43) 0.76px, transparent 0.92px);
  animation:sky-drift-mid 180s ease-in-out infinite alternate; }

@keyframes sky-drift-far { to { transform:translate3d(-22px,14px,0); } }
@keyframes sky-drift-mid { to { transform:translate3d(18px,-12px,0); } }
/* Gate pages start high: short top padding, columns top-aligned, so the card never falls below the fold. */
.admin-page { min-height:100dvh; padding:clamp(16px,2.4vw,32px) 0 clamp(24px,4vw,56px); }
.admin-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:16px; }
.admin-top .link { font-size:14px; }
.admin-login-shell { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); align-items:start; gap:clamp(32px,7vw,104px); }
.admin-intro { display:grid; gap:16px; max-width:520px; }
.admin-intro h1 { max-width:12ch; font-size:clamp(3rem,5.2vw,5rem); }
.admin-intro .lead { max-width:52ch; }
.admin-meta { display:flex; flex-wrap:wrap; gap:8px; }
/* 4/8 scale only. Concentric radii: card r=20 (radius-md) → input r=16 → toggle r=10 at a 6px inset. */
.admin-card { padding:clamp(24px,4vw,32px); display:grid; gap:24px; background-color:color-mix(in oklch, var(--bg-1) 82%, transparent); }
.admin-card-head { display:grid; gap:6px; }
.admin-card-head h2 { font-size:clamp(1.6rem,2.5vw,2.25rem); }
/* Gate forms are single-column: the shared 2-col panel grid squeezed the key field into half the card. */
.admin-form { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.admin-form .btn { min-height:44px; width:100%; }
.admin-status { min-height:24px; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-2); font:500 12px/1.5 var(--font-mono); }
.admin-status[data-tone="error"] { color:var(--danger); }
.admin-status[data-tone="success"] { color:var(--success); }
.step-indicator { display:flex; align-items:center; gap:8px; color:var(--text-3); font:500 12px var(--font-mono); }
.step-indicator::before { content:"01"; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--on-accent); background:var(--accent); box-shadow:0 0 24px -6px var(--accent-glow); }
.admin-app { min-height:100dvh; padding:24px 0 48px; }
.admin-app-shell { display:grid; grid-template-columns:240px minmax(0,1fr); gap:24px; align-items:start; }
.admin-rail { position:sticky; top:24px; display:grid; gap:24px; padding:24px; min-height:calc(100dvh - 48px); }
.admin-rail nav { display:grid; gap:8px; }
.admin-rail nav a { min-height:44px; display:flex; align-items:center; padding:0 14px; border-radius:var(--radius); color:var(--text-2); transition:color var(--t-fast) var(--ease-out),background-color var(--t-fast) var(--ease-out),transform 220ms var(--ease-spring),box-shadow 220ms var(--ease-out); }
.admin-rail nav a:hover, .admin-rail nav a[aria-current="page"] { color:var(--text-1); background:var(--accent-soft); transform:translateX(4px); box-shadow:inset 2px 0 0 var(--accent); }
.admin-content { display:grid; gap:24px; min-width:0; padding:24px 0; }
.admin-header { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.admin-header h1 { font-size:clamp(2.5rem,5vw,5rem); }
.admin-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.admin-grid > * { grid-column:span 4; }
.admin-grid > .wide { grid-column:span 8; }
.admin-grid > .full { grid-column:1/-1; }
.admin-panel { padding:24px; display:grid; gap:16px; }
.admin-panel h2 { font-size:22px; }
.admin-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.admin-list li { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
.admin-list li:last-child { border-bottom:0; }
@media (max-width:800px) { .admin-login-shell,.admin-app-shell { grid-template-columns:1fr; } .admin-intro { max-width:none; } .admin-intro h1 { max-width:none; } .admin-rail { position:static; min-height:auto; } .admin-rail nav { grid-template-columns:repeat(3,1fr); } .admin-grid > *, .admin-grid > .wide { grid-column:1/-1; } }
@media (max-width:480px) { .admin-page,.admin-app { padding-top:16px; } .admin-rail nav { grid-template-columns:1fr 1fr; } .admin-list li { display:grid; gap:4px; } }
@media (prefers-reduced-motion:reduce) { .galaxy-backdrop::before,.galaxy-backdrop::after,.galaxy-rim::before,.shop-stars::before,.shop-stars::after,.star-glint { animation:none; } .admin-rail nav a { transition:none; } }
/* [FBP] fbp-web · direction: quiet night sky · near starfield + twinkle (admin gate, temp gate, panel) */
.shop-stars { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
/* Near field: the brightest handful, fastest drift. */
.shop-stars::before { content:""; position:absolute; inset:-48px; opacity:1; background-image:
  radial-gradient(circle at 56.8% 62.8%, oklch(97% .01 260 / 0.7) 1.01px, transparent 1.22px),
  radial-gradient(circle at 96.5% 89.3%, oklch(95% .02 240 / 0.72) 1.04px, transparent 1.25px),
  radial-gradient(circle at 44.7% 93.0%, oklch(95% .02 240 / 0.71) 0.98px, transparent 1.15px),
  radial-gradient(circle at 88.7% 73.6%, oklch(96% .03 82 / 0.82) 1.02px, transparent 1.24px),
  radial-gradient(circle at 91.5% 55.4%, oklch(96% .03 82 / 0.66) 0.99px, transparent 1.14px),
  radial-gradient(circle at 98.0% 97.6%, oklch(97% .01 260 / 0.73) 0.86px, transparent 1.07px),
  radial-gradient(circle at 51.2% 32.6%, oklch(95% .02 240 / 0.82) 0.92px, transparent 1.12px),
  radial-gradient(circle at 19.5% 12.2%, oklch(97% .01 260 / 0.88) 0.86px, transparent 1.07px),
  radial-gradient(circle at 7.6% 10.5%, oklch(96% .03 82 / 0.62) 1.01px, transparent 1.19px),
  radial-gradient(circle at 21.2% 20.2%, oklch(96% .03 82 / 0.76) 0.98px, transparent 1.17px),
  radial-gradient(circle at 58.7% 45.6%, oklch(95% .02 240 / 0.77) 1.02px, transparent 1.16px),
  radial-gradient(circle at 38.3% 77.2%, oklch(95% .02 240 / 0.88) 0.87px, transparent 1.01px),
  radial-gradient(circle at 71.6% 86.1%, oklch(95% .02 240 / 0.88) 1.02px, transparent 1.25px),
  radial-gradient(circle at 4.7% 10.0%, oklch(95% .02 240 / 0.84) 0.97px, transparent 1.16px);
  animation:sky-drift-near 120s ease-in-out infinite alternate; }

/* Twinkle subset: hard core + faint halo, slow breathe, static position. */
.shop-stars::after { content:""; position:absolute; inset:0; opacity:.55; background-image:
  radial-gradient(circle at 41.6% 53.9%, oklch(99% 0 0 / .26) 2.2px, transparent 3.4px),
  radial-gradient(circle at 41.6% 53.9%, oklch(97% .01 260 / .95) 0.75px, transparent 1px),
  radial-gradient(circle at 20.3% 24.7%, oklch(99% 0 0 / .26) 2.2px, transparent 3.4px),
  radial-gradient(circle at 20.3% 24.7%, oklch(97% .01 260 / .95) 0.75px, transparent 1px),
  radial-gradient(circle at 24.7% 56.3%, oklch(99% 0 0 / .26) 2.2px, transparent 3.4px),
  radial-gradient(circle at 24.7% 56.3%, oklch(97% .01 260 / .95) 0.75px, transparent 1px),
  radial-gradient(circle at 18.4% 51.3%, oklch(99% 0 0 / .26) 2.2px, transparent 3.4px),
  radial-gradient(circle at 18.4% 51.3%, oklch(96% .03 82 / .95) 0.75px, transparent 1px),
  radial-gradient(circle at 67.8% 38.8%, oklch(99% 0 0 / .26) 2.2px, transparent 3.4px),
  radial-gradient(circle at 67.8% 38.8%, oklch(95% .02 240 / .95) 0.75px, transparent 1px),
  radial-gradient(circle at 74.5% 65.6%, oklch(99% 0 0 / .26) 2.2px, transparent 3.4px),
  radial-gradient(circle at 74.5% 65.6%, oklch(96% .03 82 / .95) 0.75px, transparent 1px);
  animation:sky-twinkle 9s ease-in-out infinite; }

@keyframes sky-drift-near { to { transform:translate3d(-34px,20px,0); } }
@keyframes sky-twinkle { 0%,100% { opacity:.34; } 50% { opacity:.86; } }
/* Four diffraction crosses, deliberately quiet: light, not decoration. */
.star-glint { position:absolute; width:9px; height:9px; opacity:.3; animation:star-glint 7.4s ease-in-out infinite; }
.star-glint::before,.star-glint::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:99px; background:linear-gradient(transparent,oklch(97% .01 260 / .8),transparent); }
.star-glint::before { width:1px; height:100%; } .star-glint::after { width:100%; height:1px; }
.star-glint.g1 { left:18%; top:36%; } .star-glint.g2 { left:82%; top:27%; width:7px; height:7px; animation-delay:1.9s; } .star-glint.g3 { left:74%; top:77%; width:8px; height:8px; animation-delay:3.4s; } .star-glint.g4 { left:11%; top:73%; width:6px; height:6px; animation-delay:.9s; }
@keyframes star-glint { 0%,100% { opacity:.14; transform:scale(.92); } 50% { opacity:.5; transform:scale(1); } }
/* Admin gate polish: stepper, burner timer, card entrance, focus rings */
.admin-login-shell { animation:admin-in 680ms var(--spring, cubic-bezier(.16,1,.3,1)) both; }
@keyframes admin-in { from { opacity:0; transform:translate3d(0, 32px, 0) scale(.975); } to { opacity:1; transform:none; } }
.admin-intro > * { animation:admin-rise 680ms var(--spring, cubic-bezier(.16,1,.3,1)) both; }
.admin-intro > :nth-child(2) { animation-delay:80ms; } .admin-intro > :nth-child(3) { animation-delay:160ms; } .admin-intro > :nth-child(4) { animation-delay:240ms; }
@keyframes admin-rise { from { opacity:0; transform:translate3d(0, 24px, 0) scale(.985); } to { opacity:1; transform:none; } }
.admin-intro h1 { text-wrap:balance; letter-spacing:-.04em; filter:drop-shadow(0 0 32px oklch(80% .04 275 / .16)); }
.admin-intro .eyebrow { color:var(--accent-text); }
.admin-steps { display:grid; gap:8px; margin:8px 0 0; padding:0; list-style:none; }
.admin-steps li { display:flex; align-items:baseline; gap:12px; padding:12px 16px; border-radius:var(--radius); border:1px solid var(--border); background:color-mix(in oklch, var(--bg-1) 72%, transparent); transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.admin-steps li strong { font:600 13px var(--font-sans); letter-spacing:.02em; }
.admin-steps li span { margin-left:auto; font:500 12px var(--font-mono); color:var(--text-3); }
.admin-steps li[aria-current="step"] { border-color:color-mix(in oklch, var(--accent) 55%, transparent); box-shadow:0 0 0 1px color-mix(in oklch, var(--accent) 35%, transparent), 0 12px 40px -18px var(--accent-glow); }
.admin-steps li[aria-current="step"] span { color:var(--accent-text); }
.burner-timer { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid color-mix(in oklch, var(--warning, oklch(75% .14 75)) 45%, transparent); font:600 13px var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text-1); background:color-mix(in oklch, var(--warning, oklch(75% .14 75)) 12%, var(--bg-1)); width:fit-content; }
.burner-timer[data-urgent="true"] { border-color:color-mix(in oklch, var(--danger) 60%, transparent); color:var(--danger); }
.burner-dot { width:8px; height:8px; border-radius:50%; background:var(--warning, oklch(75% .14 75)); box-shadow:0 0 12px var(--warning, oklch(75% .14 75)); animation:burner-pulse 1.2s ease-in-out infinite; }
.burner-timer[data-urgent="true"] .burner-dot { background:var(--danger); box-shadow:0 0 12px var(--danger); animation-duration:.6s; }
@keyframes burner-pulse { 50% { opacity:.35; transform:scale(.75); } }
.step-indicator.step-two::before { content:"02"; }
.admin-card { position:relative; overflow:hidden; border-radius:var(--radius-md); }
.admin-card::before { content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg, transparent, oklch(88% .03 260 / .5), transparent); opacity:.6; }
.admin-card::after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(140deg, oklch(88% .03 260 / .22), transparent 30%, transparent 70%, oklch(90% .05 260 / .15)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.5; }
.admin-form .input { min-height:44px; }
/* One violet ring, not a white outline stacked on an accent halo. */
.admin-form .input:focus-visible, .admin-form .btn:focus-visible, .pass-toggle:focus-visible, .admin-top .link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.admin-form .input { transition:border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.admin-form .input:focus { border-color:color-mix(in oklch, var(--accent) 55%, transparent); }
.pass-wrap { position:relative; }
.pass-wrap .input { padding-right:52px; }
.pass-toggle { position:absolute; right:6px; top:50%; transform:translateY(-50%); min-height:32px; padding:0 10px; border:0; border-radius:10px; background:transparent; color:var(--text-3); font:600 12px var(--font-mono); cursor:pointer; }
.pass-toggle:hover { color:var(--text-1); background:var(--bg-2); }
.admin-status { display:flex; align-items:baseline; gap:8px; min-height:24px; }
.admin-status[data-tone="error"]::before, .admin-status[data-tone="success"]::before { content:""; width:7px; height:7px; flex:none; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.admin-status:empty { display:none; } .admin-status:empty::before { content:none; }
.caps-hint { font-size:12px; color:var(--warning, oklch(75% .14 75)); min-height:0; }
@media (max-width:800px) { .admin-steps li span { margin-left:0; } .admin-steps li { flex-wrap:wrap; gap:4px 12px; } }
@media (prefers-reduced-motion:reduce) { .galaxy-backdrop::before,.galaxy-backdrop::after,.galaxy-rim::before,.shop-stars::before,.shop-stars::after,.star-glint,.admin-login-shell,.admin-intro > * { animation:none; } .burner-dot { animation:none; } .star-glint { opacity:.65; } .shop-stars::after { opacity:.55; } }