:root {
  --color-background: #f4f5f7;
  --color-surface: #ffffff;
  --color-border: #e5e7eb;
  --color-text: #1a1a2e;
  --color-muted: #6b7280;
  --color-accent: #e1251b;
  --color-ok: #10b981;
  --color-header-start: #1b0a2e;
  --color-header-end: #4a2080;
  --shadow-panel: 0 8px 24px rgba(27, 10, 46, 0.07);
  font-family: Inter, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-background); color: var(--color-text); }
.site-header { display: flex; justify-content: space-between; gap: 2rem; padding: 3rem max(1.5rem, calc((100% - 1120px) / 2)); color: #fff; background: linear-gradient(135deg, var(--color-header-start), var(--color-header-end)); }
.site-header h1, .site-header p { margin: 0.5rem 0 0; }
.site-header h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.site-header p:not(.eyebrow) { color: #e9e3f2; }
.site-header-actions { display: flex; align-items: center; gap: 1rem; }
.site-header #auth-slot { display: flex; align-items: center; gap: 0.9rem; }
.auth-user { color: #e9e3f2; font-size: 0.9rem; white-space: nowrap; }
.auth-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
.site-header .text-link { color: #ff9f8e; }
.eyebrow, .card-kicker { margin: 0; color: var(--color-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.site-header .eyebrow { color: #ff9f8e; }
.page-shell { width: min(1120px, calc(100% - 3rem)); margin: 2rem auto 4rem; }
.welcome-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-panel); }
.welcome-panel h2 { margin: 0.5rem 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.welcome-panel p:not(.eyebrow), .portal-card p { color: var(--color-muted); }
.primary-action { padding: 0.8rem 1rem; color: #fff; background: var(--color-accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.portal-card { min-height: 10rem; padding: 1.5rem; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.portal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-panel); }
.portal-card h2 { margin: 0.7rem 0 0; }
.portal-card p { line-height: 1.5; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.page-heading h2 { margin: 0.45rem 0 0; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.text-link { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.status-panel { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-panel); }
.progress-ring { display: grid; width: 7rem; height: 7rem; place-items: center; border: 0.65rem solid #d9f5e9; border-top-color: var(--color-ok); border-radius: 50%; color: var(--color-text); font-size: 1.35rem; font-weight: 800; }
.progress-ring span { font-size: 0.7rem; font-weight: 600; color: var(--color-muted); }
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1rem; }
.checklist-item, .metric, .request-form { padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); }
.checklist-item { display: flex; align-items: center; gap: 0.8rem; }
.checklist-item input { width: 1.1rem; height: 1.1rem; accent-color: var(--color-ok); }
.checklist-item label { font-weight: 700; }
.checklist-item .checklist-trailing { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.checklist-item .checklist-note { font-size: 0.75rem; white-space: nowrap; }
.checklist-item .checklist-guide-link { font-size: 0.8rem; white-space: nowrap; }
.muted { color: var(--color-muted); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.metric strong { display: block; margin-top: 0.45rem; font-size: 2rem; }
.metric small { color: var(--color-muted); }
.request-form { display: grid; gap: 1rem; max-width: 46rem; }
.request-form label { display: grid; gap: 0.35rem; font-weight: 700; }
.request-form input, .request-form select, .request-form textarea { width: 100%; padding: 0.75rem; border: 1px solid var(--color-border); font: inherit; }
.request-form textarea { min-height: 8rem; resize: vertical; }
.section-gap { margin-top: 1.5rem; }
@media (max-width: 700px) { .site-header, .welcome-panel { flex-direction: column; align-items: flex-start; } .portal-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .page-heading { align-items: flex-start; flex-direction: column; } .status-panel, .checklist, .metric-grid { grid-template-columns: 1fr; } }