:root { --bg:#f5f6f8; --fg:#1d2330; --muted:#667085; --card:#fff; --accent:#0b5fff; --line:#e3e6ec; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12151c; --fg:#e8ebf2; --muted:#9aa3b5; --card:#1b2030; --accent:#6ea2ff; --line:#2a3043; }
}
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", system-ui, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); }
.topbar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; padding:.8rem 1.5rem; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { font-weight:700; font-size:1.2rem; text-decoration:none; color:var(--fg); }
.topbar nav { display:flex; gap:1.25rem; }
.topbar nav a { text-decoration:none; color:var(--muted); padding:.25rem 0; border-bottom:2px solid transparent; }
.topbar nav a:hover, .topbar nav a.active { color:var(--fg); border-bottom-color:var(--accent); }
main { max-width:1200px; margin:0 auto; padding:1.5rem; }
.lead { color:var(--muted); }
.cards { display:flex; gap:1rem; flex-wrap:wrap; margin:1.5rem 0; }
.card { display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; min-width:200px; padding:1.5rem 2rem; background:var(--card); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--fg); }
.card strong { font-size:1.4rem; color:var(--accent); }
.card span { color:var(--muted); font-size:.9rem; }
.card:hover { border-color:var(--accent); }
.docs li { margin:.4rem 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.thumb { display:block; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--fg); }
.thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .2s; }
.thumb:hover img { transform:scale(1.03); }
.thumb span { display:block; padding:.5rem .75rem; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lightbox { display:none; position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.9); align-items:center; justify-content:center; }
.lightbox:target { display:flex; }
.lightbox figure { margin:0; max-width:88vw; max-height:92vh; text-align:center; color:#ddd; }
.lightbox figure img { max-width:88vw; max-height:84vh; object-fit:contain; }
.lightbox figcaption { margin-top:.5rem; font-size:.9rem; }
.lb-close, .lb-nav { position:absolute; color:#fff; text-decoration:none; font-size:3rem; line-height:1; padding:.5rem 1rem; user-select:none; }
.lb-close { top:.5rem; right:1rem; }
.lb-prev { left:.5rem; top:50%; transform:translateY(-50%); }
.lb-next { right:.5rem; top:50%; transform:translateY(-50%); }
.videos { display:grid; gap:2rem; }
.videos video { width:100%; max-height:75vh; background:#000; border-radius:10px; }
.videos small { color:var(--muted); }
#blazor-error-ui { display:none; position:fixed; bottom:0; left:0; right:0; padding:.6rem 1.2rem; background:#ffffe0; color:#000; z-index:1000; }
#blazor-error-ui .dismiss { cursor:pointer; position:absolute; right:.75rem; top:.5rem; }
.pdf { margin-bottom:2rem; }
.pdf iframe { width:100%; height:80vh; border:1px solid var(--line); border-radius:10px; background:#fff; }
.pdf small { color:var(--muted); }