:root {
  --bg:#ffffff; --fg:#0a0a0a; --muted:#6b7280; --card:#f4f4f5; --border:#e4e4e7;
  --bg-img:url('/bg/algiz-light.webp'); --scrim:rgba(255,255,255,0.80);
}
html.dark {
  --bg:#0a0a0a; --fg:#fafafa; --muted:#a1a1aa; --card:#18181b; --border:#27272a;
  --bg-img:url('/bg/algiz-dark.webp'); --scrim:rgba(10,10,10,0.80);
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

/* Themed background rune behind a readability scrim (fixed so it stays put while content scrolls). */
body::before { content:''; position:fixed; inset:0; z-index:-2; background:var(--bg-img) center/cover no-repeat; }
body::after  { content:''; position:fixed; inset:0; z-index:-1; background:var(--scrim); }

.topbar { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10; }
.brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--fg); }
.brand-logo { border-radius:6px; }
.brand-name { font-weight:600; font-size:1.1rem; }
.topbar-actions { display:flex; align-items:center; gap:.75rem; }
.icon-btn { background:none; border:none; color:var(--fg); cursor:pointer; font-size:1.1rem; padding:.4rem; border-radius:6px; }
.icon-btn:hover { background:var(--card); }
html.dark .sun, html:not(.dark) .moon { display:none; }
.nav-link, .login-link { color:var(--fg); text-decoration:none; border:1px solid var(--border); border-radius:6px; padding:.4rem .8rem; font-size:.9rem; }
.nav-link:hover, .login-link:hover { background:var(--card); }

main { max-width:1200px; margin:0 auto; padding:1rem; }

/* Collapsible chart sections */
.chart-section { margin-top:1.25rem; }
.group-header { display:flex; align-items:center; gap:.5rem; width:100%; padding:.4rem 0; background:none; border:none; color:var(--muted); cursor:pointer; font:inherit; text-align:left; }
.group-header .chev { font-size:.7rem; transition:transform .15s ease; }
.chart-section.collapsed .group-header .chev { transform:rotate(-90deg); }
.group-title { font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; }
.group-count { margin-left:auto; font-size:.8rem; opacity:.7; }
.chart-section.collapsed .chart-grid { display:none; }

.chart-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:1rem; }
.chart-tile { height:220px; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:transparent; }

.calendar-panel { margin-top:1.5rem; min-height:600px; background:transparent; border:1px solid var(--border); border-radius:10px; padding:.5rem; }
.note { color:var(--muted); font-size:.85rem; padding:.5rem 0; }
.footer { text-align:center; color:var(--muted); font-size:.8rem; padding:1.5rem; }

/* --- Charts page (/chart.html): full-height Advanced Chart, no page scroll --- */
body.chart-page { display:flex; flex-direction:column; height:100vh; overflow:hidden; background:var(--bg); }
/* The opaque Advanced Chart fills the viewport, so skip the rune bg image/scrim here (avoids a load flash). */
body.chart-page::before, body.chart-page::after { content:none; }
.chart-page .topbar { flex:0 0 auto; }
.chart-main { flex:1 1 auto; min-height:0; max-width:none; margin:0; padding:0; }
.chart-host { width:100%; height:100%; }

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }
@media (max-width:640px) { .chart-grid { grid-template-columns:1fr; } }