/* Classical — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600; /* review round 3: bold retired — semibold is the
     interface headings' ceiling (they need the weight at small sizes); display
     text goes lighter still, to the normal cut (see the deck) */
  --font-body: "Lora", 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: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: 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{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

/* ══════════════════════════════════════════════════════════════════════════
   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.12; letter-spacing: -0.015em; 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-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, 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;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
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-divider);
}
.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;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.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-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.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); }

/* ══════════════════════════════════════════════════════════════════════════
   Pulse page layer. Ported from the <helmet> of the original .dc.html
   (.design/Pulse Головна v2.dc.html) — there it lived as an inline <style>.
   Fonts (Cormorant Garamond, Lora, 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); }

/* Running pulse in the hero and in "Як це працює" */
@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-neutral-300);
  background: transparent;
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.tier-card:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.tier-card[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.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-400); color: var(--color-neutral-700); background: transparent; }
.tab-btn[aria-selected="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent-800);
  background: var(--color-accent-100);
}

.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, exactly the center of the 34px icon.
     The icon background (var(--color-bg)) covers the line at each step. */
  .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: 34px;
  height: 34px;
  /* The background covers the timeline running behind the icon. */
  background: var(--color-bg);
  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: 34px 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);
}

.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: 3px;
  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;
}
.cabinet-shell *, .cabinet-shell *::before, .cabinet-shell *::after { box-sizing: border-box; }
.cabinet-sidebar { 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: 2px; padding: 0 var(--space-3); }
.cabinet-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; font: inherit; font-size: 14px; 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-accent-700); background: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: inset 2px 0 0 var(--color-accent); }
.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); }
.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 a { flex: none; color: var(--color-accent-700); text-decoration: none; }
.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-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-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-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-delivered { background: var(--color-status-ok-bg); color: var(--color-ok-800); }
.cabinet-status-error { background: var(--color-status-error-bg); color: var(--color-danger); }
@media (max-width: 1279px) {
  .cabinet-stats { grid-template-columns: 1fr; }
  .cabinet-header, .cabinet-content { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@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; }
}