:root{
  --blue:#0d6efd;
  --line:#d9dfe7;
  --text:#111827;
  --muted:#64748b;
  --red:#ff1414;
  --green:#00954c;
  --amber:#b77900;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:#f7f8fa;
  color:var(--text);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:8px 18px;
  background:#f1f3f6;
  border-bottom:1px solid var(--line);
}
.brand-wrap{display:flex;align-items:center;gap:12px}
.brand{font-size:16px;font-weight:700}
.live-chip{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;color:#237348;
  background:#e8f7ef;border:1px solid #c8ead7;border-radius:999px;padding:5px 8px;
}
.live-chip i{display:block;width:7px;height:7px;border-radius:50%;background:#18a25d}
.timeframe-buttons{display:flex;gap:9px}
.tf-btn{
  border:1px solid #5fa1ff;background:#fff;color:#0d6efd;
  padding:7px 18px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;
}
.tf-btn.active{background:#0d6efd;color:#fff}
.breadcrumb{
  padding:13px 28px;background:#fff;border-bottom:1px solid #e5e9ef;
  font-size:16px;
}
.breadcrumb .highlight{color:#67768a}
.connection-bar{
  display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:12px 28px;background:#f8fbff;border-bottom:1px solid #dfe7ef;
}
.token-group{display:flex;align-items:flex-end;gap:8px;flex:1;min-width:520px}
.token-group label,.settings-group label{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:#64748b;font-weight:700;margin-bottom:5px;
}
.token-group>label{align-self:center;margin:0;white-space:nowrap}
.token-group input{
  min-width:320px;flex:1;height:36px;border:1px solid #cfd8e3;border-radius:5px;
  padding:0 11px;background:#fff;font-size:13px;outline:none;
}
.token-group input:focus,.settings-group select:focus{border-color:#6aa7fa;box-shadow:0 0 0 2px rgba(13,110,253,.08)}
.connect-btn,.ghost-btn{
  height:36px;border-radius:5px;padding:0 14px;font-weight:700;font-size:12px;cursor:pointer;
}
.connect-btn{border:1px solid #0d6efd;background:#0d6efd;color:white}
.ghost-btn{border:1px solid #cfd8e3;background:white;color:#607085}
.settings-group{min-width:145px}
.settings-group select{
  height:36px;width:100%;border:1px solid #cfd8e3;border-radius:5px;background:white;padding:0 8px;
}
.status-box{
  min-width:210px;display:flex;align-items:center;gap:9px;padding:8px 10px;
  border:1px solid #dce4ec;border-radius:6px;background:#fff;
}
.status-dot{width:9px;height:9px;border-radius:50%;flex:none}
.status-dot.online{background:#0ca356;box-shadow:0 0 0 4px rgba(12,163,86,.10)}
.status-dot.offline{background:#aeb8c3}
.status-dot.waiting{background:#e5a100;box-shadow:0 0 0 4px rgba(229,161,0,.10)}
.status-title{font-size:11px;font-weight:800}
.status-detail{font-size:10px;color:#718096;margin-top:2px;max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-strip{
  display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));
  background:#fff;border-bottom:1px solid #e1e6ed;padding:9px 28px;
}
.info-strip div{padding:2px 16px;border-right:1px solid #edf0f4}
.info-strip div:first-child{padding-left:0}.info-strip div:last-child{border-right:0}
.info-strip span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#7a8797;margin-bottom:3px}
.info-strip b{font-size:12px;font-weight:700;color:#28384a}
.message{
  opacity:0;max-height:0;overflow:hidden;transition:.18s ease;padding:0 28px;font-size:12px;
}
.message.show{opacity:1;max-height:55px;padding:8px 28px}
.message.good{color:#177245;background:#eefaf3;border-bottom:1px solid #d6f0e2}
.message.bad{color:#c92c3c;background:#fff0f2;border-bottom:1px solid #f4d2d7}
.table-card{margin:0;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:940px}
thead th{
  text-align:center;color:#52667f;background:#f8fafc;font-weight:500;
  padding:12px 8px;border-bottom:1px solid var(--line);font-size:14px;
}
tbody td{
  padding:11px 10px;text-align:center;border-bottom:1px solid #e3e7ed;
  font-size:16px;background:#fff;
}
tbody tr:nth-child(even) td{background:#fbfbfc}
.bold{font-weight:700}
.negative,.signal-red{color:var(--red)}
.positive,.signal-green{color:var(--green)}
.signal-red,.signal-green,.signal-neutral{font-weight:500}
.signal-neutral{color:var(--amber)}
.empty-row td{padding:28px;color:#77879a;font-size:13px}
.footer-note{
  padding:11px 28px;color:#6d7d8e;font-size:10.5px;line-height:1.5;background:#f5f7f9;
}
@media(max-width:900px){
  .connection-bar{padding:10px 14px}
  .token-group{min-width:100%;flex-wrap:wrap}
  .token-group>label{width:100%}
  .token-group input{min-width:230px}
  .info-strip{grid-template-columns:repeat(3,1fr);padding:8px 14px}
  .info-strip div{border-bottom:1px solid #edf0f4;padding:7px 9px}
  tbody td,thead th{font-size:13px}
  .breadcrumb{padding:12px 14px}
}


thead th small{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:600;
  color:#7a8797;
}
.atm-cell{
  font-weight:800;
  color:#0d6efd;
  background:#f3f8ff !important;
}
@media(max-width:1100px){
  .info-strip{grid-template-columns:repeat(4,1fr)}
}