/* ═══════════════════════════════════════════════════════════
   uGrant — «КАРТОТЕКА»
   Дизайн-философия: государственный архив, ставший навигатором.
   Линованная бумага реестра · штампованная печать «одобрено» ·
   измерительный прибор · машинописные регистрационные коды.
   Не сетка одинаковых карточек — редакторская асимметрия.
═══════════════════════════════════════════════════════════ */
:root{
  /* — Бумага архива (НЕ белый — тёплый, выцветший) — */
  --paper:#F2EEE4;        /* основной фон — состаренная бумага */
  --paper-warm:#EDE7D9;   /* углубление */
  --paper-card:#FBF8F1;   /* карточка-документ, светлее фона */
  --paper-edge:#E3DBC8;   /* край листа */

  /* — Чернила (НЕ чёрный — тёмно-сине-серый, как старая печать) — */
  --ink:#1C2024;
  --ink-soft:#3A3F45;
  --ink-faint:#6B7078;
  --ink-ghost:#9A9E9C;

  /* — Линовка и штрихи реестра — */
  --rule:#D4CBB6;         /* линии ledger */
  --rule-strong:#BCB199;
  --rule-ink:#C0392B;     /* красная поля-линия, как в тетради/реестре */

  /* — Печать: сургучно-кирпичный + латунь оттиска — */
  --seal:#9B2D20;         /* красная печать «одобрено» */
  --seal-deep:#7A2218;
  --brass:#A6792E;        /* латунь оттиска */
  --brass-light:#C9A227;
  --brass-glow:rgba(166,121,46,.14);

  /* — Глубокий архивный синий (для тёмных полей) — */
  --night:#15212E;        /* тёмно-сине-чернильный */
  --night-2:#1D2D3D;
  --on-night:#EDE7D9;     /* бумажный текст на тёмном */
  --on-night-dim:rgba(237,231,217,.6);
  --on-night-faint:rgba(237,231,217,.34);

  /* — Семантика (приглушённая, не «техно») — */
  --ok:#2F6B3E;   --ok-soft:#E2EDDD;
  --warn:#8A5A1A; --warn-soft:#F0E6CF;
  --bad:#9B2D20;  --bad-soft:#F0DED9;

  /* — Геометрия: почти без скруглений (бумага, штамп) — */
  --r-0:0; --r-2:2px; --r-3:3px; --r-4:4px; --r-6:6px;

  /* — Тени: как лист на столе, мягкие тёплые — */
  --sh-paper:0 1px 1px rgba(28,32,36,.04), 0 2px 6px rgba(28,32,36,.06);
  --sh-lift:0 4px 10px rgba(28,32,36,.08), 0 16px 36px rgba(28,32,36,.12);
  --sh-deep:0 24px 60px rgba(21,33,46,.30);

  /* — Шрифты: редакторский высококонтрастный serif (заголовки-документы),
       машинопись (коды/данные), тихий гротеск (текст) — */
  --f-head:'Cormorant Garamond',Georgia,serif;   /* редакторская подача */
  --f-mono:'IBM Plex Mono',monospace;             /* регистрационные коды */
  --f-body:'Spectral','Georgia',serif;            /* текст — тоже с засечками, «документ» */
  --f-sans:'IBM Plex Sans','Helvetica Neue',sans-serif; /* служебный гротеск */

  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;overflow-x:hidden;width:100%}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overflow-x:hidden;
  width:100%;
  min-width:0;
}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
::selection{background:var(--brass-light);color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
:focus-visible{outline:2px solid var(--seal);outline-offset:2px}

/* ── Машинописная служебная метка (регистрационный код) ── */
.reg{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.reg-seal{color:var(--seal)}

/* ── Кнопки: штамп, не «пилюля» ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;font-family:var(--f-sans);font-size:14px;font-weight:600;
  letter-spacing:.01em;border-radius:var(--r-2);cursor:pointer;
  transition:transform .14s cubic-bezier(.2,.7,.3,1),box-shadow .2s,background .15s,color .15s,border-color .15s;
  white-space:nowrap;position:relative;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-seal{background:var(--seal);color:var(--paper);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 14px rgba(155,45,32,.25)}
.btn-seal:hover{background:var(--seal-deep);transform:translateY(-1px);box-shadow:0 6px 20px rgba(155,45,32,.32)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--night);transform:translateY(-1px)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{color:var(--ink);background:var(--paper-warm)}
.btn-sm{padding:9px 18px;font-size:13px}
.btn-lg{padding:16px 34px;font-size:15px}
.btn-block{width:100%}

/* ── Чип-маркер (как ярлык в картотеке) ── */
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.06em;border-radius:var(--r-2);text-transform:uppercase}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-bad{background:var(--bad-soft);color:var(--bad)}
.chip-lock{background:var(--paper-warm);color:var(--ink-ghost);border:1px dashed var(--rule-strong)}

/* ── Toast ── */
#toast{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--paper);padding:14px 20px;border-radius:var(--r-2);
  box-shadow:var(--sh-deep);font-family:var(--f-sans);font-size:14px;max-width:340px;
  border-left:3px solid var(--brass);transform:translateY(80px);opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s;pointer-events:none}
#toast.show{transform:none;opacity:1}
#toast.is-error{border-left-color:var(--seal)}
#toast.is-ok{border-left-color:var(--ok)}

.spinner{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,var(--paper-warm) 25%,var(--paper-edge) 50%,var(--paper-warm) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}