*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Arial,sans-serif;background:#11151d;color:#edf2f7;min-height:100vh}
a{color:#8ab8ff}
button,input,select{font:inherit}
button{cursor:pointer}
.demo-strip{background:#fff3bf;color:#5f4500;text-align:center;padding:8px 16px;font-size:.78rem;font-weight:800;letter-spacing:.04em}
.panel-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 28px;background:#1c2330;border-bottom:1px solid #344054}
.panel-header h1{font-size:1.25rem;margin-bottom:5px}
.header-actions{display:flex;align-items:center;gap:14px}
.header-actions a{text-decoration:none;font-size:.85rem}
.header-actions form{margin:0}
main{width:min(1500px,calc(100% - 32px));margin:26px auto}
.counter-card{display:inline-flex;gap:8px;background:rgba(238,238,238,.12);border:1px solid #3a4658;border-radius:7px;padding:13px 20px;margin-bottom:20px}
.table-card,.activity-card{background:rgba(35,42,55,.94);border:1px solid #3a4658;border-radius:10px;overflow:hidden;margin-bottom:20px}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{padding:12px 14px;border-bottom:1px solid #3a4658;text-align:left;white-space:nowrap}
th{background:#171d27;color:#c5cfdd;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
td{color:#e5eaf0}
tr:hover td{background:rgba(255,255,255,.025)}
.mono{font-family:ui-monospace,Consolas,monospace;color:#9fc2ff}
.connected{color:#6ee7a0;font-weight:700}
.empty{text-align:center;color:#8f9bad;padding:28px}
select{background:#111722;color:#edf2f7;border:1px solid #4a586e;border-radius:5px;padding:6px 8px}
.activity-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #3a4658}
.activity-header h2{font-size:.9rem}
.button-secondary{background:#344054;color:#edf2f7;border:1px solid #4a586e;border-radius:6px;padding:6px 11px;font-size:.78rem}
.button-danger{background:rgba(239,68,68,.14);color:#ffb4b4;border:1px solid rgba(239,68,68,.45);border-radius:6px;padding:7px 12px;font-size:.78rem;font-weight:700}
.button-danger:hover{background:rgba(239,68,68,.24)}
.button-danger:disabled{opacity:.45;cursor:not-allowed}
#activityLog{list-style:none;max-height:250px;overflow:auto}
#activityLog li{display:flex;gap:16px;padding:10px 18px;border-bottom:1px solid #303a4a;color:#c5cfdd;font-size:.8rem}
#activityLog time{color:#7f8da1}
.panel-note{color:#8f9bad;font-size:.78rem;text-align:center;padding:8px}
.status-connected{color:#6ee7a0;font-size:.78rem}
.status-disconnected{color:#ff9c9c;font-size:.78rem}
.login-body{display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#253047,#11151d 55%)}
.login-card{width:min(410px,100%);background:#1c2330;border:1px solid #3a4658;border-radius:12px;overflow:hidden;box-shadow:0 25px 70px rgba(0,0,0,.35)}
.login-content{padding:30px}
.login-content h1{margin-bottom:8px}
.login-content p{color:#9ca9ba;font-size:.85rem;line-height:1.6;margin-bottom:22px}
.login-content label{display:block;color:#c5cfdd;font-size:.8rem;margin:15px 0 6px}
.login-content input{width:100%;background:#111722;border:1px solid #4a586e;border-radius:6px;color:#fff;padding:11px 12px}
.login-content button{width:100%;margin-top:22px;background:#3478f6;color:#fff;border:0;border-radius:6px;padding:11px;font-weight:700}
.login-content button:disabled{opacity:.65;cursor:wait}
.login-content a{display:block;margin-top:18px;font-size:.8rem}
.login-error{min-height:22px;color:#ff9c9c;font-size:.8rem;margin-top:12px}
@media(max-width:650px){.panel-header{padding:14px 18px;align-items:flex-start}.header-actions{flex-direction:column;align-items:flex-end}.table-card{border-radius:6px}main{width:calc(100% - 20px);margin-top:16px}}