/* =========================================================
   Dominican Experience — mobile first
   ========================================================= */
:root{
  --lime:#d4ff00;
  --lime-dim:#b8e000;
  --bg:#0b0b0b;
  --surface:#161616;
  --surface-2:#1f1f1f;
  --line:rgba(255,255,255,.09);
  --text:#ffffff;
  --muted:#9a9a9a;
  --radius:22px;
  --radius-sm:16px;
  --pad:18px;
  --tab-h:74px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,.8,.3,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:var(--text);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
input,select{font:inherit}
::-webkit-scrollbar{width:0;height:0}

.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------- app shell ---------- */
.app{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
}
@media (min-width:900px){
  body{background:#0a0a0a}
  .app{
    max-width:430px;
    height:100dvh;
    border-radius:0;
  }
}

.screen{min-height:100dvh}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--pad) 12px;
  background:linear-gradient(180deg,var(--bg) 72%,transparent);
}
.brand img{width:auto;height:42px}
.hero-logo{width:auto;height:36px;object-fit:contain}

.icon-btn{
  position:relative;flex:0 0 auto;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-2);
  color:#fff;
  transition:transform .18s var(--ease),background .2s;
}
.icon-btn:active{transform:scale(.92)}
.icon-btn.square{border-radius:16px;width:52px;height:52px;background:var(--surface-2)}
.icon-btn.has-dot::after{
  content:"";position:absolute;top:9px;right:10px;
  width:9px;height:9px;border-radius:50%;
  background:#ff3b30;border:2px solid var(--surface-2);
}
.icon-btn.heart svg{transition:fill .2s,stroke .2s}
.icon-btn.heart.is-on svg{fill:#ff3b30;stroke:#ff3b30}

/* ---------- views ---------- */
.view{display:none;padding-bottom:calc(var(--tab-h) + var(--safe-b) + 24px)}
.view.is-active{display:block;animation:fade .28s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.view-head{padding:6px var(--pad) 4px}
.view-head h1{font-size:26px;font-weight:800;letter-spacing:-.02em}

/* ---------- search ---------- */
.searchrow{display:flex;gap:10px;padding:4px var(--pad) 14px}
.search{
  position:relative;flex:1;
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 16px;
  background:var(--surface-2);border-radius:26px;
}
.search-ic{color:var(--muted);flex:0 0 auto}
.search input{
  flex:1;min-width:0;height:100%;
  border:0;background:none;color:#fff;font-size:15px;outline:none;
}
.search input::placeholder{color:var(--muted)}
.search-clear{color:var(--muted);font-size:22px;line-height:1;padding:4px}

/* ---------- chips ---------- */
.chips{
  display:flex;gap:10px;overflow-x:auto;
  padding:0 var(--pad) 18px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;align-items:center;gap:8px;
  height:44px;padding:0 20px;border-radius:22px;
  background:var(--surface-2);color:#fff;
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background .2s,color .2s,transform .18s var(--ease);
}
.chip:active{transform:scale(.95)}
.chip.is-active{background:var(--lime);color:#0b0b0b;font-weight:700}
.chip svg{width:18px;height:18px}

/* ---------- sections ---------- */
.section{padding:0 var(--pad) 26px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.section-head h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.link{color:var(--lime);font-size:14px;font-weight:600}

.cards{display:grid;gap:16px}

/* ---------- big card ---------- */
.card{
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  background:var(--surface);
  transition:transform .2s var(--ease);
}
.card:active{transform:scale(.985)}
.card-media{position:relative;aspect-ratio:4/3.1;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0 18%,rgba(0,0,0,.05) 38%,rgba(0,0,0,.72) 78%,rgba(0,0,0,.94) 100%);
}
.card-fav{
  position:absolute;top:14px;right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(20,20,20,.5);backdrop-filter:blur(6px);
  color:#fff;
}
.card-fav.is-on svg{fill:#ff3b30;stroke:#ff3b30}
.card-badge{
  position:absolute;top:16px;left:16px;z-index:2;
  padding:6px 12px;border-radius:999px;
  background:var(--lime);color:#0b0b0b;
  font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.card-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding:16px 14px 18px;
}
.card-foot > div{flex:1;min-width:0}
.card-place{display:block;color:var(--lime);font-size:13px;font-weight:600;margin-bottom:2px}
.card-name{font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-meta{display:flex;gap:10px;color:#d5d5d5;font-size:12px;margin-top:6px}
.card-meta span{display:flex;align-items:center;gap:4px}
.card-meta svg{width:13px;height:13px}
.card-meta .meta-price{color:var(--lime);font-weight:700;font-size:13px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 18px;border-radius:999px;
  background:var(--lime);color:#0b0b0b;
  font-size:15px;font-weight:700;white-space:nowrap;text-decoration:none;
  transition:transform .18s var(--ease),background .2s;
}
.btn:active{transform:scale(.95);background:var(--lime-dim)}
.btn-lg{width:100%;height:56px;font-size:16px}
.btn.ghost{background:transparent;color:var(--muted);font-weight:500}

/* ---------- compact card (list) ---------- */
.cards.compact{gap:12px}
.rowcard{
  display:flex;gap:12px;align-items:center;
  padding:10px;border-radius:var(--radius-sm);
  background:var(--surface);
  transition:transform .2s var(--ease);
}
.rowcard:active{transform:scale(.985)}
.rowcard img{width:96px;height:82px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.rowcard-body{flex:1;min-width:0}
.rowcard-body .card-place{font-size:12px}
.rowcard-body h3{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rowcard .meta{display:flex;gap:8px;color:var(--muted);font-size:12px;margin-top:4px}
.rowcard .price-sm{flex:0 0 auto;text-align:right;padding-right:6px}
.rowcard .price-sm b{display:block;color:var(--lime);font-size:16px;font-weight:800}
.rowcard .price-sm span{font-size:11px;color:var(--muted)}

.empty{color:var(--muted);text-align:center;padding:26px 0;font-size:14px}

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed;z-index:40;
  left:50%;transform:translateX(-50%);
  bottom:calc(14px + var(--safe-b));
  width:min(calc(100% - 32px),448px);
  height:var(--tab-h);
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;
  padding:0 12px;
  background:rgba(24,24,24,.92);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:38px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.tab{
  justify-self:center;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:background .22s var(--ease),color .22s,transform .18s var(--ease);
}
.tab svg{width:23px;height:23px}
.tab:active{transform:scale(.9)}
.tab.is-active{background:var(--lime);color:#0b0b0b}
.tab.is-active svg{stroke-width:2}

/* ---------- map (Leaflet) ---------- */
.map{
  height:300px;margin:8px var(--pad) 22px;
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);
  background:#101410;
  z-index:0;                       /* que no se monte sobre el tabbar */
}
.leaflet-container{background:#101410;font-family:inherit}
.leaflet-tile-pane{filter:saturate(.85) brightness(1.35) contrast(.95)}

.zone-pin{
  width:auto!important;height:auto!important;
  white-space:nowrap;
}
.zone-pin span{
  display:inline-block;transform:translate(-50%,-140%);
  padding:7px 13px;border-radius:999px;
  background:rgba(12,12,12,.88);border:1px solid var(--line);
  color:#fff;font-size:12px;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  transition:background .2s,color .2s,transform .2s var(--ease);
}
.zone-pin span::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--lime);margin-right:7px;vertical-align:1px;
}
.zone-pin.left span{transform:translate(-94%,-140%)}
.zone-pin.right span{transform:translate(-6%,-140%)}
.zone-pin.is-on span{
  background:var(--lime);color:#0b0b0b;border-color:var(--lime);font-weight:700;
  transform:translate(-50%,-150%) scale(1.04);
}
.zone-pin.is-on span::before{background:#0b0b0b}
.zone-pin.left.is-on span{transform:translate(-94%,-150%) scale(1.04)}
.zone-pin.right.is-on span{transform:translate(-6%,-150%) scale(1.04)}

/* controles y créditos en oscuro */
.leaflet-control-zoom a{
  background:rgba(18,18,18,.92)!important;color:#fff!important;
  border-color:var(--line)!important;
}
.leaflet-control-zoom a:hover{background:#222!important}
.leaflet-control-attribution{
  background:rgba(10,10,10,.7)!important;color:#7a7a7a!important;font-size:10px;
}
.leaflet-control-attribution a{color:#9a9a9a!important}

/* ---------- cart / your trip ---------- */
.cart{display:grid;gap:12px;margin-bottom:20px}
.cart-line{
  display:flex;gap:12px;align-items:center;
  padding:12px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
}
.cart-line img{width:70px;height:70px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.cart-line .b-body{flex:1;min-width:0}
.cart-line h3{font-size:15px;font-weight:700}
.cart-line .b-when{color:var(--lime);font-size:12px;font-weight:600;margin-top:2px}
.cart-line .b-meta{color:var(--muted);font-size:12px;margin-top:3px}
.line-end{display:grid;justify-items:end;gap:6px;flex:0 0 auto}
.line-end b{font-size:16px;font-weight:800}
.b-del{color:var(--muted);padding:2px 4px;font-size:15px;line-height:1}

.cart-summary{
  padding:18px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);
  display:grid;gap:10px;
}
.sum-row{display:flex;align-items:center;justify-content:space-between;font-size:14px}
.sum-row b{font-size:16px;font-weight:700}
.discount-row{color:var(--lime)}
.discount-row b{color:var(--lime)}
.total-row{
  padding-top:10px;border-top:1px solid var(--line);
  font-size:16px;font-weight:600;
}
.total-row b{color:var(--lime);font-size:24px;font-weight:800}
.cart-summary .btn{margin-top:4px}
.reassure{color:var(--muted);font-size:12px;text-align:center;line-height:1.5}

.empty-block{display:grid;justify-items:center;gap:14px;padding:38px 0;color:var(--muted);text-align:center}
.empty-mark{width:64px;opacity:.5}

/* ---------- tab badge + whatsapp ---------- */
.tab{position:relative}
.tab-badge{
  position:absolute;top:4px;right:2px;
  min-width:19px;height:19px;padding:0 5px;border-radius:10px;
  background:var(--lime);color:#0b0b0b;
  font-size:11px;font-weight:800;line-height:19px;text-align:center;
  border:2px solid #181818;
}
.tab.is-active .tab-badge{background:#0b0b0b;color:var(--lime);border-color:var(--lime)}
.icon-btn.wa{color:var(--muted)}
.icon-btn.wa svg{width:24px;height:24px;stroke-width:1.7}
.lime-dot{
  background:var(--lime);color:#0b0b0b;
  font-size:10px;font-weight:800;
}

/* ---------- checkout / success ---------- */
.sheet-sub{margin:-6px 0 4px}
.offer{display:grid;gap:8px;padding:2px 0 6px}
.offer h2{font-size:24px;letter-spacing:-.02em}
.offer p{font-size:14px;line-height:1.55}
.consent{
  display:flex;gap:11px;align-items:flex-start;
  padding:2px 4px 4px;color:var(--muted);font-size:12.5px;line-height:1.45;
  cursor:pointer;
}
.consent input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:20px;height:20px;margin-top:1px;border-radius:6px;
  border:1.5px solid #3d3d3d;background:var(--surface-2);cursor:pointer;
  transition:background .18s,border-color .18s;
}
.consent input:checked{
  background:var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4.5 4.5L19 7'/></svg>") center/14px no-repeat;
  border-color:var(--lime);
}
.member-info{width:100%;display:grid;gap:6px;margin-top:8px}
.small-link{font-size:13px;height:34px;margin-top:-6px}
.offer-tag{
  justify-self:start;padding:5px 12px;border-radius:999px;
  background:var(--lime);color:#0b0b0b;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.success{display:grid;justify-items:center;gap:10px;text-align:center;padding:8px 0 6px}
.success h2{font-size:22px}
.success p{font-size:14px;line-height:1.55}
.success-mark{
  width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--lime);color:#0b0b0b;margin-bottom:4px;
}
.success-mark svg{width:32px;height:32px;stroke-width:2.6}
.ref{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  padding:14px 16px;border-radius:16px;background:var(--surface-2);margin-top:4px;
}
.ref span{color:var(--muted);font-size:13px}
.ref b{color:var(--lime);font-size:17px;letter-spacing:.02em}
.ok-items{width:100%;display:grid;gap:6px;margin-top:2px}
.ok-item{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#c9c9c9}
.ok-item b{color:#fff;font-weight:600;white-space:nowrap}

/* =========================================================
   DETAIL
   ========================================================= */
.detail{padding-bottom:calc(96px + var(--safe-b))}
.detail-hero{position:relative;height:min(52vh,430px)}
.detail-hero.is-art{height:min(40vh,330px)}
.detail-hero > img{width:100%;height:100%;object-fit:cover}
.detail-hero > img.is-art{object-fit:contain;background:#0d0f0c}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0 18%,transparent 42%,var(--bg) 99%);
}
.topbar.over{
  position:absolute;top:0;left:0;right:0;
  background:none;gap:10px;
}
.topbar.over .icon-btn{background:rgba(15,15,15,.5);backdrop-filter:blur(8px)}
.topbar.over .hero-logo{flex:0 1 auto;min-width:0;margin:0 auto 0 2px}

.detail-body{position:relative;margin-top:-46px;padding:0 var(--pad)}
.detail-title{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.place{color:var(--lime);font-size:14px;font-weight:600}
.detail-title h1{font-size:27px;font-weight:800;letter-spacing:-.025em;line-height:1.1;margin-top:2px}
.price{display:flex;align-items:baseline;gap:3px;flex:0 0 auto}
.price b{color:var(--lime);font-size:29px;font-weight:800;letter-spacing:-.02em}
.price span{color:var(--muted);font-size:13px}

.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.thumbs button{border-radius:14px;overflow:hidden;aspect-ratio:1/.86;border:2px solid transparent;transition:border-color .2s}
.thumbs img{width:100%;height:100%;object-fit:cover}
.thumbs button.is-on{border-color:var(--lime)}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:26px}
.fact{
  display:grid;justify-items:center;gap:1px;
  padding:14px 6px;border-radius:18px;background:var(--surface);
}
.fact svg{color:var(--lime);width:20px;height:20px;margin-bottom:4px}
.fact-ic{display:flex;line-height:0}
.fact b{font-size:14px;font-weight:700}
.fact span{font-size:11px;color:var(--muted)}

.block{margin-bottom:26px}
.block h2{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.block p{color:#c9c9c9;font-size:15px;line-height:1.6}
.includes{display:grid;gap:9px}
.includes li{display:flex;gap:10px;align-items:flex-start;color:#c9c9c9;font-size:14.5px}
.includes li::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;border-radius:50%;
  background:var(--lime);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4.5 4.5L19 7'/></svg>") center/16px no-repeat,linear-gradient(#000,#000);
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12 4.5 4.5L19 7'/></svg>") center/16px no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.meet{display:flex;gap:10px;align-items:flex-start;color:#c9c9c9;font-size:14.5px;line-height:1.55}
.meet svg{color:var(--lime);flex:0 0 auto;margin-top:2px}

.rail{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;margin:0 calc(var(--pad)*-1);padding-inline:var(--pad)}
.rail-card{flex:0 0 62%;border-radius:18px;overflow:hidden;position:relative;background:var(--surface)}
.rail-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rail-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.rail-card .rail-foot{position:absolute;left:12px;right:12px;bottom:11px;z-index:2}
.rail-card h3{font-size:15px;font-weight:700}
.rail-card span{color:var(--lime);font-size:12px;font-weight:600}

.bookbar{
  position:fixed;z-index:40;
  left:50%;transform:translateX(-50%);
  bottom:calc(14px + var(--safe-b));
  width:min(calc(100% - 32px),448px);
  display:flex;align-items:center;gap:12px;
  padding:10px;border-radius:40px;
  background:rgba(18,18,18,.92);backdrop-filter:blur(18px);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.bookbar-cart{
  position:relative;flex:0 0 auto;
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;
  background:#0f0f0f;color:var(--muted);
  transition:transform .18s var(--ease),color .2s;
}
.bookbar-cart svg{width:23px;height:23px}
.bookbar-cart:active{transform:scale(.92)}
.bookbar-cart .tab-badge{border-color:#0f0f0f}

/* =========================================================
   SHEETS / TOAST
   ========================================================= */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);animation:fade .2s}
.sheet{
  position:fixed;z-index:60;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:480px;
  display:grid;gap:12px;
  padding:10px var(--pad) calc(24px + var(--safe-b));
  background:var(--surface);
  border-radius:28px 28px 0 0;
  border-top:1px solid var(--line);
  animation:up .32s var(--ease);
}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
.sheet-grip{width:44px;height:4px;border-radius:2px;background:#3a3a3a;justify-self:center;margin-bottom:6px}
.sheet h2{font-size:20px;font-weight:800;margin-bottom:4px}
.field{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:16px;background:var(--surface-2);
}
.field > span{color:var(--muted);font-size:14px;display:flex;align-items:baseline;gap:6px}
.req{color:var(--lime);font-style:normal}
.opt{color:#5f5f5f;font-size:11px;font-style:normal;text-transform:uppercase;letter-spacing:.04em}
.field input{
  border:0;background:none;color:#fff;font-size:15px;text-align:right;outline:none;
  max-width:60%;
}
.field input::-webkit-calendar-picker-indicator{filter:invert(1) sepia(1) saturate(6) hue-rotate(30deg)}
.stepper{display:flex;align-items:center;gap:16px}
.stepper button{
  width:32px;height:32px;border-radius:50%;background:#2c2c2c;
  display:grid;place-items:center;font-size:18px;line-height:1;
}
.stepper b{min-width:18px;text-align:center;font-weight:700}
.total{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 2px}
.total > div{display:grid;gap:1px}
.total span{color:var(--muted)}
.total em{font-style:normal;color:#6f6f6f;font-size:12px}
.total b{color:var(--lime);font-size:24px;font-weight:800}
output{color:var(--lime);font-weight:700}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:#333;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--lime);cursor:pointer;
}
.segment{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;background:var(--surface-2);border-radius:16px}
.segment button{padding:11px 0;border-radius:12px;font-size:14px;color:var(--muted)}
.segment button.is-active{background:var(--lime);color:#0b0b0b;font-weight:700}
.toast{
  position:fixed;z-index:80;left:50%;bottom:calc(var(--tab-h) + 28px + var(--safe-b));
  transform:translate(-50%,14px);
  max-width:min(84%,380px);
  padding:13px 20px;border-radius:999px;
  background:var(--lime);color:#0b0b0b;
  font-size:14px;font-weight:700;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s var(--ease);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}