*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#080a0e;--bg2:#0e1117;--bg3:#141820;--bg4:#1a2030;--bg5:#202636;
  --border:#ffffff0e;--border2:#ffffff18;--border3:#ffffff28;
  --text:#dde2f0;--text2:#7a84a0;--text3:#444c62;
  --accent:#00e5b8;--accent-dim:#00e5b820;--accent2:#3d9eff;--accent2-dim:#3d9eff20;
  --red:#ff3d5a;--red-dim:#ff3d5a20;--gold:#f0a500;--gold-dim:#f0a50020;
  --green:#00e5b8;--green-dim:#00e5b820;--purple:#a78bfa;--purple-dim:#a78bfa20;
  --r:8px;--r2:12px;--r3:16px;
}
/* ── LIGHT MODE ─────────────────────────────────────────────────────────── */
[data-theme="light"]{
  --bg:#f0f2f7;--bg2:#ffffff;--bg3:#f5f7fc;--bg4:#e8ecf5;--bg5:#dde2ee;
  --border:#d0d6e8;--border2:#b8c0d8;--border3:#a0aac8;
  --text:#0e1117;--text2:#4a5270;--text3:#8a90a8;
  --accent:#009e80;--accent-dim:#009e8018;--accent2:#1a6fd4;--accent2-dim:#1a6fd418;
  --red:#c92030;--red-dim:#c9203018;--gold:#a06000;--gold-dim:#a0600018;
  --green:#009e80;--green-dim:#009e8018;--purple:#6b4fcf;--purple-dim:#6b4fcf18;
}
[data-theme="light"] .sidebar{box-shadow:2px 0 12px #0000000a}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:var(--border2)}
[data-theme="light"] .modal{box-shadow:0 8px 40px #00000018}
/* Date/time picker icon: the browser draws it black, which disappears on the dark theme (v15.4) */
input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:1;padding:4px;border-radius:4px;filter:invert(1) brightness(1.4)}
input::-webkit-calendar-picker-indicator:hover{background-color:#00000040}
[data-theme="light"] input::-webkit-calendar-picker-indicator{filter:none;opacity:.8}
[data-theme="light"] input::-webkit-calendar-picker-indicator:hover{background-color:#00000010}
html,body{height:100%;overflow:hidden}
body.onboarding{overflow-y:auto;height:auto}
body{background:var(--bg);color:var(--text);font-family:'Syne',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border3);border-radius:3px}
.app{display:flex;height:100vh}
.sidebar{width:230px;min-width:230px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;position:relative;z-index:10}
.main{flex:1;overflow:hidden;display:flex;flex-direction:column}
.page-wrap{flex:1;overflow-y:auto;position:relative}
.logo-area{padding:22px 20px 18px;border-bottom:1px solid var(--border)}
.logo-row{display:flex;align-items:center;gap:10px}
.brand-badge{width:30px;height:30px;border-radius:50%;flex:none;display:block}
[data-theme="light"] .brand-badge{filter:invert(1)}
.logo-wordmark{font-size:15px;font-weight:800;letter-spacing:0;white-space:nowrap;line-height:1;color:var(--text)}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.logo-tagline{font-size:10px;color:var(--text3);letter-spacing:2.6px;text-transform:uppercase;margin-top:5px;font-weight:600}
.nav{padding:14px 10px;flex:1;overflow-y:auto}
.nav-group-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:2px;font-weight:700;padding:12px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);cursor:pointer;color:var(--text2);font-size:13px;font-weight:600;transition:all .15s;margin-bottom:1px;border:none;background:none;width:100%;text-align:left;position:relative}
.nav-item svg{opacity:.6;flex-shrink:0}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item:hover svg{opacity:1}
.nav-item.active{background:var(--bg4);color:var(--accent)}
.nav-item.active svg{opacity:1}
.nav-item.active::before{content:'';position:absolute;left:0;top:20%;height:60%;width:2px;background:var(--accent);border-radius:0 2px 2px 0}
.wn-card{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.wn-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wn-ver{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--accent-dim);color:var(--accent)}
.wn-date{font-size:11px;color:var(--text3);font-family:'IBM Plex Mono',monospace}
.wn-title{font-size:15px;font-weight:700;width:100%;margin-top:6px}
.wn-sec{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin:16px 0 8px}
.wn-sec.new{color:var(--accent)}.wn-sec.fix{color:var(--gold)}
.wn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wn-list li{font-size:13px;color:var(--text2);line-height:1.55;padding-left:16px;position:relative}
.wn-list li::before{content:'\203A';position:absolute;left:2px;color:var(--text3)}
.wn-note{margin-top:16px;padding:10px 12px;border-radius:10px;background:var(--bg3);border-left:2px solid var(--gold);font-size:12px;color:var(--text2);line-height:1.55}
.bk-box{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.bk-row{display:flex;gap:8px;flex-wrap:wrap}
.bk-row .btn{flex:1;justify-content:center;min-width:130px}
.bk-meta{font-size:11px;color:var(--text3);margin-top:10px;line-height:1.5}
.bk-preview{margin-top:12px;padding:12px 14px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--accent)}
.bk-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:12px;color:var(--text2);margin:8px 0 12px}
.bk-preview-grid b{color:var(--text);font-family:'IBM Plex Mono',monospace;font-weight:600}
.nav-badge{margin-left:auto;background:var(--accent-dim);color:var(--accent);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;font-family:'IBM Plex Mono',monospace}