*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f1117;--card:#1a1d27;--border:#2a2d37;--text:#d1d4dc;--dim:#787b86;--red:#ef4444;--green:#22c55e;--gold:#f59e0b}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.container{max-width:900px;margin:0 auto;padding:0 16px}
.header{text-align:center;padding:30px 0 20px}
.header h1{font-size:24px;font-weight:700;background:linear-gradient(135deg,var(--gold),#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:30px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:22px 18px;cursor:pointer;text-align:center;transition:all .2s}
.card:hover{border-color:var(--gold);transform:translateY(-2px)}
.card-icon{font-size:32px;margin-bottom:10px}
.card-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px}
.card-status .status{font-size:20px}
.card-count{font-size:12px;color:var(--dim);margin-top:4px}

.panel-bar{display:flex;align-items:center;gap:8px;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:14px}
.back-btn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:18px;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.back-btn:hover{border-color:var(--gold);color:var(--gold)}
.bar{display:flex;gap:10px;margin:14px 0}
.bar input{flex:1;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:13px;outline:none}
.bar input:focus{border-color:var(--gold)}.bar input::placeholder{color:var(--dim)}
.bar .count{color:var(--dim);font-size:13px;padding:9px 0;white-space:nowrap}

.wrap{margin:0 0 12px;overflow-x:auto}
table{width:100%;min-width:800px;border-collapse:collapse;font-size:13px;table-layout:fixed}
th,td{text-align:center}
th{background:var(--card);color:var(--dim);padding:9px 7px;font-weight:500;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;position:sticky;top:0;overflow:hidden;text-overflow:ellipsis}
th:hover{color:var(--text)}
td{padding:7px;border-bottom:1px solid rgba(42,45,55,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tr{cursor:pointer;transition:background .15s}tr:hover{background:rgba(245,158,11,.05)}
.up{color:var(--red)}.down{color:var(--green)}.err{color:var(--red);font-weight:700}
.empty{text-align:center;padding:60px 20px;color:var(--dim);font-size:14px}

.pager{display:flex;justify-content:center;align-items:center;gap:12px;padding:0 0 40px;color:var(--dim);font-size:13px}
.pager button{padding:8px 18px;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--text);cursor:pointer;font-size:13px;transition:all .15s}
.pager button:hover{border-color:var(--gold);color:var(--gold)}
.pager button:disabled{opacity:.3;cursor:not-allowed}

@keyframes flashUp{0%{background:rgba(239,68,68,.35)}100%{background:transparent}}
@keyframes flashDown{0%{background:rgba(34,197,94,.35)}100%{background:transparent}}
.flash-up{animation:flashUp 1.2s ease-out}.flash-down{animation:flashDown 1.2s ease-out}
.conn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.conn-dot.on{background:#22c55e;box-shadow:0 0 6px #22c55e}.conn-dot.off{background:#ef4444}

.progress-wrap{max-width:260px;margin:14px auto;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;background:var(--gold);border-radius:3px;transition:width .5s;width:0%}
.progress-text{font-size:12px;color:var(--dim);margin-top:8px;text-align:center}
.first-notice{text-align:center;padding:20px;color:var(--gold);font-size:14px;line-height:1.8}
.timestamp{text-align:center;color:var(--dim);font-size:14px;line-height:1.8;margin:24px auto 40px}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--gold);border-radius:10px;padding:14px 24px;color:var(--gold);font-size:14px;z-index:999;box-shadow:0 4px 20px rgba(0,0,0,.5);animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

@media(max-width:768px){.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.card{padding:16px 12px}.bar input{font-size:12px}table{font-size:11px}th,td{padding:5px 4px}}
@media(max-width:480px){.grid{grid-template-columns:repeat(2,1fr)}.header{padding:20px 0 14px}}