/* ==========================================================================
   HaloRides — design system (ported from Claude Design "HaloRides.dc.html")
   Tokens + base + animations + interaction states + device shells.
   Per-component look is carried by inline styles in the rendered markup so it
   stays 1:1 with the design; this file owns theming, resets and layout chrome.
   ========================================================================== */

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html,body{ min-height:100%; }
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--canvas);
  color:var(--text);
  overflow-x:hidden;
}
body:has(.ride-nav){ overflow:hidden; overscroll-behavior:none; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--accent); opacity:.85; }
button{ font-family:inherit; color:inherit; }
input,textarea,select{ font-family:inherit; }
h1,h2,h3,p{ margin:0; }

/* ------------------------------- TOKENS ---------------------------------- */
[data-halo]{
  --canvas:#E9EBEE; --bg:#FBFBFC; --surface:#F1F2F5; --card:#FFFFFF; --card2:#F7F8FA;
  --text:#14161A; --text2:#69707E; --text3:#9AA1AC;
  --border:#E7E9ED; --border2:#DCDFE5;
  --accent:#2D6CDF; --accent-strong:#2D6CDF; --accent-ink:#FFFFFF; --accent-soft:#EAF1FD;
  --success:#2E9E6B; --success-soft:#E7F5EE; --warning:#B67C08; --warning-soft:#FAF1DC;
  --danger:#D8433D; --danger-soft:#FBEAEA;
  --map:#E5E9EE; --map-line:#D3D9E0; --map-block:#EEF1F5;
  --bubble-them:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(18,22,31,.06);
  --shadow:0 1px 2px rgba(18,22,31,.05),0 6px 18px rgba(18,22,31,.06);
  --shadow-lg:0 10px 40px rgba(18,22,31,.16);
}
[data-halo][data-theme="dark"]{
  --canvas:#050506; --bg:#0C0D0F; --surface:#17181C; --card:#141519; --card2:#1A1B20;
  --text:#ECEDEF; --text2:#9AA1AB; --text3:#6C727C;
  --border:#26282D; --border2:#33363C;
  --accent:#5590FF; --accent-strong:#2F6BE0; --accent-ink:#FFFFFF; --accent-soft:#16233C;
  --success:#3FB985; --success-soft:#122A20; --warning:#E3A631; --warning-soft:#2A2313;
  --danger:#F0645F; --danger-soft:#2E1616;
  --map:#171A1F; --map-line:#22262C; --map-block:#1C2026;
  --bubble-them:#1E2025;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.4);
  --shadow-lg:0 16px 50px rgba(0,0,0,.55);
}

/* --------------------------- INTERACTION STATES -------------------------- */
[data-scroll]::-webkit-scrollbar{ width:0; height:0; }
[data-scroll]{ scrollbar-width:none; }
[data-tab]{ color:var(--text3); }
[data-tab][data-active="true"]{ color:var(--accent); }
[data-seg][data-active="true"]{ background:var(--card); color:var(--text); box-shadow:var(--shadow-sm); }
[data-seg][data-active="false"]{ background:transparent; color:var(--text2); }
[data-chip][data-active="true"]{ background:var(--accent); color:#fff; border-color:var(--accent); }
[data-chip][data-active="false"]{ background:var(--card); color:var(--text2); border-color:var(--border); }
[data-nav]{ color:var(--text2); }
[data-nav][data-active="true"]{ background:var(--accent-soft); color:var(--accent); }
[data-row][data-active="true"]{ background:var(--surface); }
[data-chip]{ white-space:nowrap; }
[data-press]{ transition:background .12s ease, opacity .12s ease, transform .12s ease; }
[data-press]:active{ opacity:.9; }
[data-hover]{ transition:background .12s ease; }
[data-hover]:hover{ background:var(--surface); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
input:focus, textarea:focus{ box-shadow:0 0 0 3px var(--accent-soft); }
[data-pulse]{ animation:pulseDot 1.9s ease-in-out infinite; }

/* ------------------------------- KEYFRAMES ------------------------------- */
@keyframes shimmer{ 0%{ background-position:-380px 0; } 100%{ background-position:380px 0; } }
@keyframes haloPulse{ 0%{ transform:scale(1); opacity:.5; } 70%{ transform:scale(2.4); opacity:0; } 100%{ opacity:0; } }
@keyframes haloDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes pulseDot{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
@keyframes sheetUp{ from{ transform:translateY(18px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,6px); } to{ opacity:1; transform:translate(-50%,0); } }
@keyframes ctxIn{ from{ opacity:0; transform:scale(.95); } to{ opacity:1; transform:scale(1); } }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-3px); opacity:1; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --------------------------------- ROOT ---------------------------------- */
#app{ display:block; }
#app:has(.ride-nav){ position:fixed; inset:0; overflow:hidden; }
#app.center{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  color:var(--text2); font-size:14px; background:var(--bg);
}

/* ----------------------------- MOBILE SHELL ------------------------------ */
/* Real phone: fill the viewport, no prototype bezel / fake status bar. */
.halo-mobile{
  display:flex; flex-direction:column;
  width:100%; max-width:100vw; overflow:hidden;
  height:100dvh; min-height:100dvh;
  background:var(--bg); color:var(--text);
}
.halo-mobile .m-body{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
}
.halo-mobile .m-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; }

/* ----------------------------- LAPTOP SHELL ------------------------------ */
/* Real laptop: fluid sidebar + content, no prototype bezel. */
.halo-laptop{
  display:flex; height:100dvh; min-height:100dvh;
  background:var(--bg); color:var(--text);
}
.halo-laptop .l-sidebar{
  width:262px; flex:none; background:var(--card);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:18px 14px;
}
.halo-laptop .l-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.halo-laptop .l-content{ flex:1; min-height:0; overflow-y:auto; }
.halo-laptop .l-narrow{ width:min(920px,100%); margin:0 auto; }

/* full-height split for desktop auth / live ride */
.halo-laptop .l-fill{ flex:1; min-height:0; display:flex; }

/* ---------------------------- REAL MAP IFRAME ---------------------------- */
.ride-map{ width:100%; height:150px; border:0; border-radius:12px; background:var(--map); display:block; }
.ride-map-wrap{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.empty-map{
  display:grid; place-items:center; height:126px; color:var(--text3);
  font-size:12.5px; background:var(--map); border:1px solid var(--border); border-radius:12px;
  text-align:center; padding:0 16px;
}
.car-marker{
  position:absolute; top:10px; left:10px; display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%; background:var(--card);
  box-shadow:var(--shadow); font-size:18px; border:1px solid var(--border);
}
.ride-nav{ position:fixed; inset:0; width:100vw; height:100dvh; max-height:100dvh; overflow:hidden; overscroll-behavior:none; background:var(--map); }
.ride-nav-map-art{
  position:absolute; inset:0; overflow:hidden; background:var(--map);
  background-image:linear-gradient(var(--map-line) 1px,transparent 1px),linear-gradient(90deg,var(--map-line) 1px,transparent 1px);
  background-size:64px 64px;
}
.ride-nav-google-map{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.ride-nav-actions{
  position:absolute; right:16px; bottom:260px; z-index:3;
  display:flex; gap:9px;
}
.ride-nav-action{
  width:46px; height:46px; border:1px solid rgba(255,255,255,.74); border-radius:14px;
  background:rgba(255,255,255,.92); color:#14161A; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:18px; font-weight:800; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
[data-theme="dark"] .ride-nav-action{ background:rgba(20,21,25,.92); color:var(--text); border-color:rgba(255,255,255,.14); }
.ride-nav-road{ position:absolute; background:rgba(255,255,255,.46); }
.ride-nav-road.vertical{ top:0; bottom:0; width:12px; }
.ride-nav-road.vertical.one{ left:34%; }
.ride-nav-road.vertical.two{ left:72%; }
.ride-nav-road.horizontal{ left:0; right:0; height:12px; }
.ride-nav-road.horizontal.one{ top:31%; }
.ride-nav-road.horizontal.two{ top:59%; }
.ride-nav-route{ position:absolute; inset:0; width:100%; height:100%; }
.ride-nav-car-dot{
  position:absolute; transform:translate(-50%,-50%); display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%; background:var(--accent); color:#fff;
  border:3px solid var(--card); box-shadow:var(--shadow-lg);
}
.ride-nav-card{
  position:absolute; left:16px; right:16px; top:calc(18px + env(safe-area-inset-top)); z-index:2;
  display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.9); color:#14161A;
  border:1px solid rgba(255,255,255,.7); border-radius:18px; box-shadow:var(--shadow-lg);
  padding:12px 14px; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
[data-theme="dark"] .ride-nav-card{ background:rgba(20,21,25,.9); color:var(--text); border-color:rgba(255,255,255,.12); }
.ride-nav-back{
  width:42px; height:42px; flex:none; border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ride-nav-sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:2; max-height:48dvh; overflow:auto;
  background:var(--card); border-top-left-radius:24px; border-top-right-radius:24px;
  box-shadow:0 -12px 40px rgba(18,22,31,.18); padding:15px 20px calc(16px + env(safe-area-inset-bottom));
}
.ride-nav-handle{ width:42px; height:5px; border-radius:99px; background:var(--border2); margin:0 auto 14px; }
.ride-nav-stops{ display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
.ride-nav-stop{ display:grid; grid-template-columns:22px 1fr; gap:12px; min-height:38px; }
.ride-nav-stop-rail{ display:flex; flex-direction:column; align-items:center; }
.ride-nav-stop-dot{
  width:14px; height:14px; border-radius:50%; border:3px solid var(--border2); background:var(--card);
  display:grid; place-items:center; color:#fff; font-size:9px; font-weight:800; line-height:1; margin-top:3px;
}
.ride-nav-stop-dot.current{ border-color:var(--accent); }
.ride-nav-stop-dot.done{ border-color:var(--success); background:var(--success); }
.ride-nav-stop-line{ width:2px; flex:1; min-height:22px; background:var(--border2); margin:3px 0; }
.ride-nav-primary{
  width:100%; border:none; background:var(--accent); color:#fff; border-radius:15px; padding:15px;
  font-size:16px; font-weight:800; cursor:pointer; box-shadow:var(--shadow-sm); margin-bottom:10px;
}
.ride-nav-primary.complete{ background:var(--success); }
.ride-nav-primary span{ display:block; margin-top:4px; font-size:12px; line-height:1.25; font-weight:700; opacity:.82; }
.ride-nav-primary.disabled{ background:var(--surface); color:var(--text3); box-shadow:none; cursor:default; }
.ride-nav-secondary{
  width:100%; border:1px solid var(--border); background:var(--card); color:var(--text2); border-radius:15px;
  padding:14px; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
}
.ride-nav-modal{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  background:rgba(20,22,26,.48); padding:24px;
}
.ride-nav-dialog{
  width:min(360px,100%); background:var(--card); border-radius:20px; box-shadow:var(--shadow-lg); padding:22px;
}

/* --------------------------- ADDRESS SUGGESTIONS ------------------------- */
.suggestions{
  position:absolute; left:0; right:0; top:100%; margin-top:5px; z-index:30;
  background:var(--card); border:1px solid var(--border); border-radius:11px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.suggestions[hidden]{ display:none; }
.suggestions button{
  width:100%; text-align:left; border:none; background:transparent; cursor:pointer;
  padding:11px 13px; font-size:14px; color:var(--text); border-bottom:1px solid var(--border);
}
.suggestions button:last-child{ border-bottom:0; }
.suggestions button:hover{ background:var(--surface); }

/* mention menu (chat composer) */
.composer{ position:relative; }
.mention-menu{
  position:absolute; left:12px; right:12px; bottom:calc(100% + 8px); z-index:40;
  margin:0; max-height:min(280px,42dvh); overflow-y:auto;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:5px 0;
}
.mention-menu[hidden]{ display:none; }
.mention-menu button{
  width:100%; min-height:48px; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:none; background:transparent; cursor:pointer; text-align:left;
  font-size:14px; font-weight:500; color:var(--text);
}
.mention-menu button:hover{ background:var(--surface); }
.mention-menu button[hidden]{ display:none; }
.mention-highlight{ font-weight:700; text-decoration:underline; color:var(--accent); }
.message-bubble.mine .mention-highlight{ color:#fff; text-decoration-color:rgba(255,255,255,.85); }

/* contenteditable composer behaves like the design's rounded input */
.message-editor{
  flex:1; min-height:24px; max-height:120px; overflow-y:auto;
  font-size:16px; line-height:1.4; padding:11px 15px; border-radius:22px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  outline:none; white-space:pre-wrap; word-break:break-word;
}
.message-editor:empty::before{ content:attr(data-placeholder); color:var(--text3); }
.message-editor:focus{ box-shadow:0 0 0 3px var(--accent-soft); }
.contact-picker{
  display:flex; align-items:flex-start; gap:10px; min-height:46px; width:100%;
  border:1px solid var(--border); border-radius:12px; background:var(--card);
  padding:8px 10px;
}
.contact-picker-label{
  flex:none; padding-top:6px; color:var(--text2); font-size:14px; font-weight:600;
}
.chip-input{
  flex:1; min-width:0; display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}
.chip-input input{
  flex:1; min-width:130px; border:0; padding:6px 2px; background:transparent;
  outline:none; color:var(--text); font-size:15px;
}
.chip{
  border:1px solid var(--border2); background:var(--surface); color:var(--text);
  border-radius:999px; padding:5px 9px; font-size:13px; cursor:pointer;
}
.contact-picker-page{
  flex:1; min-height:0; display:flex; flex-direction:column; background:var(--bg);
}
.contact-picker-header{
  flex:none; min-height:56px; display:flex; align-items:center; gap:10px;
  padding:calc(6px + env(safe-area-inset-top)) 12px 10px;
  border-bottom:1px solid var(--border); background:var(--bg);
}
.contact-picker-back{
  width:40px; height:40px; flex:none; border:none; border-radius:10px;
  background:transparent; color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.contact-picker-title{
  flex:1; min-width:0; font-size:17px; font-weight:700; letter-spacing:-.01em;
}
.contact-picker-done{
  flex:none; border:none; border-radius:11px; background:var(--accent); color:#fff;
  min-height:36px; padding:0 15px; font-size:14px; font-weight:700; cursor:pointer;
}
.contact-picker-done:disabled{ opacity:.55; cursor:default; }
.contact-picker-scroll{
  flex:1; min-height:0; overflow-y:auto; padding:14px 14px calc(22px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
}
.contact-picker-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm);
  padding:12px;
}
.contact-picker-field-label{
  display:block; color:var(--text2); font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:7px;
}
.contact-picker-text-input{
  width:100%; border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:11px; min-height:44px; padding:0 12px; font-size:16px; outline:none;
}
.contact-picker-text-input:focus{ box-shadow:0 0 0 3px var(--accent-soft); }
.contact-picker-toggle{
  margin-top:11px; display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--text2);
  cursor:pointer;
}
.contact-picker-toggle input{ width:18px; height:18px; accent-color:var(--accent); }
.contact-picker-note{
  margin:8px 2px 0; color:var(--text3); font-size:13px; line-height:1.35;
}
.contact-picker-section-title{
  color:var(--text2); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:8px;
}
.contact-picker-empty{
  color:var(--text3); font-size:13.5px; line-height:1.45; padding:2px 0;
}
.contact-picker-selected-list{ display:flex; flex-direction:column; gap:2px; }
.contact-picker-person{
  width:100%; border:none; border-radius:12px; background:transparent; color:var(--text);
  display:flex; align-items:center; gap:11px; text-align:left; padding:9px 7px; cursor:pointer;
}
.contact-picker-person:hover{ background:var(--surface); }
.contact-picker-avatar{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
}
.contact-picker-avatar-img{
  flex:none; width:38px; height:38px; border-radius:50%; object-fit:cover;
}
.contact-picker-person-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.contact-picker-person-name{
  font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.contact-picker-person-sub{ font-size:12.5px; color:var(--text3); }
.contact-picker-check{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
}
.contact-picker-empty-check{
  flex:none; width:22px; height:22px; border:1.5px solid var(--border2); border-radius:50%;
}
.members-add-row{
  width:100%; border:1px solid var(--border); background:var(--card); color:var(--text);
  border-radius:13px; padding:13px; display:flex; align-items:center; gap:12px; cursor:pointer;
  box-shadow:var(--shadow-sm); text-align:left;
}
.members-add-icon{
  width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.members-add-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.members-add-main strong{ font-size:15px; font-weight:700; }
.members-add-main span{ font-size:13px; color:var(--text2); }
.ai-typing-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); animation:typing 1s infinite; }
.ai-typing-dot:nth-child(2){ animation-delay:.15s; }
.ai-typing-dot:nth-child(3){ animation-delay:.3s; }

/* address-field wrapper keeps suggestions positioned */
.address-field{ position:relative; }

/* --------------------------------- TOAST --------------------------------- */
.toast{
  position:fixed; z-index:120; left:50%; bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translateX(-50%); background:var(--text); color:var(--bg);
  padding:11px 16px; border-radius:12px; font-size:13.5px; font-weight:500;
  box-shadow:var(--shadow-lg); max-width:88vw; text-align:center; animation:toastIn .18s ease;
}
.halo-laptop ~ .toast, body:has(.halo-laptop) .toast{ bottom:28px; }
.toast.danger{
  display:flex; align-items:center; gap:9px;
  background:var(--danger); color:#fff;
}
.toast.success{
  background:var(--success); color:#fff;
}
.toast-icon{
  width:18px; height:18px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.22); font-weight:700; font-size:12px;
}

/* small helpers used by rendered markup */
.error-banner{
  margin:10px 16px 0; background:var(--danger-soft); color:var(--danger);
  border-radius:11px; padding:10px 13px; font-size:13px; font-weight:500;
}
.sr-file{ font-size:13px; color:var(--text2); }

/* chat list rows + prototype-style pin context menu */
.chat-row-wrap{
  position:relative; display:flex; align-items:center; min-width:0;
  border-radius:15px; margin:1px 0;
}
.chat-row-wrap:hover{ background:var(--surface); }
.chat-row-wrap .chat-open{ width:100%; }
.ctx-backdrop{
  position:fixed; inset:0; z-index:190;
}
.ctx-menu{
  position:fixed; z-index:191; width:206px; background:var(--card);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
  overflow:hidden; transform-origin:top left; animation:ctxIn .14s ease;
}
.ctx-title{
  padding:11px 14px 10px; border-bottom:1px solid var(--border);
  font-size:13px; font-weight:700; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ctx-action,.ctx-static{
  width:100%; display:flex; align-items:center; gap:11px;
  padding:13px 14px; border:0; background:transparent;
  text-align:left; font-size:14.5px; font-weight:500;
}
.ctx-action{ color:var(--text); cursor:pointer; }
.ctx-action:hover{ background:var(--surface); }
.ctx-static{ color:var(--text3); }

/* legal pages */
.doc-page{
  width:min(760px,100%); margin:0 auto; padding:48px 20px 72px;
  color:var(--text); line-height:1.65;
}
.doc-page h1{
  font-size:34px; line-height:1.1; letter-spacing:-.03em; margin:0 0 22px;
}
.doc-page h2{
  font-size:21px; line-height:1.2; letter-spacing:-.02em; margin:34px 0 12px;
}
.doc-page p{ margin:0 0 14px; color:var(--text2); }
.doc-page strong{ color:var(--text); }

/* --------------------------------------------------------------------------
   HALORIDES PRODUCT POLISH
   Calm hierarchy, platform-native controls, and responsive information density.
   -------------------------------------------------------------------------- */

html{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

[data-halo]{
  --canvas:#F3F4F6; --bg:#FAFAFB; --surface:#F0F1F3; --card:#FFFFFF; --card2:#F7F7F8;
  --text:#17181B; --text2:#666D79; --text3:#9299A4;
  --border:#E4E6EA; --border2:#D8DBE1;
  --accent:#1672F3; --accent-strong:#1668DB; --accent-soft:#EAF2FF;
  --success:#248F62; --success-soft:#E8F5EF; --warning:#A76B00; --warning-soft:#FFF3D8;
  --danger:#D63F3A; --danger-soft:#FDECEB;
  --shadow-sm:0 1px 2px rgba(20,24,31,.04);
  --shadow:0 1px 2px rgba(20,24,31,.04),0 8px 26px rgba(20,24,31,.045);
  --shadow-lg:0 18px 55px rgba(20,24,31,.16);
}

[data-halo][data-theme="dark"]{
  --canvas:#070708; --bg:#0D0E10; --surface:#18191D; --card:#141519; --card2:#1B1C20;
  --text:#F2F3F5; --text2:#A1A6B0; --text3:#707680;
  --border:#27292E; --border2:#363940;
  --accent:#5B9BFF; --accent-strong:#2F72E8; --accent-soft:#172641;
  --success:#43B884; --success-soft:#122A20; --warning:#E0A83E; --warning-soft:#2B2415;
  --danger:#F26964; --danger-soft:#301818;
}

button,input,textarea,select{ -webkit-tap-highlight-color:transparent; }
button{ touch-action:manipulation; }
.page-view{ min-height:100%; background:var(--bg); }
.section-header,.chats-header,.friends-header,.chat-search-header,.chat-header{
  background:rgba(250,250,251,.9) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
[data-theme="dark"] .section-header,
[data-theme="dark"] .chats-header,
[data-theme="dark"] .friends-header,
[data-theme="dark"] .chat-search-header,
[data-theme="dark"] .chat-header{ background:rgba(13,14,16,.9) !important; }
.section-header{ padding:18px 20px 13px !important; }
.section-title{ font-size:28px !important; line-height:1.08; letter-spacing:-.025em !important; }
.section-subtitle{ margin-top:4px !important; }

/* Authentication */
.auth-screen{
  width:100%; min-height:100dvh; height:100dvh; display:flex; flex-direction:column;
  overflow:hidden; background:var(--bg); color:var(--text);
}
.auth-split-screen{
  width:100%; min-height:100dvh; height:100dvh; display:grid;
  grid-template-columns:minmax(430px,44%) minmax(0,1fr); overflow:hidden;
  background:var(--bg); color:var(--text);
}
.auth-story{
  min-width:0; display:flex; align-items:center; padding:64px clamp(50px,6vw,88px);
  background:var(--accent-soft); border-right:1px solid var(--border);
}
.auth-story-copy{ max-width:500px; }
.auth-story h2{
  max-width:470px; font-size:clamp(38px,3.5vw,54px); line-height:1.08;
  letter-spacing:-.04em;
}
.auth-story p{
  max-width:470px; margin-top:22px; color:var(--text2); font-size:17px; line-height:1.55;
}
.auth-split-main{
  min-width:0; overflow-y:auto; display:flex; align-items:center; justify-content:center;
  padding:48px clamp(40px,7vw,100px);
}
.auth-split-main .auth-panel{ width:min(460px,100%); }
.auth-brand{
  flex:none; min-height:64px; display:flex; align-items:center; gap:10px;
  padding:0 28px; border-bottom:1px solid var(--border);
  font-size:16px; font-weight:700; letter-spacing:-.015em;
}
.auth-brand-mark{
  width:27px; height:27px; border:2.5px solid var(--accent); border-radius:50%;
  display:grid; place-items:center; color:var(--accent);
}
.auth-brand-mark span{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.auth-main{
  flex:1; min-height:0; overflow-y:auto; display:flex; justify-content:center; align-items:center;
  padding:44px 28px 56px;
}
.auth-signup-screen .auth-main{ align-items:flex-start; }
.auth-panel{ width:min(420px,100%); }
.auth-signup-screen .auth-panel{ width:min(760px,100%); }
.auth-intro{ margin-bottom:24px; }
.auth-intro h1{ font-size:30px; line-height:1.08; letter-spacing:-.03em; }
.auth-intro p{ margin-top:7px; color:var(--text2); font-size:15px; line-height:1.45; }
.auth-form{ width:100%; }
.auth-form-signup{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 16px !important; }
.auth-field{ min-width:0; }
.auth-field-wide,.auth-form .error-banner,.auth-primary,.auth-switch{ grid-column:1 / -1; }
.auth-field > label,.auth-field.address-field > span{ font-size:12.5px !important; margin-bottom:7px !important; }
.auth-form input:not([type="checkbox"]){ min-height:48px; border-radius:12px !important; background:var(--card) !important; }
.auth-form input:not([type="checkbox"]):hover{ border-color:var(--border2) !important; }
.auth-form input:not([type="checkbox"]):focus{ border-color:var(--accent) !important; }
.auth-form [data-show-password]{ width:40px !important; height:40px !important; right:4px !important; border-radius:10px !important; }
.auth-form [data-send-code]{ min-height:48px; border-radius:12px !important; }
.auth-emergency-grid > div{ min-width:0; }
.auth-consent{
  margin-top:2px; padding:12px 13px !important; border:1px solid var(--border);
  border-radius:12px; background:var(--card);
}
.auth-primary{ min-height:50px; border-radius:13px !important; margin-top:3px !important; font-weight:700 !important; }
.auth-switch{ margin-top:2px !important; }

/* Shells */
.mobile-tabbar{
  position:relative; z-index:50;
  padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
  background:rgba(250,250,251,.92) !important;
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 -1px 0 rgba(20,24,31,.04);
}
[data-theme="dark"] .mobile-tabbar{ background:rgba(13,14,16,.92) !important; }
.mobile-tab-item{ min-height:50px !important; gap:3px !important; border-radius:12px !important; }
.mobile-tab-item svg{ width:23px; height:23px; stroke-width:1.9; }
.mobile-tab-item span{ font-size:10.5px !important; font-weight:600 !important; }
.mobile-tab-item[data-active="true"]{ color:var(--accent); }

.halo-laptop .l-sidebar{
  width:238px; padding:18px 13px 14px;
  background:var(--card); border-right-color:var(--border);
  transition:width .18s ease,padding .18s ease;
}
.brand-lockup{ padding:7px 9px 24px !important; min-width:0; }
.brand-name,.desktop-nav-label,.desktop-account-copy{ transition:opacity .12s ease; }
.sidebar-toggle{
  width:34px; height:34px; margin-left:auto; flex:none; display:grid; place-items:center;
  border:0; border-radius:9px; background:transparent; color:var(--text2); cursor:pointer;
}
.sidebar-toggle:hover{ background:var(--surface); color:var(--text); }
.desktop-nav-item{ min-height:43px; border-radius:10px !important; font-size:14px !important; font-weight:590 !important; }
.desktop-nav-item[data-active="true"]{ background:var(--accent-soft) !important; color:var(--accent) !important; }
.desktop-account{ border-radius:11px !important; box-shadow:none; }
.halo-laptop .l-sidebar[data-collapsed="true"]{ width:72px; padding-left:10px; padding-right:10px; }
.l-sidebar[data-collapsed="true"] .brand-lockup{ justify-content:center; padding-left:0 !important; padding-right:0 !important; }
.l-sidebar[data-collapsed="true"] .brand-mark,
.l-sidebar[data-collapsed="true"] .brand-name,
.l-sidebar[data-collapsed="true"] .desktop-nav-label,
.l-sidebar[data-collapsed="true"] .desktop-account-copy,
.l-sidebar[data-collapsed="true"] .desktop-account-chevron{ display:none !important; }
.l-sidebar[data-collapsed="true"] .sidebar-toggle{ margin-left:0; }
.l-sidebar[data-collapsed="true"] .desktop-nav-item{ position:relative; justify-content:center; gap:0 !important; padding-left:0 !important; padding-right:0 !important; }
.l-sidebar[data-collapsed="true"] .desktop-nav-dot{ position:absolute; top:7px; right:7px; border:2px solid var(--card); }
.l-sidebar[data-collapsed="true"] .desktop-account{ align-self:center; width:48px; justify-content:center; gap:0 !important; padding:4px !important; }
.halo-laptop .l-main{ background:var(--canvas); }
.halo-laptop .l-content{ background:var(--canvas); }
.halo-laptop .l-narrow{ width:100%; height:100%; max-width:none; min-height:100%; margin:0; padding:0; }
.halo-laptop .page-view{ min-height:100%; border:0; }

/* Chats */
.desktop-chat-workspace{
  width:100%; height:100%; min-height:100%; min-width:0;
  display:grid; grid-template-columns:clamp(290px,28vw,380px) minmax(0,1fr);
  overflow:hidden; background:var(--bg);
}
.desktop-chat-directory{
  min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--card); border-right:1px solid var(--border);
}
.desktop-chat-directory-head{
  min-height:76px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:17px 16px 10px;
}
.desktop-chat-directory-title{ font-size:25px; font-weight:720; letter-spacing:-.025em; }
.desktop-chat-directory-subtitle{
  margin-top:2px; color:var(--text2); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.desktop-chat-directory-head [data-new-community]{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  border:0; border-radius:11px; background:var(--accent); color:#fff; cursor:pointer;
}
.desktop-chat-search{
  height:40px; margin:0 14px 10px; padding:0 11px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text3);
}
.desktop-chat-search svg{ width:18px; height:18px; flex:none; }
.desktop-chat-search input{
  width:100%; min-width:0; height:100%; padding:0; border:0; outline:0;
  background:transparent; color:var(--text); font:inherit; font-size:14px;
}
.desktop-chat-list{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding:0 8px 20px !important;
}
.desktop-chat-list .chat-row-wrap{ width:100%; max-width:none; }
.desktop-chat-list .chat-row-wrap[data-active-chat="true"]{ background:var(--accent-soft); }
.desktop-chat-list .chat-row-wrap[data-pin-type="support"]{ margin:0 0 4px; }
.desktop-chat-list-empty{ padding:36px 14px; text-align:center; color:var(--text3); font-size:13px; }
.desktop-chat-detail{ min-width:0; min-height:0; display:flex; background:var(--bg); }
.desktop-chat-detail > .contact-picker-page,
.desktop-chat-detail > div{ width:100%; min-width:0; }
.desktop-chat-detail .contact-picker-scroll{ padding:20px 24px 32px; }
.desktop-chat-detail .contact-picker-card{ width:100%; max-width:720px; margin-left:auto; margin-right:auto; }
.desktop-chat-detail .members-page{ padding:22px 24px 32px !important; }
.desktop-chat-detail .members-page > *{ width:100%; max-width:820px; margin-left:auto; margin-right:auto; }
.desktop-chat-empty-pane{
  min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:36px; text-align:center; background:var(--canvas); color:var(--text2);
}
.desktop-chat-empty-mark{
  width:52px; height:52px; display:grid; place-items:center; border-radius:16px;
  background:var(--accent-soft); color:var(--accent); margin-bottom:16px;
}
.desktop-chat-empty-mark svg{ width:27px; height:27px; }
.desktop-chat-empty-pane h2{ margin:0; color:var(--text); font-size:20px; letter-spacing:-.02em; }
.desktop-chat-empty-pane p{ margin:7px 0 0; max-width:330px; font-size:13.5px; line-height:1.45; }
.desktop-chat-welcome{ width:min(460px,100%); display:flex; flex-direction:column; align-items:center; }
.desktop-chat-summary{
  margin-top:19px; display:flex; align-items:center; justify-content:center; gap:0;
  color:var(--text2); font-size:13px;
}
.desktop-chat-summary span{ padding:0 15px; }
.desktop-chat-summary span + span{ border-left:1px solid var(--border2); }
.desktop-chat-summary strong{ color:var(--text); font-size:15px; }
.desktop-chat-empty-actions{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:9px; }
.desktop-chat-empty-actions button{
  min-height:42px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:0 15px; border:1px solid var(--border); border-radius:11px;
  background:var(--card); color:var(--text); font-size:13.5px; font-weight:650; cursor:pointer;
}
.desktop-chat-empty-actions button.primary{ border-color:var(--accent); background:var(--accent); color:#fff; }
.desktop-chat-empty-actions button svg{ width:18px; height:18px; }
.desktop-chat-welcome small{ margin-top:15px; color:var(--text3); font-size:12px; }
.chats-header{ padding:18px 20px 0 !important; }
.chats-header > div{ align-items:center !important; padding-bottom:13px !important; }
.chats-header [data-search-chats],.chats-header [data-new-community]{
  width:40px !important; height:40px !important; border-radius:12px !important; box-shadow:none !important;
}
.chat-search-header{ min-height:64px; padding:11px 16px !important; }
.chat-list{ padding:6px 14px 28px !important; }
.chat-row-wrap{
  min-height:68px; margin:0; border-radius:11px;
  border-bottom:1px solid var(--border);
}
.chat-row-wrap:last-child{ border-bottom:0; }
.chat-row-wrap[data-pin-type="support"]{
  margin:6px 0; border:1px solid var(--border); background:var(--accent-soft);
}
.chat-row-button{ min-height:67px; padding:9px 10px !important; border-radius:11px !important; }
.chat-row-button > :first-child{ width:46px !important; height:46px !important; }
.chat-row-button:hover{ background:var(--surface) !important; }
.chat-row-button:active{ transform:scale(.995); }
.chat-header{ min-height:60px; padding:calc(7px + env(safe-area-inset-top)) 14px 9px !important; }
.chat-back{ width:42px !important; height:42px !important; border-radius:50% !important; }
.chat-title{ font-size:16px !important; line-height:1.2; }
.chat-subtitle{ margin-top:2px; }
.chat-page .messages{ background:var(--canvas); padding:14px 14px 10px !important; }
.message-list{ width:100%; }
.message-row{ animation:fadeIn .18s ease both; }
.message-bubble{ box-shadow:none !important; }
.message-bubble.mine{ background:var(--accent-strong) !important; }
.message-bubble.them{ background:var(--card) !important; }
.message-bubble.ai{ border:1px solid rgba(22,114,243,.1); }
.system-message span{ padding:5px 10px !important; font-size:11.5px !important; }
.composer{
  padding:9px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  background:rgba(250,250,251,.94) !important;
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
[data-theme="dark"] .composer{ background:rgba(13,14,16,.94) !important; }
.message-editor{ min-height:44px; padding:10px 15px; border-radius:22px; }
.mention-menu{ left:0; right:0; bottom:calc(100% + 7px); border-radius:15px; padding:5px; }
.mention-menu button{ border-radius:10px; }

/* Friends */
.friends-header{ padding:18px 20px 12px !important; }
.friends-header > div:first-child{ margin-bottom:11px !important; font-size:28px !important; }
.friend-filters{
  display:inline-flex !important; width:max-content; max-width:100%; gap:3px !important;
  padding:3px; border-radius:11px; background:var(--surface); flex-wrap:nowrap !important;
  overflow-x:auto;
}
.friend-filters button{
  border:0 !important; border-radius:8px !important; padding:7px 12px !important;
  background:transparent !important; color:var(--text2) !important;
}
.friend-filters button[data-active="true"]{
  background:var(--card) !important; color:var(--text) !important; box-shadow:var(--shadow-sm);
}
.friends-list{ padding:6px 14px 28px !important; }
.friend-row{ min-height:68px; padding:9px 8px !important; border-bottom:1px solid var(--border); border-radius:0 !important; }
.friend-row:last-child{ border-bottom:0; }
.friend-row > :first-child{ width:44px !important; height:44px !important; }
.friend-row [data-open-friend]{ width:40px !important; height:40px !important; border-radius:50% !important; }

/* Rides */
.rides-content{ gap:22px !important; }
.rides-sidebar,.rides-list{ min-width:0; }
.rides-sidebar{ display:flex; flex-direction:column; gap:12px; }
.rides-list{ display:flex; flex-direction:column; gap:30px; }
.rides-loading-state{
  min-height:calc(100dvh - 90px); display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--text2); font-size:14px;
}
.loading-spinner{
  width:17px; height:17px; border:2px solid var(--border2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite;
}
.ride-list-section{ min-width:0; }
.ride-list-heading{ margin:0 2px 11px; }
.ride-list-heading h2{ font-size:16px; line-height:1.2; letter-spacing:-.015em; }
.ride-list-heading p{ margin-top:3px; font-size:12.5px; line-height:1.35; color:var(--text2); }
.ride-list-items{ display:flex; flex-direction:column; gap:14px; }
.rides-empty-state{
  min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:28px; border:1px dashed var(--border2); border-radius:18px; color:var(--text2);
}
.rides-empty-state strong{ color:var(--text); font-size:16px; }
.rides-empty-state span{ max-width:330px; margin-top:5px; font-size:13px; line-height:1.4; }
.credits-summary,.ride-card,.completed-ride-card{ box-shadow:var(--shadow-sm) !important; }
.credits-summary{ border-radius:18px !important; padding:18px !important; }
.ride-activity-summary{
  padding:16px 17px; border:1px solid var(--border); border-radius:16px;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.ride-activity-summary h2{ margin:0 0 8px; font-size:14px; letter-spacing:-.01em; }
.ride-activity-summary > div{
  min-height:36px; display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border); color:var(--text2); font-size:12.5px;
}
.ride-activity-summary > div strong{ color:var(--text); font-size:14px; }
.credits-top-up{ min-height:40px; border-radius:11px !important; }
.credits-impact{ line-height:1.35; }
.ride-card{ border-radius:20px !important; box-shadow:var(--shadow) !important; }
.ride-card[data-terminal="true"]{ box-shadow:none !important; background:var(--card2) !important; }
.ride-card-overview{ padding:17px 18px 14px !important; }
.ride-card-head{ margin-bottom:15px !important; gap:12px; }
.ride-card-head-actions{ min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.ride-status-pill{ min-height:26px; }
.ride-date-label{ font-size:14px !important; }
.ride-cancel-action{
  min-height:36px; padding:0 11px; flex:none; border-color:transparent !important;
  background:transparent !important; font-size:12.5px; font-weight:650 !important;
}
.ride-cancel-action:hover{ background:var(--danger-soft) !important; }
.ride-summary-grid{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  padding-top:13px; border-top:1px solid var(--border);
}
.ride-summary-item{ min-width:0; }
.ride-summary-item span{ font-size:10.5px !important; }
.ride-summary-item strong{
  font-size:15px !important; line-height:1.25; white-space:normal !important;
  overflow:visible !important; text-overflow:clip !important;
}
.ride-card-stops{ padding:7px 18px 15px !important; }
.ride-stop-row{ gap:11px !important; }
.ride-stop-line{ align-items:flex-start !important; }
.ride-stop-address{ font-size:14.5px !important; line-height:1.3 !important; }
.ride-stop-time{ padding-top:1px; }
.ride-stop-who{ margin-top:3px !important; }
.ride-card-map{ padding:0 18px 16px !important; }
.ride-card-map > div{ border-radius:14px !important; }
.ride-card [data-inline-map]{ min-height:148px; }
.ride-card-actions{ padding:0 18px 18px !important; gap:8px !important; }
.ride-primary-action{ min-height:50px; border-radius:13px !important; font-weight:700 !important; }
.ride-action-helper{ padding:1px 8px 0; }
.ride-card[data-terminal="true"] .ride-card-overview{ padding-bottom:11px !important; }
.ride-card[data-terminal="true"] .ride-card-stops{ padding-bottom:17px !important; }
.completed-rides-grid{ display:grid; grid-template-columns:1fr; gap:10px; }
.completed-ride-card{ border-radius:15px !important; opacity:1 !important; padding:15px 16px !important; }
.completed-check{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  color:var(--success); background:var(--success-soft);
}
.completed-ride-route{ margin-top:2px; }
.completed-ride-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:5px 0; }
.completed-ride-meta span{ display:inline-flex; align-items:center; }
.completed-ride-meta span + span::before{ content:""; width:3px; height:3px; margin:0 7px; border-radius:50%; background:var(--text3); }

/* Requests */
.requests-content{ gap:20px !important; }
.request-section-title{ margin-bottom:8px !important; }
.incoming-request-card{ border-radius:14px !important; box-shadow:var(--shadow-sm) !important; }
.incoming-request-card button{ min-height:42px; border-radius:11px !important; }
.desktop-requests-content{
  min-height:calc(100% - 78px); display:grid; grid-template-columns:230px minmax(0,1fr);
  padding:0 28px 38px;
}
.request-filter-nav{ padding:20px 18px 20px 0; border-right:1px solid var(--border); }
.request-filter-nav button{
  width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between;
  padding:0 12px; border:0; border-radius:10px; background:transparent; color:var(--text2);
  font-size:13.5px; font-weight:620; cursor:pointer;
}
.request-filter-nav button[data-active="true"]{ background:var(--accent-soft); color:var(--accent); }
.request-filter-nav strong{
  min-width:25px; padding:2px 7px; border-radius:20px; background:var(--surface);
  color:var(--text2); font-size:11.5px; text-align:center;
}
.request-filter-nav button[data-active="true"] strong{ background:var(--card); color:var(--accent); }
.request-feed{ min-width:0; padding:22px 0 36px 26px; }
.request-feed > header{ padding-bottom:14px; border-bottom:1px solid var(--border); }
.request-feed h2{ margin:0; font-size:19px; letter-spacing:-.02em; }
.request-feed header p{ margin:4px 0 0; color:var(--text2); font-size:12.5px; }
.request-feed-list{ max-width:820px; margin-top:16px; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--card); }
.request-feed-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:960px; border:0; border-radius:0; background:transparent; }
.request-feed-cards .incoming-request-card{ min-width:0; }
.request-feed-empty{
  min-height:330px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--text2);
}
.request-feed-empty > svg{ width:31px; height:31px; color:var(--text3); }
.request-feed-empty h3{ margin:13px 0 0; color:var(--text); font-size:16px; }
.request-feed-empty p{ margin:5px 0 0; max-width:320px; font-size:13px; line-height:1.45; }
.request-feed-empty button{
  margin-top:15px; min-height:38px; padding:0 13px; border:1px solid var(--border);
  border-radius:10px; background:var(--card); color:var(--accent); font-weight:650; cursor:pointer;
}

/* Settings */
.settings-content{ gap:18px !important; }
.settings-profile{ border-radius:16px !important; padding:16px !important; box-shadow:var(--shadow-sm) !important; }
.settings-group > div:last-child{ border-radius:14px !important; }
.settings-row{ min-height:67px; padding:12px 14px !important; }
.settings-row:hover{ background:var(--surface) !important; }
.settings-row svg{ color:var(--text3); }
.settings-theme-row{
  min-height:67px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 14px; border-top:1px solid var(--border); color:var(--text); font-size:15px; font-weight:500;
}
.settings-theme-toggle{
  width:48px; height:28px; flex:none; position:relative; padding:2px; border:1px solid var(--border2);
  border-radius:999px; background:var(--surface); cursor:pointer; transition:background .18s ease,border-color .18s ease;
}
.settings-theme-toggle span{
  display:block; width:22px; height:22px; border-radius:50%; background:var(--card);
  box-shadow:0 1px 4px rgba(16,24,40,.22); transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.settings-theme-toggle[data-active="true"]{ border-color:var(--accent); background:var(--accent); }
.settings-theme-toggle[data-active="true"] span{ transform:translateX(20px); }
.settings-actions button{ min-height:48px; border-radius:13px !important; }

/* Contact picker */
.contact-picker-header{ min-height:62px; padding-left:15px; padding-right:15px; }
.contact-picker-done{ min-height:38px; border-radius:10px; }
.contact-picker-card{ border-radius:15px; box-shadow:none; }
.contact-picker-person{ min-height:58px; }

@media (max-width:767px){
  .auth-brand{ min-height:58px; padding:0 20px; }
  .auth-main{ align-items:center; padding:30px 20px 42px; }
  .auth-signup-screen .auth-main{ align-items:flex-start; padding-top:25px; }
  .auth-intro{ margin-bottom:21px; }
  .auth-intro h1{ font-size:27px; }
  .auth-form-signup{ display:flex !important; flex-direction:column; gap:14px !important; }
  .auth-emergency-grid{ flex-direction:column !important; gap:14px !important; }
  .auth-form .sms-check{ align-items:stretch; }
  .auth-form [data-send-code]{ padding:0 12px !important; }
  .section-header{ padding:17px 18px 12px !important; }
  .section-title{ font-size:27px !important; }
  .page-view{ width:100%; }
  .chat-list,.friends-list{ padding-left:10px !important; padding-right:10px !important; }
  .rides-content,.requests-content,.settings-content{ padding:13px 13px 26px !important; }
  .chat-page .message-list{ max-width:100% !important; }
  .message-row .message-bubble{ font-size:15px !important; }
  .rides-list{ gap:26px; }
  .ride-list-heading{ margin-left:3px; }
  .ride-card-overview{ padding:16px 16px 13px !important; }
  .ride-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 14px; }
  .ride-summary-item:nth-child(even){ padding-left:14px; border-left:1px solid var(--border); }
  .ride-summary-item strong{ font-size:15px !important; }
  .ride-card-stops{ padding:7px 16px 14px !important; }
  .ride-stop-line{ flex-direction:column; gap:2px !important; }
  .ride-stop-time{ order:-1; font-size:11.5px !important; }
  .ride-card-map{ padding:0 16px 14px !important; }
  .ride-card [data-inline-map]{ min-height:142px; }
  .ride-card-actions{ padding:0 16px 16px !important; }
  .credits-summary{ padding:16px !important; }
  .completed-ride-card{ padding:14px !important; }
  .settings-actions button{ padding:12px 9px !important; font-size:14px !important; }
}

@media (min-width:768px){
  .section-header{ padding:25px 28px 16px !important; }
  .section-title{ font-size:31px !important; }
  .chats-header,.friends-header{ padding:25px 28px 0 !important; }
  .chats-header > div{ padding-bottom:16px !important; }
  .friends-header{ padding-bottom:15px !important; }
  .chat-list,.friends-list{ padding:10px 22px 34px !important; }
  .desktop-chat-list{ padding:0 8px 20px !important; }
  .halo-laptop .chat-page .messages{ padding:20px 20px 14px !important; }
  .halo-laptop .chat-page .message-list{ max-width:none !important; margin:0 !important; }
  .halo-laptop .composer{
    padding-left:20px !important;
    padding-right:20px !important;
    padding-bottom:16px !important;
  }
  .desktop-chat-detail .composer{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .halo-laptop .message-location-preview{ max-width:520px; }
  .friends-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
  .friend-row{ min-width:0; }
  .rides-content{
    width:100%; max-width:none; margin:0;
    display:grid !important; grid-template-columns:minmax(0,1fr) 312px; align-items:start;
    gap:24px !important; padding:22px 28px 42px !important;
  }
  .rides-list{ grid-column:1; grid-row:1; }
  .rides-sidebar{ grid-column:2; grid-row:1; position:sticky; top:92px; }
  .completed-rides-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .requests-content{
    display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start;
    gap:18px !important; padding:20px 28px 38px !important;
  }
  .settings-content{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;
    gap:20px !important; padding:20px 28px 38px !important;
  }
  .settings-profile,.settings-actions{ grid-column:1 / -1; }
  .settings-profile{ max-width:none; }
  .contact-picker-page{ border-left:1px solid var(--border); border-right:1px solid var(--border); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}