/* Оформление в духе Claude: тёплая бумага, глиняный акцент, серифные заголовки. */
:root{
  --bg:#FAF9F5;            /* тёплая бумага */
  --side:#F0EEE6;          /* боковая колонка */
  --raise:#FFFFFF;         /* приподнятые блоки: поле ввода, карточки */
  --hover:#E5E1D5;
  --sunken:#F1EFE7;
  --surface:#FFFFFF;
  --surface-2:#F3F1E9;
  --line:#E3DFD3;
  --line-2:#D3CDBD;
  --ink:#1F1E1D;
  --ink-2:#5F5C55;
  --ink-3:#78736A;   /* на светлом фоне более тёмный, иначе подписи бледнят */
  --accent:#D97757;        /* глина */
  --accent-2:#BD5D3E;
  --accent-wash:#F6E7DF;
  --ok:#3F7D5C; --ok-wash:#E4EFE7;
  --warn:#9A6B23; --warn-wash:#F6EBD8;
  --crit:#A8412F; --crit-wash:#F7E3DE;
  --shadow:0 1px 2px rgba(31,30,29,.04), 0 12px 30px -22px rgba(31,30,29,.5);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#262624; --side:#1F1E1D; --raise:#30302E; --hover:#3A3936; --sunken:#232220;
    --surface:#30302E; --surface-2:#2A2927;
    --line:#3B3A37; --line-2:#4C4A46;
    --ink:#F5F4EF; --ink-2:#B7B3A9; --ink-3:#8B867B;
    --accent:#D97757; --accent-2:#EE9B7C;
    --accent-wash:#3A2A22;
    --ok:#6FBF95; --ok-wash:#1E2E25;
    --warn:#D9A65C; --warn-wash:#332818;
    --crit:#E58A76; --crit-wash:#38211C;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,1);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#262624; --side:#1F1E1D; --raise:#30302E; --hover:#3A3936; --sunken:#232220;
  --surface:#30302E; --surface-2:#2A2927;
  --line:#3B3A37; --line-2:#4C4A46;
  --ink:#F5F4EF; --ink-2:#B7B3A9; --ink-3:#8B867B;
  --accent:#D97757; --accent-2:#EE9B7C; --accent-wash:#3A2A22;
  --ok:#6FBF95; --ok-wash:#1E2E25;
  --warn:#D9A65C; --warn-wash:#332818;
  --crit:#E58A76; --crit-wash:#38211C;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -22px rgba(0,0,0,1);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  font-size:16px; line-height:1.62; letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.serif{font-family:"Source Serif 4",Georgia,serif}
button{font:inherit}

.mark{width:28px; height:28px; display:block}
.mark--lg{width:46px; height:46px; margin:0 auto 18px}

/* ── страница входа ── */
.gate{min-height:100vh; display:grid; place-items:center; padding:24px}
.gate-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:40px 34px 36px; box-shadow:var(--shadow); text-align:center;
}
.gate h1{
  font-family:"Source Serif 4",Georgia,serif; font-weight:400;
  font-size:29px; line-height:1.22; margin:0 0 8px; letter-spacing:-.015em;
}
.gate .tagline{margin:0; color:var(--ink-2); font-size:14.5px}
.gate .widget{margin-top:26px; min-height:48px; display:flex; justify-content:center}
.hint{
  margin-top:26px; text-align:left; background:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; padding:15px 17px; font-size:13.5px; color:var(--ink-2);
}
.hint b{color:var(--ink)} .hint ol{margin:8px 0 0; padding-left:20px} .hint li{margin-bottom:5px}
.hint code{
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--surface);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px; white-space:nowrap;
}
.alert{
  margin-top:20px; border-radius:12px; padding:11px 15px; font-size:14px; text-align:left;
  background:var(--crit-wash); color:var(--crit); border:1px solid var(--crit);
}
.alert.info{background:var(--warn-wash); color:var(--warn); border-color:var(--warn)}
.foot{margin-top:24px; font-size:12.5px; color:var(--ink-3)}

/* ── шапка ── */
.top{
  border-bottom:1px solid var(--line); background:var(--surface);
  padding:11px 20px; display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:5;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:500; letter-spacing:-.01em}
.brand .name{font-family:"Source Serif 4",Georgia,serif; font-size:18px; font-weight:400}
.spacer{flex:1}
.who{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2)}
.who img{width:28px; height:28px; border-radius:50%; border:1px solid var(--line)}
.btn{
  font-size:13.5px; padding:7px 13px; border-radius:9px; cursor:pointer; text-decoration:none;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px; transition:.15s border-color,.15s color;
}
.btn:hover{color:var(--ink); border-color:var(--ink-3)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Кнопка темы фиксированного размера, иначе шапка дёргается при смене значка. */
.btn-icon{width:34px; height:34px; padding:0; justify-content:center; flex:0 0 34px}
.btn-icon svg{width:16px; height:16px}
/* Показываем значок той темы, в которую переключит нажатие. Селекторы одной
   специфичности, иначе одно правило гасит другое и видно сразу оба значка. */
.btn-icon .i-sun{display:none}
.btn-icon .i-contrast{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-icon .i-sun{display:block}
  :root:not([data-theme="light"]) .btn-icon .i-contrast{display:none}
}
:root[data-theme="dark"] .btn-icon .i-sun{display:block}
:root[data-theme="dark"] .btn-icon .i-contrast{display:none}
:root[data-theme="light"] .btn-icon .i-sun{display:none}
:root[data-theme="light"] .btn-icon .i-contrast{display:block}

/* ── содержимое ── */
.wrap{max-width:1060px; margin:0 auto; padding:34px 20px 72px}
h2{
  font-family:"Source Serif 4",Georgia,serif; font-weight:400;
  font-size:26px; margin:0 0 6px; letter-spacing:-.015em;
}
h3{font-size:15.5px; font-weight:600; margin:0 0 8px}
.sub{color:var(--ink-2); margin:0 0 26px; font-size:15px}
.cards{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); margin-bottom:24px}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; box-shadow:var(--shadow);
}
.card .k{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;
}
.card .v{font-size:23px; font-weight:500; margin-top:7px; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.card .n{font-size:13px; color:var(--ink-2); margin-top:3px}
.pill{
  display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px;
  border-radius:999px; font-family:"IBM Plex Mono",monospace;
}
.p-ok{background:var(--ok-wash); color:var(--ok)}
.p-wait{background:var(--warn-wash); color:var(--warn)}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px 24px; box-shadow:var(--shadow); margin-bottom:16px;
}
.panel p{margin:0 0 12px; color:var(--ink-2); font-size:14.6px}
.panel p:last-child{margin-bottom:0}
.steps{margin:0; padding-left:19px; color:var(--ink-2); font-size:14.6px}
.steps li{margin-bottom:7px}
.steps li::marker{color:var(--accent)}
.steps b{color:var(--ink); font-weight:600}
code{
  font-family:"IBM Plex Mono",monospace; font-size:.87em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:5px; padding:1px 5px;
}

/* ── инвентарь ── */
.page-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:22px}
.page-head h2{margin-bottom:4px}
.page-head .sub{margin:0}
.page-head form{margin-left:auto}
.filter{font-size:13.5px; color:var(--ink-2); margin:-8px 0 16px}
.card-link{display:block; text-decoration:none; color:inherit; transition:.15s border-color}
.card-link:hover{border-color:var(--line-2)}
.card-link.is-active{border-color:var(--accent); background:var(--accent-wash)}
.card-link .v{margin-top:4px}
.p-neut{background:var(--surface-2); color:var(--ink-3)}
.tw{
  overflow-x:auto; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow);
}
table{border-collapse:collapse; width:100%; font-size:14.4px; min-width:640px}
th,td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
.nm{font-weight:500}
.tag{font-size:12px; color:var(--ink-3); margin-top:2px}
.nowrap{white-space:nowrap}
.facts{max-width:420px}
.facts .fact{
  display:inline-block; font-size:12.3px; color:var(--ink-2); margin:0 10px 2px 0; white-space:nowrap;
}
.facts .fact i{color:var(--ink-3); font-style:normal}
.page-head .search{margin-left:auto}
.page-head .search input{
  font:inherit; font-size:14px; width:270px; max-width:44vw; padding:7px 12px;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface);
  color:var(--ink);
}
.page-head .search input::placeholder{color:var(--ink-3)}
.page-head .search input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.page-head form + form{margin-left:10px}