/* Layer order matches Tailwind v4 so utilities (hidden, md:flex, px-…) override these components */
@layer theme, base, components, utilities;

/* everything clickable gets the hand cursor (Tailwind v4 leaves buttons with the plain arrow) */
@layer base {
  button:not(:disabled), [role="button"], summary, select, label:has(input[type="checkbox"]), label:has(input[type="radio"]),
  input[type="checkbox"], input[type="radio"], input[type="range"], input[type="color"], input[type="file"], ::file-selector-button { cursor: pointer; }
  button:disabled { cursor: not-allowed; }
}

@layer components {

/* ===== Tokens ===== */
:root {
  --bg: #0b0b0d;
  --surface: #151518;     /* blocks */
  --surface-2: #1d1d21;   /* buttons, fields */
  --surface-3: #26262b;   /* hover */
  --text: #f4f4f6;
  --muted: #9a9aa6;
  --accent: #3461e0;
  --accent-hover: #2d56cc;
  --r-xl: 2.25rem;
  --r-lg: 1.75rem;
  --r-md: 1.375rem;
  --spring: cubic-bezier(.3,1.6,.5,1);
}

/* global scale: everything is in rem, so this one value sizes the whole UI (87.5%) */
html { color-scheme: dark; font-size: 87.5%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(52, 97, 224, .5); }

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
*::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6.1875rem; }

/* ===== Icons (Iconify web component: Solar Bold + Phosphor Fill logos, rendered as SVG) ===== */
iconify-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

/* ===== Blocks ===== */
.card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
}
.card-raised { background: var(--surface-2); box-shadow: 0 1rem 2.5rem -1rem rgba(0,0,0,.8); }

/* liquid-glass rim: a barely visible light edge running from the top-left and bottom-right corners */
.card::before,
.btn::before,
.field::before,
.tile::before,
.chip::before,
.nav-item.active::before,
.segmented::before,
.segmented .pill::before,
.switch .track::before,
.check-box .box::before,
.glass::before,
.tab-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  /* two separate highlights, so each one can run past the middle of the edge */
  background:
    linear-gradient(to bottom right, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 30%, rgba(255,255,255,0) 64%),
    linear-gradient(to top left, rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 30%, rgba(255,255,255,0) 64%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* small inner surfaces (video cards, icon tiles, quota box) */
.tile { position: relative; background: var(--surface-2); }
.tile-3 { background: var(--surface-3); }

/* ===== Buttons ===== */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding: 0 1.375rem;
  border-radius: 1.25rem;
  font-weight: 600; font-size: 0.875rem; letter-spacing: .01em;
  color: var(--text);
  background: var(--surface-2);
  transition: transform .18s var(--spring), background-color .2s, opacity .2s;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--surface-3); }
/* press depth: ui.js sets --press from the element's width, so wide ones sink by a few pixels, not by a percentage */
.btn:active, .press:active { transform: scale(var(--press, .97)); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { height: 2.375rem; padding: 0 1rem; font-size: 0.8125rem; border-radius: 1rem; }
.btn-icon { width: 2.75rem; padding: 0; }
.btn-icon.btn-sm { width: 2.375rem; }
.btn-white { background: #fff; color: #0b0b0f; }
.btn-white:hover { background: #e8e8ee; }
.btn-white::before { display: none; }
.btn-ghost { background: transparent; }
.btn-ghost::before { display: none; }
.btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn-danger:hover { background: rgba(244,63,94,.16); color: #fda4af; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn > :not(.ripple-clip):not(.fluid) { position: relative; z-index: 1; }

.press { transition: transform .18s var(--spring); -webkit-tap-highlight-color: transparent; }

/* ripple */
.ripple-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,.15) 45%, rgba(255,255,255,0) 70%);
  filter: blur(0.875rem);
  transform: scale(0); animation: ripple .7s ease-out forwards;
}
.btn-white .ripple { background: radial-gradient(circle, rgba(0,0,0,.2) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 70%); }
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

/* ===== Loading: fluid blue gradient (widemade-style), only while .is-loading ===== */
.fluid { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity .4s; pointer-events: none; }
.fluid i {
  position: absolute; inset: -60% -20%;
  background:
    radial-gradient(28% 45% at 22% 45%, #9dbdf0 0%, rgba(157,189,240,0) 70%),
    radial-gradient(24% 40% at 58% 65%, #e3eaf8 0%, rgba(227,234,248,0) 70%),
    radial-gradient(30% 50% at 45% 25%, #1b3a9e 0%, rgba(27,58,158,0) 70%),
    radial-gradient(26% 45% at 82% 35%, #6b98e6 0%, rgba(107,152,230,0) 70%),
    radial-gradient(30% 50% at 8% 80%, #1f44b8 0%, rgba(31,68,184,0) 70%),
    #2c55c9;
  filter: blur(0.625rem);
  animation: fluid-a 5s ease-in-out infinite alternate;
}
.fluid i + i {
  mix-blend-mode: soft-light; opacity: .9;
  animation: fluid-b 3.6s ease-in-out infinite alternate;
}
/* film grain */
.fluid::after {
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.is-loading .fluid { opacity: 1; }
.btn.is-loading { cursor: progress; }
@keyframes fluid-a {
  0%   { transform: translate(-10%, -6%) rotate(0deg) scale(1); }
  50%  { transform: translate(8%, 6%) rotate(18deg) scale(1.15); }
  100% { transform: translate(-4%, 10%) rotate(-12deg) scale(1.05); }
}
@keyframes fluid-b {
  0%   { transform: translate(12%, 8%) rotate(160deg) scale(1.1); }
  100% { transform: translate(-12%, -8%) rotate(200deg) scale(.95); }
}

/* ===== Text ===== */
.text-accent { color: #7d9ff5; }

/* ===== Fields ===== */
.field {
  position: relative;
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: background-color .2s, box-shadow .2s;
}
.field:focus-within { background: var(--surface-3); }
.field input, .field textarea {
  width: 100%; background: transparent; outline: none; border: 0;
  color: var(--text); font: inherit; font-size: 0.875rem;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6b78; }

/* ===== Custom select ===== */
.select { position: relative; }
.select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  height: 3rem; padding: 0 1rem; border-radius: var(--r-md);
  font-size: 0.875rem; font-weight: 500; text-align: left;
}
.select-trigger .chev { transition: transform .25s cubic-bezier(.3,1.4,.5,1); opacity: .6; }
.select.open .select-trigger .chev { transform: rotate(180deg); }
.select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); z-index: 60;
  padding: 0.375rem; border-radius: 1.625rem;
  opacity: 0; transform: translateY(-0.375rem) scale(.97); transform-origin: top center;
  pointer-events: none; transition: opacity .18s, transform .22s cubic-bezier(.3,1.4,.5,1);
  max-height: 17.5rem; overflow-y: auto;
}
.select.open .select-menu { opacity: 1; transform: none; pointer-events: auto; }
.select-option, .pop-item {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  padding: 0.625rem 0.75rem; border-radius: 1rem; font-size: 0.875rem; font-weight: 500;
  color: #d6d6de; cursor: pointer; transition: background-color .15s, transform .15s;
}
.select-option:hover, .select-option.active, .pop-item:hover { background: var(--surface-3); color: #fff; }
.select-option:active, .pop-item:active { transform: scale(var(--press, .985)); }
.select-option .check { margin-left: auto; opacity: 0; color: #7d9ff5; }
.select-option.selected .check { opacity: 1; }
.select-option .desc { display: block; font-size: 0.75rem; font-weight: 400; color: var(--muted); }
.hs-dropdown-menu { transition: opacity .18s, margin .18s; }

/* ===== Switch ===== */
.switch { position: relative; width: 3.25rem; height: 2rem; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; border-radius: 6.1875rem; background: var(--surface-3); transition: background-color .25s; }
.switch .thumb {
  position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.625rem; height: 1.625rem; border-radius: 6.1875rem; background: #fff;
  transition: transform .3s cubic-bezier(.3,1.5,.5,1), width .2s;
}
.switch input:checked ~ .track { background: var(--accent); }
.switch input:checked ~ .thumb { transform: translateX(1.25rem); }
.switch:active .thumb { width: 2rem; }
.switch input:checked:active ~ .thumb { transform: translateX(0.875rem); }
.switch input:focus-visible ~ .track { box-shadow: 0 0 0 0.1875rem rgba(52,97,224,.4); }

/* ===== Segmented control ===== */
.segmented { position: relative; display: inline-flex; padding: 0.25rem; border-radius: 99px; background: rgba(255,255,255,.045); }
.segmented button { position: relative; z-index: 1; height: 2.375rem; padding: 0 1rem; border-radius: 99px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); transition: color .2s, transform .18s var(--spring); }
.segmented button:active { transform: scale(var(--press, .97)); }
.segmented button.on { color: #fff; }
/* the pill slides like the mobile tab bar: transform + a liquid stretch (UI.stretch); .snap places it instantly */
.segmented .pill {
  position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; border-radius: 99px; z-index: 0;
  background: rgba(255,255,255,.11);
  transition: translate .42s cubic-bezier(.3,1.25,.45,1), width .42s cubic-bezier(.3,1.25,.45,1);
}
.segmented .pill.snap { transition: none; }

/* ===== Custom checkbox ===== */
.check-box { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; font-size: 0.875rem; user-select: none; }
.check-box input { position: absolute; opacity: 0; pointer-events: none; }
.check-box .box {
  position: relative; width: 1.5rem; height: 1.5rem; border-radius: 0.625rem; display: grid; place-items: center;
  background: var(--surface-3); transition: background-color .2s, transform .18s var(--spring);
}
.check-box .box iconify-icon { opacity: 0; transform: scale(.4); transition: all .22s var(--spring); }
.check-box input:checked + .box { background: var(--accent); }
.check-box input:checked + .box iconify-icon { opacity: 1; transform: none; }
.check-box:active .box { transform: scale(.88); }

/* ===== Range ===== */
input[type=range].range { -webkit-appearance: none; appearance: none; width: 100%; height: 1.75rem; background: transparent; cursor: pointer; }
input[type=range].range::-webkit-slider-runnable-track {
  height: 0.375rem; border-radius: 6.1875rem;
  background: linear-gradient(var(--accent), var(--accent)) 0/var(--p, 50%) 100% no-repeat, var(--surface-3);
}
input[type=range].range::-moz-range-track { height: 0.375rem; border-radius: 6.1875rem; background: var(--surface-3); }
input[type=range].range::-moz-range-progress { height: 0.375rem; border-radius: 6.1875rem; background: var(--accent); }
input[type=range].range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin-top: -0.5625rem; border-radius: 6.1875rem; background: #fff;
  transition: transform .18s var(--spring);
}
input[type=range].range:active::-webkit-slider-thumb { transform: scale(1.2); }
input[type=range].range::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border: 0; border-radius: 6.1875rem; background: #fff; }

/* ===== Dropzone ===== */
.dropzone { border-radius: var(--r-lg); background: var(--surface-2); transition: background-color .2s, transform .2s; cursor: pointer; }
.dropzone:hover { background: var(--surface-3); }
.dropzone.drag { background: rgba(52,97,224,.14); transform: scale(1.01); }
.dash-border { position: absolute; inset: 0; border-radius: inherit; border: 1.5px dashed rgba(255,255,255,.12); pointer-events: none; }
.dropzone.drag .dash-border { border-color: rgba(125,159,245,.7); }

/* ===== Progress ===== */
.progress { height: 0.5rem; border-radius: 6.1875rem; background: var(--surface-3); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .35s ease; }

/* ===== Placeholder player ===== */
.player-bg { background: #1f1f24; }

/* ===== Nav items ===== */
.nav-item { position: relative; display: flex; align-items: center; gap: .8rem; height: 3rem; padding: 0 1rem; border-radius: 1.375rem; font-size: 0.875rem; font-weight: 600; color: var(--muted); transition: background-color .2s, color .2s, transform .18s var(--spring); }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-item:active { transform: scale(var(--press, .97)); }
.nav-item.active { color: #fff; background: var(--surface-3); }

/* ===== Chips ===== */
.chip { position: relative; display: inline-flex; align-items: center; gap: .4rem; height: 1.75rem; padding: 0 0.75rem; border-radius: 6.1875rem; font-size: 0.75rem; font-weight: 600; background: var(--surface-2); }

/* ===== Views / anim ===== */
.view { animation: viewIn .2s ease; transition: opacity .2s ease; }
.view.view-out { opacity: 0; pointer-events: none; }
@keyframes viewIn { from { opacity: 0; } to { opacity: 1; } }
.pop-in { animation: popIn .4s cubic-bezier(.3,1.4,.5,1); }
@keyframes popIn { from { opacity: 0; transform: scale(.94) translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* ===== Toast ===== */
/* toasts drop in at the top of the screen, over the header */
#toasts { position: fixed; left: 50%; top: calc(1.25rem + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; width: max-content; max-width: calc(100vw - 2rem); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: .6rem; padding: 0.75rem 1.125rem; border-radius: 6.1875rem; font-size: 0.875rem; font-weight: 500; animation: toastIn .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes toastIn { from { opacity: 0; transform: scale(.94) translateY(-0.75rem); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transform: translateY(-0.625rem) scale(.96); transition: all .25s; }

/* ===== Platform badges ===== */
.pf-youtube { background: #e11d2e; color: #fff; }
.pf-tiktok { background: #111114; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.pf-instagram { background: #d62976; color: #fff; }

/* ===== Dashboard progress text via CSS counters ===== */
.pct::after { counter-reset: p var(--p, 0); content: counter(p) "%"; }
.secs::after { counter-reset: s var(--s, 0); content: "0:" counter(s, decimal-leading-zero); }
.step .ic-done, .step .ic-cur { display: none; }
.step { color: #71717a; }
.step .dot { background: var(--surface-3); }
.step.is-cur { color: #fff; }
.step.is-cur .dot { background: rgba(52,97,224,.25); color: #9db8f7; }
.step.is-cur .ic-cur { display: block; }
.step.is-done { color: #d4d4d8; }
.step.is-done .dot { background: rgba(74,222,128,.18); color: #86efac; }
.step.is-done .ic-done { display: block; }
.step.is-err { color: #fda4af; }
.step.is-err .dot { background: rgba(251,113,133,.18); }
/* banner editor on the preview: drag to move, corner handles to resize */
.bbox { position: absolute; z-index: 2; cursor: move; touch-action: none; border-radius: 0.375rem; outline: 2px dashed rgba(157,184,247,.9); outline-offset: 0; }
.bbox:hover, .bbox.dragging { outline-style: solid; }
.bbox > span { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #3461e0; touch-action: none; }
.bbox > [data-h="nw"] { left: -0.5rem; top: -0.5rem; cursor: nwse-resize; }
.bbox > [data-h="ne"] { right: -0.5rem; top: -0.5rem; cursor: nesw-resize; }
.bbox > [data-h="sw"] { left: -0.5rem; bottom: -0.5rem; cursor: nesw-resize; }
.bbox > [data-h="se"] { right: -0.5rem; bottom: -0.5rem; cursor: nwse-resize; }
/* checkerboard behind banners so transparency is visible */
.checker { background: repeating-conic-gradient(#2a2a30 0 25%, #1c1c21 0 50%) 0 0 / 1rem 1rem; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 0.75rem; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 0.75rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

} /* end @layer components */

/* ===== Landing: 3D scenes & mini diagrams ===== */
@layer components {
  .scene3d { position: relative; }
  .scene3d canvas { display: block; width: 100%; height: 100%; transition: opacity .6s ease; }
  .scene3d.fade:not(.ready) canvas { opacity: 0; } /* .fade is set by scene3d.js, .ready after the first frame */
  .scene3d-off { display: none; }

  /* tiny phone used to show where the banner goes */
  .mini-phone { position: relative; width: 5.5rem; aspect-ratio: 9 / 17; border-radius: 1.375rem; background: var(--surface-3); overflow: hidden; }
  .mini-phone::after { content: ""; position: absolute; left: 50%; top: 0.375rem; width: 1.75rem; height: 0.375rem; border-radius: 99px; background: #0b0b0d; transform: translateX(-50%); }
  .mini-phone .ban { position: absolute; left: 0.375rem; right: 0.375rem; height: 22%; border-radius: 0.75rem; background: var(--accent); }
  .mini-phone .line { position: absolute; left: 0.5rem; height: 0.3125rem; border-radius: 99px; background: rgba(255,255,255,.18); }
}

/* ===== Niche: reveal on scroll, flow, rules, income calculator ===== */
@layer components {
  /* elements fade up once they enter the viewport (class .in is added by UI.reveal) */
  .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1); transition-delay: var(--d, 0ms); }
  .reveal.in { opacity: 1; transform: none; }

  /* coloured icon tile: set --c to the icon colour */
  .ic-tile { display: grid; place-items: center; flex-shrink: 0; color: var(--c, #7d9ff5); background: color-mix(in srgb, var(--c, #7d9ff5) 16%, transparent); }

  /* niche flow: numbered steps joined by arrow badges (desktop) */
  .flow { counter-reset: flow; }
  .flow-step { position: relative; counter-increment: flow; }
  .flow-step .num::before { content: "0" counter(flow); }
  @media (min-width: 64rem) {
    .flow.arrows .flow-step:nth-child(1) { z-index: 4; } .flow.arrows .flow-step:nth-child(2) { z-index: 3; } .flow.arrows .flow-step:nth-child(3) { z-index: 2; }
    .flow.arrows .flow-step:not(:last-child)::after {
      content: "→"; position: absolute; top: 2.5rem; right: -1.5rem; z-index: 5;
      display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
      background: var(--surface-3); color: #7d9ff5; font-weight: 800; box-shadow: 0 0 0 0.3rem var(--bg);
      animation: flowNudge 1.6s ease-in-out infinite;
    }
  }
  @keyframes flowNudge { 50% { transform: translateX(0.2rem); } }

  /* big icon peeking out of the card's top-right corner; set --c on the card */
  .peek-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
  .peek {
    position: absolute; top: -0.35rem; right: -0.35rem; display: grid; place-items: center;
    color: var(--c, #7d9ff5); font-size: 5.75rem; line-height: 1;
    transform: rotate(-16deg); transition: transform .5s var(--spring);
  }
  .peek > * { font-size: inherit; width: 1em; height: 1em; display: block; }
  .peek-card:hover .peek { transform: rotate(-6deg) translate(-0.4rem, 0.4rem); }
  .peek-sm .peek { top: -0.3rem; right: -0.3rem; font-size: 4.5rem; }

  /* income calculator output */
  .calc-out { font-variant-numeric: tabular-nums; }
  .glow-num { background: linear-gradient(120deg, #fde68a, #f59e0b 60%, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* publish checklist */
  .check-row { display: flex; align-items: flex-start; gap: .8rem; padding: .85rem 1rem; border-radius: 1.25rem; background: var(--surface-2); cursor: pointer; transition: background-color .2s, opacity .2s; }
  .check-row:hover { background: var(--surface-3); }
  .check-row .check-box { pointer-events: none; }
  .check-row.done .t { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* Plyr is loaded unlayered, so its overrides live outside the layers too */
.plyr { --plyr-color-main: #3461e0; --plyr-font-family: inherit; --plyr-control-radius: 0.75rem; --plyr-video-background: #000; height: 100%; }
.plyr--video .plyr__controls { padding: 0.5rem; }
.plyr__control--overlaid { background: rgba(0,0,0,.55); }
.plyr__control--overlaid:hover { background: var(--plyr-color-main); }

/* ===== SPA loader, auth forms, tooltips, error box ===== */
@layer components {
  /* top progress bar + spinner shown while a page loads */
  #spa-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .3s; }
  #spa-bar.on { opacity: 1; }
  #spa-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #3461e0, #7d9ff5); transform-origin: left; transform: scaleX(0); transition: transform .25s ease; }
  #spa-spinner { position: fixed; left: 50%; top: 45vh; z-index: 150; display: flex; align-items: center; gap: .7rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 99px; background: var(--surface-2); font-size: .8125rem; font-weight: 600; color: var(--muted); pointer-events: none; opacity: 0; transform: translate(-50%, .5rem); transition: opacity .25s, transform .25s; }
  #spa-spinner.on { opacity: 1; transform: translate(-50%, 0); }
  body[data-layout="app"] #spa-spinner { left: 50%; }
  @media (min-width: 64rem) { body[data-layout="app"] #spa-spinner { left: calc(50% + 9rem); } }
  .spa-ring { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2.5px solid rgba(125,159,245,.25); border-top-color: #7d9ff5; animation: spin .7s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* auth inputs: icon + input (+ hint button) in one field */
  .auth-field { display: flex; align-items: center; gap: .75rem; padding: 0 .5rem 0 1rem; color: var(--muted); }
  .auth-field input { height: 3.25rem; flex: 1; min-width: 0; }
  .field.invalid { box-shadow: 0 0 0 0.1875rem rgba(244,63,94,.4); }
  .auth-link { color: #9db8f7; font-weight: 600; transition: color .2s; }
  .auth-link:hover { color: #fff; }

  /* question-mark hint with a tooltip above it (hover on desktop, tap on phones) */
  .hint { position: relative; display: grid; flex-shrink: 0; }
  .hint-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s, transform .18s var(--spring); -webkit-tap-highlight-color: transparent; }
  .hint-btn:hover, .hint.open .hint-btn { color: #fff; background: rgba(255,255,255,.08); }
  .hint-btn:active { transform: scale(.82); }
  .tip {
    position: absolute; right: -0.25rem; bottom: calc(100% + 0.75rem); z-index: 30; width: 17rem;
    padding: .9rem 1rem; border-radius: 1.25rem; background: #0c0c0f; border: 1px solid rgba(255,255,255,.07);
    color: #d4d4d8; font-size: .75rem; line-height: 1.55; text-align: left;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(.5rem);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }
  /* arrow pointing down at the question mark */
  .tip::after { content: ""; position: absolute; right: .85rem; bottom: -0.4rem; width: .75rem; height: .75rem; background: #0c0c0f; border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); border-bottom-right-radius: .2rem; transform: rotate(45deg); }
  .tip b { display: block; margin-bottom: .35rem; color: #fff; font-size: .8125rem; }
  .hint.open .tip { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }
  @media (hover: hover) {
    .hint:hover .tip, .hint-btn:focus-visible + .tip { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s; }
  }
  /* password rules turn green as they are met */
  .rules li { position: relative; padding-left: 1.1rem; transition: color .2s; }
  .rules li::before { content: ""; position: absolute; left: .15rem; top: .55em; width: .4rem; height: .4rem; border-radius: 50%; background: #6b6b78; transition: background-color .2s; }
  .rules li.ok { color: #86efac; }
  .rules li.ok::before { background: #4ade80; }

  /* error box under the form: slides open and the card grows with it */
  .form-errors { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; transition: grid-template-rows .35s cubic-bezier(.2,.9,.3,1), opacity .25s, margin-top .35s cubic-bezier(.2,.9,.3,1); }
  .form-errors > div { min-height: 0; overflow: hidden; }
  .form-errors.show { grid-template-rows: 1fr; opacity: 1; margin-top: .9rem; }
  .form-errors-box { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem; border-radius: 1.25rem; background: rgba(244,63,94,.1); color: #fecdd3; font-size: .8125rem; line-height: 1.5; }
  .form-errors-box iconify-icon { color: #fb7185; margin-top: .05rem; }
  .form-errors-box ul { display: grid; gap: .3rem; }
  .form-ok .form-errors-box { background: rgba(74,222,128,.1); color: #bbf7d0; }
  .form-ok .form-errors-box iconify-icon { color: #4ade80; }
}

@layer components {
  .btn.is-busy { opacity: .65; pointer-events: none; }
}

/* ===== Sidebar rail + create page layout ===== */
@layer components {
  /* sidebar: a rail of icons by default, the book button slides the full panel out (state lives in a cookie) */
  body[data-layout="app"] { --side: 4.5rem; }
  body[data-layout="app"].side-open { --side: 16rem; }
  #shell { transition: padding-left .32s cubic-bezier(.2,.9,.3,1); }
  .side { width: var(--side); transition: width .32s cubic-bezier(.2,.9,.3,1); }
  .side-logo { display: flex; align-items: center; gap: .625rem; padding: .25rem .375rem .875rem; white-space: nowrap; }
  .side-item { padding: 0 .875rem; white-space: nowrap; }
  .side-label { transition: opacity .2s .1s; }
  body:not(.side-open) .side-label { opacity: 0; width: 0; overflow: hidden; pointer-events: none; transition: none; }
  body:not(.side-open) .side-item { gap: 0; }
  body:not(.side-open) .side-plan { display: none; }
  .side-toggle { width: 100%; }
  .side-sep { height: 1px; margin: .625rem .5rem; background: rgba(255,255,255,.07); }
  .side-toggle iconify-icon { transition: transform .3s; }
  body.side-open .side-toggle iconify-icon { transform: scaleX(-1); }
  /* section name next to an icon while the rail is collapsed */
  .side-tip {
    position: absolute; left: calc(100% + .9rem); top: 50%; z-index: 60; padding: .45rem .75rem; border-radius: .75rem;
    background: #0c0c0f; border: 1px solid rgba(255,255,255,.07); color: #fff; font-size: .8125rem; font-weight: 600; white-space: nowrap;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-.4rem, -50%);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .side-tip::before { content: ""; position: absolute; left: -.34rem; top: 50%; width: .6rem; height: .6rem; background: #0c0c0f; border-left: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); border-bottom-left-radius: .15rem; transform: translateY(-50%) rotate(45deg); }
  body:not(.side-open) .side-item:hover .side-tip,
  body:not(.side-open) .side-item:focus-visible .side-tip { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity .2s ease, transform .2s ease, visibility 0s; }
  body.side-open .side-tip { display: none; }
  @media (min-width: 64rem) { body[data-layout="app"] #spa-spinner { left: calc(50% + (var(--side) + 2rem) / 2); } }

  /* create page.
     ≥1280px: left = studio card (tall preview | parameters above generate), right = videos above banner.
     640–1279px: studio card on top, videos and banner side by side under it.
     phones: videos → banner first, then the studio stacked in one column. */
  .create-grid { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr); }
  .create-results { grid-column: 1 / -1; }
  .create-src { order: -1; display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 40rem) { .create-src { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
  @media (min-width: 80rem) {
    .create-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
    .create-src { order: 0; grid-template-columns: minmax(0, 1fr); }
  }
  .create-studio { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "params" "gen"; }
  .studio-preview { grid-area: preview; display: flex; flex-direction: column; }
  .studio-preview #preview-box { margin-top: .75rem; }
  .studio-params { grid-area: params; min-width: 0; }
  .studio-gen { grid-area: gen; }
  @media (min-width: 48rem) {
    .create-studio { grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "preview params" "preview gen"; }
    /* the preview fills the width of its tall tile (overrides the phone-size cap set by JS) and sits in its middle */
    .studio-preview #preview-box { margin-block: auto; width: 100%; max-width: 100% !important; }
  }
  @media (min-width: 80rem) { .create-studio { grid-template-columns: 19rem minmax(0, 1fr); } }
  .src-card { min-width: 0; }
  /* the arrow badge sits on the seam between the two cards (negative margins give it no room of its own) */
  .src-arrow { position: relative; z-index: 2; display: grid; place-items: center; place-self: center; width: 2.25rem; height: 2.25rem; margin: -1.35rem; border-radius: 50%; background: var(--surface-2); color: #7d9ff5; transform: rotate(90deg); box-shadow: 0 0 0 .3rem var(--bg); }
  @media (min-width: 40rem) { .src-arrow { transform: none; } }
  @media (min-width: 80rem) { .src-arrow { transform: rotate(90deg); } }

  /* uploaded videos as vertical tiles */
  .vtiles { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); }
  .vtile { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 1rem; background: #000; }
  .vtile > img { width: 100%; height: 100%; object-fit: cover; }
  .vtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), transparent 55%); pointer-events: none; }
  .vt-num { position: absolute; left: .35rem; top: .35rem; z-index: 1; display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 99px; background: rgba(0,0,0,.6); font-size: .6875rem; font-weight: 700; }
  .vt-rm { position: absolute; right: .25rem; top: .25rem; z-index: 1; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; opacity: .85; transition: background-color .2s, transform .18s var(--spring); }
  .vt-rm:hover { background: #e11d48; opacity: 1; }
  .vt-rm:active { transform: scale(.85); }
  .vt-meta { position: absolute; inset: auto .4rem .35rem; z-index: 1; font-size: .625rem; font-weight: 600; line-height: 1.3; color: #e4e4e7; }
  .vt-meta span { display: block; color: #a1a1aa; font-weight: 500; }
  .vtile.err { background: rgba(244,63,94,.12); }
  .vt-add { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 1rem; border: 1.5px dashed rgba(255,255,255,.14); color: var(--muted); transition: color .2s, border-color .2s, background-color .2s; cursor: pointer; }
  .vt-add:hover { color: #fff; border-color: rgba(125,159,245,.6); background: rgba(52,97,224,.08); }
  .src-card.drag { background: color-mix(in srgb, var(--surface) 80%, #3461e0); }

  /* phones: the create page is split into two sub-pages (files | preview & settings), switched at the top */
  .create-tabs { order: -2; }
  .create-tabs .segmented > button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-size: .75rem; white-space: nowrap; }
  @media (max-width: 22.4rem) { .create-tabs iconify-icon { display: none; } }
  @media (max-width: 47.99rem) {
    .create-grid[data-tab="src"] > .create-studio,
    .create-grid[data-tab="src"] > .create-results,
    .create-grid[data-tab="studio"] > .create-src { display: none; }
    .create-grid > .create-src, .create-grid > .create-studio, .create-grid > .create-results { animation: viewIn .25s ease; }
  }
}

/* ===== Mobile tab bar: liquid glass with a pill that slides to the tapped tab ===== */
@layer components {
  .glass {
    background: rgba(26,26,31,.55);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 .75rem 2rem -1rem rgba(0,0,0,.7);
  }
  /* phones and tablets: the sticky header is the same glass */
  @media (max-width: 63.99rem) {
    .app-head {
      background: rgba(26,26,31,.55);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
              backdrop-filter: blur(20px) saturate(180%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 .75rem 2rem -1rem rgba(0,0,0,.7);
    }
  }
  .tabbar { border-radius: 99px; }
  /* one tab wide, moved by --i (index of the active tab); transform only, so it stays smooth while a page loads */
  .tab-pill {
    position: absolute; top: .375rem; bottom: .375rem; left: .375rem; width: calc((100% - .75rem) / var(--n, 4));
    border-radius: 99px; background: rgba(255,255,255,.11);
    translate: calc(var(--i, 0) * 100%) 0;
    transition: translate .42s cubic-bezier(.3,1.25,.45,1), opacity .2s;
  }
  .tabbar:not(:has(.active)) .tab-pill { opacity: 0; }
  .tab-item { z-index: 1; flex: 1; flex-direction: column; justify-content: center; gap: .25rem; height: 3.5rem; padding: 0 .5rem; border-radius: 99px; font-size: .6875rem; -webkit-tap-highlight-color: transparent; }
  .tab-item:hover, .tab-item.active { background: transparent; }
  .tab-item.active::before { display: none; }
}

/* ===== Scroll edge under the header: progressive blur + soft tint (like the iOS scroll edge effect) =====
   Five stacked layers: each one blurs twice as strong as the one before and covers a band higher up the strip,
   their masks overlap, so the blur grows smoothly towards the screen edge with no visible border. */
@layer components {
  .edge-fade { position: fixed; inset: 0 0 auto 0; height: 5.75rem; z-index: 35; pointer-events: none; --to: to top; --from: to bottom; }
  /* the same edge above the phone tab bar, flipped */
  .edge-fade.edge-bottom { inset: auto 0 0 0; height: 6.5rem; --to: to bottom; --from: to top; }
  .edge-fade > i, .edge-fade::after { position: absolute; inset: 0; }
  .edge-fade > i {
    -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b));
    -webkit-mask-image: var(--m); mask-image: var(--m);
  }
  .edge-fade > i:nth-child(1) { --b: 1px;  --m: linear-gradient(var(--to), transparent 0%, #000 15%, #000 30%, transparent 45%); }
  .edge-fade > i:nth-child(2) { --b: 2px;  --m: linear-gradient(var(--to), transparent 15%, #000 30%, #000 45%, transparent 60%); }
  .edge-fade > i:nth-child(3) { --b: 4px;  --m: linear-gradient(var(--to), transparent 30%, #000 45%, #000 60%, transparent 75%); }
  .edge-fade > i:nth-child(4) { --b: 8px;  --m: linear-gradient(var(--to), transparent 45%, #000 60%, #000 75%, transparent 90%); }
  .edge-fade > i:nth-child(5) { --b: 16px; --m: linear-gradient(var(--to), transparent 60%, #000 75%); }
  /* page colour fading in towards the screen edge, eased so it has no border either */
  .edge-fade::after {
    content: "";
    background: linear-gradient(var(--from), rgba(11,11,13,.8) 0%, rgba(11,11,13,.6) 25%, rgba(11,11,13,.34) 50%, rgba(11,11,13,.12) 75%, rgba(11,11,13,0) 100%);
  }
}

/* "or paste with Ctrl+V" under the upload zones: only where there is a keyboard and a mouse */
@layer components {
  .paste-hint { display: none; }
  @media (hover: hover) and (pointer: fine) { .paste-hint { display: block; } }
  .paste-hint kbd { display: inline-block; margin-left: .15rem; padding: .05rem .4rem; border-radius: .45rem; background: var(--surface-3); color: #d4d4d8; font: inherit; font-weight: 600; }
}

/* ===== Tariff: blue plate under the header, plans modal ===== */
@layer components {
  .plan-plate {
    display: flex; align-items: center; gap: .875rem; padding: .75rem .75rem .75rem 1rem;
    border-radius: var(--r-lg); background: var(--accent); color: #fff;
    box-shadow: 0 1rem 2.5rem -1.5rem rgba(52,97,224,.9);
  }
  .plan-plate[hidden] { display: none; }
  .plan-plate-ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: 1rem; background: rgba(255,255,255,.16); }
  .plan-plate-title { display: block; font-size: .875rem; font-weight: 800; line-height: 1.3; }
  .plan-plate-text { display: block; margin-top: .125rem; font-size: .75rem; line-height: 1.4; color: rgba(255,255,255,.85); }
  @media (max-width: 24rem) { .plan-plate-ic { display: none; } }

  /* sign-up trap field: off screen for people, still in the form for bots */
  .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

  /* modal dialog (UI.modal): above the render bar (60), below toasts (100) */
  .modal {
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
    background: rgba(5,5,7,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .2s;
  }
  .modal.in { opacity: 1; }
  .modal-box { width: 100%; max-width: 30rem; padding: 1.75rem 1.5rem 1.5rem; transform: translateY(.75rem) scale(.97); transition: transform .3s var(--spring); }
  .modal.in .modal-box { transform: none; }
  .modal-x { position: absolute !important; right: .75rem; top: .75rem; color: var(--muted); }
  .modal-ic { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1.125rem; background: rgba(52,97,224,.2); color: #9db8f7; }
  .modal-title { margin-top: 1rem; padding-right: 2rem; font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
  .modal-text { margin-top: .5rem; font-size: .875rem; line-height: 1.55; color: #c4c4cc; }
  .modal-actions { display: flex; flex-wrap: wrap-reverse; gap: .5rem; margin-top: 1.5rem; }
  .modal-actions .btn { flex: 1 1 9rem; }

  /* paid plans inside the modal */
  .plan-cards { display: grid; gap: .625rem; margin-top: 1.25rem; }
  .plan-card { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; padding: .875rem .875rem .875rem 1.125rem; border-radius: var(--r-md); }
  .plan-card.is-current { box-shadow: inset 0 0 0 1.5px rgba(125,159,245,.65); }
  .plan-card-name { display: block; font-size: 1rem; font-weight: 800; }
  .plan-card-desc { display: block; margin-top: .125rem; font-size: .75rem; color: var(--muted); }
  .plan-card-price { font-size: 1.125rem; font-weight: 900; white-space: nowrap; }
  .plan-card-price small { margin-left: .125rem; font-size: .75rem; font-weight: 600; color: var(--muted); }
}

/* ===== Admin panel: the cabinet's sidebar rail on desktop, a drawer from the left on phones and tablets ===== */
@layer components {
  body[data-layout="admin"] { --side: 4.5rem; }
  body[data-layout="admin"].side-open { --side: 16rem; }
  @media (min-width: 64rem) { body[data-layout="admin"] #spa-spinner { left: calc(50% + (var(--side) + 2rem) / 2); } }
  .admin-side { z-index: 40; }
  .admin-badge { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .5rem; border-radius: 99px; background: rgba(52,97,224,.2); color: #9db8f7; font-size: .625rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

  /* the dimmed page behind the open drawer (same as behind a modal) */
  .drawer-backdrop {
    position: fixed; inset: 0; z-index: 55; background: rgba(5,5,7,.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;
  }
  @media (max-width: 63.99rem) {
    .admin-side {
      z-index: 60; width: min(18rem, calc(100vw - 3.5rem)); overflow-y: auto; overscroll-behavior: contain;
      transform: translateX(calc(-100% - 1.5rem)); visibility: hidden;
      box-shadow: 1.5rem 0 3rem -1.5rem rgba(0,0,0,.85);
      transition: transform .42s cubic-bezier(.2,.9,.3,1), visibility 0s linear .42s;
    }
    body.drawer-open .admin-side { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.2,.9,.3,1), visibility 0s; }
    .admin-side.dragging { transition: none; }
    body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; transition: opacity .3s, visibility 0s; }
    body.drawer-open { overflow: hidden; }
    /* the drawer is always the full panel, whatever the desktop rail state is */
    body[data-layout="admin"] .admin-side .side-label { opacity: 1; width: auto; overflow: visible; pointer-events: auto; }
    body[data-layout="admin"] .admin-side .side-item { gap: .8rem; }
    body[data-layout="admin"] .admin-side .side-plan { display: block; }
    body[data-layout="admin"] .admin-side .side-tip { display: none; }
  }

  /* overview numbers */
  .stat-value { margin-top: 1rem; font-size: 1.875rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .stat-label { margin-top: .375rem; font-size: .875rem; font-weight: 700; line-height: 1.3; }
  .stat-sub { margin-top: .25rem; font-size: .75rem; line-height: 1.4; color: var(--muted); }
  @media (max-width: 30rem) { .stat-value { font-size: 1.625rem; } .stat-label { font-size: .8125rem; } }

  /* rows of people / events inside a card */
  .admin-list > li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; }
  .admin-list > li + li { border-top: 1px solid rgba(255,255,255,.05); }
  .admin-empty { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: 2.5rem 1rem 1.5rem; text-align: center; font-size: .8125rem; color: #71717a; }

  /* plan chips: free grey, Про blue, Команда violet */
  .plan-chip { height: 1.5rem; padding: 0 .625rem; font-size: .6875rem; white-space: nowrap; }
  .plan-chip.plan-pro { background: rgba(52,97,224,.2); color: #9db8f7; }
  .plan-chip.plan-team { background: rgba(167,139,250,.18); color: #c4b5fd; }
}

/* ===== Admin pages: fields, rows, pager, tags, editors ===== */
@layer components {
  .view.no-anim { animation: none; }
  .admin-cap { margin-bottom: .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
  .admin-help { margin-top: .375rem; font-size: .75rem; line-height: 1.5; color: #71717a; }
  .field textarea { min-height: 3rem; }
  .field input[type=date] { color-scheme: dark; }
  .mono { font-family: Consolas, "SF Mono", Menlo, "Liberation Mono", monospace; font-size: .92em; }
  /* red text on destructive buttons */
  body[data-layout="admin"] .btn-danger { color: #fda4af; }

  /* chips for states: red ban, cyan link, amber note, green ok, muted gone */
  .tag-red { background: rgba(244,63,94,.16); color: #fda4af; }
  .tag-cyan { background: rgba(34,211,238,.14); color: #a5f3fc; }
  .tag-amber { background: rgba(251,191,36,.14); color: #fde68a; }
  .tag-green { background: rgba(74,222,128,.14); color: #bbf7d0; }
  .tag-muted { background: rgba(255,255,255,.05); color: #8b8b96; }

  /* tabs that don't fit a phone scroll sideways */
  .tabs-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs-scroll::-webkit-scrollbar { display: none; }
  .tabs-scroll .segmented { white-space: nowrap; }

  /* users list: a table on desktop, stacked rows on phones */
  .urow { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem .75rem; padding: .75rem .5rem; border-radius: 1.25rem; transition: background-color .15s; }
  .urow + .urow { border-top: 1px solid rgba(255,255,255,.05); }
  .urow:not(.urow-head):hover { background: rgba(255,255,255,.025); }
  .urow-main { display: flex; min-width: 0; align-items: center; gap: .75rem; }
  .urow-plan { text-align: right; }
  .urow-meta { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .75rem; color: var(--muted); }
  .urow-head { display: none; }
  .urow-meta > [data-k]::before { content: attr(data-k) " "; color: #5f5f6b; }
  @media (min-width: 64rem) {
    .urow { grid-template-columns: 2rem minmax(13rem, 2fr) 8.5rem minmax(7rem, 1fr) 6rem 8.5rem 8.5rem minmax(6rem, 1fr); }
    .urow-plan { text-align: left; }
    .urow-meta { display: contents; font-size: .8125rem; }
    .urow-meta > span { font-size: .8125rem; color: #c4c4cc; }
    .urow-meta > [data-k]::before { content: none; }
    .urow-head { display: grid; padding-top: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
    .urow-head .urow-meta > span { font-size: .6875rem; color: #71717a; }
    .urow-head:hover { background: none; }
  }

  /* bulk bar: sticks to the bottom while rows are ticked */
  .bulk-bar { position: sticky; bottom: 1rem; z-index: 30; }
  .bulk-bar[hidden] { display: none; }
  .bulk-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .bulk-bar .select-trigger { height: 2.5rem; }
  .bulk-bar .select-menu { top: auto; bottom: calc(100% + .5rem); }

  /* pager */
  .pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: 1.25rem; }
  .pager-btn { display: grid; place-items: center; min-width: 2.375rem; height: 2.375rem; padding: 0 .625rem; border-radius: 1rem; background: var(--surface-2); font-size: .8125rem; font-weight: 700; color: var(--muted); transition: background-color .15s, color .15s; }
  .pager-btn:hover { background: var(--surface-3); color: #fff; }
  .pager-btn.on { background: var(--accent); color: #fff; }
  .pager-gap { display: grid; place-items: center; width: 1.5rem; color: #5b5b66; }

  /* key → value lists (system page) */
  .kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .625rem 1rem; font-size: .8125rem; }
  .kv dt { color: var(--muted); }
  .kv dd { text-align: right; font-weight: 600; word-break: break-all; }

  /* FAQ / feature card editor */
  .list-editor { display: grid; gap: .75rem; }
  .edit-item { padding: .875rem 1rem 1rem; border-radius: var(--r-lg); }
  .color-swatch { width: 1.75rem; height: 1.75rem; flex-shrink: 0; padding: 0; border: 0; border-radius: .5rem; background: none; cursor: pointer; }
  .color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
  .color-swatch::-webkit-color-swatch { border: 0; border-radius: .5rem; }

  /* a generated password in the modal */
  .secret { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
  .secret code { flex: 1; min-width: 10rem; padding: .75rem 1rem; border-radius: 1rem; background: var(--surface-3); font: 700 1.0625rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .04em; user-select: all; }

  .danger-zone { box-shadow: inset 0 0 0 1px rgba(244,63,94,.18); }

  /* cabinet: an admin looking at the account; the admin's announcement */
  .imp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem .75rem .75rem 1rem; border-radius: var(--r-lg); background: #f59e0b; color: #1f1300; font-size: .8125rem; font-weight: 600; }
  .announce { display: flex; align-items: center; gap: .875rem; padding: .75rem .75rem .75rem 1rem; border-radius: var(--r-lg); }
  .announce[hidden] { display: none; }
  .announce.tone-info { background: rgba(52,97,224,.18); color: #dbe5ff; }
  .announce.tone-ok { background: rgba(74,222,128,.14); color: #d9fbe5; }
  .announce.tone-warn { background: rgba(251,191,36,.16); color: #fff1c2; }
  .announce-x { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: 50%; opacity: .7; transition: opacity .2s, background-color .2s; }
  .announce-x:hover { opacity: 1; background: rgba(255,255,255,.08); }
}