/* ============================================================
   СПАРТАК GPT · «Матчдей» · tokens.css
   ЕДИНЫЙ ИСТОЧНИК СТИЛЯ. Этот файл в неизменном виде живёт
   и в моках, и в проде. Менять значения — только здесь.
   ============================================================ */

:root {
  /* --- чаша стадиона --- */
  --bg: #0A0A0D;
  --bg-2: #131217;
  --bg-glow:
    radial-gradient(1000px 640px at 78% -12%, rgba(200,16,46,.16), transparent 62%),
    radial-gradient(720px 520px at -8% 104%, rgba(120,130,160,.07), transparent 55%);

  /* --- стекло --- */
  --glass: rgba(255,255,255,.045);
  --glass-strong: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.10);
  --glass-border-hot: rgba(237,27,36,.38);
  --blur: 18px;

  /* --- фирменные --- */
  --accent: #ED1B24;
  --accent-deep: #C8102E;
  --accent-grad: linear-gradient(135deg,#ED1B24,#FF4A52);
  --gold: #C9B872;            /* только награды/ранги академии */
  --text: #F5F3F1;
  --muted: #A29BA3;
  --ok: #37C978;
  --warn: #E8B33D;

  /* --- геометрия --- */
  --radius: 18px;
  --radius-sm: 12px;
  --cut: 14px;                /* ромбовый срез — сигнатура */
  --shadow: 0 10px 36px rgba(0,0,0,.38);
  --ease: cubic-bezier(.2,.7,.2,1);

  /* --- шрифты --- */
  --f-display: 'Unbounded', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- базовые примитивы (общие для мока и прода) ---------- */

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15.5px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body { background-image: var(--bg-glow); background-attachment: fixed; min-height: 100dvh; }

h1,h2,h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; margin: 0; }
.num { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* стеклянная панель */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.glass-strong { background: var(--glass-strong); }

/* СИГНАТУРА: ромбовый срез верхнего правого угла */
.cut {
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.cut::after {                 /* грань по линии среза; цвет — через --edge */
  content: ""; position: absolute; top: 0; right: 0;
  width: calc(var(--cut) * 1.6); height: 2px;
  background: var(--edge, transparent);
  transform: rotate(45deg);
  transform-origin: 100% 0;
}
.cut.is-active  { --edge: var(--accent); border-color: var(--glass-border-hot); }
.cut.is-passed  { --edge: var(--gold); }

/* кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: var(--glass); color: var(--text);
  font: 500 15px/1 var(--f-body); cursor: pointer;
  transition: transform .09s var(--ease), border-color .15s;
  user-select: none;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--accent-grad); border: none; font-weight: 600; }
.btn-ghost { background: transparent; }

/* чипы пресетов */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 14px; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; color: var(--text); font: 500 14px/1 var(--f-body);
  cursor: pointer; user-select: none;
}
.chip:active { transform: scale(.97); }

/* поля ввода: ≥16px против автозума iOS */
.input, textarea.input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  padding: 12px 14px; font: 400 16px/1.45 var(--f-body);
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--glass-border-hot); }

/* индикатор «печатает» — три ромбика */
.typing { display: inline-flex; gap: 6px; padding: 6px 2px; }
.typing i {
  width: 7px; height: 7px; background: var(--muted);
  transform: rotate(45deg); border-radius: 1.5px;
  animation: ty 1.1s infinite var(--ease);
}
.typing i:nth-child(2){ animation-delay:.15s } .typing i:nth-child(3){ animation-delay:.3s }
@keyframes ty { 0%,60%,100%{opacity:.35; scale:.85} 30%{opacity:1; scale:1.1; background:var(--accent)} }

/* тост */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom));
  padding: 12px 18px; border-radius: var(--radius-sm);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 14px; z-index: 90; box-shadow: var(--shadow);
}

/* фокус с клавиатуры */
:focus-visible { outline: 2px solid #FF4A52; outline-offset: 2px; border-radius: 4px; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* скроллбары */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* алиас для focus-visible (план ссылается на var(--accent-hot)) */
:root { --accent-hot: #FF4A52; }