:root { --fg:#111; --muted:#666; --line:#e3e3e3; --bg:#fafafa; --accent:#f0f4ff; --warn:#fff8e1; }

body  { font-family: system-ui, -apple-system, sans-serif; max-width: 720px; margin: 60px auto; padding: 0 24px; color: var(--fg); }
h1    { font-size: 2rem; margin-bottom: 0.25rem; }
h2    { font-size: 0.8rem; color: var(--muted); margin: 2rem 0 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
p     { color: var(--muted); margin: 0.25rem 0; }

.clock { font-variant-numeric: tabular-nums; }
.tz-note {
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: normal;
}

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat { background: var(--bg); padding: 10px 14px; border-radius: 6px; border: 1px solid var(--line); }
.stat .l { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat .v { font-size: 1.4rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat .u { font-size: 0.8rem; color: var(--muted); }

/* Mode-aware visibility. Default body has no class → visitor view.
   JS sets body.mode-admin or body.mode-preview after /api/me responds. */
.only-admin, .only-preview { display: none; }
body.mode-admin   .only-admin   { display: block; }
body.mode-preview .only-preview { display: block; }

.banner {
  margin: 0 0 24px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--fg);
}
#admin-banner   { background: var(--accent); border-bottom: 1px solid #d0deff; }
#preview-banner { background: var(--warn);   border-bottom: 1px solid #f0e0a0; }
.banner a { color: var(--fg); margin: 0 4px; }

.admin-section {
  background: var(--bg);
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid var(--line);
  margin-top: 24px;
}
.admin-section h2 { margin-top: 0; }