:root{
  --bg:#14161a; --bg2:#1b1e24; --bg3:#22262e;
  --border:#2c313a; --text:#d7dbe0; --text-dim:#8b93a1;
  --acc:#7aa2f7; --acc-dim:#4a5b85;
  --ok:#6fbf73; --warn:#d9a13b; --danger:#e07070; --mono:"Cascadia Code","Consolas",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif;overflow:hidden}
#topbar{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border);height:52px}
.brand{font-weight:700;font-size:16px;white-space:nowrap}
.brand-sub{color:var(--text-dim);font-weight:400;font-size:12px;margin-left:6px}
.search{flex:1;max-width:560px}
.search input{width:100%;padding:7px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg3);color:var(--text);outline:none;font-size:13px}
.search input:focus{border-color:var(--acc)}
.stats{color:var(--text-dim);font-size:12px;white-space:nowrap}
#layout{display:flex;height:calc(100% - 52px - 30px)}
#sidebar{width:330px;min-width:330px;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.tree-head{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border)}
.ghost{background:none;border:1px solid var(--border);color:var(--text-dim);border-radius:5px;padding:3px 10px;cursor:pointer;font-size:12px}
.ghost:hover{color:var(--text);border-color:var(--acc-dim)}
#tree{flex:1;overflow-y:auto;padding:6px 4px 20px}
.mod{user-select:none}
.mod-head{display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer;border-radius:5px;font-weight:600;color:var(--text)}
.mod-head:hover{background:var(--bg3)}
.mod-head .caret{width:12px;color:var(--text-dim);transition:transform .12s}
.mod-head.open .caret{transform:rotate(90deg)}
.mod-head .cnt{color:var(--text-dim);font-weight:400;font-size:11px;margin-left:auto}
.mod-body{display:none;padding-left:14px}
.mod.open>.mod-body{display:block}
.fn{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:pointer;border-radius:5px;color:var(--text-dim);font-family:var(--mono);font-size:12.5px;white-space:nowrap;overflow:hidden}
.fn:hover{background:var(--bg3);color:var(--text)}
.fn.sel{background:var(--acc-dim);color:#fff}
.fn .tag{font-size:10px;color:var(--text-dim);margin-left:auto;flex:none}
.fn.hasan .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;display:inline-block}
.fn .dot{width:7px;height:7px;border-radius:50%;background:transparent;flex:none;display:inline-block}
#detail{flex:1;overflow-y:auto;background:var(--bg)}
#detailBody{padding:22px 28px 60px;max-width:1020px;margin:0 auto}
.placeholder{padding:80px 30px;text-align:center;color:var(--text-dim)}
.ph-title{font-size:24px;font-weight:700;color:var(--text);margin-bottom:10px}
.ph-sub{font-size:13px;margin-bottom:6px}
.dtitle{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:16px}
.dtitle h2{font-family:var(--mono);font-size:20px;word-break:break-all}
.scope{font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--acc-dim);color:var(--acc)}
.scope.client{background:rgba(122,162,247,.12)}
.scope.server{background:rgba(111,191,115,.12);border-color:var(--ok);color:var(--ok)}
.hasan2{font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(111,191,115,.14);color:var(--ok);border:1px solid var(--ok)}
.sec{font-size:13px;font-weight:700;color:var(--acc);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.4px}
.desc{color:var(--text);margin-bottom:6px}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 4px}
.tbl th{text-align:left;background:var(--bg2);padding:6px 10px;font-weight:600;color:var(--text-dim)}
.tbl td{padding:6px 10px;border-top:1px solid var(--border);vertical-align:top}
.tbl td code,.tbl td .t{font-family:var(--mono);font-size:12px;color:var(--acc)}
.tbl td .d{color:var(--text-dim)}
.warn{background:rgba(217,161,59,.08);border-left:3px solid var(--warn);padding:8px 12px;border-radius:0 5px 5px 0;font-size:13px;color:#e6cf9a;margin:4px 0}
pre{background:#101216;border:1px solid var(--border);border-radius:6px;padding:12px;overflow-x:auto;margin:6px 0}
pre code{font-family:var(--mono);font-size:12.5px;color:#c8d3e8;white-space:pre}
.analysis{margin-top:26px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.analysis-head{padding:10px 14px;background:var(--bg3);font-weight:700;color:var(--acc);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.analysis-head .ameta{font-weight:400;font-size:11px;color:var(--text-dim);margin-left:auto}
.analysis-body{padding:8px 16px 16px}
.analysis-body h1,.analysis-body h2,.analysis-body h3,.analysis-body h4{margin:14px 0 6px;color:var(--acc)}
.analysis-body h1{font-size:17px}.analysis-body h2{font-size:15px}.analysis-body h3{font-size:14px}.analysis-body h4{font-size:13px}
.analysis-body p{margin:6px 0;color:var(--text)}
.analysis-body ul,.analysis-body ol{margin:6px 0 6px 22px}
.analysis-body li{margin:3px 0}
.analysis-body strong{color:#fff}
.analysis-body table{border-collapse:collapse;font-size:12.5px;margin:8px 0;width:100%}
.analysis-body th{background:var(--bg3);padding:5px 9px;border:1px solid var(--border);text-align:left}
.analysis-body td{padding:5px 9px;border:1px solid var(--border)}
.analysis-body blockquote{border-left:3px solid var(--acc-dim);padding:4px 12px;color:var(--text-dim);margin:8px 0}
.analysis-body code{font-family:var(--mono);font-size:12px;color:var(--acc);background:var(--bg3);padding:1px 5px;border-radius:4px}
.analysis-body pre code{background:none;padding:0;color:#c8d3e8}
.noana{color:var(--text-dim);font-size:13px;padding:12px 0}
.mdl{display:block;width:100%;text-align:left;background:none;border:0;color:var(--text-dim);font-size:12px;padding:5px 2px;cursor:pointer;font-family:var(--mono)}
.mdl:hover{color:var(--text)}
#foot{height:30px;display:flex;align-items:center;padding:0 16px;background:var(--bg2);border-top:1px solid var(--border);color:var(--text-dim);font-size:11px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:99}
@media(max-width:820px){
  body{font-size:13px}
  #sidebar{position:fixed;top:52px;bottom:30px;left:0;z-index:100;transform:translateX(-100%);transition:transform .18s;width:80%;min-width:260px}
  #sidebar.show{transform:none}
  .brand-sub{display:none}
  #detailBody{padding:14px 14px 40px}
}