/* Shared visual layer. Role visibility and booking/payment behavior stay in their own files. */
:root {
  --bg: #f5f5f7;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --line: #e5e5ea;
  --blue: #0071e3;
  --sky: #eef5ff;
  --green: #178451;
  --orange: #b96508;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body { background: var(--bg); color: var(--ink); font-family: var(--ui-font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--ui-font); }
h1 { font-weight: 700; letter-spacing: -.035em; }
h2 { letter-spacing: -.02em; font-weight: 650; }
.sidebar { background: #f0f1f5; color: #34343a; border-right: 1px solid #dedee5; }
.sidebar .brand { color: #1d1d1f; letter-spacing: -.035em; }
.brand-mark { background: #0071e3; border-radius: 9px; box-shadow: 0 3px 8px #0071e326; }
.workspace { color: #73737c; letter-spacing: .1em; }
.nav-link { color: #52525b; border-radius: 12px; font-weight: 500; padding-top: 13px; padding-bottom: 13px; }
.nav-link:hover { background: #e3e6ec; color: #1d1d1f; }
.nav-link.active { background: #fff; color: #0066cc; box-shadow: 0 2px 7px #2020400b; }
.sidebar-foot { border-color: #dadbe2; color: #34343a; }
.sidebar-foot small, .sidebar-foot .more { color: #73737c; }
.avatar { background: #e2eaff; color: #1764c0; }
.eyebrow { color: #73737c; letter-spacing: .09em; font-weight: 600; }
.panel, .stats article, .flight { border-color: var(--line); border-radius: 20px; box-shadow: 0 3px 14px #1b294005; }
.panel-title { padding: 22px 24px 18px; }
.stats { gap: 16px; }
.stats article { padding: 23px; align-items: flex-start; }
.stats small { color: #6e6e73; font-weight: 600; letter-spacing: .06em; }
.stats strong { color: #1d1d1f; font-size: 25px; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stats em { display: block; color: #6e6e73; line-height: 1.6; }
.stats .icon { border-radius: 13px; flex-shrink: 0; }
.wallet-banner { border-radius: 24px; padding: 30px; background: linear-gradient(115deg, #162c52, #215997); box-shadow: 0 8px 24px #16386315; }
.wallet-banner strong { font-size: 34px; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.wallet-banner p { font-weight: 600; letter-spacing: .1em; }
.balance-card { border-radius: 24px; background: linear-gradient(115deg, #162c52, #215997); }
.primary, .secondary { min-height: 42px; border-radius: 12px; font-weight: 600; padding: 11px 17px; }
.primary { background: #0071e3; border-color: #0071e3; box-shadow: 0 2px 4px #0071e312; }
.primary:hover { background: #0066cc; border-color: #0066cc; }
.secondary { background: #fff; border-color: #dedee5; color: #414149; }
.secondary:hover { background: #f5f5f7; }
.text-btn { color: #0066cc; font-weight: 600; border-radius: 10px; }
.text-btn:hover { background: #edf4fc; }
button { transition: background-color .16s ease, box-shadow .16s ease; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
  border-radius: 11px; border-color: #dcdce3; background-color: #fff; color: #1d1d1f;
}
input::placeholder, textarea::placeholder { color: #85858d; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 2px solid #0071e3; outline-offset: 2px; }
input[type="checkbox"], input[type="radio"] { accent-color: #0071e3; }
.search-panel .trip-tabs { display: inline-flex; background: #eaeaf0; padding: 4px; border: 0; border-radius: 12px; gap: 3px; }
.search-panel .trip-tabs button { padding: 9px 18px; margin: 0; border: 0; border-radius: 9px; color: #61616a; font-weight: 600; }
.search-panel .trip-tabs button.selected { background: #fff; color: #1d1d1f; box-shadow: 0 2px 5px #20204012; }
.counter>div { border-radius: 10px; }
.filters { gap: 12px; }
th { background: #fafafb; color: #73737c; font-weight: 600; letter-spacing: .05em; }
td { border-bottom-color: #eeeef2; padding-top: 17px; padding-bottom: 17px; }
tbody tr:hover { background: #f8faff; }
tbody tr:last-child td { border-bottom: 0; }
.table-wrap { border-radius: 0 0 20px 20px; }
.tag { font-weight: 600; padding: 6px 10px; }
.tag.ticketed { background: #e7f5ed; color: #187348; }
.tag.pending { background: #fff3df; color: #985a0b; }
dialog { border: 1px solid #ffffffb3; border-radius: 24px; box-shadow: 0 24px 100px #18233530; max-width: calc(100vw - 28px); }
dialog::backdrop { background: #17203555; backdrop-filter: blur(5px); }
dialog h2 { font-size: 24px; }
dialog .close { border-radius: 50%; background: #f0f1f5; color: #62626c; }
.auth-card { border-radius: 28px; border-color: #e0e2e8; box-shadow: 0 20px 70px #20365713; }
#auth-root { background: #f5f5f7; }
.auth-intro { background: linear-gradient(145deg, #142f55, #246bb5); }
.auth-form input { min-height: 46px; }
#toast { border-radius: 14px; box-shadow: 0 8px 28px #17203525; }
@media (max-width: 1100px) {
  .stats strong { font-size: 22px; }
  .stats article { padding: 18px; gap: 10px; }
}
@media (max-width: 650px) {
  .wallet-banner { padding: 22px; border-radius: 20px; flex-wrap: wrap; gap: 20px; }
  .wallet-banner strong { font-size: 29px; }
  .wallet-actions { flex-wrap: wrap; }
  .panel-title { padding: 18px; gap: 12px; }
  .section-heading { flex-wrap: wrap; gap: 14px; }
  .stats article { border-radius: 16px; }
  dialog { border-radius: 22px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}