:root {
  --bg:   #0e152b;
  --bg2:  #0d1424;
  --card: #0f1929;
  --cb:   #2a3458;
  --bid:  #22c55e;
  --ask:  #ef4444;
  --neu:  #38bdf8;
  --yel:  #fbbf24;
  --gray: #4b5563;
  --text: #e2e8f0;
  --muted:#64748b;
  --lbl:  #475569;
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}
body { 
    background: #0f172a; 
    color: #e2e8f0; 
    font-family: 'Malgun Gothic', sans-serif; 
    padding: 24px; 
    font-size: 12px; 
}
/* ── TOPBAR ── */
.topbar { 
  display:flex; 
  align-items:center; 
  gap:12px; 
  margin-bottom:20px; 
  padding:14px; 
  border-bottom:1px solid var(--cb);
  background: linear-gradient(90deg, #060b21 30%, #040b1b 70%);
}
.Bar_Title {
  font-size:100px; 
  font-weight: 800;
  color:var(--text);
}
.sym-sel { 
  background:#111827; 
  color:var(--text); 
  border:1px solid var(--cb); 
  padding:6px 12px; 
  font-size:12px; 
  cursor:pointer;
  margin-left: 30px;
  border-radius:4px; 
}
.sym-name  { color:var(--yel); font-size:15px; font-weight:bold; letter-spacing:1px; }
.sym-price { color:var(--neu); font-size:18px; font-weight:bold; }
.sym-ab { font-size:11px; padding:2px 8px; border-radius:4px; }
.sym-ab.bid { background:#052e16; color:var(--bid); border:1px solid #15803d; }
.sym-ab.ask { background:#450a0a; color:var(--ask); border:1px solid #b91c1c; }
#last-upd { margin-left:auto; color:var(--gray); font-size:10px; }

#whale-data {
  padding: 0px 40px 40px 40px;
}

.subject {
    font-size: 14px;
    font-weight: 700; 
    color: var(--text); 
    text-transform: uppercase;
    border-left: 3px solid #00ff00;
    margin: 0px 0px 10px 5px;;
    padding-left: 8px;
}
table { 
    border-collapse: collapse;
    margin-bottom: 20px; 
    box-shadow: 0 10px 10px rgba(0,0,0,0.5);
}
th { 
    background: #1a1f3a; 
    color: #94a3b8; 
    font-weight: normal; 
    font-size: 13px; 
    border: 1px solid #2a3458; 
    padding: 10px 20px;  
    white-space: nowrap; 
    text-align: center; 
}
td { 
    background: #0e1521; 
    color: #e2e8f0; 
    font-size: 13px; 
    border: 1px solid #2a3458; 
    padding: 10px 20px; 
    white-space: nowrap; 
    text-align: center; 
}
td.desc   { background: #061329; color: #fff; font-size: 13px; }
td.num    { color: #38bdf8; }
td.bid    { color: #4ade80; }
td.ask    { color: #f43f5e; }
td.gray   { color: #475569; }
td.yellow { color: #fbbf24; }
td.white  { color: #e2e8f0; }

#auto-refresh-toggle { 
    display: flex;
    align-items: center; 
    gap: 8px; 
    background: #1a1f3a; 
    border: 1px solid #2a3458; 
    border-radius: 20px; 
    padding: 6px 12px; 
}
.toggle-label { color: #94a3b8; font-size: 11px; min-width: 30px; text-align: center; }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #2a3458; border-radius: 22px; transition: .3s; }
.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #475569; border-radius: 50%; transition: .3s; }
input:checked + .toggle-slider { background: #22c55e; }
input:checked + .toggle-slider:before { transform: translateX(18px); background: #fff; }