:root{ --zw-panel:#0d1117; --zw-panel2:#11161f; --zw-line:rgba(148,163,184,.14); }
*{ scrollbar-width:thin; scrollbar-color:rgba(56,189,248,.35) transparent; }
::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background:rgba(56,189,248,.28); border-radius:8px; }
.zw-body{ background:#04060b; color:#e2e8f0; font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; min-height:100vh; overflow:hidden; }
.zw-glow{ position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.zw-glow-a{ width:560px; height:560px; background:rgba(37,99,235,.20); top:-180px; left:-120px; }
.zw-glow-b{ width:520px; height:520px; background:rgba(8,145,178,.14); bottom:-200px; right:-120px; }
.zw-window{ position:relative; z-index:1; height:100vh; display:flex; flex-direction:column; background:linear-gradient(180deg,rgba(13,17,23,.92),rgba(9,12,18,.96)); }
.zw-titlebar{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--zw-line); background:rgba(255,255,255,.02); -webkit-app-region:drag; }
.zw-dot{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.zw-titlebar-title{ font-size:12.5px; color:#94a3b8; letter-spacing:.02em; }
.zw-main{ display:flex; flex:1; min-height:0; }
.zw-sidebar{ width:248px; flex:none; display:flex; flex-direction:column; padding:18px 14px; border-right:1px solid var(--zw-line); background:rgba(255,255,255,.015); }
.zw-logo{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; background:linear-gradient(135deg,#2563eb,#06b6d4); box-shadow:0 6px 18px rgba(37,99,235,.45); }
.zw-nav{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:#a8b3c2; font-weight:500; transition:all .15s; }
.zw-nav:hover{ background:rgba(148,163,184,.08); color:#e2e8f0; }
.zw-nav-active{ background:linear-gradient(90deg,rgba(37,99,235,.22),rgba(6,182,212,.12)); color:#fff; box-shadow:inset 0 0 0 1px rgba(56,189,248,.25); }
.zw-ico{ width:19px; height:19px; flex:none; }
.zw-side-card{ border:1px solid var(--zw-line); background:var(--zw-panel2); border-radius:14px; padding:12px 14px; }
.zw-pill{ font-size:10.5px; padding:2px 8px; border-radius:999px; font-weight:600; }
.zw-pill-ok{ background:rgba(16,185,129,.15); color:#34d399; }
.zw-pill-warn{ background:rgba(245,158,11,.14); color:#fbbf24; }
.zw-avatar{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#334155,#0ea5e9); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex:none; }
.zw-content{ flex:1; display:flex; flex-direction:column; min-width:0; }
.zw-toolbar{ display:flex; align-items:center; gap:16px; padding:14px 26px; border-bottom:1px solid var(--zw-line); }
.zw-search{ display:flex; align-items:center; gap:8px; border:1px solid var(--zw-line); background:var(--zw-panel2); border-radius:10px; padding:7px 10px; }
.zw-kbd{ font-size:10px; color:#64748b; border:1px solid var(--zw-line); border-radius:5px; padding:1px 5px; }
.zw-btn-primary{ background:linear-gradient(90deg,#2563eb,#0891b2); color:#fff; font-size:13px; font-weight:600; padding:8px 14px; border-radius:10px; box-shadow:0 6px 16px rgba(37,99,235,.35); transition:filter .15s; white-space:nowrap; }
.zw-btn-primary:hover{ filter:brightness(1.12); }
.zw-scroll{ flex:1; overflow-y:auto; padding:26px; }
.zw-card{ background:var(--zw-panel2); border:1px solid var(--zw-line); border-radius:16px; }
.zw-input{ width:100%; background:#0a0e14; border:1px solid var(--zw-line); border-radius:10px; padding:9px 12px; font-size:13.5px; color:#e2e8f0; outline:none; }
.zw-input:focus{ border-color:rgba(56,189,248,.55); box-shadow:0 0 0 3px rgba(56,189,248,.12); }
.zw-label{ display:block; font-size:12px; font-weight:600; color:#94a3b8; margin-bottom:6px; letter-spacing:.02em; }
@media (max-width: 860px){ .zw-sidebar{ display:none; } }