/* ============================================================
   base.css
   BASE — variables (:root colours), page/body, nav sidebar, layout. The foundation.
   NOTE: all CSS files load together; order affects overrides (base first).
   ============================================================ */

:root {
    --bg: #16141c; --panel: #1e1b26; --panel-2: #262230; --panel-3: #2f2a3b;
    --border: #332e40; --text: #ece8f5; --text-dim: #9d95b3;
    --accent: #c9a4ff; --accent-dim: #6b5a8a; --danger: #ff8a8a; --good: #9ae6b4;
  }

html, body { height: 100%; }

body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); }

.app { display: flex; min-height: 100vh; }

.nav { width: 230px; background: var(--panel); border-right: 1px solid var(--border); padding: 18px 12px; flex-shrink: 0; display: flex; flex-direction: column; }

.brand { font-size: 16px; margin: 0 0 16px 10px; letter-spacing: 0.5px; font-weight: 700; }

.brand span { color: var(--accent); }

.switcher { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 14px; }

.switcher .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); margin: 0 0 8px 2px; }

.who { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 9px; cursor: pointer; margin-bottom: 3px; }

.who:hover { background: var(--panel-3); }

.who.current { background: var(--panel-3); outline: 1px solid var(--accent-dim); }

.who .who-name { font-size: 13.5px; font-weight: 600; }

.who .who-tag { font-size: 10.5px; color: var(--text-dim); }

.add-who { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 9px; cursor: pointer; color: var(--accent); font-size: 13px; margin-top: 4px; border: 1px dashed var(--accent-dim); }

.add-who:hover { background: var(--panel-3); }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--text-dim); font-size: 14px; margin-bottom: 2px; }

.nav-item:hover { background: var(--panel-2); }

.nav-item.active { background: var(--panel-2); color: var(--text); }

.nav-icon { width: 18px; text-align: center; }

.nav-divider { height: 1px; background: var(--border); margin: 12px 4px; }

.nav-foot { margin-top: auto; }

.nav-foot .nav-item { font-size: 12.5px; }

.main { flex: 1; padding: 26px 34px; max-width: 680px; }

.top-strip { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }

.top-strip .name { font-size: 19px; font-weight: 700; margin: 0; }

.top-strip .sub { font-size: 12.5px; color: var(--text-dim); margin: 3px 0 0; }

.post-body { font-size: 14px; line-height: 1.55; margin: 0 0 10px; white-space: pre-wrap; }

.comment .body { background: var(--panel-2); border-radius: 10px; padding: 7px 11px; font-size: 12.5px; line-height: 1.4; }

.comment .body b { font-weight: 600; }

.info-drawer-body { padding:16px; overflow-y:auto; }