@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root{
  --bg:#0f1115;
  --bg-soft:#f6f3f5;
  --surface:#ffffff;
  --ink:#181117;
  --ink-soft:#6b5f68;
  --line:#ece5e8;
  --brand:#101014;
  --accent:#ff5864;
  --accent-2:#ff9a3c;
  /* Accent as small text: the brand pink is too light on white (3:1), so
     links and small labels use a deeper step of the same hue (5.5:1). */
  --accent-text:#c9244b;
  --good-text:#137a47;
  --warn-text:#9a5b00;
  --bad-text:#b91c1c;
  --gradient:linear-gradient(120deg, #fd267a 0%, #ff5864 45%, #ff9a3c 100%);
  --gradient-soft:linear-gradient(120deg, rgba(253,38,122,.12) 0%, rgba(255,154,60,.12) 100%);
  --accent-ink:#ffffff;
  --good:#1a9c5b;
  --warn:#d97706;
  --bad:#dc2626;
  --radius:20px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(24,17,23,.06), 0 10px 28px rgba(24,17,23,.08);
  --shadow-lift:0 6px 14px rgba(253,38,122,.18), 0 2px 4px rgba(24,17,23,.08);
  font-size:16px;

  /* Stacking order, top to bottom of the list = highest on screen.
     Leaflet's own controls/panes top out at z-index 1000, so every
     piece of fixed app chrome must sit above that or the map bleeds
     over it when it scrolls underneath. */
  --z-map: 1;
  --z-header: 1500;
  --z-nav-mobile: 1600;
  --z-toast: 1800;
  --z-modal: 2000;
  --z-lightbox: 2100;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg-soft);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
input,textarea,select{font-family:inherit;font-size:16px;}
h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:800;letter-spacing:-.01em;}
p{margin:0 0 .6em;}
img{max-width:100%;}

/* Inline SVG icons from js/icons.js: sized to the text, coloured by it. */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-0.15em;flex:none;overflow:visible;}
.btn .ico, .file-input-label .ico, .chip .ico{width:1.1em;height:1.1em;}
.fav-btn.active .ico-heart{color:var(--accent);}
.badge .ico{width:1.3em;height:1.3em;}
.ico-wave{color:var(--accent-2);transform:rotate(-12deg);}

.app{min-height:100vh;padding-bottom:64px;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:var(--z-header);
  background:var(--brand);
  color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.08);
  isolation:isolate; /* keeps this whole header, and anything inside it, above map panes */
}
.topbar-inner{
  max-width:1080px;margin:0 auto;
  display:flex;align-items:center;gap:16px;
  padding:12px 16px;
}
.brand{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-weight:800;font-size:1.1rem;letter-spacing:-.02em;
}
.brand span{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}
.brand-mark{width:26px;height:23px;display:block;}
.topnav{display:flex;gap:4px;margin-left:8px;flex:1;min-width:0;overflow:hidden;}
.topnav > *{flex:none;white-space:nowrap;}
.topnav a, .topnav-mobile a, .topnav button{
  color:rgba(255,255,255,.75);
  padding:8px 14px;border-radius:999px;font-size:.92rem;font-weight:700;
  display:inline-block;
}
.topnav a.active, .topnav-mobile a.active{background:var(--gradient);color:#fff;}
.topnav a:hover{color:#fff;}
.icon-btn{
  background:transparent;border:none;color:#fff;font-size:1.2rem;line-height:0;
  cursor:pointer;padding:8px 10px;border-radius:8px;display:none;
}
.icon-btn .ico{width:24px;height:24px;}
.topnav-mobile{
  display:none;flex-direction:column;padding:6px 10px 12px;gap:2px;
  position:relative;z-index:var(--z-nav-mobile);background:var(--brand);
}
.topnav-mobile a{padding:10px 12px;}
@media (max-width:720px){
  .topnav{display:none;}
  .icon-btn{display:inline-block;}
  .topnav-mobile.open{display:flex;}
}
/* Set by fitNav() in nav.js when the links don't fit on one line. */
.topbar.nav-collapsed .topnav{visibility:hidden;height:0;padding:0;}
.topbar.nav-collapsed .icon-btn{display:inline-block;}
.topbar.nav-collapsed .topnav-mobile.open{display:flex;}

/* ---------- Layout helpers ---------- */
.container{max-width:1080px;margin:0 auto;padding:18px 16px 40px;}
.container-narrow{max-width:560px;margin:0 auto;padding:18px 16px 40px;}
.row{display:flex;gap:12px;}
.row.wrap{flex-wrap:wrap;}
.col{flex:1;min-width:0;}
.spacer{flex:1;}
.stack > * + *{margin-top:12px;}
.center{display:flex;align-items:center;justify-content:center;}
.hidden{display:none !important;}
.muted{color:var(--ink-soft);}
.small{font-size:.85rem;}
.tiny{font-size:.75rem;}

/* ---------- Cards / surfaces ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card + .card{margin-top:12px;}
.card-tight{padding:14px;}
.card-link{display:block;cursor:pointer;transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;}
.card-link:hover{box-shadow:var(--shadow-lift);border-color:rgba(255,88,100,.25);transform:translateY(-2px);}
.card-link:active{transform:scale(.997) translateY(0);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:999px;
  padding:11px 20px;font-weight:700;font-size:.95rem;
  cursor:pointer;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);
  transition:filter .1s ease, transform .05s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--gradient);border-color:transparent;color:var(--accent-ink);box-shadow:var(--shadow-lift);}
.btn-primary:hover{filter:brightness(1.06);}
.btn-dark{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-ghost{background:transparent;border-color:transparent;}
.btn-danger{background:#fff;border-color:#f3c6c6;color:var(--bad);}
.btn-sm{padding:7px 14px;font-size:.85rem;}
.btn-block{width:100%;}
.btn-icon{padding:9px 12px;}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:.85rem;font-weight:700;color:var(--ink);}
.field .hint{font-size:.78rem;color:var(--ink-soft);margin-top:-2px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],
input[type=search],input[type=date],input[type=time],textarea,select{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 12px;background:#fff;color:var(--ink);width:100%;
  font:inherit;
}
input[type=search]{-webkit-appearance:none;appearance:none;}
textarea{resize:vertical;min-height:80px;}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.check-row{display:flex;align-items:center;gap:8px;font-size:.9rem;}
.chip-select{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:.85rem;font-weight:600;cursor:pointer;background:#fff;color:var(--ink-soft);
  user-select:none;transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.chip.selected{background:var(--gradient);border-color:transparent;color:#fff;font-weight:700;}
.tag-input-row{display:flex;gap:8px;}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:999px;padding:5px 10px;font-size:.8rem;font-weight:600;
}
.tag.do{background:#e8f8ef;color:var(--good-text);}
.tag.dont{background:#fdecea;color:var(--bad-text);}
.tag button{background:none;border:none;cursor:pointer;color:inherit;font-weight:800;padding:0;line-height:1;}

/* ---------- Badges / pills ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}
.badge-open{background:var(--gradient-soft);color:var(--accent-text);}
.badge-accepted{background:#fff4e0;color:var(--warn-text);}
.badge-in_progress{background:#fff4e0;color:var(--warn-text);}
.badge-under_review{background:#fff4e0;color:var(--warn-text);}
.badge-completed{background:#e8f8ef;color:var(--good-text);}
.badge-resolved{background:#e8f8ef;color:var(--good-text);}
.badge-cancelled{background:#f1f2f4;color:var(--ink-soft);}
.badge-dismissed{background:#f1f2f4;color:var(--ink-soft);}
.badge-disputed{background:#fdecea;color:var(--bad-text);}
.stars{color:#f5a623;letter-spacing:1px;font-size:.95rem;white-space:nowrap;}
.stars .empty{color:#e0e0e0;}
.stars .ico{stroke-width:1.5;vertical-align:-0.12em;}
.stars .ico + .ico{margin-left:1px;}
.ico-star-gold{color:#f5a623;stroke-width:1.5;}
.star-picker{gap:6px;margin:10px 0;}
.star-pick{
  background:none;border:none;padding:2px;cursor:pointer;line-height:0;
  color:#f5a623;font-size:1.9rem;border-radius:8px;
}
.star-pick.empty{color:#e0e0e0;}
.star-pick:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.avatar{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1rem;flex:0 0 auto;
  background:var(--gradient);
  box-shadow:0 2px 8px rgba(253,38,122,.25);
}
.avatar-sm{width:32px;height:32px;font-size:.8rem;}
.avatar-lg{width:72px;height:72px;font-size:1.5rem;}
.avatar-photo{background:var(--line);padding:0;overflow:hidden;}
.avatar-photo img{width:100%;height:100%;object-fit:cover;}

/* ---------- Photo upload / gallery ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px;}
.photo-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background:var(--line);}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-thumb-remove{
  position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;
  background:rgba(15,17,21,.65);color:#fff;border:none;cursor:pointer;
  font-weight:800;line-height:1;font-size:.9rem;display:flex;align-items:center;justify-content:center;
}
.file-input-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.file-input-label{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1px dashed var(--line);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:.85rem;font-weight:700;color:var(--ink-soft);
  background:#fdfbfb;
}
.file-input-label input{display:none;}
.fav-btn{background:#fff;border:1px solid var(--line);}
.fav-btn.active{background:var(--gradient-soft);border-color:transparent;color:var(--accent);}

/* ---------- Map ----------
   Leaflet's own panes/controls reach z-index 1000 internally, so the
   map's own stacking context is deliberately capped low here and the
   fixed header above is pinned well past it (see --z-header). */
.map-wrap{position:relative;isolation:isolate;z-index:var(--z-map);}
#map, .leaflet-map{
  position:relative;z-index:var(--z-map);
  width:100%;
  height:calc(100vh - 210px);
  height:calc(100dvh - 210px);
  min-height:340px;border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden; /* clip tiles/controls to the rounded card, belt-and-braces */
}
.map-pick{height:280px;}
.map-fab{
  position:absolute;right:14px;bottom:14px;z-index:10;
}
.pin-badge{
  background:var(--brand);color:#fff;border-radius:10px;padding:4px 8px;
  font-size:.72rem;font-weight:800;white-space:nowrap;box-shadow:var(--shadow);
}
.pin-badge.mine{background:var(--gradient);}
.leaflet-popup-content{font-size:.88rem;min-width:180px;}
.leaflet-popup-content b{display:block;margin-bottom:2px;}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.tab{
  padding:10px 6px;font-weight:700;font-size:.88rem;color:var(--ink-soft);
  border-bottom:2px solid transparent;cursor:pointer;margin-right:14px;
}
.tab.active{color:var(--ink);border-color:var(--accent);background:var(--gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ---------- Toast ---------- */
.toast-root{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
  background:var(--brand);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:.88rem;font-weight:600;box-shadow:var(--shadow);
  animation:toastin .15s ease-out;
}
.toast.error{background:var(--bad);}
.toast.success{background:var(--good);}
@keyframes toastin{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(15,17,21,.55);
  display:flex;align-items:flex-end;justify-content:center;z-index:var(--z-modal);
}
.modal-box{
  background:#fff;border-radius:22px 22px 0 0;padding:20px;
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  box-shadow:0 -8px 30px rgba(0,0,0,.2);
}
@media (min-width:640px){
  .modal-backdrop{align-items:center;}
  .modal-box{border-radius:22px;}
}
.modal-head{display:flex;align-items:center;margin-bottom:12px;}
.modal-head h3{margin:0;}
.modal-close{margin-left:auto;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink-soft);min-width:40px;min-height:40px;border-radius:999px;}
.modal-close:hover{background:var(--bg-soft);}

/* ---------- Chat ---------- */
.chat-list{display:flex;flex-direction:column;gap:8px;padding:6px 2px;max-height:46vh;overflow-y:auto;}
.msg{max-width:78%;padding:9px 13px;border-radius:16px;font-size:.9rem;line-height:1.35;}
.msg.mine{align-self:flex-end;background:var(--gradient);color:#fff;border-bottom-right-radius:4px;}
.msg.theirs{align-self:flex-start;background:#f1eef0;color:var(--ink);border-bottom-left-radius:4px;}
.msg .meta{font-size:.68rem;opacity:.7;margin-top:3px;}
.chat-input-row{display:flex;gap:8px;margin-top:10px;}
.chat-input-row textarea{min-height:42px;max-height:120px;}

/* ---------- Empty / loading ---------- */
.empty-state{text-align:center;padding:40px 16px;color:var(--ink-soft);}
.empty-state .big{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-soft);color:var(--accent);
}
.empty-state .big .ico{width:30px;height:30px;}
.spinner{
  width:22px;height:22px;border-radius:50%;
  border:3px solid #f0e4e7;border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:12px;color:var(--ink-soft);}

/* ---------- Landing / auth ---------- */
.hero{
  background:radial-gradient(1200px 500px at 50% -20%, rgba(253,38,122,.35), transparent 60%),
             radial-gradient(900px 400px at 90% 0%, rgba(255,154,60,.25), transparent 55%),
             var(--brand);
  color:#fff;padding:72px 16px 90px;text-align:center;
}
.hero h1{font-size:2.3rem;letter-spacing:-.02em;max-width:640px;margin:0 auto .5em;}
.hero-title{display:flex;flex-direction:column;align-items:center;gap:14px;}
.hero-mark{width:64px;height:56px;filter:drop-shadow(0 8px 24px rgba(253,38,122,.35));}
.hero p{color:rgba(255,255,255,.78);max-width:520px;margin:0 auto 22px;}
.hero .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.feature-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:-48px;padding:0 16px 40px;max-width:1080px;margin-left:auto;margin-right:auto;}
.feature-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;}
.feature-ico{
  width:48px;height:48px;border-radius:14px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient);color:#fff;box-shadow:var(--shadow-lift);
}
.feature-ico .ico{width:24px;height:24px;}

/* Landing photos. Mobile: the hero photo is a banner that fades into the dark
   hero above the title. From 900px up it fills the right of the hero behind a
   dark left-to-right fade, and the copy sits left-aligned on top. */
.hero--photo{position:relative;overflow:hidden;padding-top:0;}
.hero-media{position:relative;margin:0 -16px 0;height:min(62vw,300px);}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 30%;}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,16,20,.15) 0%, rgba(16,16,20,0) 35%, rgba(16,16,20,.55) 72%, var(--brand) 100%);
}
.hero--photo .hero-inner{position:relative;margin-top:-44px;}
@media (min-width:900px){
  .hero--photo{padding:0;text-align:left;min-height:600px;display:flex;align-items:center;}
  .hero-media{position:absolute;inset:0;margin:0;height:auto;}
  .hero-photo{object-position:100% 30%;}
  .hero-media::after{
    background:
      radial-gradient(900px 420px at 15% -10%, rgba(253,38,122,.28), transparent 60%),
      linear-gradient(90deg, rgba(16,16,20,.97) 0%, rgba(16,16,20,.9) 30%, rgba(16,16,20,.45) 55%, rgba(16,16,20,0) 78%),
      linear-gradient(0deg, rgba(16,16,20,.6) 0%, rgba(16,16,20,0) 28%);
  }
  .hero--photo .hero-inner{margin:0 auto;width:100%;max-width:1080px;padding:88px 32px 128px;}
  .hero--photo h1,.hero--photo p{margin-left:0;margin-right:0;max-width:500px;}
  .hero--photo .hero-title{align-items:flex-start;}
  .hero--photo .cta-row{justify-content:flex-start;}
  .hero--photo p{text-shadow:0 1px 12px rgba(0,0,0,.45);}
}

.landing-section{padding:8px 16px 48px;}
.landing-head{max-width:1080px;margin:0 auto 18px;}
.landing-head h2,.how-copy h2{font-size:1.6rem;letter-spacing:-.02em;line-height:1.2;margin:0 0 6px;}
.landing-head p{margin:0;max-width:560px;}
.pro-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:58%;gap:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  margin:0 -16px;padding:4px 16px 12px;scroll-padding:0 16px;scrollbar-width:none;
}
.pro-strip::-webkit-scrollbar{display:none;}
.pro-shot{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;box-shadow:var(--shadow);background:#1b1a20;aspect-ratio:4/5;}
.pro-shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.pro-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:36px 14px 12px;
  color:#fff;font-weight:800;font-size:.98rem;
  background:linear-gradient(0deg, rgba(12,11,16,.82) 0%, rgba(12,11,16,0) 100%);
}
@media (min-width:640px){ .pro-strip{grid-auto-columns:31%;} }
@media (min-width:900px){
  .pro-strip{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;max-width:1080px;margin:0 auto;padding:4px 0 0;}
  .pro-shot:hover img{transform:scale(1.04);}
}

.how-band{
  background:radial-gradient(700px 360px at 100% 100%, rgba(253,38,122,.22), transparent 60%), #0c0b10;
  color:#fff;padding:48px 16px 56px;
}
.how-inner{max-width:1080px;margin:0 auto;display:grid;gap:26px;align-items:center;}
.how-photo{display:block;width:100%;height:auto;border-radius:var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.45);}
.how-copy h2{margin-bottom:18px;}
.how-steps{list-style:none;margin:0 0 24px;padding:0;counter-reset:step;display:grid;gap:16px;}
.how-steps li{counter-increment:step;display:grid;grid-template-columns:36px 1fr;column-gap:14px;row-gap:2px;}
.how-steps li::before{
  content:counter(step);grid-row:span 2;width:36px;height:36px;border-radius:50%;
  background:var(--gradient);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.how-steps strong{font-size:1.02rem;}
.how-steps span{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.5;}
@media (min-width:900px){
  .how-band{padding:72px 32px 80px;}
  .how-inner{grid-template-columns:1.1fr 1fr;gap:56px;}
  .landing-head h2,.how-copy h2{font-size:2rem;}
}

/* ---------- Job / profile detail ---------- */
.detail-header{display:flex;gap:14px;align-items:center;margin-bottom:16px;}
.kv-list{display:flex;flex-direction:column;gap:8px;}
.kv-row{display:flex;justify-content:space-between;gap:12px;font-size:.9rem;padding:8px 0;border-bottom:1px dashed var(--line);}
.kv-row:last-child{border-bottom:none;}
.dos-donts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:480px){.dos-donts{grid-template-columns:1fr;}}
.dd-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;}
.dd-col.do h4{color:var(--good);}
.dd-col.dont h4{color:var(--bad);}
.dd-col ul{margin:0;padding-left:18px;font-size:.88rem;}
.dd-col li{margin-bottom:4px;}

.thread-item{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--line);transition:border-color .12s ease, background .12s ease;}
.thread-item + .thread-item{margin-top:8px;}
.thread-item:hover{background:#fdf7f8;border-color:rgba(255,88,100,.3);}

.fixed-bottom-bar{
  position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:12px 16px;display:flex;gap:10px;box-shadow:0 -2px 10px rgba(0,0,0,.04);
}

/* Suspended-account notice, shown under the top bar by renderNav(). */
.suspended-banner{
  background:#fdecea;
  color:var(--bad-text);
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:10px 16px;
  font-size:.9rem;
  line-height:1.4;
}

/* ID-verification badge shown next to a pro's name. */
.badge-verified{background:#e8f8ef;color:var(--good-text);}
.verified-tick{color:var(--good);font-size:1.05em;}
.verified-tick .ico{vertical-align:-0.2em;}
.ico-verified{color:var(--good);}

/* Terms / Privacy pages and the global footer linking to them. */
.site-footer{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  gap:12px;
  padding:20px 16px 28px;
  font-size:.82rem;
  color:var(--ink-soft);
}
.site-footer a{color:var(--ink-soft);text-decoration:underline;}
.site-footer a:hover{color:var(--ink);}
.footer-socials{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.footer-socials:empty{display:none;}
.site-footer .footer-socials a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:600;}
.footer-socials .brand-ico{width:15px;height:15px;flex:none;}
.legal-page h3{
  margin:20px 0 6px;
  font-size:1rem;
}
.legal-page p,
.legal-page li{line-height:1.6;}
.legal-page ul{padding-left:20px;margin:6px 0;}
.legal-page li{margin-bottom:6px;}

/* ---- Guided demo (#/demo) ---------------------------------------------- */
.demo-link{
  display:inline-block;
  color:#fff;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.demo-link:hover{opacity:.85;}

/* The bar is fixed to the bottom, and demo.js measures its height into
   --demo-bar-h. html and body are pinned to height:100% with the page
   overflowing them, so padding on body adds no scroll room at all; the space
   has to go on the last thing in the flow, the footer, so that the bottom of
   every page (the "Post job" button, the footer links) can scroll clear of
   the bar. scroll-padding makes scrollIntoView and focus stop above it too. */
body.demo-active .site-footer{padding-bottom:calc(var(--demo-bar-h, 140px) + 16px);}
html.demo-active{scroll-padding-bottom:calc(var(--demo-bar-h, 140px) + 16px);}

.demo-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:900;
  background:#101014;
  color:#fff;
  border-top:2px solid var(--accent, #ff6a1a);
  box-shadow:0 -6px 24px rgba(0,0,0,.28);
}
.demo-bar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.demo-lede{display:flex;align-items:center;gap:8px;min-width:0;}
.demo-bar .muted{color:rgba(255,255,255,.6);}
.demo-chip{
  background:#d42a52;
  color:#fff;
  font-weight:800;
  font-size:.7rem;
  letter-spacing:.08em;
  padding:3px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.demo-roles{display:flex;gap:4px;background:rgba(255,255,255,.08);padding:3px;border-radius:999px;}
.demo-roles button{
  background:none;
  border:none;
  color:rgba(255,255,255,.7);
  font-weight:700;
  font-size:.82rem;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}
.demo-roles button.active{background:#fff;color:#101014;}
.demo-step{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;}
.demo-step .tiny{color:rgba(255,255,255,.72);line-height:1.35;}
.demo-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.demo-count{color:rgba(255,255,255,.6);white-space:nowrap;}
.demo-bar .btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;}
.demo-bar .btn:hover{background:rgba(255,255,255,.2);}
.demo-bar .btn-primary{background:#d42a52;border-color:#d42a52;color:#fff;}
.demo-bar .btn[disabled]{opacity:.4;cursor:default;}

@media (max-width:720px){
  .demo-bar-inner{gap:10px;}
  .demo-step{order:5;flex-basis:100%;}
  .demo-actions{margin-left:0;flex-basis:100%;justify-content:space-between;}
}

/* Briefly ring the part of the page a demo step is pointing at. */
.demo-focus{
  animation:demoFocusPulse 2.4s ease-out;
  border-radius:14px;
}
@keyframes demoFocusPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,106,26,0);}
  15%,60%{box-shadow:0 0 0 4px rgba(255,106,26,.45);}
}

/* ---- Working hours editor (profile edit) -------------------------------- */
.hours-grid{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.hours-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hours-row .hours-day{min-width:120px;margin:0;}
.hours-row input[type=time]{width:auto;min-width:104px;padding:6px 8px;}

/* Working-hours lines on a public profile, and the job time chip. */
.hours-list{display:flex;flex-direction:column;gap:2px;text-align:right;}
.when-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.78rem;font-weight:700;
  padding:2px 8px;border-radius:999px;
  background:#eef2ff;color:#3730a3;
  white-space:nowrap;
}
.fit-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.78rem;font-weight:700;
  padding:2px 8px;border-radius:999px;
  background:#e8f8ef;color:var(--good-text);
  white-space:nowrap;
}

/* Job time slot on the post-a-job form: date full width, then From / To. */
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
.slot-field{display:flex;flex-direction:column;gap:4px;margin:0;min-width:0;}
.slot-field input{width:100%;min-width:0;}
.slot-date{grid-column:1 / -1;}

/* ---- Discovery: search/sort bar and the pro list under the map ---------- */
.filter-bar{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.filter-bar input[type=search]{min-width:0;}
.filter-bar select{width:auto;min-width:0;max-width:100%;text-overflow:ellipsis;}
.filter-bar .filter-check{grid-column:1 / -1;margin:0;font-size:.88rem;}
@media (max-width:620px){
  /* minmax(0, 1fr): a long option label (Pidgin runs longer) must shrink
     the select, not widen the page. */
  .filter-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .filter-bar select{width:100%;}
  .filter-bar input[type=search]{grid-column:1 / -1;}
}
.pro-card .pro-card-headline{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Notifications ---------- */
.bell{
  position:relative;margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:999px;font-size:1.15rem;
  color:#fff;
}
.bell:hover, .bell.active{background:rgba(255,255,255,.12);}
.bell .ico{width:22px;height:22px;}
.notif-badge{
  position:absolute;top:2px;right:0;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--gradient);color:#fff;border:2px solid var(--brand);
  font-size:.68rem;font-weight:800;line-height:14px;text-align:center;
}
.notif-badge[hidden]{display:none;}
.notif-head{align-items:center;margin-bottom:10px;}
.notif-head h2{margin:0;}
.notif-list{display:flex;flex-direction:column;gap:8px;}
.notif-item{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;color:var(--ink);
}
.notif-item:hover{border-color:#d9ccd2;}
.notif-item.unread{background:var(--gradient-soft);border-color:transparent;}
.notif-icon{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);color:var(--accent);
}
.notif-item.unread .notif-icon{background:#fff;}
.notif-icon .ico{width:18px;height:18px;}
.notif-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.notif-title{font-weight:700;}
.notif-body{color:var(--ink-soft);font-size:.92rem;overflow-wrap:anywhere;}
.notif-time{color:var(--ink-soft);font-size:.78rem;}
.notif-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:7px;}
.push-card{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.push-card.is-on{background:#f1faf5;}
.push-card-icon{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);color:var(--ink-soft);
}
.push-card.is-on .push-card-icon{background:#fff;color:var(--good);}
.push-card-icon .ico{width:20px;height:20px;}
.push-card-text{flex:1;min-width:0;}
@media (max-width:480px){
  .push-card{flex-wrap:wrap;}
  .push-card .btn{width:100%;}
}

/* ---------- Phone verification ---------- */
.phone-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;}
.phone-status:empty{display:none;}
.badge-phone{background:#e8f6ee;color:#136c40;}
.badge-founding{background:var(--gradient-soft);color:var(--accent-text);}
.founding-tick{color:var(--accent-text);font-size:1.05em;}
.founding-tick .ico{vertical-align:-0.2em;}
.founding-card{background:var(--gradient-soft);border-radius:12px;padding:12px 14px;margin-bottom:12px;}
.founding-card.is-earned{padding:10px 14px;}
.founding-head{display:flex;align-items:center;gap:6px;color:var(--accent-text);margin-bottom:2px;}
.founding-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;font-size:.92em;}
.founding-steps li{display:flex;align-items:flex-start;gap:8px;color:var(--ink-soft);}
.founding-steps li .ico{flex:none;margin-top:.15em;}
.founding-steps li.is-done{color:var(--ink);}
.founding-steps li.is-done .ico{color:var(--good);}

/* ---------- Lightbox ---------- */
.photo-thumb img{cursor:zoom-in;}
.photo-thumb img:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}
html.lightbox-open{overflow:hidden;}
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox, 2100);
  background:rgba(10,8,12,.94);
  display:flex;align-items:center;justify-content:center;
  padding:56px 12px 24px;
  animation:lightbox-in .15s ease-out;
}
@keyframes lightbox-in{from{opacity:0}to{opacity:1}}
.lightbox-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100%;}
.lightbox-img{max-width:min(96vw,1100px);max-height:calc(100vh - 170px);object-fit:contain;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);}
.lightbox figcaption{color:rgba(255,255,255,.85);font-size:.92rem;text-align:center;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.lightbox-count{color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums;}
.lightbox-close, .lightbox-nav{
  position:absolute;border:none;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border-radius:999px;
  width:44px;height:44px;font-size:1.7rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-close:hover, .lightbox-nav:hover{background:rgba(255,255,255,.22);}
.lightbox-close{top:10px;right:10px;}
.lightbox-nav{top:50%;transform:translateY(-50%);}
.lightbox-nav.prev{left:10px;}
.lightbox-nav.next{right:10px;}
.lightbox-nav[hidden]{display:none;}
@media (max-width:600px){
  .lightbox{padding-bottom:76px;}
  .lightbox-nav{top:auto;bottom:16px;transform:none;}
  .lightbox-nav.prev{left:calc(50% - 56px);}
  .lightbox-nav.next{right:calc(50% - 56px);}
}

/* ---------- Pro stats ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (min-width:640px){ .stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
.stat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.stat-label{font-size:.8rem;color:var(--ink-soft);font-weight:700;}
.stat-value{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere;}
.stat-of{font-size:1rem;color:var(--ink-soft);font-weight:700;}
.stat-sub{font-size:.8rem;color:var(--ink-soft);}
.stat-alert{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  background:#fff7ed;border-color:#fed7aa;color:#9a3412;font-weight:700;
}
.stat-alert-go{margin-left:auto;font-size:1.3rem;}
.bar-chart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:180px;}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;min-width:0;}
.bar-value{font-size:.72rem;font-weight:700;color:var(--ink-soft);min-height:1em;white-space:nowrap;}
.bar-track{flex:1;width:100%;max-width:44px;display:flex;align-items:flex-end;background:var(--bg-soft);border-radius:8px;overflow:hidden;}
.bar{width:100%;background:var(--gradient);border-radius:8px 8px 0 0;}
.bar-label{font-size:.78rem;color:var(--ink-soft);}

/* ---------- Language ---------- */
.lang-switch{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;}
.lang-switch button{
  border:none;background:none;cursor:pointer;font:inherit;font-weight:700;
  color:var(--ink-soft);padding:6px 14px;border-radius:999px;min-height:32px;
}
.lang-switch button.active{background:var(--brand);color:#fff;}
.site-footer > div:not(.lang-switch){display:flex;gap:8px;justify-content:center;}
.legal-lang-note{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:var(--radius-sm);padding:10px 12px;font-size:.88rem;margin:0 0 12px;}

/* ---------- Account ---------- */
.account-card{margin-top:14px;}
.account-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn-danger-solid{background:var(--bad);border-color:var(--bad);color:#fff;}
.btn-danger-solid:hover{filter:brightness(.95);}
.blocker-list{padding-left:18px;margin:8px 0 0;font-size:.9rem;}
.blocker-list li{margin:6px 0;}
.blocker-list a{color:var(--accent-text);font-weight:700;}
.notice-warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:var(--radius-sm);padding:10px 12px;font-size:.88rem;}

/* ---------- Shared bits for the pieces below ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;}

/* ---------- Site banner (set from the admin console) ---------- */
.site-banner{font-size:.9rem;line-height:1.4;border-bottom:1px solid rgba(0,0,0,.06);}
.site-banner[hidden]{display:none;}
.site-banner-inner{max-width:1080px;margin:0 auto;padding:10px 8px 10px 16px;display:flex;align-items:center;gap:10px;}
.site-banner-inner > .ico{width:18px;height:18px;flex:none;}
.site-banner-text{flex:1;min-width:0;overflow-wrap:anywhere;}
.site-banner-text a{font-weight:800;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.site-banner-close{background:none;border:none;color:inherit;cursor:pointer;min-width:40px;min-height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;opacity:.75;}
.site-banner-close:hover{opacity:1;background:rgba(0,0,0,.06);}
.site-banner-close .ico{width:18px;height:18px;}
.site-banner-info{background:#eef2ff;color:#3730a3;}
.site-banner-warning{background:#fff7ed;color:#9a3412;}
.site-banner-success{background:#e8f8ef;color:#136c40;}

/* ---------- Maintenance screen ---------- */
html.maintenance-on body > :not(.maintenance-screen):not(#toast-root){display:none !important;}
.maintenance-screen{
  position:fixed;inset:0;z-index:3000;overflow:auto;
  display:flex;align-items:center;justify-content:center;padding:24px 16px;
  background:radial-gradient(900px 480px at 50% -10%, rgba(253,38,122,.35), transparent 60%),
             radial-gradient(700px 360px at 100% 100%, rgba(255,154,60,.22), transparent 60%), #0c0b10;
  color:#fff;text-align:center;
}
.maintenance-card{max-width:440px;display:flex;flex-direction:column;align-items:center;gap:6px;}
.maintenance-mark{width:56px;height:49px;margin-bottom:12px;filter:drop-shadow(0 8px 24px rgba(253,38,122,.4));}
.maintenance-card h1{font-size:1.8rem;letter-spacing:-.02em;margin:0 0 6px;}
.maintenance-card p{color:rgba(255,255,255,.8);line-height:1.55;margin:0 0 16px;}
.maintenance-card .maintenance-note{font-size:.8rem;color:rgba(255,255,255,.5);margin:14px 0 0;}

/* ---------- Support: floating bubble ---------- */
.support-fab{
  position:fixed;z-index:1700;
  right:calc(env(safe-area-inset-right, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);
  touch-action:none;
}
.support-fab.on-left{left:calc(env(safe-area-inset-left, 0px) + 16px);right:auto;}
.support-fab[hidden]{display:none;}
.support-fab-btn{
  position:relative;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(253,38,122,.38), 0 2px 6px rgba(12,11,16,.25);
  transition:transform .12s ease, box-shadow .15s ease;touch-action:none;
}
.support-fab-btn:hover{transform:translateY(-2px);}
.support-fab-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--accent);}
.support-fab-btn .ico{width:26px;height:26px;}
.support-fab.dragging .support-fab-btn{transform:scale(1.06);cursor:grabbing;box-shadow:0 16px 36px rgba(253,38,122,.45);}
.support-fab.dragging{transition:none;}
.support-fab-badge{
  position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:#fff;color:var(--accent);font-size:.72rem;font-weight:800;line-height:20px;text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.support-fab-badge[hidden]{display:none;}
.support-fab.on-left .support-fab-badge{right:auto;left:-2px;}
.support-fab-hide{
  position:absolute;top:-8px;left:-8px;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.support-fab.on-left .support-fab-hide{left:auto;right:-8px;}
.support-fab-hide .ico{width:13px;height:13px;}
/* On a mouse, the hide control waits until the bubble is hovered. */
@media (hover:hover) and (pointer:fine){
  .support-fab-hide{opacity:0;transition:opacity .15s ease;}
  .support-fab:hover .support-fab-hide, .support-fab-hide:focus-visible{opacity:1;}
}
body.demo-active .support-fab{display:none;}
body.support-fab-on .site-footer{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 96px);}

/* ---------- Support: panel (bottom sheet on phones, card on desktop) ---------- */
.support-layer{position:fixed;inset:0;z-index:1750;pointer-events:none;}
.support-scrim{position:absolute;inset:0;background:rgba(15,17,21,.45);pointer-events:auto;animation:lightbox-in .15s ease-out;}
.support-layer .support-panel{
  position:absolute;left:0;right:0;bottom:0;pointer-events:auto;
  height:min(86vh, 720px);height:min(86dvh, 720px);
  border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.22);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  animation:sheetIn .2s ease-out;
}
@keyframes sheetIn{from{transform:translateY(24px);opacity:0;}to{transform:none;opacity:1;}}
@media (min-width:640px){
  .support-scrim{background:transparent;}
  .support-layer .support-panel{
    left:auto;right:calc(env(safe-area-inset-right, 0px) + 20px);bottom:20px;
    width:384px;height:min(640px, calc(100vh - 100px));height:min(640px, calc(100dvh - 100px));
    border-radius:22px;box-shadow:0 24px 60px rgba(12,11,16,.28), 0 2px 8px rgba(12,11,16,.12);
  }
  .support-layer.on-left .support-panel{right:auto;left:calc(env(safe-area-inset-left, 0px) + 20px);}
}
html.support-open{overflow:hidden;}
@media (min-width:640px){ html.support-open{overflow:auto;} }
.support-panel{background:var(--surface);display:flex;flex-direction:column;overflow:hidden;color:var(--ink);}
.support-page.support-panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);height:min(760px, calc(100dvh - 150px));min-height:480px;}
.support-head{
  display:flex;align-items:center;gap:12px;padding:16px 12px 14px 18px;color:#fff;
  background:radial-gradient(420px 180px at 100% 0%, rgba(253,38,122,.45), transparent 70%), var(--brand);
}
.support-head-icon{width:40px;height:40px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;flex:none;}
.support-head-icon .ico{width:21px;height:21px;}
.support-title{font-size:1.05rem;margin:0;font-weight:800;display:block;}
h2.support-title{font-size:1.2rem;}
.support-status{font-size:.78rem;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:6px;margin-top:2px;}
.support-dot{width:8px;height:8px;border-radius:50%;background:#9ca3af;}
.support-status.is-open .support-dot{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25);}
.support-close{background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;}
.support-close:hover{background:rgba(255,255,255,.2);}
.support-close .ico{width:20px;height:20px;}
.support-tabs{display:flex;gap:4px;padding:8px 10px;background:var(--brand);}
.support-tabs button{
  flex:1;border:none;cursor:pointer;font:inherit;font-weight:700;font-size:.88rem;
  padding:9px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.support-tabs button.active{background:#fff;color:var(--ink);}
.support-tab-badge{min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--gradient);color:#fff;font-size:.68rem;line-height:18px;}
.support-tab-badge[hidden]{display:none;}
.support-body{flex:1;overflow-y:auto;padding:14px 14px 10px;background:var(--bg-soft);overscroll-behavior:contain;}
.support-foot{border-top:1px solid var(--line);padding:10px 12px;background:var(--surface);}
.support-foot:empty{display:none;}

.support-search{position:relative;margin-bottom:10px;}
.support-search .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink-soft);}
.support-search input{padding-left:36px;border-radius:999px;}
.help-list{display:flex;flex-direction:column;gap:8px;}
.help-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);}
.help-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:12px 14px;font-weight:700;font-size:.92rem;
}
.help-item summary::-webkit-details-marker{display:none;}
.help-item summary span{flex:1;}
.help-item summary .ico{color:var(--ink-soft);transition:transform .15s ease;}
.help-item[open] summary .ico{transform:rotate(180deg);}
.help-item[open]{border-color:rgba(255,88,100,.3);}
.help-answer{padding:0 14px 14px;font-size:.9rem;line-height:1.55;color:var(--ink-soft);white-space:pre-line;}
.help-more{align-self:center;margin-top:4px;}
.support-still{display:flex;align-items:center;justify-content:space-between;gap:10px;}

.support-away{
  display:flex;gap:10px;align-items:flex-start;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
  border-radius:var(--radius-sm);padding:10px 12px;font-size:.86rem;line-height:1.45;margin-bottom:12px;
}
.support-away .ico{margin-top:2px;}
.support-intro{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;}
.support-intro p{margin:0 0 4px;}
.support-messages{display:flex;flex-direction:column;gap:8px;}
.smsg{max-width:82%;padding:9px 13px;border-radius:16px;font-size:.9rem;line-height:1.4;}
.smsg.mine{align-self:flex-end;background:var(--gradient);color:#fff;border-bottom-right-radius:4px;}
.smsg.theirs{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px;}
.smsg-who{font-size:.72rem;font-weight:800;color:var(--accent-text);margin-bottom:2px;}
.smsg-body{white-space:pre-wrap;overflow-wrap:anywhere;}
.smsg-attach{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;margin-top:6px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.2);}
.smsg.theirs .smsg-attach{background:var(--bg-soft);}
.smsg-time{font-size:.68rem;opacity:.7;margin-top:3px;text-align:right;}
.smsg-system{align-self:center;text-align:center;font-size:.78rem;color:var(--ink-soft);padding:6px 10px;margin:6px auto 0;max-width:90%;}
.support-rate{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:6px;}
.support-rate .star-picker{margin:2px 0;}
.support-rate .star-pick{font-size:1.6rem;}
.support-rate textarea{min-height:56px;}
.support-rate .btn{align-self:flex-start;}

.support-guest{margin-bottom:8px;display:flex;flex-direction:column;gap:6px;}
.support-guest-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.support-guest-row input{padding:9px 11px;}
@media (max-width:380px){ .support-guest-row{grid-template-columns:1fr;} }
.support-compose{display:flex;align-items:flex-end;gap:6px;}
.support-compose textarea{min-height:44px;max-height:120px;resize:none;padding:10px 12px;border-radius:22px;line-height:1.35;}
.support-attach,.support-send{
  width:44px;height:44px;border-radius:50%;flex:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border:none;
}
.support-attach{background:var(--bg-soft);color:var(--ink-soft);}
.support-attach:hover{color:var(--ink);}
.support-attach input{display:none;}
.support-send{background:var(--gradient);color:#fff;box-shadow:var(--shadow-lift);}
.support-send:disabled{opacity:.5;cursor:not-allowed;}
.support-send.busy .ico{animation:spin .8s linear infinite;}
.support-attach .ico,.support-send .ico{width:20px;height:20px;}
.support-attach-preview{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:6px;border:1px solid var(--line);border-radius:var(--radius-sm);}
.support-attach-preview[hidden]{display:none;}
.support-attach-preview img{width:44px;height:44px;object-fit:cover;border-radius:8px;}
.support-attach-preview .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.support-attach-remove{background:none;border:none;cursor:pointer;color:var(--ink-soft);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.support-attach-remove:hover{background:var(--bg-soft);}

/* ---------- Report ---------- */
.report-row{display:flex;justify-content:flex-end;margin-top:10px;}
.report-btn{color:var(--ink-soft);}
.report-btn:hover{color:var(--bad);}
.report-btn-compact{
  background:none;border:none;cursor:pointer;padding:0 0 0 8px;margin:0;
  font-size:.85rem;line-height:1;vertical-align:-0.1em;opacity:.7;
}
.report-btn-compact:hover{opacity:1;}
.msg.theirs .meta{display:flex;align-items:center;gap:4px;}
.msg.theirs .meta .report-btn-compact{margin-left:auto;min-width:28px;min-height:24px;justify-content:flex-end;display:inline-flex;align-items:center;}
.report-reasons{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.report-reason{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;font-size:.92rem;font-weight:600;
}
.report-reason input{accent-color:var(--accent);width:18px;height:18px;margin:0;}
.report-reason:has(input:checked){border-color:var(--accent);background:var(--gradient-soft);}
.report-done{text-align:center;padding:8px 4px;}
.report-done-icon{width:60px;height:60px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;background:#e8f8ef;color:var(--good);}
.report-done-icon .ico{width:28px;height:28px;}
.lightbox-report{
  background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;font:inherit;font-size:.82rem;font-weight:700;
  padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;
}
.lightbox-report[hidden]{display:none;}
.lightbox-report:hover{background:rgba(255,255,255,.22);}

/* ---------- Account extras ---------- */
.account-row{display:flex;align-items:center;gap:12px;padding-top:12px;margin-top:12px;border-top:1px dashed var(--line);}
@media (max-width:420px){
  .account-row{flex-wrap:wrap;}
  .account-row .btn{width:100%;}
}

/* ---------- Admin console hand-over ---------- */
.console-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.console-icon{width:42px;height:42px;border-radius:12px;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--shadow-lift);}
.console-icon .ico{width:22px;height:22px;}
.console-steps{padding-left:20px;margin:6px 0 14px;line-height:1.55;}
.console-steps li{margin-bottom:4px;}
.console-retire{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);}
.copy-row{display:flex;gap:8px;}
.copy-row input{min-width:0;}

/* ---------- Small helpers moved out of inline styles ---------- */
.popup-link{color:#1d5fd6;font-weight:700;}
.note-bad{margin-top:8px;background:#fdecea;border-radius:8px;padding:8px;}

/* ---------- Footer: language + theme switches ---------- */
.site-footer > .footer-switches{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.theme-switch button{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;}
.theme-switch .ico{width:16px;height:16px;}

/* ---------- A little life in the brand gradient ----------
   At rest the primary buttons look exactly as before: the wide gradient's
   left half is the brand gradient. On hover or press it glides to the right
   half (orange back to pink), like the sheen on a ride or match button. */
:root{--gradient-wide:linear-gradient(120deg, #fd267a 0%, #ff5864 22.5%, #ff9a3c 50%, #ff5864 77.5%, #fd267a 100%);}
.btn-primary, .support-send, .support-fab-btn{
  background-image:var(--gradient-wide);background-size:200% 100%;background-position:0% 50%;
  transition:background-position .6s ease, filter .1s ease, transform .05s ease, box-shadow .15s ease;
}
.btn-primary:hover, .btn-primary:focus-visible, .support-send:hover:not(:disabled), .support-fab-btn:hover{background-position:100% 50%;}
.notif-dot{animation:aysPulse 2.4s ease-in-out infinite;}
@keyframes aysPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,88,100,.45);}
  50%{box-shadow:0 0 0 5px rgba(255,88,100,0);}
}
@media (prefers-reduced-motion:reduce){
  .btn-primary, .support-send, .support-fab-btn{transition:none;}
  .notif-dot{animation:none;}
}

/* =====================================================================
   Dark mode. Same brand, same layout: only the surfaces, text and tints
   change. js/theme.js (and the inline script in index.html) sets
   <html data-theme="dark"> from the device setting or the footer switch.
   ===================================================================== */
[data-theme="dark"]{
  color-scheme:dark;
  --bg-soft:#0c0b10;
  --surface:#16151b;
  --ink:#f4eff2;
  --ink-soft:#a79ea5;
  --line:#2a2731;
  --good:#3ecf8e;
  --warn:#f5a524;
  --bad:#f87171;
  --gradient-soft:linear-gradient(120deg, rgba(253,38,122,.2) 0%, rgba(255,154,60,.16) 100%);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.35);
  --shadow-lift:0 6px 18px rgba(253,38,122,.28), 0 2px 4px rgba(0,0,0,.4);
  --field:#1d1b22;
  --field-line:#34303b;
  --tint-good:rgba(62,207,142,.14);
  --tint-bad:rgba(248,113,113,.14);
  --tint-warn:rgba(245,165,36,.14);
  --tint-info:rgba(129,140,248,.16);
  --tint-neutral:rgba(255,255,255,.07);
}
/* A faint glow of the brand colours behind every page, like the dark screens
   of dating and ride apps. */
[data-theme="dark"] body{
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(253,38,122,.10), transparent 60%),
    radial-gradient(760px 420px at -8% 108%, rgba(255,154,60,.07), transparent 60%),
    var(--bg-soft);
  background-attachment:fixed;
}
[data-theme="dark"] .topbar{box-shadow:0 1px 0 var(--line);}
[data-theme="dark"] .topnav a.active{box-shadow:0 4px 14px rgba(253,38,122,.35);}
[data-theme="dark"] .card, [data-theme="dark"] .feature-card{box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);}
[data-theme="dark"] .feature-card{background:var(--surface);border:1px solid var(--line);}
[data-theme="dark"] .card-link:hover{border-color:rgba(255,88,100,.4);}

/* Fields and controls */
[data-theme="dark"] input[type=text],[data-theme="dark"] input[type=email],[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=number],[data-theme="dark"] input[type=tel],[data-theme="dark"] input[type=search],
[data-theme="dark"] input[type=date],[data-theme="dark"] input[type=time],[data-theme="dark"] textarea,[data-theme="dark"] select{
  background:var(--field);border-color:var(--field-line);
}
[data-theme="dark"] ::placeholder{color:#7d757c;}
[data-theme="dark"] .chip{background:var(--field);border-color:var(--field-line);}
[data-theme="dark"] .file-input-label{background:#1a181f;border-color:var(--field-line);}
[data-theme="dark"] .fav-btn{background:var(--surface);}
[data-theme="dark"] .btn-dark{background:#2a2731;border-color:#2a2731;}
[data-theme="dark"] .btn-danger{background:transparent;border-color:rgba(248,113,113,.35);}
[data-theme="dark"] .btn-danger-solid{background:#dc2626;border-color:#dc2626;}
[data-theme="dark"] .toast{box-shadow:0 8px 24px rgba(0,0,0,.5);border:1px solid var(--line);}
[data-theme="dark"] .toast.error{background:#dc2626;border-color:transparent;}
[data-theme="dark"] .toast.success{background:#15803d;border-color:transparent;}
[data-theme="dark"] .lang-switch button.active{background:var(--ink);color:#101014;}
[data-theme="dark"] .support-tabs button.active{background:var(--ink);color:#101014;}
[data-theme="dark"] .stars .empty, [data-theme="dark"] .star-pick.empty{color:#3a3640;}
[data-theme="dark"] .spinner{border-color:#2e2a33;border-top-color:var(--accent);}

/* Tinted chips, badges and notes */
[data-theme="dark"] .tag.do, [data-theme="dark"] .badge-completed, [data-theme="dark"] .badge-resolved,
[data-theme="dark"] .badge-verified, [data-theme="dark"] .fit-chip, [data-theme="dark"] .report-done-icon,
[data-theme="dark"] .badge-phone, [data-theme="dark"] .site-banner-success{background:var(--tint-good);color:var(--good);}
[data-theme="dark"] .tag.dont, [data-theme="dark"] .badge-disputed, [data-theme="dark"] .suspended-banner,
[data-theme="dark"] .note-bad{background:var(--tint-bad);color:#fca5a5;}
[data-theme="dark"] .badge-accepted, [data-theme="dark"] .badge-in_progress, [data-theme="dark"] .badge-under_review{background:var(--tint-warn);color:var(--warn);}
[data-theme="dark"] .badge-cancelled, [data-theme="dark"] .badge-dismissed{background:var(--tint-neutral);color:var(--ink-soft);}
[data-theme="dark"] .when-chip, [data-theme="dark"] .site-banner-info{background:var(--tint-info);color:#c7d2fe;}
[data-theme="dark"] .stat-alert, [data-theme="dark"] .legal-lang-note, [data-theme="dark"] .notice-warn,
[data-theme="dark"] .support-away, [data-theme="dark"] .site-banner-warning{background:var(--tint-warn);border-color:rgba(245,165,36,.3);color:#fcd08a;}
[data-theme="dark"] .site-banner, [data-theme="dark"] .suspended-banner{border-bottom-color:var(--line);}
[data-theme="dark"] .site-banner-close:hover{background:rgba(255,255,255,.08);}

/* Sheets, chat, lists */
[data-theme="dark"] .modal-backdrop{background:rgba(0,0,0,.65);}
[data-theme="dark"] .modal-box{background:var(--surface);border:1px solid var(--line);box-shadow:0 -8px 30px rgba(0,0,0,.5);}
[data-theme="dark"] .msg.theirs{background:#24212a;}
[data-theme="dark"] .thread-item:hover{background:rgba(255,88,100,.06);}
[data-theme="dark"] .fixed-bottom-bar{background:var(--surface);box-shadow:0 -2px 10px rgba(0,0,0,.35);}
[data-theme="dark"] .notif-item:hover{border-color:#3a3640;}
[data-theme="dark"] .notif-item.unread .notif-icon{background:var(--surface);}
[data-theme="dark"] .push-card.is-on{background:rgba(62,207,142,.08);}
[data-theme="dark"] .push-card.is-on .push-card-icon{background:var(--surface);}
[data-theme="dark"] .support-fab-hide{background:var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.5);}
[data-theme="dark"] .support-layer .support-panel{box-shadow:0 24px 60px rgba(0,0,0,.6);border:1px solid var(--line);}

/* Map: dark streets, like a ride app at night. Only the tiles are recoloured;
   pins, popups and controls keep their own colours. */
[data-theme="dark"] .leaflet-container{background:#18171c;}
[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.5);}
[data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip{background:var(--surface);color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.5);}
[data-theme="dark"] .leaflet-bar a, [data-theme="dark"] .leaflet-bar a:hover{background:var(--surface);color:var(--ink);border-bottom-color:var(--line);}
[data-theme="dark"] .leaflet-bar{border-color:var(--line);}
[data-theme="dark"] .leaflet-control-attribution{background:rgba(22,21,27,.8);color:var(--ink-soft);}
[data-theme="dark"] .leaflet-control-attribution a{color:#c9c2c8;}
[data-theme="dark"] .leaflet-container a.leaflet-popup-close-button{color:var(--ink-soft);}
[data-theme="dark"] .popup-link{color:#8fb4ff;}
/* Pins: white-ringed drops and white price tags stand out on the night map. */
[data-theme="dark"] .pin-drop{box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 4px 12px rgba(0,0,0,.6) !important;}
[data-theme="dark"] .pin-badge{background:#fff;color:#101014;box-shadow:0 4px 12px rgba(0,0,0,.5);}
[data-theme="dark"] .pin-badge.mine{background:var(--gradient);color:#fff;}

/* ---------- Continue with Google ---------- */
.btn-google{background:var(--surface);border-color:var(--line);color:var(--ink);gap:10px;margin-top:6px;}
.btn-google:hover{border-color:#cfc3c9;}
.google-g{width:18px;height:18px;flex:none;}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;color:var(--ink-soft);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line);}
[data-theme="dark"] .btn-google{background:#131314;border-color:#3a3640;color:#e3e3e3;}
[data-theme="dark"] .btn-google:hover{border-color:#57525c;}

.link-accent{color:var(--accent-text);font-weight:700;}
[data-theme="dark"]{--accent-text:#ff8a94;--good-text:#3ecf8e;--warn-text:#f5a524;--bad-text:#fca5a5;}

/* ---------- Install the app (js/install.js) ---------- */
.install-btn{
  display:flex;align-items:center;gap:12px;width:100%;max-width:420px;text-align:left;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--radius-sm);padding:10px 14px;font:inherit;cursor:pointer;box-shadow:var(--shadow);
}
.install-btn:hover{transform:translateY(-1px);}
.install-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
.install-btn-ico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--gradient);color:#fff;display:grid;place-items:center;}
.install-btn-ico .ico{width:20px;height:20px;}
.install-btn-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.install-btn-text strong{font-weight:800;font-size:.95rem;}
.install-btn-text span{font-size:.8rem;color:var(--ink-soft);}
.install-btn--hero{margin-top:14px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:none;}
.install-btn--hero .install-btn-text span{color:rgba(255,255,255,.8);}
.install-nudge{
  position:fixed;z-index:1650;
  left:calc(env(safe-area-inset-left, 0px) + 16px);
  bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);
  width:min(380px, calc(100vw - 108px));
  animation:install-in .25s ease-out;
}
.install-nudge.on-right{left:auto;right:calc(env(safe-area-inset-right, 0px) + 16px);}
.install-nudge .install-btn{max-width:none;padding-right:42px;box-shadow:0 12px 32px rgba(24,17,23,.22);}
.install-nudge-x{
  position:absolute;top:6px;right:6px;width:32px;height:32px;border:0;border-radius:8px;
  background:transparent;color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;
}
.install-nudge-x:hover{background:var(--bg-soft);}
.install-steps{padding-left:22px;margin:12px 0 16px;}
.install-steps li{margin:8px 0;line-height:1.45;}
.install-share{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--bg-soft);color:#0a84ff;vertical-align:middle;margin:0 2px;}
.install-share .ico{width:17px;height:17px;}
@keyframes install-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){.install-nudge{animation:none;}.install-btn:hover{transform:none;}}