/* The live layer for every editor page (Design, Face, Sounds, Moves, Test). Loaded LAST, after the page's own CSS.
   The team lead, 2026-11-03: "very vanilla, very boring ... nothing highlights when I hover ... It feels dead."
   So: every control answers the pointer (lift, neon ring, soft glow), every chosen thing is lit, each tab has its own
   neon (brand neons as accents only, never as backgrounds; text on light uses the dark "ink" of the neon for contrast),
   panels are glass with a neon tick, and the page comes in with a short rise. Nothing here changes layout sizes. */
:root {
  --hue: #04D9C4; --hue-ink: #087F75; --hue-rgb: 4, 217, 196;
  --night: #141A21; --page: #EDF0F4; --glass: rgba(255, 255, 255, 0.86); --hair: rgba(20, 26, 33, 0.10);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-hue="face"]   { --hue: #04D9C4; --hue-ink: #087F75; --hue-rgb: 4, 217, 196; }
html[data-hue="design"] { --hue: #04D9C4; --hue-ink: #087F75; --hue-rgb: 4, 217, 196; }
html[data-hue="sound"]  { --hue: #FF2D92; --hue-ink: #B3125F; --hue-rgb: 255, 45, 146; }
html[data-hue="moves"]  { --hue: #FF6A00; --hue-ink: #A84600; --hue-rgb: 255, 106, 0; }
html[data-hue="test"]   { --hue: #FF6A00; --hue-ink: #A84600; --hue-rgb: 255, 106, 0; }
html[data-hue="behave"] { --hue: #18E36B; --hue-ink: #0D7A3C; --hue-rgb: 24, 227, 107; }
html[data-hue] { --accent: var(--hue-ink); --accent-dk: var(--night); --neon: var(--hue); }

/* ground: a fine dot grid with one soft wash of the tab's neon in the corner */
body {
  background-color: var(--page);
  background-image: radial-gradient(circle at 0 0, rgba(var(--hue-rgb), 0.10), transparent 38%),
                    radial-gradient(rgba(20, 26, 33, 0.07) 1px, transparent 1.3px);
  background-size: 100% 100%, 18px 18px;
  background-attachment: fixed;
}

/* panels: glass, a hairline, a soft lift, and a neon tick on the top edge */
.card {
  position: relative; background: var(--glass); border: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 14px 32px -22px rgba(20, 26, 33, 0.35);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
  animation: alive-rise .5s var(--ease) both;
}
.card::before {
  content: ""; position: absolute; left: 18px; top: -1px; width: 46px; height: 3px; border-radius: 0 0 3px 3px;
  background: var(--hue); box-shadow: 0 0 12px rgba(var(--hue-rgb), 0.7); pointer-events: none; z-index: 1;
  transition: width .3s var(--ease);
}
.card:hover { border-color: rgba(var(--hue-rgb), 0.35); }
.card:hover::before, .card:focus-within::before { width: 92px; }
.layout > :nth-child(2), .layout > :nth-child(2) .card { animation-delay: .06s; }
.layout > :nth-child(3), .layout > :nth-child(3) .card { animation-delay: .12s; }
@keyframes alive-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

h2 { font-weight: 800; letter-spacing: -0.01em; }
.ico, h2 .ico, h3 .ico { color: var(--hue-ink); }
.help { color: #4E5866; }

/* every button answers: lift, neon ring, soft glow; press sinks */
button:not(.vc-face), .btn, .tb, a.btn, .step a {
  transition: transform .14s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease);
}
button:not(.vc-face):not([disabled]):not([aria-disabled="true"]):hover,
a.btn:hover, .step a:hover {
  border-color: rgba(var(--hue-rgb), 0.9);
  box-shadow: 0 0 0 3px rgba(var(--hue-rgb), 0.16), 0 10px 22px -12px rgba(var(--hue-rgb), 0.75);
  transform: translateY(-1px);
}
button:not(.vc-face):not([disabled]):not([aria-disabled="true"]):active { transform: translateY(0) scale(0.97); box-shadow: 0 0 0 2px rgba(var(--hue-rgb), 0.35); }
button:not(.vc-face):not([disabled]):hover .ico { color: var(--hue-ink); filter: drop-shadow(0 0 6px rgba(var(--hue-rgb), 0.55)); }

/* the chosen thing is lit: a neon edge bar, a wash of the neon, bold */
button[aria-pressed="true"]:not(.padb), .tb[aria-pressed="true"], .vc-face.is-now {
  background: rgba(var(--hue-rgb), 0.12) !important; border-color: var(--hue) !important; color: var(--night); font-weight: 700;
  box-shadow: inset 4px 0 0 var(--hue), 0 0 0 1px rgba(var(--hue-rgb), 0.5), 0 8px 20px -12px rgba(var(--hue-rgb), 0.9);
}
.tb[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--hue), 0 0 0 1px rgba(var(--hue-rgb), 0.5); }

/* main actions: night with a neon glow */
.btn.main, #b-getit[aria-disabled="false"], .padb[aria-pressed="true"] {
  background: var(--night) !important; border-color: var(--night) !important; color: #fff !important;
  box-shadow: 0 0 0 1px rgba(var(--hue-rgb), 0.55) inset, 0 10px 24px -14px rgba(var(--hue-rgb), 0.9);
}
.btn.main .ico, #b-getit[aria-disabled="false"] .ico, .padb[aria-pressed="true"] .ico { color: var(--hue) !important; }
.btn.main:not([disabled]):hover, #b-getit[aria-disabled="false"]:hover {
  box-shadow: 0 0 0 1px var(--hue) inset, 0 0 0 4px rgba(var(--hue-rgb), 0.22), 0 14px 30px -12px rgba(var(--hue-rgb), 1);
}
#b-getit[aria-disabled="false"] .n { background: var(--hue) !important; color: var(--night) !important; }

/* the step bar: where you are is night with a neon number; the others lift */
.step.is-now { background: var(--night); border-color: var(--night); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 22px -4px rgba(var(--hue-rgb), 0.95); }
.step.is-now .n { background: var(--hue); color: var(--night); }
.step a { display: flex; align-items: center; gap: 8px; min-height: 42px; color: inherit; text-decoration: none; border-radius: var(--r-btn); }
.step:has(a):hover { border-color: rgba(var(--hue-rgb), 0.9); }
.step em { color: #7A8492; }

/* fields */
input[type="text"], input[type="number"], input:not([type]), select, textarea {
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input[type="text"]:hover, input[type="number"]:hover, input:not([type]):hover, select:hover, textarea:hover { border-color: rgba(var(--hue-rgb), 0.7); }
input[type="text"]:focus, input[type="number"]:focus, input:not([type]):focus, select:focus, textarea:focus {
  border-color: var(--hue-ink); box-shadow: 0 0 0 4px rgba(var(--hue-rgb), 0.18); outline: none;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, canvas:focus-visible {
  outline: 2px solid var(--hue-ink) !important; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(var(--hue-rgb), 0.22);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--hue-ink); }

/* sliders: a slim track and a glowing thumb that grows under the finger */
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; accent-color: var(--hue-ink); cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--hue-rgb), 0.55), #CBD2DB); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: #CBD2DB; }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--hue); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff;
  border: 3px solid var(--hue-ink); box-shadow: 0 0 0 0 rgba(var(--hue-rgb), 0.4), 0 2px 6px rgba(20, 26, 33, 0.25);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--hue-ink);
  box-shadow: 0 2px 6px rgba(20, 26, 33, 0.25); transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(var(--hue-rgb), 0.22), 0 0 14px rgba(var(--hue-rgb), 0.8); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }
input[type="range"]:hover::-moz-range-thumb, input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(var(--hue-rgb), 0.22), 0 0 14px rgba(var(--hue-rgb), 0.8); }

/* the 3D view and the dark screens get a neon rim */
.view { background: #E6EBF1; box-shadow: inset 0 0 0 1px var(--hair); }
canvas.screen, .screenbox, .facebox { box-shadow: 0 0 0 1px rgba(var(--hue-rgb), 0.35), 0 0 28px -10px rgba(var(--hue-rgb), 0.9); }

/* list rows and part cards answer too */
.part { transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); border-top-color: var(--hue); }
.part:hover { transform: translateY(-2px); border-color: rgba(var(--hue-rgb), 0.6); box-shadow: 0 14px 26px -16px rgba(var(--hue-rgb), 0.9); }

/* status chips: a live dot */
.chip { position: relative; padding-left: 26px; }
.chip::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--hue); box-shadow: 0 0 8px var(--hue); animation: alive-pulse 2.4s ease-in-out infinite; }
@keyframes alive-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .card, .chip::before { animation: none !important; }
  button, .btn, .part { transition: none !important; transform: none !important; }
}