/**
 * assets/css/base.css
 * Дизайн-токены (цвета, шрифты) + сброс стилей.
 * Стиль "Конструктор": графит + тёплый оранжевый акцент, блюпринт-сетка.
 * Подключается на всех страницах первым, до layout.css.
 */
:root{
  --bg:#12151A;
  --bg-2:#0D0F13;
  --panel:#1A1E24;
  --panel-2:#20252C;
  --text:#E9ECF1;
  --text-dim:#8D96A3;
  /* было #5C6470 — контраст 3,1 на фоне, мелкие подписи не читались; теперь 4,9 */
  --text-faint:#7D8693;
  --accent:#FF7A33;
  --accent-ink:#12151A;
  --line:#2A2F37;
  --line-bright:#3A4048;
  --ok:#5FBE8C;
  --wait:#E0B04D;
  --danger:#E0625A;
  --shadow:0 24px 60px -28px rgba(0,0,0,0.7);
  --font-display:'Syne', 'Segoe UI', sans-serif;
  --font-body:'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Consolas', monospace;
}

*, *::before, *::after{ box-sizing:border-box; }
/* Классическая ловушка: если у элемента в CSS задан свой display (flex/grid/...),
   он перебивает стандартное [hidden]{display:none} браузера, и .hidden=true в JS
   визуально не работает. Эта строка гарантирует, что hidden всегда побеждает —
   без неё, например, крестик у модалки материалов не закрывал её. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; text-wrap:balance; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

.wrap{ max-width:1200px; margin:0 auto; padding:0 32px; }
@media (max-width:520px){ .wrap{ padding:0 20px; } }

.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:8px;
}
.eyebrow::before{ content:"//"; color:var(--text-faint); }

.btn{
  font-family:var(--font-body); font-weight:600; font-size:14px; padding:11px 20px; border-radius:2px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  gap:8px; transition:transform .15s, background .15s, border-color .15s, opacity .15s;
}
.btn-solid{ background:var(--accent); color:var(--accent-ink); }
.btn-solid:hover{ transform:translateY(-1px); background:#FF8F52; }
.btn-line{ border-color:var(--line-bright); color:var(--text-dim); background:transparent; }
.btn-line:hover{ border-color:var(--accent); color:var(--text); }
.btn-ghost{ color:var(--text-dim); font-size:14px; text-decoration:none; font-family:var(--font-mono); background:none; border:none; cursor:pointer; }
.btn-ghost:hover{ color:var(--text); }
.btn-danger{ border-color:rgba(224,98,90,0.4); color:var(--danger); background:transparent; }
.btn-danger:hover{ background:rgba(224,98,90,0.1); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-block{ width:100%; justify-content:center; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--text-faint); text-transform:uppercase; }
.field input, .field select{
  background:var(--panel-2); border:1px solid var(--line-bright); color:var(--text);
  padding:10px 12px; border-radius:2px; font-family:var(--font-mono); font-size:14px; width:100%;
}
.field input:focus, .field select:focus{ border-color:var(--accent); }

.pill{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.03em; padding:5px 10px; border-radius:2px; text-transform:uppercase; white-space:nowrap; border:1px solid; }
.pill-progress{ background:rgba(255,122,51,0.1); color:var(--accent); border-color:rgba(255,122,51,0.35); }
.pill-wait{ background:rgba(224,176,77,0.1); color:var(--wait); border-color:rgba(224,176,77,0.3); }
.pill-done{ background:rgba(95,190,140,0.1); color:var(--ok); border-color:rgba(95,190,140,0.3); }
/* Черновик: нейтральная плашка. Живёт здесь, вместе с остальными -
   раньше лежала в editor.css и на страницах без него оказывалась без
   цвета вовсе, а рамка бралась от currentColor. */
.pill-draft{ background:rgba(255,255,255,0.05); color:var(--text-faint); border-color:var(--line-bright); }

.alert{ font-family:var(--font-mono); font-size:13px; padding:12px 16px; border-radius:2px; border:1px solid; margin-bottom:18px; }
.alert-error{ background:rgba(224,98,90,0.1); color:var(--danger); border-color:rgba(224,98,90,0.35); }
.alert-ok{ background:rgba(95,190,140,0.1); color:var(--ok); border-color:rgba(95,190,140,0.3); }