/* Reusable pieces: logo, badges, buttons, cards, forms, tables, meters, alerts. */

.logo{width:38px;height:38px;border-radius:10px;flex:none}

/* ----------------------------------------------------------------- badges */
.badges{display:flex;gap:6px}
.badge{
  font-size:10px;padding:3px 8px;border-radius:99px;background:#171d29;
  color:var(--dim);border:1px solid var(--line2);letter-spacing:.8px;font-weight:600;
}
.badge.paper{color:var(--warn);border-color:#4a3c12}
.badge.live{color:var(--up);border-color:#1c4d31}
.badge.crit{color:var(--down);border-color:#5b1a1a;background:#2a1114}
.pill{
  background:var(--down);color:#fff;border-radius:99px;font-size:10px;
  padding:1px 6px;margin-left:auto;font-weight:600;
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--dim2)}
.dot.on{background:var(--up);box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.dot.halt{background:var(--down);box-shadow:0 0 0 3px rgba(240,68,82,.18)}

/* ---------------------------------------------------------------- buttons */
button{
  background:#1a2130;color:var(--text);border:1px solid var(--line2);
  padding:7px 13px;border-radius:7px;cursor:pointer;font-size:12.5px;
  font-weight:500;transition:.12s;
}
button:hover{border-color:var(--accent);background:#20293a}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:#3d6aef}
button.danger{background:#3b1418;border-color:#6b1f26;color:#ff8b93}
button.danger:hover{background:#4d181e}
button.ghost{background:transparent;color:var(--dim)}
button.mini{padding:3px 8px;font-size:11px}

/* ---------------------------------------------------------- cards/banners */
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;min-width:0;
}
.card h2{
  font-size:11.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--dim);
  display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:600;
}
.card h2 small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim2)}
.card.notice{border-color:#4a3c12;background:#1b1710;color:#e8d9a8;
  font-size:12.5px;line-height:1.6}
.card.notice b{color:var(--warn)}

/* -------------------------------------------------------- chart controls */
.chart-card{padding-bottom:8px}
.chart-header {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 12px;
}
.chart-header h2 { margin-bottom: 0; }
.price-big{font-size:16px;font-weight:600;color:var(--text);letter-spacing:0}
.chart-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pill-group {
  display: inline-flex; background: #0a0e15; border: 1px solid var(--line2);
  border-radius: 6px; padding: 2px; gap: 2px;
}
.tf-btn, .chart-type-btn {
  background: transparent; border: 0; color: var(--dim); padding: 3px 8px;
  font-size: 11px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all .15s;
}
.tf-btn:hover, .chart-type-btn:hover { color: var(--text); background: #161e2e; }
.tf-btn.active, .chart-type-btn.active {
  background: var(--accent); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Full-width, Binance-sized chart. Height scales with viewport so it stays
   the dominant element on the page without a fixed pixel guess. */
.tv-chart{
  width:100%;
  height:min(70vh, 620px);
  min-height:360px;
  border-radius:6px;
  overflow:hidden;
}
@media(max-width:700px){.tv-chart{height:320px}}

.banner{
  margin:14px 20px 0;padding:10px 14px;border-radius:8px;font-size:12.5px;
  background:#2a1114;border:1px solid #5b1a1a;color:#ff9aa2;
}
.banner.warn{background:#2a2210;border-color:#5b4a1a;color:#f5cf7a}
.banner.up{background:#0f2a18;border-color:#1c4d31;color:#8fe3ac}
.banner.dim{background:var(--panel);border-color:var(--line);color:var(--dim2)}
.banner a.btn-link{color:inherit;text-decoration:underline;cursor:pointer;font-weight:600}

.kpi{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 15px}
.kpi label{display:block;color:var(--dim2);font-size:10px;text-transform:uppercase;
  letter-spacing:1px;margin-bottom:5px}
.kpi b{font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;display:block}
.kpi small{color:var(--dim2);font-size:11px;font-variant-numeric:tabular-nums}

.scard{background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:13px}
.scard b{display:block;margin-bottom:5px;font-size:13.5px}
.scard p{margin:0 0 9px;color:var(--dim);font-size:12px;line-height:1.55}
.scard code{color:var(--accent2);font-size:11px;font-family:var(--mono)}

/* ------------------------------------------------------------------ forms */
label{
  font-size:10.5px;color:var(--dim2);text-transform:uppercase;
  letter-spacing:.7px;display:block;
}
label.check{
  text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--dim);
  display:flex;align-items:center;gap:8px;margin:6px 0;
}
label.check input{width:auto}
select,input{
  background:#0a0e15;color:var(--text);border:1px solid var(--line2);
  border-radius:7px;padding:8px 9px;font-size:13px;width:100%;margin-top:4px;
  font-variant-numeric:tabular-nums;
}
input:focus,select:focus{outline:none;border-color:var(--accent)}
input:disabled{color:var(--dim2)}
select.inline,input.inline{width:auto;margin:0;padding:4px 8px;font-size:12px}

canvas{width:100%;display:block}

/* ----------------------------------------------------------------- tables */
table{width:100%;border-collapse:collapse;font-size:12px;
  font-variant-numeric:tabular-nums}
th{
  text-align:left;color:var(--dim2);font-weight:500;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.7px;
  border-bottom:1px solid var(--line2);padding:6px;white-space:nowrap;
}
td{padding:6px;border-bottom:1px solid #161b24;white-space:nowrap}
tbody tr:hover{background:#141a24}
td.wrap{white-space:normal;word-break:break-word;color:var(--dim);max-width:420px}

/* --------------------------------------------------------- stats & meters */
.stats div{background:var(--panel2);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px}
.stats label{font-size:9.5px;margin-bottom:3px}
.stats b{font-size:17px;font-variant-numeric:tabular-nums;font-weight:600}

.meter{margin-bottom:12px}
.meter .lbl{display:flex;justify-content:space-between;font-size:11.5px;
  color:var(--dim);margin-bottom:5px}
.meter .lbl b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:500}
.bar{height:6px;background:#1a2130;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);
  border-radius:99px;transition:width .3s}
.bar i.warn{background:var(--warn)}
.bar i.down{background:var(--down)}

/* ------------------------------------------------------------ logs/alerts */
.log{max-height:260px;overflow:auto;color:var(--dim);
  font:11.5px/1.7 var(--mono)}
.log b{color:var(--text);font-weight:600}
.note{font-size:11.5px;color:var(--dim2);min-height:15px;margin:6px 0 0;line-height:1.6}

.alert{display:flex;gap:12px;padding:10px 12px;border-bottom:1px solid #161b24;
  align-items:flex-start}
.alert:last-child{border:0}
.alert .lv{
  font-size:9.5px;font-weight:700;letter-spacing:.8px;padding:2px 7px;
  border-radius:99px;margin-top:2px;white-space:nowrap;
}
.lv.info{background:#132132;color:var(--accent2)}
.lv.warning{background:#2a2210;color:var(--warn)}
.lv.critical{background:#2a1114;color:var(--down)}
.alert b{font-size:12.5px;font-weight:600}
.alert small{color:var(--dim2);display:block;font-size:11px}
.alert time{margin-left:auto;color:var(--dim2);font-size:11px;white-space:nowrap}

/* Nav section label. The sidebar now spans trading and research, and a flat
   list of sixteen links gives no clue which is which. */
.nav-sec{
  font-size:9px;color:var(--dim2);text-transform:uppercase;letter-spacing:1.2px;
  padding:12px 12px 4px;font-weight:700;
}
/* Wide free-text cells (gate detail, feature descriptions) must wrap rather
   than force the table into a horizontal scroll. */
td.wrap{white-space:normal;max-width:380px;line-height:1.5}