.realtime-panel { margin:12px 14px; padding:18px; border:1px solid #426b91; border-radius:12px; background:#f3f8ff; color:#17324f; }
.dark-mode .realtime-panel { background:#111f30; color:#dce9f7; }
.realtime-panel[hidden] { display:none; }
.realtime-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.realtime-head h2 { margin:0; font-size:19px; }
.realtime-panel p { font-size:12px; opacity:.85; margin:7px 0 12px; }
.realtime-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:end; margin:12px 0; }
.realtime-controls label { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.realtime-controls input,.realtime-controls select,.realtime-panel button { padding:7px 10px; border-radius:6px; border:1px solid #587897; background:#fff; color:#17324f; }
.dark-mode .realtime-controls input,.dark-mode .realtime-controls select,.dark-mode .realtime-panel button { background:#192b40; color:#e8f1fb; }
.realtime-controls input { width:155px; }
.realtime-panel button { cursor:pointer; }
.realtime-panel button:disabled { opacity:.45; cursor:wait; }
.realtime-status { color:#3293dd; font-size:13px; }
.realtime-quotes { overflow:auto; max-height:230px; border:1px solid #426b91; border-radius:7px; }
.realtime-quotes table { width:100%; border-collapse:collapse; font-size:12px; }
.realtime-quotes th,.realtime-quotes td { padding:8px; border-bottom:1px solid #426b9150; text-align:right; white-space:nowrap; }
.realtime-quotes th:first-child,.realtime-quotes td:first-child { text-align:left; }
.realtime-quotes th { position:sticky; top:0; background:#dfebf8; }
.dark-mode .realtime-quotes th { background:#192b40; }
#realtimeMessages { white-space:pre-wrap; max-height:180px; overflow:auto; font:12px/1.7 monospace; }
.realtime-panel summary { cursor:pointer; margin-top:12px; font-size:12px; }
body.live-mode #backendViewControls,body.live-mode #settlementAxisControls { display:none !important; }
body.live-mode #btBar { opacity:.55; }

/* Show only the login card and mode switch before Mega authentication. */
body.live-login > :not(.toolbar):not(.realtime-panel):not(script):not(style) { display:none !important; }
body.live-login .toolbar > :not(#systemMode):not(label[for="systemMode"]) { display:none !important; }
.realtime-panel.login-pending { max-width:430px; margin:8vh auto; padding:32px; }
.realtime-panel.login-pending .realtime-workspace { display:none; }
.realtime-panel:not(.login-pending) .realtime-login-card { display:none; }
.realtime-login-card h2 { margin:0 0 10px; }
.realtime-login-card p { line-height:1.6; }
.realtime-login-card form { display:grid; gap:18px; margin:26px 0 16px; }
.realtime-login-card label { display:grid; gap:8px; }
.realtime-login-card input { box-sizing:border-box; width:100%; padding:12px; border:1px solid #426b91; border-radius:8px; background:transparent; color:inherit; }
.realtime-login-card button { padding:12px; border-radius:8px; background:#246fc0; color:white; border:0; cursor:pointer; }
#realtimeLoginMessage { font-size:13px; }
@media(max-width:520px) { .realtime-panel.login-pending { margin:30px 12px; padding:24px; } }

.realtime-recovery { margin:16px 0; padding:16px; border:1px solid #426b91; border-radius:10px; }
.realtime-recovery-note { font-size:12px; opacity:.8; line-height:1.6; }
.realtime-recovery td:last-child { text-align:left; white-space:normal; min-width:210px; }
#realtimeIndexStatus { font-size:13px; padding:10px 12px; border-left:3px solid #3293dd; background:#3293dd12; }