/* =========================================================
   ЛОВИ — DESIGN SYSTEM v2
   Calm, premium, responsive. Presentation layer only.
   ========================================================= */

:root {
  --lovi-accent: #ff5a36;
  --lovi-accent-strong: #e94725;
  --lovi-accent-soft: #fff0eb;
  --lovi-ink: #171a19;
  --lovi-ink-2: #2b302d;
  --lovi-bg: #f5f3ee;
  --lovi-surface: rgba(255,255,255,.91);
  --lovi-surface-solid: #ffffff;
  --lovi-soft: #efede7;
  --lovi-line: rgba(23,26,25,.10);
  --lovi-muted: #737873;
  --lovi-success: #2e8a62;
  --lovi-success-soft: #e8f5ef;
  --lovi-warning: #c88728;
  --lovi-danger: #c94d55;
  --lovi-shadow-1: 0 8px 26px rgba(23,26,25,.08);
  --lovi-shadow-2: 0 18px 50px rgba(23,26,25,.12);
  --lovi-shadow-3: 0 28px 80px rgba(23,26,25,.16);
  --lovi-radius-sm: 12px;
  --lovi-radius: 18px;
  --lovi-radius-lg: 26px;
  --lovi-nav-h: 76px;
  --lovi-gutter: clamp(14px, 2vw, 30px);
  --lovi-content: 980px;
}

body.dark {
  --lovi-accent: #ff704f;
  --lovi-accent-strong: #ff5a36;
  --lovi-accent-soft: #38221c;
  --lovi-ink: #f2f2ee;
  --lovi-ink-2: #d7d9d4;
  --lovi-bg: #0f1211;
  --lovi-surface: rgba(23,27,25,.92);
  --lovi-surface-solid: #171b19;
  --lovi-soft: #202522;
  --lovi-line: rgba(255,255,255,.09);
  --lovi-muted: #9da39e;
  --lovi-success: #62b58b;
  --lovi-success-soft: #183329;
  --lovi-warning: #d4a35d;
  --lovi-danger: #e27a82;
  --lovi-shadow-1: 0 8px 26px rgba(0,0,0,.24);
  --lovi-shadow-2: 0 18px 50px rgba(0,0,0,.34);
  --lovi-shadow-3: 0 28px 80px rgba(0,0,0,.46);
}

html, body { background: var(--lovi-bg); }
body { color: var(--lovi-ink); }

/* Bridge the old variables to the new palette without touching business CSS. */
body {
  --bg: var(--lovi-bg);
  --surface: var(--lovi-surface);
  --surface-solid: var(--lovi-surface-solid);
  --surface-soft: var(--lovi-soft);
  --text: var(--lovi-ink-2);
  --text-strong: var(--lovi-ink);
  --muted: var(--lovi-muted);
  --line: var(--lovi-line);
  --primary: var(--lovi-accent);
  --primary-dark: var(--lovi-accent-strong);
  --primary-soft: var(--lovi-accent-soft);
  --purple: var(--lovi-accent);
  --pink: var(--lovi-accent);
  --blue: #5574a8;
  --success: var(--lovi-success);
  --success-soft: var(--lovi-success-soft);
  --warning: var(--lovi-warning);
  --danger: var(--lovi-danger);
  --shadow-sm: var(--lovi-shadow-1);
  --shadow: var(--lovi-shadow-2);
  --shadow-lg: var(--lovi-shadow-3);
}

/* Typography scales with the viewport rather than jumping at one breakpoint. */
html { font-size: clamp(15px, calc(14px + .12vw), 17px); }
body, button, input, textarea, select { font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Arial, sans-serif; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

button, input, textarea, select { min-height: 44px; }
button { transition: transform .16s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease; }
button:active { transform: scale(.975); }

.lovi-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.lovi-icon-injected { pointer-events: none; }

/* ---------- BRAND / TOP BAR ---------- */
.topbar {
  top: max(12px, env(safe-area-inset-top));
  left: var(--lovi-gutter);
  right: var(--lovi-gutter);
  gap: 10px;
  max-width: 1560px;
  margin-inline: auto;
  padding-top: 0;
}
.brand {
  height: 52px;
  min-width: 0;
  padding: 0 15px 0 10px;
  gap: 9px;
  border: 1px solid var(--lovi-line);
  border-radius: 17px;
  background: var(--lovi-surface);
  color: var(--lovi-ink);
  box-shadow: var(--lovi-shadow-1);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.brand:hover { transform: translateY(-1px); box-shadow: var(--lovi-shadow-2); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--lovi-ink); color: var(--lovi-bg);
  box-shadow: none;
}
.brand-mark .lovi-icon { width: 21px; height: 21px; }
.brand-name { font-size: 16px; font-weight: 850; letter-spacing: -.5px; }

.searchbox {
  height: 52px; border-radius: 17px; max-width: 720px;
  border: 1px solid var(--lovi-line); background: var(--lovi-surface);
  box-shadow: var(--lovi-shadow-1);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.search-icon { margin-left: 15px; color: var(--lovi-muted); display:grid; place-items:center; }
.search-icon .lovi-icon { width: 19px; height: 19px; }
.searchbox input { font-size: 15px; color: var(--lovi-ink); }
.searchbox button {
  height: 42px; min-height: 42px; margin-right: 5px; padding: 0 16px;
  border-radius: 13px; background: var(--lovi-ink); color: var(--lovi-bg);
}
.searchbox button:hover { background: var(--lovi-accent); color:#fff; }
.round-btn {
  width:52px; height:52px; flex:0 0 52px; border-radius:17px;
  border:1px solid var(--lovi-line); background:var(--lovi-surface); color:var(--lovi-ink);
  box-shadow:var(--lovi-shadow-1); backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.round-btn:hover { background:var(--lovi-accent-soft); color:var(--lovi-accent); }

/* ---------- HERO ---------- */
.hero-card {
  top: 102px; left: var(--lovi-gutter); width: min(430px, calc(100vw - 2 * var(--lovi-gutter)));
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: var(--lovi-radius-lg); background:var(--lovi-surface);
  border:1px solid var(--lovi-line); box-shadow:var(--lovi-shadow-3);
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
}
.hero-kicker { margin-bottom:13px; color:var(--lovi-accent); letter-spacing:1.5px; }
.hero-dot { background:var(--lovi-accent); box-shadow:0 0 0 5px var(--lovi-accent-soft); }
.hero-card h1 { font-size:clamp(26px, 2.25vw, 36px); line-height:1.02; letter-spacing:-1.55px; }
.hero-card h1 em { color:var(--lovi-accent); }
.hero-card p { font-size:14px; max-width:34em; margin:12px 0 19px; }
.hero-actions { gap:9px; }
.hero-primary, .hero-secondary { min-height:46px; border-radius:14px; font-size:13px; }
.hero-primary { background:var(--lovi-ink); box-shadow:none; }
.hero-primary:hover { background:var(--lovi-accent); box-shadow:0 10px 24px rgba(255,90,54,.22); }
.hero-secondary { background:var(--lovi-accent-soft); color:var(--lovi-accent); }
.hero-secondary:hover { background:var(--lovi-accent); color:#fff; }

/* ---------- MAP CONTROLS ---------- */
.floating-actions { right:var(--lovi-gutter); bottom:calc(var(--lovi-nav-h) + 34px); gap:8px; }
.map-action {
  width:auto; min-width:52px; height:52px; padding:0 13px; gap:8px;
  border-radius:16px; border:1px solid var(--lovi-line); background:var(--lovi-surface);
  color:var(--lovi-ink); box-shadow:var(--lovi-shadow-1);
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.map-action:hover { color:var(--lovi-accent); background:var(--lovi-surface-solid); transform:translateY(-1px); }
.map-action b { display:grid; place-items:center; font-size:0; }
.map-action b .lovi-icon { width:19px; height:19px; }
.map-action span { font-size:12px; font-weight:800; }

/* ---------- BOTTOM NAV ---------- */
.bottom-nav {
  left:50%; right:auto; bottom:max(10px, env(safe-area-inset-bottom));
  width:min(620px, calc(100vw - 28px)); height:var(--lovi-nav-h); min-height:var(--lovi-nav-h);
  transform:translateX(-50%); padding:7px;
  border:1px solid var(--lovi-line); border-radius:22px;
  background:var(--lovi-surface); box-shadow:var(--lovi-shadow-3);
  backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%);
}
.bottom-nav button { height:62px; min-height:62px; border-radius:17px; color:var(--lovi-muted); gap:3px; }
.bottom-nav button:hover { color:var(--lovi-ink); background:var(--lovi-soft); }
.bottom-nav button.active { background:var(--lovi-ink); color:var(--lovi-bg); box-shadow:none; }
.bottom-nav button span { font-size:0; display:grid; place-items:center; }
.bottom-nav button span .lovi-icon { width:21px; height:21px; }
.bottom-nav button small { font-size:9px; letter-spacing:.15px; }
.bottom-nav .create-btn span { width:48px; height:48px; margin-top:-10px; border-radius:15px; background:var(--lovi-accent); color:#fff; box-shadow:0 9px 22px rgba(255,90,54,.28); }
.bottom-nav .create-btn:hover span { background:var(--lovi-accent-strong); transform:translateY(-2px); }
.bottom-nav .create-btn.active { background:transparent; color:var(--lovi-accent); }
.bottom-nav .create-btn.active span { background:var(--lovi-ink); color:var(--lovi-bg); }

/* ---------- SHEETS / PAGES ---------- */
body[class*="route-"] #sheet:not(.hidden) {
  padding: clamp(92px, 8vh, 124px) var(--lovi-gutter) calc(var(--lovi-nav-h) + 30px);
  background:var(--lovi-bg);
}
body[class*="route-"] #sheet:not(.hidden) > *,
body.route-create #createM .modalbox,
body.route-profile #prof .modalbox { max-width:var(--lovi-content); }
.app-section-sheet { width:min(var(--lovi-content),100%); }
.app-section-head { margin-bottom:18px; }
.app-section-head h2, body[class*="route-"] #sheet h2 { font-size:clamp(28px,3vw,40px); letter-spacing:-1.2px; }
.eyebrow { color:var(--lovi-accent); letter-spacing:1.4px; font-weight:900; }
.sheet-note { font-size:13px; color:var(--lovi-muted); }

.job-card, .card, .location-card, .profile-settings-card, .profile-online-card, .profile-hero {
  border-color:var(--lovi-line); background:var(--lovi-surface-solid); box-shadow:var(--lovi-shadow-1);
}
.job-card { border-radius:20px; padding:16px; }
.job-card:hover { border-color:rgba(255,90,54,.28); box-shadow:var(--lovi-shadow-2); transform:translateY(-2px); }
.job-title { font-size:16px; letter-spacing:-.25px; }
.price { color:var(--lovi-accent); font-size:18px; }
.chip { border-color:var(--lovi-line); background:var(--lovi-soft); color:var(--lovi-muted); border-radius:10px; }

.orders-section-nav { gap:10px; }
.orders-section-tab { border-color:var(--lovi-line); background:var(--lovi-surface-solid); border-radius:18px; }
.orders-section-tab.active { background:var(--lovi-ink); border-color:var(--lovi-ink); color:var(--lovi-bg); }
.orders-section-tab.active small { color:rgba(245,243,238,.65); }
.orders-section-icon, .orders-empty-icon { background:var(--lovi-soft); color:var(--lovi-accent); }
.orders-section-tab.active .orders-section-icon { background:var(--lovi-accent); color:#fff; }
.orders-empty { background:var(--lovi-surface-solid); }

/* ---------- MODALS / DIALOGS ---------- */
.modalbox, .app-dialog-card {
  border:1px solid var(--lovi-line); border-radius:var(--lovi-radius-lg);
  background:var(--lovi-surface-solid); color:var(--lovi-ink); box-shadow:var(--lovi-shadow-3);
}
.modalhead { padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid var(--lovi-line); }
.close, .app-dialog-close { border:1px solid var(--lovi-line); background:var(--lovi-soft); color:var(--lovi-muted); }
.close:hover, .app-dialog-close:hover { color:var(--lovi-accent); background:var(--lovi-accent-soft); }
.field, .app-dialog-input { border-color:var(--lovi-line); background:var(--lovi-bg); color:var(--lovi-ink); border-radius:14px; }
.field:focus, .app-dialog-input:focus { border-color:var(--lovi-accent); box-shadow:0 0 0 3px rgba(255,90,54,.13); }
.primary { background:var(--lovi-ink); border-color:var(--lovi-ink); color:var(--lovi-bg); }
.primary:hover { background:var(--lovi-accent); border-color:var(--lovi-accent); }
.secondary { background:var(--lovi-accent-soft); border-color:transparent; color:var(--lovi-accent); }
.secondary:hover { background:var(--lovi-accent); color:#fff; }
.ghost { background:transparent; border-color:var(--lovi-line); color:var(--lovi-ink); }
.ghost:hover { background:var(--lovi-soft); }
.app-dialog-backdrop { background:rgba(8,10,9,.60); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.app-dialog-icon { background:var(--lovi-ink); box-shadow:none; }
.app-dialog-eyebrow { color:var(--lovi-accent); }
.app-star.active { color:var(--lovi-accent); background:var(--lovi-accent-soft); }

/* ---------- PROFILE ---------- */
.profile-hero-modern { padding:18px; border-radius:20px; }
.avatar-placeholder { background:var(--lovi-ink); color:var(--lovi-bg); }
.profile-status.online { color:var(--lovi-success); }
.profile-status.online i { background:var(--lovi-success); box-shadow:0 0 0 4px var(--lovi-success-soft); }
.profile-online-card.is-online { border-color:rgba(46,138,98,.25); }
.online-switch.on { background:var(--lovi-success); }
.profile-setting-row { min-height:68px; }
.setting-icon { background:var(--lovi-soft); color:var(--lovi-accent); }
.setting-arrow { font-size:0; display:grid; place-items:center; }
.setting-arrow::after { content:""; width:8px; height:8px; border-top:1.8px solid currentColor; border-right:1.8px solid currentColor; transform:rotate(45deg); }
.logout-button { background:transparent; border-color:rgba(201,77,85,.25); }

/* ---------- OFFER BANNER ---------- */
.job-offer-banner { background:var(--lovi-surface-solid)!important; border-color:var(--lovi-line)!important; box-shadow:var(--lovi-shadow-3)!important; }
.job-offer-banner-title { letter-spacing:-.25px; }

/* ---------- SAFE AREA + TOUCH ---------- */
.safe-top { padding-top:0; }
.safe-bottom { padding-bottom:0; }
@supports (padding: max(0px)) {
  .bottom-nav { bottom:max(10px, env(safe-area-inset-bottom)); }
  body[class*="route-"] #sheet:not(.hidden), body.route-create #createM, body.route-profile #prof { padding-bottom:calc(var(--lovi-nav-h) + 24px + env(safe-area-inset-bottom)); }
}

/* ---------- TABLET ---------- */
@media (min-width:651px) and (max-width:1100px) {
  .hero-card { width:min(420px, calc(100vw - 36px)); }
  .bottom-nav { width:min(600px, calc(100vw - 36px)); }
  body[class*="route-"] #sheet:not(.hidden) { padding-inline:24px; }
}

/* ---------- PHONE: iPhone + Android ---------- */
@media (max-width:650px) {
  :root { --lovi-nav-h:72px; --lovi-gutter:10px; }
  body { min-width:320px; }
  .topbar { top:max(7px, env(safe-area-inset-top)); gap:7px; }
  .brand { width:50px; padding:0; justify-content:center; border-radius:16px; }
  .brand-name { display:none; }
  .brand-mark { width:34px; height:34px; }
  .searchbox { height:50px; border-radius:16px; }
  .searchbox input { font-size:16px; }
  .searchbox button { padding-inline:12px; }
  .round-btn { width:50px; height:50px; flex-basis:50px; border-radius:16px; }
  .hero-card { top:calc(68px + env(safe-area-inset-top)); left:10px; right:10px; width:auto; max-width:none; padding:20px; border-radius:22px; }
  .hero-card h1 { font-size:clamp(24px, 7.1vw, 31px); }
  .hero-card p { font-size:13px; }
  .hero-actions { flex-direction:row; }
  .hero-primary, .hero-secondary { min-height:45px; }
  .floating-actions { right:10px; bottom:calc(var(--lovi-nav-h) + 30px + env(safe-area-inset-bottom)); }
  .map-action { width:48px; min-width:48px; height:48px; padding:0; justify-content:center; }
  .map-action span { display:none; }
  .bottom-nav { width:calc(100vw - 20px); border-radius:21px; }
  .bottom-nav button { min-width:0; }
  .bottom-nav button small { font-size:9px; }
  body[class*="route-"] #sheet:not(.hidden), body.route-create #createM, body.route-profile #prof { padding:calc(78px + env(safe-area-inset-top)) 10px calc(var(--lovi-nav-h) + 18px + env(safe-area-inset-bottom)); }
  body.route-create #createM .modalbox, body.route-profile #prof .modalbox { border-radius:22px; }
  .orders-section-nav { grid-template-columns:1fr; }
  .orders-section-tab { min-height:62px; }
  .two-col { grid-template-columns:1fr; }
  .modal { padding:10px; align-items:flex-end; }
  .modalbox { width:100%; max-height:90dvh; border-radius:24px 24px 18px 18px; padding:20px 16px; }
  .app-dialog { padding:10px; align-items:flex-end; }
  .app-dialog-card { border-radius:24px 24px 18px 18px; padding:21px 16px 16px; max-height:90dvh; }
  .app-dialog-actions { grid-template-columns:1fr; }
  .toast { bottom:calc(var(--lovi-nav-h) + 20px + env(safe-area-inset-bottom)); }
}

/* iPhone: respect the Dynamic Island / home indicator without making the UI oversized. */
@media (max-width:650px) and (min-height:700px) {
  body.platform-ios .topbar { top:max(10px, env(safe-area-inset-top)); }
  body.platform-ios .bottom-nav { bottom:max(8px, env(safe-area-inset-bottom)); }
  body.platform-ios .modalbox, body.platform-ios .app-dialog-card { border-radius:26px 26px 20px 20px; }
}

/* Android: slightly tighter controls and more conventional elevation. */
body.platform-android .bottom-nav { box-shadow:0 12px 36px rgba(0,0,0,.15); }
body.platform-android button { -webkit-tap-highlight-color:transparent; }

/* Small phones */
@media (max-width:380px) {
  .topbar { gap:5px; }
  .brand, .round-btn { width:46px; height:46px; flex-basis:46px; }
  .searchbox { height:46px; }
  .searchbox button { font-size:11px; padding-inline:9px; }
  .hero-card { padding:17px; }
  .hero-card h1 { font-size:23px; }
  .bottom-nav { width:calc(100vw - 12px); padding:5px; }
  .bottom-nav button { height:60px; min-height:60px; }
  .bottom-nav .create-btn span { width:43px; height:43px; }
}

/* Landscape phones: preserve map visibility and keep content compact. */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape) {
  .hero-card { top:58px; width:340px; max-height:calc(100dvh - 70px); overflow:auto; padding:15px; }
  .hero-card h1 { font-size:22px; }
  .bottom-nav { height:60px; min-height:60px; }
  .bottom-nav button { height:50px; min-height:50px; }
  .bottom-nav button small { display:none; }
}

/* Desktop: true spacing scale without changing the tested map composition. */
@media (min-width:1101px) {
  .topbar { top:18px; }
  .hero-card { top:104px; }
  .bottom-nav { width:min(680px, 52vw); }
  body[class*="route-"] #sheet:not(.hidden), body.route-create #createM, body.route-profile #prof { padding-top:106px; }
}

@media (min-width:1600px) {
  :root { --lovi-content:1080px; }
  .bottom-nav { width:700px; }
}

/* Reduced motion: keep interactions crisp but respectful. */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Focus ring is deliberately warm and visible on every device. */
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:3px solid rgba(255,90,54,.22); outline-offset:2px;
}

/* Subtle page entrance. */
body.route-orders #sheet:not(.hidden), body.route-favorites #sheet:not(.hidden), body.route-profile #prof:not(.hidden), body.route-create #createM:not(.hidden) { animation:loviPageIn .28s cubic-bezier(.2,.75,.2,1) both; }
@keyframes loviPageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Hide the old purple-heavy visual treatments that can survive in inline/dynamic markup. */
[style*="#5264C7"],[style*="#5B67B7"],[style*="#5968d9"],[style*="#8b4de8"] { color:var(--lovi-ink)!important; }

/* =========================================================
   LОВИ — навигация к заказу
   ========================================================= */
.lovi-route-panel {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 86px);
  transform: translateX(-50%);
  z-index: 140;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: min(340px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--lovi-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--lovi-surface-solid) 94%, transparent);
  box-shadow: var(--lovi-shadow-2);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: lovi-route-in .28s ease both;
}
.lovi-route-panel-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--lovi-accent);
  color: #fff;
}
.lovi-route-panel-copy { min-width:0; flex:1; }
.lovi-route-nav { margin-top:8px; padding:7px 11px; font-size:12px; }
.lovi-route-close { flex:0 0 auto; }
.lovi-route-panel b,
.lovi-route-panel span { display:block; }
.lovi-route-panel b { font-size: 14px; line-height: 1.2; }
.lovi-route-panel span { margin-top: 3px; color: var(--lovi-muted); font-size: 12px; line-height: 1.25; }
@keyframes lovi-route-in {
  from { opacity:0; transform:translate(-50%,-8px) scale(.98); }
  to { opacity:1; transform:translate(-50%,0) scale(1); }
}
@media (max-width: 650px) {
  .lovi-route-panel { top: calc(env(safe-area-inset-top, 0px) + 76px); }
}
@media (prefers-reduced-motion: reduce) {
  .lovi-route-panel { animation: none; }
}


/* 2GIS address picker */
.picker-search-wrap{position:absolute;top:calc(env(safe-area-inset-top) + 58px);left:12px;right:12px;z-index:20;max-width:680px;margin:auto}
.picker-search{width:100%;height:48px;padding:0 16px;border:1px solid var(--line,#e7e7e7);border-radius:16px;background:var(--surface,#fff);color:var(--text,#17181c);box-shadow:0 10px 30px rgba(0,0,0,.12);outline:none;font:inherit}
.picker-suggestions{margin-top:7px;border:1px solid var(--line,#e7e7e7);border-radius:16px;background:var(--surface,#fff);box-shadow:0 14px 35px rgba(0,0,0,.14);overflow:hidden;max-height:46vh}
.picker-suggestion{display:block;width:100%;padding:12px 15px;text-align:left;border:0;border-bottom:1px solid var(--line,#e7e7e7);background:transparent;color:var(--text,#17181c);cursor:pointer}
.picker-suggestion:last-child{border-bottom:0}
.picker-suggestion b{display:block;font-size:14px}
.picker-suggestion span{display:block;margin-top:3px;font-size:12px;color:var(--muted,#747983)}
body.dark .picker-search,body.dark .picker-suggestions{background:#191a1f;color:#e5e7eb;border-color:#2b2d34}
body.dark .picker-suggestion{color:#e5e7eb;border-color:#2b2d34}
@media (max-width:600px){.picker-search-wrap{top:calc(env(safe-area-inset-top) + 56px)}.picker-search{height:46px;border-radius:14px}}

/* Reliable address-first picker */
.picker-search-row{display:flex;gap:8px;align-items:center}
.picker-search{flex:1;min-width:0}
.picker-search-button{width:48px;height:48px;flex:0 0 48px;border:1px solid var(--line,#e7e7e7);border-radius:16px;background:var(--primary,#ff5a36);color:#fff;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.12);cursor:pointer}
.picker-search-button svg{width:19px;height:19px}
.picker-coords-toggle{display:block;margin:8px auto 0;border:0;background:transparent;color:var(--muted,#747983);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:4px 8px}
.picker-coords-panel{margin-top:7px;padding:10px;border:1px solid var(--line,#e7e7e7);border-radius:16px;background:var(--surface,#fff);box-shadow:0 14px 35px rgba(0,0,0,.10)}
.picker-coords-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.picker-coords-grid .field{height:42px;font-size:13px}
.picker-coords-apply{width:100%;margin-top:8px;height:42px}
body.dark .picker-coords-panel{background:#191a1f;border-color:#2b2d34}
@media (max-width:600px){.picker-search-button{height:46px;flex-basis:46px;width:46px;border-radius:14px}.picker-coords-grid{grid-template-columns:1fr}.picker-coords-panel{padding:9px}}


/* LOVI picker v4: address search is the only top overlay. */
.picker-search-wrap{top:calc(env(safe-area-inset-top,0px) + 66px);z-index:25}
.picker-search-row{position:relative;z-index:26}
.picker-suggestions{position:relative;z-index:27}
.picker-coords-toggle{position:relative;z-index:26}
@media (max-width:600px){.picker-search-wrap{top:calc(env(safe-area-inset-top,0px) + 62px);left:10px;right:10px}.picker-suggestions{max-height:42vh}}


/* LOVI v5 — high-visibility error notifications */
.toast.error {
  background: #ff3b30 !important;
  color: #080808 !important;
  border: 2px solid #080808;
  box-shadow: 0 12px 34px rgba(0,0,0,.34), 0 0 0 2px rgba(255,59,48,.25);
  font-weight: 900;
}
.toast.success {
  background: var(--text-strong, #17181c);
  color: #fff;
}

/* =========================================================
   LOVI V3 — CITY / NEON RESPONSIVE LANDING + ORDERS MAP
   ========================================================= */
:root{--v3-bg:#05090f;--v3-panel:#0b121b;--v3-panel2:#101a25;--v3-line:rgba(255,255,255,.09);--v3-text:#f5f8fb;--v3-muted:#9ba8b8;--v3-blue:#1597ff;--v3-orange:#ff6a1a;--v3-cyan:#19d7ff;--v3-radius:18px}
body{background:var(--v3-bg);color:var(--v3-text)}
body.route-map #landingPage,body.route-create #landingPage,body.route-favorites #landingPage,body.route-profile #landingPage,body.route-orders #landingPage{display:none!important}
body.route-map .orders-page,body.route-orders .orders-page{display:grid!important}
body.route-create .orders-page,body.route-favorites .orders-page,body.route-profile .orders-page{display:none!important}
body.route-map .site-header,body.route-orders .site-header{position:fixed}
body.route-map .bottom-nav,body.route-orders .bottom-nav{display:flex}
body:not(.route-map):not(.route-orders) .bottom-nav{display:none}
.site-header{position:absolute;top:0;left:0;right:0;height:78px;z-index:100;display:flex;align-items:center;gap:34px;padding:0 clamp(20px,4vw,64px);background:rgba(4,8,13,.72);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(18px)}
.brand-main{background:none;border:0;color:#fff;display:flex;align-items:center;gap:8px;font-weight:900;font-size:23px;cursor:pointer}.brand-main .brand-mark{color:var(--v3-blue)}.brand-main .brand-name{letter-spacing:-1px}
.desktop-nav{display:flex;gap:28px;align-items:center;flex:1}.desktop-nav button,.header-link{background:none;border:0;color:#c4cfdb;font-weight:650;cursor:pointer}.desktop-nav button:hover,.header-link:hover{color:#fff}
.header-actions{display:flex;align-items:center;gap:12px}.header-link{padding:11px 16px}.header-primary,.hero-primary{border:0;border-radius:999px;padding:13px 20px;background:linear-gradient(135deg,#1a9dff,#0875ed);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(0,130,255,.2)}.mobile-menu-btn{display:none;background:none;color:#fff;border:0;font-size:25px}
.landing-page{max-width:1280px;margin:0 auto;padding:98px 24px 80px}.landing-hero{min-height:520px;border:1px solid var(--v3-line);border-radius:24px;overflow:hidden;position:relative;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(2,5,8,.9) 0%,rgba(2,5,8,.54) 52%,rgba(2,5,8,.15)),url('/static/lovi-city-hero.jpg') center/cover no-repeat;box-shadow:0 30px 80px rgba(0,0,0,.42)}
/* If no custom image exists, preserve a premium dark city gradient without broken-image artifacts. */
.landing-hero{background-color:#07101b;background-image:linear-gradient(90deg,rgba(2,5,8,.78),rgba(2,5,8,.12)),url('/static/lovi-city.svg')}
.landing-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 45%,rgba(21,151,255,.25),transparent 9%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 55%);pointer-events:none}.hero-copy{position:relative;z-index:1;max-width:650px;padding:60px}.hero-kicker{display:flex;gap:10px;align-items:center;color:#8fd2ff;font-size:12px;font-weight:800;letter-spacing:.12em}.hero-dot,.live-dot{width:8px;height:8px;border-radius:50%;background:var(--v3-blue);box-shadow:0 0 14px var(--v3-blue)}.hero-copy h1{font-size:clamp(48px,6vw,82px);line-height:.95;letter-spacing:-.055em;margin:18px 0}.hero-copy p{font-size:20px;line-height:1.45;color:#c5d0dc;max-width:580px}.hero-actions{display:flex;gap:12px;margin-top:28px}.hero-secondary{border:1px solid rgba(255,255,255,.24);background:rgba(4,8,13,.55);color:#fff;border-radius:999px;padding:13px 22px;font-weight:750;cursor:pointer}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);background:#08111b;border:1px solid var(--v3-line);border-radius:18px;margin-top:14px;padding:20px 28px}.stats-strip>div{display:grid;grid-template-columns:30px 1fr;column-gap:9px;align-items:center;border-right:1px solid var(--v3-line)}.stats-strip>div:last-child{border:0}.stats-strip span{grid-row:span 2;color:var(--v3-blue)}.stats-strip b{font-size:22px}.stats-strip small{color:var(--v3-muted)}
.promo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}.promo-card{min-height:205px;border-radius:18px;border:1px solid var(--v3-line);padding:26px;display:flex;align-items:flex-end;overflow:hidden;position:relative}.promo-card:after{content:"";position:absolute;inset:0;pointer-events:none}.promo-card>div{position:relative;z-index:2;max-width:85%}.promo-card h3{font-size:25px;line-height:1.03;margin:0 0 10px}.promo-card p{color:#d0dae5;margin:0 0 18px}.promo-card button{border:0;border-radius:999px;padding:9px 14px;font-weight:750;cursor:pointer;background:#fff;color:#06101a}.promo-help{background:linear-gradient(125deg,#172333,#182d43)}.promo-worker{background:linear-gradient(125deg,#0b3152,#0d6da6)}.promo-discount{background:linear-gradient(125deg,#241b5a,#7d3bc0)}
.categories-section{padding:42px 0 30px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px}.section-heading h2{font-size:32px;margin:5px 0 0}.section-heading button{background:none;color:#74c5ff;border:0;font-weight:750;cursor:pointer}.category-row{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;margin-top:18px}.category-row button{min-height:100px;background:#0b141e;border:1px solid var(--v3-line);border-radius:15px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer}.category-row button:hover{border-color:rgba(21,151,255,.5);transform:translateY(-2px)}.category-row span{color:#61bfff}.category-row small{color:#c6d0da}.wide-promo{border:1px solid var(--v3-line);border-radius:20px;min-height:260px;padding:42px;background:linear-gradient(110deg,#081522,#0c1e30 60%,#09233c);position:relative;overflow:hidden}.wide-promo:after{content:"";position:absolute;width:420px;height:420px;right:-90px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(0,153,255,.42),transparent 64%)}.wide-promo>div{position:relative;z-index:1}.wide-promo h2{font-size:42px;line-height:1;margin:10px 0}.wide-promo em{font-style:normal;color:#69c6ff}.wide-promo p{color:#aebdcb}.wide-promo button{border:0;background:var(--v3-blue);color:#fff;padding:13px 19px;border-radius:999px;font-weight:800}
.orders-page{display:none;position:fixed;inset:78px 0 0;grid-template-columns:minmax(330px,390px) 1fr;background:#05090f;z-index:20}.orders-sidebar{background:#071019;border-right:1px solid var(--v3-line);overflow:auto;padding:24px 16px 100px}.orders-title-row{display:flex;justify-content:space-between;align-items:center}.orders-title-row h1{font-size:25px;margin:5px 0 0}.orders-title-row h1 span{font-size:12px;background:#172331;color:#9eafc0;padding:4px 7px;border-radius:999px;vertical-align:middle}.orders-search{display:flex;align-items:center;gap:9px;background:#0d1722;border:1px solid var(--v3-line);border-radius:12px;padding:0 12px;margin:18px 0 12px}.orders-search svg{color:#7992a8}.orders-search input{width:100%;height:44px;background:none;border:0;outline:0;color:#fff}.orders-filters{display:flex;gap:7px;overflow:auto;padding-bottom:8px}.orders-filters button{white-space:nowrap;background:#0d1722;border:1px solid var(--v3-line);color:#aebdca;border-radius:999px;padding:8px 12px;cursor:pointer}.orders-filters button.active{background:var(--v3-blue);color:#fff;border-color:var(--v3-blue)}.public-order-list{display:flex;flex-direction:column;gap:9px;margin-top:10px}.public-job-card{background:#0c1620;border:1px solid var(--v3-line);border-radius:14px;padding:12px;cursor:pointer;transition:.18s}.public-job-card:hover{border-color:rgba(21,151,255,.55);transform:translateY(-1px)}.public-job-card .pj-top{display:flex;justify-content:space-between;gap:10px}.public-job-card h3{font-size:15px;margin:0}.public-job-card .pj-price{font-weight:850;color:#fff;white-space:nowrap}.public-job-card .pj-meta,.public-job-card .pj-address{font-size:12px;color:#8fa2b5;margin-top:6px}.pj-tag{display:inline-block;font-size:10px;color:#72c8ff;background:rgba(21,151,255,.1);padding:3px 6px;border-radius:5px;margin-top:8px}.orders-map-wrap{position:relative;min-width:0}.orders-map-wrap #map{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:#08121c}.map-top-controls{position:absolute;right:18px;top:18px;z-index:5;display:flex;gap:8px}.map-top-controls button{background:rgba(6,13,20,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:10px;padding:10px 12px;display:flex;gap:7px;align-items:center;cursor:pointer}.map-status{position:absolute;left:18px;bottom:18px;z-index:5;background:rgba(6,13,20,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:9px 12px;color:#b5c3d0;font-size:12px;display:flex;gap:8px;align-items:center}.filter-mobile{display:none}.orders-loading{color:#8093a6;text-align:center;padding:30px 10px}.bottom-nav{z-index:150!important}
@media(max-width:900px){.desktop-nav{display:none}.site-header{height:64px;padding:0 16px;gap:0;justify-content:space-between}.header-link,.header-primary{display:none}.mobile-menu-btn{display:block}.landing-page{padding:78px 12px 88px}.landing-hero{min-height:490px;border-radius:18px}.hero-copy{padding:28px 22px}.hero-copy h1{font-size:47px}.hero-copy p{font-size:16px}.stats-strip{grid-template-columns:repeat(2,1fr);padding:12px}.stats-strip>div{padding:10px;border-bottom:1px solid var(--v3-line)}.stats-strip>div:nth-child(2){border-right:0}.stats-strip>div:nth-child(3),.stats-strip>div:nth-child(4){border-bottom:0}.promo-grid{grid-template-columns:1fr}.promo-card{min-height:170px}.category-row{display:flex;overflow:auto;padding-bottom:5px}.category-row button{min-width:92px}.section-heading h2{font-size:25px}.wide-promo{padding:28px;min-height:230px}.wide-promo h2{font-size:32px}.orders-page{inset:64px 0 68px;display:flex!important;flex-direction:column}.orders-map-wrap{order:1;height:45%;min-height:260px;flex:0 0 45%}.orders-sidebar{order:2;height:55%;border-right:0;border-top:1px solid var(--v3-line);padding:12px 12px 20px}.orders-sidebar .orders-title-row{position:sticky;top:-12px;background:#071019;padding:6px 0;z-index:4}.orders-search{margin:8px 0}.orders-filters{padding-bottom:4px}.public-order-list{margin-top:8px}.map-top-controls{top:10px;right:10px}.map-top-controls button{font-size:11px;padding:8px}.map-status{display:none}.filter-mobile{display:block;background:#0d1722;color:#fff;border:1px solid var(--v3-line);border-radius:9px;padding:8px}.orders-filters{display:none}.orders-filters.open{display:flex}.bottom-nav{height:68px!important}}
@media(max-width:480px){.landing-hero{min-height:455px}.hero-copy h1{font-size:42px}.hero-actions{flex-wrap:wrap}.hero-primary,.hero-secondary{width:100%;justify-content:center}.promo-card h3{font-size:22px}.orders-map-wrap{height:43%;flex-basis:43%}.orders-sidebar{height:57%;}.orders-title-row h1{font-size:21px}}