/* Tokens. Apple-like canvas (cool gray, white cards, large radii) with a
   brighter gold so the UI isn't the sepia wash the Classical deck was. */

:root {
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;
  --color-text: #1d1d1f;
  --color-accent: #e8a317;
  --color-accent-2: #f0b429;
  --color-divider: color-mix(in srgb, #1d1d1f 10%, transparent);

  --color-neutral-100: #f5f5f7;
  --color-neutral-200: #e8e8ed;
  --color-neutral-300: #d2d2d7;
  --color-neutral-400: #aeaeb2;
  --color-neutral-500: #8e8e93;
  --color-neutral-600: #6e6e73;
  --color-neutral-700: #48484a;
  --color-neutral-800: #3a3a3c;
  --color-neutral-900: #1d1d1f;

  --color-accent-100: #fff6e0;
  --color-accent-200: #ffe7ad;
  --color-accent-300: #ffd36a;
  --color-accent-400: #f5bc3a;
  --color-accent-500: #e8a317;
  --color-accent-600: #c48410;
  --color-accent-700: #9a680c;
  --color-accent-800: #6f4a08;
  --color-accent-900: #3d2804;

  --color-accent-2-100: #fff6e0;
  --color-accent-2-200: #ffe7ad;
  --color-accent-2-300: #ffd36a;
  --color-accent-2-400: #f5bc3a;
  --color-accent-2-500: #f0b429;
  --color-accent-2-600: #d4940f;
  --color-accent-2-700: #a56c0a;
  --color-accent-2-800: #6f4a08;
  --color-accent-2-900: #3d2804;

  --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #1d1d1f 6%, transparent), 0 1px 3px color-mix(in srgb, #1d1d1f 4%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, #1d1d1f 10%, transparent);
  --shadow-lg: 0 18px 48px color-mix(in srgb, #1d1d1f 14%, transparent);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  background:
    radial-gradient(ellipse 90% 48% at 50% -12%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 58%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 600;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 10px 16px;
  border-radius: 980px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  color: var(--color-text);
  background: var(--color-accent);
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-accent-800) 18%, transparent);
}
.btn-primary:hover { background: var(--color-accent-400); }
.btn-primary:active { background: var(--color-accent-600); }
.btn-secondary {
  border-color: var(--color-neutral-400);
  background: var(--color-surface);
  color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-neutral-300); }
.btn-secondary:active { background: var(--color-neutral-400); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px; font-weight: 500;
  color: var(--color-neutral-800);
}
.input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: inherit;
  font-size: 16px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1.5px solid var(--color-neutral-400); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-neutral-500); }
.input:focus-visible {
  border-color: var(--color-accent); outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 28%, transparent);
}
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-neutral-400);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  padding: 3px;
  background: var(--color-neutral-100);
  border: 1.5px solid var(--color-neutral-300);
  border-radius: 980px;
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 980px;
}
.seg-opt + .seg-opt { border-left: 0; }
.seg-opt:has(input:checked) {
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-divider);
  box-shadow: var(--shadow-sm);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Page layer. Ported from the <helmet> of the original .dc.html
   (.design/Pulse Головна v2.dc.html) — there it lived as an inline <style>.
   Fonts (Inter, IBM Plex Mono) are linked with one <link>
   in base.html.twig, not with two @import chains like in the design.
   ══════════════════════════════════════════════════════════════════════ */

body { margin: 0; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-800); }

.site-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-divider);
}
@keyframes pulse-run {
  0%   { left: -14%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-line-runner { animation: none !important; opacity: 0.55; left: 43%; }
}

/* Calculator slider */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: var(--color-neutral-300);
  border-radius: 2px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
/* The original had only -webkit-. Without this the slider thumb is default in Firefox. */
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
input[type=range]::-moz-range-track {
  height: 2px;
  background: var(--color-neutral-300);
  border-radius: 2px;
}
input[type=range]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 6px; }

/* Tier card. In the design, hover lived in the style-hover="…" attribute,
   which doesn't exist in the browser — it's canvas-editor markup. */
.tier-card {
  appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.tier-card:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tier-card[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.tier-card__range,
.tier-card__note { color: var(--color-neutral-600); }
.tier-card__price { color: var(--color-text); }
.tier-card[aria-pressed="true"] .tier-card__range,
.tier-card[aria-pressed="true"] .tier-card__note,
.tier-card[aria-pressed="true"] .tier-card__price { color: var(--color-accent-800); }

/* Product tabs */
.tab-btn {
  border-color: var(--color-neutral-300);
  color: var(--color-neutral-700);
  background: var(--color-surface);
}
.tab-btn[aria-selected="true"] {
  border-color: var(--color-accent);
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow: none;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Tier grid. The layout lives here, not in inline style, because
   inline display:grid overrides display:none from the [hidden] attribute —
   and the hidden channel still stayed on screen. */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 28px;
}
.tier-grid[hidden] { display: none; }

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.product-preview { min-height: 430px; padding: 26px 28px; }
.product-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

@media (max-width: 760px) {
  .site-header { flex-wrap: wrap; gap: 12px !important; }
  .site-header nav { order: 1; width: 100%; flex-wrap: wrap; gap: 10px 20px !important; }
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .product-preview { padding: 16px 12px; }
  .product-preview .card { padding: 16px 12px !important; }
  .product-stats { grid-template-columns: minmax(0, 1fr); }
  .product-preview .table { overflow-wrap: anywhere; }
}

/* Two prices in the hero with a vertical divider bar between them.
   The bar is a third flex item, and when the line wraps it stays on the
   first line together with the SMS block. The container centers the line
   as a whole, so SMS drifts left by (gap + 1px) / 2, while Viber centers
   honestly — the numbers stop sitting on the same axis.
   Natural wrapping happens around 390px, right at the 375/390/393 of
   phones, so we don't rely on it: below 420px the layout is forced into a
   column and the bar is removed, and above 420px wrapping never happens. */
.hero-prices {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(28px, 6vw, 72px);
  flex-wrap: wrap;
}
.hero-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-divider);
}

@media (max-width: 420px) {
  .hero-prices { flex-direction: column; align-items: center; }
  .hero-divider { display: none; }
}

/* "Як це працює": a pulse running through the steps.
   The line is positioned on top of the grid, so it's only correct while all
   four steps sit in one row. Four columns need 4*210 + 3*28 = 924px of
   container, i.e. a viewport from 980px — below that the grid collapsed on
   its own into 2-3 rows, and the line hung only over the first (measured:
   885px -> 3 columns, 2 rows). So below 980px the layout is forced into a
   single column, and the line becomes vertical — the same timeline, just top
   to bottom. */
.steps { position: relative; }

.steps-grid {
  position: relative;
  display: grid;
  /* Exactly 4 columns, not auto-fit: with auto-fit the column count depends
     on content width, while the media query depends on viewport width plus
     the scrollbar. These two values diverge by the scrollbar width (~15px),
     and right at the boundary we got 3 columns in 2 rows with the line
     still horizontal. A hard 4 columns removes the desync: above the
     breakpoint it's always one row. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}

.steps-track {
  position: absolute;
  top: 16px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: var(--color-divider);
  overflow: hidden;
}

.steps-track .pulse-line-runner {
  position: absolute;
  top: 0;
  width: 14%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: pulse-run 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-run-vertical {
  0%   { top: -14%; }
  100% { top: 100%; }
}

@media (max-width: 979px) {
  .steps-grid { grid-template-columns: minmax(0, 1fr); }

  /* 16px + 2px width = center at 17px, close to the 36px icon. */
  .steps-track {
    top: 0;
    bottom: 0;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .steps-track .pulse-line-runner {
    width: 2px;
    height: 14%;
    background: linear-gradient(180deg, transparent, var(--color-accent), transparent);
    animation-name: pulse-run-vertical;
  }
}

/* The general reduced-motion rule parks the runner horizontally (left: 43%),
   which makes no sense for a vertical 2px-wide line. */
@media (prefers-reduced-motion: reduce) and (max-width: 979px) {
  .steps-track .pulse-line-runner { left: 0; top: 43%; }
}

/* Step: icon and text. */
.step { display: flex; flex-direction: column; gap: 10px; }

.step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent-100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.step-title { font-family: var(--font-heading); font-size: 19px; }
.step-text { font-size: 14px; color: var(--color-neutral-700); margin: 0; }

@media (max-width: 979px) {
  /* The vertical line runs through the center of the icon column, so the
     text must move to the second column — otherwise the line runs right
     through it. We put the title on the same row as the icon and center
     it against its height. */
  .step {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    align-items: start;
  }

  .step-icon { grid-column: 1; grid-row: 1; }

  .step-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .step-text { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   Authentication screens («Pulse Авторизація»)
   ========================================================================== */

/* Status colors. Classical doesn't have them at all — its whole palette is in
   hex, while the auth design introduces five oklch literals. We set them up
   as tokens so the values don't sprawl across the markup the way they
   sprawled across the design. */
:root {
  --color-danger: oklch(0.44 0.14 25);
  --color-danger-500: oklch(0.55 0.14 25);
  --color-warn: oklch(0.62 0.13 75);
  --color-ok: oklch(0.55 0.1 150);
  --color-ok-800: oklch(0.4 0.09 150);
  --color-status-ok-bg: oklch(0.93 0.05 150);
  --color-status-error-bg: oklch(0.94 0.04 25);
  --color-status-warn-bg: oklch(0.94 0.05 75);
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  min-height: 100vh;
  background: var(--color-bg);
}

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 40px;
}

.auth-col {
  width: 100%;
  max-width: 396px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  align-self: flex-start;
}

.auth-logo-word { font-family: var(--font-heading); font-weight: 600; font-size: 21px; }

.auth-card { padding: 0; overflow: hidden; gap: 0; }

/* Strip above the card: at rest just a divider, while submitting a pulse
   runs along it — the same trick as on the homepage timeline. */
.auth-card-track {
  position: relative;
  height: 2px;
  background: var(--color-divider);
  overflow: hidden;
}

.auth-card-track .pulse-line-runner {
  position: absolute;
  top: 0;
  width: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: pulse-run 1.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  display: none;
}

.auth-body {
  padding: 32px 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Message screens: icon on top, blocks aligned left. */
.auth-body-notice {
  padding: 36px 34px 32px;
  gap: 18px;
  align-items: flex-start;
}

.auth-notice-text { font-size: 14px; color: var(--color-neutral-800); margin: 0; line-height: 1.6; }
.auth-notice-text b { font-weight: 500; font-size: 13.5px; }
.auth-notice-rule { width: 100%; height: 1px; background: var(--color-divider); }
.auth-notice-foot { font-size: 12.5px; color: var(--color-neutral-700); }
.auth-resend { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.auth-resend .btn { margin-top: 0; height: 44px; }
.auth-resend-note { font-size: 12.5px; color: var(--color-neutral-600); text-align: center; }
.auth-resend-note b { font-weight: 500; }

.auth-heading { margin: 0 0 6px; }
.auth-lede { font-size: 14px; color: var(--color-neutral-700); margin: 0; }
.auth-below { text-align: center; font-size: 13.5px; color: var(--color-neutral-700); }

/* Its own column instead of display:contents — the form stays a full-fledged
   element in the accessibility tree. */
.auth-form { display: flex; flex-direction: column; gap: 20px; }
.auth-input { height: 44px; }
.auth-submit { margin-top: 0; height: 46px; font-size: 15px; }
.auth-label-hint { color: var(--color-neutral-600); font-size: 12px; }

/* — submitting state — */
.auth-card.is-busy .auth-card-track .pulse-line-runner { display: block; }
.auth-card.is-busy .auth-body { opacity: 0.55; }
.auth-card.is-busy .auth-body :is(input, button, a) { pointer-events: none; }

.auth-submit-pulse {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent-200);
  overflow: hidden;
  display: none;
}

.auth-submit-pulse::after {
  content: '';
  position: absolute;
  top: 0;
  width: 22%;
  height: 2px;
  background: var(--color-accent);
  animation: pulse-run 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.auth-card.is-busy .auth-submit {
  position: relative;
  overflow: hidden;
  opacity: 0.75;
  pointer-events: none;
}

.auth-card.is-busy .auth-submit-pulse { display: block; }

@media (prefers-reduced-motion: reduce) {
  .auth-card-track .pulse-line-runner,
  .auth-submit-pulse::after {
    animation: none;
  }
}

/* — password: eye icon and strength bars — */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 44px; }

.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-neutral-600);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.pw-toggle:hover { color: var(--color-text); }
.pw-toggle:focus-visible { outline: 1px solid var(--color-accent); }

.strength { display: flex; gap: 5px; margin-top: 8px; }

.strength-bar {
  flex: 1;
  height: 2px;
  background: var(--color-neutral-300);
}

.strength-note { font-size: 12.5px; color: var(--color-neutral-600); margin-top: 7px; }
.strength[data-level='1'] .strength-bar:nth-child(-n + 1) { background: var(--color-warn); }
.strength[data-level='2'] .strength-bar:nth-child(-n + 2) { background: var(--color-warn); }
.strength[data-level='3'] .strength-bar { background: var(--color-ok); }
.strength-note[data-level='3'] { color: var(--color-ok-800); }

/* — errors — */
.field-error {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-danger);
}

.field-error svg { flex: none; margin-top: 2px; }
.field-error a { color: var(--color-danger); }
.field-error ul { list-style: none; margin: 0; padding: 0; }
.input.is-invalid { border-color: var(--color-danger-500); }

/* — checkbox: Classical only has radio, we draw it the same way — */
.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--color-neutral-800);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-multiline { align-items: flex-start; }
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.checkbox .box {
  width: 17px;
  height: 17px;
  flex: none;
  border: 1px solid var(--color-neutral-400);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.checkbox-multiline .box { margin-top: 1px; }
.checkbox:hover .box { border-color: var(--color-accent); }
.checkbox input:checked + .box { border-color: var(--color-accent); background: var(--color-accent); }
.checkbox input:focus-visible + .box { outline: 1px solid var(--color-accent); outline-offset: 2px; }
.checkbox .box svg { opacity: 0; color: var(--color-bg); }
.checkbox input:checked + .box svg { opacity: 1; }

/* — right-hand panel — */
.auth-aside {
  background: var(--color-neutral-100);
  border-left: 1px solid var(--color-divider);
  padding: 56px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
}

.auth-aside-head { display: flex; flex-direction: column; gap: 8px; }
.auth-aside-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* Monospace comes from the .mono class — it already exists in the system. */
.auth-aside-amount { font-size: 56px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.auth-aside-unit { font-size: 15px; color: var(--color-neutral-600); }
.auth-aside-lede { font-size: 14.5px; color: var(--color-neutral-800); margin: 0; line-height: 1.6; max-width: 290px; }
.auth-aside-rule { height: 1px; background: var(--color-divider); }
.auth-aside-list { display: flex; flex-direction: column; gap: 18px; }
.auth-aside-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--color-neutral-800); }
.auth-aside-item svg { flex: none; margin-top: 2px; }

/* Tablet: the panel moves down as a horizontal strip (design screen 14). */
@media (max-width: 979px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .auth-main { padding: 48px 24px; flex: 1; }
  .auth-col { max-width: 420px; }

  .auth-aside {
    border-left: 0;
    border-top: 1px solid var(--color-divider);
    padding: 28px 40px;
    gap: 18px;
  }

  .auth-aside-amount { font-size: 34px; }

  /* In the tablet design, the price and caption sit on one line with the
     caption pushed right. On desktop they're stacked, so we unroll the column. */
  .auth-aside-head { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 10px 26px; }
  .auth-aside-lede { max-width: none; margin-left: auto; font-size: 13.5px; }
  .auth-aside-rule { display: none; }
  .auth-aside-list { flex-direction: row; flex-wrap: wrap; gap: 26px; }
  .auth-aside-item { align-items: center; font-size: 13px; }
  .auth-aside-item svg { margin-top: 0; }
}

/* Mobile: only the logo and form remain (design screen 15). */
@media (max-width: 600px) {
  .auth-aside { display: none; }
  .auth-main { padding: 32px 20px; }
  .auth-body { padding: 26px 22px 24px; }
  .auth-heading { font-size: 26px; }
  .auth-input { height: 48px; }
  .auth-submit { height: 50px; font-size: 16px; }
}

/* Cabinet: screen 01 Classical. All rules are scoped to its shell. */
.cabinet-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--color-bg);
}
.cabinet-shell *, .cabinet-shell *::before, .cabinet-shell *::after { box-sizing: border-box; }
.cabinet-sidebar {
  background: color-mix(in srgb, var(--color-surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--color-divider);
}
.cabinet-nav-body { display: flex; flex-direction: column; height: 100%; }
.cabinet-logo { display: flex; align-items: center; gap: 10px; margin: 0 var(--space-4) var(--space-2); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider); text-decoration: none; color: var(--color-text); }
.cabinet-logo span { font-family: var(--font-heading); font-size: 22px; font-weight: 600; }
.cabinet-nav { display: flex; flex-direction: column; gap: 4px; padding: 0 var(--space-3); }
.cabinet-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; font-size: 14px; font-weight: 500; text-align: left; text-decoration: none; color: var(--color-neutral-700); }
.cabinet-nav-item svg { flex: none; }
.cabinet-nav-item small { display: block; font-size: 10px; color: var(--color-neutral-600); }
.cabinet-nav-item[aria-current] {
  color: var(--color-text);
  background: var(--color-accent);
  box-shadow: none;
  font-weight: 600;
}
.cabinet-nav-balance { margin-top: auto; padding: var(--space-4); border-top: 1px solid var(--color-divider); }
.cabinet-balance-label { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-600); margin-bottom: var(--space-1); }
.cabinet-nav-balance .mono { font-size: 19px; margin-bottom: var(--space-2); }
.cabinet-nav-balance small { font-size: 13px; color: var(--color-neutral-600); }
.cabinet-shell .btn { margin-top: 0; }
.cabinet-shell button:disabled { cursor: not-allowed; }
.cabinet-shell .btn:disabled { opacity: 0.6; }
.cabinet-shell :is(a, summary, button, [tabindex]):focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.cabinet-main { min-width: 0; }
.cabinet-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-8); border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); }
.cabinet-header h1 { margin: 0; font-size: 28px; }
.cabinet-account { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); font-size: 13px; min-width: 0; }
.cabinet-account span { overflow-wrap: anywhere; }
.cabinet-account form { flex: none; display: flex; }
.cabinet-account :is(a, button) { flex: none; border: 0; padding: 0; background: transparent; font: inherit; color: var(--color-accent-700); text-decoration: none; cursor: pointer; }
.cabinet-mobile-menu { display: none; }
.cabinet-content { display: flex; flex-direction: column; gap: 24px; padding: var(--space-6) var(--space-8); }
.cabinet-coming { margin: 0; color: var(--color-neutral-700); font-size: 12px; }
.cabinet-flash { margin: 0; padding: var(--space-3); background: var(--color-status-ok-bg); color: var(--color-ok-800); border-radius: var(--radius-md); }
.cabinet-flash-error { background: var(--color-status-error-bg); color: var(--color-danger); }
.cabinet-warning { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--space-3) var(--space-4); background: var(--color-accent-100); border: 1px solid var(--color-accent-300); border-radius: var(--radius-md); }
.cabinet-warning > span { font-size: 14px; color: var(--color-accent-800); }
.cabinet-warning svg { vertical-align: middle; margin-right: var(--space-2); }
.cabinet-warning .btn { flex: none; }
.cabinet-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cabinet-stats .card { min-width: 0; padding: var(--space-4); }
.cabinet-shell .card-kicker { margin: 0; font-family: var(--font-body); font-size: 10px; font-weight: 400; }
.cabinet-stat-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cabinet-amount { font-size: clamp(28px, 2.65vw, 38px); font-weight: 500; line-height: 1.1; white-space: nowrap; }
.cabinet-amount small { font-size: 20px; color: var(--color-neutral-600); }
.cabinet-tier { padding: var(--space-4); gap: 12px; }
.cabinet-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cabinet-tier .cabinet-row { font-size: 13px; color: var(--color-neutral-800); }
.cabinet-tier-count { font-size: 11.5px; color: var(--color-neutral-600); }
.cabinet-tier progress { appearance: none; width: 100%; height: 6px; border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-neutral-200); color: var(--color-accent-300); }
.cabinet-tier progress::-webkit-progress-bar { background: var(--color-neutral-200); }
.cabinet-tier progress::-webkit-progress-value { background: var(--color-accent-300); border-right: 2px solid var(--color-accent); }
.cabinet-tier progress::-moz-progress-bar { background: var(--color-accent-300); border-right: 2px solid var(--color-accent); }
.cabinet-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cabinet-actions .btn { font-size: 16px; padding: var(--space-3) var(--space-6); }
.cabinet-coming { margin-top: var(--space-2); }
.cabinet-send { max-width: 1040px; }
.cabinet-send .card-meta { margin: 0; }
.cabinet-send-form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.cabinet-send-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: var(--space-6);
  padding: 5px;
  background: var(--color-neutral-100);
  border: 1.5px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
}
.cabinet-send-tabs .tab-btn {
  width: 100%;
  border: 0;
  border-radius: 10px;
  justify-content: center;
  font-size: 14px;
  padding: 12px 10px;
  background: transparent;
  box-shadow: none;
  color: var(--color-neutral-700);
}
.cabinet-send-tabs .tab-btn[aria-selected="true"] {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-text);
}
.cabinet-send-tabs .tab-btn:first-child { border-radius: 10px; }
.cabinet-send-tabs .tab-btn:last-child { border-radius: 10px; }
.cabinet-send-tabs .tab-btn + .tab-btn { margin-left: 0; }
.cabinet-send-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-6);
  align-items: start;
}
.cabinet-send-form .cabinet-actions {
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.cabinet-send-form .cabinet-actions .btn {
  flex: 0 0 auto;
  width: auto;
  font-size: 14px;
  padding: var(--space-2) var(--space-4);
}
.cabinet-send-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
.cabinet-send-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.cabinet-send-stats dt {
  font-size: 11px;
  color: var(--color-neutral-600);
}
.cabinet-send-stats dd { margin: 0; font-size: 14px; }
.cabinet-send-total { color: var(--color-accent-700); }
.cabinet-send-preview { position: sticky; top: 24px; }
.cabinet-send-preview-note {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  border-radius: var(--radius-md);
}

.sms-phone {
  width: 280px;
  padding: 12px 12px 20px;
  background: var(--color-neutral-900);
  border: 0;
  border-radius: 40px;
  box-shadow: var(--shadow-lg);
}
.sms-phone-chrome { display: flex; justify-content: center; padding: 8px 0 12px; }
.sms-phone-speaker {
  width: 96px; height: 28px; border-radius: 99px;
  background: color-mix(in srgb, var(--color-surface) 12%, transparent);
}
.sms-phone-screen {
  min-height: 460px;
  background: var(--color-surface);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sms-phone-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-divider);
}
.sms-phone-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-100); color: var(--color-accent-800);
  font-size: 13px; font-weight: 500;
}
.sms-phone-sender { font-size: 14px; font-weight: 500; }
.sms-phone-channel { font-size: 11px; color: var(--color-neutral-600); }
.sms-phone-thread {
  flex: 1;
  padding: 16px;
  background: var(--color-neutral-100);
}
.sms-phone-placeholder {
  margin: 0;
  color: var(--color-neutral-600);
  font-size: 13px;
}
.sms-bubble {
  margin: 0;
  max-width: 90%;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: 18px 18px 18px 4px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .cabinet-send-layout { grid-template-columns: 1fr; }
  .cabinet-send-preview { position: static; }
  .sms-phone { margin-inline: auto; }
  .cabinet-send-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cabinet-send-tabs { grid-template-columns: 1fr; }
  .cabinet-send-tabs .tab-btn,
  .cabinet-send-tabs .tab-btn:first-child,
  .cabinet-send-tabs .tab-btn:last-child { border-radius: 10px; }
  .cabinet-send-tabs .tab-btn + .tab-btn { margin-left: 0; margin-top: 0; }
  .cabinet-send-form .cabinet-actions { align-items: stretch; }
  .cabinet-send-form .cabinet-actions .btn { width: 100%; }
}
.cabinet-table-heading { margin-bottom: var(--space-2); }
.cabinet-table-heading h2 { margin: 0; font-size: 22px; }
.cabinet-table-scroll { overflow-x: auto; }
.cabinet-table-scroll .table { min-width: 850px; }
.cabinet-table-scroll td:not(:first-child) { white-space: nowrap; font-size: 13px; }
.cabinet-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}
.cabinet-filters .field { margin: 0; flex: 1 1 11rem; min-width: 0; }
.cabinet-filters-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  flex: 0 0 auto;
}
.cabinet-export { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cabinet-messages-table { min-width: 960px; }
.cabinet-table-scroll td.cabinet-message-body {
  white-space: normal;
  max-width: 22rem;
}
.cabinet-shell .cabinet-number { text-align: right; }
.cabinet-channel { border: 1px solid var(--color-divider); padding: 2px 8px; border-radius: var(--radius-sm); font-size: 10.5px; }
.cabinet-status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-sm); font-size: 11px; background: var(--color-neutral-200); color: var(--color-neutral-700); }
.cabinet-status-sending { background: var(--color-accent-100); color: var(--color-accent-800); }
.cabinet-status-sent { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.cabinet-status-delivered { background: var(--color-status-ok-bg); color: var(--color-ok-800); }
.cabinet-status-expired { background: var(--color-status-warn-bg); color: var(--color-warn); }
.cabinet-status-error { background: var(--color-status-error-bg); color: var(--color-danger); }
/* «Статус уточнюється»: charged, outcome unknown. Deliberately not the neutral
   fallback — this is the one row a person needs to look at twice. */
.cabinet-status-unresolved { background: var(--color-status-warn-bg); color: var(--color-warn); }
.cabinet-status-time { display: block; margin-top: 4px; font-size: 11px; color: var(--color-neutral-600); }

/* — recipient lists — */
.cabinet-pagination { justify-content: center; gap: var(--space-4); margin-top: var(--space-3); }
.cabinet-import { gap: var(--space-4); padding: var(--space-4); }
.cabinet-import-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cabinet-import-panels { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: stretch; }
.cabinet-import-panel { display: flex; flex-direction: column; }
.cabinet-import-panel h3 { margin: 0 0 var(--space-2); }
.cabinet-import-divider { position: relative; display: flex; align-items: center; justify-content: center; }
.cabinet-import-divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--color-divider); }
.cabinet-import-divider span { position: relative; padding: var(--space-2) 0; background: var(--color-bg); font-size: 11px; color: var(--color-neutral-600); }
.cabinet-import-textarea { flex: 1; min-height: 180px; }
.cabinet-map-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.cabinet-map-field { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; }
.cabinet-map-enable { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.cabinet-list-rename { margin-bottom: var(--space-4); }
.cabinet-list-rename-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cabinet-list-rename-row .input { flex: 1; min-width: 12rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cabinet-dropzone {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-2); text-align: center; padding: var(--space-6) var(--space-4);
  border: 1.5px dashed var(--color-neutral-500); border-radius: var(--radius-md); cursor: pointer;
}
.cabinet-dropzone.is-dragover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.cabinet-dropzone-title { font-family: var(--font-heading); font-size: 15px; }
.cabinet-dropzone-hint { font-size: 12px; color: var(--color-neutral-600); }
.cabinet-dropzone-filename:not(:empty) { font-size: 12px; color: var(--color-accent-700); }
.cabinet-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.cabinet-import-report { gap: var(--space-4); padding: var(--space-4); }
.cabinet-import-source { font-size: 11px; color: var(--color-neutral-600); }
.cabinet-report-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cabinet-report-label { font-size: 11px; color: var(--color-neutral-600); }
.cabinet-report-value { font-size: clamp(24px, 2.4vw, 28px); font-weight: 500; }
.cabinet-report-added, .cabinet-report-value.cabinet-report-added { color: var(--color-ok-800); }
.cabinet-report-rejected, .cabinet-report-value.cabinet-report-rejected { color: var(--color-danger); }
.cabinet-report-reasons { display: flex; flex-direction: column; gap: 5px; padding: 12px 16px; font-size: 13px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.cabinet-report-reasons-title { margin-bottom: 3px; color: var(--color-neutral-700); }

@media (max-width: 1279px) {
  .cabinet-stats { grid-template-columns: 1fr; }
  .cabinet-header, .cabinet-content { padding-left: var(--space-6); padding-right: var(--space-6); }
  .cabinet-import-panels { grid-template-columns: 1fr; }
  .cabinet-import-divider::before { top: 0; bottom: 0; left: 0; right: 0; width: auto; height: 1px; }
}
@media (max-width: 1023px) {
  .cabinet-shell { grid-template-columns: minmax(0, 1fr); }
  .cabinet-sidebar { display: none; }
  .cabinet-mobile-menu { display: block; border-bottom: 1px solid var(--color-divider); }
  .cabinet-mobile-menu summary { cursor: pointer; padding: var(--space-3) var(--space-6); color: var(--color-accent-700); }
  .cabinet-mobile-menu .cabinet-nav-balance { margin-top: var(--space-4); }
}
@media (max-width: 600px) {
  .cabinet-header { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .cabinet-account { width: 100%; justify-content: space-between; }
  .cabinet-header, .cabinet-content { padding-left: var(--space-4); padding-right: var(--space-4); }
  .cabinet-warning { align-items: stretch; flex-direction: column; }
  .cabinet-actions { flex-direction: column; }
  .cabinet-amount { font-size: 30px; }
}
.cabinet-report-samples { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); font-size: 12.5px; }
.cabinet-report-sample { padding: 2px 8px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); font-size: 11.5px; color: var(--color-neutral-700); }

.cabinet-status-pending { background: var(--color-accent-100); color: var(--color-accent-800); }
.cabinet-status-approved { background: var(--color-status-ok-bg); color: var(--color-ok-800); }
.cabinet-status-rejected { background: var(--color-status-error-bg); color: var(--color-danger); }
.cabinet-status-issued { background: var(--color-accent-100); color: var(--color-accent-800); }
.cabinet-status-paid { background: var(--color-status-ok-bg); color: var(--color-ok-800); }
.cabinet-status-open { background: var(--color-accent-100); color: var(--color-accent-800); }
.cabinet-status-waiting_customer { background: var(--color-status-ok-bg); color: var(--color-ok-800); }
.cabinet-status-closed { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.ticket-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 40rem; }
.ticket-thread {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 44rem;
}
.ticket-bubble {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.ticket-bubble-customer { background: var(--color-neutral-100); }
.ticket-bubble-staff { background: var(--color-accent-100); border-color: transparent; }
.ticket-bubble-meta { font-size: 12px; color: var(--color-neutral-600); margin-bottom: 6px; }
.ticket-bubble-body { margin: 0; font-size: 15px; white-space: pre-wrap; }
.ticket-reply { max-width: 44rem; }
.admin-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-row-actions form { margin: 0; }
.admin-row-actions .btn { font-size: 13px; padding: 6px 12px; }

.field-hint { margin: 0 0 6px; font-size: 12px; color: var(--color-neutral-600); }
.field-check { display: flex; align-items: center; gap: 8px; }
.field-check label { margin: 0; }
.alpha-name-form { display: flex; flex-direction: column; gap: var(--space-4); }
.alpha-name-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: var(--space-8);
  align-items: start;
}
.alpha-name-help h2 { font-size: 20px; margin-bottom: var(--space-2); }
.alpha-name-help h3 { font-size: 15px; margin: var(--space-4) 0 var(--space-2); }
.alpha-name-help p, .alpha-name-help li { font-size: 14px; color: var(--color-neutral-700); }
.alpha-name-help ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.alpha-name-note {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--color-neutral-400);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.alpha-name-note p { margin: 0; }
.alpha-name-dl { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.alpha-name-dl div { display: grid; gap: 4px; }
.alpha-name-dl dt { font-size: 12px; color: var(--color-neutral-600); }
.alpha-name-dl dd { margin: 0; font-size: 15px; }
.alpha-name-reject-note { margin-top: 6px; white-space: normal; max-width: 28rem; }
.alpha-name-samples { white-space: pre-wrap; }
.admin-narrow-card { max-width: 32rem; }
.admin-status-title { font-size: 22px; }
.admin-card-actions { margin-top: 12px; }
.admin-shell .cabinet-nav-balance { display: none; }

@media (max-width: 900px) {
  .alpha-name-layout { grid-template-columns: 1fr; }
}

.cabinet-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}
.cabinet-settings .card { gap: var(--space-4); }
.cabinet-settings-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cabinet-settings-email { margin: 0; font-size: 15px; }
@media (max-width: 900px) {
  .cabinet-settings { grid-template-columns: 1fr; }
}

.cabinet-balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-8);
}
.cabinet-balance-form { display: flex; flex-direction: column; gap: var(--space-4); }
.cabinet-balance-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cabinet-balance-checkout { max-width: 28rem; }
.cabinet-balance-checkout-form { margin-top: var(--space-4); }
@media (max-width: 900px) {
  .cabinet-balance { grid-template-columns: 1fr; }
}

.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 28px 80px;
}
.legal-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}
.legal-page h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
}
.legal-lede {
  margin: 0 0 32px;
  color: var(--color-neutral-600);
  font-size: 16px;
  line-height: 1.5;
}
.legal-page h2 {
  margin: 28px 0 10px;
  font-size: 18px;
}
.legal-page p, .legal-page li {
  margin: 0 0 12px;
  line-height: 1.55;
  color: var(--color-neutral-800);
}
.legal-page a { color: inherit; }
.legal-dl {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 28px;
}
.legal-dl dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 0 0 4px;
}
.legal-dl dd { margin: 0; line-height: 1.5; }

.cabinet-settings-payers { margin-top: var(--space-6); }
.cabinet-payer-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.cabinet-payer-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-divider);
}
.cabinet-payer-row p { margin: 0; }
.cabinet-ledger .cabinet-table-scroll .table { min-width: 640px; }
.cabinet-ledger .cabinet-table-scroll td:not(:first-child) {
  white-space: normal;
  font-size: 14px;
}
.cabinet-ledger .table th {
  background: var(--color-neutral-100);
  padding: var(--space-3);
}
.cabinet-ledger .table td {
  padding: var(--space-3);
  vertical-align: middle;
}
.cabinet-ledger .table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}
.cabinet-ledger .table tbody tr:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}
.cabinet-status-topup { background: var(--color-status-ok-bg); color: var(--color-ok-800); }
.cabinet-status-bonus { background: var(--color-accent-100); color: var(--color-accent-800); }
.cabinet-status-charge { background: var(--color-status-error-bg); color: var(--color-danger); }
.cabinet-status-refund { background: var(--color-status-warn-bg); color: var(--color-warn); }
.cabinet-ledger-pdf {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.cabinet-ledger-pdf:hover { background: var(--color-accent-200); }