@font-face {
  font-family: "Open Sans Local";
  src: url("./assets/OpenSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  font-family: "Open Sans Local", "Open Sans", Arial, sans-serif;
  color: #0d1a26;
  background: #101820;
  --lto-blue: #0036af;
  --lto-red: #e10017;
  --lto-green: #8ac43f;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { display: grid; min-height: 100svh; place-items: center; background: #101820; }
button { font: inherit; }

.app-shell {
  position: relative;
  width: min(100vw, 430px);
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--lto-blue);
}

.background { position: absolute; inset: 0; overflow: hidden; background: url("./assets/bg_crossroads.jpg") center center / cover no-repeat; }
.background::after { content: ""; position: absolute; inset: 0; background: rgba(0, 54, 175, .52); pointer-events: none; }
.top-nav { position: absolute; z-index: 2; inset: 0 0 auto; height: 68px; background: rgba(0, 54, 175, .92); }
.nav-logo { position: absolute; left: 18px; top: 12px; width: 44px; height: 44px; object-fit: contain; opacity: .55; }
.nav-actions { position: absolute; right: 17px; top: 0; height: 68px; display: flex; align-items: center; gap: 14px; }
.nav-icon { position: relative; width: 34px; height: 34px; padding: 5px; border: 0; color: #a9c1ee; background: transparent; opacity: .66; cursor: pointer; }
.nav-icon svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon:hover, .nav-icon:focus-visible { opacity: 1; outline: 1px solid rgba(255,255,255,.6); outline-offset: 2px; }
.nav-menu { margin-right: 1px; }
.chevron { position: absolute; right: -3px; top: 13px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #a9c1ee; opacity: .7; }
.hero-panel { position: absolute; z-index: 1; left: 20px; right: 20px; top: 68px; height: 92px; background: rgba(0, 54, 175, .88); }
.watermark { position: absolute; z-index: 1; left: 120px; top: 132px; width: 190px; height: 190px; opacity: .16; }
.watermark img { width: 100%; height: 100%; object-fit: contain; }
.portal-links { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 155px; display: flex; justify-content: space-evenly; align-items: center; color: #a9c1ee; opacity: .42; }
.portal-link { width: 150px; display: grid; justify-items: center; gap: 14px; }
.portal-link svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.portal-link span { font-size: 20px; font-weight: 300; letter-spacing: .2px; }

.dim-overlay { position: absolute; z-index: 3; inset: 0; background: rgba(0, 54, 175, .75); pointer-events: none; }
.digital-modal { position: absolute; z-index: 4; top: calc(50% + 2.5px); left: 0; width: 100%; height: 423px; transform: translateY(-50%); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.modal-header { position: relative; height: 63px; display: flex; align-items: center; border-bottom: 1px solid #e6e6e6; }
.status-mark { position: relative; width: 28px; height: 32px; margin-left: 20px; margin-right: 6px; color: #003f9e; }
.status-mark span { position: absolute; left: 5px; top: 2px; width: 18px; height: 18px; border: 3px solid currentColor; border-radius: 50%; }
.status-mark i { position: absolute; left: 8px; top: 18px; width: 13px; height: 12px; border: 3px solid currentColor; border-top: 0; clip-path: polygon(0 0,100% 0,100% 100%,50% 66%,0 100%); }
.modal-header h1 { margin: 0; color: #063b93; font-size: 20px; line-height: 23px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.modal-header h1 strong { color: var(--lto-green); font-weight: 700; }
.icon-button { display: grid; place-items: center; border: 0; cursor: pointer; }
.close-control { position: absolute; right: 12px; top: 18px; width: 30px; height: 30px; border: 1px solid #d9d9d9; border-radius: 50%; background: #fafafa; color: #393939; }
.close-control svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.close-control:hover, .close-control:focus-visible { background: #f0f0f0; outline: 2px solid #8ba8db; outline-offset: 1px; }
.card-wrap { position: absolute; left: 10px; top: 76px; width: calc(100% - 20px); height: 261px; overflow: hidden; border: 1px solid rgba(77,105,111,.65); border-radius: 10px; background: #fff; }
.id-card { display: block; width: 100%; height: 100%; object-fit: fill; }
.action-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 71px; display: flex; align-items: center; border-top: 1px solid #e6e6e6; }
.action-button { height: 34px; border: 0; border-radius: 3px; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.action-button:active { transform: translateY(1px); }
.action-button:hover, .action-button:focus-visible { filter: brightness(1.1); outline: 2px solid rgba(0,54,175,.25); outline-offset: 2px; }
.close-action { width: 80px; margin-left: 20px; background: var(--lto-red); }
.blue-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 118px; background: var(--lto-blue); }
.blue-action:nth-child(2) { margin-left: 75px; }
.blue-action:nth-child(3) { margin-left: 4px; }
.swap-icon { position: relative; display: inline-block; width: 18px; height: 18px; }
.swap-icon::before, .swap-icon::after, .swap-icon i, .swap-icon b { content: ""; position: absolute; display: block; height: 2px; background: #fff; border-radius: 2px; }
.swap-icon::before { left: 3px; top: 5px; width: 13px; }.swap-icon::after { left: 2px; bottom: 5px; width: 14px; }
.swap-icon i { left: 1px; top: 3px; width: 7px; transform: rotate(45deg); }.swap-icon b { right: 0; bottom: 3px; width: 7px; transform: rotate(45deg); }
.qr-icon { display: grid; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 3px; width: 17px; height: 17px; }
.qr-icon i { display: block; border: 2px solid #fff; }
.toast { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translate(-50%, 14px); padding: 8px 12px; color: #fff; background: rgba(0,0,0,.72); border-radius: 4px; font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; white-space: nowrap; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.digital-modal.is-closed { display: none; }

@media (max-width: 430px) {
  .app-shell { width: 100vw; height: 100svh; min-height: 100svh; }
  .nav-actions { right: 28px; gap: 10px; }
  .nav-icon { width: 40px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }