:root {
  color-scheme: dark;
  --bg: #0a0f18;
  --surface: #111827;
  --surface-2: #182231;
  --surface-3: #202c3b;
  --line: #314155;
  --text: #f4f7fb;
  --muted: #96a4b6;
  --lime: #c9f55f;
  --lime-2: #aee33e;
  --danger: #ff8f95;
  --danger-bg: #3b2026;
  --success: #bff16a;
  --success-bg: #19301f;
  --radius: 24px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100dvh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
input, select, textarea { width: 100%; border: 1px solid var(--line); background: #0d1521; color: var(--text); border-radius: 16px; min-height: 52px; padding: 13px 15px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(201,245,95,.12); }
label { display: grid; gap: 8px; color: #d9e1ea; font-weight: 700; }
label small, small { color: var(--muted); font-weight: 500; }
h1,h2,p { margin-top: 0; }
h1 { font-size: clamp(2rem, 7vw, 4rem); line-height: .98; letter-spacing: -.045em; margin-bottom: 14px; }
h2 { letter-spacing: -.025em; }
.lead { color: var(--muted); font-size: 1.05rem; line-height: 1.55; max-width: 700px; }
.brand-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--lime); font-weight: 900; letter-spacing: .16em; font-size: .83rem; margin-bottom: 24px; }
.brand-mark::before { content: ''; width: 12px; height: 12px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 22px rgba(201,245,95,.7); }
.eyebrow { color: var(--lime); font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.landing-page, .auth-page, .install-page { display: grid; place-items: center; padding: max(28px, var(--safe-top)) 20px max(28px, var(--safe-bottom)); }
.landing-shell, .auth-shell, .install-shell { width: min(100%, 960px); }
.auth-shell { width: min(100%, 480px); }
.install-shell { width: min(100%, 760px); }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 36px 0; }
.role-card { min-height: 150px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface-2), var(--surface)); display: flex; flex-direction: column; justify-content: end; transition: transform .18s ease, border-color .18s ease; }
.role-card:hover { transform: translateY(-2px); border-color: #61728a; }
.role-card span { font-size: 1.5rem; font-weight: 900; }
.role-card small { margin-top: 5px; }
.role-passenger { background: linear-gradient(145deg, #283921, #122018); border-color: #4d6c2c; }
.stage-note { display: flex; gap: 12px; align-items: center; color: var(--muted); border-top: 1px solid var(--line); padding-top: 22px; }
.stage-note strong { color: var(--lime); }
.back-link { display: inline-block; color: var(--muted); margin-bottom: 24px; }
.stack-form { display: grid; gap: 16px; }
.auth-form { margin-top: 28px; }
.form-card, .panel, .hero-panel, .driver-status-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.form-card h2 { margin-bottom: 18px; }
.grid-two { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.button { border: 0; border-radius: 16px; min-height: 52px; padding: 13px 18px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.button-primary { color: #0c1208; background: linear-gradient(135deg, var(--lime), var(--lime-2)); }
.button-secondary { color: var(--text); background: var(--surface-3); border: 1px solid var(--line); }
.button-block { width: 100%; }
.alert { border-radius: 16px; padding: 14px 16px; margin: 18px 0; line-height: 1.45; }
.alert-danger { background: var(--danger-bg); border: 1px solid #6e363e; color: #ffc7ca; }
.alert-success { background: var(--success-bg); border: 1px solid #365d37; color: #d8ff9b; }
.security-note { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-top: 18px; }
.app-page { min-height: 100dvh; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: calc(18px + var(--safe-top)) max(20px, calc((100vw - 1180px)/2)) 18px; background: rgba(10,15,24,.93); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(49,65,85,.75); }
.topbar h1 { font-size: clamp(1.75rem, 5vw, 2.8rem); margin: 3px 0 4px; }
.topbar p { color: var(--muted); margin: 0; }
.icon-button { width: 48px; height: 48px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 1.35rem; }
.app-content { width: min(100% - 32px, 1180px); margin: 0 auto; padding: 28px 0 calc(32px + var(--safe-bottom)); display: grid; gap: 18px; }
.compact-content { width: min(100% - 32px, 760px); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.metric span { display: block; color: var(--muted); font-weight: 700; }
.metric strong { display: block; font-size: 2.2rem; margin-top: 10px; }
.panel-muted { background: #0e1622; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.state-flow { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.state-flow span, .pill { border: 1px solid #4d652d; background: #18251a; color: var(--lime); border-radius: 999px; padding: 7px 10px; font-size: .78rem; font-weight: 850; }
.admin-columns { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: start; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 620px; }
th,td { text-align: left; border-bottom: 1px solid var(--line); padding: 13px 10px; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.hero-panel { display: flex; gap: 16px; align-items: flex-start; }
.status-dot, .status-orb { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 20px rgba(201,245,95,.55); margin-top: 4px; }
.driver-status-card { display: flex; align-items: center; gap: 15px; }
.driver-status-card h2 { margin: 2px 0 0; }
.driver-status-card .pill { margin-left: auto; }
.status-orb.offline { background: #667387; box-shadow: none; }
@media (max-width: 760px) {
  .role-grid, .metric-grid, .admin-columns, .grid-two { grid-template-columns: 1fr; }
  .role-card { min-height: 120px; }
  .topbar { padding-left: 18px; padding-right: 18px; }
  .topbar p { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; }
}
.logout-form { margin: 0; }
.icon-button { color: var(--text); cursor: pointer; }
.alert-warning { background:#3a321b; border:1px solid #79672a; color:#ffe9a8; }

/* Stage 2.1 — phone country selector */
.auth-form label>small{display:block;margin-top:2px;line-height:1.45}
.auth-form label>small strong{color:#dfe8f2;font-weight:850}
.phone-field{position:relative;display:flex;align-items:center;gap:0;min-height:84px;padding:10px 18px;border-radius:32px;background:#ffffff;border:1px solid #d4dae3;box-shadow:0 10px 28px rgba(8,12,20,.12)}
.phone-country-shell{position:relative;display:flex;align-items:center;gap:10px;min-width:140px;padding-right:18px;margin-right:14px}
.phone-country-shell::after{content:'';position:absolute;right:0;top:8px;bottom:8px;width:1px;background:#e6ebf2}
.phone-country-view{display:flex;align-items:center;gap:10px;font-weight:800;color:#1f2937;pointer-events:none;white-space:nowrap}
.phone-country-flag{font-size:1.65rem;line-height:1}
.phone-country-arrow{font-size:1rem;color:#4b5563;line-height:1}
.phone-country-code{font-size:1.02rem;letter-spacing:-.02em}
.country-code-select{position:absolute!important;inset:0;opacity:0;cursor:pointer;z-index:2}
.phone-number-input{flex:1;min-width:0;border:0!important;background:transparent!important;box-shadow:none!important;min-height:58px;padding:0 0 0 6px!important;border-radius:0!important;color:#1f2937!important;font-size:1.12rem!important;font-weight:700;outline:none}
.phone-number-input::placeholder{color:#b9bdc4;opacity:1}
.phone-number-input:focus{box-shadow:none!important;border-color:transparent!important}
@media(max-width:430px){
  .phone-field{min-height:76px;padding:8px 14px;border-radius:28px}
  .phone-country-shell{min-width:118px;margin-right:10px;padding-right:12px}
  .phone-country-view{gap:8px}
  .phone-country-flag{font-size:1.45rem}
  .phone-country-code{font-size:.98rem}
  .phone-number-input{font-size:1rem!important;padding-left:4px!important}
}

/* Stage 7 — admin chain ride toggle */
.toggle-control{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);background:var(--surface-2);border-radius:16px}.toggle-control input{width:22px;height:22px;min-height:0;flex:0 0 22px;accent-color:var(--lime)}.toggle-control span{font-weight:800;color:#e8eef5;line-height:1.35}


/* Stage 9.6.5 — clean passenger login */
.passenger-login-clean{
    justify-content:center;
}
.passenger-login-clean .brand-mark{
    margin-bottom:24px;
    text-align:center;
    font-size:1.55rem;
    letter-spacing:-.02em;
    text-transform:none;
}
.passenger-login-clean .auth-form{
    margin-top:0;
}
.passenger-login-clean .auth-form>label{
    font-weight:800;
}


/* Stage 10 — Android driver APK download */
.driver-apk-download-card{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:13px;margin:0 0 20px;padding:14px;border:1px solid #4d652d;border-radius:20px;background:linear-gradient(145deg,#1d2a20,#111827);color:#fff}
.driver-apk-download-card:hover{border-color:#789a45;transform:translateY(-1px)}
.driver-apk-download-card>span:nth-child(2){min-width:0}
.driver-apk-download-card strong,.driver-apk-download-card small{display:block}
.driver-apk-download-card strong{font-size:1rem}
.driver-apk-download-card small{margin-top:4px;color:#9fb0bf;line-height:1.35}
.driver-apk-download-card b{font-size:1.7rem;color:var(--lime)}
.driver-apk-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--lime);color:#11170d;font-size:1.25rem;font-weight:950}