/* ============================================================
   TokenTrend — общая дизайн-система для служебных страниц
   (вход, кабинет, админка). Те же токены, что и на главной.

   Правила стиля (утверждены владельцем, не менять без спроса):
   без скруглений, без теней, без градиентов. Разделение — только
   рамками и сдвигом фона поверхности. Числа моноширинные с
   tabular-nums, чтобы колонки не прыгали.
   ============================================================ */
:root{
  --bg:#0b0c0e;
  --surface:#121417;
  --surface-2:#17191d;
  --surface-3:#1d2026;
  --line:#262a31;
  --line-2:#333841;

  --fg:#e8ebf0;
  --fg-2:#9aa3b2;
  --fg-3:#6b7480;

  --up:#00d4aa;
  --down:#ff4757;
  --warn:#ffb800;
  --accent:#ffb800;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;

  --row-h:34px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:13px/1.45 var(--sans);-webkit-font-smoothing:antialiased;
}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--up)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--fg-3)}
.lbl{font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s2);top:var(--s2);background:var(--surface-3);color:var(--fg);
  padding:var(--s2) var(--s3);z-index:99;border:1px solid var(--accent)}

/* ---------- Шапка (совпадает с главной) ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:stretch;min-height:44px}
.brand{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4);
  font:700 14px/1 var(--sans);letter-spacing:.02em;border-right:1px solid var(--line);white-space:nowrap}
.brand svg{width:18px;height:18px;flex:none}
.brand em{font-style:normal;color:var(--accent)}
.nav{display:flex;align-items:stretch}
.nav a{display:flex;align-items:center;padding:0 var(--s4);color:var(--fg-2);text-decoration:none;
  font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border-right:1px solid var(--line);
  transition:color .15s,background .15s}
.nav a:hover{color:var(--fg);background:var(--surface-2)}
.nav a[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);
  border-left:1px solid var(--line);flex-wrap:wrap;justify-content:flex-end}
.who{font:11px/1.3 var(--mono);color:var(--fg-2);text-align:right;max-width:220px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Кнопки ---------- */
.btn{background:transparent;border:1px solid var(--line-2);color:var(--fg-2);padding:6px 12px;
  font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.btn:hover{color:var(--fg);border-color:var(--fg-3);background:var(--surface-2)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#0b0c0e}
.btn.pri:hover{background:#ffc62a;border-color:#ffc62a;color:#0b0c0e}
.btn.ok{border-color:var(--up);color:var(--up)}
.btn.ok:hover{background:rgba(0,212,170,.12);color:var(--up)}
.btn.bad{border-color:var(--down);color:var(--down)}
.btn.bad:hover{background:rgba(255,71,87,.12);color:var(--down)}
.btn.sm{padding:4px 8px;font-size:9px}
.btn.block{width:100%;padding:10px}

/* ---------- Панели ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:var(--s5) var(--s4) var(--s6)}
.narrow{max-width:440px;margin:0 auto;padding:var(--s6) var(--s4)}
.pane{background:var(--surface);border:1px solid var(--line);margin-bottom:var(--s4)}
.pane-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.pane-head .tail{margin-left:auto;font:11px/1 var(--mono);color:var(--fg-3)}
.pane-in{padding:var(--s4)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s4)}
.row{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.sep{height:1px;background:var(--line);margin:var(--s4) 0}

/* ---------- Таблицы ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dim{color:var(--fg-3)}
.tbl-wrap{overflow-x:auto}

/* ---------- Формы ---------- */
.f{margin-bottom:var(--s4)}
.f label{display:block;font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:var(--s2)}
.f input,.f select,.f textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);
  padding:9px 10px;font:13px/1.4 var(--sans)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--accent);background:var(--surface-3)}
.f input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
.f textarea{min-height:150px;font:12px/1.5 var(--mono);resize:vertical}
.f .help{margin-top:var(--s1);font:11px/1.4 var(--sans);color:var(--fg-3)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s3)}
@media (max-width:640px){.f2,.f3{grid-template-columns:1fr}}

/* ---------- Сообщения ---------- */
.msg{padding:var(--s3);border:1px solid var(--line-2);background:var(--surface-2);margin-bottom:var(--s4);
  font:12px/1.45 var(--sans)}
.msg.err{border-color:var(--down);color:#ffb3ba;background:rgba(255,71,87,.08)}
.msg.ok{border-color:var(--up);color:#9df0dd;background:rgba(0,212,170,.08)}
.msg.warn{border-color:var(--warn);color:#ffd980;background:rgba(255,184,0,.08)}
.msg:empty{display:none}

/* ---------- Значки ---------- */
.b{display:inline-block;padding:2px 6px;border:1px solid var(--line-2);font:600 9px/1.4 var(--sans);
  letter-spacing:.07em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.b.up{border-color:var(--up);color:var(--up)}
.b.down{border-color:var(--down);color:var(--down)}
.b.warn{border-color:var(--warn);color:var(--warn)}
.b.info{border-color:var(--accent);color:var(--accent)}
.b.lock{border-color:var(--warn);color:var(--warn);background:rgba(255,184,0,.1)}

/* ---------- Планы / карточки ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s3)}
.plan{background:var(--surface-2);border:1px solid var(--line-2);padding:var(--s4);display:flex;
  flex-direction:column;gap:var(--s2)}
.plan.best{border-color:var(--accent)}
.plan .t{font:600 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-2)}
.plan .p{font:700 26px/1 var(--mono);letter-spacing:-.02em}
.plan .p small{font:500 11px/1 var(--sans);color:var(--fg-3)}
.plan .d{font:11px/1.4 var(--sans);color:var(--fg-3)}
.plan .btn{margin-top:auto}

/* ---------- Прогнозы ---------- */
.fc{border:1px solid var(--line);background:var(--surface-2);padding:var(--s4);margin-bottom:var(--s3)}
.fc.locked{background:var(--surface)}
.fc-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.fc-sym{font:700 14px/1 var(--mono);letter-spacing:.02em}
.fc-title{font:600 14px/1.35 var(--sans);margin-bottom:var(--s3)}
.fc-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--s3);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s3) 0;margin:var(--s3) 0}
.fc-nums .k{font:600 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);
  margin-bottom:var(--s1)}
.fc-nums .v{font:14px/1 var(--mono);font-variant-numeric:tabular-nums}
.fc-body{font:12px/1.6 var(--sans);color:var(--fg-2);white-space:pre-wrap;word-break:break-word}
.locked-veil{border:1px dashed var(--line-2);background:var(--surface);padding:var(--s4);text-align:center}
.locked-veil .k{font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--warn);
  margin-bottom:var(--s2)}

/* ---------- Пусто / загрузка ---------- */
.empty{padding:var(--s6) var(--s4);text-align:center;color:var(--fg-3);font:12px/1.6 var(--sans)}
.spin{padding:var(--s5);text-align:center;color:var(--fg-3);font:11px/1 var(--mono);letter-spacing:.1em}

/* ---------- Админка ---------- */
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--surface-2)}
.tabs button{background:transparent;border:0;border-right:1px solid var(--line);color:var(--fg-3);
  padding:var(--s3) var(--s4);font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap}
.tabs button:hover{color:var(--fg);background:var(--surface-3)}
.tabs button[aria-selected=true]{color:var(--fg);background:var(--surface);box-shadow:inset 0 -2px 0 var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.stat{background:var(--surface);padding:var(--s3) var(--s4)}
.stat .k{font:600 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--s2)}
.stat .v{font:700 19px/1 var(--mono);font-variant-numeric:tabular-nums}
.pend{background:var(--warn);color:#0b0c0e;padding:1px 5px;font:700 10px/1.4 var(--mono)}
.copy{display:flex;gap:var(--s1);align-items:center}
.copy code{background:var(--surface-3);border:1px solid var(--line-2);padding:3px 6px;
  font:11px/1.4 var(--mono);word-break:break-all;flex:1;display:block}
.muted{color:var(--fg-3)}
.small{font-size:11px}
.stack>*+*{margin-top:var(--s3)}
.warnbox{border:1px solid var(--warn);background:rgba(255,184,0,.07);padding:var(--s3);
  font:12px/1.5 var(--sans);color:#ffd980}

/* ---------- Подвал ---------- */
.legal{border-top:1px solid var(--line);margin-top:var(--s5);padding:var(--s4) 0;
  display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;
  font:11px/1.5 var(--sans);color:var(--fg-3)}

@media (max-width:820px){
  .nav a{padding:0 var(--s3)}
  .brand span{display:none}
  .who{display:none}
  .wrap{padding:var(--s3)}
}