/* =========================================================
   manyway — Design System
   Tailwind (CDN) handles utilities. This file owns brand
   tokens, components, and any selectors Tailwind can't.

   Brand: lime #E1F5B4 accent, beige #F5FAE6, pure black
   surfaces, thin 1.5–2px line graphics, Inter lowercase.
   ========================================================= */

:root {
  /* Brand palette (manyway lime/green + pure black) */
  --brand-50:  #F9FCEF;
  --brand-100: #F5FAE6;   /* beige section background */
  --brand-200: #EDF8CE;
  --brand-300: #EAF7C9;
  --brand-400: #E5F6BE;
  --brand-500: #E1F5B4;   /* lime — primary accent fill */
  --brand-600: #C3DCAF;   /* green — secondary fill */
  --brand-700: #4E6B3F;   /* dark green — readable accent text */
  --brand-800: #33482A;
  --brand-900: #000000;   /* dark surfaces — pure black */
  --brand-950: #000000;   /* deepest dark / hero — pure black */

  /* Accent (green-grays from the brandbook) */
  --accent-300: #D6E1D6;
  --accent-400: #9BB99B;  /* brandbook dark green */
  --accent-500: #6B826B;
  --accent-600: #4E624E;
  --accent-700: #37452F;

  --coral-500: #000000;   /* dark for highlights (legacy alias) */

  --ink-900: #0A0A0A;
  --ink-700: #262626;
  --ink-500: #525252;
  --ink-400: #737373;
  --ink-300: #A3A3A3;
  --ink-200: #D9D9D4;
  --ink-100: #EAEAE4;
  --ink-50:  #F6F6F1;

  --bg:        #FFFFFF;
  --bg-card:   #ffffff;
  --bg-elev:   #ffffff;
  --bg-muted:  #F4F7EA;

  --success-bg:   #EFF7E2;
  --success-fg:   #3E5A2A;
  --warn-bg:      #FAF5E4;
  --warn-fg:      #7A6218;
  --danger-bg:    #FDF1F1;
  --danger-fg:    #A33A3A;
  --info-bg:      #F0F4F0;
  --info-fg:      #4E624E;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(10, 10, 10, 0.10), 0 2px 6px -2px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 18px 40px -12px rgba(10, 10, 10, 0.18), 0 8px 16px -8px rgba(10, 10, 10, 0.10);
  --shadow-brand: 0 12px 26px -10px rgba(0, 0, 0, 0.40);
  --shadow-accent: 0 12px 26px -10px rgba(155, 185, 155, 0.45);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", "Inter var", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background: var(--bg);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

a { color: inherit; text-decoration: none; }

/* ---------- Brand bits ---------- */
.brand-wordmark {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.125rem;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
/* legacy inner spans of the old wordmark — blend into plain text */
.brand-wordmark .pay,
.brand-wordmark .pay-on-light {
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.brand-wordmark .reg {
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 0.15em;
  letter-spacing: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--ink-900);
  color: var(--ink-900);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
.eyebrow-accent {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #000000;
}

/* Bracket chip — "[ 04 коридора ]" label in a thin frame */
.chip-frame {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hand-drawn oval around a word (pairs with an inline SVG ellipse) */
.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin-left: 0.55em;  /* овал выступает влево — не даём ему лечь на соседнее слово */
  margin-right: 0.5em;
  margin-top: 0.32em;   /* если слово не на первой строке — дуга овала не режет строку выше */
}
.circled > svg {
  position: absolute;
  inset: -0.44em -0.72em;
  width: calc(100% + 1.44em);
  height: calc(100% + 0.88em);
  pointer-events: none;
}

/* Hand-drawn underline squiggle */
.underlined-hand {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.underlined-hand > svg {
  position: absolute;
  left: -0.1em; right: -0.1em; bottom: -0.46em;
  width: calc(100% + 0.2em);
  height: 0.45em;
  pointer-events: none;
}

/* ---------- Layout ---------- */
.container-narrow { max-width: 920px; margin-left: auto; margin-right: auto; }
.container-wide   { max-width: 1200px; margin-left: auto; margin-right: auto; }
.section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .section { padding-top: 5rem; padding-bottom: 5rem; } }

/* ---------- Cards / surfaces ---------- */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
@media (min-width: 768px) { .card { padding: 1.75rem; } }

.card-elev {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
}

.card-tonal {
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-100) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-200);
  padding: 1.5rem;
}

.card-dark {
  background: #000000;
  color: #F5FAE6;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 1.5rem;
}

.surface-muted {
  background: var(--bg-muted);
  border-radius: var(--radius);
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-accent,
.btn-ghost,
.btn-dark,
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary:hover, .btn-accent:hover, .btn-dark:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-accent:active, .btn-dark:active { transform: translateY(0); }

/* Primary CTA — pure black, white text */
.btn-primary {
  background: #000000;
  color: #ffffff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { background: #262626; color: #ffffff; }

/* Accent CTA — lime fill, black text (for use on dark surfaces) */
.btn-accent {
  background: var(--brand-500);
  color: #000000;
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover { background: #D4EC9E; color: #000000; }

.btn-dark {
  background: #000000;
  color: #fff;
}
.btn-dark:hover { background: #262626; }

.btn-ghost {
  background: transparent;
  border-color: var(--ink-200);
  color: var(--ink-700);
}
.btn-ghost:hover { background: var(--bg-muted); border-color: var(--ink-300); }

.btn-outline {
  background: #fff;
  border-color: var(--ink-900);
  color: var(--ink-900);
}
.btn-outline:hover { background: var(--brand-500); border-color: var(--ink-900); }

.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.825rem; border-radius: 10px; }
.btn-lg { padding: 0.95rem 1.5rem; font-size: 1rem; border-radius: 14px; }
.btn-block { width: 100%; }

/* ---------- Forms ---------- */
.label {
  display: block;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
}
.help {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-400);
  margin-top: 0.35rem;
}
.input,
select.input,
textarea.input {
  display: block;
  width: 100%;
  padding: 0.65rem 0.85rem;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input:hover { border-color: var(--ink-300); }
.input:focus {
  outline: none;
  border-color: var(--ink-900);
  box-shadow: 0 0 0 4px rgba(225, 245, 180, 0.65);
}
.input:disabled, .input[readonly] { background: var(--bg-muted); color: var(--ink-400); cursor: not-allowed; }
.input::placeholder { color: var(--ink-300); opacity: 0.55; font-weight: 400; font-style: italic; }
.input:focus::placeholder { opacity: 0.35; }
select.input { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23525252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* Radio-as-card */
.radio-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  min-height: 78px;
}
.radio-card:hover { border-color: var(--ink-400); }
.radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-card input:checked ~ .radio-card-body {
  color: var(--ink-900);
}
.radio-card:has(input:checked) {
  border-color: var(--ink-900);
  background: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(225, 245, 180, 0.45);
}
.radio-card input:disabled ~ .radio-card-body { color: var(--ink-300); }
.radio-card:has(input:disabled) { background: var(--bg-muted); cursor: not-allowed; opacity: 0.7; }
.radio-card .ttl { font-weight: 600; font-size: 0.9rem; }
.radio-card .sub { font-size: 0.75rem; color: var(--ink-400); }
.radio-card:has(input:checked) .sub { color: var(--ink-700); }

/* ---------- Tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
/* Mobile: wrap tables in horizontal scroll so they don't break layout */
@media (max-width: 640px) {
  .tbl { min-width: 480px; }
  .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare { min-width: 560px; font-size: 0.825rem; }
  .hero h1 { font-size: 1.875rem; line-height: 1.15; }
  .hero { padding-top: 2rem; padding-bottom: 2rem; }
  .section { padding-top: 2rem; padding-bottom: 2rem; }
  .step-card { padding: 1rem; }
  .card { padding: 1.25rem; }
  .btn-lg { padding: 0.7rem 1.1rem; font-size: 0.9rem; }
  /* Stack form rows */
  .grid.md\:grid-cols-2 > * { min-width: 0; }
}
.tbl thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-400);
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--ink-100);
}
.tbl tbody td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--bg-muted); }

/* ---------- Key-value rows ---------- */
.kvp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--ink-100);
  gap: 1rem;
}
.kvp:last-child { border-bottom: 0; }
.kvp dt { color: var(--ink-500); font-size: 0.9rem; }
.kvp dd { color: var(--ink-900); font-weight: 600; }
.kvp-total {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--ink-900);
  border-bottom: 0;
  align-items: baseline;
}
.kvp-total dt { font-size: 1rem; font-weight: 600; color: var(--ink-900); }
.kvp-total dd {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-900);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---------- Badges / chips ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--ink-50);
  color: var(--ink-700);
  border: 1px solid var(--ink-100);
}
.badge-brand   { background: var(--brand-500);   color: #000000;            border-color: var(--brand-600); }
.badge-success { background: var(--success-bg);  color: var(--success-fg);  border-color: #CFE4B4; }
.badge-warn    { background: var(--warn-bg);     color: var(--warn-fg);     border-color: #E8D9A8; }
.badge-danger  { background: var(--danger-bg);   color: var(--danger-fg);   border-color: #F1C7C7; }
.badge-info    { background: var(--info-bg);     color: var(--info-fg);     border-color: #CBD8CB; }
.badge-dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
}

/* Status pills for deals — monochrome-green scale */
.status-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; }
.status-NEW              { background: var(--ink-50);    color: var(--ink-500);   border-color: var(--ink-100); }
.status-DOCS_GENERATED   { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-200); }
.status-SENT_TO_ARCADIA  { background: var(--brand-500); color: #000000;          border-color: #D4EC9E; }
.status-PAYMENT_RECEIVED { background: #DDEBD0;          color: var(--brand-800); border-color: var(--brand-600); }
.status-SENT_TO_SELLER   { background: var(--accent-400); color: #0A0A0A;         border-color: var(--accent-500); }
.status-COMPLETED        { background: #000000;          color: var(--brand-500); border-color: #000000; }
.status-CANCELED         { background: var(--danger-bg); color: var(--danger-fg); border-color: #F1C7C7; }
.status-IN_PROGRESS      { background: var(--brand-100); color: var(--brand-700); border-color: var(--brand-300); }
.status-DONE             { background: #000000;          color: var(--brand-500); border-color: #000000; }

/* ---------- Stepper ---------- */
.stepper { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .stepper { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }

.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.step-card .step-num {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-500);
  color: #000000;
  font-weight: 700;
  font-size: 0.95rem;
}
.step-card .step-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
  color: var(--ink-900);
}
.step-card .step-icon svg { width: 22px; height: 22px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: #000000;
  color: #F5FAE6;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  color: #fff;
}
.hero h1 .accent {
  color: var(--brand-500);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero p.lead {
  font-size: 1.125rem;
  color: #C9CFC0;
  max-width: 38rem;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: #E4E9DB;
  font-size: 0.85rem;
}
.trust-item .ico {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(225, 245, 180, 0.14);
  color: var(--brand-500);
}
.trust-item .ico svg { width: 18px; height: 18px; }

/* ---------- Comparison table ---------- */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-100);
}
.compare th, .compare td {
  padding: 0.9rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
  font-size: 0.92rem;
}
.compare thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-500);
  background: var(--bg-muted);
}
.compare thead th.us { background: var(--brand-500); color: #000000; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td.us { background: rgba(225, 245, 180, 0.22); font-weight: 600; }
.compare .yes { color: var(--brand-700); font-weight: 700; }
.compare .no  { color: var(--danger-fg);   font-weight: 600; }

/* ---------- Accordion ---------- */
.acc-item {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  margin-bottom: 0.6rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.acc-item summary {
  cursor: pointer;
  padding: 1rem 1.15rem;
  font-weight: 600;
  color: var(--ink-900);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after {
  content: "";
  width: 14px; height: 14px;
  border-right: 2px solid var(--ink-400);
  border-bottom: 2px solid var(--ink-400);
  transform: rotate(45deg);
  transition: transform .2s ease;
  flex-shrink: 0;
  margin-top: -4px;
}
.acc-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.acc-item .acc-body {
  padding: 0 1.15rem 1.15rem 1.15rem;
  color: var(--ink-500);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- Progress (for /apply) ---------- */
.progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.progress .pstep {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--ink-400);
}
.progress .pdot {
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-muted);
  color: var(--ink-400);
  font-weight: 700;
  font-size: 0.825rem;
  border: 1px solid var(--ink-100);
}
.progress .pstep.active .pdot { background: #000000; color: var(--brand-500); border-color: #000000; }
.progress .pstep.active { color: var(--ink-900); font-weight: 600; }
.progress .pline {
  height: 2px;
  flex: 1;
  background: var(--ink-100);
  border-radius: 2px;
}
@media (max-width: 640px) {
  .progress .pstep .ptxt { display: none; }
}

/* ---------- Bar chart (customs result) ---------- */
.bar-chart { display: flex; flex-direction: column; gap: 0.5rem; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 110px; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.bar-track { background: var(--bg-muted); border-radius: 999px; height: 10px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; }
.bar-duty       { background: #000000; }
.bar-excise     { background: var(--brand-700); }
.bar-recycling  { background: var(--accent-400); }
.bar-vat        { background: #D4EC9E; }
.bar-row .lbl { color: var(--ink-500); }
.bar-row .val { text-align: right; font-weight: 600; color: var(--ink-900); }

/* ---------- Admin shell ---------- */
.admin-shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 1024px) { .admin-shell { grid-template-columns: 260px 1fr; } }
.admin-side {
  background: #000000;
  color: #C9CFC0;
  padding: 1.5rem 1rem;
  min-height: 100vh;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.admin-side .brand-wordmark { color: #fff; font-size: 1.05rem; }
.admin-nav { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.admin-nav a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  color: #A9AFA0;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.admin-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.admin-nav a.active { background: var(--brand-500); color: #000000; }
.admin-nav a svg { width: 18px; height: 18px; opacity: 0.85; }
.admin-main {
  background: var(--bg);
  padding: 1.5rem;
}
@media (min-width: 768px) { .admin-main { padding: 2rem 2.5rem; } }

.metric-card {
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ink-100);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
}
.metric-card .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-400); margin-bottom: 0.5rem; }
.metric-card .value { font-size: 1.75rem; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; }
.metric-card .delta { font-size: 0.8rem; color: var(--ink-500); margin-top: 0.25rem; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--ink-100); margin: 1.5rem 0; }
.kbd {
  display: inline-block; padding: 0.1rem 0.4rem;
  background: var(--bg-muted); border: 1px solid var(--ink-100);
  border-radius: 6px; font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--ink-700);
}
.code {
  background: var(--bg-muted); padding: 0.1rem 0.4rem; border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em; color: var(--ink-700);
}
.tabular { font-variant-numeric: tabular-nums; }

/* HTMX loading hints */
.htmx-indicator { opacity: 0; transition: opacity .15s ease; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.btn-primary, .htmx-request .btn-primary { opacity: 0.7; pointer-events: none; }

/* Focus visible */
:focus-visible {
  outline: 3px solid rgba(155, 185, 155, 0.65);
  outline-offset: 2px;
}

/* Smooth disable for "Phase 2" radios */
.lock-tip {
  position: absolute;
  top: 0.4rem; right: 0.4rem;
  font-size: 0.7rem; color: var(--ink-400);
  background: var(--bg-muted);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
}

/* =========================================================
   manyway brand extras — postcard series & fx chart
   ========================================================= */

/* ---------- Postcard series (4 cards, greens crescendo) ---------- */
.postcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .postcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .postcards { grid-template-columns: repeat(4, 1fr); } }

.postcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #000000;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 20px;
  padding: 1.4rem 1.15rem 1.6rem;
  min-height: 25rem;
}
.postcard-1 { background: #F5FAE6; }
.postcard-2 { background: #E1F5B4; }
.postcard-3 { background: #C3DCAF; }
.postcard-4 { background: #9BB99B; }

.postcard-brand {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.postcard-brand .r {
  font-size: 0.55em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 0.1em;
}

.postcard-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 1.1rem;
  width: 100%;
}
.postcard-art svg {
  width: 100%;
  max-width: 9.5rem;
  height: auto;
}

/* Hand-drawn speech bubble: white wobbly oval, sketchy black outline */
.speech-bubble {
  position: relative;
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%;
  padding: 1.05rem 1.5rem;
  transform: rotate(-2deg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  max-width: 15.5rem;
  text-transform: lowercase;
}
.postcard:nth-child(even) .speech-bubble {
  transform: rotate(1.6deg);
  border-radius: 44% 56% 47% 53% / 56% 45% 55% 44%;
}
.speech-bubble .bubble-num {
  position: absolute;
  top: -11px;
  right: -7px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-500);
  border: 1.5px solid #000000;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  transform: rotate(3deg);
}

.postcard-link {
  margin-top: 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #000000;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-transform: lowercase;
  transition: opacity .15s ease;
}
.postcard-link:hover { opacity: 0.65; }

@media (max-width: 640px) {
  .postcard { min-height: 22rem; }
  .postcard-art svg { max-width: 8rem; }
}

/* ---------- FX chart card (brand rate chart) ---------- */
.fx-card {
  background: #ffffff;
  color: #000000;
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem 0.9rem;
  max-width: 30rem;
  box-shadow: var(--shadow-md);
}
.fx-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.fx-head .fx-pair { text-transform: lowercase; }
.fx-head .fx-rate { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-divider {
  height: 1px;
  background: #000000;
  margin: 0.6rem 0 0.7rem;
}
.fx-chart {
  display: block;
  width: 100%;
  height: auto;
}
.fx-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--ink-500);
  text-transform: lowercase;
}
.fx-foot .fx-brand {
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.02em;
}
.fx-foot .fx-brand .r {
  font-size: 0.6em;
  font-weight: 600;
  vertical-align: super;
}
.fx-note {
  margin-top: 0.45rem;
  font-size: 0.68rem;
  color: var(--ink-400);
}


/* =========================================================
   manyway — motion & decor layer (NEW, appended)
   Только новые классы; существующие имена не тронуты.
   ========================================================= */

/* ---------- scroll reveal ---------- */
.rvl { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.8,.32,1); will-change: opacity, transform; }
.rvl-in { opacity: 1; transform: none; }
.rvl .rvl-child { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.32,1); }
.rvl-in .rvl-child { opacity: 1; transform: none; }
.rvl-in .rvl-child:nth-child(1) { transition-delay: .06s; }
.rvl-in .rvl-child:nth-child(2) { transition-delay: .14s; }
.rvl-in .rvl-child:nth-child(3) { transition-delay: .22s; }
.rvl-in .rvl-child:nth-child(4) { transition-delay: .30s; }
.rvl-in .rvl-child:nth-child(5) { transition-delay: .38s; }
.rvl-in .rvl-child:nth-child(6) { transition-delay: .46s; }

/* ---------- marquee ribbon ---------- */
.mw-marquee { overflow: hidden; background: #000000; color: #ffffff; }
.mw-marquee-track { display: flex; width: max-content; animation: mw-scroll 28s linear infinite; }
.mw-marquee:hover .mw-marquee-track { animation-play-state: paused; }
.mw-marquee-seq { display: flex; align-items: center; gap: 2.75rem; padding: 0.95rem 1.375rem 1rem; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: lowercase; white-space: nowrap; }
.mw-marquee-seq .mw-fan-sep { width: 15px; height: 15px; color: var(--brand-500); flex: none; }
@keyframes mw-scroll { to { transform: translateX(-50%); } }

/* ---------- black interlude (air) ---------- */
.interlude { position: relative; overflow: hidden; background: #000000; color: #F5FAE6; text-align: center; padding: 6.5rem 1.5rem; }
@media (max-width: 640px) { .interlude { padding: 4rem 1rem; } }
.interlude-phrase { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem 1.6rem; font-size: clamp(1.05rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: 0.42em; text-transform: uppercase; text-indent: 0.42em; }
.interlude-phrase .mw-fan-sep { width: 17px; height: 17px; color: var(--brand-500); flex: none; }
.interlude-sub { margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.3em; text-transform: lowercase; color: var(--accent-400); }

/* ---------- swallow wing flap — brandbook low-fps, step-end ---------- */
.flap .wing-upper { transform-box: fill-box; transform-origin: 0% 100%; animation: mw-flap-up 1.15s steps(1, end) infinite; }
.flap .wing-lower { transform-box: fill-box; transform-origin: 100% 0%; animation: mw-flap-low 1.15s steps(1, end) infinite; }
@keyframes mw-flap-up { 0% { transform: rotate(0deg); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0deg); } }
@keyframes mw-flap-low { 0% { transform: rotate(0deg); } 35% { transform: rotate(7deg); } 70% { transform: rotate(-3deg); } 100% { transform: rotate(0deg); } }

/* ---------- fx chart line draw ---------- */
.fx-line-anim { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.fx-area-anim, .fx-cursor-anim { opacity: 0; }
.rvl-in .fx-line-anim { animation: mw-draw 1.7s cubic-bezier(.4,0,.2,1) .25s forwards; }
.rvl-in .fx-area-anim { animation: mw-fade .8s ease 1.45s forwards; }
.rvl-in .fx-cursor-anim { animation: mw-fade .5s ease 1.85s forwards; }
@keyframes mw-draw { to { stroke-dashoffset: 0; } }
@keyframes mw-fade { to { opacity: 1; } }

/* ---------- hand-drawn accents draw-on ---------- */
.hand-draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.rvl-in .hand-draw { animation: mw-draw 0.9s ease .45s forwards; }

/* ---------- doodles (line-art decor) ---------- */
.has-doodles { position: relative; }
.doodle { position: absolute; pointer-events: none; display: none; }
@media (min-width: 1024px) { .doodle { display: block; } }

/* currency coin sticker on cards */
.has-coin { position: relative; }
.coin-sticker { position: absolute; top: -13px; right: 16px; width: 44px; height: 44px; border-radius: 999px; background: #ffffff; border: 2px solid #000000; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; line-height: 1; transform: rotate(8deg); box-shadow: var(--shadow-sm); pointer-events: none; }
.coin-lime  { background: var(--brand-500); }
.coin-beige { background: var(--brand-100); }
.coin-green { background: var(--brand-600); }
.coin-tilt-l { transform: rotate(-7deg); }

/* ---------- hover life for link-cards ---------- */
.tilt { transition: transform .25s cubic-bezier(.22,.8,.32,1), box-shadow .25s ease; cursor: pointer; }
.tilt:hover { transform: rotate(-1.2deg) translateY(-4px); box-shadow: var(--shadow-lg); }
.tilt-r:hover { transform: rotate(1.2deg) translateY(-4px); }
.tilt .arr { transition: transform .25s ease; }
.tilt:hover .arr { transform: translateX(4px); }
.tilt:hover .arr-diag { transform: translate(4px, -4px); }
.postcard.tilt:hover { transform: rotate(-1.6deg) translateY(-6px); box-shadow: var(--shadow-md); }
.postcard.tilt-r:hover { transform: rotate(1.4deg) translateY(-6px); }

/* ---------- reduced motion: всё выключаем ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rvl, .rvl .rvl-child { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mw-marquee-track { animation: none !important; }
  .flap .wing-upper, .flap .wing-lower { animation: none !important; }
  .fx-line-anim { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .fx-area-anim, .fx-cursor-anim { opacity: 1 !important; animation: none !important; }
  .hand-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .tilt, .tilt .arr { transition: none !important; }
  .tilt:hover, .tilt-r:hover, .postcard.tilt:hover, .postcard.tilt-r:hover { transform: none !important; }
  .btn-primary:hover, .btn-accent:hover, .btn-dark:hover { transform: none !important; }
}