/* Neutral on purpose: brand values are supplied by the operator and live in
   the ETITE Accounts theme's tokens.ts, not here. System fonts only, so no
   reader's browser calls a font service. */
:root { color-scheme: light dark; --fg: #1f1f1f; --muted: #5f6368; --line: #dadce0; --bg: #fff; --card: #f8f9fa; }
@media (prefers-color-scheme: dark) {
  :root { --fg: #e8eaed; --muted: #9aa0a6; --line: #3c4043; --bg: #202124; --card: #292a2d; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: var(--bg); }
.bar { display: flex; gap: 16px; align-items: center; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.bar .name { font-weight: 600; margin-right: auto; }
.bar .who { color: var(--muted); font-size: 14px; }
.bar a { color: inherit; font-size: 14px; }
main { max-width: 880px; margin: 0 auto; padding: 32px 24px; }
h1 { font-size: 28px; font-weight: 500; margin: 0 0 8px; }
.lead, .empty, .error { color: var(--muted); }
.products { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.products .product { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); display: flex; flex-direction: column; gap: 4px; }
.products .title { font-size: 18px; font-weight: 600; }
.products .summary { color: var(--muted); font-size: 14px; }
.products .links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 14px; }
.products .links a { color: inherit; font-weight: 500; }
.products .links .locked { color: var(--muted); font-weight: 400; }