:root {
    --bg: #0a0a0a; --card-bg: rgba(20,20,20,0.9);
    --cyan: #00ffff; --green: #00ff41; --magenta: #ff00ff;
    --yellow: #ffd700; --red: #ff3333; --text: #b0b0b0; --border: #1a1a2e;
    --font: 'Courier New', Monaco, monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--green); min-height:100vh; }
.scanlines {
    position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1000;
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);
}
/* 登录门禁 */
.login-overlay {
    position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.92);
    display:flex; align-items:center; justify-content:center;
}
.login-overlay.hidden { display:none; }
.login-box {
    background:var(--card-bg); border:2px solid var(--cyan); padding:3rem 2.5rem;
    text-align:center; min-width:320px; box-shadow:0 0 40px rgba(0,255,255,0.15);
}
.login-box h2 { color:var(--cyan); margin-bottom:1.5rem; letter-spacing:3px; text-shadow:0 0 10px var(--cyan); }
.login-box input {
    display:block; width:100%; margin-bottom:1rem; padding:.8rem 1rem;
    background:rgba(0,0,0,0.5); border:1px solid var(--border); color:var(--green);
    font-family:var(--font); font-size:1rem; outline:none;
}
.login-box input:focus { border-color:var(--cyan); box-shadow:0 0 8px rgba(0,255,255,0.2); }
.login-box button {
    width:100%; padding:.8rem; background:transparent; border:2px solid var(--cyan);
    color:var(--cyan); font-family:var(--font); font-size:1rem; cursor:pointer;
    text-transform:uppercase; letter-spacing:2px; transition:all .3s;
}
.login-box button:hover { background:var(--cyan); color:var(--bg); box-shadow:0 0 20px var(--cyan); }
.login-err { color:var(--red); margin-top:1rem; font-size:.85rem; min-height:1.2em; }
/* Header */
header {
    background:rgba(10,10,10,0.95); backdrop-filter:blur(10px); padding:.45rem 1.5rem;
    border-bottom:2px solid var(--magenta); box-shadow:0 0 20px rgba(255,0,255,0.3);
    display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100;
}
.header-left { display:flex; align-items:center; }
header h1 {
    font-size:1.1rem; color:var(--cyan); text-shadow:0 0 10px var(--cyan);
    text-transform:uppercase; letter-spacing:2px;
}
.accent { color:var(--magenta); text-shadow:0 0 10px var(--magenta); }
.back-btn {
    color:var(--cyan); text-decoration:none; font-size:.85rem;
    margin-right:1.5rem; transition:all .3s; white-space:nowrap;
}
.back-btn:hover { color:var(--magenta); text-shadow:0 0 10px var(--magenta); }
.header-right { display:flex; align-items:center; gap:.6rem; }
.last-update { color:var(--text); font-size:.75rem; }
.btn-cyber {
    background:transparent; color:var(--cyan); border:1px solid var(--cyan);
    padding:.25rem .7rem; font-family:var(--font); cursor:pointer;
    text-transform:uppercase; letter-spacing:1px; transition:all .3s; font-size:.75rem;
}
.btn-cyber:hover { background:var(--cyan); color:var(--bg); box-shadow:0 0 15px var(--cyan); }
.btn-sub { color:var(--green); border-color:var(--green); }
.btn-sub:hover { background:var(--green); color:var(--bg); box-shadow:0 0 15px var(--green); }
.btn-cyber:disabled { opacity:.4; cursor:not-allowed; }
.auto-refresh { color:var(--text); font-size:.75rem; display:flex; align-items:center; gap:.3rem; }
main { padding:.8rem 1.5rem; max-width:1400px; margin:0 auto; }
/* Server Cards */
.server-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-bottom:.8rem; }
.server-card {
    background:var(--card-bg); border:1px solid var(--border); padding:.8rem 1rem;
    position:relative; overflow:hidden; transition:all .3s;
}
.server-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--cyan),var(--magenta));
}
.server-card:hover { border-color:var(--cyan); box-shadow:0 0 20px rgba(0,255,255,0.2); transform:translateY(-2px); }
.server-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem; }
.server-name { font-size:1rem; color:var(--cyan); text-shadow:0 0 5px var(--cyan); }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-dot.online { background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
.status-dot.offline { background:var(--red); box-shadow:0 0 8px var(--red); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.server-stats { display:grid; grid-template-columns:1fr 1fr; gap:.3rem; }
.stat-item { font-size:.72rem; line-height:1.3; }
.stat-label { color:var(--text); font-size:.62rem; }
.stat-value { color:var(--green); font-weight:bold; }
.stat-value.cyan { color:var(--cyan); }
.loading-msg {
    grid-column:1/-1; text-align:center; padding:3rem; color:var(--cyan);
    font-size:1.1rem; animation:blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
/* Tab Bar */
.tab-bar { display:flex; gap:0; margin-bottom:.5rem; border-bottom:2px solid var(--border); }
.tab {
    background:transparent; color:var(--text); border:none; padding:.4rem 1.2rem;
    font-family:var(--font); cursor:pointer; text-transform:uppercase; letter-spacing:2px;
    font-size:.78rem; transition:all .3s; position:relative;
}
.tab:hover { color:var(--cyan); }
.tab.active { color:var(--cyan); text-shadow:0 0 5px var(--cyan); }
.tab.active::after {
    content:''; position:absolute; bottom:-2px; left:0; right:0;
    height:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan);
}
/* Inbound Blocks */
/* Server Groups - 按服务器归组 */
.server-group {
    margin-bottom:.8rem; border-radius:4px; overflow:hidden;
    border-left:3px solid var(--border); background:rgba(10,10,20,0.4);
}
.server-group.hk { border-left-color:var(--green); }
.server-group.sg { border-left-color:var(--cyan); }
.server-group.us { border-left-color:var(--magenta); }
.server-group-title {
    display:flex; justify-content:space-between; align-items:center;
    padding:.35rem 1rem; font-size:.78rem; letter-spacing:1px;
    background:rgba(255,255,255,.03); border-bottom:1px solid var(--border);
}
.server-group.hk .server-group-title { color:var(--green); }
.server-group.sg .server-group-title { color:var(--cyan); }
.server-group.us .server-group-title { color:var(--magenta); }
.server-group-flag { font-weight:bold; text-transform:uppercase; }
.server-group-meta { font-size:.65rem; color:var(--text); }
.server-group .inbound-block { margin-bottom:0; border-left:none; border-radius:0; }
.server-group .inbound-block + .inbound-block { border-top:1px solid rgba(255,255,255,.05); }
.inbound-block { background:var(--card-bg); border:1px solid var(--border); margin-bottom:.5rem; overflow:hidden; }
.inbound-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:.4rem 1rem; border-bottom:1px solid var(--border); position:relative;
}
.inbound-title { color:var(--cyan); font-size:.82rem; text-transform:uppercase; letter-spacing:1px; }
.inbound-traffic-label {
    font-size:.62rem; color:var(--text); margin-left:.6rem;
    opacity:.7; letter-spacing:.5px;
}
.inbound-meta { color:var(--text); font-size:.72rem; }
.server-badge {
    display:inline-block; padding:.05rem .4rem; font-size:.62rem; border-radius:2px; margin-right:.4rem;
    font-weight:bold; letter-spacing:1px;
}
.server-badge.hk { background:rgba(0,255,65,.12); color:var(--green); border:1px solid var(--green); }
.server-badge.sg { background:rgba(0,255,255,.12); color:var(--cyan); border:1px solid var(--cyan); }
.server-badge.us { background:rgba(255,0,255,.12); color:var(--magenta); border:1px solid var(--magenta); }
/* Client Table */
.client-table { width:100%; border-collapse:collapse; }
.client-table th {
    text-align:left; padding:.3rem .8rem; color:var(--magenta); font-size:.66rem;
    text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--border);
}
.client-table td {
    padding:.3rem .8rem; font-size:.76rem; color:var(--text);
    border-bottom:1px solid rgba(255,255,255,.03);
}
.client-table tr:hover td { background:rgba(0,255,255,.04); }
/* Traffic Bar */
.traffic-bar { width:100%; height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin-top:.3rem; }
.traffic-fill { height:100%; border-radius:2px; transition:width .5s; }
.traffic-fill.low { background:var(--green); }
.traffic-fill.mid { background:var(--yellow); }
.traffic-fill.high { background:var(--red); box-shadow:0 0 5px var(--red); }
/* Small Buttons */
.btn-sm {
    background:transparent; color:var(--magenta); border:1px solid var(--magenta);
    padding:.15rem .5rem; font-family:var(--font); font-size:.68rem; cursor:pointer; transition:all .3s;
}
.btn-sm:hover { background:var(--magenta); color:var(--bg); }
/* States */
.empty-state { text-align:center; padding:1rem; color:var(--text); font-size:.8rem; }
.error-msg { text-align:center; padding:1rem; color:var(--red); border:1px solid var(--red); margin:.5rem 0; font-size:.8rem; }
/* Responsive */
@media(max-width:900px) {
    .server-cards { grid-template-columns:1fr; }
    header { flex-direction:column; gap:.8rem; }
    .header-left { flex-direction:column; align-items:flex-start; gap:.5rem; }
    main { padding:1rem; }
    .client-table { font-size:.75rem; }
    .client-table th, .client-table td { padding:.4rem .5rem; }
}