@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Pretendard:wght@300;400;500;600&display=swap');

:root, [data-theme="dark"] {
  --sans: 'Pretendard', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --blue: #3b82f6; --blue2: #60a5fa;
  --cyan: #22d3ee; --green: #059669; --green2: #10b981;
  --amber: #f59e0b; --amber2: #fbbf24;
  --red: #ef4444; --red2: #f87171;
  --purple: #7c3aed; --purple2: #8b5cf6;
  --pink: #ec4899;
  --bg0: #07090f; --bg1: #0e1118; --bg2: #141720; --bg3: #1c2030; --bg4: #2a2f45;
  --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.14);
  --text0: #eef0ff; --text1: #c4c9e0; --text2: #7a82a8; --text3: #454d6a;
  --scrollbar-track: #0e1118; --scrollbar-thumb: #2a2f45; --scrollbar-hover: #3b82f6;
  --panel-badge-bg: rgba(255,255,255,0.05);
  --login-bg: #07090f; --login-box: #0e1118; --login-input: #141720;
  --login-border: rgba(255,255,255,0.08); --login-placeholder: #2c3050;
}

[data-theme="light"] {
  --bg0: #f0f2f8; --bg1: #ffffff; --bg2: #f5f7fc; --bg3: #e8ecf5; --bg4: #d8dded;
  --border: rgba(0,0,0,0.07); --border2: rgba(0,0,0,0.14);
  --text0: #111827; --text1: #374151; --text2: #6b7280; --text3: #9ca3af;
  --scrollbar-track: #f0f2f8; --scrollbar-thumb: #c5cde0; --scrollbar-hover: #3b82f6;
  --panel-badge-bg: rgba(0,0,0,0.04);
  --login-bg: #e8ecf5; --login-box: #ffffff; --login-input: #f5f7fc;
  --login-border: rgba(0,0,0,0.1); --login-placeholder: #9ca3af;
}
[data-theme="light"] .topbar, [data-theme="light"] .stabs { border-bottom-color: var(--border); }
[data-theme="light"] .tkpi { border-color: var(--border); }
[data-theme="light"] .elog td { border-bottom-color: rgba(0,0,0,0.04); }
[data-theme="light"] .atx-table td { border-bottom-color: rgba(0,0,0,0.04); }

.login-overlay { position:fixed;inset:0;z-index:9999;background:var(--login-bg);display:flex;align-items:center;justify-content:center;transition:background .25s; }
.login-box { width:380px;background:var(--login-box);border:1px solid var(--login-border);border-radius:10px;padding:40px 36px 32px;box-shadow:0 0 60px rgba(0,0,0,0.4);transition:background .25s,border-color .25s; }
.login-logo { font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:600;color:var(--text0);text-align:center;margin-bottom:6px;letter-spacing:-0.5px; }
.login-logo span { color:#22d3ee; }
.login-sub { text-align:center;font-size:12px;color:var(--text2);margin-bottom:32px;letter-spacing:.3px; }
.login-field { margin-bottom:14px; }
.login-field label { display:block;font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;font-weight:500; }
.login-field input { width:100%;background:var(--login-input);border:1px solid var(--login-border);border-radius:5px;padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text0);outline:none;transition:border-color .2s,background .2s; }
.login-field input:focus { border-color:#3b82f6; }
.login-field input::placeholder { color:var(--login-placeholder); }
.login-btn { width:100%;margin-top:8px;padding:11px;background:#3b82f6;border:none;border-radius:5px;color:#fff;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s;letter-spacing:.3px; }
.login-btn:hover { background:#2563eb; }
.login-btn:active { transform:scale(.99); }
.login-err { margin-top:10px;font-size:11px;color:#f87171;text-align:center;min-height:18px;font-family:'JetBrains Mono',monospace; }
.login-footer { margin-top:24px;text-align:center;font-size:11px;color:var(--text3); }

*,*::before,*::after { box-sizing:border-box;margin:0;padding:0; }
html,body { width:100%;height:100%;margin:0;padding:0;background:var(--bg0);color:var(--text0);font-family:var(--sans);font-size:13px;transition:background .25s,color .25s; }
html { overflow-x:hidden;overflow-y:auto; }
body { overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track); }
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-hover); }

.shell { display:grid;grid-template-rows:48px 36px 1fr;height:max(100vh, 764px);width:100vw; }
.topbar { display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:var(--bg1);border-bottom:1px solid var(--border);gap:16px; }
.brand { font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-0.5px;color:var(--text0);white-space:nowrap; }
.brand span { color:var(--cyan); }

.top-kpis { display:flex;gap:0;flex:1;justify-content:center; }
.tkpi { display:flex;align-items:center;gap:8px;padding:0 20px;border-right:1px solid var(--border); }
.tkpi:first-child { border-left:1px solid var(--border); }
.tkpi-label { font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px; }
.tkpi-val { font-family:var(--mono);font-size:18px;font-weight:600;line-height:1;color:var(--text0); }
.tkpi-val.warn { color:var(--amber); }
.tkpi-val.danger { color:var(--red);animation:pulse-red .8s infinite; }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:.6} }
.tkpi-unit { font-size:10px;color:var(--text2);margin-left:2px; }
.tkpi-delta { font-family:var(--mono);font-size:10px; }
.tkpi-delta.up { color:var(--red2); }
.tkpi-delta.down { color:var(--green2); }
.tkpi-delta.flat { color:var(--text2); }

.top-right { display:flex;align-items:center;gap:10px;white-space:nowrap; }
.sys-badge { display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;font-size:11px;background:rgba(16,185,129,0.12);color:var(--green2);border:1px solid rgba(16,185,129,0.25); }
.sys-badge .led { width:6px;height:6px;border-radius:50%;background:var(--green2);box-shadow:0 0 6px var(--green2);animation:blink 2s infinite; }
.sys-badge.warn-badge { background:rgba(245,158,11,0.12);color:var(--amber);border-color:rgba(245,158,11,0.25); }
.sys-badge.warn-badge .led { background:var(--amber);box-shadow:0 0 6px var(--amber); }
.sys-badge.err-badge { background:rgba(239,68,68,0.12);color:var(--red2);border-color:rgba(239,68,68,0.25); }
.sys-badge.err-badge .led { background:var(--red2);box-shadow:0 0 6px var(--red2); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.clock-box { font-family:var(--mono);font-size:11px;color:var(--text2);letter-spacing:1px; }
.tbtn { font-family:var(--sans);font-size:11px;padding:4px 11px;border-radius:3px;border:1px solid var(--border2);background:transparent;color:var(--text1);cursor:pointer;transition:all .15s; }
.tbtn:hover { background:var(--bg3);color:var(--text0); }
.tbtn.active { background:rgba(59,130,246,.2);border-color:var(--blue);color:var(--blue2); }

.stabs { display:flex;align-items:center;gap:2px;padding:0 18px;background:var(--bg1);border-bottom:1px solid var(--border);overflow-x:auto; }
.stab { display:flex;align-items:center;gap:6px;padding:0 14px;height:36px;font-size:12px;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap; }
.stab:hover { color:var(--text1); }
.stab.active { color:var(--blue2);border-bottom-color:var(--blue2); }
.stab.warn-s { color:var(--amber);border-bottom-color:var(--amber); }
.stab.err-s { color:var(--red2);border-bottom-color:var(--red2); }
.stab .led2 { width:6px;height:6px;border-radius:50%; }
.stab .led2.ok { background:var(--green2);box-shadow:0 0 4px var(--green2); }
.stab .led2.warn { background:var(--amber);box-shadow:0 0 4px var(--amber); }
.stab .led2.err { background:var(--red2);box-shadow:0 0 4px var(--red2); }
.stab .led2.down { background:var(--text3); }
.stab-info { font-family:var(--mono);font-size:10px;color:var(--text2);margin-left:2px; }

.main { display:grid;grid-template-columns:330px 1fr minmax(0,286px);grid-template-rows:1fr 1fr;gap:1px;background:var(--border);overflow:hidden; }
.panel { background:var(--bg1);display:flex;flex-direction:column;overflow:hidden;min-height:0; }
.panel.span2 { grid-row:span 2; }
.panel-head { display:flex;align-items:center;justify-content:space-between;padding:9px 12px 7px;border-bottom:1px solid var(--border);flex-shrink:0; }
.panel-title { font-size:11px;font-weight:600;color:var(--text1);text-transform:uppercase;letter-spacing:.6px; }
.panel-badge { font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:3px; }
.pb-ok { background:rgba(16,185,129,.15);color:var(--green2);border:1px solid rgba(16,185,129,.2); }
.pb-warn { background:rgba(245,158,11,.15);color:var(--amber2);border:1px solid rgba(245,158,11,.2); }
.pb-err { background:rgba(239,68,68,.15);color:var(--red2);border:1px solid rgba(239,68,68,.2); }
.pb-blue { background:rgba(59,130,246,.15);color:var(--blue2);border:1px solid rgba(59,130,246,.2); }
.panel-body { flex:1;overflow:hidden;padding:8px 12px;min-height:0;position:relative; }
.panel-body.no-pad { padding:0; }

#xview-canvas { width:100%;height:100%;cursor:crosshair; }

.atx-table { width:100%;border-collapse:collapse;font-size:12px; }
.atx-table th { font-weight:500;color:var(--text1);text-align:left;padding:5px 8px 6px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11px;letter-spacing:.2px;position:sticky;top:0;background:var(--bg1);z-index:1; }
.atx-table td { padding:5px 8px;border-bottom:1px solid var(--border); }
.atx-table tr:hover td { background:var(--bg2); }
.atx-wrap { overflow-y:auto;flex:1;min-height:0; }
.atx-wrap::-webkit-scrollbar { width:5px; }
.atx-wrap::-webkit-scrollbar-track { background:var(--scrollbar-track); }
.atx-wrap::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb);border-radius:3px; }
.atx-wrap::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-hover); }
.ms-bar-wrap { display:flex;align-items:center;gap:5px; }
.ms-bar-bg { width:50px;height:5px;background:var(--bg3);border-radius:2px;overflow:hidden; }
.ms-bar-fill { height:100%;border-radius:2px; }
.ms-val { font-family:var(--mono);font-size:11px;color:var(--text1); }

.topurl-list { display:flex;flex-direction:column;gap:6px;padding:8px 12px;flex:1;overflow-y:auto; }
.topurl-list::-webkit-scrollbar { width:5px; }
.topurl-list::-webkit-scrollbar-track { background:var(--scrollbar-track); }
.topurl-list::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb);border-radius:3px; }
.turl-row { display:flex;align-items:center;gap:6px; }
.turl-rank { font-family:var(--mono);font-size:11px;color:var(--text2);width:16px;flex-shrink:0; }
.turl-name { font-family:var(--mono);font-size:11px;color:var(--text1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.turl-bar-bg { width:60px;height:6px;background:var(--bg3);border-radius:2px;overflow:hidden;flex-shrink:0; }
.turl-bar-fill { height:100%;border-radius:2px;background:var(--blue);transition:width .4s; }
.turl-tps { font-family:var(--mono);font-size:11px;color:var(--text1);width:34px;text-align:right;flex-shrink:0; }
.turl-rt { font-family:var(--mono);font-size:11px;width:40px;text-align:right;flex-shrink:0; }

.mini-section { padding:8px 12px 6px;border-bottom:1px solid var(--border); }
.mini-label { font-size:11px;font-weight:600;color:var(--text1);text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px; }
.pbar-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }
.pbar-label { font-size:12px;color:var(--text1);width:72px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.pbar-track { flex:1;height:9px;background:var(--bg3);border-radius:3px;overflow:hidden;min-width:0; }
.pbar-fill { height:100%;border-radius:3px;transition:width .5s; }
.pbar-val { font-family:var(--mono);font-size:12px;font-weight:500;color:var(--text0);width:46px;text-align:right;flex-shrink:0; }

.elog-wrap { flex:1;overflow-y:auto;min-height:0; }
.elog-wrap::-webkit-scrollbar { width:5px; }
.elog-wrap::-webkit-scrollbar-track { background:var(--scrollbar-track); }
.elog-wrap::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb);border-radius:3px; }
.elog { width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed; }
.elog th { padding:5px 6px 6px;color:var(--text1);font-weight:500;text-align:left;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:11px;position:sticky;top:0;background:var(--bg1);z-index:1;overflow:hidden; }
.elog td { padding:5px 6px;border-bottom:1px solid var(--border);overflow:hidden; }
.elog tr:hover td { background:var(--bg2); }
.badge { font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:3px;font-weight:500;white-space:nowrap; }
.b5 { background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.25); }
.b4 { background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.25); }
.url-str { font-family:var(--mono);color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block; }

.alert-bar { position:absolute;bottom:0;left:0;right:0;background:rgba(239,68,68,.12);border-top:1px solid rgba(239,68,68,.3);padding:4px 12px;font-size:10px;color:var(--red2);display:none;align-items:center;gap:8px;font-family:var(--mono);animation:slide-up .3s ease; }
@keyframes slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }
.alert-bar.show { display:flex; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }

@media(max-width:1400px) { .main{grid-template-columns:280px 1fr minmax(0,264px)} .tkpi{padding:0 14px} }
@media(max-width:1200px) { .tkpi-val{font-size:15px} .main{grid-template-columns:240px 1fr minmax(0,242px)} }