/* ===================== shared reset ===================== */
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#eef0f2;color:#14171A;}

/* ===================== app switcher ===================== */
.app-root{display:none;}
.app-root.active{display:block;}

.switch-bar{
  max-width:460px; margin:0 auto; padding:10px 20px 0; text-align:right;
  background:#eef0f2;
}
.switch-link-inline{
  background:none; border:none; font-size:12.5px; font-weight:600;
  color:#6b7076; text-decoration:underline; cursor:pointer; padding:6px;
}
  #rider-app-root{
    --bg:#F3F1EC; --card:#fff; --text:#14171A; --text-mute:#6B6F73; --text-faint:#9a9fa5;
    --accent:#14171A; --signal:#FFB020; --green:#1d9e75; --red:#d23c3c; --amber:#c97a17; --border:#DAD6CC;
  }
  #rider-app-root * {box-sizing:border-box;}
  #rider-app-root {margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}
  #rider-app-root .display {font-family:'Archivo Black','Arial Black',sans-serif;}
  #rider-app-root .wrap {
    max-width:420px;
    margin:24px auto 60px;
    padding:0 0 24px;
    min-height:760px;
    background:var(--card);
    position:relative;
    border-radius:24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  #rider-app-root .nav {padding:18px 20px 14px;border-bottom:2px solid var(--accent);display:flex;align-items:center;justify-content:space-between;}
  #rider-app-root .nav .brandrow {display:flex;align-items:center;gap:10px;}
  #rider-app-root .nav .mark {width:30px;height:30px;background:var(--signal);border:2px solid var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
  #rider-app-root .nav h1 {font-size:14px;margin:0;letter-spacing:0.3px;}
  #rider-app-root .pill {font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;border:1.5px solid var(--accent);}
  #rider-app-root .pill.offline {background:#eee;color:var(--text-mute);border-color:var(--border);}
  #rider-app-root .pill.available {background:var(--signal);color:var(--accent);}
  #rider-app-root .pill.busy {background:#fdf3e3;color:var(--amber);border-color:var(--amber);}
  #rider-app-root .section {padding:18px 20px;}
  #rider-app-root .field {margin-bottom:14px;}
  #rider-app-root .loc-mode-row {display:flex;gap:8px;margin-bottom:10px;}
  #rider-app-root .loc-mode-btn {flex:1;padding:10px 8px;font-size:13px;font-weight:700;border:1.5px solid var(--border);border-radius:10px;background:#fff;color:var(--text-mute);cursor:pointer;}
  #rider-app-root .loc-mode-btn.selected {border-color:var(--accent);background:var(--bg);color:var(--text);}
  #rider-app-root label {font-size:12.5px;color:var(--text-mute);display:block;margin-bottom:6px;}
  #rider-app-root input, #rider-app-root select {width:100%;padding:13px 14px;border:1.5px solid var(--border);border-radius:12px;font-size:15px;background:#fff;color:var(--text);font-family:inherit;}
  #rider-app-root .btn {display:block;width:100%;padding:14px;font-size:15px;font-weight:700;border:2px solid var(--accent);border-radius:12px;cursor:pointer;background:var(--accent);color:var(--signal);}
  #rider-app-root .btn:disabled {opacity:0.5;}
  #rider-app-root .btn-toggle-on {background:var(--red);border-color:var(--red);color:#fff;}
  #rider-app-root .btn-toggle-off {background:var(--green);border-color:var(--green);color:#fff;}
  #rider-app-root .status-card {background:var(--bg);border-radius:14px;padding:16px;margin-bottom:16px;border:1.5px solid var(--border);}
  #rider-app-root .status-card .row {display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  #rider-app-root .status-card .row:last-child {margin-bottom:0;}
  #rider-app-root .status-card .k {font-size:13px;color:var(--text-mute);}
  #rider-app-root .status-card .v {font-size:14px;font-weight:700;font-family:'IBM Plex Mono',monospace;}
  #rider-app-root .booking-card {border:2px solid var(--accent);border-radius:14px;padding:16px;margin-bottom:14px;background:#fff;}
  #rider-app-root .booking-card h3 {margin:0 0 8px;font-size:15px;}
  #rider-app-root .booking-card .meta {font-size:13px;color:var(--text-mute);margin-bottom:12px;line-height:1.5;}
  #rider-app-root .booking-actions {display:flex;gap:10px;}
  #rider-app-root .booking-actions .btn {flex:1;}
  #rider-app-root .btn-decline {background:#fff;color:var(--red);border:2px solid #f3d4d4;}
  #rider-app-root .empty-state {text-align:center;color:var(--text-faint);font-size:13.5px;padding:30px 10px;}
  #rider-app-root .maps-link-box {background:var(--bg);border-radius:12px;padding:14px;margin-top:10px;}
  #rider-app-root .maps-link-box a {display:block;text-align:center;background:#fff;border:1.5px solid var(--border);border-radius:10px;padding:11px;font-size:14px;font-weight:700;color:#1a73e8;text-decoration:none;margin-top:8px;}
  #rider-app-root .toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent);color:var(--signal);padding:12px 20px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .25s,transform .25s;z-index:80;pointer-events:none;max-width:88%;text-align:center;}
  #rider-app-root .toast.show {opacity:1;transform:translateX(-50%) translateY(0);}
  #rider-app-root .helptext {font-size:12px;color:var(--text-faint);margin-top:6px;}
  #user-app-root{
    --bg: #eef0f2;
    --asphalt: #4a4d52;
    --card: #ffffff;
    --text: #1a1d21;
    --text-mute: #6b7076;
    --text-faint: #9a9fa5;
    --accent: #16181c;
    --green: #1d9e75;
    --red: #d23c3c;
    --amber: #c97a17;
    --border: #e3e5e8;
  }
  #user-app-root * {box-sizing:border-box;}
  #user-app-root {
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    padding: 24px 16px 60px;
  }
  #user-app-root .phone {
    max-width: 420px;
    margin: 0 auto;
    background: var(--card);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
    min-height: 760px;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  #user-app-root .screen { display:none; flex-direction:column; flex:1; }
  #user-app-root .screen.active { display:flex; }

  /* shared bits */
  #user-app-root .statusbar { height:0; }
  #user-app-root .nav {
    padding: 16px 18px 12px;
    display:flex;
    align-items:center;
    gap:10px;
    border-bottom: 1px solid var(--border);
  }
  #user-app-root .nav h1 { font-size:16px; font-weight:600; margin:0; flex:1; }
  #user-app-root .icon-btn {
    background:none; border:none; cursor:pointer; padding:4px;
    color: var(--text); font-size:18px; line-height:1;
  }
  #user-app-root .content { flex:1; overflow-y:auto; padding: 0 0 18px; }
  #user-app-root .section-pad { padding: 16px 18px; }

  #user-app-root input, #user-app-root select {
    width:100%;
    padding: 13px 14px;
    border:1px solid var(--border);
    border-radius: 12px;
    font-size:15px;
    background: #fff;
    color: var(--text);
    font-family: inherit;
  }
  #user-app-root label.field-label {
    font-size:12.5px;
    color:var(--text-mute);
    display:block;
    margin: 0 0 6px;
  }
  #user-app-root .field { margin-bottom:14px; }
  #user-app-root .loc-mode-row { display:flex; gap:8px; margin-bottom:10px; }
  #user-app-root .loc-mode-btn {
    flex:1; padding:10px 8px; font-size:13px; font-weight:600;
    border:1.5px solid var(--border); border-radius:10px; background:#fff;
    color:var(--text-mute); cursor:pointer;
  }
  #user-app-root .loc-mode-btn.selected { border-color:var(--accent); background:var(--bg); color:var(--text); }
  #user-app-root .helptext { font-size:12px; color:var(--text-faint); margin:6px 0 0; }

  /* Autocomplete dropdown */
  #user-app-root .autocomplete-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    max-height: 220px;
    overflow-y: auto;
    z-index: 999;
    display: none;
  }
  #user-app-root .autocomplete-dropdown.open { display: block; }
  #user-app-root .ac-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
  }
  #user-app-root .ac-item:last-child { border-bottom: none; }
  #user-app-root .ac-item:hover, #user-app-root .ac-item:active { background: #f5f5f5; }
  #user-app-root .ac-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
  #user-app-root .ac-name { font-weight: 700; font-size: 13px; color: #1a1a1a; line-height: 1.3; }
  #user-app-root .ac-addr { font-size: 11px; color: #888; margin-top: 2px; line-height: 1.4; }
  #user-app-root .ac-loading { padding: 14px; text-align: center; color: #888; font-size: 13px; }


  #user-app-root .btn {
    display:block;
    width:100%;
    padding:14px;
    font-size:15px;
    font-weight:600;
    background: var(--accent);
    color:#fff;
    border:none;
    border-radius:12px;
    cursor:pointer;
    transition: transform 0.1s, opacity 0.15s;
  }
  #user-app-root .btn:active { transform: scale(0.98); }
  #user-app-root .btn:disabled { opacity:0.55; }
  #user-app-root .btn-outline {
    background:#fff;
    color: var(--text);
    border:1px solid var(--border);
  }
  #user-app-root .btn-ghost {
    background:none;
    color: var(--text-mute);
    font-weight:500;
    font-size:14px;
    text-decoration: underline;
    padding: 8px;
  }

  #user-app-root .bottom-tabs {
    display:flex;
    border-top:1px solid var(--border);
    background:#fff;
  }
  #user-app-root .tab {
    flex:1;
    text-align:center;
    padding: 10px 4px 12px;
    background:none;
    border:none;
    cursor:pointer;
    color: var(--text-faint);
    font-size:11.5px;
    font-weight:500;
  }
  #user-app-root .tab .ti { display:block; font-size:20px; margin-bottom:2px; }
  #user-app-root .tab.active { color: var(--accent); }

  /* login */
  #user-app-root .login-hero {
    padding: 50px 28px 28px;
    text-align:center;
  }
  #user-app-root .login-hero .mark {
    width:56px;height:56px;border-radius:16px;
    background: var(--accent);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    margin: 0 auto 16px;
    font-size:24px; font-weight:700;
  }
  #user-app-root .login-hero h2 { font-size:20px; font-weight:600; margin:0 0 4px; }
  #user-app-root .login-hero p { font-size:13.5px; color:var(--text-mute); margin:0; }
  #user-app-root .login-body { padding: 8px 28px 28px; flex:1; }

  /* home */
  #user-app-root .place-card {
    background: var(--card);
    border:1px solid var(--border);
    border-radius:14px;
    padding: 4px;
    margin: 0 18px 16px;
  }
  #user-app-root .place-row {
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 12px;
  }
  #user-app-root .place-row + .place-row { border-top:1px solid var(--border); }
  #user-app-root .place-dot {
    width:9px;height:9px;border-radius:50%;
    flex-shrink:0;
  }
  #user-app-root .place-dot.pickup { background: var(--green); }
  #user-app-root .place-dot.drop { background: var(--red); }
  #user-app-root .place-row input { border:none; padding:0; font-size:15px; }
  #user-app-root .recent-title {
    font-size:13px; font-weight:600; color:var(--text-mute);
    margin: 4px 18px 8px;
  }
  #user-app-root .recent-item {
    display:flex; align-items:center; gap:12px;
    padding: 12px 18px;
    cursor:pointer;
  }
  #user-app-root .recent-item:hover { background: var(--bg); }
  #user-app-root .recent-item .ti { font-size:18px; color:var(--text-faint); }
  #user-app-root .recent-item .meta p { margin:0; }
  #user-app-root .recent-item .meta .a { font-size:14.5px; font-weight:500; }
  #user-app-root .recent-item .meta .b { font-size:12.5px; color:var(--text-mute); }

  /* vehicle type picker */
  #user-app-root .vtype-row {
    display:flex; gap:8px;
    padding: 0 18px 14px;
  }
  #user-app-root .price-set-card {
    flex:1;
    border:1px solid var(--border);
    border-radius:12px;
    padding: 10px 8px;
    text-align:center;
    background:#fff;
  }
  #user-app-root .price-set-card .vlabel { display:block; font-size:12.5px; font-weight:600; margin-bottom:4px; }
  #user-app-root .price-set-card .pre { font-size:11.5px; color:var(--text-mute); margin-right:3px; }
  #user-app-root .price-set-card input.price-edit {
    width:46px;
    text-align:center;
    padding:5px 2px;
    font-size:13px;
    border-radius:8px;
    display:inline-block;
  }
  #user-app-root .peak-toggle-row {
    display:flex; align-items:center; justify-content:space-between;
    margin: 0 18px 16px;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 12px;
  }
  #user-app-root .peak-toggle-row .a { font-size:14px; font-weight:500; margin:0 0 2px; }
  #user-app-root .peak-toggle-row .b { font-size:12px; color:var(--text-mute); margin:0; }
  #user-app-root .switch {
    width:46px; height:27px;
    border-radius:999px;
    border:none;
    background: var(--border);
    position:relative;
    cursor:pointer;
    flex-shrink:0;
    transition: background 0.2s;
    padding:0;
  }
  #user-app-root .switch .knob {
    position:absolute;
    top:2.5px; left:2.5px;
    width:22px; height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.2s;
  }
  #user-app-root .switch.on { background: var(--amber); }
  #user-app-root .switch.on .knob { transform: translateX(19px); }

  /* parking lot screen */
  #user-app-root .status-row {
    display:flex; align-items:baseline; justify-content:space-between;
    padding: 14px 18px 10px;
  }
  #user-app-root .status-row .live-label { font-size:13px; color:var(--text-mute); }
  #user-app-root .status-row .count { font-size:13px; font-weight:600; }
  #user-app-root .count.ok { color: var(--green); }
  #user-app-root .count.empty { color: var(--red); }
  #user-app-root .lot-wrap { padding: 0 16px; }
  #user-app-root .lot {
    background: var(--asphalt);
    border-radius: 14px;
    padding: 14px 10px;
    position: relative;
    overflow: visible;
  }
  #user-app-root .lot svg { width:100%; height:auto; display:block; overflow:visible; }
  #user-app-root .bonus-banner {
    margin: 12px 18px 0;
    padding: 10px 14px;
    background: #fdf3e3;
    border-radius: 10px;
    font-size: 13px;
    color: var(--amber);
    display:none;
    align-items:center;
    gap:8px;
  }
  #user-app-root .bonus-banner.show { display:flex; }
  #user-app-root .bonus-banner .dot { width:6px;height:6px;border-radius:50%; background: var(--amber); flex-shrink:0; }
  #user-app-root .fare-row {
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 14px;
    background: var(--bg);
    border-radius: 12px;
  }
  #user-app-root .fare-row .k { font-size:13px; color:var(--text-mute); margin:0; }
  #user-app-root .fare-row .v { font-size:18px; font-weight:600; margin:0; }
  #user-app-root .surge-banner {
    margin: 12px 18px 0;
    padding: 10px 14px;
    background: #fdeae3;
    border-radius: 10px;
    font-size: 13px;
    color: #c2410c;
    display:none;
    align-items:center;
    gap:8px;
  }
  #user-app-root .surge-banner.show { display:flex; }
  #user-app-root .ride-type-row {
    display:flex; gap:8px;
    padding: 0 18px;
  }
  #user-app-root .ride-type-card {
    flex:1;
    border:1.5px solid var(--border);
    border-radius:14px;
    padding: 12px 6px 10px;
    text-align:center;
    background:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  #user-app-root .ride-type-card.selected {
    border-color: var(--accent);
    background:#f4f4f5;
  }
  #user-app-root .ride-type-card .rt-icon { width:30px; height:30px; display:flex; align-items:center; justify-content:center; margin-bottom:2px; }
  #user-app-root .ride-type-card .rt-icon svg { width:100%; height:100%; }
  #user-app-root .ride-type-card .rt-name { font-size:13px; font-weight:600; }
  #user-app-root .ride-type-card .rt-count { font-size:11px; color:var(--text-mute); }
  #user-app-root .ride-type-card .rt-price { font-size:13.5px; font-weight:600; margin-top:2px; }
  #user-app-root .ride-type-card .rt-price.surge { color: #c2410c; }
  #user-app-root .hint { text-align:center; font-size:11.5px; color: var(--text-faint); margin: 10px 18px 0; }
  #user-app-root .book-btn-wrap { padding: 14px 18px 18px; }

  #user-app-root .vehicle-shape { cursor:pointer; }
  #user-app-root .slot-wrap { transition: opacity 0.4s; }

  /* detail overlay */
  #user-app-root .overlay {
    position: fixed; inset:0; background: rgba(0,0,0,0.4);
    display:none; align-items:flex-end; justify-content:center; z-index: 60;
  }
  #user-app-root .overlay.show { display:flex; }
  #user-app-root .detail-card {
    background: var(--card);
    width:100%; max-width: 420px;
    border-radius: 20px 20px 0 0;
    padding: 20px 22px 26px;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
  }
  #user-app-root .overlay.show .detail-card { transform: translateY(0); }
  #user-app-root .detail-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  #user-app-root .detail-vehicle-tag {
    font-size:12px; font-weight:600; padding:4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  #user-app-root .detail-vehicle-tag.bike { background:#e6f1fb; color:#0c447c; }
  #user-app-root .detail-vehicle-tag.auto { background:#fae7ca; color:#7e4706; }
  #user-app-root .detail-vehicle-tag.auto_share { background:#e2f7ed; color:#0e623b; }
  #user-app-root .detail-vehicle-tag.car { background:#eeedfe; color:#3c3489; }
  #user-app-root .close-x { background:none; border:none; font-size:20px; color:var(--text-mute); cursor:pointer; padding:4px; line-height:1; }
  #user-app-root .rider-row { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
  #user-app-root .avatar {
    width:50px;height:50px;border-radius:50%;
    background: #e6f1fb; color:#0c447c;
    display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:17px; flex-shrink:0;
  }
  #user-app-root .rider-name { font-size:16px; font-weight:600; margin:0 0 3px; }
  #user-app-root .rider-sub { font-size:13px; color:var(--text-mute); margin:0; display:flex; align-items:center; gap:5px; }
  #user-app-root .star { color:#c97a17; }
  #user-app-root .detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-bottom: 18px; }
  #user-app-root .detail-stat { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
  #user-app-root .detail-stat .k { font-size:11.5px; color:var(--text-mute); margin:0 0 2px; }
  #user-app-root .detail-stat .v { font-size:14.5px; font-weight:600; margin:0; }

  /* confirmed / tracking */
  #user-app-root .confirm-banner {
    margin: 18px; padding: 20px;
    background: #eaf6f0; border-radius: 16px;
    text-align:center;
  }
  #user-app-root .confirm-banner .confirm-vehicle-icon { width:56px; height:56px; margin:0 auto; display:flex; align-items:center; justify-content:center; }
  #user-app-root .confirm-banner .confirm-vehicle-icon svg { width:100%; height:100%; }
  #user-app-root .confirm-banner h3 { font-size:17px; margin:8px 0 2px; }
  #user-app-root .confirm-banner p { font-size:13px; color:var(--text-mute); margin:0; }
  #user-app-root .track-map {
    margin: 0 18px; height:160px;
    background: var(--asphalt); border-radius:14px;
    position:relative; overflow:hidden;
    z-index: 1;
  }
  #user-app-root .driver-card {
    margin: 14px 18px; padding:14px;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    display:flex; align-items:center; gap:12px;
  }
  #user-app-root .driver-card .meta p { margin:0; }
  #user-app-root .driver-card .meta .a { font-size:14.5px; font-weight:600; }
  #user-app-root .driver-card .meta .b { font-size:12.5px; color:var(--text-mute); }
  #user-app-root .driver-actions { margin-left:auto; display:flex; gap:8px; }
  #user-app-root .round-btn {
    width:38px;height:38px;border-radius:50%;
    border:1px solid var(--border); background:#fff;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:16px;
  }
  #user-app-root .trip-progress { margin: 0 18px 18px; padding: 14px; background: var(--bg); border-radius:12px; }
  #user-app-root .trip-progress .row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  #user-app-root .trip-progress .row:last-child { margin-bottom:0; }
  #user-app-root .trip-progress .dot2 { width:9px;height:9px;border-radius:50%; flex-shrink:0; }
  #user-app-root .trip-progress .label { font-size:13.5px; }
  #user-app-root .trip-progress .label.faint { color: var(--text-faint); }

  /* history */
  #user-app-root .ride-item {
    display:flex; align-items:center; gap:12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
  }
  #user-app-root .ride-icon {
    width:38px;height:38px;border-radius:50%;
    background: var(--bg);
    display:flex; align-items:center; justify-content:center;
    color: var(--text-mute); font-size:17px; flex-shrink:0;
  }
  #user-app-root .ride-item .meta { flex:1; }
  #user-app-root .ride-item .meta p { margin:0; }
  #user-app-root .ride-item .meta .a { font-size:14.5px; font-weight:500; }
  #user-app-root .ride-item .meta .b { font-size:12px; color:var(--text-mute); }
  #user-app-root .ride-item .price { font-size:14.5px; font-weight:600; }

  /* profile */
  #user-app-root .profile-head {
    display:flex; align-items:center; gap:14px;
    padding: 22px 18px;
    border-bottom: 1px solid var(--border);
  }
  #user-app-root .profile-head .avatar { width:60px;height:60px; font-size:20px; }
  #user-app-root .profile-head h2 { font-size:17px; margin:0 0 2px; }
  #user-app-root .profile-head p { font-size:13px; color:var(--text-mute); margin:0; }
  #user-app-root .menu-item {
    display:flex; align-items:center; gap:14px;
    padding: 15px 18px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
  }
  #user-app-root .menu-item .ti { font-size:19px; color: var(--text-mute); width:22px; }
  #user-app-root .menu-item .label { font-size:14.5px; flex:1; }
  #user-app-root .menu-item .ti.chev { color: var(--text-faint); font-size:16px; width:auto; }

  /* payment */
  #user-app-root .pay-summary {
    margin: 18px; padding: 18px;
    background: var(--bg); border-radius:16px;
  }
  #user-app-root .pay-summary .route { display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:10px; }
  #user-app-root .pay-summary .route .ti { color: var(--text-faint); }
  #user-app-root .pay-row { display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-mute); margin-bottom:6px; }
  #user-app-root .pay-row.total { color:var(--text); font-weight:600; font-size:15px; margin-top:8px; padding-top:10px; border-top:1px solid var(--border); }
  #user-app-root .pay-method {
    margin: 0 18px 14px; padding:14px;
    border:1px solid var(--border); border-radius:12px;
    display:flex; align-items:center; gap:12px; cursor:pointer;
  }
  #user-app-root .pay-method.selected { border-color: var(--accent); background:#f4f4f5; }
  #user-app-root .pay-method .ti { font-size:20px; }
  #user-app-root .pay-method .label { flex:1; font-size:14.5px; font-weight:500; }
  #user-app-root .pay-method .check { color: var(--green); font-size:16px; }

  #user-app-root .toast {
    position:fixed; bottom:30px; left:50%; transform: translateX(-50%) translateY(20px);
    background: var(--accent); color:#fff;
    padding: 12px 20px; border-radius: 12px; font-size:14px;
    opacity:0; transition: opacity 0.25s, transform 0.25s;
    z-index: 80; pointer-events:none;
    max-width: 88%; text-align:center;
  }
  #user-app-root .toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }