/* ============ Reset & Base ============ */
*{margin:0;padding:0;box-sizing:border-box;}
:root,[data-theme="dark"]{
  --bg:#0a0a0f;--bg2:#111118;--bg3:#1a1a25;--border:#334;
  --text:#c8c8d0;--text-dim:#666;--text-bright:#e8e8f0;
  --accent:#8b5cf6;--accent2:#6366f1;
  --success:#4ade80;--danger:#ef4444;--warning:#f59e0b;--info:#60a5fa;
  --gold:#facc15;
  --q-fan:#9ca3af;--q-ling:#4ade80;--q-xuan:#60a5fa;--q-di:#c084fc;
  --q-tian:#fb923c;--q-xian:#f87171;--q-shen:#facc15;
  --hover-bg:rgba(255,255,255,0.04);--active-bg:rgba(139,92,246,0.1);
  --hdr1:#1a1a30;--hdr2:#0d0d1a;
  --radius:3px;
}
[data-theme="light"]{
  --bg:#eef0f4;--bg2:#ffffff;--bg3:#e4e7ee;--border:#c4c9d4;
  --text:#2a2a35;--text-dim:#7a7a88;--text-bright:#111118;
  --accent:#7c3aed;--accent2:#5b54e0;
  --success:#16a34a;--danger:#dc2626;--warning:#d97706;--info:#2563eb;
  --gold:#b8860b;
  --q-fan:#6b7280;--q-ling:#16a34a;--q-xuan:#2563eb;--q-di:#9333ea;
  --q-tian:#ea580c;--q-xian:#dc2626;--q-shen:#b8860b;
  --hover-bg:rgba(0,0,0,0.04);--active-bg:rgba(124,58,237,0.1);
  --hdr1:#e4e7ee;--hdr2:#d8dce6;
}
[data-theme="retro"]{
  --bg:#0a1a0a;--bg2:#0e210e;--bg3:#163016;--border:#2a5a2a;
  --text:#7ee787;--text-dim:#4a8a4a;--text-bright:#b6f5b6;
  --accent:#3fb950;--accent2:#2da44e;
  --success:#3fb950;--danger:#f85149;--warning:#d29922;--info:#58a6ff;
  --gold:#e3b341;
  --q-fan:#8b949e;--q-ling:#3fb950;--q-xuan:#58a6ff;--q-di:#bc8cff;
  --q-tian:#ff9e2c;--q-xian:#ff7b72;--q-shen:#e3b341;
  --hover-bg:rgba(255,255,255,0.04);--active-bg:rgba(63,185,80,0.12);
  --hdr1:#0e210e;--hdr2:#0a1a0a;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Courier New','Consolas',monospace;font-size:14px;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased;}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg2)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ============ Layout ============ */
#app{display:flex;flex-direction:column;height:100vh;max-width:900px;margin:0 auto;}
#header{background:linear-gradient(135deg,var(--hdr1),var(--hdr2));padding:6px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px;flex-wrap:wrap;min-height:44px;}
#header .title{font-size:16px;font-weight:bold;color:var(--gold);text-shadow:0 0 10px rgba(250,204,21,0.3);}
#header .info{font-size:12px;color:var(--text-dim);display:flex;gap:10px;flex-wrap:wrap;}

#resBar{display:flex;gap:10px;font-size:12px;padding:4px 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;min-height:30px;align-items:center;}
#resBar .r{display:flex;align-items:center;gap:3px;white-space:nowrap;}
#resBar .r .v{color:var(--text-bright);font-weight:bold;}

#main{flex:1;display:flex;overflow:hidden;}
#sidebar{width:130px;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;transition:width 0.2s, padding 0.2s;}
#sidebar.hidden{width:0;padding:0;overflow:hidden;border:none;}
#sidebar .tab{display:flex;align-items:center;gap:5px;padding:8px 8px;cursor:pointer;border-left:3px solid transparent;color:var(--text-dim);transition:all 0.15s;font-size:12px;}
#sidebar .tab:hover{background:var(--hover-bg);color:var(--text);}
#sidebar .tab.active{background:var(--active-bg);color:var(--accent);border-left-color:var(--accent);}
#sidebar .tab .ic{width:18px;text-align:center;font-size:15px;}

#content{flex:1;overflow-y:auto;padding:10px 14px;background:var(--bg);}

#footer{background:var(--bg2);border-top:1px solid var(--border);padding:4px 12px;font-size:11px;color:var(--text-dim);display:flex;justify-content:space-between;flex-shrink:0;}

/* ============ Components ============ */
.box{border:1px solid var(--border);background:var(--bg2);margin-bottom:8px;border-radius:var(--radius);}
.box-h{padding:6px 10px;background:var(--bg3);border-bottom:1px solid var(--border);font-weight:bold;font-size:13px;color:var(--text-bright);display:flex;justify-content:space-between;align-items:center;}
.box-b{padding:8px 10px;font-size:13px;}

.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border:1px solid var(--border);background:var(--bg3);color:var(--text);cursor:pointer;font-family:inherit;font-size:12px;border-radius:2px;transition:all 0.15s;white-space:nowrap;user-select:none;}
.btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn:active{transform:scale(0.97);}
.btn-pri{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:var(--accent);}
.btn-pri:hover{filter:brightness(1.15);}
.btn-suc{background:rgba(74,222,128,0.15);color:var(--success);border-color:rgba(74,222,128,0.3);}
.btn-dng{background:rgba(239,68,68,0.15);color:var(--danger);border-color:rgba(239,68,68,0.3);}
.btn-sm{padding:3px 8px;font-size:11px;}
.btn:disabled{opacity:0.35;cursor:not-allowed;}

.tag{display:inline-block;padding:1px 6px;border-radius:2px;font-size:11px;margin:0 2px;}
.t-fan{background:rgba(156,163,175,0.15);color:var(--q-fan);border:1px solid rgba(156,163,175,0.25)}
.t-ling{background:rgba(74,222,128,0.12);color:var(--q-ling);border:1px solid rgba(74,222,128,0.22)}
.t-xuan{background:rgba(96,165,250,0.12);color:var(--q-xuan);border:1px solid rgba(96,165,250,0.22)}
.t-di{background:rgba(192,132,252,0.12);color:var(--q-di);border:1px solid rgba(192,132,252,0.22)}
.t-tian{background:rgba(251,146,60,0.12);color:var(--q-tian);border:1px solid rgba(251,146,60,0.22)}
.t-xian{background:rgba(248,113,113,0.12);color:var(--q-xian);border:1px solid rgba(248,113,113,0.22)}
.t-shen{background:rgba(250,204,21,0.12);color:var(--q-shen);border:1px solid rgba(250,204,21,0.22)}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.g4{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
@media(min-width:600px){.g4{grid-template-columns:1fr 1fr 1fr 1fr;}}

.bar-wrap{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;margin:4px 0;}
.bar-fill{height:100%;border-radius:3px;transition:width 0.4s;}
.b-green{background:linear-gradient(90deg,#059669,#4ade80)}
.b-blue{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.b-purple{background:linear-gradient(90deg,#7c3aed,#c084fc)}
.b-red{background:linear-gradient(90deg,#dc2626,#ef4444)}
.b-yellow{background:linear-gradient(90deg,#d97706,#facc15)}
.b-orange{background:linear-gradient(90deg,#ea580c,#fb923c)}

.d-card{border:1px solid var(--border);padding:8px;margin-bottom:4px;border-radius:var(--radius);cursor:pointer;transition:all 0.15s;font-size:12px;}
.d-card:hover{background:var(--bg3);border-color:var(--accent);}
.d-card .dh{display:flex;justify-content:space-between;align-items:center;}
.d-card .dn{font-weight:bold;font-size:14px;}
.d-card .ds{color:var(--text-dim);font-size:11px;}
.d-card .db{display:flex;gap:10px;margin-top:4px;font-size:11px;color:var(--text-dim);flex-wrap:wrap;}

.b-card{border:1px solid var(--border);padding:8px;margin-bottom:4px;border-radius:var(--radius);cursor:pointer;transition:all 0.15s;}
.b-card:hover{background:var(--bg3);border-color:var(--accent2);}
.b-card .bh{display:flex;justify-content:space-between;align-items:center;}
.b-card .bn{font-weight:bold;font-size:14px;}
.b-card .bi{font-size:11px;color:var(--text-dim);margin-top:3px;}
.b-card .bc{display:flex;gap:6px;font-size:10px;margin-top:4px;flex-wrap:wrap;}

.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100;justify-content:center;align-items:center;}
.overlay.show{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border);border-radius:6px;max-width:620px;width:92%;max-height:82vh;display:flex;flex-direction:column;}
.modal-h{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
.modal-h h3{font-size:15px;}
.modal-b{padding:10px 14px;overflow-y:auto;flex:1;}
.modal-f{padding:8px 14px;border-top:1px solid var(--border);display:flex;gap:6px;justify-content:flex-end;flex-shrink:0;}

.log-area{border:1px solid var(--border);background:var(--bg);padding:6px 8px;min-height:80px;max-height:150px;overflow-y:auto;font-size:11px;line-height:1.6;border-radius:var(--radius);margin-top:6px;}
.log-area .le{opacity:0.75;}
.log-area .le:first-child{opacity:1;}

#notif{position:fixed;top:10px;right:10px;z-index:200;display:flex;flex-direction:column;gap:4px;max-width:300px;}
.nf{padding:8px 12px;border-radius:4px;font-size:12px;animation:slideIn 0.3s;border:1px solid var(--border);}
.nf.i{background:rgba(96,165,250,0.12);border-color:rgba(96,165,250,0.25);color:var(--info)}
.nf.s{background:rgba(74,222,128,0.12);border-color:rgba(74,222,128,0.25);color:var(--success)}
.nf.w{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.25);color:var(--warning)}
.nf.d{background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.25);color:var(--danger)}
.nf.sh{background:rgba(250,204,21,0.12);border-color:rgba(250,204,21,0.25);color:var(--q-shen);font-weight:bold;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

.mt2{margin-top:4px}.mt4{margin-top:8px}.mb2{margin-bottom:4px}.mb4{margin-bottom:8px}
.gap4{gap:8px}.fl{display:flex}.fw{flex-wrap:wrap}.ic{align-items:center}.jb{justify-content:space-between}
.tc{text-align:center}.tdim{color:var(--text-dim)}.fb{font-weight:bold}.fs12{font-size:12px}.fs11{font-size:11px}.fs10{font-size:10px}
.wf{width:100%}.oh{overflow:hidden}
@media(max-width:600px){
  #sidebar{width:110px;}
  #sidebar .tab{padding:7px 6px;font-size:11px;}
  #sidebar .tab .ic{width:14px;font-size:13px;}
  #content{padding:6px 8px;}
  .g2,.g3{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr;}
  #resBar{gap:5px;font-size:11px;}
  #resBar .r .v{font-size:11px;}
  .detail-grid{grid-template-columns:1fr;}
  #header .title{font-size:14px;}
  .modal{width:96%;max-height:88vh;}
}