:root {
  color-scheme: light;
  font-family: Tahoma, "Segoe UI", sans-serif;
  --navy: #102444;
  --navy-light: #1d3861;
  --ink: #152744;
  --muted: #52647e;
  --line: #dce5ef;
  --canvas: #f3f7fb;
  --surface: #fff;
  --blue: #174fb0;
  --blue-soft: #eaf2ff;
  --green: #176447;
  --green-soft: #e5f5ee;
  --amber: #855317;
  --amber-soft: #fff3db;
  --radius: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #5787e5; outline-offset: 3px; }
button[disabled] { cursor: default; }
h1, h2, h3, p { margin: 0; }
button { -webkit-tap-highlight-color: transparent; }

.app { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--navy); color: #fff; display: flex; flex-direction: column; gap: 42px; padding: 32px 22px 24px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand strong { display: block; font-size: 19px; }
.brand > div > span, .sidebar-foot > div > span { display: block; margin-top: 7px; font-size: 11px; color: #bccce3; }
.brand-mark { display: grid; width: 42px; height: 42px; flex: 0 0 42px; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-8deg); padding: 8px; background: #e9f3ff; border-radius: 11px; }
.brand-mark i { background: #2055ad; border-radius: 2px; }
.brand-mark i:first-child { background: #67a1ff; }
.brand-mark i:last-child { background: #102444; }
.role-nav { display: grid; gap: 8px; }
.nav-label { color: #bccce3; font-size: 11px; margin: 0 5px 5px; }
.role-button { color: #e1ebfa; border: 1px solid transparent; border-radius: 10px; background: transparent; min-height: 46px; text-align: start; display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 13px; }
.role-button:hover { background: var(--navy-light); }
.role-button[aria-pressed="true"] { background: #203f71; border-color: #416399; color: #fff; }
.role-number { display: grid; place-items: center; width: 26px; height: 26px; background: #183358; border-radius: 7px; color: #bfd2f2; font-size: 12px; }
.role-button[aria-pressed="true"] .role-number { color: var(--navy); background: #bcd6ff; }
.sidebar-foot { display: flex; align-items: center; gap: 10px; border-top: 1px solid #385172; padding-top: 17px; margin-top: auto; font-size: 13px; }
.school-mark { display: grid; place-items: center; background: #214471; border-radius: 50%; flex: 0 0 34px; height: 34px; font-weight: bold; }

.topbar { height: 68px; padding-inline: clamp(20px, 5vw, 68px); background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.demo-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--blue-soft); color: var(--blue); border-radius: 99px; font-size: 12px; font-weight: bold; }
.demo-tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.reset-button { border: 1px solid var(--line); color: var(--muted); background: var(--surface); padding: 8px 12px; border-radius: 8px; font-size: 12px; min-height: 36px; }
.reset-button:hover { color: var(--blue); border-color: #94b0d9; }
.content { max-width: 1260px; margin-inline: auto; padding: 34px clamp(20px, 5vw, 68px) 56px; }
.intro { display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; min-height: 176px; color: #fff; background: var(--navy); border-radius: 20px; padding: 24px clamp(22px, 4vw, 42px); }
.intro > div:first-child { position: relative; z-index: 1; }
.eyebrow { color: #a9cdfc; font-size: 12px; font-weight: bold; margin-bottom: 10px; }
h1 { font-size: clamp(24px, 3.3vw, 37px); line-height: 1.55; letter-spacing: -.03em; }
.intro-text { color: #d2e0f3; font-size: 14px; margin-top: 6px; line-height: 1.9; }
.intro-decor { pointer-events: none; position: absolute; inset-inline-end: -42px; width: 310px; height: 228px; opacity: .7; }
.intro-decor span { position: absolute; border: 1px solid #365e94; width: 162px; height: 162px; border-radius: 28px; transform: rotate(-23deg); inset-block-start: 20px; }
.intro-decor span:nth-child(2) { inset-inline-start: 48px; inset-block-start: 47px; background: #18365c; }
.intro-decor span:nth-child(3) { inset-inline-start: 96px; inset-block-start: 74px; background: #204571; }
.demo-note { color: var(--muted); font-size: 12px; margin: 13px 3px 18px; line-height: 1.8; }

.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0 0 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.journey li { padding: 11px 13px; min-height: 53px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; border-inline-end: 1px solid var(--line); }
.journey li:last-child { border-inline-end: 0; }
.journey li span { background: #eef2f8; display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; }
.journey li[aria-current="step"] { color: var(--blue); background: var(--blue-soft); font-weight: bold; }
.journey li[aria-current="step"] span { color: #fff; background: var(--blue); }
.journey li.done { color: var(--green); }
.journey li.done span { background: var(--green-soft); font-weight: bold; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(255px, 1fr); gap: 16px; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; min-width: 0; }
.card + .card { margin-top: 16px; }
.workspace-grid > .card + .card { margin-top: 0; }
.card h2 { font-size: 18px; line-height: 1.6; }
.card h3 { font-size: 14px; line-height: 1.6; }
.card p { line-height: 1.85; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 15px; }
.card-head p { font-size: 12px; color: var(--muted); margin-top: 4px; }
.form-stack { display: grid; gap: 13px; }
.form-stack label, .form-stack .field { display: grid; gap: 7px; font-size: 13px; font-weight: bold; }
.form-stack select, .fixed-field { width: 100%; background: #fff; border: 1px solid #cbd7e7; color: var(--ink); border-radius: 8px; padding: 9px 11px; min-height: 42px; font-size: 13px; }
.fixed-field { display: flex; align-items: center; font-weight: normal; background: #f7f9fc; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 15px; }
.action { min-height: 42px; border: 1px solid transparent; border-radius: 9px; background: var(--blue); color: #fff; font-size: 13px; font-weight: bold; padding: 9px 13px; line-height: 1.6; }
.action:hover { background: #123f8a; }
.action.secondary { color: var(--blue); border-color: #c7d7ef; background: #fff; }
.action.secondary:hover { background: var(--blue-soft); }
.action[disabled] { color: #67758a; background: #eef2f7; border-color: #e1e7ef; }
.amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount small { font-weight: normal; font-size: .76em; }
.pill { display: inline-flex; align-items: center; width: fit-content; border-radius: 99px; padding: 6px 9px; line-height: 1.4; font-size: 11px; color: var(--blue); background: var(--blue-soft); white-space: nowrap; }
.pill.good { color: var(--green); background: var(--green-soft); }
.pill.wait { color: var(--amber); background: var(--amber-soft); }
.description { color: var(--muted); font-size: 13px; }
.facts { margin: 0; display: grid; }
.fact { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.7; }
.fact:last-child { border-bottom: 0; }
.fact dt { color: var(--muted); }
.fact dd { margin: 0; font-weight: bold; text-align: end; }
.fact.emphasis { padding-top: 15px; font-size: 15px; }
.fact.emphasis dd { color: var(--blue); }
.hint { background: #f1f6ff; color: #2b4b73; border-radius: 9px; padding: 10px 12px; margin-top: 12px; font-size: 12px; }
.hint.warn { background: var(--amber-soft); color: #68420c; }
.hint.good { background: var(--green-soft); color: var(--green); }
.bank { border: 1px solid #c7d7ef; border-radius: 12px; padding: 15px; margin-top: 15px; background: #f8fbff; }
.bank h3 { margin-bottom: 4px; }
.bank .actions { margin-top: 10px; }
.section-head { margin-top: 14px; margin-bottom: 7px; }
.receipts { margin: 0; padding: 0; list-style: none; }
.receipts li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 10px 0; font-size: 12px; }
.receipts li > div { display: flex; flex-direction: column; gap: 4px; }
.receipts li > div > span { color: var(--muted); font-size: 11px; }
.receipt-totals { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; gap: 10px; }
.receipt-totals > div { border: 1px solid var(--line); background: #f8fbff; padding: 10px 12px; border-radius: 9px; }
.receipt-totals span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.receipt-totals strong { display: block; font-size: 13px; line-height: 1.6; white-space: normal; }
.skip-link { position: fixed; top: 10px; right: 10px; transform: translateY(-200%); z-index: 10; color: #fff; background: var(--navy); padding: 10px; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 970px) {
  .app { grid-template-columns: 185px minmax(0, 1fr); }
  .sidebar { padding-inline: 14px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 650px) {
  .app { display: block; }
  .sidebar { position: static; height: auto; gap: 15px; padding: 16px; }
  .brand-mark { width: 33px; height: 33px; flex-basis: 33px; padding: 6px; }
  .brand strong { font-size: 15px; }
  .brand > div > span { margin-top: 4px; }
  .role-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .role-button { justify-content: center; padding-inline: 4px; gap: 5px; font-size: 11px; min-height: 44px; }
  .role-number { width: 20px; height: 20px; font-size: 10px; }
  .sidebar-foot { display: none; }
  .topbar { height: 54px; padding-inline: 16px; }
  .content { padding: 17px 14px 34px; }
  .intro { min-height: 134px; border-radius: 14px; padding: 15px; }
  .intro-text { font-size: 12px; }
  .intro-decor { inset-inline-end: -112px; opacity: .5; }
  .journey { grid-template-columns: 1fr 1fr; margin-bottom: 14px; border-radius: 12px; }
  .journey li { padding: 7px 9px; min-height: 41px; font-size: 11px; }
  .journey li:nth-child(2n) { border-inline-end: 0; }
  .journey li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .card { padding: 15px; border-radius: 12px; }
  .receipt-totals { gap: 5px; }
  .receipt-totals > div { padding: 8px 7px; }
  .receipt-totals strong { font-size: 12px; }
}