/* ============================================================
   KONSORT TAXI — Liquid Glass UI
   Apple-style frosted/liquid glass, mesh gradients, responsive.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --yellow:#FFD400;
  --yellow-2:#FFB300;
  --yellow-3:#FF9E00;
  --yellow-soft:rgba(255,212,0,.14);
  --ink:#f6f7fb;
  --muted:rgba(232,234,246,.82);
  --muted-2:rgba(232,234,246,.72);

  /* glass system */
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.28);       /* верхній відблиск */
  --stroke:rgba(255,255,255,.14);
  --stroke-strong:rgba(255,255,255,.26);
  --blur:22px;

  --danger:#ff6b6b;
  --radius:24px;
  --radius-lg:30px;
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --pad:clamp(14px, 4.5vw, 20px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  min-height:100svh;
  max-width:560px;margin:0 auto;
  padding:0 clamp(12px,4vw,18px) calc(96px + env(safe-area-inset-bottom));
  position:relative;overflow-x:hidden;
  background:#07080d;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

/* ── Живий фон: мешеві градієнтні плями ─────────────────── */
body::before{
  content:"";position:fixed;inset:-20% -20% 0 -20%;z-index:-3;
  background:
    radial-gradient(38% 30% at 22% 12%, rgba(255,212,0,.28), transparent 60%),
    radial-gradient(34% 28% at 82% 6%,  rgba(122,92,255,.24), transparent 60%),
    radial-gradient(46% 34% at 50% 42%, rgba(0,168,255,.14), transparent 62%),
    radial-gradient(50% 40% at 88% 60%, rgba(255,110,60,.14), transparent 60%),
    linear-gradient(180deg,#0e1016 0%,#0a0b11 46%,#06070c 100%);
  filter:saturate(115%);
  animation:drift 78s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-1.4%,0) scale(1.04)}
  100%{transform:translate3d(0,1.2%,0) scale(1.02)}
}
/* легке зерно, щоб градієнти не бандились */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}

/* ── Нижнє «рідке скло», що розпливається (Apple-style) ──── */
.liquid-bottom{
  position:fixed;left:0;right:0;bottom:0;height:150px;z-index:40;pointer-events:none;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  -webkit-mask-image:linear-gradient(0deg,#000 34%, rgba(0,0,0,.65) 62%, transparent 100%);
  mask-image:linear-gradient(0deg,#000 34%, rgba(0,0,0,.65) 62%, transparent 100%);
  background:linear-gradient(0deg, rgba(8,9,14,.55), transparent 78%);
}
.liquid-bottom::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 130% at 18% 130%, rgba(255,212,0,.30), transparent 60%),
    radial-gradient(70% 130% at 84% 130%, rgba(120,110,255,.28), transparent 60%),
    radial-gradient(60% 120% at 50% 150%, rgba(0,180,255,.18), transparent 60%);
  filter:blur(6px);
}

/* ── Скляна утиліта: відблиск + край + тінь ─────────────── */
.glass{
  position:relative;
  background:var(--glass);
  border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(0,0,0,.22);
}
.glass::after{ /* верхній «мокрий» відблиск */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(108deg,transparent 16%,rgba(255,255,255,.02) 31%,rgba(255,255,255,.22) 43%,rgba(255,224,120,.10) 49%,transparent 64%) 120% 0/240% 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 42%);
  opacity:.72;
}
/* Постійне «переливання» на кожній панелі втомлює й тягне батарею. Лишаємо
   блиск статичним, а рух — лише там, де він щось означає: перемикач ролі на
   старті. І значно рідше, ніж було (9s → 40s). */
.glass::after{animation:none}
#role-seg.glass::after{animation:liquid-glint 40s cubic-bezier(.4,0,.2,1) infinite}
@keyframes liquid-glint{
  0%,62%,100%{background-position:120% 0,0 0;opacity:.62}
  78%{background-position:-120% 0,0 0;opacity:.88}
}

/* ── Topbar / логотип ───────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(14px,4vw,18px);margin:0 clamp(-18px,-4vw,-12px) 16px;min-height:72px;
  background:linear-gradient(180deg, rgba(52,54,68,.5), rgba(16,18,26,.28));
  border-bottom:1px solid var(--stroke);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 14px 40px rgba(0,0,0,.42), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
}
.logo{display:flex;align-items:center;min-width:0;flex:0 1 auto}
.logo-img{height:auto;max-height:38px;width:auto;max-width:58vw;object-fit:contain;display:block;
  filter:drop-shadow(0 4px 16px rgba(255,212,0,.34))}
.coins-pill{flex:0 0 auto}
.logo-badge,.logo-text{display:none}
.coins-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;
  padding:8px 15px;border-radius:999px;font-weight:800;font-size:15px;
  box-shadow:0 6px 20px rgba(255,212,0,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.coin-ico{width:20px;height:20px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
/* борг за бензин (баланс нижче нуля) */
.coins-pill.debt .coins-val{color:#b3261e}
.mr-bal.debt{color:var(--danger)}

/* ── Views як повноекранні overlays ─────────────────────── */
.view{
  position:fixed;inset:0;left:0;right:0;margin-inline:auto;max-width:560px;z-index:30;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px clamp(12px,4vw,18px) calc(100px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0e1016 0%,#0a0b11 55%,#06070c 100%);
  animation:rise .3s cubic-bezier(.2,.8,.2,1);
}
.view[hidden]{display:none!important}
.view.splash{display:flex;flex-direction:column;align-items:center;justify-content:center}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
h1{font-size:clamp(23px,7vw,28px);margin:.2em 0;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(19px,5.5vw,22px);margin:.4em 0 .6em;letter-spacing:-.01em;font-weight:800}
.accent{background:linear-gradient(135deg,var(--yellow),var(--yellow-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}

.hero{text-align:center;padding:clamp(24px,8vw,40px) 8px 6px}
.hero-emoji{font-size:clamp(48px,15vw,64px);filter:drop-shadow(0 10px 28px rgba(255,212,0,.32))}
.reg-logo{display:block;max-width:82vw;max-height:100px;margin:0 auto 14px;object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(255,212,0,.42))}

/* ── Cards ──────────────────────────────────────────────── */
.card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--stroke);border-radius:var(--radius);
  padding:var(--pad);margin:14px 0;
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
}
/* верхній «мокрий» відблиск + переломлення світла на кутах */
.card::after,.tile::after,.stat::after,.qr-home::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(58% 46% at 0% 0%,   rgba(255,255,255,.26), transparent 60%),
    radial-gradient(58% 46% at 100% 0%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(66% 52% at 0% 100%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(66% 52% at 100% 100%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 42%);
  opacity:.75;
}
/* ── Частотні пропозиції розкладу («звичні попутники») ──── */
.sc-suggest-card{
  position:relative;background:var(--glass);
  border:1px solid rgba(255,212,0,.4);border-radius:var(--radius);
  padding:var(--pad);margin:14px 0;
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
}
.sc-suggest-txt{font-size:14px;line-height:1.4;margin-bottom:10px}

label{display:block;font-size:14px;font-weight:600;margin:12px 0 0;color:var(--ink);position:relative;z-index:1}
input,select{
  width:100%;margin-top:8px;padding:14px 16px;
  border:1px solid var(--stroke-strong);border-radius:15px;
  font-size:16px;background:rgba(255,255,255,.06);color:var(--ink);
  outline:none;transition:border .16s,background .16s,box-shadow .16s;position:relative;z-index:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
input::placeholder{color:var(--muted-2)}
input:focus,select:focus{border-color:var(--yellow);background:rgba(255,255,255,.1);
  box-shadow:0 0 0 4px rgba(255,212,0,.18), inset 0 1px 0 rgba(255,255,255,.2)}
select option{color:#111}

/* ── Buttons ────────────────────────────────────────────── */
.btn{
  position:relative;border:none;border-radius:16px;padding:15px 18px;
  font-size:16px;font-weight:800;cursor:pointer;letter-spacing:.01em;
  transition:transform .09s,filter .16s,box-shadow .16s;z-index:1;overflow:hidden;
}
.btn:active{transform:scale(.975)}
.btn.primary{background:linear-gradient(135deg,var(--yellow),var(--yellow-2) 60%,var(--yellow-3));
  color:#141414;box-shadow:0 12px 30px rgba(255,212,0,.36), inset 0 1px 0 rgba(255,255,255,.65)}
.btn.primary::after,.profile-btn::after{
  content:"";position:absolute;inset:-30% -55%;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.52) 49%,transparent 60%);
  transform:translateX(-72%);animation:none;opacity:.55;
}
/* Промінь по кнопці біг на КОЖНІЙ жовтій кнопці й на «Профіль» одночасно.
   Лишаємо статичний відблиск; рух — лише на стартовому виборі ролі. */
@keyframes premium-sweep{0%,68%{transform:translateX(-72%)}86%,100%{transform:translateX(72%)}}
.btn.ghost{background:var(--glass-2);border:1px solid var(--stroke-strong);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 var(--glass-hi)}
.btn.danger{background:rgba(255,107,107,.16);color:var(--danger);border:1px solid rgba(255,107,107,.4)}
.btn.block{display:block;width:100%;margin-top:16px}
.back{background:none;border:none;color:var(--muted);font-size:15px;padding:8px 0;cursor:pointer}

/* ── Greeting ───────────────────────────────────────────── */
.greeting{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:6px 4px 4px}
.greeting-hi{color:var(--muted);font-size:15px;font-weight:600}
.greeting-name{font-size:23px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(135deg,#fff,#c9ccd6);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Персональний QR ────────────────────────────────────── */
.qr-home{
  position:relative;overflow:visible;cursor:pointer;text-align:center;
  background:linear-gradient(135deg, rgba(255,212,0,.18), rgba(255,255,255,.045));
  border:1px solid rgba(255,212,0,.34);border-radius:var(--radius-lg);
  padding:var(--pad);margin:16px 0;
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%);backdrop-filter:blur(var(--blur)) saturate(180%);
  transition:transform .12s;
}
.qr-home:active{transform:scale(.99)}
.qr-home-title{font-weight:800;font-size:clamp(16px,4.6vw,18px)}
/* відступ з боків — щоб текст не заліз під кнопку «оновити» в кутку */
.qr-home-sub{color:var(--muted);font-size:12px;margin-top:2px;padding:0 42px}
.qr-home-frame{
  margin:10px auto 6px;width:min(300px,74vw);aspect-ratio:1/1;border-radius:24px;padding:12px;
  background:linear-gradient(135deg,#FFE24D 0%,#FFD400 40%,#FF9E00 100%);
  box-shadow:0 16px 40px rgba(255,158,0,.4), inset 0 2px 10px rgba(255,255,255,.6), inset 0 -6px 16px rgba(180,110,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.qr-home-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.28))}
.qr-home-tap{text-align:center;color:var(--muted);font-size:12px;margin-top:2px}

/* ── Grid tiles ─────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:16px}
.tile{
  position:relative;overflow:hidden;
  background:var(--glass);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:clamp(18px,5vw,24px) 12px;font-weight:700;font-size:15px;color:var(--ink);
  box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
  display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;
  transition:transform .12s,border-color .16s;
}
.tile:active{transform:scale(.955);border-color:var(--stroke-strong)}
.tile.tile-wide{grid-column:1 / -1}
.tile-emoji{font-size:clamp(28px,8vw,34px);filter:drop-shadow(0 5px 14px rgba(0,0,0,.42))}

/* ── Trip / QR / lists ──────────────────────────────────── */
.qr{width:min(210px,58vw);height:auto;aspect-ratio:1/1;border-radius:18px;border:6px solid var(--yellow);
  margin:12px auto;display:block;box-shadow:0 10px 34px rgba(255,212,0,.34);background:#fff}
.pax-list,.search-list,.history,.admin-users{list-style:none;padding:0;margin:10px 0 0}
.pax-list li,.search-list li,.admin-users li{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;border-radius:15px;background:rgba(255,255,255,.05);
  border:1px solid var(--stroke);margin-bottom:9px;font-size:15px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.search-list li{cursor:pointer}
.search-list li:active{background:var(--yellow-soft)}
.row-between{display:flex;align-items:center;justify-content:space-between}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.chip-add{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;border:none;
  border-radius:11px;padding:7px 13px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(255,212,0,.3)}
.chip-add.on{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.chip-add[disabled]{opacity:.45;box-shadow:none;cursor:default}
.chip-del{background:rgba(255,107,107,.16);color:var(--danger);border:1px solid rgba(255,107,107,.36);
  border-radius:11px;padding:6px 12px;cursor:pointer}

/* ── Stats ──────────────────────────────────────────────── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.stat{position:relative;overflow:hidden;background:var(--glass);border:1px solid var(--stroke);border-radius:20px;
  padding:18px;text-align:center;box-shadow:var(--shadow),inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.stat-num{font-size:clamp(26px,8vw,34px);font-weight:800;letter-spacing:-.02em}
.coin-stat{background:linear-gradient(135deg,var(--yellow-soft),rgba(255,255,255,.04));border-color:rgba(255,212,0,.3)}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0}
.badge{background:var(--yellow-soft);border:1px solid rgba(255,212,0,.3);border-radius:13px;padding:9px 12px;
  font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.badge .b-emoji{font-size:18px}
.badge.locked{opacity:.42;filter:grayscale(.6)}
.b-need{font-size:11px;color:var(--muted);font-weight:800}
.history li{flex-direction:column;align-items:flex-start;gap:3px}
.history .h-date{font-weight:700;font-size:14px}
.history .h-pax{color:var(--muted);font-size:13px}

/* ── Admin ──────────────────────────────────────────────── */
.admin-users li{cursor:pointer}
.admin-users .u-meta{color:var(--muted);font-size:12px}
.tag{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;font-size:11px;
  padding:2px 8px;border-radius:8px;margin-left:6px;font-weight:800}

/* ── Modal (fix [hidden]) ───────────────────────────────── */
/* z-index 75 — ВИЩЕ за адмін-сито (65) і його фон (64): інакше модалка
   редагування/створення акаунта відкривалась ПОЗАДУ сита й фон ковтав кліки
   («адмінка зависає»). Нижче за тост (80), щоб тости лишались зверху. */
.modal{position:fixed;inset:0;background:rgba(4,5,10,.55);display:flex;align-items:flex-end;justify-content:center;
  z-index:75;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.modal[hidden]{display:none!important}
/* Плашка ачівки може відкриватись поверх вибору аватара */
#badge-modal{z-index:95}
.modal-card{
  position:relative;width:100%;max-width:560px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(34,36,46,.92), rgba(16,17,24,.94));
  border:1px solid var(--stroke-strong);
  box-shadow:0 -24px 70px rgba(0,0,0,.6), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  animation:slideup .32s cubic-bezier(.2,.9,.3,1);
}
.modal-card::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.x{background:none;border:none;font-size:22px;cursor:pointer;color:var(--muted)}
.switch{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.switch input{width:auto;margin:0;transform:scale(1.35)}

/* ── QR fullscreen ──────────────────────────────────────── */
.qr-full{position:fixed;inset:0;z-index:70;background:rgba(5,6,11,.96);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise .25s ease}
.qr-full[hidden]{display:none!important}
.qr-full-img{width:min(86vw,86vh);height:auto;border-radius:28px;
  background:linear-gradient(135deg,#FFE24D,#FFD400 45%,#FF9E00);padding:22px;
  box-shadow:0 26px 80px rgba(255,158,0,.42), inset 0 2px 12px rgba(255,255,255,.6)}
.qr-full-hint{color:rgba(235,235,245,.75);font-size:14px;animation:rise .3s ease}

/* ── Loader & toast ─────────────────────────────────────── */
.loader{width:44px;height:44px;border:4px solid rgba(255,212,0,.2);border-top-color:var(--yellow);
  border-radius:50%;margin:80px auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:80;
  background:rgba(30,32,42,.85);color:#fff;padding:14px 20px;border-radius:16px;
  border:1px solid var(--stroke-strong);box-shadow:var(--shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  max-width:90%;text-align:center;font-size:14px;font-weight:600;animation:rise .25s ease;
}
.hint{margin-top:12px;opacity:.85}
/* діагностика на екрані помилки входу */
.diag{margin:10px 0;padding:12px;border-radius:12px;white-space:pre-wrap;word-break:break-word;
  background:rgba(0,0,0,.35);border:1px solid var(--stroke);
  font:600 12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--yellow)}

/* ── Кастомні іконки (жовті, один стиль) ────────────────── */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.16em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile .ic{width:clamp(28px,8vw,34px);height:clamp(28px,8vw,34px);color:var(--yellow);stroke-width:1.9;
  filter:drop-shadow(0 4px 12px rgba(255,158,0,.4))}
.back .ic{width:17px;height:17px;color:var(--muted);margin-right:2px}
.ttl-ic{width:22px;height:22px;color:var(--yellow);vertical-align:-.32em;margin-right:6px}

/* коротша «широка» плитка (Мої авто) — горизонтальна, нижча */
.tile.tile-wide{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:12px;padding:14px}
.tile.tile-wide .ic{width:26px;height:26px}

/* ── Маршрут: звідки → куди (підпис НАД полем) ───────────── */
.route{display:flex;align-items:flex-end;gap:8px;margin:10px 0 4px;position:relative}
.route-col{flex:1 1 0;min-width:0}
.route-lbl{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px 6px}
.route-oval{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 16px;border-radius:16px;
  background:var(--glass-2);border:1px solid var(--stroke-strong);box-shadow:inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);cursor:pointer;overflow:hidden}
.route-oval .val{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}
.route-oval.active{border-color:rgba(255,212,0,.55);background:var(--yellow-soft)}
.route-swap{flex:0 0 auto;width:46px;height:52px;border-radius:14px;border:1px solid var(--stroke-strong);
  background:var(--glass-2);color:var(--yellow);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s}
.route-swap:active{transform:rotate(180deg)}

/* ── Будильник: кнопка в кутку маршруту (не займає окремого місця) ── */
.route-alarm{position:absolute;top:-3px;right:0;z-index:2;width:24px;height:20px;padding:0;
  border:none;background:none;color:var(--yellow);cursor:pointer;
  display:flex;align-items:center;justify-content:flex-end}
.route-alarm .ic{width:19px;height:19px;filter:drop-shadow(0 2px 6px rgba(255,158,0,.5))}
.route-alarm:active{transform:scale(.9)}

/* ── Заявка до водія (модалка з карти) ───────────────────── */
.rm-route{margin:2px 2px 8px;font-size:13.5px}
.rm-meta{margin:0 2px 6px}
.rm-seats{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;color:var(--yellow)}
.rm-seats.none{color:var(--danger)}
.rm-seats .ic{width:16px;height:16px}
.rm-route-pick{margin:6px 0 4px}
.rm-route-pick .route-col{flex:1 1 100%}
#rm-request:disabled{opacity:.5;filter:grayscale(.6);cursor:default}
.req-row .chip-add,.req-row .chip-del{flex:0 0 auto;margin-left:6px}

/* тумблер «приймати заявки автоматично» на профілі */
.auto-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;
  border-radius:18px;background:var(--glass);border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.auto-txt{flex:1;min-width:0}
.auto-txt b{font-size:14.5px}
.profile-more{margin-top:16px;border-radius:20px;overflow:hidden;border:1px solid var(--stroke)}
.profile-more summary{display:flex;align-items:center;min-height:52px;padding:0 16px;cursor:pointer;
  font-size:15px;font-weight:800;list-style:none;user-select:none}
.profile-more summary::-webkit-details-marker{display:none}
.profile-more summary::after{content:"›";margin-left:auto;color:var(--yellow);font-size:24px;font-weight:500;
  transform:rotate(90deg);transition:transform .18s ease}
.profile-more[open] summary::after{transform:rotate(-90deg)}
.profile-more .auto-row{margin:0 10px 10px;background:rgba(255,255,255,.035)}
.profile-more .admin-btn{width:calc(100% - 20px);margin:14px 10px 14px}
.prefs-block{margin:0 10px 10px;border-radius:18px;background:rgba(255,255,255,.025);overflow:hidden}
.pref-row{display:flex;align-items:center;gap:12px;min-height:68px;padding:11px 12px;border-top:1px solid var(--stroke)}
.pref-row>span{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.pref-row b{font-size:14px}.pref-row small{color:var(--muted);font-size:12.5px;line-height:1.35}
.pref-row select{max-width:104px;padding:10px 8px;border-radius:12px;border:1px solid var(--stroke-strong);
  background:#1b1d26;color:var(--ink);font:700 13px inherit}

/* ── Екран розкладів ─────────────────────────────────────── */
.sc-days-lbl{font-size:14px;font-weight:600;margin:14px 0 0;position:relative;z-index:1}
/* Розклад: ті самі механіки, що на головній (пікер місць + чіп часу). */
/* Перемикач ролі — рівно між «Назва» і «Звідки», а не притулений до назви. */
.sc-role{margin:16px 0 16px!important}
.sc-route{margin:2px 0 4px}
/* чіп часу сам по ширині вмісту — не вилазить за край картки, як робив input[type=time] */
.sc-time-chip{margin:8px 0 0;position:relative;z-index:1}
.sc-days{display:flex;gap:6px;margin-top:8px;position:relative;z-index:1}
.sc-day{flex:1;min-width:0;padding:10px 0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-weight:800;font-size:13px;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
.sc-day.on{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;border-color:transparent}
.sc-row.off{opacity:.5}
.sc-health{color:#fbbf24!important;font-weight:700}
.sc-row .sc-toggle,.sc-row .car-ico-btn,.sc-row .chip-del{margin-left:6px}
/* ── Котик з лапкою: зміна балансу ─────────────────────────
   Лапка виїжджає збоку, накриває число, під нею воно змінюється, лапка
   відходить — видно нову суму. Одноразово ~1,6 с, без нескінченних циклів. */
.paw-fx{position:fixed;right:0;top:calc(70px + env(safe-area-inset-top));width:260px;height:70px;
  z-index:72;pointer-events:none;overflow:hidden}
.paw-fx[hidden]{display:none!important}
.paw-coin{position:absolute;right:86px;top:14px;display:flex;align-items:center;gap:7px;
  padding:7px 14px 7px 9px;border-radius:999px;background:rgba(18,20,28,.92);
  border:1px solid rgba(255,212,0,.5);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.paw-coin img{width:28px;height:28px}
.paw-coin b{color:var(--yellow);font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;min-width:2.2ch}
.paw-delta{position:absolute;left:36px;top:-14px;font-size:13px;font-weight:900;color:#22C55E;opacity:0}
.paw-fx.minus .paw-coin{border-color:rgba(255,107,107,.55)}
.paw-fx.minus .paw-delta{color:var(--danger)}
.paw-arm{position:absolute;right:-6px;top:6px;width:118px;height:60px;transform:translateX(110%)}
.paw-fur{fill:#F2A65A;stroke:#C9772F;stroke-width:1.6}
.paw-line{fill:none;stroke:#C9772F;stroke-width:1.6;stroke-linecap:round}
.paw-bean{fill:#FF9DB5}
.paw-fx.go .paw-arm{animation:paw-cover 1.25s cubic-bezier(.3,.8,.3,1) forwards}
.paw-fx.go .paw-coin{animation:paw-coin-life 1.9s ease forwards}
.paw-fx.go .paw-delta{animation:paw-delta-pop 1.9s ease forwards}
@keyframes paw-cover{
  0%{transform:translateX(110%)}
  30%{transform:translateX(-58px)}                  /* накрила число */
  38%{transform:translateX(-54px) rotate(-3deg)}    /* «чук» */
  52%{transform:translateX(-58px)}
  78%{transform:translateX(-10px)}                  /* відходить — нова сума */
  100%{transform:translateX(115%)}
}
@keyframes paw-coin-life{
  0%{opacity:0;transform:scale(.8)}
  12%{opacity:1;transform:scale(1)}
  46%{transform:scale(1)}
  56%{transform:scale(1.12)}
  66%{transform:scale(1)}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(-6px)}
}
@keyframes paw-delta-pop{
  0%,55%{opacity:0;transform:translateY(6px)}
  65%{opacity:1;transform:none}
  88%{opacity:1}
  100%{opacity:0;transform:translateY(-8px)}
}

/* «Додано до поїздки» — вище за повноекранний QR, але поза самим кодом */
.scan-banner{position:fixed;left:50%;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;
  width:min(92vw,380px);padding:10px 16px 10px 10px;border-radius:20px;pointer-events:none;
  background:linear-gradient(135deg,rgba(34,197,94,.96),rgba(22,163,74,.96));color:#fff;
  box-shadow:0 14px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.scan-banner[hidden]{display:none!important}
.scan-banner .sb-av{flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px rgba(255,255,255,.7)}
.scan-banner .sb-av .av-face{width:100%;height:100%}
.scan-banner .sb-txt{display:flex;flex-direction:column;min-width:0}
.scan-banner b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scan-banner small{font-size:13px;opacity:.92}
.scan-banner.go{animation:sb-pop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes sb-pop{from{opacity:0;transform:translate(-50%,-8px) scale(.9)}to{opacity:1;transform:translate(-50%,0)}}
/* «Щось не працює?» — просто підкреслений текст, без рамки */
.problem-link{display:block;margin:14px auto 26px;padding:10px 12px;background:none;border:none;
  color:#fff;opacity:.82;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.problem-card textarea{width:100%;min-height:130px;margin:10px 0 8px;padding:12px;border-radius:14px;resize:vertical;
  border:1px solid var(--stroke-strong);background:#22242d;color:var(--ink);font:inherit;font-size:16px;line-height:1.45}
.pr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
/* Адмінка: вхід за PIN */
.pin-gate input{font-size:22px;letter-spacing:.3em;text-align:center}
/* Адмінка: «Потребує уваги» */
.attention-card{border-color:rgba(255,212,0,.45)}
.attention-card .pax-list li{align-items:flex-start;gap:10px}
.att-actions{display:flex;gap:6px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
.attention-card .pax-list li{flex-wrap:wrap}
.attention-card .pax-list li>span:first-child{flex:1 1 180px;min-width:0}
/* Екран очікування схвалення */
.pending-card{padding:28px 20px}
.pending-card h2{margin:6px 0 10px}
.pending-card p{line-height:1.55;margin:0 0 6px}
.pending-ico{font-size:44px;line-height:1}
/* Кроки нагадувань: три незалежні чіпи замість одного списку */
.pref-row-stages{flex-wrap:wrap}
.stage-chips{display:flex;gap:8px;flex:1 0 100%}
.stage-chip{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--stroke-strong);
  background:rgba(255,255,255,.05);color:var(--muted);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.stage-chip.on{background:var(--yellow-soft);border-color:rgba(255,212,0,.55);color:var(--ink)}
.sc-toggle{width:52px;height:32px;min-height:32px;flex:0 0 auto;border-radius:999px;cursor:pointer;position:relative;
  border:1px solid var(--stroke-strong);background:rgba(255,255,255,.06);transition:background .16s}
.sc-toggle::before{content:"";position:absolute;inset:-6px}
.sc-toggle::after{content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;background:var(--muted);transition:left .16s,background .16s,box-shadow .16s}
.sc-toggle.on{background:var(--yellow-soft);border-color:rgba(255,212,0,.5)}
.sc-toggle.on::after{left:23px;background:var(--yellow);box-shadow:0 2px 10px rgba(255,212,0,.3)}

/* олівець зміни часу — простий значок у стилі іконок (не скло) */
.edit-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:none;background:none;color:var(--yellow);cursor:pointer;vertical-align:middle;margin-left:6px}
.edit-ic .ic{width:20px;height:20px}

/* вибір авто (знизу поїздки) */
.car-pick{gap:10px;justify-content:flex-start!important}
.car-pick .ic{width:22px;height:22px;color:var(--yellow);flex:0 0 auto}
.car-pick .val{text-align:left;width:auto;flex:1}
.car-link{display:inline-block;margin:8px 4px 0;color:var(--yellow);font-weight:700;font-size:13px;cursor:pointer}

/* ── Рулетка адрес (liquid glass) ───────────────────────── */
.wheel-host{position:relative;z-index:41}
.wheel-wrap{position:absolute;top:6px;left:0;right:0;z-index:42;border-radius:22px;overflow:hidden;
  border:1px solid var(--stroke-strong);background:rgba(18,20,28,.88);
  box-shadow:0 26px 64px rgba(0,0,0,.62), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)}
.wheel{height:222px;overflow-y:auto;scroll-snap-type:y mandatory;padding:88px 0;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 32%,#000 68%,transparent)}
.wheel::-webkit-scrollbar{display:none}
.wheel-item{scroll-snap-align:center;height:46px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 14px;font-size:16px;font-weight:600;color:var(--muted-2);cursor:pointer;
  transition:color .16s,transform .16s,opacity .16s}
.wheel-item.sel{color:var(--ink);font-weight:800;transform:scale(1.05)}
.wheel-center{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);height:46px;border-radius:13px;
  border:1px solid rgba(255,212,0,.45);background:rgba(255,212,0,.09);pointer-events:none;
  box-shadow:0 0 24px rgba(255,212,0,.18) inset}
.pin{width:28px;height:28px;flex:0 0 auto;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);border:1px solid var(--stroke);background:rgba(255,255,255,.04)}
.pin.on{color:var(--yellow);border-color:rgba(255,212,0,.5);background:var(--yellow-soft)}
.wheel-add{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--stroke);background:rgba(0,0,0,.14)}
.wheel-add input{margin:0}
.wheel-add .btn{padding:12px 16px}

/* кнопка «оновити QR / нова поїздка» */
.qr-refresh{margin:12px auto 0;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--stroke-strong);background:var(--glass-2);color:var(--ink);font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--glass-hi);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.qr-refresh .ic{width:16px;height:16px;color:var(--yellow)}

/* нещодавно прибрані (повернути) */
.restore-title{margin:16px 4px 6px;font-size:13px;font-weight:700;color:var(--muted)}
.pax-list li.removed{opacity:.7}
.pax-list li .chip-restore{background:var(--glass-2);border:1px solid var(--stroke-strong);color:var(--yellow);
  border-radius:11px;padding:6px 12px;font-weight:700;cursor:pointer}

/* ══════════════════════════════════════════════════════════
   ОБОЛОНКА: карта ↔ профіль (горизонтальний свайп)
   ══════════════════════════════════════════════════════════ */
.shell{position:fixed;inset:0;left:0;right:0;margin-inline:auto;max-width:560px;z-index:20;overflow:hidden}
.shell[hidden]{display:none!important}
/* transform-track: надійні кліки в Telegram WebView (без вкладеного scroll-snap) */
.pager{display:flex;width:200%;height:100%;transform:translateX(0);
  transition:transform .34s cubic-bezier(.2,.8,.2,1);will-change:transform}
.page{flex:0 0 50%;width:50%;height:100%;position:relative}
.page.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.page-map{overflow:hidden}
.tile,.btn,.time-chip,.route-oval,.route-swap,.profile-btn,.p-back,.geo-btn,.admin-btn,
.chip-add,.chip-del,.seg button,.picker-list li{touch-action:manipulation}

/* крапки-індикатор сторінок */
.dots{position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;gap:7px;z-index:12;pointer-events:none}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);transition:all .2s}
.dot.on{width:20px;border-radius:4px;background:linear-gradient(90deg,var(--yellow),var(--yellow-2))}

/* ── Сторінка КАРТА ──────────────────────────────────────── */
#map{position:absolute;inset:0;background:#0d0f15}
.map-loading,.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;z-index:2;color:var(--muted);font-weight:700;
  background:radial-gradient(60% 50% at 50% 40%,rgba(255,212,0,.06),transparent),#0d0f15}
.map-loading[hidden],.map-fallback[hidden]{display:none!important}
.map-fallback .mf-emoji{font-size:52px;filter:drop-shadow(0 8px 22px rgba(255,212,0,.3))}
/* приховати рідні контроли MapLibre — керуємо своєю кнопкою + жестами */
.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left{display:none!important}
.maplibregl-ctrl-top-right .maplibregl-ctrl-group{display:none!important}
/* Атрибуція OSM/OpenFreeMap — обов'язкова за ліцензією. Компактна «ⓘ» під кнопкою гео. */
.maplibregl-ctrl-top-right{top:calc(140px + env(safe-area-inset-top));right:14px;z-index:8}
.maplibregl-ctrl-attrib{background:rgba(18,20,28,.72)!important;border:1px solid var(--stroke);
  border-radius:12px;font-size:10.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.maplibregl-ctrl-attrib a,.maplibregl-ctrl-attrib{color:var(--muted-2)}
.maplibregl-ctrl-attrib-button{filter:invert(1);opacity:.65}

.map-top{position:absolute;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;z-index:8;
  display:flex;align-items:center;gap:10px}
.seg{display:flex;padding:5px;border-radius:16px;gap:4px}
.seg button{border:none;background:none;color:var(--muted);font-weight:800;font-size:15px;
  padding:10px 18px;border-radius:12px;cursor:pointer;transition:all .16s}
#role-seg button{padding-inline:14px;white-space:nowrap}
.seg button.on{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;
  box-shadow:0 6px 16px rgba(255,158,0,.4),inset 0 1px 0 rgba(255,255,255,.72);
  animation:role-liquid-pop .34s cubic-bezier(.2,.9,.25,1.25)}
@keyframes role-liquid-pop{from{transform:scale(.92);filter:brightness(.82)}to{transform:none;filter:none}}
.map-top .coins-pill{margin-left:auto}

/* позначки колег на карті */
.map-pin{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:800 12px "Manrope",sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.55);
  background:#1b1e26;border:2.5px solid var(--yellow);color:var(--yellow);
  animation:pin-arrive .38s cubic-bezier(.2,.9,.25,1.2)}
/* Лише окремі translate/scale, НЕ transform: transform на цьому ж елементі
   ставить сам MapLibre (положення пина). Анімація через transform на час
   появи скидала положення — котики злітали в кут карти один на одного, а якщо
   Telegram згортали посеред анімації, так там і лишались. */
/* Лише прозорість: будь-який scale/translate на елементі-маркері множить і зсув,
   яким MapLibre ставить його на місце. Якщо анімація не доігравала (Telegram
   згорнули), котики лишались на 62% своїх координат — злиплись у кутку. */
@keyframes pin-arrive{from{opacity:0}to{opacity:1}}
.map-pin.pin-pass{border-color:var(--yellow);color:var(--yellow)}
/* Наскільки по дорозі: трохи вбік — прозоріше, далеко — ще прозоріше.
   Найкращим — маленька галочка збоку. */
.map-pin.fit-ok{opacity:1}
.map-pin.fit-far{opacity:.42}  /* transform не чіпаємо — ним MapLibre ставить пін на місце */
.map-pin.fit-best::after{content:"✓";position:absolute;right:-5px;top:-5px;width:15px;height:15px;
  border-radius:50%;background:#22C55E;color:#fff;font-size:10px;font-weight:900;line-height:15px;
  text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.feed-note{color:var(--muted);font-size:13px;text-align:center;margin:10px 4px 2px}
.map-pin.pin-drv{border-color:rgba(255,255,255,.6);color:#fff}
.map-pin.pin-me{background:var(--yellow);color:#141414;border:none;
  box-shadow:0 0 0 8px rgba(255,212,0,.18),0 4px 12px rgba(0,0,0,.5)}
/* точки обраного маршруту: A — звідки, B — куди */
.map-pin.pin-from,.map-pin.pin-to{width:28px;height:28px;font-size:12px;cursor:default;
  background:#fff;color:#141414;border:2px solid var(--yellow);
  box-shadow:0 4px 12px rgba(0,0,0,.55)}
.map-pin.pin-to{background:var(--yellow);border-color:#fff}
/* штаб-квартира KONSORT — постійний орієнтир на карті */
.map-pin.pin-konsort{width:38px;height:38px;font-size:15px;cursor:default;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;border:2px solid #fff;
  box-shadow:0 0 0 6px rgba(255,212,0,.16),0 6px 16px rgba(0,0,0,.6);
  animation:konsort-breathe 12s ease-in-out infinite}
@keyframes konsort-breathe{
  0%,100%{box-shadow:0 0 0 6px rgba(255,212,0,.14),0 6px 16px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 11px rgba(255,212,0,0),0 8px 22px rgba(255,178,0,.25)}
}
/* жива позиція водія (пасажир, якого забирають) — пульсує, щоб впадало в очі */
.map-pin.pin-live{cursor:default;background:#141414;border:2.5px solid var(--yellow);
  animation:pin-live-pulse 2.6s ease-in-out infinite}
@keyframes pin-live-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,212,0,.45),0 4px 12px rgba(0,0,0,.55)}
  50%{box-shadow:0 0 0 9px rgba(255,212,0,0),0 4px 12px rgba(0,0,0,.55)}
}
.pa-live-status{margin:2px 4px 8px;color:var(--yellow);font-weight:700}

.geo-btn{position:absolute;right:14px;top:calc(78px + env(safe-area-inset-top));bottom:auto;z-index:8;width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;color:var(--yellow);cursor:pointer;border:1px solid var(--stroke)}
.geo-btn .ic{width:24px;height:24px}
.geo-btn:active{transform:scale(.94)}

.map-sheet{position:absolute;left:12px;right:12px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:9;
  border-radius:26px;padding:18px;border:1px solid transparent;
  background:
    linear-gradient(155deg,rgba(46,48,58,.76),rgba(18,20,27,.68) 58%,rgba(30,27,17,.62)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.08) 38%,rgba(255,212,0,.28) 76%,rgba(255,255,255,.2)) border-box;
  box-shadow:0 24px 64px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.035),
    inset 0 1px 1px rgba(255,255,255,.32),inset 0 -1px 1px rgba(255,212,0,.08)}
.map-sheet[hidden]{display:none}
.map-sheet.role-enter{animation:sheet-liquid-enter .48s cubic-bezier(.2,.82,.25,1)}
@keyframes sheet-liquid-enter{
  0%{opacity:.35;transform:translateY(18px) scale(.975);filter:blur(5px)}
  65%{opacity:1;transform:translateY(-2px) scale(1.003);filter:blur(0)}
  100%{transform:none}
}
.sheet-intent{display:flex;flex-direction:column;gap:2px;margin:0 3px 10px}
.sheet-intent b{font-size:15px;letter-spacing:-.01em}
.sheet-intent span{color:var(--muted);font-size:14px;line-height:1.45}
.sheet-title{font-size:18px;font-weight:800;letter-spacing:-.01em}
.sheet-sub{color:var(--muted);font-size:13px;margin:4px 0 14px;line-height:1.35}
.qr-cta .ic{width:22px;height:22px;vertical-align:-.34em;margin-right:6px}
.mini-link{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;
  background:none;border:none;color:var(--muted);font-weight:700;font-size:13.5px;cursor:pointer;padding:6px}
.mini-link .ic{width:15px;height:15px;color:var(--yellow)}

.swipe-hint{position:absolute;top:calc(74px + env(safe-area-inset-top));right:14px;z-index:8;
  display:inline-flex;align-items:center;gap:2px;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:rgba(18,20,28,.72);border:1px solid var(--stroke);color:var(--ink);font-weight:800;font-size:13px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:nudge 7s ease-in-out infinite}
.swipe-hint .ic{width:15px;height:15px;color:var(--yellow)}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

/* ── Сторінка ПРОФІЛЬ ────────────────────────────────────── */
.page-profile{padding:calc(10px + env(safe-area-inset-top)) clamp(12px,4vw,18px) calc(80px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0e1016 0%,#0a0b11 55%,#07080d 100%)}
.p-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;min-height:44px}
.p-back{display:inline-flex;align-items:center;gap:2px;background:none;border:none;color:var(--muted);
  font-size:14px;font-weight:700;cursor:pointer;padding:6px 2px}
.p-back .ic{width:16px;height:16px}
.p-head .logo-img{height:auto;max-height:30px;max-width:120px;margin:0 auto;filter:drop-shadow(0 4px 14px rgba(255,212,0,.34))}
.p-head .coins-pill{margin-left:auto}

/* ── Кнопка адміна (з'являється лише в адміна) ───────────── */
.admin-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:18px 0 0;
  padding:15px;border-radius:18px;font-weight:800;font-size:15px;cursor:pointer;color:var(--ink);
  background:linear-gradient(135deg,rgba(122,92,255,.22),rgba(255,255,255,.05));
  border:1px solid rgba(160,140,255,.34);box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 28px rgba(60,40,140,.28);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.admin-btn[hidden]{display:none!important}
.admin-btn:active{transform:scale(.98)}
.admin-btn .ic{width:20px;height:20px;color:#c9bcff}

/* ── Адмін-панель: шторка знизу (окремий модуль) ─────────── */
.admin-backdrop{position:fixed;inset:0;z-index:64;background:rgba(4,5,10,.6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.admin-backdrop[hidden]{display:none!important}
.admin-sheet{position:fixed;left:0;right:0;bottom:0;margin-inline:auto;max-width:560px;z-index:65;
  max-height:92svh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:10px clamp(12px,4vw,18px) calc(26px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(30,32,42,.96),rgba(14,15,22,.98));
  border:1px solid var(--stroke-strong);box-shadow:0 -24px 70px rgba(0,0,0,.6),inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  animation:slideup .32s cubic-bezier(.2,.9,.3,1)}
.admin-sheet[hidden]{display:none!important}
.as-grip{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);margin:2px auto 10px}
.as-head b{display:inline-flex;align-items:center;font-size:18px}
.as-role{color:var(--muted);font-size:12.5px;font-weight:700;margin:2px 2px 6px}
.admin-sheet .row-2>*{min-width:0}
.admin-sheet input,.admin-sheet select{min-width:0;max-width:100%}
.adm-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 12px}
.adm-kpis>div{min-width:0;padding:12px 8px;border-radius:15px;text-align:center;background:rgba(255,255,255,.055);border:1px solid var(--stroke);overflow:hidden}
.adm-kpis span{display:block;color:var(--yellow);font-size:18px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-kpis small{display:block;margin-top:3px;color:var(--muted);font-size:11px}
.admin-sheet .card{overflow:hidden}
.admin-users li{gap:10px;min-width:0}.admin-users li>span{min-width:0;overflow:hidden}.admin-users .u-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* більша кнопка для «за кермом» */
.btn.big{padding:17px 20px;font-size:17px;border-radius:18px}

/* ══════════════════════════════════════════════════════════
   Apple-style LIQUID GLASS — frost + rim light + specular sheen
   (крос-браузерна база; SVG-рефракція нижче через @supports)
   ══════════════════════════════════════════════════════════ */
.glass,.card,.map-sheet,.tile,.qr-home,.picker-card,.admin-sheet,.modal-card,.coins-pill,.profile-btn,.seg{
  box-shadow:
    0 18px 50px rgba(0,0,0,.5),
    inset 0 1px 1px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(255,255,255,.14),
    inset 1px 0 1px rgba(255,255,255,.14),
    inset -1px 0 1px rgba(255,255,255,.14);
}
.glass,.card,.map-sheet,.tile,.qr-home,.picker-card{
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.08);
  backdrop-filter:blur(26px) saturate(190%) brightness(1.08);
}
/* специфічний блиск (додатковий шар) */
.card::before,.map-sheet::before,.tile::before,.qr-home::before,.picker-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(135deg, rgba(255,255,255,.4), rgba(255,255,255,.06) 26%, transparent 56%);
  opacity:.5;mix-blend-mode:screen;
}
.card>*,.map-sheet>*,.tile>*,.qr-home>*{position:relative;z-index:1}

/* Прогресивна рефракція (Chromium/Android): справжнє викривлення фону.
   НЕ на .map-sheet — під ним постійно перемальовується жива WebGL-карта
   (піни/маршрут кожні ~10с), і важкий SVG-фільтр (feTurbulence + displacement)
   поверх такого фону — головна причина «нервовості»/підвисання на Android. */
/* НЕ на .picker-card: список місць прокручується, і фільтр перемальовував усю
   картку на кожен рух пальця — на Android вибір «завмирав» (не гортався й не тискався). */
@supports (backdrop-filter:url(#lg-refract)){
  .qr-home,.admin-sheet{
    -webkit-backdrop-filter:blur(14px) saturate(185%) url(#lg-refract);
    backdrop-filter:blur(14px) saturate(185%) url(#lg-refract);
  }
}

/* ── Кнопка «Профіль» на карті (жовта, без анімації) ─────── */
.profile-btn{position:relative;overflow:hidden;margin-left:auto;display:inline-flex;align-items:center;gap:2px;
  padding:11px 16px 11px 18px;border-radius:999px;border:none;cursor:pointer;
  font-weight:800;font-size:15px;color:#141414;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-2));}
.profile-btn .chev{width:17px;height:17px;color:#141414;stroke-width:2.6}
.profile-btn:active{transform:scale(.96)}

/* ── Більший логотип на профілі ─────────────────────────── */
.p-logo-wrap{display:flex;justify-content:center;margin:2px 0 10px}
.p-logo{height:auto;max-height:64px;max-width:76vw;object-fit:contain;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}

/* ── Мапа-шторка: скрол усередині ───────────────────────── */
.map-sheet{max-height:56svh;overflow-y:auto;-webkit-overflow-scrolling:touch;transition:opacity .18s,transform .18s}
.map-sheet .route{margin:6px 0 10px}
.map-sheet .route-oval{min-height:50px}
.as-grip{cursor:pointer}

/* згорнута шторка — маршрут «звідки→куди» + час + кнопка (без стрічки/плану).
   `.ride-feed` анімується (max-height/opacity), а не «стрибає» через
   display:none — display неможливо плавно перейти, тож раніше вміст
   зникав/з'являвся різким стрибком замість плавного згортання. */
.map-sheet.collapsed{max-height:none}
.ride-feed{max-height:2000px;opacity:1;overflow:hidden;transition:max-height .28s ease,opacity .2s ease}
.map-sheet.collapsed .ride-feed{max-height:0;opacity:0}
.map-sheet.collapsed .trip-plan{display:none}
/* Заявки до вас видно ЗАВЖДИ — навіть у згорнутій шторці. Інакше водій
   відкриває застосунок і не бачить, що до нього хтось проситься. */
.req-feed{margin-top:6px}
.req-feed:empty{display:none}

/* рух карти → ховаємо все зайве, видно лише карту */
.map-top,.geo-btn,.nav-panel{transition:opacity .18s}
.page-map.panning .map-sheet,
.page-map.panning .map-top,
.page-map.panning .geo-btn,
.page-map.panning .nav-panel{opacity:0;pointer-events:none}

/* коротший список зупинок — щоб не займав пів екрана */
.tp-stops{max-height:30vh;overflow-y:auto}

/* ── Чіп часу ────────────────────────────────────────────── */
/* чіп часу/місць — буває і <label>, і <button>, тож шрифт успадковуємо явно */
.time-chip{display:inline-flex;align-items:center;gap:8px;margin:2px 0 12px;
  padding:11px 16px;border-radius:14px;cursor:pointer;font-weight:800;font-size:14px;color:var(--ink);
  font-family:inherit;
  background:var(--glass-2);border:1px solid var(--stroke-strong);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.time-chip .ic{width:17px;height:17px;color:var(--yellow)}
.time-chip:active{transform:scale(.97)}

/* ряд: [Зараз] [Оголосити поїздку → до правого краю] — компактно, як поля */
.sheet-actions{display:flex;gap:10px;align-items:stretch;margin:8px 0 4px}
.sheet-actions .time-chip{margin:0;flex:0 0 auto;min-height:50px;padding:0 14px;font-size:13.5px}
.sheet-actions .announce{flex:1 1 auto;margin:0;min-height:50px;padding:0 14px;font-size:14px;
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.announce .ic{width:18px;height:18px}
.announce.is-active{color:var(--yellow);background:rgba(255,212,0,.1);border:1px solid rgba(255,212,0,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* ── Перший запуск: вибір наміру одним тапом ─────────────── */
.intent-modal{align-items:center;padding:18px}
.intent-card{border-radius:30px;padding:28px 18px 20px;max-width:440px}
.intent-card h2{margin:5px 0 4px;font-size:25px}
.intent-kicker{font-size:10.5px;font-weight:800;letter-spacing:.11em;color:var(--yellow)}
.intent-card>p{margin:0 0 17px}
.intent-choice{position:relative;width:100%;display:flex;align-items:center;gap:13px;text-align:left;
  margin:10px 0 0;padding:15px 14px;border-radius:19px;color:var(--ink);font-family:inherit;cursor:pointer;
  background:rgba(255,255,255,.075);border:1px solid var(--stroke-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.intent-choice:first-of-type{background:linear-gradient(135deg,rgba(255,212,0,.2),rgba(255,255,255,.06));
  border-color:rgba(255,212,0,.42)}
.intent-choice:active{transform:scale(.98)}
.intent-choice>span:nth-child(2){display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.intent-choice b{font-size:16px}
.intent-choice small{color:var(--muted);font-size:11.5px;line-height:1.3}
.intent-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:var(--yellow);background:rgba(255,212,0,.12);border:1px solid rgba(255,212,0,.28);flex:0 0 auto}
.intent-icon .ic{width:22px;height:22px}
.intent-chevron{width:17px;height:17px;color:var(--muted);flex:0 0 auto}

@media (max-width:360px){
  .map-top{left:8px;right:8px;gap:6px}
  #role-seg button{padding:9px 10px;font-size:13px}
  .profile-btn{padding:10px 11px;font-size:13px}
  .map-sheet{left:8px;right:8px;padding:15px}
  .sheet-actions{gap:6px}
  .sheet-actions .time-chip{padding-inline:10px}
  .sheet-actions .announce{padding-inline:10px;font-size:12.5px}
  /* Дати та координати не вміщаються поруч на старих/малих телефонах. */
  .admin-sheet .row-2{grid-template-columns:minmax(0,1fr)}
}

/* ── Пасажиру: час ходьби до точки збору (п.5) ──────────── */
.pa-eta{margin:2px 4px 8px;color:var(--yellow);font-weight:700}
.pa-eta[hidden]{display:none}

/* ── Стрічка активних заявок ─────────────────────────────── */
.ride-feed{margin-top:6px}
.feed-head{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:14px 4px 8px}
.feed-empty{color:var(--muted-2);font-size:13px;padding:6px 4px 2px}
.feed-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:15px;margin-bottom:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.feed-row.mine{background:var(--yellow-soft);border-color:rgba(255,212,0,.34)}
/* «Вам по дорозі» — збіг напрямку, часу й близькості точки */
.feed-head.hot{color:var(--yellow)}
.feed-row.hot{border-color:rgba(255,212,0,.4);box-shadow:0 0 18px rgba(255,212,0,.1)}
.fr-near{margin-left:7px;padding:2px 7px;border-radius:7px;font-size:10.5px;font-weight:800;
  color:#141414;background:linear-gradient(135deg,var(--yellow),var(--yellow-2));vertical-align:1px}
/* стан власної заявки до водія */
.fr-state{font-size:11.5px;font-weight:800;margin-top:3px}
.fr-state.wait{color:var(--muted)}
.fr-state.ok{color:#22C55E}
.feed-row .ic{width:22px;height:22px;color:var(--yellow);flex:0 0 auto}
.fr-body{flex:1;min-width:0}
.fr-body b{font-size:14.5px}
/* «Написати» — посилання, стилізоване як чіп */
.fr-write{flex:0 0 auto;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.fr-meta{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Пікер місця ─────────────────────────────────────────── */
/* 90 — вище за будь-яке вікно (картка водія 75): список місць, відкритий з вікна, не ховається під ним */
.picker{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,5,10,.72)}
/* Картка й так майже непрозора — розмиття фону тут лише гальмувало телефони. */
.picker .picker-card{-webkit-backdrop-filter:none;backdrop-filter:none}
.picker[hidden]{display:none!important}
.picker-card{position:relative;width:100%;max-width:560px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:10px clamp(14px,4vw,18px) calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(30,32,42,.96),rgba(14,15,22,.98));
  border:1px solid var(--stroke-strong);animation:slideup .3s cubic-bezier(.2,.9,.3,1)}
.picker-card>b{display:block;font-size:17px;margin:4px 2px 12px}
.picker-list{list-style:none;padding:0;margin:0;max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;touch-action:pan-y}
.picker-list::-webkit-scrollbar{width:0}
.picker-list li{display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:15px;margin-bottom:8px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke);font-size:16px;font-weight:700;cursor:pointer}
.picker-list li:active{background:var(--yellow-soft)}
.picker-list .ic{width:22px;height:22px;color:var(--yellow)}
.picker-add{display:flex;gap:10px;margin-top:8px}
.picker-add input{margin:0}
.picker-add .btn{flex:0 0 auto;padding:14px 16px}
.picker-add .ic{width:20px;height:20px;color:#141414}

/* ── Рулетка адрес: активний пункт вгорі під заголовком (п.9) ─ */
/* Бокові відступи + вирівнювальні відʼємні поля: жовте сяйво обраного пункту
   має куди лягти. Без них overflow-y:auto робить overflow-x:auto і обрізає
   світло рівно по краях пункту — виглядає як «зрізаний» жовтий прямокутник. */
/* Звичайний список: без примусового «прилипання» й маски на контейнері прокрутки
   (на мобільних WebView вони ламали дотикову прокрутку), усі пункти — повної
   яскравості (напівпрозорі виглядали неактивними). Верхній пункт лише підсвічено. */
.picker-list.wheel-mode{max-height:min(56vh,420px);padding:4px 14px 6px;margin:0 -14px;
  overscroll-behavior:contain;touch-action:pan-y;-webkit-mask-image:none;mask-image:none}
.picker-list.wheel-mode li{transition:border-color .16s,background .16s}
.picker-list.wheel-mode li.sel{opacity:1;border-color:rgba(255,212,0,.55);
  background:var(--yellow-soft);box-shadow:inset 0 0 0 1px rgba(255,212,0,.14),0 0 22px rgba(255,212,0,.16)}
/* ── Інлайн-рулетка кількості місць (просто на чіпі) ─────── */
.seats-wheel-back{position:fixed;inset:0;z-index:66;background:transparent}
.seats-wheel-back[hidden]{display:none!important}
.seats-wheel{position:fixed;z-index:67;border-radius:14px;overflow:hidden;
  background:rgba(18,20,28,.94);border:1px solid rgba(255,212,0,.45);
  box-shadow:0 18px 44px rgba(0,0,0,.6), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.seats-wheel[hidden]{display:none!important}
/* Обране — більший жовтий шрифт (а не transform:scale, бо на краях
   збільшений прямокутник обрізався б через overflow:hidden). */
.sw-item{display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:var(--muted-2);
  transition:color .12s,font-size .12s,opacity .12s,background .12s;opacity:.55;cursor:pointer}
.sw-item.on{color:var(--yellow);font-size:18px;opacity:1}
.sw-item:active{background:rgba(255,212,0,.12)}
.sw-item .ic{width:16px;height:16px}
.sw-input{width:100%;height:100%;margin:0;padding:0 8px;text-align:center;
  border:none;background:transparent;color:var(--yellow);font-weight:800;font-size:15px}
.sw-input:focus{box-shadow:none;background:transparent}

/* ── Кнопка «оновити QR / нова поїздка» — збоку QR ───────── */
.qr-home{position:relative}
/* QR тепер великий — кнопка «оновити» переїхала в кут картки (збоку місця нема) */
.qr-refresh-btn{position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--stroke-strong);background:var(--glass-2);color:var(--yellow);cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.qr-refresh-btn .ic{width:20px;height:20px}
.qr-refresh-btn:active{transform:scale(.9)}

/* ── Нативний час усередині чіпа (надійний пікер) ────────── */
.time-chip{position:relative;overflow:hidden}
.time-native{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer}

/* ── Поїздки: перемикач Водій/Пасажир ───────────────────── */
.trips-seg{margin:2px 0 10px;display:inline-flex}
.trips-seg button{border:none;background:none;color:var(--muted);font-weight:800;font-size:14px;
  padding:9px 16px;border-radius:11px;cursor:pointer}
.trips-seg button.on{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414}

/* ── Блок 4: фільтри «Мої поїздки» ───────────────────────── */
.trips-filters{display:flex;gap:6px;overflow-x:auto;margin:2px -16px 10px;padding:2px 16px;scrollbar-width:none}
.trips-filters::-webkit-scrollbar{display:none}
.trips-filters button{flex:0 0 auto;border:1px solid var(--stroke);background:var(--glass);
  color:var(--muted);font-weight:800;font-size:13px;padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.trips-filters button.on{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;border-color:transparent}
.tf-badge{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:#ef4444;color:#fff;font-size:11px;line-height:18px;text-align:center}
.tag-plan{background:rgba(34,197,94,.16);color:#22c55e}
.tag-skip{background:rgba(148,163,184,.16);color:var(--muted)}
.tag-warn{background:rgba(239,68,68,.14);color:#ef4444}
.tag-wait{background:rgba(255,212,0,.16);color:var(--yellow)}
.unconf-why{font-size:12px;color:var(--muted);margin-top:4px}
.unconf-gps{font-size:12px;margin-top:4px;padding:6px 8px;border-radius:10px;background:rgba(255,212,0,.08)}
.unconf-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
/* інфографіка поїздки */
.route-svg{width:100%;height:auto;border-radius:14px;background:#1b1e26;display:block;margin:8px 0}
.route-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-bottom:6px}
.route-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.route-person{padding:8px 0;border-top:1px solid var(--stroke);font-size:13px}
.route-person b{font-size:14px}

/* ── Авто: активне (галочка) ────────────────────────────── */
.car-row{cursor:pointer}
.car-row.active{background:var(--yellow-soft);border-color:rgba(255,212,0,.34)}
.car-badge{font-size:11px;font-weight:800;color:var(--yellow);margin-left:6px}
/* flex:1 — інакше галочка «скакала» по горизонталі залежно від довжини назви */
.car-row .car-info{flex:1;min-width:0}
.car-row .car-check,.car-row .car-ico-btn,.car-row .chip-del{margin-left:6px}
.car-ico-btn{width:34px;height:34px;flex:0 0 auto;border-radius:10px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);color:var(--yellow);cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.car-ico-btn .ic{width:17px;height:17px}
/* тримає місце кнопок у рядках без них — щоб галочка не зсувалась */
.car-row .car-spacer{visibility:hidden;pointer-events:none}
.car-check{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--stroke-strong);color:transparent;font-weight:900}
.car-check.on{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));border-color:transparent;color:#141414}

/* ── «Поставити точку на карті»: центральний пін + бар ───── */
.center-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:9;pointer-events:none;
  color:var(--yellow)}
.center-pin .ic{width:44px;height:44px;stroke-width:2.2;fill:rgba(20,22,30,.92);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
.pick-bar{position:absolute;left:12px;right:12px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:10;
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:20px}
.pick-bar[hidden]{display:none}
.pick-info{flex:1;min-width:0;display:flex;flex-direction:column}
.pick-info b{font-size:15px}
.pick-bar .btn{padding:12px 16px;flex:0 0 auto}
.pick-bar .btn.ghost{width:46px;padding:12px 0}
.pick-map-opt{background:var(--yellow-soft)!important;border-color:rgba(255,212,0,.34)!important}

/* ── Іконки в рядках списків (замість емодзі) ───────────── */
.li-ic{width:18px;height:18px;color:var(--yellow);vertical-align:-.24em;margin-right:2px;flex:0 0 auto}
.u-meta .li-ic{width:14px;height:14px;vertical-align:-.18em}

/* ── Обраний пін пасажира ───────────────────────────────── */
.map-pin.sel{background:var(--yellow);color:#141414;border-color:#fff;
  box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(255,212,0,.35),0 4px 12px rgba(0,0,0,.5)}

/* ── План маршруту (зупинки) у шторці водія ─────────────── */
.trip-plan{margin-top:8px}
.tp-head{display:flex;align-items:baseline;justify-content:space-between;margin:2px 4px 8px}
.tp-head b{font-size:15px}
.tp-eta{color:var(--yellow);font-weight:800;font-size:13px}
.tp-stops{margin-bottom:10px}
.tp-stop{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:14px;margin-bottom:7px;
  background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
.tp-num{width:24px;height:24px;flex:0 0 auto;border-radius:7px;background:var(--yellow);color:#141414;
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.tp-who{flex:1;min-width:0;font-weight:700;font-size:14px}
.tp-addr{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-move{width:26px;height:26px;flex:0 0 auto;border:1px solid var(--stroke);border-radius:8px;
  background:var(--glass-2);color:var(--yellow);cursor:pointer;font-size:11px;padding:0}
.tp-rm{width:26px;height:26px;flex:0 0 auto;border:1px solid rgba(255,107,107,.36);border-radius:8px;
  background:rgba(255,107,107,.14);color:var(--danger);cursor:pointer;font-size:13px;padding:0}

/* ── Навігатор (панель над картою) ──────────────────────── */
.nav-panel{position:absolute;left:12px;right:12px;bottom:calc(30px + env(safe-area-inset-bottom));z-index:11;
  border-radius:24px;padding:16px}
.nav-panel[hidden]{display:none}
.nav-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.nav-arrow{width:52px;height:52px;flex:0 0 auto;border-radius:15px;background:var(--yellow-soft);
  border:1px solid rgba(255,212,0,.4);display:flex;align-items:center;justify-content:center}
.nav-arrow .ic{width:28px;height:28px;color:var(--yellow)}
.nav-d1{font-size:17px;font-weight:800;letter-spacing:-.01em}
.nav-d2{color:var(--muted);font-size:13.5px;margin-top:1px}
.nav-who-row{display:flex;align-items:baseline;justify-content:space-between;margin:4px 2px 12px}
.nav-who{font-weight:800;font-size:14px}
.nav-meta{color:var(--yellow);font-weight:800;font-size:14px}
.nav-btns{display:flex;gap:8px}
/* три кнопки на вузькому телефоні: без обрізаного «Завершит» */
.nav-btns .btn{flex:1 1 0;min-width:0;padding:13px 6px;font-size:14px;white-space:nowrap}
.nav-btns .btn .ic{width:18px;height:18px}
.nav-contacts{margin:0 0 10px}

/* ── Аватар на профілі + вибір ──────────────────────────── */
.greeting-row{display:flex;align-items:center;gap:12px;padding:4px 4px 2px}
.avatar-btn{flex:0 0 auto;width:54px;height:54px;border-radius:50%;border:2px solid var(--stroke-strong);
  background:none;padding:0;cursor:pointer;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.avatar-btn:active{transform:scale(.94)}
.av-face{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:26px;border-radius:50%}
.avatar-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:12px;max-height:52vh;overflow-y:auto;padding:5px;overscroll-behavior:contain}
.av-opt{width:100%;aspect-ratio:1/1;border-radius:50%;border:2px solid transparent;background:none;padding:0;cursor:pointer;overflow:hidden}
.av-opt.on{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,212,0,.25)}
.av-opt .av-face{font-size:24px}
.av-cat svg{display:block}
.av-opt{position:relative;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.av-opt.locked .av-face{filter:grayscale(1) brightness(.55);opacity:.7}
.av-lock{position:absolute;right:-2px;bottom:-2px;font-size:15px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.badge-dot .av-face{width:100%;height:100%}
.badge-dot.locked .av-face{filter:grayscale(1) brightness(.6);opacity:.65}
#bm-emoji .av-face{width:96px;height:96px;margin:auto}

/* ── Досягнення: різнокольорові кружечки + сторінка ─────── */
.badge-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:10px}
.badge-dot{aspect-ratio:1/1;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:var(--glass-2);box-shadow:0 6px 16px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s}
.badge-dot:active{transform:scale(.9)}
.bd-emoji{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.badge-dot.locked{background:rgba(255,255,255,.05);opacity:.5}
.badge-dot.locked .bd-emoji{filter:grayscale(1);opacity:.6}
/* сторінка досягнення: місце під картинку + опис */
.bm-art{width:120px;height:120px;margin:8px auto 14px;border-radius:26px;border:1.5px solid var(--stroke-strong);
  display:flex;align-items:center;justify-content:center}
.bm-art.locked{filter:grayscale(.7);opacity:.6}
.bm-emoji{font-size:56px}
.bm-title{text-align:center;font-size:19px;font-weight:800;letter-spacing:-.01em}
.bm-desc{text-align:center;font-size:14px;margin:6px 4px 10px;line-height:1.4}
.bm-status{text-align:center;margin-bottom:6px}
.bm-earned{color:#22C55E;font-weight:800}
.bm-locked{color:var(--muted);font-weight:700;font-size:13px}

/* ── Закріплення місць (шпилька) у пікері ───────────────── */
.picker-list li{position:relative}
.picker-list li.pinned{background:var(--yellow-soft);border-color:rgba(255,212,0,.3)}
.pin-btn{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);color:var(--muted-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
.pin-btn .ic{width:17px;height:17px}
.pin-btn.on{color:var(--yellow);border-color:rgba(255,212,0,.5);background:var(--yellow-soft)}

/* ── «Повернути» нещодавно прибраних ────────────────────── */
.restore-title{margin:14px 4px 6px;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pax-list li.removed{opacity:.75}
.chip-restore{background:var(--glass-2);border:1px solid var(--stroke-strong);color:var(--yellow);
  border-radius:11px;padding:7px 12px;font-weight:800;cursor:pointer;font-size:13px}

/* ── Стрілки на краях карти до колег поза екраном ───────── */
.edge-arrows{position:absolute;inset:0;z-index:7;pointer-events:none}
.edge-arrow{position:absolute;color:var(--yellow);font-size:22px;line-height:1;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}

@media (prefers-reduced-motion:reduce){
  body::before{animation:none}
  .view{animation:none}
  .paw-arm{display:none}
  .paw-fx.go .paw-coin,.paw-fx.go .paw-delta{animation:none;opacity:1}
  .glass::after,#role-seg.glass::after,.btn.primary::after,.profile-btn::after,
  .seg button.on,.map-sheet.role-enter,.map-pin{animation:none!important}
}

/* Автопідказка ростера на екрані реєстрації */
.reg-suggest{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.reg-sug-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  text-align:left;padding:10px 12px;border-radius:14px;background:var(--glass);
  border:1px solid var(--stroke);color:inherit;cursor:pointer;font:inherit;width:100%}
.reg-sug-item:hover,.reg-sug-item:active{background:var(--yellow-soft);border-color:var(--stroke-strong)}
.reg-sug-item.claimed{opacity:.45;cursor:not-allowed}

/* Коригування балансу й журнал у модалці адміна */
.adm-adjust{display:flex;flex-direction:column;gap:6px;margin:6px 0;padding:10px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke)}
.adm-ledger{margin:4px 0 8px}
.adm-ledger summary{cursor:pointer;color:var(--yellow);font-size:.9em}
.adm-ledger .pax-list li{display:flex;justify-content:space-between;gap:8px;align-items:baseline}

/* Шкала прогресу в модалці досягнення */
.bm-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:8px 0}
.bm-bar-fill{height:100%;border-radius:99px;transition:width .4s ease}

/* Нижні кнопки профілю + FAQ / теми для розмови / вибір навігації */
.foot-links{display:flex;gap:8px;margin-top:10px}
.foot-link{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 10px;border-radius:14px;background:var(--glass);border:1px solid var(--stroke);
  color:inherit;font:inherit;font-size:.9em;cursor:pointer}
.foot-link:active{background:var(--yellow-soft)}
.foot-link .ic{width:18px;height:18px;color:var(--yellow)}
.scroll-card{max-height:78vh;overflow-y:auto}
.faq-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.faq-item{background:var(--glass);border:1px solid var(--stroke);border-radius:14px;padding:10px 12px}
.faq-item summary{cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] summary{color:var(--yellow)}
.faq-a{margin-top:8px;color:var(--muted,#aab);font-size:.92em;line-height:1.45}
.talk-card{margin:10px 0;padding:16px;border-radius:16px;background:var(--yellow-soft);
  border:1px solid var(--stroke);font-size:1.05em;line-height:1.4;min-height:64px;
  display:flex;align-items:center}
a.btn.block{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:8px}

/* Readable controls without losing the existing frosted-glass style. */
.small,.qr-home-sub,.qr-home-tap,.history .h-pax{font-size:14px;line-height:1.5}
.route-lbl{font-size:12px;letter-spacing:.04em}
.mini-link,.back,.x,.pin-btn,.car-ico-btn,.chip-del,.chip-add,.chip-restore{min-height:44px}
.x,.pin-btn,.car-ico-btn,.chip-del{min-width:44px}
.sc-toggle{min-height:32px}
.sc-day{min-height:44px}
.sc-days{flex-wrap:wrap}
.sc-day{flex:1 0 36px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
button:disabled{opacity:.55;cursor:wait}
select{width:100%;min-height:48px;padding:10px 12px;border-radius:14px;
  border:1px solid var(--stroke-strong);background:#22242d;color:var(--ink);font:inherit;font-size:16px}
.map-sheet{max-height:calc(100svh - 100px);overflow-y:auto}
.pax-list .sc-row{display:grid;gap:8px;justify-content:start}
.sc-row .car-info{grid-column:1 / -1;width:100%;min-width:0}
.pax-list .sc-row{grid-template-columns:repeat(3,minmax(44px,1fr))}
.sc-row .sc-toggle,.sc-row .car-ico-btn,.sc-row .chip-del{margin-left:0;justify-self:start}
.sc-row.off{opacity:.8}
@media(max-width:360px){
  .sc-route{flex-wrap:wrap}
  .sc-route .route-col{flex:1 0 100%}
  .sc-route .route-swap{margin:4px auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── Плавна прокрутка профілю ──────────────────────────────
   Розмиття фону (backdrop-filter) під кожною карткою перераховується на
   кожному кадрі прокрутки, а під ним ще й рухається фон — на телефонах це
   давало «підвисання». На сторінці профілю картки роблять щільним тлом без
   розмиття (вигляд майже той самий), фон стоїть на місці, а прокрутка не
   передається Telegram-у як жест «згорнути». */
.page.scroll{overscroll-behavior:contain}
#page-profile .card,#page-profile .tile,#page-profile .qr-home,#page-profile .glass,
#page-profile .coins-pill,#page-profile .profile-more{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#page-profile .card,#page-profile .tile,#page-profile .qr-home,#page-profile .glass,#page-profile .profile-more{
  background-color:rgba(26,28,38,.94)}
/* Лише декоративний фон. Раніше тут було ще «.shell.on-profile ~ *» — під нього
   потрапляли розділи й шторки: їхня поява застигала на прозорому першому кадрі,
   і «Мої авто», «Поїздки», «Статистика» з профілю відкривались невидимими. */
body:has(.shell.on-profile)::before{animation-play-state:paused}
#page-profile .card,#page-profile .tile{contain:layout paint}

/* ══ Адмінка: плитки й розділи ══════════════════════════════ */
.adm-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 14px}
.adm-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:92px;
  padding:12px 12px 10px;border-radius:16px;border:1px solid var(--stroke-strong);background:rgba(255,255,255,.05);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.adm-tile:active{transform:scale(.98)}
.adm-tile-ic{font-size:22px;line-height:1}
.adm-tile b{font-size:15px}
.adm-tile small{color:var(--muted);font-size:12px;line-height:1.3}
.adm-badge{position:absolute;top:8px;right:8px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  background:#EF4444;color:#fff;font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.adm-badge[hidden]{display:none}
.adm-sec[hidden]{display:none}
.adm-back{margin:2px 0 4px}
.adm-sec-title{margin:4px 2px 10px;font-size:20px}
.adm-note{margin:4px 6px 12px}
/* «З» і «По» більше не налазять одне на одне: поля дати можуть звужуватись */
.adm-dates{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.adm-dates[hidden]{display:none!important}
.adm-dates label{min-width:0}
.adm-dates input[type=date]{width:100%;min-width:0;box-sizing:border-box}
@media (max-width:340px){.adm-dates{grid-template-columns:1fr}}
.adm-totals,.adm-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.adm-totals div,.adm-stat-grid div{padding:10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--stroke)}
.adm-totals b,.adm-stat-grid b{display:block;font-size:20px;color:var(--yellow)}
.adm-totals small,.adm-stat-grid small{color:var(--muted);font-size:12px}
.month-list li.month-row{display:block}
.mr-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mr-bal{font-weight:900;color:var(--yellow);white-space:nowrap}
.mr-actions{display:flex;gap:8px;margin-top:8px}
.mr-deduct{display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:6px;margin-top:8px}
.mr-deduct[hidden]{display:none}
.mr-deduct input{margin:0;min-width:0}
.trips-list li{align-items:flex-start;gap:8px;font-size:14px;line-height:1.4}
.tag-viber{background:rgba(124,58,237,.25);color:#D8B4FE}
.stat-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.stat-seg button{min-height:40px;border-radius:10px;border:1px solid var(--stroke-strong);background:rgba(255,255,255,.04);
  color:var(--muted);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}
.stat-seg button.on{background:var(--yellow-soft);color:var(--ink);border-color:rgba(255,212,0,.5)}
.problem-text{white-space:pre-wrap;margin:4px 0;line-height:1.45}
.pin-gate input{font-size:22px;letter-spacing:.3em;text-align:center}

/* Інструкція: заголовки розділів */
.faq-sec { margin: 16px 2px 6px; font-weight: 800; font-size: 15px; }
.faq-sec:first-child { margin-top: 6px; }
/* Про що поговорити: категорія й лічильник */
.talk-cat { margin: 4px 0 -4px; font-size: 13px; font-weight: 700; opacity: .75; }
.talk-count { text-align: center; margin: -4px 0 8px; }
#trips-export { margin-top: 12px; }
#view-pending .problem-link { display: block; margin: 14px auto 0; }

/* Котики на карті: аватарка в кружечку з кольоровою обвідкою ролі */
.map-pin.pin-cat{width:40px;height:40px;padding:0;overflow:visible;background:#1b1e26}
.map-pin.pin-cat .av-face{width:100%;height:100%;border-radius:50%;overflow:hidden;display:block}
.map-pin.pin-cat .av-face svg{display:block}
.map-pin.pin-me.pin-cat{border:2.5px solid var(--yellow)}
.map-pin.pin-live.pin-cat::before{content:"🚕";position:absolute;right:-8px;bottom:-6px;font-size:15px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.map-pin.sel.pin-cat{background:#1b1e26;border-color:var(--yellow);border-width:3px}
.map-pin.sel.pin-cat::before{content:"✓";position:absolute;left:-5px;top:-5px;width:17px;height:17px;border-radius:50%;
  background:var(--yellow);color:#141414;font-size:11px;font-weight:900;line-height:17px;text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45)}
.pref-note small{opacity:.8}

/* ── Шторка водія: мінімально, легко згорнути ── */
.map-sheet{max-height:46svh}
.map-sheet .as-grip{position:sticky;top:-4px;z-index:5}
.map-sheet .as-grip::before{content:"";position:absolute;left:-70px;right:-70px;top:-12px;bottom:-12px}
.route-chip{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 10px;padding:7px 11px;border-radius:14px;
  border:1px solid rgba(255,212,0,.45);background:rgba(255,212,0,.09);color:#fff;font:700 13px "Manrope",sans-serif;
  text-align:left;cursor:pointer}
.route-chip[hidden]{display:none}
/* Котики вибраних пасажирів — окремі кружечки з проміжком (не внахльост),
   усі; якщо не влазять — гортаються вбік. */
.rc-cats{display:flex;flex:0 1 auto;gap:5px;max-width:58%;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;padding:1px}
.rc-cats::-webkit-scrollbar{display:none}
.rc-cats .av-face{flex:0 0 26px;width:26px;height:26px;border-radius:50%;overflow:hidden;display:block;border:2px solid #1b1e26}
.rc-cats .av-face svg{display:block}
.rc-txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-open{flex:0 0 auto;color:var(--yellow);font-size:12px;font-weight:800}
.map-sheet.has-route .sheet-intent{display:none}
.tp-head{align-items:center}
.tp-collapse{margin-left:8px;width:32px;height:28px;border-radius:9px;border:1px solid var(--stroke);
  background:transparent;color:#fff;font-size:18px;line-height:1;cursor:pointer}
.tp-legend{display:flex;gap:12px;margin:0 4px 8px;font-size:11px;color:var(--muted)}
.tp-legend span::before{content:"";display:inline-block;width:14px;height:4px;border-radius:2px;margin-right:5px;vertical-align:middle}
.lg-pick::before{background:#FFD400}.lg-drop::before{background:#38BDF8}.lg-final::before{background:#F8FAFC}
.tp-stop.drop{border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.08)}
.tp-num.drop{background:#38BDF8;color:#0b1220}
.map-pin.pin-drop{width:28px;height:28px;font-size:13px;cursor:default;background:#38BDF8;color:#0b1220;border:2px solid #fff}

/* ── «Куди їй треба» (довге натискання на людину) ── */
.ride-peek{position:absolute;left:12px;right:12px;top:calc(78px + env(safe-area-inset-top));z-index:12;
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;
  background:rgba(20,22,28,.95);border:1px solid rgba(56,189,248,.55);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ride-peek[hidden]{display:none}
.ride-peek>.av-face{width:42px;height:42px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:block}
.ride-peek>.av-face svg{display:block}
.rp-body{flex:1;min-width:0;font-size:13px}
.rp-body b{font-size:14px}
.rp-route{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.rp-to{color:#38BDF8;font-weight:800}
.rp-meta{color:var(--muted);font-size:12px;margin-top:1px}
.rp-act{flex:0 0 auto;padding:8px 11px;border-radius:12px;border:none;background:var(--yellow);color:#141414;font:800 12px "Manrope",sans-serif;cursor:pointer}
.rp-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--stroke);background:transparent;color:#fff;cursor:pointer}

/* ── Мої поїздки: три вкладки на вузькому телефоні + історія до застосунку ── */
.hist-summary{align-items:flex-start;line-height:1.5}
.hist-summary b{color:var(--yellow)}
/* ── Розклад: пропуск найближчої поїздки, минула разова ── */
.sc-row .sc-skip{margin-top:6px;padding:6px 10px;font-size:12px}
.sc-row.expired{opacity:.55}
.sc-row .sc-skipped{color:var(--yellow);font-weight:700}
/* ── Адмінка: закритий доступ, перебудова історії ── */
.tag.tag-off{background:rgba(148,163,184,.25);color:#CBD5E1;margin-left:6px}
.adm-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);margin:8px 0}
.adm-check input{width:auto;margin-top:2px;flex:0 0 auto}
#edit-access{margin-top:8px}
/* ── Зупинка маршруту — кнопка «куди людині треба»; дії в історії поїздок ── */
button.tp-who{background:none;border:none;color:inherit;text-align:left;font:inherit;font-weight:700;font-size:14px;padding:0;cursor:pointer}
.trip-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto}
/* ── Адмінка: популярні точки ── */
.spot-row{align-items:flex-start}
.spot-row .spot-name{margin-top:6px;width:100%}
/* ── Постійні поїздки ── */
.sc-row{flex-wrap:wrap}
.sc-members{flex:1 0 100%;margin-top:6px}
.sc-members-toggle{text-align:left;padding:6px 0}
.sc-members-body{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sc-member{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.04)}
.sc-member small{display:block;color:var(--muted);font-size:12px}
.sc-member-add input{width:100%;margin-top:6px}
.sc-co,.sc-found{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sc-private{display:flex;gap:10px;align-items:flex-start;margin:10px 0}
.sc-private input{width:auto;margin-top:3px}
.sc-private small{display:block;color:var(--muted);font-size:12px;font-weight:400}
/* ── Покрокове навчання ── */
.tour-layer{position:fixed;inset:0;z-index:9000}
.tour-hole{position:fixed;border-radius:16px;box-shadow:0 0 0 9999px rgba(3,4,8,.74);border:2px solid var(--yellow);transition:all .25s ease;pointer-events:none}
.tour-card{position:fixed;left:16px;right:16px;max-width:460px;margin:0 auto;padding:16px 18px;border-radius:18px;
  background:#15171f;border:1px solid rgba(255,212,0,.45);box-shadow:0 18px 40px rgba(0,0,0,.55)}
.tour-step{font-size:12px;color:var(--muted);margin-bottom:4px}
.tour-title{display:block;font-size:17px;margin-bottom:6px}
.tour-text{margin:0 0 12px;font-size:15px;line-height:1.45;color:#e8e8ee}
.tour-btns{display:flex;gap:10px;justify-content:flex-end}
.tour-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin:14px 0 4px}
@media (prefers-reduced-motion:reduce){.tour-hole{transition:none}}
.sc-row .sc-members,.sc-row .trip-acts{grid-column:1/-1}
.sc-row .trip-acts{justify-content:flex-start;margin-top:6px}
.trip-acts a.chip-add,.pax-list a.chip-add{text-decoration:none}

/* «Службове авто» в «Моїх авто» — ключ до адмінки, не машина */
.car-row.car-key{cursor:default;border:1px dashed rgba(255,212,0,.35)}

/* ══ Новорічна гірлянда (23.12–10.01) — лише прикраса ═════════ */
.garland{position:absolute;top:env(safe-area-inset-top);left:0;right:0;height:20px;z-index:7;
  pointer-events:none;overflow:hidden;opacity:.72}
.garland svg{display:block}
.garland .bulb{fill:#EF4444;color:#EF4444;filter:drop-shadow(0 0 2.5px currentColor);
  animation:garland-blink 3.2s steps(1) infinite}
.garland .bulb.b1{animation-delay:-.8s}
.garland .bulb.b2{animation-delay:-1.6s}
.garland .bulb.b3{animation-delay:-2.4s}
@keyframes garland-blink{
  0%{fill:#EF4444;color:#EF4444}25%{fill:#FACC15;color:#FACC15}
  50%{fill:#22C55E;color:#22C55E}75%{fill:#3B82F6;color:#3B82F6}}
@media (prefers-reduced-motion:reduce){.garland .bulb{animation:none}}

/* «З ким ви їздите» у статистиці */
.co-riders li{display:flex;align-items:center;gap:10px}
.co-riders .co-av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:block}
.co-riders .co-av .av-face{width:100%;height:100%;display:block}
.co-riders .co-main{flex:1;min-width:0}
.rp-map{flex:0 0 auto;width:34px;height:30px;border-radius:12px;border:1px solid var(--stroke);background:transparent;cursor:pointer;font-size:15px}
.co-riders .co-sched{display:block;padding:4px 0 10px 48px}
.co-sched-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;font-size:13px}

/* Блок 3: автопошук у формі розкладу */
.sc-match{margin:10px 0;padding:10px 12px;border-radius:14px;background:var(--glass)}
.sc-match summary{cursor:pointer;font-weight:600}
.sc-match-hint{display:block;color:var(--muted);font-size:12px;margin:6px 0}
.sc-match-row{display:flex;gap:8px;flex-wrap:wrap}
.sc-match-row label{flex:1 1 90px;min-width:0}
.sc-daydest{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.sc-daydest-item{display:flex;align-items:center;gap:6px;font-size:13px}
.sc-daydest-item input{flex:1;min-width:0}

/* Поле дати й часу: на iPhone/Android воно мало власну ширину й вилазило за картку. */
input[type="datetime-local"],input[type="date"],input[type="time"]:not(.time-native){
  display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;text-align:left;min-height:48px}
input[type="datetime-local"]::-webkit-date-and-time-value{text-align:left}
#trip-qr{cursor:zoom-in}
/* «Підвозив»: фільтр з пасажирами / без / усі */
.pax-filter{display:flex;gap:6px;flex-wrap:wrap;padding:0 0 8px!important;background:none!important;border:none!important}
.pax-filter button{flex:1 1 auto;border:1px solid var(--stroke);background:var(--glass);color:var(--muted);
  font-weight:800;font-size:13px;padding:8px 10px;border-radius:999px;cursor:pointer}
.pax-filter button span{opacity:.7;font-weight:700}
.pax-filter button.on{background:linear-gradient(135deg,var(--yellow),var(--yellow-2));color:#141414;border-color:transparent}
/* Пошук колег у поїздці: повний список — у власній прокрутці */
#search-list{max-height:52vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* «Мої Telegram-акаунти» у налаштуваннях */
.tg-links-row>span{flex:1;min-width:0}
.tg-links-row .pax-list{margin-top:8px}
.tg-phone{display:flex;gap:6px;margin-top:8px}
.tg-phone input{flex:1;min-width:0;margin:0}

/* ── Стрічка «Вам по дорозі»: рядок під телефон — ім'я в один рядок, коротка дія праворуч ── */
.feed-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.feed-row[data-open]{cursor:pointer}
.fr-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:#1b1e26}
.fr-av .av-face,.fr-av svg{width:100%;height:100%;display:block}
.fr-top{display:flex;align-items:center;gap:6px;min-width:0}
.fr-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.fr-meta .fr-near{margin:0 6px 0 0;vertical-align:0}
.fr-meta{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fr-part{font-size:11.5px;font-weight:700;color:#FBBF24;margin-top:2px}
.fr-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.chip-add.sm,.chip-del.sm{min-height:36px;padding:6px 11px;font-size:12.5px;white-space:nowrap}
.fr-contacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.fr-contact{font-size:12.5px;font-weight:800;color:var(--ink);text-decoration:none;padding:7px 10px;border-radius:10px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.07)}

/* ── Картка водія: карта лишається видимою — його маршрут і «заїде по вас» ── */
#ride-modal{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
#ride-modal .modal-card{box-shadow:0 -12px 40px rgba(0,0,0,.65)}
.rm-eta{font-size:13px;line-height:1.4;color:var(--ink);margin:8px 2px 0;min-height:18px}
.rm-eta b{color:var(--yellow)}
.map-pin.pin-pickup{width:30px;height:30px;font-size:12px;cursor:default;background:#fff;color:#141414;border:2.5px solid var(--yellow)}

/* ── Хто вас може забрати — яскраво з жовтим ореолом; решта — менші й прозоріші ── */
.map-pin.fit-best,.map-pin.fit-ok{box-shadow:0 0 0 7px rgba(255,212,0,.24),0 4px 12px rgba(0,0,0,.55)}
.map-pin.pin-cat.fit-far,.map-pin.fit-far{width:28px;height:28px;opacity:.38;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.rm-legend{display:flex;gap:14px;margin:6px 2px 2px;font-size:11.5px;color:var(--muted)}
.rm-legend span::before{content:"";display:inline-block;width:16px;height:0;margin-right:6px;vertical-align:middle}
.rm-legend .lg-with::before{border-top:4px solid #22C55E;border-radius:2px}
.rm-legend .lg-base::before{border-top:2px dashed rgba(248,250,252,.7)}

/* ── Котики й досягнення сіткою: БЕЗ aspect-ratio ──
   WebKit (Telegram на iPhone) у сітці з прокруткою рахує висоту рядка ще до ширини
   кружечка: рядки схлопувались, і котики налазили один на одного. Квадрат — через
   padding-bottom (відсоток від ширини), вміст — поверх нього. */
.avatar-grid{gap:14px;align-items:start;grid-auto-rows:auto}
.av-opt{aspect-ratio:auto;height:0;padding:0 0 calc(100% - 4px)}
.av-opt>.av-face{position:absolute;inset:0;width:100%;height:100%}
.badge-dot{aspect-ratio:auto;height:0;padding:0 0 100%;position:relative;display:block}
.badge-dot>.av-face,.badge-dot>.bd-emoji{position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center}
.av-opt>.av-lock{right:3px;bottom:3px;z-index:1}   /* замок усередині кружечка — не обрізається краєм */
/* адмінка: тестовий період */
.period-row .period-top{cursor:pointer}
.period-row .period-more{margin-top:8px}
.period-row .period-more .person-trips{margin:4px 0 8px}
/* реєстрація: список колег під прізвищем (з 2 літер), обрана людина, «створити новий акаунт» */
.reg-hint{margin:0 0 10px}
.reg-suggest{max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.reg-sug-note{margin:0 0 2px}
.reg-sug-new{display:block;width:100%;margin-top:2px;padding:11px 12px;border-radius:14px;cursor:pointer;
  background:none;border:1px dashed var(--stroke-strong);color:var(--yellow);font:inherit;font-size:14px;text-align:center}
.reg-picked{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin:8px 0 12px;
  border-radius:14px;background:var(--yellow-soft);border:1px solid var(--stroke-strong)}
.reg-picked[hidden]{display:none}
.reg-picked .mini-link{width:auto;margin:0;min-height:36px;flex:0 0 auto}
.reg-phone-hint{margin:8px 0 12px}
/* «Щось не працює?» / відгук: підказка, вкладення, прокрутка довгої форми */
.problem-card{max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pr-guide{margin:8px 0 2px;padding:12px 14px;border-radius:14px;background:var(--yellow-soft);
  border:1px solid rgba(255,212,0,.35);font-size:14px;line-height:1.45}
.pr-guide[hidden]{display:none}
.pr-guide ul{margin:6px 0 8px;padding-left:18px}
.pr-guide li{margin:2px 0}
.pr-guide p{margin:0;color:var(--muted)}
.pr-row .btn{flex:1 1 0;min-width:0;padding-left:8px;padding-right:8px;white-space:normal;line-height:1.2}
.pr-files{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-files:empty{display:none}
.pr-files li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--glass);
  border:1px solid var(--stroke);font-size:14px}
.pr-files li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-files li small{color:var(--muted);flex:0 0 auto}
.pr-files li button{flex:0 0 auto;background:none;border:none;color:var(--muted);font-size:18px;min-height:32px;cursor:pointer}
.pr-count{margin:2px 0 8px;min-height:1em}
/* навчання: «пальчик» натискає елемент (тик-тик) і кільце від дотику */
.tour-finger{position:fixed;z-index:9100;font-size:44px;line-height:1;pointer-events:none;
  transition:left .7s cubic-bezier(.3,.8,.3,1),top .7s cubic-bezier(.3,.8,.3,1);filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.tour-finger.tap{animation:finger-tap .42s ease}
@keyframes finger-tap{0%{transform:translateY(0) scale(1)}45%{transform:translateY(7px) scale(.86)}100%{transform:translateY(0) scale(1)}}
.tour-ripple{position:fixed;z-index:9090;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  border:3px solid var(--yellow);pointer-events:none;animation:tour-ripple .65s ease-out forwards}
@keyframes tour-ripple{from{transform:scale(.4);opacity:1}to{transform:scale(3.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.tour-finger{transition:none}.tour-finger.tap,.tour-ripple{animation:none}}