/* HFB Tri-Theme (dark → dim → light) */
:root { --bg:#0b1526; --text:#dbe8ff; --muted:#93a4bf; --accent:#6aa9ff; --card:#0f1d33; --border:rgba(148,163,184,.18); }
:root[data-theme="dim"] { --bg:#0f2138; --text:#e9f1ff; --muted:#9fb5d1; --accent:#79b4ff; --card:#183051; --border:rgba(180,198,220,.26); }
:root[data-theme="light"] { --bg:#f7fbff; --text:#0f1b2e; --muted:#485f7d; --accent:#2b6cb0; --card:#ffffff; --border:rgba(15,27,46,.15); }
html, body { background: var(--bg); color: var(--text); }
a { color: var(--accent); }
.card, .tile, .item { background: var(--card); border: 1px solid var(--border); }
.header { border-bottom: 1px solid var(--border); }
.footer { border-top: 1px solid var(--border); color: var(--muted); }
.small, .muted { color: var(--muted); }
/* Toggle pill */
.hfb-theme-toggle { display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background: var(--card); }
.hfb-theme-toggle .pill { width:44px; height:22px; position:relative; border-radius:999px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.08)); }
.hfb-theme-toggle .knob { position:absolute; top:1px; left:1px; width:18px; height:18px; border-radius:999px; background:#bfdcff; transition:transform .22s ease; }
:root[data-theme="dim"] .hfb-theme-toggle .knob { transform: translateX(11px); }
:root[data-theme="light"] .hfb-theme-toggle .knob { transform: translateX(22px); }
.hfb-theme-toggle .label { font: 600 13px/1 ui-sans-serif, -apple-system, Segoe UI, Roboto, Inter, Arial; color: var(--muted); }