:root{
  --bg:#0f1420; --card:#1b2433; --text:#e6e9f0; --muted:#9aa3b2;
  --brand:#6aa6ff; --ok:#2ecc71; --warn:#ffcd3c; --err:#ff6b6b;
}

/* базовое */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, Arial, sans-serif }
a{ color:var(--brand); text-decoration:none }
a.link{ text-decoration:underline }
a:hover{ opacity:.9 }
.hidden{ display:none !important }

/* шапка */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  background:rgba(15,20,32,.8);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid #223;
}
.brand{ font-weight:700; letter-spacing:.3px }
.brand a{ color:var(--text) }
.nav{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.nav .primary{
  background:var(--brand); color:#0b111a; padding:8px 12px; border-radius:8px;
}
.nav .danger{
  background:var(--err); color:#0b111a; padding:8px 12px; border:none; border-radius:8px; cursor:pointer;
}

/* контейнер/карточки */
.container{ max-width:960px; margin:24px auto; padding:0 16px }
.card{
  background:var(--card); border:1px solid #233040; border-radius:14px;
  padding:18px; margin:16px 0; box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.card h2{ margin:0 0 12px 0; font-size:20px }
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px }
.card a.card{ display:block; text-align:center; padding:24px }

/* формы */
label{ display:flex; flex-direction:column; gap:6px; margin:10px 0; font-size:14px; color:var(--muted) }
input{
  background:#0f1724; border:1px solid #2a364a; color:var(--text);
  padding:10px 12px; border-radius:10px; outline:none;
}
input:focus-visible{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(106,166,255,.15) }
input[type="range"]{ accent-color:var(--brand) }
.form .msg{ margin-top:8px }
.msg{ color:var(--warn) }
.msg.ok{ color:var(--ok) }
.msg.err{ color:var(--err) }

/* кнопки */
button, .btn{
  background:#2a364a; color:var(--text);
  padding:10px 14px; border:none; border-radius:10px; cursor:pointer;
}
button.primary, .primary, .btn-primary{ background:var(--brand); color:#0b111a }
button.success, .btn-success{ background:var(--ok); color:#0b111a }
button.danger, .btn-danger{ background:var(--err); color:#0b111a }
button:disabled, .btn:disabled{ opacity:.6; cursor:not-allowed }

/* сетки/ряда */
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:700px){
  .grid2{ grid-template-columns:1fr }
  .nav{ flex-wrap:wrap }
}

/* статусы/текст */
.kv{ display:flex; justify-content:space-between; border-bottom:1px dashed #2a364a; padding:6px 0 }
.muted{ color:var(--muted) }
.out{ display:flex; align-items:center; color:var(--muted); gap:10px }

/* индикаторы статуса (бот) — единый размер 12px */
.dot, .status-dot{
  display:inline-block; width:12px; height:12px; border-radius:50%;
  margin-right:6px; vertical-align:middle; background:#556070;
}
.dot.on, .status-dot.on{ background:var(--ok) }
.dot.off, .status-dot.off{ background:#556070 }

/* таблицы (история сделок) */
.table-wrap{ overflow:auto }
.tbl, table.table{ width:100%; border-collapse:collapse }
.tbl th, .tbl td,
.table th, .table td{ padding:8px; border-bottom:1px solid #2a364a; text-align:left }
.tbl thead th, .table thead th{ color:var(--muted); font-weight:600 }