:root {
  color-scheme: light;
  --bg: #f4f7f9;
  --panel: #ffffff;
  --ink: #173042;
  --muted: #6d7f8a;
  --line: #dbe4e8;
  --green: #15803d;
  --yellow: #a16207;
  --orange: #c2410c;
  --red: #b91c1c;
  --neutral: #475569;
  --accent: #0066cc;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
[hidden] { display: none !important; }
.access-page { min-height:100vh; display:grid; grid-template-columns:1.08fr 1fr; background:#fff; }
.access-story { padding:54px 64px 32px; background:linear-gradient(145deg,#003f83,#0066cc 65%,#0e7490); color:white; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.access-story::after { content:''; width:600px; height:600px; border:1px solid #ffffff22; border-radius:50%; position:absolute; right:-300px; bottom:-230px; box-shadow:0 0 0 65px #ffffff05,0 0 0 130px #ffffff04; pointer-events:none; }
.access-brand { color:#fff; text-decoration:none; font-size:30px; font-weight:800; letter-spacing:.14em; }
.access-brand span { display:block; font-size:9px; letter-spacing:.15em; margin-top:7px; font-weight:500; }
.access-story-body { margin:auto 0; padding:70px 0; position:relative; z-index:1; max-width:560px; }
.access-kicker { font-size:11px; letter-spacing:.17em; color:#b9ddff; }
.access-story h1 { margin:22px 0; font-size:clamp(36px,4vw,58px); line-height:1.12; letter-spacing:-.04em; font-weight:650; }
.access-story p { color:#d5e8fb; line-height:1.8; max-width:450px; font-size:16px; }
.access-features { margin-top:42px; display:grid; gap:18px; font-size:13px; }
.access-features span { color:#acd3f7; display:flex; gap:18px; align-items:center; }
.access-features b { color:#fff; font-weight:500; }
.access-story>small { color:#bfd9f2; font-size:11px; }
.access-entry { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:50px 40px 28px; position:relative; }
.access-form-wrap { width:min(390px,100%); padding:40px 0 65px; }
.environment-label { font-size:10px; letter-spacing:.14em; color:#64748b; display:flex; gap:8px; align-items:center; margin-bottom:38px; }
.environment-label i { width:6px; height:6px; background:#0e7490; border-radius:50%; }
.access-icon { width:44px; height:44px; border-radius:12px; background:#e9f3ff; display:grid; place-items:center; color:#0066cc; font-weight:800; margin-bottom:22px; }
.access-entry h2 { font-size:29px; letter-spacing:-.04em; color:#1e293b; margin-bottom:10px; }
.access-entry p { color:#64748b; font-size:14px; line-height:1.6; }
#loginForm { margin-top:32px; }
#loginForm label { display:block; font-size:12px; font-weight:650; color:#334155; margin:22px 0 9px; }
#loginForm input { width:100%; border:1px solid #d5e0eb; border-radius:9px; padding:14px; font:inherit; font-size:14px; background:#fbfdff; color:#1e293b; }
#loginForm input:focus { outline:3px solid #0066cc22; border-color:#0066cc; }
.password-field { position:relative; }
.password-field input { padding-right:80px !important; }
.password-field button { position:absolute; right:8px; top:8px; background:transparent; color:#0066cc; font-size:11px; padding:8px; }
#loginError { color:#b91c1c; font-size:13px; min-height:22px; margin-top:12px; }
.access-submit { width:100%; background:#0066cc; border-radius:9px; padding:15px 18px; display:flex; justify-content:space-between; font-size:13px; font-weight:650; }
.access-submit:disabled { opacity:.6; cursor:wait; }
.access-restricted { text-align:center; font-size:11px !important; margin:24px 0 !important; }
.institution-link { display:block; text-align:center; font-size:12px; color:#0066cc; text-decoration:none; }
.access-copyright { position:absolute; bottom:28px; font-size:10px; color:#94a3b8; }
.audit-scroll { overflow:auto; margin-top:20px; }
.audit-table { width:100%; border-collapse:collapse; text-align:left; font-size:12px; }
.audit-table th,.audit-table td { padding:12px; border-bottom:1px solid var(--line); white-space:nowrap; }
@media(max-width:760px) { .access-page { grid-template-columns:1fr; }.access-story { padding:26px; }.access-story-body { padding:28px 0; }.access-story h1 { font-size:32px; }.access-features,.access-story>small { display:none; }.access-entry { padding:20px 26px 60px; }.access-form-wrap { padding:20px 0; }.environment-label { margin-bottom:22px; } }
.shell { width: min(1500px, 96vw); margin: 0 auto; padding: 28px 0 40px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { font-size: 12px; letter-spacing: .2em; font-weight: 800; color: var(--accent); }
h1 { margin: 4px 0 6px; font-size: clamp(28px, 4vw, 44px); }
h2 { margin: 0; font-size: 18px; }
p { margin: 0; color: var(--muted); }
.status { min-width: 118px; text-align: center; padding: 14px 18px; border-radius: 999px; font-weight: 800; color: white; letter-spacing: .08em; }
.status-GREEN { background: var(--green); }
.status-YELLOW { background: var(--yellow); }
.status-ORANGE { background: var(--orange); }
.status-RED { background: var(--red); }
.status-neutral { background: var(--neutral); }

.metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric, .panel, .block-card, .domain-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.metric { padding: 18px; }
.metric-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.metric-value { font-size: 28px; font-weight: 800; margin-top: 6px; }

.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.panel { padding: 18px; margin-bottom: 18px; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.count { min-width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 999px; background: #e6f3f1; color: var(--accent); font-weight: 800; }

.stack { display: grid; gap: 10px; }
.issue { border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; padding: 12px 14px; }
.issue[data-status="GREEN"] { border-left-color: var(--green); }
.issue[data-status="YELLOW"] { border-left-color: var(--yellow); }
.issue[data-status="ORANGE"] { border-left-color: var(--orange); }
.issue[data-status="RED"] { border-left-color: var(--red); }
.issue-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.issue-title { font-weight: 800; }
.issue-meta, .issue-action { color: var(--muted); font-size: 13px; margin-top: 7px; }
.overdue { color: var(--red); font-weight: 800; }

.block-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.block-card { padding: 14px; }
.block-card header, .domain-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.block-name { font-weight: 800; }
.small-status { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.small-status.GREEN { background: var(--green); }
.small-status.YELLOW { background: var(--yellow); }
.small-status.ORANGE { background: var(--orange); }
.small-status.RED { background: var(--red); }

.domain-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.domain-card { padding: 12px 14px; }
.domain-name { font-size: 13px; font-weight: 800; }
.domain-count { color: var(--muted); font-size: 12px; }

footer { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
button { border: 0; border-radius: 10px; background: var(--accent); color: white; font-weight: 700; padding: 10px 14px; cursor: pointer; }

.empty { color: var(--muted); padding: 18px 0; text-align: center; }

@media (max-width: 1000px) {
  .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.two { grid-template-columns: 1fr; }
  .block-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .domain-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .topbar { flex-direction: column; }
  .metrics, .block-grid, .domain-grid { grid-template-columns: 1fr; }
}