:root {
  --app-navy: #18324b;
  --app-blue: #2563a6;
  --app-blue-soft: #eaf2fb;
  --app-green: #287a5b;
  --app-border: #dfe6ed;
  --app-bg: #f3f6f9;
  --app-muted: #66788a;
  --app-shadow: 0 8px 26px rgba(30, 55, 78, .08);
}

html { min-height: 100%; }
body.app-body { min-height: 100vh; margin: 0; background: var(--app-bg); color: #213142; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.app-shell { width: min(1480px, calc(100% - 2rem)); margin-inline: auto; }
.app-header { background: rgba(255,255,255,.97); border-bottom: 1px solid var(--app-border); box-shadow: 0 2px 14px rgba(30,55,78,.05); }
.app-header .navbar { min-height: 68px; padding-block: .45rem; }
.app-logo { width: auto; height: 43px; object-fit: contain; }
.brand-copy { display: grid; line-height: 1.02; color: var(--app-navy); }
.brand-copy strong { font-size: 1rem; letter-spacing: .01em; }
.brand-copy small { color: var(--app-muted); font-size: .72rem; margin-top: .2rem; }
.navbar-nav .nav-link { border-radius: .55rem; color: #455a6d; font-weight: 600; padding: .55rem .72rem !important; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--app-blue); background: var(--app-blue-soft); }
.app-main { width: min(1480px, calc(100% - 2rem)); margin: 1.25rem auto 2.5rem; }
.app-footer { color: var(--app-muted); font-size: .82rem; border-top: 1px solid var(--app-border); background: #fff; padding: 1rem 0; }
.card { border: 1px solid var(--app-border); border-radius: .9rem; box-shadow: 0 3px 16px rgba(30,55,78,.045); }
.card-section { background: #fff; }
.card-header { background: #f9fbfd; border-bottom-color: var(--app-border); font-weight: 700; color: var(--app-navy); border-radius: .9rem .9rem 0 0 !important; }
.table { --bs-table-bg: transparent; }
.table > thead th { color: #53677a; font-size: .78rem; letter-spacing: .025em; text-transform: uppercase; border-bottom-width: 1px; white-space: nowrap; }
.table > tbody > tr:hover { --bs-table-accent-bg: #f7faff; }
.form-label { font-weight: 650; color: #405467; }
.form-control, .form-select { border-color: #ccd7e1; border-radius: .6rem; min-height: 42px; }
.form-control:focus, .form-select:focus { border-color: #79a6d4; box-shadow: 0 0 0 .2rem rgba(37,99,166,.12); }
.btn { border-radius: .58rem; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--app-blue); --bs-btn-border-color: var(--app-blue); --bs-btn-hover-bg: #1e518b; --bs-btn-hover-border-color: #1e518b; }
.btn-tile { margin: .18rem; }
.page-title { color: var(--app-navy); font-weight: 750; }
.readonly-box { background: #f7f9fb; border: 1px solid var(--app-border); border-radius: .65rem; padding: .72rem .8rem; }
.metric-box { display: inline-flex; min-width: 2.45rem; height: 2.45rem; align-items: center; justify-content: center; border-radius: .65rem; font-weight: 750; background: #d43b4b; color: #fff; }
.result-list { position: relative; z-index: 20; }
.result-list .list-group { position: absolute; inset-inline: 0; max-height: 320px; overflow-y: auto; box-shadow: var(--app-shadow); }
.result-list .list-group-item { cursor: pointer; }
.empty-state { border: 1px dashed #bac8d5; border-radius: .8rem; padding: 1.4rem; color: var(--app-muted); background: #fbfcfd; }
.section-kicker { color: var(--app-blue); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.security-card { max-width: 480px; margin: 6vh auto; border: 0; border-radius: 1rem; box-shadow: var(--app-shadow); }
.security-brand { text-align: center; margin-bottom: 1rem; }
.security-brand img { max-height: 68px; }
.qr-box { display: inline-grid; background: #fff; border: 10px solid #fff; box-shadow: 0 0 0 1px var(--app-border); }
.code-list { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.app-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.app-page-heading h1 { margin: 0 0 .35rem; color: var(--app-navy); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 780; }
.app-page-heading p { margin: 0; color: var(--app-muted); }
.app-eyebrow { color: var(--app-blue) !important; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.app-card { background: #fff; box-shadow: var(--app-shadow); }
.metric-card { display: flex; min-height: 104px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.3rem; border: 1px solid var(--app-border); border-radius: .9rem; background: #fff; box-shadow: 0 3px 16px rgba(30,55,78,.045); color: var(--app-navy); text-decoration: none; }
.metric-card:hover { border-color: #afc9e3; box-shadow: var(--app-shadow); color: var(--app-blue); transform: translateY(-1px); }
.metric-card span { color: var(--app-muted); font-weight: 650; }
.metric-card strong { font-size: 2rem; line-height: 1; }
.app-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.app-action { display: grid; gap: .2rem; padding: 1rem; border: 1px solid var(--app-border); border-radius: .75rem; color: var(--app-navy); text-decoration: none; background: #fbfcfe; }
.app-action:hover { border-color: #a9c7e4; background: var(--app-blue-soft); color: var(--app-blue); }
.app-action span { color: var(--app-muted); font-size: .86rem; }

@media (max-width: 767.98px) {
  .app-shell, .app-main { width: min(100% - 1rem, 1480px); }
  .app-header .navbar { min-height: 60px; }
  .app-logo { height: 36px; }
  .brand-copy small { display: none; }
  .user-menu { padding-block: .75rem .25rem; }
  .app-page-heading { align-items: stretch; flex-direction: column; }
  .app-action-grid { grid-template-columns: 1fr; }
}