:root{
  /* Shared Vesper token set — duplicated identically across econsent/,
     epro/, and pi/ styles.css. There is no shared CSS file or build step
     for these three static apps, so an identical :root block pasted into
     each file is the practical way to keep one canonical palette; keep
     these three blocks byte-identical when updating any value.
     --vesper-ink/--vesper-bg drawn from econsent+epro (already shared by
     2 of 3 apps and consistent with the Bootstrap-gray literals used
     throughout, e.g. #ced4da/#adb5bd/#dee2e6); pi's body previously used
     one-off #f0f2f5/#1a202c instead and now matches.
     --vesper-accent drawn from all three (identical #495057 already).
     --vesper-warn is epro's #6b4cc8, already darkened from #845ef7 in
     Phase A for WCAG AA contrast on #fff3bf — canonical over pi's #e67700.
     --vesper-danger/--vesper-focus were already identical across all three. */
  --vesper-bg:#f8f9fa;
  --vesper-ink:#212529;
  --vesper-accent:#495057;
  --vesper-warn:#6b4cc8;
  --vesper-warn-bg:#fff3bf;
  --vesper-danger:#c92a2a;
  --vesper-danger-bg:#ffe3e3;
  --vesper-focus:#1a56db;
  --vesper-width-flow:600px;
  --vesper-width-console:900px;
}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--vesper-bg);color:var(--vesper-ink);line-height:1.6}#app{max-width:var(--vesper-width-flow);margin:0 auto;padding:20px}header{padding:16px 0;border-bottom:2px solid var(--vesper-accent)}h1{font-size:1.2rem;color:var(--vesper-accent)}h2{font-size:1rem;margin:16px 0 8px}section{background:#fff;border-radius:8px;padding:24px;margin-top:16px;box-shadow:0 1px 3px rgba(0,0,0,0.08)}.consent-text{max-height:300px;overflow-y:auto;padding:16px;background:#f1f3f5;border:1px solid #dee2e6;border-radius:6px;margin-bottom:16px;font-size:0.9rem}.form-group{display:flex;flex-direction:column;gap:12px}input[type=text],input[type=email],input[type=password]{padding:10px;border:1px solid #ced4da;border-radius:6px;font-size:1rem}label{display:flex;align-items:center;gap:8px;font-size:0.9rem;cursor:pointer}button{padding:12px;border:none;border-radius:6px;background:var(--vesper-accent);color:#fff;font-size:1rem;cursor:pointer}button:disabled{background:#adb5bd;cursor:not-allowed}.status{color:#2b8a3e;margin-top:12px;font-weight:600}.error{color:var(--vesper-danger);font-size:0.85rem;margin-top:8px}.hidden{display:none}#login-form{display:flex;flex-direction:column;gap:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--vesper-focus);outline-offset:2px}