/* Palette v4 "night": the same hexes as the iOS and Android apps (ios/Shared/UI/Theme.swift).
     Light (day) here, dark (night) under [data-theme=dark]; JS resolves «Как в системе» to one of them.
     Text on brand / the gradient is always dark ink; --ink chips are dark in both themes.
     --gold* keep their names: the accent, green. The driver panel stays light (#driver below). */
  :root, #driver {
    --bg:#FFFFFF; --surface:#F3F6F4; --surface-alt:#E7ECE9; --line:#E3E8E5;
    --text:#0F1512; --dim:#5A6660; --faint:#646F69; /* 4.5:1 on --bg and --surface: captions are read, not decoration */
    --night:#0E1A14; --brand:#2BD46C; --brand-from:#D6F03A; --brand-to:#2BD46C; --on-brand:#0F1512; --gold:var(--brand); --gold-deep:#0A7A45; --gold-soft:#E5F8EC; --amber:#F5A524;
    --good:#0A7A45; --bad:#C0392B; --warn:#D98324; --sky:#2563A8; --ink:#0F1512; --on-ink:#FFFFFF; --map-bg:#E9EEE8;
    --brand-grad:linear-gradient(90deg, var(--brand-from), var(--brand-to)); color-scheme:light;
  }
  :root[data-theme=dark] {
    --bg:#121513; --surface:#1D211E; --surface-alt:#2A2F2B; --line:#2B302C;
    --text:#F2F5F3; --dim:#A2ACA6; --faint:#8E9893;
    --brand:#34E07A; --brand-from:#EEF23A; --brand-to:#2EE06E; --on-brand:#0E120F; --gold-deep:#4ADE80; --gold-soft:#13301F; --amber:#F7B54A;
    --good:#4ADE80; --bad:#FF6B5B; --warn:#F2A445; --sky:#60A5FA; --ink:#262A27; --on-ink:#FFFFFF; --map-bg:#161917;
    --brand-grad:linear-gradient(90deg, var(--brand-from), var(--brand-to)); color-scheme:dark;
  }
  :root { --panel-w:400px; --driver-w:380px; --gap:16px; }
  * { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html, body { height:100%; margin:0; }
  body { background:var(--bg); color:var(--text); overflow:hidden;
    font:15px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; }
  button, input, select { font:inherit; color:inherit; }
  button { cursor:pointer; }

  #map { position:fixed; inset:0; background:var(--map-bg); }
  .maplibregl-ctrl-attrib { font-size:10px; }
  /* The attribution rides just above the card, not under its buttons (small phones). */
  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom:var(--map-pad-bottom, 0px); }

  /* ---- the pick pin: fixed, the map moves under it ---- */
  #pin { position:fixed; z-index:5; pointer-events:none; display:none; width:0; height:0; }
  #pin .stack { position:absolute; left:0; bottom:0; transform:translate(-50%,0); display:flex; flex-direction:column; align-items:center;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); transition:transform .25s cubic-bezier(.3,1.6,.5,1); }
  #pin.up .stack { transform:translate(-50%,-14px); }
  /* the badge over it (spec «Место подачи»): an --ink card, the wait in a gradient square; then a white dot and a stem */
  .pbadge { display:flex; align-items:center; gap:2px; background:var(--ink); color:var(--on-ink); border:0; border-radius:14px; padding:6px; text-align:left; white-space:nowrap; font:inherit; }
  .pbadge .sq { width:40px; height:40px; border-radius:10px; background:var(--brand-grad); color:var(--on-brand); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; flex:0 0 auto; }
  .pbadge .sq b { font-size:17px; font-weight:900; } .pbadge .sq small { font-size:10px; font-weight:600; margin-top:1px; }
  .pbadge .tx { padding:2px 8px; } .pbadge .tx b { display:block; font-size:15px; font-weight:700; } .pbadge .tx small { display:block; font-size:12px; opacity:.7; }
  .pdot { width:22px; height:22px; border-radius:50%; background:#fff; margin-top:4px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .pdot::after { content:''; width:10px; height:10px; border-radius:50%; background:var(--tint, var(--brand)); }
  .pstem { width:2.5px; height:14px; background:var(--text); }
  .mk-pick { display:flex; flex-direction:column; align-items:center; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
  .mk-pick .pbadge { pointer-events:auto; cursor:pointer; }
  #pin .ground { position:absolute; left:0; top:0; transform:translate(-50%,-50%); width:8px; height:3px; border-radius:50%; background:rgba(0,0,0,.18); transition:all .2s; }
  #pin.up .ground { width:12px; height:5px; background:rgba(0,0,0,.28); }

  /* ---- top bar ---- */
  #top { position:fixed; z-index:20; top:var(--gap); left:var(--gap); right:var(--gap); display:flex; align-items:center; gap:10px; pointer-events:none; }
  #top > * { pointer-events:auto; }
  .brand { display:flex; align-items:center; gap:8px; font-weight:900; font-size:24px; line-height:28px; background:var(--bg); border-radius:999px; padding:8px 14px 8px 12px; box-shadow:0 2px 10px rgba(15,27,45,.12); }
  /* the wordmark: «JET» filled with the brand gradient (plain brand where clip-text is missing) */
  .brand b { font-weight:900; color:var(--brand); }
  @supports ((-webkit-background-clip:text) or (background-clip:text)) { .brand b { background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } }
  .brand small { font-weight:500; font-size:12px; color:var(--faint); }
  #tabs { display:none; }
  #top .spacer { flex:1; pointer-events:none; }
  .pillbtn { background:var(--bg); border:0; border-radius:999px; height:44px; min-width:44px; padding:0 14px; box-shadow:0 2px 10px rgba(15,27,45,.12); font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
  #devMenu { position:fixed; z-index:30; top:64px; right:var(--gap); width:min(420px, calc(100vw - 32px)); max-height:70vh; overflow:auto;
    background:var(--bg); border-radius:20px; box-shadow:0 12px 40px rgba(15,27,45,.25); padding:16px; display:none; }
  #devMenu.open { display:block; }
  #bugSheet, #cancelSheet, #journalSheet { position:fixed; inset:0; z-index:60; background:rgba(15,27,45,.35); display:none; align-items:flex-end; justify-content:center; }
  #bugSheet.open, #cancelSheet.open, #journalSheet.open { display:flex; }
  #bugSheet .card, #cancelSheet .card, #journalSheet .card { background:var(--bg); width:min(440px, 100vw); border-radius:20px 20px 0 0; padding:20px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow:0 -4px 24px rgba(15,27,45,.18); }
  #journalSheet .card { height:min(88vh, 760px); display:flex; flex-direction:column; padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
  #journalBody { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px; margin:8px -16px 8px; padding:8px 16px; background:var(--surface); }
  .msg { max-width:82%; border-radius:16px; padding:8px 10px; font-size:15px; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 1px rgba(0,0,0,.06); }
  .msg.me { align-self:flex-end; background:var(--gold-soft); border-bottom-right-radius:4px; }
  .msg.them { align-self:flex-start; background:var(--bg); border-bottom-left-radius:4px; }
  .msg .who { font-size:12px; font-weight:700; color:var(--gold-deep); margin-bottom:2px; }
  .msg .meta { font-size:11px; color:var(--faint); text-align:right; margin-top:2px; white-space:normal; }
  .msg .meta a { color:var(--gold-deep); margin-left:6px; }
  .msg .media { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:4px; }
  .msg .media img { width:96px; height:120px; object-fit:cover; object-position:top; border-radius:10px; cursor:pointer; }
  .msg .media video { width:200px; max-height:260px; border-radius:10px; background:#000; }
  .sys { align-self:center; font-size:12px; color:var(--dim); background:var(--bg); border-radius:999px; padding:3px 10px; text-align:center; }
  .sys.fixed { color:var(--gold-deep); background:var(--gold-soft); font-weight:700; }
  .day { align-self:center; font-size:12px; color:var(--faint); margin-top:4px; }
  #chatEdit { display:none; font-size:13px; color:var(--dim); padding:4px 2px; }
  #chatAtt { display:flex; gap:8px; flex-wrap:wrap; }
  #chatAtt .ph { position:relative; width:56px; height:56px; margin-top:6px; }
  #chatAtt .ph img, #chatAtt .ph video { width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer; }
  #chatAtt .ph button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:var(--ink); color:var(--on-ink); font-size:13px; line-height:22px; padding:0; }
  .composer { display:flex; gap:8px; align-items:flex-end; margin-top:6px; }
  .composer textarea { flex:1; min-height:44px; max-height:120px; margin:0; resize:none; }
  .composer .iconbtn { width:44px; height:44px; border-radius:50%; border:0; background:var(--surface); font-size:20px; flex:0 0 auto; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .composer .send { background:var(--brand-grad); }
  .composer .send:disabled { background:var(--surface-alt); opacity:.6; }
  .jr { border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:6px; }
  .jr.new { border-color:var(--gold-deep); }
  .jr .st { font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; background:var(--surface); align-self:flex-start; }
  .jr .st.fixed { background:var(--gold-soft); color:var(--gold-deep); }
  .jr .re { background:var(--surface); border-radius:10px; padding:8px 10px; font-size:14px; white-space:pre-wrap; }
  @media (min-width: 700px) { #bugSheet, #cancelSheet, #journalSheet { align-items:center; } #bugSheet .card, #cancelSheet .card, #journalSheet .card { border-radius:20px; } }
  /* The driver's own bank QR, full screen (switch «driver_qr»): a white card like a bank app's «Мой QR». */
  #qrSheet { position:fixed; inset:0; z-index:70; background:var(--bg); display:none; flex-direction:column; align-items:center; overflow:auto; padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
  #qrSheet.open { display:flex; }
  #qrSheet .qcard { background:#fff; color:#111; width:min(400px, 100%); border-radius:24px; padding:20px; box-shadow:0 4px 24px rgba(15,27,45,.14); text-align:center; display:flex; flex-direction:column; gap:10px; }
  #qrSheet .qcard img { width:100%; max-width:320px; aspect-ratio:1; object-fit:contain; margin:0 auto; border-radius:12px; background:#fff; }
  #qrSheet .qnum { display:flex; align-items:center; justify-content:center; gap:10px; background:#f2f4f3; border-radius:14px; padding:10px 12px; font-size:18px; font-weight:800; letter-spacing:.5px; }
  #qrSheet .qacts { display:flex; gap:10px; width:min(400px, 100%); margin-top:14px; }
  #qrSheet .qacts > * { flex:1; }
  #cancelReasons { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 8px; }
  #cancelReasons .chip { white-space:normal; text-align:left; }
  #cancelNote { width:100%; box-sizing:border-box; margin:4px 0 8px; padding:12px; border:1px solid var(--line); border-radius:12px; font:inherit; resize:none; background:var(--bg); color:var(--text); }
  #bugDraw { position:fixed; inset:0; z-index:65; background:#000; display:none; flex-direction:column; touch-action:none; user-select:none; }
  #bugDraw.open { display:flex; }
  #bugDraw .bar { display:flex; gap:8px; align-items:center; justify-content:space-between; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; color:#fff; }
  #bugDraw .bar button { background:rgba(255,255,255,.14); color:#fff; border:0; border-radius:999px; min-height:44px; padding:0 16px; font-size:15px; font-weight:600; }
  #bugDraw .bar button:disabled { opacity:.4; }
  #bugDraw .stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 12px; }
  #bugDraw canvas { max-width:100%; max-height:100%; border-radius:8px; cursor:crosshair; }
  #bugDraw .pens { display:flex; gap:14px; justify-content:center; padding:12px 12px calc(14px + env(safe-area-inset-bottom)); }
  #bugDraw .pens button { width:36px; height:36px; border-radius:50%; border:3px solid rgba(255,255,255,.35); padding:0; }
  #bugDraw .pens button.on { border-color:#fff; transform:scale(1.15); }
  #bugPhotos { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
  #bugPhotos .ph { position:relative; width:56px; height:56px; }
  #bugPhotos .ph img { cursor:pointer; width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
  #bugPhotos .ph button { position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:0; background:var(--ink); color:var(--on-ink); font-size:13px; line-height:22px; padding:0; }
  .bugTools { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .bugTools .chip { min-height:36px; padding:6px 12px; cursor:pointer; }
  #bugShot { cursor:pointer; }
  #bugShot { width:auto; min-width:56px; max-width:160px; height:96px; object-fit:cover; object-position:top; border-radius:8px; border:1px solid var(--line); background:var(--line); flex:0 0 auto; }
  #bugText { width:100%; box-sizing:border-box; margin:12px 0 6px; padding:12px; border:1px solid var(--line); border-radius:12px; font:inherit; resize:vertical; background:var(--bg); color:var(--text); }
  @media (max-width: 560px) { #bugBtn .bugtxt { display:none; } }
  /* Small phones: brand, role switch and two buttons must fit in 320 px (the
     UX lab found «Сообщить о проблеме» and «Приложения и демо» cut off). */
  @media (max-width: 420px) {
    #top { gap:6px; }
    .brand { font-size:0; gap:0; padding:13px; }
    #tabs button { padding:7px 8px; font-size:12px; }
  }
  @media (max-width: 360px) { .brand { display:none; } }
  #devMenu table { width:100%; border-collapse:collapse; font-size:12px; }
  #devMenu td, #devMenu th { padding:4px 4px; text-align:left; border-bottom:1px solid var(--line); }
  #devMenu a { color:var(--gold-deep); font-weight:600; text-decoration:none; }

  /* ---- the two phones: floating cards on desktop, a bottom sheet on a phone ---- */
  /* Sheets sized to their content, anchored at the bottom like the app's drawer. */
  .phone { position:fixed; z-index:10; bottom:var(--gap); max-height:calc(100vh - 72px - var(--gap)); display:flex; flex-direction:column; background:var(--bg);
    border-radius:28px; box-shadow:0 12px 40px rgba(15,27,45,.18); overflow:hidden; }
  #rider { left:var(--gap); width:var(--panel-w); }
  #driver { right:var(--gap); width:var(--driver-w); color:var(--text); }
  .phone .head { display:flex; align-items:center; gap:10px; padding:14px 16px 6px; flex:0 0 auto; }
  .phone .body { flex:1 1 auto; overflow-y:auto; padding:6px 16px 28px;
    /* A row cut by the sheet's edge fades out above the bar instead of hiding behind it. */
    -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent); display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain; }
  .phone .foot { flex:0 0 auto; padding:10px 16px 16px; display:flex; flex-direction:column; gap:10px; border-top:1px solid transparent; }
  .phone .foot:empty { display:none; }
  .phone.full { height:calc(100vh - 72px - var(--gap)); }
  .phone .who { font-size:12px; color:var(--faint); margin-left:auto; text-align:right; }
  .grab { display:none; }

  @media (max-width:860px) {
    :root { --gap:10px; }
    .brand small { display:none; }
    #tabs { display:flex; background:var(--surface); border-radius:12px; padding:4px; gap:4px; box-shadow:0 2px 10px rgba(15,27,45,.12); }
    #tabs button { border:0; background:transparent; border-radius:9px; padding:7px 12px; min-height:44px; min-width:44px; font-weight:700; font-size:13px; }
    #tabs button.on { background:var(--ink); color:var(--on-ink); }
    .phone { top:auto; left:0 !important; right:0 !important; bottom:0; width:auto !important; max-height:64vh; border-radius:28px 28px 0 0;
      box-shadow:0 -6px 24px rgba(15,27,45,.16); padding-bottom:env(safe-area-inset-bottom); }
    .phone.full { max-height:calc(100vh - 64px); height:calc(100vh - 64px); }
    .phone.hidden { display:none; }
    /* The handle drags or taps the drawer between three heights, as in the app:
       min (head and buttons), peek (fits its content) and open (most of the screen). */
    .grab { display:block; flex:0 0 auto; height:26px; touch-action:none; cursor:grab; position:relative; }
    .grab::after { content:''; position:absolute; left:50%; top:9px; width:40px; height:5px; margin-left:-20px; border-radius:3px; background:var(--faint); opacity:.6; }
    .phone:not(.full) { transition:max-height .25s ease, height .25s ease; }
    .phone.dragging { transition:none; }
    .phone[data-sheet=open]:not(.full) { height:90vh; max-height:90vh; }
    .phone[data-sheet=min]:not(.full) .body { display:none; }
    .phone.full .grab { display:none; }
  }

  /* ---- widgets (ios/Shared/UI/Widgets.swift) ---- */
  .title { font-size:22px; font-weight:700; margin:0; }
  .headline { font-size:17px; font-weight:700; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .muted { font-size:14px; color:var(--dim); }
  .caption { font-size:12px; color:var(--faint); }
  .line { height:1px; background:var(--line); flex:0 0 auto; }
  .row { display:flex; align-items:center; gap:8px; min-width:0; }
  .row.wrap { flex-wrap:wrap; }
  .grow { flex:1 1 auto; min-width:0; }
  .ell { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* default tone: the brand gradient with dark ink; a custom --tone (red, ink…) stays solid with white text */
  .primary { height:56px; border:0; border-radius:18px; background:var(--tone, var(--brand-grad)); color:var(--on-tone, var(--on-brand)); font-size:16px; font-weight:800; width:100%; padding:0 12px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 0 auto; }
  .primary[style*="--tone"] { --on-tone:#fff; }
  .primary:disabled { background:var(--surface-alt); color:var(--faint); cursor:default; }
  .ghost { height:50px; border:1px solid var(--line); border-radius:14px; background:transparent; font-size:15px; font-weight:500; width:100%; color:var(--tone, var(--text)); flex:0 0 auto; }
  .ghost:disabled { opacity:.5; cursor:default; }
  .row > .ghost, .row > .primary { flex:1 1 0; width:auto; min-width:0; }
  .fab { width:44px; height:44px; border-radius:50%; border:0; background:var(--bg); box-shadow:0 2px 8px rgba(15,27,45,.18); display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:var(--tint, var(--text)); }
  .phone .head .fab { box-shadow:none; background:var(--surface); }
  .field { display:flex; align-items:center; height:52px; background:var(--surface); border-radius:12px; padding:0 14px; gap:8px; min-width:0; }
  .field input { border:0; background:transparent; outline:none; flex:1; min-width:0; font-size:15px; height:100%; }
  .field.focus { box-shadow:inset 0 0 0 2px var(--text); }
  /* «На карте» inside the route field, not an icon beside it. */
  .field .onmap { flex:0 0 auto; border:0; border-radius:999px; background:var(--gold-soft); color:var(--gold-deep); font-size:13px; font-weight:500; padding:6px 10px; margin-right:-6px; }
  /* Only in the field being typed in (report #8). */
  .field:not(:focus-within) .onmap { display:none; }
  .searchbtn { display:flex; align-items:center; gap:12px; height:54px; background:var(--surface); border:0; border-radius:12px; padding:0 16px; color:var(--dim); text-align:left; width:100%; }
  .listrow { display:flex; align-items:center; gap:12px; padding:8px 0; min-height:44px; background:transparent; border:0; width:100%; text-align:left; min-width:0; }
  .listrow .ic { width:36px; height:36px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .listrow .t { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .route { display:flex; flex-direction:column; gap:6px; }
  .route .p { display:flex; gap:12px; align-items:flex-start; }
  .route .k { width:10px; height:10px; border-radius:5px; margin-top:5px; flex:0 0 auto; }
  .route .k.last { border-radius:2px; }
  .steps { display:flex; gap:6px; }
  .steps > div { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--dim); }
  .steps > div::before { content:""; display:block; width:100%; height:4px; border-radius:2px; background:var(--surface-alt); }
  .steps > div.on::before { background:var(--gold-deep); }
  .steps > div.cur { color:var(--text); font-weight:700; }
  .badge { display:inline-block; font-size:11px; font-weight:500; padding:2px 8px; border-radius:999px; color:var(--c, var(--good)); background:color-mix(in srgb, var(--c, var(--good)) 12%, transparent); white-space:nowrap; }
  .notice { padding:12px; border-radius:12px; background:color-mix(in srgb, var(--c, var(--good)) 10%, transparent); }
  .notice b { display:block; font-size:14px; color:var(--c, var(--good)); }
  .notice div { font-size:13px; color:var(--dim); white-space:pre-line; }
  .seg { display:flex; gap:4px; padding:4px; background:var(--surface); border-radius:12px; flex:0 0 auto; }
  .seg button { flex:1; border:0; background:transparent; border-radius:10px; padding:10px 4px; min-height:44px; font-size:14px; font-weight:700; }
  .seg button.on { background:var(--ink); color:var(--on-ink); }
  .chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; flex:0 0 auto; scrollbar-width:none; }
  .chip { border:0; border-radius:999px; padding:8px 14px; min-height:44px; background:var(--surface); font-size:13px; font-weight:500; white-space:nowrap; flex:0 0 auto; }
  .chip.on { background:var(--ink); color:var(--on-ink); }
  /* «Подъезд 3» over «кв. 1–36»; a door rides have confirmed carries a check */
  .chip.door { border-radius:14px; display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
  .chip.door small { font-size:11px; font-weight:400; color:var(--dim); }
  .chip.door.on small { color:var(--on-ink); opacity:.75; }
  .chip.door .ok { color:var(--good); font-weight:700; margin-left:4px; }
  .chip.door.on .ok { color:var(--on-ink); }
  .tiers { display:flex; gap:8px; overflow-x:auto; flex:0 0 auto; padding:2px; scrollbar-width:none; }
  .tier { width:116px; flex:0 0 auto; border:1px solid var(--line); border-radius:16px; background:var(--bg); padding:12px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .tier.on { border:2px solid var(--text); background:var(--surface); padding:11px 3px; }
  .tier .n { font-size:14px; font-weight:700; }
  .tier .f { font-size:18px; font-weight:900; }
  .waitchip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; font-size:13px; font-weight:600; align-self:flex-start; white-space:nowrap; }
  .waitchip.ok { background:color-mix(in srgb, var(--good) 10%, transparent); }
  .waitchip.none { background:color-mix(in srgb, var(--warn) 12%, transparent); }
  .waitchip .n { font-weight:400; font-size:12px; color:var(--dim); }
  .waitchip:empty { display:none; }
  .avatar { width:46px; height:46px; border-radius:50%; background:var(--gold-soft); color:var(--gold-deep); font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .plate { border:1.5px solid var(--text); border-radius:8px; padding:3px 8px; font-weight:900; font-size:15px; white-space:nowrap; }
  .stars { display:flex; gap:4px; }
  .stars button { border:0; background:transparent; font-size:30px; line-height:1; color:var(--faint); padding:0; }
  .stars button.on { color:var(--amber); }
  .toggle { display:flex; align-items:center; gap:12px; }
  /* 44 px tall to touch; the 31 px track is drawn inside it. */
  .toggle .sw { width:51px; height:44px; background:transparent; position:relative; flex:0 0 auto; border:0; padding:0; }
  .toggle .sw::before { content:""; position:absolute; left:0; top:6.5px; width:51px; height:31px; border-radius:16px; background:var(--line); transition:background .2s; }
  .toggle .sw::after { content:""; position:absolute; left:2px; top:8.5px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:left .2s; }
  .toggle .sw.on::before { background:var(--gold-deep); }
  .toggle .sw.on::after { left:22px; }
  .stepper { display:flex; align-items:center; gap:12px; }
  .stepper button { width:44px; height:44px; border-radius:50%; border:0; background:var(--surface); font-size:20px; }
  .card { border:1px solid var(--line); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:8px; }
  .banner { display:flex; align-items:center; gap:12px; background:var(--ink); color:var(--on-ink); border-radius:16px; padding:12px; border:0; text-align:left; width:100%; }
  .bubble { max-width:260px; padding:8px 12px; border-radius:14px; font-size:14px; background:var(--surface); align-self:flex-start; }
  .bubble.mine { background:var(--ink); color:var(--on-ink); align-self:flex-end; }
  .spin { width:18px; height:18px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--gold); animation:spin .8s linear infinite; flex:0 0 auto; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .fade { animation:fade .2s ease-out; }
  @keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
  .err { color:var(--bad); font-size:13px; }
  .login-hero { padding:28px 8px 12px; }
  .login-hero .big { font-size:52px; font-weight:900; letter-spacing:-1px; }
  #toast { position:fixed; z-index:50; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:var(--on-ink); padding:10px 16px; border-radius:12px; font-size:14px; display:none; max-width:90vw; }

  /* ---- the order screen (HomeScreen.kt): services, addresses, classes, the bar ---- */
  /* services: underline tabs, the chosen one with a gradient bar the width of its label */
  .svc { display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; flex:0 0 auto; }
  .svc button { border:0; background:transparent; padding:0; min-height:44px; flex:0 0 auto; color:var(--dim); font-size:13px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
  .svc button span { display:inline-block; position:relative; padding:12px 0 9px; }
  .svc button.on { color:var(--text); }
  .svc button.on span::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:2px; background:var(--brand-grad); }
  /* addresses: rows on the sheet, a line between them; icons lead, «Подъезд» / «+» trail */
  .addr { flex:0 0 auto; }
  .addr .ar { display:flex; align-items:center; gap:12px; min-height:52px; width:100%; border:0; background:transparent; text-align:left; padding:10px 0; }
  .addr .sep { border-top:1px solid var(--line); }
  .addr .k { width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin:0 4px; }
  .addr .ai { width:18px; display:flex; justify-content:center; flex:0 0 auto; }
  .addr .door { flex:0 0 auto; background:var(--surface-alt); color:var(--text); border-radius:999px; padding:4px 10px; font-size:13px; font-weight:500; white-space:nowrap; }
  .addr .t .mins { color:var(--dim); font-weight:400; }
  .addr .k.sq { border-radius:2px; }
  .addr .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
  .addr .t.big { font-size:17px; font-weight:700; }
  .addr .t.dim { color:var(--dim); }
  .addr .plus { width:32px; height:32px; border-radius:50%; border:0; background:var(--surface); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .short { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:8px 12px; background:transparent; flex:0 0 auto; text-align:left; max-width:200px; }
  .short .ic { color:var(--gold-deep); display:flex; }
  .short span:last-child { min-width:0; }
  .short b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .short small { display:block; font-size:12px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* classes: icon, note (wait / seats / Фикс), name, price; the chosen one on goldSoft with a thin goldDeep edge */
  .tier2 { min-width:92px; flex:0 0 auto; border:1px solid transparent; border-radius:16px; background:transparent; padding:10px; display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
  .tier2.on { border-color:color-mix(in srgb, var(--gold-deep) 45%, transparent); background:var(--gold-soft); }
  .tier2 .ic { color:var(--brand); transform:scale(2); transform-origin:left center; height:28px; display:flex; align-items:center; }
  .tier2 .ic.car { transform:none; height:42px; }
  .tier2:not(.on) .ic.car { opacity:.6; }
  .tier2.on .ic, .tier2.on .s { color:var(--gold-deep); }
  .tier2 .n { font-size:13px; font-weight:500; white-space:nowrap; }
  .tier2 .f { font-size:17px; font-weight:900; white-space:nowrap; }
  .tier2 .s { font-size:12px; color:var(--dim); min-height:16px; white-space:nowrap; }
  .orderbar { display:flex; gap:8px; align-items:stretch; }
  /* Payment is its icon alone (report #7): «Заказать» gets the width. */
  .orderbar .pay { width:56px; height:56px; flex:0 0 auto; border:0; border-radius:18px; background:var(--surface); display:flex; align-items:center; justify-content:center; padding:0; }
  .orderbar .pay .ic { color:var(--gold-deep); display:flex; flex:0 0 auto; }
  .orderbar .go { flex:1; height:56px; border:0; border-radius:18px; background:var(--brand-grad); color:var(--on-brand); display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; padding:0 8px; }
  .orderbar .go b { font-size:17px; font-weight:900; }
  .orderbar .go small { font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .orderbar .go:disabled { background:var(--surface-alt); color:var(--faint); cursor:default; }
  .orderbar .opt { width:56px; height:56px; border:0; border-radius:18px; background:var(--surface); position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .orderbar .opt.dot::after { content:''; position:absolute; top:10px; right:10px; width:9px; height:9px; border-radius:50%; background:var(--gold-deep); }
  .optsum { display:flex; align-items:center; gap:8px; border:0; border-radius:12px; background:var(--gold-soft); color:var(--gold-deep); padding:10px 12px; font-size:13px; font-weight:500; text-align:left; width:100%; flex:0 0 auto; }
  .payrow { display:flex; align-items:center; gap:12px; border:2px solid transparent; border-radius:14px; background:var(--surface); padding:12px; width:100%; text-align:left; flex:0 0 auto; }
  .payrow.on { border-color:var(--gold-deep); background:var(--gold-soft); }
  .payrow .ic { width:36px; height:36px; border-radius:50%; background:var(--bg); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .payrow .r { width:20px; height:20px; border-radius:50%; border:2px solid var(--faint); flex:0 0 auto; }
  .payrow.on .r { border:6px solid var(--gold-deep); }
  .searchbar { height:4px; border-radius:2px; background:var(--surface); overflow:hidden; position:relative; flex:0 0 auto; }
  .searchbar::after { content:''; position:absolute; top:0; bottom:0; width:40%; background:var(--brand); border-radius:2px; animation:slide 1.4s ease-in-out infinite; }
  @keyframes slide { from { left:-40%; } to { left:100%; } }
  @media (prefers-reduced-motion:reduce) { .searchbar::after { animation:none; left:30%; } }
  .acts { display:flex; justify-content:space-evenly; }
  .acts button, .acts a { text-decoration:none; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; color:var(--dim); position:relative; }
  .acts .ic { width:48px; height:48px; border-radius:50%; background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; }
  .acts .n { position:absolute; top:-2px; right:0; min-width:18px; height:18px; border-radius:9px; background:var(--gold-deep); color:var(--bg); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }

  /* markers */
  .mk-me { width:44px; height:44px; border-radius:50%; background:rgba(37,99,168,.2); display:flex; align-items:center; justify-content:center; }
  .mk-near { opacity:0; transition:opacity .4s; }
  .mk-near.on { opacity:1; }
  .mk-near svg { display:block; transition:transform 1.2s ease-in-out; filter:drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
  .mk-me::after { content:""; width:14px; height:14px; border-radius:50%; background:var(--sky); border:3px solid #fff; }
  /* a door («Подъезд 3»): a small green tag on a stem, its foot on the coordinate */
  .mk-door { display:flex; flex-direction:column; align-items:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); pointer-events:none; }
  .mk-door b { background:#0A7A45; color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; white-space:nowrap; }
  .mk-door i { width:2px; height:8px; background:#0A7A45; }
  .mk-door u { width:6px; height:6px; border-radius:50%; background:#0A7A45; border:1.5px solid #fff; }