:root { --bg:#0b1e2d; --fg:#f3f6f9; --accent:#2ea0ff; }
*{ box-sizing: border-box; }
body{ margin:0; font-family: system-ui,Segoe UI,Roboto,Arial; background:#0f1720; color:#e6edf3; }
header{ padding:16px 20px; background:#0b1e2d; border-bottom:1px solid #21374a; display:flex; align-items:center; justify-content:space-between }
h1{ margin:0; font-size:18px }
#status{ font-size:12px; color:#9fb3c7 }
section.search{ padding:12px 20px; background:#0f1b28; border-bottom:1px solid #21374a }
label{ margin-right:12px; display:inline-flex; flex-direction:column; font-size:12px; color:#a0b3c6 }
input{ padding:6px 8px; border-radius:6px; border:1px solid #2a4258; background:#0c1824; color:#e6edf3; min-width:180px }
button{ padding:8px 12px; border:none; background:#2ea0ff; color:#001521; border-radius:6px; cursor:pointer; margin-right:8px }
.layout{ display:flex; min-height: calc(100vh - 140px) }
#columnPanel{ width:320px; border-right:1px solid #21374a; padding:12px; background:#0b1e2d; overflow:auto }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }
.panel-actions button{ background:#17456a; color:#cce9ff; margin-left:6px }
.panel-body{ display:grid; grid-template-columns:1fr; gap:6px; max-height:calc(100vh - 240px); overflow:auto }
.col-item label{ display:flex; gap:8px; align-items:center; font-size:12px; color:#c7d6e5; word-break:break-all }
.table-wrap{ width:100%; overflow:auto; padding:10px 20px 20px }
table{ width:max(1200px, 100%); border-collapse:collapse }
thead th{ position:sticky; top:0; background:#0b1e2d; border-bottom:1px solid #21374a; text-align:left; padding:8px; font-size:12px }
tbody td{ padding:8px; border-bottom:1px solid #1b2c3c; font-size:12px; vertical-align:top; white-space:nowrap }
tbody tr:hover{ background:#102233; cursor:pointer }
.pager{ display:flex; align-items:center; gap:10px; padding:8px 20px }
#detailOverlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000 }
#detailPanel{ display:none; position:fixed; right:0; top:0; height:100%; width:min(720px, 96%); background:#0b1e2d; color:#e6edf3; border-left:1px solid #21374a; overflow:auto; z-index:1001 }
#detailPanel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #21374a }
#detailBody{ padding:16px }
.card{ margin:10px 0; padding:10px; border:1px solid #21374a; border-radius:8px; background:#0f1b28 }
.kv{ display:flex; gap:8px; }
.kv .k{ min-width:160px; color:#9fb3c7 }
.muted{ color:#9fb3c7 }
.btn{ display:inline-block; padding:8px 12px; border-radius:6px; background:#2ea0ff; color:#001521; text-decoration:none; }
.disabled-link{ pointer-events:none; opacity:.45; }

/* Login-Overlay */
.login-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:2000; display:flex; align-items:center; justify-content:center; }
.login-box{ background:#0b1e2d; border:1px solid #21374a; border-radius:12px; padding:28px; min-width:360px; max-width:420px; }
.login-box h2{ margin:0 0 8px 0; font-size:20px; color:#e6edf3; }
.login-hint{ font-size:13px; color:#9fb3c7; margin:0 0 20px 0; }
.login-box label{ display:block; margin-bottom:14px; }
.login-box input{ width:100%; min-width:0; }
.login-box button{ width:100%; margin-top:8px; margin-right:0; }
.login-error{ color:#ffb4b4; font-size:13px; margin-top:10px; }