/* ───────── Base / Resets / Typography ───────── */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:inherit; text-decoration:none }
.muted{ color:var(--muted) }

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 16px;
  min-height:56px;
  background:var(--panel); color:var(--text);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
.brand{ font-weight:600; display:flex; align-items:center; gap:.5rem }
.topbar-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.topbar-group{ display:flex; gap:8px; flex-wrap:wrap; }
.viewas{ margin-left:auto; display:flex; align-items:center; gap:8px }
.viewas select{
  padding:6px 8px; border:1px solid var(--border); border-radius:6px;
  background:var(--card); color:var(--text)
}

/* Page wrapper */
.main{ padding:16px }

@media (max-width: 900px){
  .topbar{ align-items:flex-start; }
  .topbar-actions{ width:100%; justify-content:flex-start; margin-left:0; }
  .brand{ width:100%; }
}

@media (max-width: 640px){
  .main{ padding:12px; }
}