:root {
  --ink: #14201d;
  --muted: #69756f;
  --line: #d9e3dc;
  --paper: #f2f5ef;
  --panel: #fffdfa;
  --green: #227c70;
  --green-dark: #15584f;
  --orange: #dd6236;
  --blue: #2d6278;
  --gold: #d99d35;
  --sky: #dbeef2;
  --rose: #f4d7cb;
  --shadow: 0 18px 46px rgba(39, 45, 40, .11);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7; background-image: linear-gradient(115deg, rgba(34,124,112,.08) 1px, transparent 1px), linear-gradient(25deg, rgba(221,98,54,.06) 1px, transparent 1px); background-size: 74px 74px, 118px 118px; background-position: -20px -18px, 12px 30px; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink); padding: 11px 12px; outline: none; }
textarea { min-height: 100px; resize: vertical; }
textarea.tall { min-height: 300px; }
label { display: grid; gap: 7px; color: #2e3a35; font-size: 12px; font-weight: 760; }
code { display: block; white-space: pre-wrap; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8faf8; color: #28413b; font-size: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn, .ghost-btn, .icon-btn { min-height: 38px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-weight: 800; }
.btn { padding: 0 14px; }
.btn.primary { color: #fff; background: var(--green); }
.btn.secondary { color: var(--green-dark); background: #e7f0ec; border: 1px solid #cadecf; }
.btn.small { min-height: 31px; padding: 0 10px; font-size: 12px; }
.block { width: 100%; }
.ghost-btn { width: 100%; color: #dfe8e3; background: rgba(255,255,255,.07); }
.icon-btn { width: 39px; color: var(--ink); background: #fff; border: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; }
.brand img { width: 42px; height: 42px; border-radius: 11px; box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.brand strong { font-size: 20px; letter-spacing: 0; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(280px, 540px) minmax(320px, 460px); place-content: center; align-items: center; gap: 28px; padding: 24px; background: linear-gradient(180deg, #f6f8f4, #e9f1ef); overflow: hidden; }
.auth-card { width: min(460px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.auth-brand { margin-bottom: 28px; }
.auth-heading span, .page-head span { color: var(--orange); text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: 1.3px; }
.auth-heading h1, .page-head h1 { margin: 8px 0 8px; font-size: 31px; line-height: 1.05; letter-spacing: 0; }
.auth-heading p, .page-head p, .muted { color: var(--muted); margin: 0; }
.stack-form { display: grid; gap: 14px; margin-top: 20px; }
.stack-form.compact { gap: 12px; margin-top: 12px; }
.form-error, .flash { margin: 14px 0; padding: 12px 13px; border-radius: 7px; background: #fff4ed; color: #a33f18; border: 1px solid #ffd8c7; font-weight: 760; }
.form-error.neutral { color: #31514a; background: #eef7f2; border-color: #cfe5d8; }
.switch { color: var(--muted); margin: 18px 0 0; }
.switch a { color: var(--green-dark); font-weight: 850; }
.human { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #faf8f3; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 750; }
.check input { width: 18px; height: 18px; accent-color: var(--green); }
.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 20px; background: #15201d; color: #f7f3ea; display: flex; flex-direction: column; gap: 22px; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { min-height: 42px; padding: 0 11px; border-radius: 7px; display: flex; align-items: center; gap: 10px; color: #bdc8c2; font-weight: 780; }
.nav-item.active, .nav-item:hover { color: #fff; background: rgba(255,255,255,.1); }
.version-pill { margin-top: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 10px; color: #f7c9b6; font-weight: 900; text-align: center; }
.main-wrap { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; min-height: 68px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: rgba(247,243,234,.9); backdrop-filter: blur(12px); display: flex; justify-content: flex-end; gap: 10px; }
.mobile-menu { display: none; margin-right: auto; }
.content { padding: 26px; max-width: 1280px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-copy { min-width: min(100%, 540px); }
.page-side { display: flex; align-items: flex-end; gap: 14px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 13px; margin-bottom: 22px; }
.stats article, .panel, .trip-card, .plan-row, .loyalty-card, .version-entry, .alert-row { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.stats article { position: relative; overflow: hidden; padding: 18px; }
.stats article::after { content: ""; position: absolute; right: 15px; bottom: 14px; width: 96px; height: 38px; opacity: .55; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(20,32,29,.08) 12px 14px), linear-gradient(180deg, transparent 46%, rgba(20,32,29,.12) 47% 53%, transparent 54%); clip-path: polygon(0 72%, 11% 45%, 24% 62%, 36% 24%, 47% 58%, 60% 34%, 73% 65%, 88% 42%, 100% 70%, 100% 100%, 0 100%); }
.stats i { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 13px; color: #fff; border-radius: 8px; background: var(--green); box-shadow: 0 10px 22px rgba(34,124,112,.23); }
.stats .stat-active i { background: var(--orange); box-shadow: 0 10px 22px rgba(221,98,54,.2); }
.stats .stat-plans i { background: var(--blue); box-shadow: 0 10px 22px rgba(45,98,120,.2); }
.stats span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; }
.stats strong { display: block; margin-top: 7px; font-size: 30px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; }
.panel { padding: 18px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 13px; }
.panel-head h2, .panel h2 { margin: 0; font-size: 17px; }
.panel-head a { color: var(--green-dark); font-weight: 850; }
.trip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.trip-card { position: relative; min-height: 220px; padding: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: transform .16s ease, box-shadow .16s ease; }
.trip-card:hover { transform: translateY(-3px); box-shadow: 0 24px 54px rgba(39,45,40,.15); }
.trip-card-copy { padding: 16px 18px 4px; }
.trip-card span { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 6px; color: var(--green-dark); background: #e7f0ec; font-size: 11px; font-weight: 900; }
.trip-card h3 { margin: 11px 0 4px; font-size: 22px; }
.trip-card p, .trip-card time { color: var(--muted); margin: 0; }
.trip-card time { padding: 0 18px 16px; font-weight: 800; }
.trip-layout { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 18px; align-items: start; }
.day-label { font-size: 13px; color: var(--muted); margin: 22px 0 10px; }
.plan-row { position: relative; overflow: hidden; display: grid; grid-template-columns: 42px minmax(0,1fr) auto auto; gap: 14px; align-items: center; padding: 14px; margin-bottom: 9px; }
.plan-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--green); }
.plan-row::after { content: ""; position: absolute; right: 12px; top: 10px; width: 74px; height: 52px; opacity: .08; background: currentColor; clip-path: polygon(8% 44%, 100% 0, 70% 100%, 48% 58%); }
.plan-row.plan-hotel::before { background: var(--blue); }
.plan-row.plan-car::before { background: var(--orange); }
.plan-row.plan-rail::before { background: var(--gold); }
.plan-row.plan-restaurant::before, .plan-row.plan-activity::before { background: #8b5a8f; }
.kind { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--green); }
.kind.hotel { background: var(--blue); }
.kind.car { background: var(--orange); }
.plan-row h3 { margin: 0 0 3px; font-size: 16px; }
.plan-row p, .plan-row small { display: block; color: var(--muted); margin: 0; }
.plan-row time { color: #31453f; font-weight: 800; white-space: nowrap; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.span-2 { grid-column: 1 / -1; }
.empty-state, .empty-small { position: relative; overflow: hidden; padding: 24px; border: 1px dashed #cbd6ce; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.68); }
.empty-state::after { content: ""; position: absolute; right: 18px; bottom: 14px; width: 118px; height: 70px; opacity: .18; background: linear-gradient(90deg, var(--green) 0 16%, transparent 16% 25%, var(--orange) 25% 36%, transparent 36% 48%, var(--blue) 48% 62%, transparent 62%), linear-gradient(180deg, transparent 58%, var(--ink) 59% 64%, transparent 65%); clip-path: polygon(0 68%, 14% 38%, 27% 55%, 43% 18%, 59% 59%, 74% 30%, 100% 70%, 100% 100%, 0 100%); }
.empty-state h2 { margin: 0 0 6px; color: var(--ink); }
.notice, .doc-row { display: flex; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.notice::before { content: ""; flex: 0 0 9px; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(221,98,54,.12); }
.notice:last-child, .doc-row:last-child { border-bottom: 0; }
.notice strong, .notice span, .doc-row span, .doc-row small { display: block; }
.notice span, .doc-row small { color: var(--muted); }
.loyalty-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 13px; margin-bottom: 18px; }
.loyalty-card { position: relative; overflow: hidden; padding: 16px; display: grid; gap: 4px; }
.loyalty-card::after { content: ""; position: absolute; right: -12px; top: -16px; width: 82px; height: 82px; border: 12px solid rgba(217,157,53,.22); border-radius: 50%; }
.loyalty-card strong { font-size: 18px; }
.loyalty-card span, .loyalty-card small { color: var(--muted); }
.loyalty-card b { color: var(--green-dark); }
.settings-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; }
.qr-setup { display: grid; grid-template-columns: 148px minmax(0,1fr); gap: 14px; align-items: center; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #fffdfa, #eef7f2); }
.qr-setup img { width: 148px; height: 148px; padding: 8px; border: 1px solid #d7e2da; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(39,45,40,.09); }
.qr-setup strong { display: block; margin-bottom: 4px; font-size: 16px; }
.setup-uri { margin: 2px 0 0; }
.setup-uri summary { cursor: pointer; color: var(--green-dark); font-weight: 850; }
.setup-uri code { margin-top: 9px; max-height: 120px; overflow: auto; word-break: break-all; }
.alert-row, .version-entry { padding: 16px; margin-bottom: 10px; }
.alert-row strong { font-size: 17px; }
.alert-row p, .alert-row time, .version-entry p, .version-entry time { color: var(--muted); margin: 4px 0 0; }
.version-hero { position: relative; overflow: hidden; margin-bottom: 18px; padding: 26px; color: #fff; background: #15201d; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.version-hero::after { content: ""; position: absolute; right: 22px; inset-block: 14px; width: 230px; opacity: .22; background: linear-gradient(90deg, transparent 0 11%, currentColor 11% 12%, transparent 12% 24%, currentColor 24% 25%, transparent 25%), radial-gradient(circle at 15% 55%, currentColor 0 5px, transparent 6px), radial-gradient(circle at 55% 25%, currentColor 0 5px, transparent 6px), radial-gradient(circle at 86% 65%, currentColor 0 5px, transparent 6px); }
.version-hero strong { font-size: 28px; }
.version-entry { display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 16px; }
.version-entry > span { color: var(--orange); font-weight: 900; }
.admin-row { display: grid; grid-template-columns: minmax(180px,1fr) 120px 120px 130px auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-row strong small { display: block; color: var(--muted); font-weight: 500; }
table { width: 100%; border-collapse: collapse; }
td { padding: 10px; border-bottom: 1px solid var(--line); }
.flash { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; }
.flash.success { color: #15584f; background: #ecf7f1; border-color: #cce4d6; }
.flash.error { color: #a33f18; background: #fff4ed; border-color: #ffd8c7; }
.flash button { margin-left: auto; border: 0; background: transparent; color: inherit; cursor: pointer; }
.tripdeck-toast { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: min(360px, calc(100vw - 36px)); padding: 15px 42px 15px 16px; border-radius: 8px; color: #fff; background: #15201d; box-shadow: 0 22px 55px rgba(0,0,0,.28); }
.tripdeck-toast strong, .tripdeck-toast span { display: block; }
.tripdeck-toast span { color: #d7ded9; margin-top: 3px; }
.tripdeck-toast button { position: absolute; top: 9px; right: 9px; border: 0; background: transparent; color: #d7ded9; font-weight: 900; cursor: pointer; }
.mobile-lock-overlay, .app-update-popup { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: rgba(20,32,29,.72); backdrop-filter: blur(10px); }
.mobile-lock-card, .app-update-card { width: min(390px,100%); padding: 24px; border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); text-align: center; }
.mobile-lock-card img, .app-update-card img { width: 70px; height: 70px; border-radius: 16px; }
.mobile-lock-card form { margin-top: 10px; }
.auth-visual { position: relative; width: min(540px, 42vw); min-height: 520px; border-radius: 8px; background: linear-gradient(145deg, #15201d 0 42%, #28635c 42% 100%); box-shadow: 0 26px 70px rgba(20,32,29,.24); overflow: hidden; }
.auth-visual::before { content: ""; position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 44px 44px; }
.auth-visual::after { content: ""; position: absolute; left: 34px; right: 34px; bottom: 42px; height: 120px; background: linear-gradient(180deg, transparent 0 46%, rgba(255,255,255,.2) 47% 51%, transparent 52%), linear-gradient(90deg, #f3c36d 0 7%, transparent 7% 13%, #e8794f 13% 23%, transparent 23% 34%, #8fc7c0 34% 48%, transparent 48% 58%, #f6f0df 58% 72%, transparent 72%); clip-path: polygon(0 76%, 12% 45%, 24% 62%, 38% 20%, 52% 68%, 66% 34%, 79% 58%, 92% 28%, 100% 74%, 100% 100%, 0 100%); }
.route-card { position: absolute; left: 44px; top: 46px; width: min(390px, calc(100% - 88px)); height: 240px; border-radius: 8px; background: #f9f6ee; box-shadow: 0 20px 48px rgba(0,0,0,.26); }
.route-card::before { content: ""; position: absolute; inset: 18px; background-image: radial-gradient(circle at 18% 64%, var(--orange) 0 7px, transparent 8px), radial-gradient(circle at 55% 34%, var(--green) 0 7px, transparent 8px), radial-gradient(circle at 82% 70%, var(--blue) 0 7px, transparent 8px); }
.route-card::after { content: ""; position: absolute; left: 44px; top: 108px; width: 280px; height: 80px; border-top: 3px dashed rgba(34,124,112,.54); border-radius: 50%; transform: rotate(-8deg); }
.route-card span { position: absolute; left: 32px; bottom: 26px; width: 86px; height: 46px; background: var(--sky); border-radius: 7px; box-shadow: 118px -58px 0 #f4d7cb, 214px -6px 0 #e8efd5; }
.route-card i { position: absolute; right: 62px; top: 76px; width: 68px; height: 32px; color: var(--green); background: currentColor; clip-path: polygon(0 42%, 100% 0, 72% 100%, 49% 57%); transform: rotate(-9deg); }
.route-card b { position: absolute; left: 24px; top: 22px; width: 58px; height: 12px; border-radius: 999px; background: #15201d; box-shadow: 0 24px 0 rgba(20,32,29,.18), 210px 178px 0 rgba(20,32,29,.16); }
.ticket-stack { position: absolute; right: 50px; bottom: 68px; width: 170px; height: 126px; transform: rotate(-7deg); }
.ticket-stack span { position: absolute; inset: 0; border-radius: 8px; background: #fffdfa; box-shadow: 0 16px 38px rgba(0,0,0,.22); }
.ticket-stack span:nth-child(2) { inset: 18px -18px -18px 18px; background: #f4d7cb; }
.ticket-stack span:nth-child(3) { inset: 40px -36px -40px 40px; background: #f3c36d; }
.ticket-stack span::before { content: ""; position: absolute; left: 18px; right: 18px; top: 22px; height: 8px; border-radius: 999px; background: rgba(20,32,29,.22); box-shadow: 0 22px 0 rgba(20,32,29,.12), 0 44px 0 rgba(20,32,29,.12); }
.ticket-stack span::after { content: ""; position: absolute; inset-block: 0; right: 34px; width: 2px; background: repeating-linear-gradient(180deg, rgba(20,32,29,.25) 0 7px, transparent 7px 14px); }
.route-graphic { position: relative; width: 260px; height: 112px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #fffdfa, #e7f0ec); box-shadow: 0 14px 36px rgba(39,45,40,.08); overflow: hidden; }
.route-graphic svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--green-dark); }
.route-graphic circle { fill: #fffdfa; stroke: var(--orange); stroke-width: 3; }
.route-graphic .map-line { stroke: rgba(21,88,79,.55); stroke-width: 3; stroke-dasharray: 8 8; }
.route-graphic .plane-mark { fill: var(--green); stroke: none; }
.route-graphic span { position: absolute; right: 18px; bottom: 14px; width: 62px; height: 36px; border-radius: 7px; background: var(--sky); box-shadow: -72px -28px 0 var(--rose), -142px 10px 0 #e8efd5; opacity: .75; }
.trip-scene { position: relative; height: 94px; background: linear-gradient(135deg, #dbeef2 0 50%, #e8efd5 50%); overflow: hidden; }
.trip-scene::before { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 58px; background: linear-gradient(90deg, rgba(34,124,112,.9) 0 12%, transparent 12% 18%, rgba(221,98,54,.86) 18% 30%, transparent 30% 42%, rgba(45,98,120,.88) 42% 55%, transparent 55% 66%, rgba(217,157,53,.88) 66% 77%, transparent 77% 100%); clip-path: polygon(0 70%, 10% 38%, 20% 62%, 33% 26%, 48% 66%, 62% 33%, 74% 58%, 88% 25%, 100% 70%, 100% 100%, 0 100%); }
.trip-scene span { position: absolute; left: 22px; top: 22px; width: 54px; height: 10px; border-radius: 999px; background: rgba(20,32,29,.2); box-shadow: 74px 18px 0 rgba(20,32,29,.12), 152px -4px 0 rgba(20,32,29,.1); }
.trip-scene i { position: absolute; right: 36px; top: 28px; width: 56px; height: 27px; background: #fffdfa; clip-path: polygon(0 42%, 100% 0, 72% 100%, 49% 57%); transform: rotate(-10deg); box-shadow: 0 12px 22px rgba(20,32,29,.08); }
.trip-scene b { position: absolute; right: 18px; bottom: 15px; width: 50px; height: 28px; border-radius: 7px; background: rgba(255,253,250,.82); }
.trip-status-active .trip-scene { background: linear-gradient(135deg, #dbeef2 0 45%, #f4d7cb 45%); }
.trip-status-complete .trip-scene { background: linear-gradient(135deg, #e8efd5 0 45%, #d9e3dc 45%); }
.alert-panel { overflow: hidden; }
.alert-panel::after { content: ""; display: block; height: 52px; margin: 12px -18px -18px; background: repeating-linear-gradient(90deg, rgba(34,124,112,.12) 0 18px, transparent 18px 36px), linear-gradient(90deg, rgba(221,98,54,.18), rgba(45,98,120,.14)); clip-path: polygon(0 45%, 12% 20%, 26% 54%, 38% 28%, 52% 58%, 66% 24%, 82% 50%, 100% 30%, 100% 100%, 0 100%); }
@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 280px; transform: translateX(-105%); transition: transform .18s ease; }
  .menu-open .sidebar { transform: translateX(0); }
  .backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(20,32,29,.4); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
  .menu-open .backdrop { opacity: 1; pointer-events: auto; }
  .mobile-menu { display: inline-flex; }
  .topbar { justify-content: flex-start; padding: 12px 16px; }
  .content { padding: 18px 14px 90px; }
  .dashboard-grid, .trip-layout, .settings-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .page-head { display: block; }
  .page-side { margin-top: 14px; align-items: center; justify-content: space-between; }
  .route-graphic { width: min(220px, 45vw); height: 92px; }
  .page-actions { margin-top: 14px; }
  .plan-row { grid-template-columns: 38px minmax(0,1fr); }
  .plan-row time, .plan-row .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 640px) {
  .auth-card { padding: 22px; }
  .auth-heading h1, .page-head h1 { font-size: 26px; }
  .form-grid { grid-template-columns: 1fr; }
  .human { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 1fr; }
  .topbar .btn { min-width: 0; padding: 0 10px; }
  .page-side { display: block; }
  .route-graphic { width: 100%; height: 86px; margin-bottom: 12px; }
  .trip-card { min-height: 210px; }
  .qr-setup { grid-template-columns: 1fr; }
  .qr-setup img { width: min(100%, 220px); height: auto; justify-self: center; }
}