:root { color-scheme: light dark; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
body { margin: 0; }
.top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid #8884; }
.brand { font-weight: 700; text-decoration: none; color: inherit; }
.logout { display: flex; gap: 8px; align-items: center; }
main { padding: 12px 16px; max-width: 1400px; margin: 0 auto; }
.login { max-width: 360px; margin: 10vh auto; display: grid; gap: 12px; }
.login input { width: 100%; box-sizing: border-box; font-size: 18px; padding: 10px; }
.login button, .logout button { min-height: 44px; padding: 0 16px; font-size: 16px; }
.error { color: #c0392b; }

.dash-head h1 { margin: 8px 0 2px; font-size: 22px; }
.muted { opacity: .65; font-size: 13px; }
.tabs { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.tabs button { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid #8886; background: transparent; color: inherit; }
.tabs button[aria-selected="true"] { background: #8883; font-weight: 600; }
.tabs select { min-height: 44px; font-size: 16px; width: 100%; }
.sec h2 { font-size: 16px; margin: 18px 0 8px; cursor: pointer; }
.sec.collapsed .grid { display: none; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.grid > [size="wide"] { grid-column: span 2; }
.grid > [size="full"] { grid-column: 1 / -1; }
@media (max-width: 640px) { .grid > [size="wide"] { grid-column: auto; } }