/* .zf-form[data-zf-theme-scope] lets the builder preview show a form theme
   that differs from the cabinet theme (see form-appearance.css). */
:root,
.zf-form[data-zf-theme-scope="dark"] {
  color-scheme: dark;
  --bg: #0e0e14;
  --bg-rgb: 14, 14, 20;
  --cream: #f4ece4;
  --heading: #f4ece4;
  --muted: rgba(244, 236, 228, 0.72);
  --text-soft: rgba(244, 236, 228, 0.9);
  --magenta: #ff3d9a;
  --violet: #7a4dff;
  --cyan: #3ec7ff;
  --orange: #ff6b32;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.29);
  --fill: rgba(255, 255, 255, 0.075);
  --fill-hover: rgba(255, 255, 255, 0.125);
  --panel: rgba(24, 22, 33, 0.93);
  /* Opaque counterpart of --panel, for surfaces that float over arbitrary page
     content: dropdowns, popovers, pickers. --panel is a deliberate 93% glass for
     cards that sit on one known backdrop, but reusing it on a menu let the page
     behind read through the panel, and the menus that also carried a
     backdrop-filter blurred that content into visible smudges. Depth on these
     surfaces comes from the border plus --elev-3/--shadow rather than
     translucency, so hover/selected tints still composite correctly on top. */
  --panel-solid: #181621;
  /* Slightly more opaque than before so glass panels separate from the scene
     without needing another blur layer. */
  --surface: color-mix(in srgb, var(--panel) 78%, transparent);
  --fill-soft: color-mix(in srgb, var(--panel) 38%, transparent);
  --card: var(--surface);
  --card-hover: color-mix(in srgb, var(--panel) 88%, transparent);
  --shadow: 0 22px 40px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.18);
  --blend: screen;
  --noise-blend: overlay;
  --noise-opacity: 0.08;
  --blob-opacity: 0.9;
  --vignette-mid: 0.47;
  --vignette-bottom: 0.65;
  --font-ui: "Manrope", system-ui, sans-serif;
  --font-display: "Unbounded", "Manrope", sans-serif;
  --brand-gradient: linear-gradient(120deg, var(--magenta), var(--violet), var(--cyan));
  --focus-ring: rgba(255, 61, 154, 0.28);
  --danger: #ff6b7a;
  --danger-bg: rgba(255, 59, 78, 0.14);
  --ok: #4ade80;
  --ok-bg: rgba(74, 222, 128, 0.12);
  --warn: #ffb020;
  --warn-bg: rgba(255, 176, 32, 0.14);
  /* Empty rating stars: light-on-dark here, dark-on-light in the light theme.
     Deriving from --cream would invert with the theme and read as near-black
     stars on a light panel. */
  --rating-empty: rgba(244, 236, 228, 0.32);
  /* Filled stars get their own gold instead of --warn: warn also drives error
     and notice UI, where a bright gold would be too loud. */
  --rating-active: #ffb020;
  /* Ink on the selected NPS score, which sits on --brand-gradient in both themes. */
  --nps-checked-ink: #ffffff;
  --radius: 18px;

  /* ---- Design system scales (see also assets/css/system.css) ---- */

  /* Spacing — 4px base. Use instead of ad-hoc rem values. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Type scale. Display face is reserved for --text-xl and above. */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;

  /* Radius */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-full: 999px;

  /* Elevation — three steps only. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.18);
  --elev-2: 0 8px 24px rgba(0, 0, 0, 0.22);
  --elev-3: 0 24px 56px rgba(0, 0, 0, 0.32);

  /* Link colour. The brand gradient is opt-in via .link-brand. */
  --link: #ff6bb0;
  --link-hover: #ff8ec4;

  /* ---- Premium surface tokens (redesign stage 1) ----
     Values only; the light flavour lives in the [data-theme="light"] block below.
     Anything added here must also be mirrored in assets/css/shell.css, which is
     the only stylesheet the PHP landing/stub pages load (no app.css there). */

  /* Glass: one recipe for the blur/saturation of surfaces, panels and popovers. */
  --glass-blur: 18px;
  --glass-saturate: 1.4;
  /* Faint lift laid over the panel colour so glass reads as a pane, not a fill. */
  --glass-tint: rgba(255, 255, 255, 0.035);

  /* Glow. --glow-brand is the small accent halo, --glow-soft the wide ambient one.
     --glow-strength is a unitless multiplier (1 normally, 0 in .perf-lite) applied
     as a calc() factor on every halo's blur radius — the button glows and the
     --elev-glow-* elevation below — so one value switches all neon off. */
  --glow-brand: rgba(255, 61, 154, 0.34);
  --glow-soft: rgba(122, 77, 255, 0.26);
  --glow-strength: 1;

  /* Gradients. --gradient-brand is the CTA gradient (two stops) and stays distinct
     from the three-stop decorative --brand-gradient above. */
  --gradient-brand: linear-gradient(135deg, var(--magenta), var(--violet));
  --gradient-surface: linear-gradient(
    160deg,
    color-mix(in srgb, var(--panel) 98%, transparent),
    color-mix(in srgb, var(--panel) 74%, transparent)
  );
  /* Edge highlight for borders and hairlines (see .surface). */
  --gradient-hairline: linear-gradient(
    150deg,
    color-mix(in srgb, var(--magenta) 45%, transparent),
    color-mix(in srgb, var(--violet) 30%, transparent) 45%,
    color-mix(in srgb, var(--cyan) 26%, transparent)
  );

  /* Colour-tinted elevation, matched to --elev-1..3 for the brand-lit layers.
     The blur of the tinted halo is scaled by --glow-strength, so .perf-lite
     collapses it to 0px exactly like the button glows below. */
  --elev-glow-1:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 calc(18px * var(--glow-strength)) color-mix(in srgb, var(--violet) 12%, transparent);
  --elev-glow-2:
    0 10px 30px rgba(0, 0, 0, 0.26),
    0 0 calc(26px * var(--glow-strength)) color-mix(in srgb, var(--violet) 16%, transparent);
  --elev-glow-3:
    0 26px 60px rgba(0, 0, 0, 0.34),
    0 0 calc(40px * var(--glow-strength)) color-mix(in srgb, var(--magenta) 16%, transparent);

  /* Form controls. Wired into .form-field and .c-select in redesign stage 2;
     declared here so both themes keep their own values. */
  --field-bg: rgba(255, 255, 255, 0.06);
  --field-bg-focus: rgba(255, 255, 255, 0.09);
  --field-ring: color-mix(in srgb, var(--magenta) 26%, transparent);

  /* Breakpoints are 640 / 900 / 1200 / 1440. Custom properties cannot be
     used inside media queries, so these exist for JS and documentation. */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
  --bp-xl: 1440px;

  --sidebar-w: 236px;
  --sidebar-w-collapsed: 68px;

  --z-base: 1;
  --z-header: 20;
  --z-sticky: 30;
  --z-panel-open: 40;
  --z-control-open: 50;
  --z-fab: 55;
  --z-popover: 80;
  --z-modal: 90;
  --fab-clearance: 5.5rem;
  --touch-min: 2.75rem;
  --control-sm: 2.35rem;
  --lift: translateY(-1px);
  --mx: 0;
  --my: 0;
}

[data-theme="light"],
.zf-form[data-zf-theme-scope="light"] {
  color-scheme: light;
  /* Light is its own concept — milky white with a lilac cast — not an inverted
     dark theme. Text stays near-black/cool for contrast; borders and fills carry
     the violet undertone instead of warm brown. */
  --bg: #f7f5fc;
  --bg-rgb: 247, 245, 252;
  --cream: #17152a;
  --heading: #241f3e;
  --muted: rgba(23, 21, 42, 0.64);
  --text-soft: rgba(23, 21, 42, 0.86);
  --line: rgba(97, 76, 178, 0.16);
  --line-strong: rgba(97, 76, 178, 0.3);
  --fill: rgba(97, 76, 178, 0.07);
  --fill-hover: rgba(97, 76, 178, 0.13);
  --panel: rgba(255, 255, 255, 0.9);
  /* See the dark-theme declaration: menus must not show the page through them. */
  --panel-solid: #ffffff;
  --surface: color-mix(in srgb, var(--panel) 92%, transparent);
  --fill-soft: color-mix(in srgb, var(--panel) 66%, transparent);
  --card: var(--surface);
  --card-hover: color-mix(in srgb, var(--panel) 99%, transparent);
  --shadow: 0 20px 44px rgba(58, 40, 120, 0.14);
  --shadow-sm: 0 10px 26px rgba(58, 40, 120, 0.1);
  --blend: multiply;
  --noise-blend: multiply;
  --noise-opacity: 0.1;
  --blob-opacity: 0.4;
  --vignette-mid: 0.14;
  --vignette-bottom: 0.26;
  --danger: #b42318;
  --danger-bg: rgba(180, 35, 24, 0.1);
  --ok: #067647;
  --ok-bg: rgba(6, 118, 71, 0.1);
  --warn: #9a6700;
  --warn-bg: rgba(154, 103, 0, 0.12);
  /* Faint so empty stars read as "not rated" instead of heavy grey shapes. */
  --rating-empty: rgba(23, 21, 42, 0.18);
  /* Brighter gold than --warn (#9a6700) so selected stars read as lit. */
  --rating-active: #f0a41c;
  --link: #a81f86;
  --link-hover: #83145f;
  --elev-1: 0 1px 2px rgba(58, 40, 120, 0.08);
  --elev-2: 0 8px 24px rgba(58, 40, 120, 0.1);
  --elev-3: 0 24px 56px rgba(58, 40, 120, 0.16);
  /* Richer than the inherited dark magenta ring, which washes out on milk. */
  --focus-ring: rgba(178, 42, 132, 0.26);

  /* Premium tokens, light flavour. */
  --glass-blur: 18px;
  --glass-saturate: 1.25;
  --glass-tint: rgba(255, 255, 255, 0.45);
  --glow-brand: rgba(255, 61, 154, 0.18);
  --glow-soft: rgba(122, 77, 255, 0.16);
  --gradient-brand: linear-gradient(135deg, var(--magenta), var(--violet));
  --gradient-surface: linear-gradient(
    160deg,
    color-mix(in srgb, var(--panel) 100%, transparent),
    color-mix(in srgb, var(--panel) 84%, transparent)
  );
  --gradient-hairline: linear-gradient(
    150deg,
    color-mix(in srgb, var(--magenta) 34%, transparent),
    color-mix(in srgb, var(--violet) 24%, transparent) 45%,
    color-mix(in srgb, var(--cyan) 20%, transparent)
  );
  --elev-glow-1:
    0 1px 2px rgba(58, 40, 120, 0.06),
    0 0 calc(16px * var(--glow-strength)) color-mix(in srgb, var(--violet) 8%, transparent);
  --elev-glow-2:
    0 10px 28px rgba(58, 40, 120, 0.12),
    0 0 calc(22px * var(--glow-strength)) color-mix(in srgb, var(--violet) 10%, transparent);
  --elev-glow-3:
    0 24px 56px rgba(58, 40, 120, 0.18),
    0 0 calc(34px * var(--glow-strength)) color-mix(in srgb, var(--magenta) 10%, transparent);
  --field-bg: rgba(255, 255, 255, 0.72);
  --field-bg-focus: #ffffff;
  --field-ring: color-mix(in srgb, var(--magenta) 22%, transparent);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  /* Keep layout width stable when page height toggles the vertical scrollbar
     (e.g. Forms dashboard ↔ AI generate). */
  scrollbar-gutter: stable;
  font-size: 100%;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-ui);
}

body {
  isolation: isolate;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Длинные слова/URL: перенос целым словом, не по одной букве */
.wrap,
.public-shell,
.panel,
.public-card,
.login-card,
.answer-block,
.summary-card,
.question-card,
.alert,
.page-head,
.table-meta,
.answer-block__question,
.answer-block__value,
.form-desc,
.help,
.public-top-note,
.public-credit__text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}

/* Links are a single solid brand colour. The gradient is decorative and
   opt-in via .link-brand — using it on every anchor forced dozens of
   `background-image: none !important` resets across the app. */
a {
  color: var(--link);
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.link-brand {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.link-brand:hover {
  filter: brightness(1.18);
  text-decoration-color: color-mix(in srgb, var(--magenta) 70%, var(--violet));
}

a:focus-visible {
  outline: 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--magenta) 70%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: 4px;
}

/* Anchors rendered as controls never underline; their colour comes from the
   component class, which already outranks the base `a` rule. */
a.btn,
a.btn:hover,
a.brand,
a.brand:hover,
a.filter-chip,
a.filter-chip:hover,
a.theme-fab,
a.theme-fab:hover,
.public-credit,
.public-credit:hover {
  text-decoration: none;
}

a.brand,
a.brand:hover,
.public-credit,
.public-credit:hover {
  color: var(--cream);
}

/* ---------- Scene ---------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}

/* Broad ambient wash behind the content: violet core melting into magenta.
   Built from the two glow tokens, so light gets a weaker, cooler version for
   free and .perf-lite can switch the blur off. The `background` shorthand is
   kept as a single radial-gradient because the public form themes replace it
   wholesale (form-appearance.css, [data-zf-accent="custom"]). */
.scene__glow {
  position: absolute;
  width: 58vw;
  height: 58vw;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow-soft), var(--glow-brand) 45%, transparent 72%);
  filter: blur(28px);
}

.scene__blobs {
  position: absolute;
  inset: -20%;
}

/* The drift used to run unconditionally and was the only always-on animation in
   the whole shell — therefore the only source of sustained GPU work on every
   page (no JS timer, no rAF loop exists). Each blob is viewport-sized with a
   42px blur and a blend mode, and it moves behind eight backdrop-filter
   surfaces, so they re-sample their backdrop every frame and the screen
   re-composites continuously (audible coil whine, battery drain). The ambient
   composition is unchanged: at rest every blob sits at the keyframe start, which
   is exactly where the drift begins. Motion is now opt-in via zifra-perf =
   "full" (the boot script adds html.perf-full). */
.blob {
  position: absolute;
  border-radius: 44%;
  filter: blur(42px);
  opacity: var(--blob-opacity);
  mix-blend-mode: var(--blend);
  animation-name: none;
  /* Kept separate from the shorthand so the per-blob duration/delay overrides
     only apply once html.perf-full switches the name on. */
  animation-duration: 18s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* Premium ambient motion (off by default). will-change keeps the blurred layer
   rasterized once, so the compositor re-positions a cached texture instead of
   re-blurring a full-screen surface every frame. */
html.perf-full .blob {
  animation-name: float;
  /* `float` animates `translate` (an independent transform property), not
     `transform`. Naming only `transform` left the hint pointing at a property
     the keyframes never touch, so the blurred layer could be re-rastered per
     frame instead of re-positioned as a cached texture. */
  will-change: transform, translate;
}

/* Blob palette — violet, magenta and blue only, all derived from the brand
   tokens. Two of the five used to be warm (an orange and a red), which read as
   autumn rather than neon and turned the light theme peach instead of lilac.
   Positions are unchanged: the palette is what was wrong, not the layout. */
.blob--a {
  width: 42vw;
  height: 42vw;
  left: -8%;
  top: -10%;
  background: radial-gradient(circle, var(--magenta) 0%, transparent 70%);
  animation-duration: 22s;
}

.blob--b {
  width: 36vw;
  height: 36vw;
  right: -6%;
  top: 4%;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 68%);
  animation-duration: 19s;
  animation-delay: -4s;
}

.blob--c {
  width: 38vw;
  height: 34vw;
  left: 18%;
  bottom: -16%;
  background: radial-gradient(circle, var(--violet) 0%, transparent 70%);
  animation-duration: 24s;
  animation-delay: -8s;
}

.blob--d {
  width: 28vw;
  height: 28vw;
  right: 18%;
  bottom: 6%;
  /* Violet pushed toward cyan: the only cool blue not already covered by --cyan. */
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 62%, var(--cyan)) 0%, transparent 68%);
  animation-duration: 16s;
  animation-delay: -2s;
}

.blob--e {
  width: 22vw;
  height: 22vw;
  left: 46%;
  top: 18%;
  /* Soft pink between magenta and violet, replacing the old warm red. */
  background: radial-gradient(circle, color-mix(in srgb, var(--magenta) 62%, var(--violet)) 0%, transparent 70%);
  animation-duration: 20s;
  animation-delay: -6s;
}

/* A background-image cannot read CSS custom properties, so the hexagon stroke is
   hardcoded. Both values are cooled into the violet brand family — the light one
   used to be the old warm brown (#1c1714), which read as beige over the milky
   surface. Dark keeps a whisper of violet instead of plain white so the pattern
   belongs to the brand rather than looking like neutral graph paper. */
.scene__grid {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cpath fill='none' stroke='%23b9aef5' stroke-opacity='0.06' stroke-width='1' d='M21 48L0 36V12L21 0l21 12v24L21 48zM63 48L42 36V12L63 0l21 12v24L63 48zM42 36l21 12M21 48l21-12M42 36l-21-12M21 0v24'/%3E%3C/svg%3E");
  background-size: 84px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 78%);
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 78%);
}

[data-theme="light"] .scene__grid {
  /* Desaturated violet, a shade deeper than --line so it stays legible on milk. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48' viewBox='0 0 84 48'%3E%3Cpath fill='none' stroke='%2355508a' stroke-opacity='0.13' stroke-width='1' d='M21 48L0 36V12L21 0l21 12v24L21 48zM63 48L42 36V12L63 0l21 12v24L63 48zM42 36l21 12M21 48l21-12M42 36l-21-12M21 0v24'/%3E%3C/svg%3E");
}

/* Public form authors can swap the ambient glow for their own accent colour
   (form-appearance.css, [data-zf-accent="custom"]). That replacement carries a
   raw accent value instead of a theme token, so light pages still need the old
   halving — the default glow above no longer does, because the glow tokens
   already encode the theme difference themselves. */
[data-theme="light"] .zf-form[data-zf-accent="custom"] .scene__glow {
  opacity: 0.5;
}

.scene__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 20%, rgba(var(--bg-rgb), var(--vignette-mid)) 80%),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.2), rgba(var(--bg-rgb), var(--vignette-bottom)) 100%);
}

.scene__noise {
  position: absolute;
  inset: 0;
  opacity: var(--noise-opacity);
  mix-blend-mode: var(--noise-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 24px -30px; }
}

@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none !important;
  }
}

/* Lite mode (html.perf-lite, set by the boot script on weak devices): the drifting blobs and
   backdrop blur re-composite the whole screen every frame, which stalls integrated GPUs. */
.perf-lite {
  /* Stage-1 premium tokens opt out on weak hardware: glow switches off, and the
     glass token goes to zero as a second guard behind the blanket
     `backdrop-filter: none` rule below. */
  --glow-strength: 0;
  --glass-blur: 0px;
  /* `screen`/`overlay` make every blob and the grain blend against the whole
     backdrop, which forces a full-viewport composite per layer. Normal blending
     keeps the shapes identical and costs nothing extra. The 42px blob blur is
     deliberately left in place: the gradients only reach `transparent 70%`, so
     without it the boxes would show as hard-edged ellipses. */
  --blend: normal;
  --noise-blend: normal;
}

.perf-lite .blob,
.perf-lite .question-card.is-editing::after {
  animation: none !important;
}

.perf-lite *,
.perf-lite *::before,
.perf-lite *::after,
/* ::backdrop is neither ::before nor ::after, so the blanket rule above used to
   leave every dialog scrim (modal, confirm, QR, consent) blurring the whole
   viewport — the largest single raster pass in the shell — while the rest of
   lite mode was already flat. The dim scrim itself is untouched. */
.perf-lite *::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.perf-lite .public-card,
.perf-lite .zf-form .public-fill__head,
.perf-lite .zf-form .zf-submit-bar {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

/* ---------- App shell ---------- */

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.app-layer {
  position: relative;
  z-index: var(--z-base);
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.wrap {
  width: min(1100px, calc(100% - 2rem));
  max-width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.admin-top {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: max(0.85rem, env(safe-area-inset-top)) 1rem 0;
  background: transparent;
  border: 0;
}

.admin-top-inner {
  width: min(1100px, 100%);
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 1rem;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  min-width: 0;
  box-sizing: border-box;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--cream);
  min-width: 0;
  flex: 0 1 auto;
}

.brand:hover {
  color: var(--cream);
}

.brand__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--cream);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cab-table__actions .inline-form,
.form-card__actions .inline-form {
  display: inline-flex;
  margin: 0;
}

.admin-main {
  padding: 1.75rem 0 var(--fab-clearance);
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
}

.page-head h1,
.login-card h1,
.public-card h1,
.public-fill__head h1,
.empty-state h2 {
  margin: 0.2rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--heading);
  line-height: 1.15;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

.page-head > div:first-child {
  min-width: 0;
  flex: 1 1 220px;
}

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }

.head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.head-actions form {
  margin: 0;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0.7rem 1.05rem;
  min-height: var(--touch-min);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background: var(--fill);
  color: var(--cream);
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  text-decoration: none;
  background: var(--fill-hover);
  color: var(--cream);
  transform: var(--lift);
}

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.86rem;
  border-radius: var(--radius-md);
  min-height: var(--control-sm);
  min-width: var(--control-sm);
}

.btn-primary {
  color: #fff;
  background: var(--gradient-brand);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--magenta) 26%, transparent),
    0 0 calc(20px * var(--glow-strength)) var(--glow-brand);
}

.btn-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #ff56a8, #8b63ff);
  transform: var(--lift);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--magenta) 30%, transparent),
    0 0 calc(30px * var(--glow-strength)) var(--glow-brand);
}

.btn-primary:focus-visible {
  color: #fff;
}

/* Secondary: soft brand glass — related to primary, not a second neon CTA */
.btn-secondary {
  color: var(--cream);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--magenta) 18%, var(--fill)),
      color-mix(in srgb, var(--violet) 16%, var(--fill))
    );
  border: 1px solid color-mix(in srgb, var(--magenta) 42%, var(--line-strong));
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--violet) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.btn-secondary:hover {
  color: var(--cream);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--magenta) 28%, var(--fill-hover)),
      color-mix(in srgb, var(--violet) 24%, var(--fill-hover))
    );
  border-color: color-mix(in srgb, var(--magenta) 58%, var(--violet));
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--magenta) 16%, transparent),
    0 0 calc(22px * var(--glow-strength)) var(--glow-soft),
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  transform: var(--lift);
}

.btn-secondary:focus-visible {
  color: var(--cream);
}

.btn-edit.btn-secondary {
  color: var(--cream);
  background-color: transparent;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--magenta) 8%, transparent),
    color-mix(in srgb, var(--violet) 7%, transparent)
  );
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--violet));
  box-shadow: none;
}

.btn-edit.btn-secondary:hover,
.btn-edit.btn-secondary:focus-visible {
  color: var(--cream);
  background-color: transparent;
  background-image: linear-gradient(
    135deg,
    color-mix(in srgb, var(--magenta) 14%, transparent),
    color-mix(in srgb, var(--violet) 12%, transparent)
  );
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: none;
  filter: brightness(1.06);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--cream);
}

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-danger:hover {
  color: var(--danger);
}

.btn-block { width: 100%; }

/* ---------- Alerts / cards ---------- */

.alert {
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.alert-success {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 25%, transparent);
}

.alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 25%, transparent);
}

/* Unverified-email banner: a neutral alert is too easy to miss for a call to
   action, so it borrows the brand glass language already used by
   .btn-secondary / .btn-edit (magenta→violet over the surface). */
.alert--notice {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: calc(1rem + 0.35rem);
  color: var(--cream);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--magenta) 13%, transparent),
      color-mix(in srgb, var(--violet) 11%, transparent) 55%,
      transparent
    ),
    var(--surface);
  border-color: color-mix(in srgb, var(--magenta) 42%, var(--line-strong));
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--violet) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.alert--notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-gradient);
}

.alert--notice a {
  font-weight: 700;
  text-decoration: underline;
}

.alert__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Dismiss control: reuse .btn-icon, aligned with the text via align-items:center. */
.alert--notice .alert__close {
  flex: 0 0 auto;
  margin-right: calc(var(--space-1) * -1);
  color: var(--cream);
  opacity: 0.75;
}

.alert--notice .alert__close:hover,
.alert--notice .alert__close:focus-visible {
  opacity: 1;
}

/* ---------- Confirm dialog ---------- */

.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

.confirm-dialog::backdrop {
  /* Matched to .modal::backdrop so both dialog families dim the page the same
     way. The old 12px blur produced a heavy frosted screen; 8px still separates
     the panel but stops competing with it. --bg-rgb is themed. */
  background: rgba(var(--bg-rgb), 0.58);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
}

.confirm-dialog__card {
  /* Width is deliberately unchanged: the delete-user and discard-changes copy
     was written against 24rem. */
  width: min(24rem, 100%);
  padding: var(--space-5);
  border: 1px solid var(--line-strong);
  /* This card was still on the legacy --radius (18px) / --shadow pair, which had
     drifted from .modal and the panels; now it shares their radius and
     elevation. */
  border-radius: var(--radius-2xl);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--panel);
  box-shadow: var(--elev-3);
  /* Long messages (the owned-forms warning names a count) scroll inside the
     card instead of pushing the actions off-screen. Safe here because everything
     inside is in normal flow — unlike .modal, no popover escapes this box. */
  max-height: 100%;
  overflow-y: auto;
}

.confirm-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--heading);
  line-height: var(--leading-snug);
}

.confirm-dialog__text {
  margin: var(--space-3) 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* Stage 6.5: the message can name a form title or a webhook host with no
     spaces in it; wrapping keeps a long token inside the 24rem card. */
  overflow-wrap: anywhere;
}

.confirm-dialog__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.confirm-dialog__actions--stack {
  grid-template-columns: minmax(0, 1fr);
}

.confirm-dialog__actions .btn {
  width: 100%;
  min-height: var(--touch-min);
}

body.has-confirm-dialog {
  overflow: hidden;
}

.login-card,
.panel,
.public-card,
.empty-state,
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.public-card {
  position: relative;
  z-index: 2;
  background: color-mix(in srgb, var(--panel) 28%, transparent);
  border-color: color-mix(in srgb, var(--cream) 14%, transparent);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 12%, transparent);
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
}

[data-theme="light"] .public-card {
  background: color-mix(in srgb, var(--panel) 45%, transparent);
  border-color: color-mix(in srgb, var(--cream) 10%, transparent);
}

.login-card {
  width: min(420px, 100%);
  margin: clamp(1.25rem, 8vh, 4rem) auto 0;
  padding: 1.6rem;
}

.panel {
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.panel.has-open-popover,
.panel:has(.c-select.is-open),
.panel:has(.date-field.is-open) {
  position: relative;
  z-index: var(--z-panel-open);
}

.public-section:has(.date-field.is-open),
.public-section:has(.c-select.is-open),
.public-form > .field:has(.date-field.is-open),
.public-form > .field:has(.c-select.is-open),
.public-section > .field:has(.date-field.is-open),
.public-section > .field:has(.c-select.is-open) {
  position: relative;
  z-index: var(--z-panel-open);
  overflow: visible;
}

.question-card.has-open-popover {
  z-index: var(--z-popover);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  min-width: 0;
}

.panel h2 {
  margin: 0 0 0.85rem;
  font-size: 1.2rem;
  font-family: var(--font-display);
  color: var(--heading);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.panel-head h2 { margin: 0; }

.stack { display: grid; gap: 0.9rem; }

label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.92rem;
}

label > span {
  color: var(--muted);
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  font: inherit;
  font-size: 1rem; /* iOS: без автозума при фокусе */
  background: var(--fill-soft);
  color: var(--cream);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="tel"],
select {
  min-height: var(--touch-min);
}

textarea {
  resize: vertical;
}

.textarea-field {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.textarea-field textarea {
  display: block;
  resize: none;
  overflow-y: hidden;
  /* Grip (~1.35rem) + gap so text never sits against the resize handle */
  padding-bottom: 2.45rem;
  min-height: 5.5rem;
  field-sizing: content; /* progressive enhancement where supported */
}

.textarea-field__grip {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: 1;
  height: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 11px 11px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--fill-soft);
  background-image: none;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.textarea-field__grip::before {
  content: "";
  width: 1.5rem;
  height: 5px;
  box-sizing: border-box;
  border-top: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.textarea-field__grip:hover,
.textarea-field.is-resizing .textarea-field__grip {
  border-top-color: var(--line-strong);
  background: var(--fill);
  background-image: none;
}

.textarea-field__grip:hover::before,
.textarea-field.is-resizing .textarea-field__grip::before {
  opacity: 0.9;
  transform: none;
}

.textarea-field.is-resizing textarea {
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  border-radius: 14px;
  border-color: var(--line-strong);
  background-color: var(--fill-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23ff3d9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.08);
}

select:hover {
  background-color: var(--fill);
  border-color: color-mix(in srgb, var(--magenta) 40%, var(--line-strong));
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--fill-soft);
  border-color: var(--line);
  box-shadow: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  background-color: var(--fill);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%237a4dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1rem;
}

/* The native <option> popup is painted by the OS and cannot inherit the surface
   gradient or the translucent --panel, so it uses the opaque base tokens: it
   follows whichever theme is active instead of forcing a warm-on-white list. */
option {
  color: var(--cream);
  background: var(--bg);
}

/* ---------- Custom select ---------- */

.c-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.c-select.is-open {
  z-index: var(--z-control-open);
}

.c-select__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.c-select__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  /* Resting fill comes from the shared field token so a Select and a text input
     sitting in the same row read as one control family. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--field-bg);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.c-select__btn:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--fill);
  border-color: color-mix(in srgb, var(--magenta) 40%, var(--line-strong));
}

.c-select.is-open .c-select__btn,
.c-select__btn:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--field-bg-focus);
  box-shadow: 0 0 0 3px var(--field-ring);
}

.c-select__label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.c-select.is-placeholder .c-select__label {
  color: var(--muted);
}

.c-select__chevron {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23ff3d9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.2s ease;
}

.c-select.is-open .c-select__chevron {
  transform: rotate(180deg);
}

.c-select__menu {
  position: absolute;
  z-index: var(--z-popover);
  left: 0;
  right: auto;
  top: calc(100% + 0.4rem);
  display: none;
  width: max-content;
  min-width: 100%;
  max-width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(280px, 50vh);
  overflow-x: visible;
  overflow-y: auto;
  padding: 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-solid);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}

.c-select.is-open .c-select__menu {
  display: grid;
  gap: 0.2rem;
}

.c-select__option {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.c-select__option:hover,
.c-select__option:focus-visible {
  outline: 0;
  background: var(--fill);
  color: var(--cream);
}

.c-select__option.is-selected {
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  box-shadow: 0 8px 18px rgba(255, 61, 154, 0.18);
}

.c-select__option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Date picker ---------- */

.date-field {
  position: relative;
  width: 100%;
  min-width: 0;
}

.date-field.is-open {
  z-index: var(--z-control-open);
}

.date-field__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-soft);
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.date-field__trigger:hover {
  background: var(--fill);
  border-color: var(--line-strong);
}

.date-field.is-open .date-field__trigger,
.date-field__trigger:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.date-field__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-field__value.is-placeholder {
  color: var(--muted);
}

.date-field__icon {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3' stroke='%23ff3d9a' stroke-width='1.7'/%3E%3Cpath d='M8 3.5v3.5M16 3.5v3.5M3.5 10h17' stroke='%237a4dff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.date-field__panel {
  position: absolute;
  z-index: var(--z-popover);
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  padding: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel-solid);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow);
}

.date-field__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.date-field__title {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.02em;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  max-width: 100%;
  min-width: 0;
}

.date-field__title:hover {
  background: var(--fill);
  color: var(--cream);
}

.date-field__title:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.date-field__nav-btn {
  width: var(--touch-min);
  height: var(--touch-min);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-soft);
  color: var(--cream);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.date-field__nav-btn:hover {
  background: var(--fill);
  border-color: var(--line-strong);
}

.date-field__nav-btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.date-field__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.25rem;
}

.date-field__grid--months,
.date-field__grid--years {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  min-height: 11.5rem;
  align-content: start;
}

.date-field__pick {
  appearance: none;
  border: 0;
  background: var(--fill-soft);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  min-height: var(--touch-min);
  padding: 0.55rem 0.35rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.date-field__pick:hover {
  background: var(--fill);
  color: var(--cream);
}

.date-field__pick:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.date-field__pick.is-today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 50%, var(--line));
}

.date-field__pick.is-selected {
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  box-shadow: 0 8px 16px rgba(255, 61, 154, 0.22);
}

.date-field__pick.is-selected:hover {
  color: #fff;
  filter: brightness(1.05);
}

.date-field__dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.35rem 0;
}

.date-field__day {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  min-height: var(--touch-min);
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.date-field__day.is-empty {
  pointer-events: none;
  visibility: hidden;
}

.date-field__day:hover {
  background: var(--fill);
  color: var(--cream);
}

.date-field__day:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.date-field__day.is-today {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 50%, var(--line));
}

.date-field__day.is-selected {
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  box-shadow: 0 8px 16px rgba(255, 61, 154, 0.22);
}

.date-field__day.is-selected:hover {
  color: #fff;
  filter: brightness(1.05);
}

.date-field__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}

input[type="tel"][data-phone-mask] {
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.phone-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--fill-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.phone-field:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--fill);
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line-strong));
}

.phone-field:focus-within {
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.phone-field__prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding: 0 0.85rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--magenta) 14%, transparent);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.phone-field input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.85rem 1rem;
}

.phone-field input[type="tel"]:focus {
  outline: 0;
  box-shadow: none !important;
}

.field.has-error .phone-field {
  border-color: var(--danger);
}

.email-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--fill-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.email-field:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--fill);
  border-color: color-mix(in srgb, var(--violet) 35%, var(--line-strong));
}

.email-field:focus-within {
  border-color: color-mix(in srgb, var(--violet) 55%, var(--magenta));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 24%, transparent);
}

.email-field__prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding: 0 0.85rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--violet) 14%, transparent);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.email-field input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.85rem 1rem;
  font-weight: 650;
}

.email-field input[type="email"]:focus {
  outline: 0;
  box-shadow: none !important;
}

.email-field.is-invalid,
.field.has-error .email-field {
  border-color: var(--danger);
}

.email-field.is-invalid:focus-within,
.field.has-error .email-field:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent);
}

.url-field {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--fill-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.url-field:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--fill);
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line-strong));
}

.url-field:focus-within {
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.url-field__prefix {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.1rem;
  padding: 0 0.85rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--magenta) 14%, transparent);
  color: var(--cream);
}

.url-field__prefix svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.url-field input[type="url"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.85rem 1rem;
  font-weight: 650;
}

.url-field input[type="url"]:focus {
  outline: 0;
  box-shadow: none !important;
}

.url-field.is-invalid,
.field.has-error .url-field {
  border-color: var(--danger);
}

.url-field.is-invalid:focus-within,
.field.has-error .url-field:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent);
}

/* ---------- Star rating ---------- */

/* Stars fill the card: equal-width cells (so tap targets tile the whole row)
   with the icon scaled to the cell and capped, so a 5-star row shows bigger
   stars instead of a stretched-out line of small ones. */
.rating-field {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Radios are visually hidden but stay focusable for keyboard use. */
.rating-field .rating-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.rating-field__star {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  min-width: 0;
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 12px;
  color: var(--rating-empty);
  transition: color 0.15s ease, transform 0.15s ease;
}

/* 54% keeps ten stars at their previous desktop size; fewer stars grow up to
   4.5rem. The 2rem floor keeps small rows from collapsing on narrow screens,
   while max-width: 100% lets ten stars shrink to fit without overflowing. */
.rating-field__star svg {
  width: clamp(2rem, 54%, 4.5rem);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  fill: currentColor;
}

/* The checked radio and every following star light up; row-reverse makes the
   following stars the lower values, i.e. all stars up to the chosen one. */
.rating-field__input:checked ~ .rating-field__star,
.rating-field__star:hover,
.rating-field__star:hover ~ .rating-field__star {
  color: var(--rating-active);
}

.rating-field__star:hover {
  transform: translateY(-1px);
}

.rating-field__input:focus-visible + .rating-field__star {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field.has-error .rating-field__star {
  color: color-mix(in srgb, var(--danger) 60%, transparent);
}

/* ---------- Numeric scale (manual value + interactive slider) ---------- */

.scale-field {
  --zf-scale-fill: 0%;
  display: grid;
  grid-template-columns: minmax(4.25rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.9rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Manual value left of the track; the slider mirrors it and stays the main control. */
.scale-field .scale-field__number {
  width: 100%;
  min-width: 4.25rem;
  padding: 0.5rem 0.6rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--heading);
  /* Spinners fight the large type; the slider and the keyboard remain the inputs. */
  -moz-appearance: textfield;
  appearance: textfield;
}

.scale-field .scale-field__number::-webkit-outer-spin-button,
.scale-field .scale-field__number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.scale-field__number::placeholder {
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Answered: the value box reads as filled rather than as an empty slot. */
.scale-field.has-value .scale-field__number {
  border-color: var(--line-strong);
}

.scale-field__control {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.scale-field__range {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem; /* touch target >= 44px */
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.scale-field__range::-webkit-slider-runnable-track {
  height: 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-image: var(--brand-gradient), linear-gradient(var(--fill-soft), var(--fill-soft));
  background-repeat: no-repeat;
  background-position: 0 0, 0 0;
  background-size: var(--zf-scale-fill, 0%) 100%, 100% 100%;
}

.scale-field__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: -0.5rem;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--magenta) 38%, transparent);
  transition: transform 0.12s ease;
}

.scale-field__range:active::-webkit-slider-thumb {
  transform: scale(1.06);
}

.scale-field__range::-moz-range-track {
  height: 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--fill-soft);
}

.scale-field__range::-moz-range-progress {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--brand-gradient);
}

.scale-field__range::-moz-range-thumb {
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--magenta) 38%, transparent);
}

.scale-field__range:focus-visible {
  outline: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.scale-field__bounds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.scale-field__bound {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.field.has-error .scale-field__number {
  color: var(--danger);
}

.field.has-error .scale-field__range::-webkit-slider-thumb,
.field.has-error .scale-field__range::-moz-range-thumb {
  background: var(--danger);
}

/* ---------- NPS (0..10 loyalty score) ---------- */

/* 11 equal cells in one row: the answered score is a brand-gradient tile (same
   accent as the scale thumb), the rest stay quiet. Order is left-to-right 0 → 10. */
.nps-field {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.nps-field__scale {
  display: flex;
  gap: 0.25rem;
  width: 100%;
}

/* Visually hidden but keyboard-focusable: arrows move inside the radiogroup. */
.nps-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.nps-field__option {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 2.75rem; /* touch target >= 44px */
  padding: 0.35rem 0.1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--fill-soft);
  color: var(--cream);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* The generic `label > span` muted color must not reach the score: it follows the tile ink. */
.nps-field__score {
  color: inherit;
  font-weight: inherit;
}

.nps-field__option:hover {
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--line));
  background: var(--fill-hover);
}

/* Adjacent sibling, not `~`: only the picked score lights up. */
.nps-field__input:checked + .nps-field__option {
  border-color: transparent;
  background: var(--brand-gradient);
  color: var(--nps-checked-ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--magenta) 38%, transparent);
}

.nps-field__input:focus-visible + .nps-field__option {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.nps-field__anchors {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.nps-field__anchor:last-child {
  text-align: right;
}

.field.has-error .nps-field__option {
  border-color: color-mix(in srgb, var(--danger) 60%, transparent);
}

.field.has-error .nps-field__input:checked + .nps-field__option {
  border-color: transparent;
}

/* Eleven cells must still fit a narrow phone card: tighten gaps and type instead
   of letting the row overflow or the tiles shrink below a usable tap target. */
@media (max-width: 480px) {
  .nps-field__scale {
    gap: 0.15rem;
  }

  .nps-field__option {
    padding: 0.35rem 0.05rem;
    border-radius: 8px;
    font-size: 0.85rem;
  }

  .nps-field__anchors {
    gap: 0.5rem;
    font-size: 0.72rem;
  }
}

/* ---------- Custom checkboxes / radios ---------- */

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.12rem 0 0;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--line-strong) 85%, var(--cream));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    var(--fill-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  vertical-align: top;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

input[type="checkbox"] {
  border-radius: 6px;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--line-strong));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    var(--fill);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--magenta) 60%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  box-shadow: 0 6px 16px rgba(255, 61, 154, 0.22);
}

input[type="checkbox"]:checked {
  /* Chromium paints checkbox backgrounds as a hard square even with
     border-radius / clip-path / mask. Draw the whole control (rounded
     fill + check) as one SVG so the shape matches the empty state. */
  border-color: transparent;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ff3d9a'/%3E%3Cstop offset='100%25' stop-color='%237a4dff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='18' height='18' rx='6' fill='url(%23g)'/%3E%3Cpath d='M4.05 9.225 7.54 12.6 13.95 5.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

input[type="radio"]:checked {
  /* Same Chromium square-background issue as the checkbox: the fill must be a circle itself. */
  border-color: transparent;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23ff3d9a'/%3E%3Cstop offset='100%25' stop-color='%237a4dff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='9' cy='9' r='9' fill='url(%23g)'/%3E%3Ccircle cx='9' cy='9' r='3.6' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow:
    0 6px 16px rgba(255, 61, 154, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

input[type="checkbox"]:active,
input[type="radio"]:active {
  transform: scale(0.94);
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  grid-template-columns: none;
  min-width: 0;
  cursor: pointer;
}

.check-row span {
  color: var(--text-soft);
  font-weight: 500;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
  padding-top: 0.05rem;
}

.check-row-pad { padding-top: 1.55rem; }

.inline-create {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  width: 100%;
  align-items: stretch;
}

.inline-create input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--fill-soft);
}

.page-head--create {
  align-items: stretch;
}

.page-head--create .inline-create .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .inline-create {
    flex-wrap: wrap;
  }

  .inline-create .btn {
    width: 100%;
  }
}

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

@media (min-width: 901px) {
  .data-table {
    min-width: 640px;
  }
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.data-table a {
  overflow-wrap: break-word;
  word-break: normal;
}

.data-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--fill-soft);
}

@media (max-width: 900px) {
  .table-wrap {
    overflow: visible;
  }

  .data-table {
    min-width: 0;
  }

  .data-table thead {
    display: none;
  }

  .data-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .data-table tr {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }

  .data-table th,
  .data-table td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0;
    border: 0;
  }

  .data-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.35;
  }

  .data-table td.row-actions {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding-top: 0.35rem;
    white-space: normal;
  }

  .data-table td.row-actions .row-actions__group {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    white-space: normal;
  }

  .data-table td.row-actions .row-actions__group .btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }

  .data-table td:first-child {
    max-width: none;
  }

  .data-table td:not([data-label]),
  .data-table td[data-label=""] {
    grid-template-columns: minmax(0, 1fr);
  }

  .data-table td:not([data-label])::before,
  .data-table td[data-label=""]::before {
    display: none;
  }

  .data-table td.row-actions:not(:has(button, a, .btn, form)) {
    display: none;
  }
}

.table-link {
  font-weight: 700;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.table-link:hover {
  filter: brightness(1.18);
  color: transparent;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 1.85rem;
  padding: 0.2rem 0.7rem 0.2rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fill-soft) 88%, transparent);
  color: var(--text-soft);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.back-link svg {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.back-link:hover {
  color: var(--cream);
  text-decoration: none;
  background: color-mix(in srgb, var(--magenta) 10%, var(--fill));
  border-color: color-mix(in srgb, var(--magenta) 42%, var(--line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 14%, transparent);
}

.back-link:active {
  transform: translateX(-1px);
}

.back-link:focus-visible {
  outline: 0;
  color: var(--cream);
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.table-meta {
  display: inline-block;
  width: auto;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.form-link-cell {
  max-width: 18rem;
}

.form-link-stack {
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  min-width: 0;
}

.form-public-link {
  display: block;
  max-width: 100%;
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.form-public-url {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin-top: 0.35rem;
}

.form-public-url > .muted {
  margin: 0;
  min-width: 0;
  flex: 1 1 220px;
}

.form-public-url__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.form-public-url a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-head--editor,
.page-head--responses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
  gap: 1rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.page-head--editor .page-head__intro,
.page-head--responses .page-head__intro {
  min-width: 0;
}

.page-head--editor .page-head__intro h1,
.page-head--responses .page-head__intro h1 {
  margin-bottom: 0;
}

.editor-meta__status {
  --editor-status-control-h: var(--touch-min);
  --editor-status-control-w: 10rem;
  display: grid;
  gap: 0.28rem;
  margin: 0;
  flex: 0 0 auto;
  width: var(--editor-status-control-w);
  max-width: 100%;
  min-width: 0;
}

.editor-meta__status .c-select,
.editor-meta__status select {
  width: 100%;
  min-width: 0;
}

.editor-meta__status .c-select__menu {
  width: max-content;
  min-width: 100%;
  max-width: min(18rem, 90vw);
}

.editor-meta__status .c-select__btn {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--editor-status-control-h);
  height: var(--editor-status-control-h);
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.editor-meta__status .c-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-meta__status.is-saving {
  pointer-events: none;
  opacity: 0.72;
}

.editor-meta__status[data-status="draft"] .c-select__btn {
  background: var(--fill);
  color: var(--muted);
  border-color: var(--line);
  box-shadow: none;
}

.editor-meta__status[data-status="draft"] .c-select__btn:hover,
.editor-meta__status[data-status="draft"] .c-select.is-open .c-select__btn,
.editor-meta__status[data-status="draft"] .c-select__btn:focus-visible {
  background: var(--fill-hover);
  color: var(--text-soft);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cream) 12%, transparent);
}

.editor-meta__status[data-status="published"] .c-select__btn {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  box-shadow: none;
}

.editor-meta__status[data-status="published"] .c-select__btn:hover,
.editor-meta__status[data-status="published"] .c-select.is-open .c-select__btn,
.editor-meta__status[data-status="published"] .c-select__btn:focus-visible {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

.editor-meta__status[data-status="closed"] .c-select__btn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  box-shadow: none;
}

.editor-meta__status[data-status="closed"] .c-select__btn:hover,
.editor-meta__status[data-status="closed"] .c-select.is-open .c-select__btn,
.editor-meta__status[data-status="closed"] .c-select__btn:focus-visible {
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent);
}

.editor-meta__status[data-status="completed"] .c-select__btn {
  background: color-mix(in srgb, var(--magenta) 16%, transparent);
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 30%, transparent);
  box-shadow: none;
}

.editor-meta__status[data-status="completed"] .c-select__btn:hover,
.editor-meta__status[data-status="completed"] .c-select.is-open .c-select__btn,
.editor-meta__status[data-status="completed"] .c-select__btn:focus-visible {
  background: color-mix(in srgb, var(--magenta) 24%, transparent);
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 48%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 22%, transparent);
}

.form-qr {
  flex: 0 0 auto;
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  align-content: start;
  padding: 0.65rem 0.7rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 55%),
    radial-gradient(110% 80% at 90% 90%, color-mix(in srgb, var(--magenta) 14%, transparent), transparent 50%),
    var(--fill-soft);
  box-shadow: var(--shadow-sm);
}

.form-qr__frame {
  position: relative;
  width: 7.35rem;
  height: 7.35rem;
  border-radius: 14px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.form-qr__canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.form-qr__label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-qr__downloads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  width: 100%;
}

.form-qr__downloads .btn {
  min-height: 2.15rem;
  padding: 0.35rem 0.4rem;
  font-size: 0.72rem;
  border-radius: 10px;
  justify-content: center;
}

.form-qr.is-error .form-qr__frame,
[data-form-qr].is-error .form-qr__frame {
  opacity: 0.45;
}

[data-form-qr]:not(.is-ready) .form-qr__downloads {
  opacity: 0.55;
  pointer-events: none;
}

.qr-dialog:not([open]) {
  display: none;
}

.qr-dialog[open] {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  box-sizing: border-box;
}

.qr-dialog::backdrop {
  background: rgba(var(--bg-rgb), 0.62);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

.qr-dialog__card {
  position: relative;
  width: min(18.5rem, 100%);
  padding: 1.05rem 1.05rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.85rem;
  justify-items: center;
}

.qr-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.qr-dialog__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.qr-dialog__expand,
.qr-dialog__close {
  flex: 0 0 auto;
}

.qr-dialog__expand svg,
.qr-dialog__close svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qr-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
  line-height: 1.25;
}

.qr-dialog .form-qr {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.qr-dialog .form-qr__frame {
  width: 12.5rem;
  height: 12.5rem;
}

.qr-dialog .form-qr__downloads {
  max-width: none;
}

.qr-dialog.is-expanded .qr-dialog__card {
  width: min(52rem, 96vw);
  max-height: min(98dvh, 100%);
  padding: 1.25rem 1.35rem 1.2rem;
  gap: 1.15rem;
  overflow: auto;
}

.qr-dialog.is-expanded .qr-dialog__title {
  font-size: 1.2rem;
}

.qr-dialog.is-expanded .form-qr__frame {
  width: min(86vmin, 40rem);
  height: min(86vmin, 40rem);
}

.qr-dialog.is-expanded .qr-dialog__expand {
  color: var(--heading);
  background: var(--fill-hover);
  border-color: var(--line-strong);
}

.qr-dialog.is-expanded .qr-dialog__expand svg {
  transform: rotate(45deg) scale(0.92);
}

.qr-dialog__expand svg {
  transition: transform 0.2s ease;
}

.responses-meta {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-sizing: border-box;
}

.responses-meta__stat {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text-soft);
}

.responses-meta__stat strong {
  color: var(--cream);
  font-weight: 800;
  font-size: 1.2rem;
}

.responses-meta__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem;
  align-items: stretch;
}

.responses-meta__actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.responses-meta__actions .btn {
  min-height: var(--touch-min);
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.responses-meta__danger {
  margin: 0;
  display: grid;
  min-width: 0;
}

.responses-meta__danger .btn {
  width: 100%;
  height: 100%;
}

.responses-meta__actions > :only-child {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .responses-meta__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 721px) {
  .page-head--editor,
  .page-head--responses {
    gap: 1.15rem;
  }
}

[data-copy-url].is-copied {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  color: var(--ok);
}

[data-copy-url].is-copy-failed {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger);
}

/* ---------- Forms cards ---------- */

.forms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 1rem;
  align-items: stretch;
}

.form-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  height: 100%;
  padding: 1.15rem 1.2rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.form-card:hover {
  border-color: var(--line-strong);
  background: var(--card-hover);
}

.form-card__main {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex: 1 1 auto;
  min-width: 0;
}

.form-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex: 0 0 auto;
  min-width: 0;
}

.form-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.form-card__stats,
.form-card__tags {
  flex: 0 0 auto;
}

.form-card__title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}

.form-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--heading);
  min-width: 0;
  overflow: hidden;
}

.form-card__title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: normal;
}

.form-card__title a:hover {
  filter: brightness(1.15);
  text-decoration: none;
}

.form-card__updated {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.form-card__top .badge {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.form-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.form-card__stats:has(.form-card__stat--wide) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-card__stat {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill-soft);
  display: grid;
  gap: 0.2rem;
}

.form-card__stat-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--cream);
  text-decoration: none;
}

a.form-card__stat-value {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

a.form-card__stat-value:hover {
  filter: brightness(1.15);
  text-decoration: none;
}

.form-card__stat-value--text {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-card__stat-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.form-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.form-card__tag--shared {
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line));
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
}

.form-card__link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 0;
  padding: 0.45rem 0.55rem 0.45rem 0.7rem;
  border: 1px dashed color-mix(in srgb, var(--violet) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--violet) 8%, transparent);
  min-width: 0;
  box-sizing: border-box;
}

.form-card__link.is-empty {
  border-color: var(--line);
  background: var(--fill-soft);
}

.form-card__link-empty {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.form-card__link .form-public-link {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: transparent;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.form-card__link .btn {
  flex: 0 0 auto;
}

.form-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.form-card__actions .form-card__answers {
  flex: 1 1 8rem;
  min-width: 0;
}

.form-card__actions .btn-icon,
.form-card__actions > .form-card__delete {
  flex: 0 0 auto;
}

.btn.btn-icon {
  width: var(--touch-min);
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 0;
}

.btn.btn-icon.btn-sm {
  width: var(--control-sm);
  min-width: var(--control-sm);
  min-height: var(--control-sm);
}

.btn-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-card__delete {
  margin: 0;
  display: flex;
}

.form-card__delete .btn {
  width: var(--touch-min);
  min-width: var(--touch-min);
}

.data-table td:first-child {
  max-width: 22rem;
}

td.row-actions {
  /* Must stay table-cell on desktop: display:flex on <td> collapses empty
     cells and chops the row hover background into a stepped halo. */
  vertical-align: middle;
  text-align: right;
}

@media (min-width: 901px) {
  td.row-actions {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
  }
}

div.row-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.row-actions__group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

td.row-actions > form,
.row-actions form,
.row-actions__group form {
  margin: 0;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.row-actions__group .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  box-sizing: border-box;
  white-space: nowrap;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.badge {
  display: inline-flex;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.badge-draft {
  background: var(--fill);
  color: var(--muted);
  border-color: var(--line);
}

.badge-published {
  background: var(--ok-bg);
  color: var(--ok);
}

.badge-closed {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge-completed {
  background: color-mix(in srgb, var(--magenta) 16%, transparent);
  color: var(--magenta);
  border-color: color-mix(in srgb, var(--magenta) 30%, transparent);
}

.settings-limit-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.empty-state {
  padding: 2.75rem 1.5rem;
  text-align: center;
}

.editor-layout { display: grid; gap: 1rem; }

.editor-tabs {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.editor-tabs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: -0.15rem 0 0.15rem;
  min-width: 0;
}

/* Stage 6.1: the bar is its own horizontal scroll container. min-width:0 plus
   overflow-x makes it give up the min-content width it used to claim, so a row
   of nowrap tabs can no longer widen .editor-tabs — which stretched
   .editor-form-basics / .builder-rail past the viewport on phones. */
.editor-tabs__bar {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  gap: 0.15rem;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.editor-tabs__bar::-webkit-scrollbar {
  display: none;
}

.editor-tabs__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: var(--control-sm);
  padding: 0.4rem 0.95rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.editor-tabs__btn.is-active {
  background: var(--fill-hover);
  color: var(--cream);
}

.editor-tabs__btn:hover:not(.is-active) {
  color: var(--cream);
  background: color-mix(in srgb, var(--fill-hover) 55%, transparent);
}

.editor-tabs__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.editor-tabs__panel {
  min-width: 0;
}

.editor-tabs__panel--questions {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.editor-tabs__panel--questions > .panel {
  margin-bottom: 0;
}

.editor-tabs__panel[hidden] {
  display: none;
}

/* ---------- Form settings tiles ---------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.settings-tile {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.settings-tile--access {
  grid-column: 1 / -1;
}

.settings-tile--access .editors-list__title {
  margin-bottom: 0.45rem;
}

.settings-tile--access .editors-grid {
  max-height: 11rem;
  overflow: auto;
  padding-right: 0.15rem;
}

.settings-tile--access .editor-chip {
  width: 100%;
}

.settings-tile__head {
  min-width: 0;
}

.settings-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.settings-tile__hint {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.settings-tile__body {
  min-width: 0;
}

.settings-field {
  display: grid;
  gap: 0.4rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.settings-tile--captcha,
.settings-tile--switch {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.settings-tile--captcha:hover,
.settings-tile--switch:hover {
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line));
  background: color-mix(in srgb, var(--magenta) 6%, var(--fill-soft));
}

.settings-captcha-input,
.settings-switch-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

.settings-captcha-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
}

.settings-captcha-state,
.settings-switch-state {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--muted);
}

.settings-tile--captcha.is-on,
.settings-tile--switch.is-on {
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
  background: color-mix(in srgb, var(--ok) 8%, var(--fill-soft));
}

.settings-tile--captcha.is-on .settings-captcha-state,
.settings-tile--switch.is-on .settings-switch-state {
  color: var(--ok);
}

.settings-switch {
  position: relative;
  display: block;
  width: 2.7rem;
  height: 1.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--fill);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--cream);
  transform: translateY(-50%);
  transition: left 0.2s ease, background 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.settings-tile--captcha.is-on .settings-switch,
.settings-tile--switch.is-on .settings-switch,
.switch-row__input:checked + .settings-switch {
  border-color: transparent;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
}

.settings-tile--captcha.is-on .settings-switch__thumb,
.settings-tile--switch.is-on .settings-switch__thumb,
.switch-row__input:checked + .settings-switch .settings-switch__thumb {
  left: calc(100% - 1.33rem);
  background: #fff;
}

.settings-tile--captcha:focus-within,
.settings-tile--switch:focus-within {
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}

.switch-row__text {
  color: var(--text-soft);
  font-weight: 650;
  font-size: 0.9rem;
  line-height: 1.3;
  min-width: 0;
}

.switch-row__hint {
  display: block;
  font-weight: 500;
  margin-top: 0.2rem;
}

.noscript-submit {
  margin-top: 0.75rem;
}

.switch-row__control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.switch-row__input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  pointer-events: none !important;
}

.switch-row__input:focus-visible + .settings-switch {
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.switch-row:hover .settings-switch {
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line-strong));
}

@media (max-width: 860px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

.editor-form-basics {
  display: grid;
  gap: 0.75rem;
}

.editor-form-basics label {
  gap: 0.28rem;
}

.editor-form-basics label > span {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.editor-form-basics textarea {
  min-height: 4.5rem;
}

.editor-questions {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.questions-list {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.editor-section-block {
  display: grid;
  gap: 0;
  margin-bottom: 0;
  min-width: 0;
}

.questions-list > .editor-section-block.panel {
  margin-bottom: 0;
  padding-top: 0;
}

.editor-section-block > .question-card--section {
  margin: 0 -1.25rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="light"] .question-card--section.is-editing {
  border-bottom-color: var(--line-strong);
  box-shadow: none;
}

[data-theme="light"] .section-card__badge {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}

[data-theme="light"] .section-card-top input.section-card__title,
[data-theme="light"] .section-card__desc-field textarea.section-card__desc {
  border-color: var(--line);
  background: transparent;
}

.q-insert {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0;
  position: relative;
  z-index: 2;
}

.q-insert__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.55rem;
  height: auto;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill-soft);
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  opacity: 0.7;
  box-shadow: none;
  transition:
    opacity 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.q-insert__plus {
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease;
}

.q-insert__label {
  min-width: 0;
}

.q-insert:hover .q-insert__btn,
.q-insert:focus-within .q-insert__btn {
  opacity: 1;
}

.q-insert__btn:hover,
.q-insert__btn:focus-visible {
  outline: 0;
  color: var(--cream);
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--line-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--magenta) 22%, var(--fill-hover)),
      color-mix(in srgb, var(--violet) 18%, var(--fill-hover))
    );
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--violet) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.q-insert__btn:hover .q-insert__plus,
.q-insert__btn:focus-visible .q-insert__plus {
  transform: scale(1.12);
}

.q-insert__btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--focus-ring),
    0 8px 20px color-mix(in srgb, var(--violet) 14%, transparent);
}

.questions-list.is-reordering .q-insert {
  display: none;
}

.q-section-add[hidden] {
  display: none;
}

.q-section-add__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.55rem;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 1px solid color-mix(in srgb, var(--violet) 24%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 6%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.25;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.q-section-add__plus {
  flex: 0 0 auto;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}

.q-section-add__btn:hover,
.q-section-add__btn:focus-visible {
  outline: 0;
  color: var(--cream);
  border-style: solid;
  border-color: color-mix(in srgb, var(--violet) 46%, var(--line-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--violet) 16%, var(--fill-hover)),
      color-mix(in srgb, var(--magenta) 10%, var(--fill-hover))
    );
  box-shadow: 0 8px 20px color-mix(in srgb, var(--violet) 12%, transparent);
}

.q-section-add__btn:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent),
    0 8px 20px color-mix(in srgb, var(--violet) 12%, transparent);
}

.question-card--section {
  position: relative;
  z-index: 1;
}

.question-card--section .question-card__body {
  border-radius: 0;
  background: transparent;
  padding: 0.95rem 1.15rem 1.05rem;
  gap: 0.65rem;
}

.question-card--section.is-editing {
  animation: none;
  border-color: transparent;
  border-bottom-color: var(--line-strong);
  box-shadow: none;
}

.section-card-top {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  min-height: var(--control-sm);
  padding: 0;
}

.section-card-top > .q-tools {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin-left: auto;
}

.section-card-top .btn-sm {
  box-sizing: border-box;
  height: var(--control-sm);
  min-height: var(--control-sm);
  max-height: var(--control-sm);
  padding: 0 0.75rem;
  line-height: 1;
}

.section-card__badge {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-sm);
  min-height: var(--control-sm);
  max-height: var(--control-sm);
  padding: 0 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.section-card__title-field {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  display: block;
}

/* Beat global input[type=text] { min-height: touch-min } so the row aligns. */
.section-card-top input.section-card__title {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-sm);
  min-height: var(--control-sm);
  max-height: var(--control-sm);
  margin: 0;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--heading);
  font: inherit;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.section-card-top input.section-card__title:hover {
  border-color: var(--line-strong);
  background: var(--fill-soft);
}

.section-card-top input.section-card__title:focus {
  outline: 0;
  border-color: color-mix(in srgb, var(--magenta) 40%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--fill-soft);
}

.section-card__desc-field {
  display: grid;
  gap: 0.28rem;
  margin: 0;
  padding-top: 0.15rem;
  border-top: 1px dashed var(--line);
}

.section-card__desc-field > span {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.section-card__desc-field textarea.section-card__desc {
  min-height: 2.8rem;
  resize: vertical;
  background: transparent;
  border-color: var(--line);
  color: var(--text-soft);
}

.section-card__desc-field textarea.section-card__desc:hover,
.section-card__desc-field textarea.section-card__desc:focus {
  background: var(--fill-soft);
}

.question-card--section .q-tools {
  margin-left: auto;
}

.field-section {
  margin: 0 0 0.35rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--violet) 20%, var(--line));
}

.field-section:first-child {
  margin-top: 0;
}

.field-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--heading);
}

.field-section__desc {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

.public-section {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 1.15rem 1.15rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  min-width: 0;
  overflow: visible;
}

/* Stage 10/11: conditional logic — hidden targets leave no empty card gap */
.public-form .is-logic-hidden,
.public-form [data-question-id].is-logic-hidden {
  display: none !important;
}

.public-form .is-logic-hidden:focus-within {
  outline: none;
}

[data-theme="light"] .public-section {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .field-section {
  border-bottom-color: var(--line);
}

.public-form.has-sections,
.public-form:has(> .public-section) {
  gap: 1.25rem;
}

.public-form > .btn-primary,
.public-form > .captcha-field,
.public-form > .field--pd-consent,
.public-form > .alert {
  position: relative;
  z-index: 1;
}

.question-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 0;
  background: transparent;
  overflow: visible;
  min-width: 0;
  position: relative;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.question-card.is-editing {
  z-index: 3;
  border-color: color-mix(in srgb, var(--magenta) 65%, var(--violet));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--magenta) 40%, transparent),
    0 0 14px rgba(255, 61, 154, 0.38),
    0 0 30px rgba(122, 77, 255, 0.28),
    0 0 48px rgba(62, 199, 255, 0.12);
}

/* The pulse fades a pre-rendered glow layer: animating box-shadow itself repaints every frame. */
.question-card.is-editing:not(.is-drop-after)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 45%, var(--magenta)),
    0 0 20px rgba(255, 61, 154, 0.3),
    0 0 40px rgba(122, 77, 255, 0.22),
    0 0 64px rgba(62, 199, 255, 0.16);
  opacity: 0;
  animation: q-neon-pulse 2.4s ease-in-out infinite;
}

.question-card.has-editor-error {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--danger) 28%, transparent),
    0 0 calc(18px * var(--glow-strength)) color-mix(in srgb, var(--danger) 16%, transparent);
  animation: none;
}

.question-card.has-editor-error.is-editing {
  border-color: color-mix(in srgb, var(--danger) 65%, var(--line-strong));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent),
    0 0 calc(22px * var(--glow-strength)) color-mix(in srgb, var(--danger) 18%, transparent);
  animation: none;
}

.question-card input.is-editor-invalid,
.question-card textarea.is-editor-invalid,
.question-card select.is-editor-invalid,
.section-card-top input.section-card__title.is-editor-invalid,
label.has-editor-error input,
label.has-editor-error textarea,
label.has-editor-error select,
input.is-editor-invalid,
textarea.is-editor-invalid,
select.is-editor-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent);
}

.question-card.has-editor-error .q-compact-chip--type {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
  color: color-mix(in srgb, var(--danger) 55%, var(--cream));
}

.question-card.is-picking-type.is-editing {
  min-height: 16rem;
}

.question-card.is-picking-type.is-editing .q-fields,
.question-card.is-picking-type.is-editing .unique-items-field,
.question-card.is-picking-type .move-up,
.question-card.is-picking-type .move-down,
.question-card.is-picking-type .duplicate-question {
  display: none !important;
}

.question-card.is-picking-type.is-editing .q-type-picker {
  display: grid;
}

.q-type-picker {
  display: none;
  gap: 0.85rem;
  align-content: start;
  min-height: 12rem;
  padding: 0.15rem 0 0.35rem;
}

.q-type-picker__lead {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: var(--tracking-tight);
}

.q-type-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.55rem;
}

.q-type-picker__option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-solid);
  color: var(--cream);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.q-type-picker__option:hover {
  color: var(--cream);
  background: color-mix(in srgb, var(--magenta) 10%, var(--fill));
  border-color: color-mix(in srgb, var(--magenta) 48%, var(--line-strong));
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--violet) 12%, transparent);
}

.q-type-picker__option:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--magenta) 55%, var(--violet));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.q-type-picker__option:active {
  transform: none;
}

.question-card.is-editing .q-num {
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes q-neon-pulse {
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .question-card.is-editing::after {
    animation: none;
  }
}

.question-card.has-open-popover,
.question-card:has(.c-select.is-open) {
  z-index: var(--z-popover);
}

.question-card__body {
  display: grid;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  background: var(--fill-soft);
  border-radius: 15px 0 0 15px;
}

.question-card__body > .q-fields,
.question-card__body > .unique-items-field {
  margin: 0;
}

.question-card label {
  gap: 0.22rem;
}

.q-fields {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.q-field {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
  margin: 0;
}

.q-field > span {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.q-field-row {
  display: grid;
  gap: 0.5rem 0.65rem;
  align-items: end;
  min-width: 0;
}

.q-field-row--controls {
  grid-template-columns: minmax(8.5rem, 11.5rem) auto;
  justify-content: start;
}

.q-field-row--hints {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
}

.q-field-row--hints:has(.q-placeholder-field[style*="display: none"]) {
  grid-template-columns: minmax(0, 20rem);
}

.q-field-row--hints.is-note,
.q-field-row--hints.is-note:has(.q-placeholder-field[style*="display: none"]) {
  grid-template-columns: minmax(0, 1fr);
}

.q-field--type {
  max-width: 11.5rem;
  position: relative;
  z-index: 1;
}

.q-field--type .c-select.is-open {
  z-index: var(--z-popover);
}

.q-field--type .c-select__menu {
  left: 0;
  right: auto;
  width: min(24rem, calc(100vw - 2rem));
  min-width: min(24rem, calc(100vw - 2rem));
  max-height: none;
  overflow: visible;
  padding: 0.4rem;
  gap: 0.35rem;
  background: var(--panel-solid);
  border-color: var(--line-strong);
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.q-field--type .c-select.is-open .c-select__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.q-field--type .c-select__option {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.68rem 0.78rem;
  border-radius: 10px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  color: #fff;
  background: color-mix(in srgb, #fff 16%, transparent);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
  box-shadow: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.q-field--type .c-select__option:hover,
.q-field--type .c-select__option:focus-visible {
  color: #fff;
  background: color-mix(in srgb, #fff 24%, transparent);
  border-color: color-mix(in srgb, #fff 36%, transparent);
  box-shadow: none;
}

.q-field--type .c-select__option.is-selected {
  color: #fff;
  text-shadow: none;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  border-color: transparent;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--magenta) 22%, transparent);
}

[data-theme="light"] .q-field--type .c-select__option {
  color: var(--cream);
  text-shadow: none;
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  border-color: color-mix(in srgb, var(--cream) 14%, transparent);
}

[data-theme="light"] .q-field--type .c-select__option:hover,
[data-theme="light"] .q-field--type .c-select__option:focus-visible {
  color: var(--cream);
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  border-color: color-mix(in srgb, var(--cream) 22%, transparent);
}

[data-theme="light"] .q-field--type .c-select__option.is-selected {
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  border-color: transparent;
}

.question-card:has(.q-field--type .c-select.is-open),
.question-card__body:has(.q-field--type .c-select.is-open),
.q-fields:has(.q-field--type .c-select.is-open),
.q-field-row--controls:has(.c-select.is-open) {
  overflow: visible;
  z-index: var(--z-popover);
}

@media (max-width: 560px) {
  .q-field--type .c-select__menu {
    width: min(16rem, calc(100vw - 1.5rem));
    min-width: min(16rem, calc(100vw - 1.5rem));
  }

  .q-field--type .c-select.is-open .c-select__menu {
    grid-template-columns: 1fr;
  }
}

.q-field--required {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--control-sm);
  padding: 0 0.15rem;
}

.q-field--required .switch-row__text {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--text-soft);
}

.q-field--placeholder {
  max-width: 16rem;
  justify-self: stretch;
}

.question-card .q-fields input[type="text"],
.question-card .q-fields select,
.question-card .q-fields .c-select__btn {
  min-height: var(--control-sm);
  height: var(--control-sm);
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  font-size: 0.88rem;
  border-radius: 10px;
}

.question-card .q-fields .c-select__btn {
  padding-left: 0.7rem;
  padding-right: 0.65rem;
}

.question-card .q-fields textarea {
  min-height: 4.25rem;
  /* Не shorthand: padding-bottom задаёт .textarea-field — зазор над ручкой ресайза */
  padding-top: 0.55rem;
  padding-right: 0.7rem;
  padding-left: 0.7rem;
  font-size: 0.88rem;
  border-radius: 10px;
  resize: vertical;
}

.q-field--options {
  max-width: 36rem;
}

/* ---------- Scale question (editor settings) ---------- */

.scale-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.65rem;
  max-width: 18rem;
}

.scale-options .q-field--scale-num input[type="number"] {
  min-height: var(--control-sm);
  height: var(--control-sm);
  padding: 0 0.7rem;
  font-size: 0.88rem;
  border-radius: 10px;
}

.scale-options__error {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ---------- NPS question (editor settings) ---------- */

.nps-options {
  gap: 0.35rem;
}

.nps-options__hint {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .q-field-row--controls {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .q-field--type {
    max-width: none;
  }

  .q-field-row--hints {
    grid-template-columns: 1fr;
  }

  .q-field--placeholder {
    max-width: none;
  }

  .q-field--options {
    max-width: none;
  }

  .scale-options__grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}

.question-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0;
  flex-wrap: wrap;
  min-width: 0;
}

.q-drag {
  flex: 0 0 3.1rem;
  width: 3.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.75rem 0.35rem;
  border: 0;
  border-left: 1px dashed color-mix(in srgb, var(--magenta) 35%, var(--line));
  border-radius: 0 15px 15px 0;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 6px,
      color-mix(in srgb, var(--magenta) 6%, transparent) 6px,
      color-mix(in srgb, var(--magenta) 6%, transparent) 7px
    ),
    color-mix(in srgb, var(--violet) 8%, var(--fill-soft));
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.q-drag:hover {
  color: var(--cream);
  border-left-color: color-mix(in srgb, var(--magenta) 55%, var(--line));
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 6px,
      color-mix(in srgb, var(--magenta) 10%, transparent) 6px,
      color-mix(in srgb, var(--magenta) 10%, transparent) 7px
    ),
    color-mix(in srgb, var(--magenta) 12%, var(--fill));
}

.q-drag:active,
.question-card.is-dragging .q-drag {
  cursor: grabbing;
  color: #fff;
  border-left-color: transparent;
  background: linear-gradient(180deg, var(--magenta), var(--violet));
}

.q-drag__icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  width: 1.05rem;
}

.q-drag__icon span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.95;
}

.q-drag__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.q-heading {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
}

.q-num {
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.q-compact-title {
  display: none;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.q-compact-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  height: 1.45rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-compact-chip--type {
  flex: 0 1 auto;
  max-width: min(100%, 28rem);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--text-soft);
}

.q-compact-title.is-empty .q-compact-chip--type {
  color: var(--muted);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.66rem;
  font-weight: 750;
}

.q-compact-chip--empty,
.q-compact-title.is-empty .q-compact-chip--empty {
  color: var(--muted);
  font-weight: 500;
  font-style: italic;
  border-style: dashed;
  background: transparent;
}

.q-tools { display: flex; gap: 0.25rem; flex-wrap: wrap; }

.questions-list.is-reordering {
  gap: 0.4rem;
}

.questions-list.is-reordering .question-card,
.questions-list.is-reordering .question-card__body {
  transition: none !important;
}

.questions-list.is-reordering .question-card {
  border-color: color-mix(in srgb, var(--violet) 28%, var(--line));
  background: transparent;
}

.questions-list.is-reordering .question-card__body {
  gap: 0;
  padding: 0.55rem 0.75rem;
  background: color-mix(in srgb, var(--panel) 70%, var(--fill-soft));
}

.questions-list.is-reordering .question-card__body > :not(.question-card-top):not(.section-card-top) {
  display: none !important;
}

.questions-list.is-reordering .question-card-top,
.questions-list.is-reordering .section-card-top {
  flex-wrap: nowrap;
  gap: 0.55rem;
}

.questions-list.is-reordering .section-card__desc-field,
.questions-list.is-reordering .section-card-top .q-tools {
  display: none !important;
}

.questions-list.is-reordering .section-card__title {
  font-size: 0.95rem;
  min-height: 0;
  padding: 0.2rem 0.45rem;
}

.questions-list.is-reordering .q-tools {
  display: none;
}

.questions-list.is-reordering .q-compact-title {
  display: inline-flex;
}

.questions-list.is-reordering .q-num {
  font-size: 0.78rem;
  color: var(--muted);
}

.questions-list.is-reordering .q-drag {
  flex-basis: 2.6rem;
  width: 2.6rem;
  gap: 0.35rem;
  padding: 0.45rem 0.2rem;
}

.questions-list.is-reordering .q-drag__label {
  font-size: 0.66rem;
}

.question-card.is-dragging {
  opacity: 0.4;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--line));
  background: transparent;
  box-shadow: none;
  z-index: 1;
}

.question-card.is-dragging .question-card__body {
  background: color-mix(in srgb, var(--magenta) 8%, var(--fill-soft));
}

.q-drop-marker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 1.1rem;
  margin: 0.1rem 0;
  padding: 0 0.15rem;
  pointer-events: none;
}

.q-drop-marker__line {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan));
  box-shadow: 0 0 14px rgba(255, 61, 154, 0.45);
}

.q-drop-marker__label {
  flex: 0 0 auto;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  box-shadow: 0 6px 14px rgba(255, 61, 154, 0.28);
}

body.is-question-sorting {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

body.is-question-sorting .q-drag {
  cursor: grabbing;
}

@media (max-width: 720px) {
  .q-drag {
    flex-basis: 2.6rem;
    width: 2.6rem;
  }

  .q-drag__label {
    font-size: 0.64rem;
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.empty-questions { margin: 0.5rem 0 0; }

.responses-list { display: grid; gap: 1rem; }

.response-card {
  padding: 0;
  overflow: hidden;
}

.panel.response-card {
  padding: 0;
}

.response-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: var(--fill-soft);
  color: var(--muted);
  font-size: 0.92rem;
}

.response-meta__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.response-meta__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
}

.response-id {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--cream);
  background: color-mix(in srgb, var(--violet) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line));
}

.response-meta__actions form {
  margin: 0;
}

.answer-blocks {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.15rem 1.15rem;
}

.answer-block {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 0.85rem 0.95rem;
}

.answer-block__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.answer-block__question {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.35;
}

.answer-block__value {
  margin: 0;
  color: var(--text-soft);
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 0.95rem;
}

.answer-block__value.is-empty {
  color: var(--muted);
  font-style: italic;
}

.type-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--magenta);
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--magenta) 28%, transparent);
}

.type-chip--sm {
  font-size: 0.68rem;
  padding: 0.12rem 0.45rem;
}

.summary-panel {
  margin-bottom: 1rem;
}

.summary-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.summary-head h2 {
  margin: 0 0 0.25rem;
}

.summary-head__aside {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.55rem;
}

.summary-head__aside .summary-kpis {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.summary-head__aside .kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  min-width: 5.5rem;
  min-height: var(--touch-min);
  height: 100%;
  padding: 0.35rem 0.7rem;
  border-radius: 12px;
  text-align: center;
}

.summary-head__aside .kpi__value {
  font-size: 1.05rem;
  line-height: 1.1;
}

.summary-head__aside .kpi__label {
  margin-top: 0.1rem;
  font-size: 0.68rem;
  line-height: 1.15;
}

.summary-head__aside .btn-pdf {
  max-width: 100%;
  min-height: var(--touch-min);
  height: auto;
  align-self: stretch;
  white-space: normal;
  line-height: 1.2;
  text-align: center;
}

.summary-kpis {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.btn.btn-pdf,
a.btn.btn-pdf {
  --pdf-red: #e11d2e;
  --pdf-red-hover: #c41222;
  gap: 0.45rem;
  color: var(--pdf-red);
  background: color-mix(in srgb, var(--pdf-red) 10%, transparent);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--pdf-red) 42%, transparent);
  box-shadow: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}

@supports not (background: color-mix(in srgb, red 10%, white)) {
  .btn.btn-pdf,
  a.btn.btn-pdf {
    background: rgba(225, 29, 46, 0.1);
    border-color: rgba(225, 29, 46, 0.42);
  }
}

.btn.btn-pdf:hover,
a.btn.btn-pdf:hover {
  color: #fff;
  background: var(--pdf-red);
  background-image: none;
  border-color: var(--pdf-red);
  transform: none;
  box-shadow: none;
}

.btn.btn-pdf:hover .btn-pdf__mark,
a.btn.btn-pdf:hover .btn-pdf__mark {
  background: #fff;
  color: var(--pdf-red);
}

.btn.btn-pdf:hover .btn-pdf__mark::before,
a.btn.btn-pdf:hover .btn-pdf__mark::before {
  border-color: transparent var(--pdf-red) transparent transparent;
}

.btn.btn-pdf:focus-visible,
a.btn.btn-pdf:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.28);
}

.btn-pdf__mark,
.btn-xlsx__mark {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.85rem;
  height: 1.2rem;
  padding: 0 0.22rem;
  border-radius: 0.15rem;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: none;
}

.btn-pdf__mark {
  background: var(--pdf-red);
}

.btn-pdf__mark::before,
.btn-xlsx__mark::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 0.32rem 0.32rem 0;
  border-color: transparent rgba(255, 255, 255, 0.55) transparent transparent;
}

.btn-pdf__label,
.btn-xlsx__label {
  color: inherit;
}

.btn-pdf.is-loading {
  pointer-events: none;
  opacity: 0.72;
  filter: none;
}

.btn-pdf.is-loading .btn-pdf__label::after {
  content: "…";
}

.btn-pdf.is-loading .btn-pdf__mark {
  animation: pdf-pulse 0.9s ease-in-out infinite;
}

@keyframes pdf-pulse {
  50% { opacity: 0.45; }
}

.btn.btn-xlsx,
a.btn.btn-xlsx {
  --xlsx-green: #217346;
  --xlsx-green-deep: #185c37;
  gap: 0.5rem;
  color: var(--xlsx-green);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--xlsx-green) 14%, var(--panel)),
      color-mix(in srgb, var(--xlsx-green) 8%, var(--panel))
    );
  border: 1px solid color-mix(in srgb, var(--xlsx-green) 48%, var(--line-strong));
  box-shadow:
    0 6px 14px color-mix(in srgb, var(--xlsx-green) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
  font-weight: 700;
  letter-spacing: 0.01em;
}

@supports not (background: color-mix(in srgb, green 10%, white)) {
  .btn.btn-xlsx,
  a.btn.btn-xlsx {
    background: rgba(33, 115, 70, 0.12);
    border-color: rgba(33, 115, 70, 0.45);
  }
}

.btn.btn-xlsx:hover,
a.btn.btn-xlsx:hover {
  color: #fff;
  background: linear-gradient(180deg, #2d8f58, var(--xlsx-green-deep));
  border-color: var(--xlsx-green-deep);
  transform: var(--lift);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--xlsx-green) 28%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.btn.btn-xlsx:hover .btn-xlsx__mark,
a.btn.btn-xlsx:hover .btn-xlsx__mark {
  background: #fff;
  color: var(--xlsx-green);
  box-shadow: none;
}

.btn.btn-xlsx:hover .btn-xlsx__mark::before,
a.btn.btn-xlsx:hover .btn-xlsx__mark::before {
  border-color: transparent var(--xlsx-green) transparent transparent;
}

.btn.btn-xlsx:focus-visible,
a.btn.btn-xlsx:focus-visible {
  outline: 0;
  color: var(--xlsx-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--xlsx-green) 28%, transparent);
}

.btn-xlsx__mark {
  min-width: 2.05rem;
  height: 1.25rem;
  background: linear-gradient(180deg, #2d8f58, var(--xlsx-green-deep));
  font-size: 0.52rem;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}


.kpi {
  min-width: 92px;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
}

.kpi__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cream);
  line-height: 1;
}

.kpi__label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0.9rem;
}

.summary-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 1rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.summary-card__top {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
  min-width: 0;
}

.summary-card__ring {
  --fill-deg: 0deg;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, var(--panel) 58%, transparent 59%),
    conic-gradient(var(--magenta) 0 var(--fill-deg), color-mix(in srgb, var(--line) 80%, transparent) var(--fill-deg) 360deg);
  box-shadow: inset 0 0 0 1px var(--line);
}

.summary-card__ring span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--cream);
}

.summary-card__intro {
  min-width: 0;
  flex: 1 1 auto;
}

.summary-card__intro h3 {
  margin: 0.35rem 0 0.25rem;
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--cream);
  overflow-wrap: break-word;
  word-break: normal;
}

.summary-card__intro .muted {
  margin: 0;
  font-size: 0.85rem;
}

.bars {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  max-width: 100%;
}

.bar-row {
  min-width: 0;
  max-width: 100%;
}

.bar-row__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.28rem;
  font-size: 0.82rem;
  min-width: 0;
}

.bar-row__label {
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.bar-row__value {
  color: var(--muted);
  flex: 0 0 auto;
  max-width: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bar-track {
  width: 100%;
  max-width: 100%;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
  box-sizing: border-box;
}

.bar-fill {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  box-sizing: border-box;
  transition: width 0.35s ease;
}

.summary-empty {
  margin: 0;
  font-size: 0.9rem;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
}

.filter-bar__label {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.88rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  color: var(--text-soft);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  min-height: var(--touch-min);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

.filter-chip:hover {
  background: var(--fill);
  border-color: var(--line-strong);
  color: var(--cream);
}

.filter-chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.filter-chip.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--magenta), var(--violet));
  box-shadow: 0 8px 20px rgba(255, 61, 154, 0.2);
}

.account-panel {
  margin-bottom: 1rem;
}

.account-form {
  max-width: 520px;
}

.account-create {
  margin: 1rem 0 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.account-users {
  margin-top: 0.5rem;
}

/* Role select in members table must not be clipped by .table-wrap overflow. */
.app-page:has(#members .c-select.is-open) {
  overflow-x: clip;
  overflow-y: visible;
}

#members:has(.c-select.is-open),
#members:has(.c-select.is-open) .table-wrap,
#members:has(.c-select.is-open) .data-table-wrap {
  overflow: visible;
}

#members .ws-role-form .c-select.is-open {
  z-index: var(--z-control-open);
}

#members .ws-role-form,
#members .ws-role-form .c-select {
  min-width: 0;
}

@media (min-width: 901px) {
  #members .ws-role-form,
  #members .ws-role-form .c-select {
    max-width: 11.5rem;
  }
}

#members .ws-role-form .c-select__btn {
  min-height: var(--control-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.86rem;
  border-radius: 12px;
  box-shadow: none;
}

/* Menu must size to the longest option — trigger stays compact. */
#members .ws-role-form .c-select__menu {
  width: max-content;
  min-width: 100%;
  max-width: min(22rem, calc(100vw - 1.5rem));
  overflow-x: visible;
}

#members .ws-role-form .c-select__option {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

#members td.row-actions {
  overflow: visible;
}

#members td.row-actions .btn {
  position: relative;
  z-index: 1;
}

/* Near the bottom of the panel, open the menu upward. */
#members tbody tr:nth-last-child(-n + 2) .ws-role-form .c-select__menu {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.account-last-seen.is-empty {
  color: var(--muted);
}

/* Super-admin user card: opened from the registry row, reuses the shared modal shell. */
.modal--wide {
  width: min(44rem, calc(100vw - 2rem));
}

.modal--wide .modal__body {
  max-height: 70vh;
  overflow-y: auto;
}

.identity-link {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.identity-link:hover .identity__name,
.identity-link:focus-visible .identity__name {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.user-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.user-card__id {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.user-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-5);
  margin: 0;
}

.user-card__item {
  min-width: 0;
}

.user-card__label {
  margin: 0 0 0.2rem;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

.user-card__value {
  margin: 0;
  color: var(--heading);
  font-weight: 550;
  overflow-wrap: anywhere;
}

.user-card__note {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}

.user-card__section {
  display: grid;
  gap: var(--space-3);
}

.user-card__heading {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--heading);
}

.user-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.user-card__stat {
  display: grid;
  gap: 0.1rem;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.user-card__stat-value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

.user-card__stat-label {
  font-size: var(--text-xs);
  color: var(--muted);
}

.user-card__memberships,
.user-card__events {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-card__membership {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.user-card__membership:last-child,
.user-card__event:last-child {
  border-bottom: 0;
}

.user-card__membership-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-card__event {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}

.user-card__event-text,
.user-card__event-meta {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.user-card__event-meta {
  justify-items: end;
  text-align: right;
}

.user-card__event-type {
  font-weight: 550;
  color: var(--heading);
}

.user-card__event-detail {
  font-size: var(--text-xs);
  color: var(--muted);
}

.user-card__empty {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 560px) {
  .user-card__grid,
  .user-card__stats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.account-subhead {
  margin: 1.5rem 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--heading);
}

.page-head--account,
.page-head--workspaces {
  align-items: flex-end;
}

.page-head__aside {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* Account page layout. Renamed from .settings-grid, which collided with the
   form editor's settings tiles and silently overrode them. */
.account-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 900px) {
  .account-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .account-grid .account-panel {
    margin-bottom: 0;
    height: 100%;
  }
}

.ws-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin: -0.35rem 0 1.15rem;
}

.ws-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted) !important;
  text-decoration: none !important;
  background-image: none !important;
  font-size: 0.86rem;
  font-weight: 650;
  min-height: var(--touch-min);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.ws-jump a:hover,
.ws-jump a:focus-visible {
  color: var(--cream) !important;
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-color: var(--line-strong);
  background: var(--fill-hover);
}

.ws-section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.85rem;
}

.ws-section-head h2 {
  margin: 0 0 0.25rem;
}

.ws-section-head .muted {
  margin: 0;
  max-width: 40rem;
  line-height: 1.45;
}

.ws-list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.ws-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ws-list__item.is-current {
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line));
  background: color-mix(in srgb, var(--magenta) 8%, var(--fill-soft));
}

.ws-list__main {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.ws-list__name {
  font-size: 1rem;
  color: var(--heading);
}

.ws-list__meta {
  font-size: 0.82rem;
}

.ws-list__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ws-list__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--magenta) 80%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--magenta) 30%, var(--line));
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
}

.ws-create {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.ws-invite-created {
  margin-top: 1rem;
}

.ws-invite-created__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0;
  min-width: 0;
}

.ws-invite-created__link {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ws-invite-created__link code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ws-invite-created__row .btn {
  flex: 0 0 auto;
}

#invites .c-select__menu {
  width: max-content;
  min-width: max(100%, 14rem);
  max-width: min(28rem, calc(100vw - 1.5rem));
  overflow-x: visible;
}

#invites .c-select__option {
  white-space: normal;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.ws-role-form {
  margin: 0;
}

.ws-role-select {
  max-width: 14rem;
  min-height: var(--control-sm);
  padding: 0.35rem 2.2rem 0.35rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  /* background-color only: the shorthand would drop the global select arrow image. */
  background-color: var(--fill);
  background-position: right 0.65rem center;
  color: var(--cream);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
}

.stack-gap {
  margin-top: 1rem;
}

.account-workspace-block {
  margin-top: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill-soft);
  overflow: hidden;
}

.account-workspace-block:first-of-type {
  margin-top: 0.85rem;
}

.account-workspace-block__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.account-workspace-block__summary::-webkit-details-marker {
  display: none;
}

.account-workspace-block__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: auto;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  align-self: center;
}

.account-workspace-block[open] > .account-workspace-block__summary::after {
  transform: rotate(225deg);
  margin-top: 0.2rem;
}

.account-workspace-block__summary:hover {
  background: color-mix(in srgb, var(--cream) 4%, transparent);
}

.account-workspace-block__summary:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--focus-ring);
}

.account-workspace-block__name {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--heading);
}

.account-workspace-block__meta {
  font-size: 0.88rem;
}

.account-workspace-block__body,
.account-workspace-block__empty {
  margin: 0;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--line);
}

.account-workspace-block__empty {
  padding-top: 0.85rem;
}

.account-workspace-block__body {
  padding: 0.75rem 0.75rem 0.85rem;
  overflow: hidden;
  margin-top: 0;
}

.account-workspace-block__body .data-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
}

.account-workspace-block__body .data-table thead th {
  border-bottom: 1px solid var(--line);
}

.account-workspace-block__body .data-table thead th:first-child {
  border-top-left-radius: 12px;
}

.account-workspace-block__body .data-table thead th:last-child {
  border-top-right-radius: 12px;
}

.account-workspace-block__body .data-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.account-workspace-block__body .data-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

.account-workspace-block__body .data-table tbody tr:last-child td {
  border-bottom: 0;
}

.access-panel {
  margin-bottom: 1rem;
}

.editors-list__title {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
}

.editors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.editor-chip {
  align-items: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-soft);
}

.editor-chip input[type="checkbox"] {
  margin-top: 0;
}

.access-tag {
  color: var(--magenta);
  font-weight: 700;
}

/* ---------- Responses toolbar ---------- */

.responses-tools {
  display: grid;
  gap: 0.85rem;
  padding: 0.95rem 1.05rem;
  margin-bottom: 1rem;
}

.responses-tools__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.45rem;
  align-items: stretch;
}

.responses-tools__actions .btn {
  width: 100%;
  justify-content: center;
  white-space: normal;
  line-height: 1.25;
}

.responses-tools__danger {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.responses-tools__danger .btn {
  width: auto;
  height: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


.responses-tools__share {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.public-results-head {
  margin-bottom: 1rem;
  padding: 1.25rem 1.35rem;
}

.public-results-head h1 {
  margin: 0.45rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.public-shell:has(.public-results-body) {
  width: min(1100px, calc(100% - 2rem));
}

.public-body:has(.public-results-body) .public-top-inner {
  width: min(1100px, 100%);
}

.answer-list {
  display: none;
}

/* ---------- Public form ---------- */

.public-shell {
  width: min(680px, calc(100% - 2rem));
  max-width: 100%;
  margin: 0 auto;
  padding: max(2.25rem, env(safe-area-inset-top)) 0 5.5rem;
  min-width: 0;
  box-sizing: border-box;
}

.public-top-inner {
  width: min(680px, 100%);
  max-width: 100%;
  flex-wrap: wrap;
}

.brand--public {
  align-items: center;
  gap: 0.7rem;
  max-width: 100%;
}

.brand--public .brand__name {
  background-image: none;
  color: var(--text);
}

.brand__logo {
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(122, 77, 255, 0.28));
}

[data-theme="dark"] .brand__logo {
  mix-blend-mode: screen;
}

.brand__text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  flex-wrap: wrap;
}

.public-top-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 28ch;
  text-align: right;
}

.public-top-note a {
  color: var(--cream);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--magenta) 45%, transparent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.public-top-note a:hover {
  color: var(--magenta);
  border-bottom-color: var(--magenta);
}

.public-card {
  padding: 1.6rem;
}

.public-fill {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.public-fill__head {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.2rem 0.1rem 0;
}

.public-fill__head h1 {
  margin: 0;
}

.public-fill__head .form-desc {
  margin: 0;
}

.form-desc {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1.35rem;
}

.public-card > h1 + .public-form,
.public-fill > .public-form {
  margin-top: 0;
}

.rich-text {
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.link-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  vertical-align: baseline;
  max-width: 100%;
  margin: 0 0.12em;
  padding: 0.12rem 0.48rem 0.12rem 0.28rem;
  border: 1px solid color-mix(in srgb, var(--violet) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 10%, var(--fill-soft));
  box-shadow: none;
  color: var(--cream);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.link-chip:hover,
.link-chip:focus-visible {
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line));
  background: color-mix(in srgb, var(--magenta) 12%, var(--fill-soft));
  color: var(--cream);
  outline: none;
}

.link-chip__favicon {
  width: 0.85rem;
  height: 0.85rem;
  object-fit: contain;
  border-radius: 3px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.92);
}

.link-chip__label {
  letter-spacing: 0.01em;
}

.form-desc .rich-text,
.field-note__body .rich-text {
  color: inherit;
}

.field-note {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.15rem 0 0.35rem;
  min-width: 0;
}

.field-note__title {
  margin: 0;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.field-note__body {
  margin: 0;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.field--pd-consent {
  padding: 0.35rem 0;
}

.pd-consent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

.pd-consent__choice {
  flex: 1 1 14rem;
  margin: 0;
}

.pd-consent__text {
  overflow-wrap: anywhere;
}

.pd-consent__more {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  color: var(--link);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.pd-consent__more:hover,
.pd-consent__more:focus-visible {
  color: var(--magenta);
  outline: none;
}

.pd-consent-dialog {
  border: 0;
  padding: 0;
  max-width: min(32rem, calc(100vw - 1.5rem));
  background: transparent;
  color: inherit;
}

.pd-consent-dialog::backdrop {
  background: rgba(5, 5, 8, 0.62);
  backdrop-filter: blur(6px);
}

.pd-consent-dialog__card {
  display: grid;
  gap: 0.9rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.pd-consent-dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--heading);
}

.pd-consent-dialog__body {
  display: grid;
  gap: 0.7rem;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.pd-consent-dialog__body > p {
  margin: 0;
}

.pd-consent-dialog__lead {
  font-weight: 700;
  color: var(--cream);
}

.pd-consent-dialog__list {
  margin: 0;
  padding: 0.55rem 0.75rem;
  list-style: none;
  display: grid;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-soft);
}

.pd-consent-dialog__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.pd-consent-dialog__list strong {
  color: var(--cream);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pd-consent-dialog__type {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.pd-consent-dialog__extra {
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--line));
  color: var(--cream);
}

.pd-consent-dialog__footnote {
  font-size: 0.82rem;
  color: var(--muted);
}

.pd-consent-dialog__actions {
  display: flex;
  justify-content: flex-end;
}

.pd-consent-dialog__actions .btn {
  min-width: 7.5rem;
}

.public-form {
  gap: 0.85rem;
}

.public-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Separate each question so the fill page does not read as one continuous block. */
.public-form > .field:not(.captcha-field),
.public-section > .field:not(.captcha-field) {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream) 4%, transparent), transparent 42%),
    var(--fill-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cream) 8%, transparent);
  overflow: visible;
}

/* Note blocks are plain text: no card surface, border, shadow or accent tint. */
.public-form > .field-note,
.public-section > .field-note {
  gap: 0.45rem;
  padding: 0.15rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.public-form > .field--pd-consent,
.public-section > .field--pd-consent {
  padding: 0.95rem 1.1rem;
}

.public-form .field__title {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--cream);
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
}

.public-form > .field > .help,
.public-section > .field > .help {
  margin-bottom: 0.65rem;
}

.req { color: var(--magenta); }
.help { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }
.field-error { color: var(--danger); font-size: 0.88rem; margin: 0.35rem 0 0; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}

.choice-list { display: grid; gap: 0.45rem; }

.unique-choice {
  display: grid;
  gap: 0.85rem;
}

.unique-choice__rule {
  margin: 0;
}

.unique-choice__list {
  display: grid;
  gap: 0.75rem;
}

.unique-choice__item {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.unique-choice__item > span {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Ranking question (public /f + React preview): variants are reordered by
   priority — drag, ↑/↓ buttons or arrow keys. The DOM order IS the answer, so
   position 1 is the topmost row. */
.ranking-field {
  display: grid;
  gap: 0.75rem;
}

.ranking-field__hint {
  margin: 0;
  font-size: 0.82rem;
}

.ranking-field__list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-field__item {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  user-select: none;
}

.ranking-field__item:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.ranking-field__item.is-dragging {
  opacity: 0.7;
  border-color: var(--violet);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  pointer-events: none;
}

.ranking-field__handle {
  width: 1.1rem;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  text-align: center;
  line-height: 1;
}

.ranking-field__handle::before {
  content: "⠿";
  font-size: 1.05rem;
}

.ranking-field__pos {
  display: inline-grid;
  place-items: center;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--violet) 12%, var(--card));
  color: var(--violet);
  font-size: 0.85rem;
  font-weight: 600;
}

.ranking-field__label {
  min-width: 0;
  font-weight: 600;
}

.ranking-field__control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ranking-field__btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.ranking-field__btn:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.ranking-field__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ranking-field__commit {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.ranking-field__commit:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.ranking-field__commit[hidden] {
  display: none;
}

.ranking-summary {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.ranking-summary__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.ranking-summary__label {
  font-weight: 600;
}

.ranking-summary__value {
  color: var(--muted);
  white-space: nowrap;
}

.matrix-summary {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.matrix-summary__label {
  margin: 0 0 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.matrix-summary__row {
  display: grid;
  gap: 0.35rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.matrix-summary__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (max-width: 560px) {
  .ranking-field__item {
    grid-template-columns: auto auto minmax(0, 1fr);
    row-gap: 0.4rem;
  }

  .ranking-field__control {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 1.7rem;
  }
}

/* Matrix question (public /f + React preview): one radio per row/column cell. */
.matrix-field {
  overflow-x: auto;
}

.matrix-field__table {
  width: 100%;
  border-collapse: collapse;
}

.matrix-field__corner {
  border: 0;
  background: transparent;
}

.matrix-field__colhead,
.matrix-field__rowhead {
  padding: 0.5rem 0.6rem;
  font-weight: 600;
  font-size: 0.92rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.matrix-field__rowhead {
  text-align: left;
}

.matrix-field__cell {
  padding: 0.35rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.matrix-field__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  cursor: pointer;
}

.matrix-field__option input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--violet);
}

.matrix-field__option:focus-within {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (max-width: 560px) {
  .matrix-field {
    overflow-x: visible;
  }

  .matrix-field__table,
  .matrix-field__table tbody,
  .matrix-field__row,
  .matrix-field__cell {
    display: block;
    width: 100%;
  }

  .matrix-field__table thead,
  .matrix-field__corner {
    display: none;
  }

  .matrix-field__row {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
  }

  .matrix-field__rowhead {
    padding: 0 0 0.4rem;
    border-bottom: 0;
  }

  .matrix-field__cell {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 0;
  }

  .matrix-field__option {
    justify-content: flex-start;
    gap: 0.5rem;
  }

  /* Un-clip the per-cell column label, which replaces the hidden header row. */
  .matrix-field__col-label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    font-size: 0.92rem;
  }
}

.unique-items-field {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.7rem 0.8rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--violet) 6%, var(--fill-soft));
}

/* Matrix editor: two keyed label lists (rows, then columns). */
.matrix-options {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}

.matrix-options__hint {
  margin: 0;
}

.matrix-options__group {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.7rem 0.8rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--violet) 6%, var(--fill-soft));
}

.unique-items-field__head {
  display: grid;
  gap: 0.25rem;
}

.unique-items-field__title {
  color: var(--cream);
  font-weight: 700;
  font-size: 0.84rem;
}

.unique-items-field__hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.unique-items-list {
  display: grid;
  gap: 0.5rem;
}

.unique-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.unique-item-row input[type="text"] {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.unique-item-row__remove {
  justify-self: end;
  white-space: nowrap;
}

.unique-items-field__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding-top: 0.15rem;
}

.unique-items-field__actions .btn {
  min-height: 2.4rem;
}

@media (max-width: 560px) {
  .unique-item-row {
    grid-template-columns: 1fr;
  }

  .unique-item-row__remove {
    justify-self: stretch;
    width: 100%;
  }

  .unique-items-field__actions .btn {
    width: 100%;
  }
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill-soft);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.choice input[type="checkbox"],
.choice input[type="radio"] {
  margin-top: 0.18rem;
}

.choice span,
.choice label,
.choice > *:not(input) {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.4;
  color: var(--text-soft);
  padding-top: 0.05rem;
}

.choice:hover {
  background: var(--fill);
  border-color: var(--line-strong);
}

.choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--magenta) 40%, var(--line));
  background: color-mix(in srgb, var(--magenta) 10%, var(--fill-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 12%, transparent);
}

.choice:has(input:focus-visible) {
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.public-form .captcha-field {
  background: color-mix(in srgb, var(--violet) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--violet) 28%, var(--line));
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
}

.captcha-title {
  margin: 0 0 0.45rem;
  font-weight: 700;
  color: var(--cream);
}

.public-form .captcha-field .help {
  margin: 0 0 0.65rem;
}

.success-card {
  text-align: center;
  padding: 2.75rem 1.5rem;
}

.public-foot {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  position: relative;
  z-index: 1;
}

/* Plain logo + text: no glass pill behind the credit (stub pages already
   render it flat via shell.css). */
.public-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  text-decoration: none;
  color: var(--cream);
  opacity: 0.72;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

.public-credit:hover {
  color: var(--cream);
  opacity: 1;
}

.public-credit__logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(122, 77, 255, 0.28));
}

[data-theme="dark"] .public-credit__logo {
  mix-blend-mode: screen;
}

.public-credit__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.public-credit__text strong {
  font-weight: 800;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: var(--fill);
  color: var(--magenta);
  overflow-wrap: anywhere; /* длинные токены/URL без раздувания блока */
  word-break: break-all;
}

/* ---------- Theme FAB + scroll top ---------- */

.fab-dock {
  --fab-size: 3.625rem;
  --fab-right: max(18px, env(safe-area-inset-right));
  --fab-bottom: max(18px, env(safe-area-inset-bottom));
  position: fixed;
  right: var(--fab-right);
  bottom: var(--fab-bottom);
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
}

.theme-fab,
.scroll-top-fab {
  width: var(--fab-size);
  height: var(--fab-size);
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  color: var(--cream);
  background: var(--panel);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.theme-fab:hover,
.scroll-top-fab:hover {
  transform: translateY(-2px);
  background: var(--card-hover);
  border-color: var(--cream);
}

.theme-fab:focus-visible,
.scroll-top-fab:focus-visible {
  outline: 0;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.theme-fab svg,
.scroll-top-fab svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scroll-top-fab {
  display: none;
}

.theme-fab__moon { display: none; }

[data-theme="light"] .theme-fab__sun { display: none; }
[data-theme="light"] .theme-fab__moon { display: block; }

@media (max-width: 860px) {
  .fab-dock {
    --fab-size: 48px;
  }

  body:has(.app-tabbar) .fab-dock {
    --fab-bottom: calc(var(--app-tabbar-h, 3.5rem) + max(10px, env(safe-area-inset-bottom)));
  }
  .theme-fab,
  .scroll-top-fab { border-radius: 16px; }
  .theme-fab svg,
  .scroll-top-fab svg { width: 20px; height: 20px; }
}

@media (max-width: 720px) {
  .wrap,
  .public-shell,
  .public-shell:has(.public-results-body) {
    width: min(1100px, calc(100% - 1.5rem));
  }

  .public-shell {
    width: min(680px, calc(100% - 1.5rem));
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: 6rem;
  }

  .grid-2 { grid-template-columns: 1fr; }
  .check-row-pad { padding-top: 0; }

  .admin-top {
    position: static;
    padding-inline: 0.75rem;
  }

  .admin-top-inner,
  .public-top-inner {
    flex-direction: column;
    align-items: stretch;
    /* Stacked header: keep the single row centred inside min-height
       (space-between would pin it to the top). */
    justify-content: center;
    border-radius: 18px;
    padding: 0.85rem 1rem;
    gap: 0.65rem;
  }
  .brand {
    flex-wrap: nowrap;
  }

  .brand__mark,
  .brand__name {
    white-space: nowrap;
  }

  .scroll-top-fab {
    display: grid;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
  }

  .scroll-top-fab.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .scroll-top-fab.is-visible:hover {
    transform: translateY(-2px);
  }

  :root {
    --fab-size: 48px;
    --fab-right: max(12px, env(safe-area-inset-right));
    --fab-bottom: max(12px, env(safe-area-inset-bottom));
    --fab-dock-aside: calc(var(--fab-size) + var(--fab-right) + 0.55rem);
    --fab-clearance: 6.75rem;
  }

  body:has(.app-tabbar) {
    --fab-bottom: calc(var(--app-tabbar-h, 3.5rem) + max(10px, env(safe-area-inset-bottom)));
    --fab-clearance: calc(var(--app-tabbar-h, 3.5rem) + var(--fab-size) + 1.75rem);
  }

  .public-top-note {
    max-width: none;
    text-align: left;
  }

  .page-head {
    gap: 0.85rem;
    margin-bottom: 1.1rem;
  }

  .page-head--editor,
  .page-head--responses {
    gap: 0.9rem;
    width: 100%;
  }

  .page-head h1,
  .login-card h1,
  .public-card h1,
  .public-fill__head h1,
  .empty-state h2 {
    font-size: clamp(1.25rem, 6vw, 1.45rem);
  }

  .editor-meta__status {
    width: min(var(--editor-status-control-w), 100%);
  }

  .responses-meta {
    padding: 0.75rem;
  }

  .responses-meta__block {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .responses-meta__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .responses-meta__actions .btn {
    min-height: var(--touch-min);
    white-space: normal;
    line-height: 1.2;
    padding-inline: 0.55rem;
  }

  .head-actions {
    width: 100%;
  }

  .head-actions .btn {
    flex: 1 1 auto;
  }

  .panel,
  .public-card,
  .filter-bar,
  .public-results-head {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .login-card {
    margin-top: clamp(1rem, 6vh, 2rem);
    padding: 1.25rem;
    padding-bottom: max(1.25rem, calc(var(--fab-clearance, 5.5rem) * 0.15));
  }

  td.row-actions {
    white-space: normal;
  }

  div.row-actions {
    flex-wrap: wrap;
  }

  .row-actions__group {
    flex-wrap: wrap;
    white-space: normal;
    max-width: 100%;
    min-width: 0;
  }

  .date-field__panel {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    bottom: max(
      calc(var(--fab-size, 48px) * 2 + var(--fab-bottom, 12px) + 1.25rem),
      calc(env(safe-area-inset-bottom) + 5.5rem)
    );
    max-height: min(70vh, 420px);
    max-height: min(70dvh, 420px);
    overflow: auto;
    z-index: var(--z-popover);
  }

  .response-meta {
    padding: 0.85rem 1rem;
  }

  .response-meta__actions {
    margin-left: 0;
    width: 100%;
  }

  .answer-blocks {
    padding: 0.9rem 1rem 1rem;
  }

  .summary-head {
    gap: 0.75rem;
  }

  .kpi {
    flex: 1 1 auto;
    min-width: 0;
  }

  .responses-tools__actions .btn {
    width: 100%;
  }

  .responses-tools {
    padding: 0.85rem;
    gap: 0.75rem;
  }

  .responses-tools__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .responses-tools__actions .btn {
    white-space: normal;
    line-height: 1.2;
    padding-inline: 0.5rem;
  }

  .editors-grid {
    flex-direction: column;
  }

  .editor-chip {
    width: 100%;
  }

  .inline-create {
    flex-wrap: wrap;
  }

  .inline-create .btn {
    width: 100%;
  }

  .filter-bar {
    align-items: flex-start;
  }

  .filter-chips {
    width: 100%;
  }

  .question-card__body {
    padding: 0.7rem 0.75rem;
    gap: 0.6rem;
  }

  .forms-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .form-card {
    padding: 1rem;
  }

  .form-card__stats:has(.form-card__stat--wide) {
    grid-template-columns: 1fr 1fr;
  }

  .form-card__stat--wide {
    grid-column: 1 / -1;
  }

  .form-card__link {
    flex-direction: row;
    align-items: center;
  }

  .form-card__link .btn,
  .form-card__link [data-copy-url] {
    width: auto;
  }
}

@media (max-width: 480px) {
  .wrap,
  .public-shell,
  .public-shell:has(.public-results-body) {
    width: calc(100% - 1rem);
  }

  .admin-top {
    padding-inline: 0.5rem;
  }

  .admin-top-inner {
    padding: 0.75rem 0.85rem;
  }

  .brand__mark,
  .brand__name {
    font-size: 0.95rem;
  }

  .brand__logo {
    width: 38px;
    height: 38px;
  }

  .admin-main {
    padding-top: 1.15rem;
  }

  .btn {
    padding: 0.65rem 0.9rem;
  }

  .btn-sm {
    padding: 0.4rem 0.65rem;
  }

  .panel h2,
  .summary-head h2 {
    font-size: 1.05rem;
  }

  .public-card {
    padding: 1.15rem;
  }

  .public-form > .field:not(.captcha-field),
  .public-section > .field:not(.captcha-field) {
    padding: 0.9rem 0.95rem 1rem;
    border-radius: 14px;
  }

  .public-section {
    padding: 1rem 0.95rem 1.05rem;
    border-radius: 16px;
  }

  .public-form .captcha-field {
    padding: 1rem;
  }

  .success-card {
    padding: 2rem 1rem;
  }

  .public-credit__logo {
    width: 36px;
    height: 36px;
  }

  .public-credit__text {
    font-size: 0.75rem;
  }

  .fab-dock {
    --fab-size: 3rem;
    --fab-right: max(12px, env(safe-area-inset-right));
    --fab-bottom: max(12px, env(safe-area-inset-bottom));
  }

  body:has(.app-tabbar) .fab-dock {
    --fab-bottom: calc(var(--app-tabbar-h, 3.5rem) + max(10px, env(safe-area-inset-bottom)));
  }

  :root {
    --fab-size: 3rem;
    --fab-right: max(12px, env(safe-area-inset-right));
    --fab-bottom: max(12px, env(safe-area-inset-bottom));
    --fab-dock-aside: calc(var(--fab-size) + var(--fab-right) + 0.55rem);
  }

  .form-card__title {
    font-size: 1rem;
  }

  .date-field__panel {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    top: auto;
    bottom: max(
      calc(var(--fab-size, 3rem) * 2 + var(--fab-bottom, 12px) + 1.25rem),
      calc(env(safe-area-inset-bottom) + 5.5rem)
    );
    max-height: min(70vh, 420px);
    max-height: min(70dvh, 420px);
    overflow: auto;
    z-index: var(--z-popover);
  }

  .c-select__menu {
    max-height: min(240px, 40vh);
    max-height: min(240px, 40dvh);
    z-index: var(--z-popover);
  }

  .q-field--type .c-select__menu {
    max-height: none;
    overflow: visible;
  }
}

/* ---------- Cabinet dashboard shell ---------- */

@media (max-width: 899px) {
  .cab-dash,
  .cab-view,
  .forms-grid {
    min-width: 0;
    max-width: 100%;
  }

  .forms-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cab-dash {
  min-width: 0;
  max-width: 100%;
}

.cab-dash__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  min-width: 0;
  max-width: 100%;
}

.cab-dash__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
}

.cab-view-toggle {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  gap: 0.15rem;
}

.cab-view-toggle__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--control-sm);
  padding: 0.35rem 0.7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.cab-view-toggle__btn svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cab-view-toggle__btn.is-active {
  background: var(--fill-hover);
  color: var(--cream);
}

.cab-view-toggle__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cab-view[hidden] {
  display: none !important;
}

.cab-view {
  margin-bottom: 1rem;
}

.cab-view .cab-table,
.cab-view .forms-grid {
  margin-bottom: 0;
}

.cab-dash__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 600;
  color: var(--heading);
}

.cab-dash__sub {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
}

.cab-create {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: min(100%, 280px);
  flex: 1 1 220px;
  justify-content: flex-end;
}

.cab-create input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
  min-height: var(--control-sm);
  padding: 0.4rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--fill);
  color: var(--cream);
  font: inherit;
}

.cab-create .btn {
  min-height: var(--control-sm);
}

.cab-create input[type="text"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cab-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  min-width: 0;
  max-width: 100%;
}

@media (min-width: 720px) {
  .cab-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Stage 4A: the four headline numbers speak the panel language now — brand top
   hairline, glass lift, surface gradient — at one radius step below .cab-panel,
   so they belong to the same system without competing with it for weight. */
.cab-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Soft brand bloom in the corner. Purely decorative: it encodes no number, so it
   can never be read as an invented trend. Being a negative-z child of the
   isolated tile it paints above the tile's own background and below the text,
   and `overflow: hidden` clips it to the rounded corner. --glow-strength takes
   it to zero in .perf-lite, like every other halo. */
.cab-stat::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -68%;
  right: -26%;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--violet) 82%, transparent) 0%,
    transparent 70%
  );
  opacity: calc(0.28 * var(--glow-strength));
  pointer-events: none;
}

/* Micro-label: uppercase + tracking gives the number below it something to
   contrast against, which is what makes the tile read as a KPI, not a caption. */
.cab-stat small {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}

.cab-stat strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
}

.cab-stat__value {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.answers-new {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ok);
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  vertical-align: baseline;
}

.cab-answers .answers-new {
  font-weight: 700;
}

.form-card__stat-value-row .answers-new {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
}

/* Kept in step with .cab-stat strong so a live "+N" delta never renders at a
   different size than the number it is attached to. */
.cab-stat__value .answers-new {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
}

.answers-new[hidden] {
  display: none !important;
}

.cab-answers {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  min-width: 0;
}

.form-card__stat-value-row {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
  min-width: 0;
}

.cab-empty {
  margin: 0.5rem 0 0;
}

.cab-table {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: visible;
  margin-bottom: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  --cab-cols: minmax(0, 1fr) 9.5rem minmax(4.5rem, 6rem) 8.5rem;
}

.cab-table__head {
  border-top: 0;
  border-radius: 16px 16px 0 0;
  background: var(--fill-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cab-table__row {
  display: grid;
  grid-template-columns: var(--cab-cols);
  column-gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  position: relative;
}

.cab-table__row:last-child {
  border-radius: 0 0 16px 16px;
}

.cab-col--status,
.cab-col--count {
  justify-self: start;
  width: 100%;
}

.cab-col--count {
  text-align: left;
  font-variant-numeric: tabular-nums;
}

.cab-col--actions {
  justify-self: stretch;
}

.cab-table__form {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.cab-table__title {
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cab-table__title:hover {
  color: var(--link);
  text-decoration: none;
}

.cab-table__meta {
  font-size: 0.78rem;
}

.cab-table__link {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  max-width: 100%;
  min-width: 0;
}

.cab-table__link .form-public-link {
  flex: 0 1 auto;
  font-size: 0.78rem;
  min-width: 0;
  max-width: min(100%, 28rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-copy-sm,
.cab-table__link [data-copy-url],
.form-card__link [data-copy-url],
.ws-invite-created__row [data-copy-url],
.row-actions [data-copy-url] {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: var(--control-sm);
  min-width: var(--control-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
  border-radius: 10px;
  white-space: nowrap;
}

.cab-table__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cream) !important;
  text-decoration: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  filter: none !important;
}

a.cab-table__count:hover {
  background-image: var(--brand-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.cab-table__count.is-zero {
  color: var(--muted);
  font-weight: 600;
}

.cab-badge {
  display: inline-flex;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 650;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.cab-badge--ok {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: var(--ok-bg);
}

.cab-badge--draft {
  color: var(--muted);
}

.cab-table__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  min-width: 0;
}

.cab-table__delete {
  margin: 0;
  display: inline-flex;
}

.cab-bottom {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}

.cab-bottom > .cab-dynamics {
  grid-column: 1 / -1;
}

@media (min-width: 720px) {
  .cab-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cab-panel {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--line);
  /* Same layer stack as .surface (assets/css/system.css) but without
     backdrop-filter: these panels span the full content width, and the
     translucent gradient over the painted .scene already reads as glass
     without paying for a per-frame re-composite. */
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
  min-width: 0;
}

.cab-panel__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}

.cab-bottom > .cab-panel > .cab-panel__title {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.cab-dynamics {
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: 16rem;
}

.cab-dynamics__head {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: var(--z-control-open);
  flex-shrink: 0;
}

.cab-dynamics__head .cab-panel__title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
  min-width: 0;
}

.cab-dynamics__filters,
.cab-conversion__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.cab-dynamics__filters .cab-conversion__select .c-select__btn,
.cab-conversion__filters .cab-conversion__select .c-select__btn {
  height: var(--control-sm);
  min-height: var(--control-sm);
  box-sizing: border-box;
}

.cab-dynamics__filters .cab-period,
.cab-conversion__filters .cab-period {
  height: var(--control-sm);
  min-height: var(--control-sm);
  padding: 0.15rem;
  box-sizing: border-box;
  align-items: stretch;
  flex-wrap: nowrap;
}

/* Hug the buttons instead of stretching. The base `.cab-period` uses
   `flex: 1 1 auto`, so without this the leftover width of the filters row shows
   up as empty space inside the pill, to the right of the last option. The
   conversion panel used to rely on the base rule while its sibling control was
   pinned, which is what made the two rows look different. */
.cab-dynamics__filters .cab-period,
.cab-conversion__filters .cab-period {
  flex: 0 0 auto;
  width: auto;
}

.cab-dynamics__filters .cab-period__btn,
.cab-conversion__filters .cab-period__btn {
  min-height: 0;
  height: 100%;
  padding: 0 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cab-dynamics__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  transition: opacity 0.2s ease;
}

.cab-dynamics__body.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.app-page:has(.cab-dynamics .c-select.is-open) {
  overflow-x: clip;
  overflow-y: visible;
}

.cab-dynamics:has(.c-select.is-open) {
  overflow: visible;
  position: relative;
  z-index: var(--z-popover);
}

.cab-dynamics:has(.c-select.is-open) .cab-dynamics__head {
  z-index: var(--z-popover);
}

/* Chart columns sit under the open menu visually — block their hit-testing */
.cab-dynamics:has(.c-select.is-open) .cab-dynamics__body {
  pointer-events: none;
}

.cab-dynamics:has(.c-select.is-open) .c-select.is-open {
  z-index: var(--z-popover);
}

/* Pill-shaped segmented control: matches the rounded language of the panels and
   reads as one control instead of three separate buttons. */
.cab-period {
  display: inline-flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  max-width: 100%;
  min-width: 0;
  padding: 0.15rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--fill);
  gap: 0.1rem;
}

.cab-period__btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  min-height: var(--control-sm);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 1 auto;
  box-sizing: border-box;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.cab-period__btn:hover {
  color: var(--cream);
}

/* Same brand-tinted treatment as the active nav item and mobile tab, so the
   segmented control is visibly part of the same accent language. */
.cab-period__btn.is-active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--magenta) 20%, transparent),
    color-mix(in srgb, var(--violet) 14%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 22%, transparent);
  color: var(--cream);
}

.cab-period__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cab-dynamics__total {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.cab-dynamics__total strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--heading);
  margin-right: 0.25rem;
}

.cab-chart {
  display: grid;
  grid-template-rows: minmax(10rem, 1fr) auto;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  min-height: 12rem;
  overflow: visible;
}

.cab-chart__frame {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: visible;
}

.cab-chart__y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  min-height: 0;
  padding: 0.15rem 0;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  user-select: none;
  overflow: visible;
}

.cab-chart__y span {
  display: block;
  max-width: 100%;
  padding-right: 0.1rem;
  white-space: nowrap;
}

.cab-chart__body {
  position: relative;
  height: 100%;
  min-height: 0;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  overflow: visible;
}

.cab-chart__grid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0;
}

.cab-chart__grid span {
  display: block;
  width: 100%;
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}

.cab-chart__grid span:first-child {
  border-top: 0;
}

.cab-chart__bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.12rem;
  padding: 0 0.15rem;
  min-width: 0;
  overflow: visible;
  z-index: 0;
}

.cab-chart[data-period="1d"] .cab-chart__bars {
  gap: 0.05rem;
  padding: 0 0.05rem;
}

.cab-chart[data-period="7d"] .cab-chart__x span:not(.is-blank) {
  font-size: 0.68rem;
  font-weight: 650;
}

.cab-chart[data-period="30d"] .cab-chart__bars {
  gap: 0.08rem;
}

.cab-chart[data-period="30d"] .cab-chart__bar {
  max-width: none;
  border-radius: 3px 3px 1px 1px;
}

.cab-chart__col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.cab-chart__peak {
  position: relative;
  width: 100%;
  height: var(--h, 4%);
  min-height: 2px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-height: 100%;
}

.cab-chart__bar {
  width: 100%;
  max-width: 1rem;
  height: 100%;
  min-height: 2px;
  border-radius: 5px 5px 1px 1px;
  background: color-mix(in srgb, var(--violet) 55%, var(--cyan) 45%);
  opacity: 0.78;
  transition: opacity 0.15s ease, filter 0.15s ease;
}

.cab-chart[data-period="1d"] .cab-chart__bar {
  max-width: none;
  border-radius: 3px 3px 1px 1px;
}

.cab-chart__col.is-empty .cab-chart__bar {
  opacity: 0.28;
  background: var(--fill-hover);
}

.cab-chart__col:hover .cab-chart__bar,
.cab-chart__col:focus-within .cab-chart__bar {
  opacity: 1;
  filter: brightness(1.08);
}

.cab-chart__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.35rem);
  transform: translateX(-50%);
  z-index: 6;
  padding: 0.28rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--shadow-sm);
  color: var(--cream);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.cab-chart__col:hover .cab-chart__tip,
.cab-chart__col:focus-within .cab-chart__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-1px);
}

.cab-chart__col:first-child .cab-chart__tip {
  left: 0;
  transform: none;
}

.cab-chart__col:first-child:hover .cab-chart__tip,
.cab-chart__col:first-child:focus-within .cab-chart__tip {
  transform: translateY(-1px);
}

.cab-chart__col:last-child .cab-chart__tip {
  left: auto;
  right: 0;
  transform: none;
}

.cab-chart__col:last-child:hover .cab-chart__tip,
.cab-chart__col:last-child:focus-within .cab-chart__tip {
  transform: translateY(-1px);
}

.cab-chart__x {
  display: flex;
  gap: 0.12rem;
  padding-left: calc(2.6rem + 0.4rem);
  padding-right: 0.15rem;
  min-width: 0;
  max-width: 100%;
  min-height: 1.35rem;
  align-items: start;
  overflow: visible;
}

.cab-chart[data-period="1d"] .cab-chart__x {
  gap: 0.05rem;
  padding-right: 0.05rem;
}

.cab-chart__x span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  overflow: visible;
}

.cab-chart[data-period="1d"] .cab-chart__x span:not(.is-blank),
.cab-chart[data-period="30d"] .cab-chart__x span:not(.is-blank) {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums;
  overflow: visible;
}

.cab-chart__x span:not(.is-blank):first-child {
  text-align: left;
}

.cab-chart__x span:not(.is-blank):last-child {
  text-align: right;
}

.cab-chart__x span.is-blank {
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
}

/* ---- Overview-only chart polish (stage 4A) ----
   .cab-chart* is a shared primitive: the responses page renders the same classes
   in ResponsesTimelineChart. Everything below is therefore scoped to the
   dynamics panel so the timeline chart keeps its current look. */

/* Solid instead of dashed: the dashed hairlines read as a busy texture behind a
   sparse series, while a faint solid line still gives the eye a baseline. */
.cab-dynamics .cab-chart__grid span {
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}

.cab-dynamics .cab-chart__body {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
}

/* Brand gradient + a lit top edge: the bars now carry the violet→cyan pair the
   accent system uses elsewhere, and the highlight keeps them from looking flat. */
.cab-dynamics .cab-chart__bar {
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cyan) 52%, var(--violet)) 0%,
    var(--violet) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
  opacity: 0.9;
}

/* A little more presence for zero-count columns so an empty day reads as "zero",
   not as a rendering gap. Tinted with the brand hue rather than a neutral fill so
   the baseline still belongs to the chart. */
.cab-dynamics .cab-chart__col.is-empty .cab-chart__bar {
  background: color-mix(in srgb, var(--violet) 20%, transparent);
  opacity: 0.38;
  border-radius: var(--radius-full);
}

/* The period-specific radius rules for 1d/30d win on specificity (three simple
   selectors vs two), so restate the rounder top here for the dynamics panel. */
.cab-dynamics .cab-chart[data-period="1d"] .cab-chart__bar,
.cab-dynamics .cab-chart[data-period="30d"] .cab-chart__bar {
  border-radius: 6px 6px 2px 2px;
}

/* The hover lift gains a cyan halo, scaled by --glow-strength so .perf-lite
   drops it together with the rest of the neon. */
.cab-dynamics .cab-chart__col:hover .cab-chart__bar,
.cab-dynamics .cab-chart__col:focus-within .cab-chart__bar {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 0 calc(14px * var(--glow-strength)) color-mix(in srgb, var(--cyan) 30%, transparent);
}

.cab-recent-panel {
  min-width: 0;
}

.cab-recent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

.cab-recent__card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  /* A resting tint rather than a transparent row: the entries are links to the
     responses page, so giving each one a surface makes the click target visible
     before hover instead of only on hover. */
  background: color-mix(in srgb, var(--fill-soft) 70%, transparent);
  text-decoration: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  color: inherit !important;
  filter: none !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cab-recent__card:hover {
  border-color: color-mix(in srgb, var(--magenta) 28%, transparent);
  background: color-mix(in srgb, var(--magenta) 10%, var(--fill-hover));
  box-shadow: 0 0 calc(14px * var(--glow-strength)) color-mix(in srgb, var(--violet) 14%, transparent);
  color: inherit !important;
  background-image: none !important;
}

.cab-recent__body {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.cab-recent__title {
  display: block;
  font-size: var(--text-md);
  font-weight: 650;
  line-height: var(--leading-snug);
  color: var(--heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cab-recent__preview {
  font-size: var(--text-sm);
  line-height: 1.3;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Timestamp as a quiet chip: it stops competing with the title for the
   horizontal reading line while still being scannable down the right edge. */
.cab-recent time {
  flex-shrink: 0;
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background: var(--fill);
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cab-conversion {
  min-width: 0;
}

.cab-conversion__head {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.cab-conversion__head .cab-panel__title {
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.cab-conversion__select {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 100%;
}

.cab-conversion__select .c-select {
  width: 100%;
  max-width: 100%;
}

.cab-conversion__select .c-select__btn {
  min-height: var(--control-sm);
  padding: 0.3rem 0.55rem 0.3rem 0.8rem;
  gap: 0.4rem;
  /* Pill, to line up with the .cab-period segmented control beside it. */
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 650;
  box-shadow: none;
  background: var(--fill);
}

.cab-conversion__select .c-select__btn:hover {
  background: var(--fill-hover);
  box-shadow: none;
}

.cab-conversion__select .c-select.is-open .c-select__btn,
.cab-conversion__select .c-select__btn:focus-visible {
  box-shadow: 0 0 0 3px var(--field-ring);
}

.cab-conversion__select .c-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(8.5rem, 100%);
}

.cab-conversion__select .c-select__chevron {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto;
}

.cab-conversion__select .c-select__menu {
  left: 0;
  right: auto;
  width: 15rem;
  min-width: 100%;
  max-width: min(15rem, calc(100% - 2rem));
  padding: 0.3rem;
  border-radius: var(--radius-lg);
  overflow-x: hidden;
  overflow-y: auto;
}

.cab-conversion__select .c-select__option {
  font-size: 0.82rem;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-xs);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.25;
}

/* Чтобы меню не обрезалось панелью дашборда (без горизонтального расползания) */
.app-page:has(.cab-conversion .c-select.is-open) {
  overflow-x: clip;
  overflow-y: visible;
}

.cab-conversion:has(.c-select.is-open) {
  overflow: visible;
  position: relative;
  z-index: var(--z-popover);
}

.cab-conversion__select select {
  min-height: 2rem;
  width: 100%;
  max-width: 100%;
  padding: 0.25rem 1.9rem 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  /* background-color only: the shorthand would drop the global select arrow image. */
  background-color: var(--fill);
  background-position: right 0.55rem center;
  background-size: 0.85rem;
  color: var(--cream);
  font: inherit;
  font-size: 0.78rem;
}

.cab-conversion__select select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cab-conversion__body.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.cab-conversion__main {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.95rem;
}

.cab-conversion__ring {
  --pct: 0;
  --ring-size: 5.6rem;
  position: relative;
  flex: 0 0 auto;
  width: var(--ring-size);
  height: var(--ring-size);
  display: grid;
  place-items: center;
}

.cab-conversion__ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cab-conversion__ring-track,
.cab-conversion__ring-value {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.cab-conversion__ring-track {
  stroke: color-mix(in srgb, var(--fill-hover) 88%, var(--line));
}

.cab-conversion__ring-value {
  stroke: var(--violet);
  stroke-dasharray: calc(var(--pct) * 1) 100;
  stroke-dashoffset: 0;
  transition: stroke-dasharray 0.35s ease;
  /* Soft halo on the filled arc only — the track stays matte so the reading is
     the lit portion, not the whole circle. Scaled by --glow-strength. */
  filter: drop-shadow(
    0 0 calc(5px * var(--glow-strength)) color-mix(in srgb, var(--violet) 55%, transparent)
  );
}

@supports (stroke: color-mix(in srgb, red, blue)) {
  .cab-conversion__ring-value {
    stroke: color-mix(in srgb, var(--cyan) 62%, var(--violet));
  }
}

.cab-conversion__ring strong {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 650;
  color: var(--heading);
  line-height: 1;
  letter-spacing: -0.04em;
  /* Wide enough for a three-digit "100%" at this size. */
  max-width: 76%;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cab-conversion__lead {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--cream);
  text-transform: lowercase;
}

.cab-conversion__meta {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.cab-funnel-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

/* Anchor for the track below. Each step's bar is its last child and has no
   bottom margin, so `bottom: 0` on the pseudo lines the track up with the bar
   exactly — the bar then draws the filled part on top of it. */
.cab-funnel-steps li {
  position: relative;
}

.cab-funnel-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.55rem;
  border-radius: var(--radius-full);
  background: var(--fill);
  pointer-events: none;
}

.cab-funnel-steps__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.cab-funnel-steps__top b {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.cab-funnel-steps__top em {
  font-style: normal;
  color: color-mix(in srgb, var(--cyan) 78%, var(--cream));
  margin-left: 0.25rem;
  font-weight: 700;
}

/* Sits above the ::before track, which is what turns a bare floating pill into a
   readable "part of a whole" bar. */
.cab-funnel-steps__bar {
  position: relative;
  z-index: 1;
  height: 0.55rem;
  width: var(--w, 100%);
  max-width: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--violet) 55%, transparent),
    color-mix(in srgb, var(--violet) 30%, transparent)
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent);
}

.cab-funnel-steps__bar--b {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cyan) 62%, transparent),
    color-mix(in srgb, var(--cyan) 32%, transparent)
  );
}

.cab-funnel-steps__bar--c {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--magenta) 55%, transparent),
    color-mix(in srgb, var(--magenta) 28%, transparent)
  );
}

.cab-conversion__hint {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
}

/* Shared placeholder for a panel with no data and for PanelError. Scoped to
   .cab-panel so the same class used by FormsProblem on the forms page keeps its
   current unstyled treatment. */
.cab-panel .cab-conversion__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--fill-soft) 60%, transparent);
}

.cab-panel .cab-conversion__empty .muted {
  margin: 0;
  max-width: 28rem;
  line-height: var(--leading-normal);
}

.cab-conversion__bars {
  display: none;
}

.cab-funnel {
  display: grid;
  gap: 0.5rem;
}

.cab-funnel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  width: var(--w, 100%);
  max-width: 100%;
  font-size: 0.85rem;
  background: color-mix(in srgb, var(--violet) 14%, transparent);
}

.cab-funnel__row--b {
  background: color-mix(in srgb, var(--cyan) 14%, transparent);
}

.cab-funnel__row--c {
  background: color-mix(in srgb, var(--magenta) 12%, transparent);
}

.cab-funnel__row b {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .cab-table {
    --cab-cols: minmax(0, 1fr) 9rem 4rem 8.5rem;
  }
}

@media (max-width: 980px) {
  .cab-table {
    --cab-cols: minmax(0, 1fr) 8.5rem 3.5rem 8.5rem;
  }
}

/* «Ответы» + menu must stay on one line in the table; wrapping is only for the stacked mobile cards. */
@media (min-width: 900px) {
  .cab-table__actions {
    flex-wrap: nowrap;
  }
}

@media (max-width: 899px) {
  .cab-view--list {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
    touch-action: auto;
  }

  .cab-view--list .cab-table {
    min-width: 0;
    display: grid;
    gap: 0.65rem;
  }

  .cab-view--list .cab-table__head {
    display: none;
  }

  .cab-view--list .cab-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }

  .cab-table__link .form-public-link {
    max-width: 100%;
  }

  .cab-conversion__main,
  .cab-dynamics__body,
  .cab-panel,
  .cab-bottom,
  .cab-stats,
  .cab-view {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  .cab-view-toggle {
    display: none;
  }

  .cab-view--list {
    display: none !important;
  }

  .cab-view--cards[hidden] {
    display: block !important;
  }
}

@media (max-width: 640px) {
  .cab-dash {
    min-width: 0;
    max-width: 100%;
  }

  .cab-period,
  .cab-dynamics__filters .cab-period,
  .cab-conversion__filters .cab-period {
    width: 100%;
    flex: 1 1 auto;
  }

  .cab-period__btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.35rem 0.4rem;
    font-size: 0.75rem;
  }

  .cab-conversion__select .c-select__label {
    max-width: none;
  }

  .cab-view--list .cab-table {
    min-width: 0;
  }

  .cab-table__row {
    grid-template-columns: 1fr;
    row-gap: 0.45rem;
  }

  .cab-table__head {
    display: none;
  }

  .cab-table__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .cab-create {
    justify-content: stretch;
    width: 100%;
    min-width: 0;
  }

  .cab-create .btn {
    width: 100%;
  }

  .cab-chart {
    min-width: 0;
    max-width: 100%;
  }

  .cab-chart__x {
    padding-left: calc(2.2rem + 0.35rem);
  }

  .cab-chart__frame {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .cab-table__link .form-public-link {
    max-width: min(100%, 14rem);
  }
}

/* AI form generation */
.ai-gen {
  display: grid;
  gap: 1.15rem;
}

.ai-gen__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
}

.ai-gen__head h1 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--heading);
}

.ai-gen__head .muted {
  margin: 0;
  max-width: 40rem;
  line-height: 1.5;
}

.ai-gen__layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 960px) {
  .ai-gen__layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.85fr);
    gap: 1.25rem;
  }
}

.ai-gen__form.panel {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.1rem;
  overflow: hidden;
}

.ai-gen__form textarea {
  min-height: 11rem;
  resize: vertical;
  line-height: 1.5;
}

.ai-gen__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0;
}

.ai-gen__hint {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.35;
  flex: 1 1 12rem;
}

.ai-gen__form.is-generating .panel-head,
.ai-gen__form.is-generating .field,
.ai-gen__form.is-generating .ai-gen__actions {
  filter: blur(2px);
  opacity: 0.35;
  pointer-events: none;
}

.ai-gen__process {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--violet) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  animation: ai-gen-fade-in 0.35s ease both;
}

.ai-gen__process[hidden] {
  display: none !important;
}

.ai-gen__process-card {
  width: min(100%, 22rem);
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  text-align: center;
}

.ai-gen__orbit {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  margin-bottom: 0.35rem;
}

.ai-gen__orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--magenta) 45%, transparent);
  animation: ai-gen-spin 2.4s linear infinite;
}

.ai-gen__orbit-ring--2 {
  inset: 0.55rem;
  border-color: color-mix(in srgb, var(--cyan) 50%, transparent);
  border-style: dashed;
  animation-duration: 3.4s;
  animation-direction: reverse;
}

.ai-gen__orbit-core {
  position: absolute;
  inset: 1.35rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--magenta), var(--violet), var(--cyan));
  box-shadow: 0 0 22px rgba(255, 61, 154, 0.35);
  animation: ai-gen-pulse 1.6s ease-in-out infinite;
}

.ai-gen__orbit-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -0.275rem;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 10px rgba(255, 61, 154, 0.55);
  transform-origin: 50% 2.3rem;
  animation: ai-gen-spin 2.4s linear infinite;
}

.ai-gen__process-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--heading);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.ai-gen__process-title.is-swap {
  opacity: 0.35;
  transform: translateY(4px);
}

.ai-gen__process-sub {
  margin: 0;
  font-size: 0.88rem;
}

.ai-gen__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.ai-gen__steps span {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--fill-soft);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.ai-gen__steps span.is-active {
  border-color: color-mix(in srgb, var(--magenta) 45%, var(--line));
  background: color-mix(in srgb, var(--magenta) 14%, transparent);
  color: var(--cream);
  transform: translateY(-1px);
}

.ai-gen__steps span.is-done {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  color: var(--ok);
}

.ai-gen__bar {
  width: min(100%, 14rem);
  height: 3px;
  margin-top: 0.35rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--fill);
}

.ai-gen__bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan));
  animation: ai-gen-bar 1.35s ease-in-out infinite;
}

@keyframes ai-gen-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ai-gen-spin {
  to { transform: rotate(360deg); }
}

@keyframes ai-gen-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50% { transform: scale(1); opacity: 1; }
}

@keyframes ai-gen-bar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-gen__orbit-ring,
  .ai-gen__orbit-ring--2,
  .ai-gen__orbit-dot,
  .ai-gen__orbit-core,
  .ai-gen__bar i,
  .ai-gen__process {
    animation: none !important;
  }
}

.ai-gen__aside {
  display: grid;
  gap: 0.85rem;
}

.ai-gen__tips {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.ai-gen__examples {
  display: grid;
  gap: 0.45rem;
}

.ai-gen__example {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--fill);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ai-gen__example:hover {
  border-color: color-mix(in srgb, var(--magenta) 35%, var(--line-strong));
  background: color-mix(in srgb, var(--magenta) 8%, var(--fill));
  color: var(--cream);
}

/* ==========================================================================
   Stage 4B — forms list (/forms)
   --------------------------------------------------------------------------
   Every rule below is scoped to .cab-dash--forms (or .page-bar--forms) on
   purpose. .cab-table, .cab-view, .form-card__footer and .list-empty are also
   rendered by the legacy admin screens, and .toolbar, .seg, .search-field and
   .status-pill are shared with the workspaces and account screens — an
   unscoped edit here would repaint pages that are out of scope for this stage.

   Scoping also raises specificity above the system.css base rules, which is
   what makes these overrides win regardless of load order
   (shell.css -> app.css -> system.css, so system.css is loaded last).
   ========================================================================== */

/* ---- Toolbar: search, filters, sort, view toggle ---- */

.cab-dash--forms .toolbar {
  margin-bottom: var(--space-5);
}

/* Pill-shaped segmented control and pill controls, matching the period switch
   on the Overview page so the two screens read as one product. */
.cab-dash--forms .toolbar .seg {
  border-radius: var(--radius-full);
  border-color: var(--line);
  background: var(--fill);
  padding: 0.15rem;
}

.cab-dash--forms .toolbar .seg__btn {
  border-radius: var(--radius-full);
  padding: 0 var(--space-3);
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

/* Same brand-tinted treatment as the active nav item and .cab-period. */
.cab-dash--forms .toolbar .seg__btn.is-active {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--magenta) 20%, transparent),
    color-mix(in srgb, var(--violet) 14%, transparent)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magenta) 22%, transparent);
  color: var(--cream);
}

/* Declared after .is-active on purpose: the two selectors have the same
   specificity, so the active pill would otherwise swallow the keyboard ring
   exactly when a keyboard user is sitting on the current filter. */
.cab-dash--forms .toolbar .seg__btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.cab-dash--forms .toolbar .search-field input {
  border-radius: var(--radius-full);
  border-color: var(--line);
  background: var(--fill);
  padding-left: 2.35rem;
  padding-right: var(--space-4);
}

.cab-dash--forms .toolbar .search-field input:hover {
  background: var(--fill-hover);
}

/* The magnifier tracks the new input padding. */
.cab-dash--forms .toolbar .search-field__icon {
  left: 0.9rem;
}

/* Sort trigger and any other text control in the row. */
.cab-dash--forms .toolbar .btn:not(.btn-icon) {
  border-radius: var(--radius-full);
  padding-inline: var(--space-4);
}

/* ---- Results table ---- */

/* Same surface stack as .cab-panel, so the list is visibly the same kind of
   object as the Overview panels. */
.cab-dash--forms .cab-table {
  border-radius: var(--radius-2xl);
  border-color: var(--line);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
}

.cab-dash--forms .cab-table__head {
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: 0.7rem var(--space-5);
  background: color-mix(in srgb, var(--fill-soft) 70%, transparent);
}

.cab-dash--forms .cab-table__row {
  padding: 0.95rem var(--space-5);
  column-gap: var(--space-4);
  transition: background 0.18s ease;
}

/* Rows are a reading aid rather than one big click target (only the title is a
   link), so the hover is a quiet brand tint, not a raised card. */
.cab-dash--forms .cab-table__row:not(.cab-table__head):hover {
  background: color-mix(in srgb, var(--magenta) 7%, var(--fill-soft));
}

.cab-dash--forms .cab-table__row:last-child {
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

.cab-dash--forms .cab-table__form {
  gap: 0.3rem;
}

/* Title: display face at label size. Long names wrap (overflow-wrap stays from
   the base rule) rather than being clamped, so nothing is hidden. */
.cab-dash--forms .cab-table__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 650;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--heading);
  transition: color 0.16s ease;
}

/* Brand gradient text on hover — the same trick the card titles use, so both
   views reward the pointer identically. */
.cab-dash--forms .cab-table__title:hover {
  color: transparent;
  background-image: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

.cab-dash--forms .cab-table__meta {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.cab-dash--forms .cab-table__count {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
}

/* Status pill: tone comes from the status, not from a second control. */
.cab-dash--forms .status-pill {
  min-height: var(--control-sm);
  padding: 0 0.7rem;
  border-color: var(--line);
  background: var(--fill-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.cab-dash--forms .status-pill--published {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 34%, transparent);
  background: var(--ok-bg);
}

/* ---- Row actions ---- */

.cab-dash--forms .cab-table__actions {
  gap: 0.4rem;
}

/* .btn-sm (--control-sm) sits next to .btn-icon (--touch-min) in this row, so
   the pair is 6px out of step by default. Matching the icon button to the
   small control keeps the action cluster on one baseline. */
.cab-dash--forms .cab-table__actions .btn-icon,
.cab-dash--forms .form-card__footer .btn-icon {
  width: var(--control-sm);
  min-width: var(--control-sm);
  min-height: var(--control-sm);
}

.cab-dash--forms .cab-table__actions .btn,
.cab-dash--forms .form-card__footer .btn {
  border-radius: var(--radius-full);
}

/* ---- Cards view ---- */

.cab-dash--forms .forms-grid {
  gap: var(--space-4);
}

/* Mirrors .cab-panel: the same three-layer surface, and backdrop-filter dropped
   for the same reason as there — the translucent gradient over the painted
   .scene already reads as glass, without a per-frame re-composite. */
.cab-dash--forms .form-card {
  border-radius: var(--radius-2xl);
  border-color: var(--line);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.cab-dash--forms .form-card:hover {
  border-color: color-mix(in srgb, var(--magenta) 30%, var(--line-strong));
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(
        color-mix(in srgb, var(--magenta) 6%, transparent),
        color-mix(in srgb, var(--violet) 5%, transparent)
      ),
    var(--gradient-surface);
  box-shadow:
    var(--elev-glow-2),
    0 0 calc(22px * var(--glow-strength)) color-mix(in srgb, var(--violet) 18%, transparent);
}

.cab-dash--forms .form-card__updated {
  margin-top: 0.4rem;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.cab-dash--forms .form-card__stats {
  gap: 0.6rem;
}

.cab-dash--forms .form-card__stat {
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-lg);
  border-color: var(--line);
  background: var(--fill-soft);
  gap: 0.25rem;
}

.cab-dash--forms .form-card__stat-value {
  font-size: var(--text-xl);
  font-weight: 650;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.cab-dash--forms .form-card__stat-value--text {
  font-size: var(--text-sm);
}

.cab-dash--forms .form-card__stat-label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
}

/* The React card stacks «Ответы» above the actions menu because the footer is a
   column. A row puts the menu on the same line and lets the button take the
   remaining width — fewer rows, more card at the same height. */
.cab-dash--forms .form-card__footer {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.cab-dash--forms .form-card__footer .form-card__answers {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Page states: no results, loading, failure ---- */

.cab-dash--forms .list-empty {
  margin: var(--space-4) 0 0;
  padding: var(--space-12) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
  color: var(--muted);
  line-height: var(--leading-normal);
}

/* FormsProblem renders .cab-conversion__empty as a direct child of the page
   section. On the Overview that class is the in-panel placeholder, so the
   page-level failure state is styled here instead of by widening that rule. */
.cab-dash--forms > .cab-conversion__empty {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-5);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
}

.cab-dash--forms > .cab-conversion__empty .muted {
  margin: 0;
  max-width: 30rem;
  line-height: var(--leading-normal);
}

/* FormsSkeleton is a .cab-table holding four bare skeleton lines: without this
   they would sit flush against the panel border. */
.cab-dash--forms .cab-table:has(> .skeleton--line) {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.cab-dash--forms .cab-table:has(> .skeleton--line) > .skeleton--line {
  height: var(--control-sm);
}

/* ==========================================================================
   Stage 5A — account & settings (/account)
   --------------------------------------------------------------------------
   Scoped to .page-tabs--account / .page-bar--account / .editor-layout--account.
   .settings-card, .page-tabs, .switch-row, .settings-switch, .data-table-wrap,
   .form-field, .toolbar and .empty are shared with /workspaces, the form
   editor, the email-verification page and the legacy admin screens, so an
   unscoped edit here would repaint screens outside this stage. The modifiers
   also lift specificity above the base rules in system.css, which loads last
   (shell.css -> app.css -> system.css).
   ========================================================================== */

/* ---- Section tabs ---- */

/* Brand-tinted rail, matching the hairline the panels draw along their edges. */
.page-tabs--account .page-tabs__bar {
  border-bottom-color: color-mix(in srgb, var(--magenta) 20%, var(--line));
}

.page-tabs--account .page-tabs__btn {
  padding: 0 var(--space-4);
  font-weight: 650;
}

.page-tabs--account .page-tabs__btn:not(.is-active):hover {
  background: var(--fill-soft);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Active tab: the flat 2px magenta border becomes the brand gradient. It is
   painted as a bottom-aligned background layer rather than as a border or a
   pseudo-element on purpose — the rail is a horizontal scroll container, so
   anything sticking out of the button's padding box (the base rule draws its
   border 1px past it via `margin-bottom: -1px`) gets clipped. A background
   layer is positioned against the padding box, so all of it stays visible. */
.page-tabs--account .page-tabs__btn.is-active {
  border-bottom-color: transparent;
  background: linear-gradient(90deg, var(--magenta), var(--violet)) bottom / 100% 2px no-repeat;
  color: var(--heading);
}

/* The users count reads as a chip instead of a bare number next to the label. */
.page-tabs--account .page-tabs__count {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-full);
  background: var(--fill);
  font-size: var(--text-xs);
  text-align: center;
}

.page-tabs--account .page-tabs__btn.is-active .page-tabs__count {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--magenta) 26%, transparent),
    color-mix(in srgb, var(--violet) 18%, transparent)
  );
  color: var(--cream);
}

/* ---- Settings panels ---- */

/* The card is already .surface (brand hairline + glass lift + glow). Only the
   measure changes: 42rem keeps the long platform hints readable without
   stretching a two-field form into a wide, empty panel. */
.page-tabs--account .settings-card {
  max-width: 42rem;
}

.page-tabs--account .settings-card__title {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

/* Section intro sits tight under the title, with a hairline separating it from
   the controls — the same rhythm as the Overview panels. */
.page-tabs--account .settings-card > .page-tabs__lead {
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.page-tabs--account .settings-card__form {
  margin-top: var(--space-5);
}

/* Each platform flag is its own <form>, so the divider is drawn on every block
   (`> form`, not `+ form` — an optional note can sit between two switches and
   belongs to the flag above it). */
.page-tabs--account .settings-card > form {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

/* ---- Toggles ---- */

/* Text left, control right. The base rule packs both against the left edge,
   which reads as an inline control rather than a settings row. */
.page-tabs--account .switch-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-3);
  /* Bleeds exactly as far as its own padding, so the content stays flush with
     the card while the hover fill has room to breathe. */
  margin: var(--space-1) calc(var(--space-3) * -1);
  border-radius: var(--radius-lg);
  transition: background 0.16s ease;
}

.page-tabs--account .switch-row:hover {
  background: var(--fill-soft);
}

.page-tabs--account .switch-row:focus-within {
  background: color-mix(in srgb, var(--magenta) 7%, var(--fill-soft));
}

.page-tabs--account .switch-row__text {
  flex: 1 1 auto;
  font-size: var(--text-base);
}

/* Direct child only: the hint below contains its own <strong> for the current
   state, and that one has to stay inline. */
.page-tabs--account .switch-row__text > strong {
  display: block;
  color: var(--heading);
  font-weight: 700;
  line-height: var(--leading-snug);
}

.page-tabs--account .switch-row__hint {
  margin-top: var(--space-1);
  font-weight: 500;
  line-height: var(--leading-normal);
}

.page-tabs--account .switch-row__hint strong {
  color: color-mix(in srgb, var(--magenta) 58%, var(--cream));
}

.page-tabs--account .switch-row__control {
  padding-top: 0.15rem;
}

/* Soft brand halo when on — the same accent the active nav item and the
   segmented pills use. */
.page-tabs--account .switch-row__input:checked + .settings-switch {
  box-shadow: 0 0 calc(14px * var(--glow-strength)) color-mix(in srgb, var(--magenta) 32%, transparent);
}

/* A pending save disables every switch. The checkbox itself is visually hidden,
   so without this the row kept looking interactive while the click was a no-op. */
.page-tabs--account .switch-row:has(.switch-row__input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.page-tabs--account .switch-row:has(.switch-row__input:disabled):hover {
  background: transparent;
}

/* ---- Fields ---- */

/* The hint under the email field doubles as a verification status, so it gets a
   tone and a lit dot instead of reading as generic helper text. */
.page-tabs--account .form-field__hint.is-ok,
.page-tabs--account .form-field__hint.is-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 650;
}

.page-tabs--account .form-field__hint.is-ok::before,
.page-tabs--account .form-field__hint.is-pending::before {
  content: "";
  flex: 0 0 auto;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
}

.page-tabs--account .form-field__hint.is-ok {
  color: var(--ok);
}

.page-tabs--account .form-field__hint.is-ok::before {
  background: var(--ok);
  box-shadow: 0 0 calc(8px * var(--glow-strength)) color-mix(in srgb, var(--ok) 45%, transparent);
}

.page-tabs--account .form-field__hint.is-pending {
  color: color-mix(in srgb, var(--magenta) 62%, var(--cream));
}

.page-tabs--account .form-field__hint.is-pending::before {
  background: var(--gradient-brand);
}

/* A verified address stays disabled, and the base disabled styling keeps the
   same fill as the enabled state by design; the muted text is what marks it. */
.page-tabs--account .form-field input:disabled {
  color: var(--muted);
}

/* ---- Users tab: toolbar, search, no-results ---- */

/* The lead is a block paragraph; inside the flex toolbar its bottom margin
   pushed the row out of line with the button next to it. */
.page-tabs--account .toolbar .page-tabs__lead {
  margin-bottom: 0;
  flex: 1 1 18rem;
}

/* Same pill search as the forms list, so the two fields match. */
.page-tabs--account .toolbar .search-field input {
  border-radius: var(--radius-full);
  border-color: var(--line);
  background: var(--fill);
  padding-left: 2.35rem;
  padding-right: var(--space-4);
}

.page-tabs--account .toolbar .search-field__icon {
  left: 0.9rem;
}

.page-tabs--account .list-empty {
  margin: var(--space-4) 0 0;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
  color: var(--muted);
  line-height: var(--leading-normal);
}

/* ---- Directory tables ----
   Desktop only, and that is load-bearing: at <=900px the base rules turn
   .data-table-wrap into a borderless stack of cards, and a surface rule with
   higher specificity would win over that media query and bring the border,
   the radius and the background back. */
@media (min-width: 901px) {
  .page-tabs--account .data-table-wrap {
    border-radius: var(--radius-2xl);
    border-color: var(--line);
    background:
      var(--gradient-hairline) top / 100% 1px no-repeat,
      linear-gradient(var(--glass-tint), var(--glass-tint)),
      var(--gradient-surface);
    box-shadow: var(--elev-glow-1);
  }

  .page-tabs--account .data-table th {
    padding: 0.7rem var(--space-5);
    background: color-mix(in srgb, var(--fill-soft) 70%, transparent);
  }

  .page-tabs--account .data-table td {
    padding: 0.85rem var(--space-5);
  }

  .page-tabs--account .data-table tbody tr {
    transition: background 0.18s ease;
  }

  /* Quieter than the shared row hover so it matches the forms table tint. */
  .page-tabs--account .data-table tbody tr:hover td {
    background: color-mix(in srgb, var(--magenta) 7%, var(--fill-soft));
  }

  /* Otherwise the last row draws a line across the panel's rounded corner. */
  .page-tabs--account .data-table tbody tr:last-child td {
    border-bottom: 0;
  }
}

/* ---- Loading ---- */

/* The skeleton stack gets the panel surface too, so the first paint does not
   flash a bare page before the settings card mounts. */
.editor-layout--account {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  background:
    var(--gradient-hairline) top / 100% 1px no-repeat,
    linear-gradient(var(--glass-tint), var(--glass-tint)),
    var(--gradient-surface);
  box-shadow: var(--elev-glow-1);
}