/* ============================================================
   controls.css — all the interactive chrome + modals
   ------------------------------------------------------------
   The knobs the visitor touches and the overlays that pop up:
     · filters dropdown, sliders, checkboxes + shop chips
     · the list panel head (count, search row, sort, collapse)
     · floating "Show list" / "Filters" buttons (collapsed view)
     · the filters modal
     · the funnel overlays: signup modal, member/join unlock,
       the signup gate line, the "missing out" nudge, and the
       first-visit welcome modal

   LOADED LAST. The responsive @media blocks at the bottom of
   this file override base rules from every stylesheet, so this
   file must come after core / member-views / restaurant.
   ============================================================ */
/* ---------- filters dropdown ---------- */
.mp-dd{position:relative}
.mp-dd-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
  background:var(--paper);border-radius:var(--r-sm);padding:8px 14px;font-size:.86rem;font-weight:700;
  color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.mp-dd-btn:hover{border-color:var(--navy);background:var(--surface)}
.mp-dd.open .mp-dd-btn{border-color:var(--navy);background:var(--surface-2)}
.mp-filter-btn{width:auto;height:auto;padding:8px 14px;border-radius:var(--r-sm)}
.mp-filter-ic{display:flex;width:17px;height:17px;color:var(--navy)}
.mp-filter-ic svg{width:17px;height:17px}
.mp-filter-lbl{font-weight:700}
.mp-dd-panel{position:absolute;top:calc(100% + 9px);right:0;min-width:288px;z-index:30;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-md);
  padding:16px;display:none;max-height:min(74vh,580px);overflow-y:auto}
.mp-dd.open .mp-dd-panel{display:block}
.mp-panel-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px;
  padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.mp-panel-title{font-family:var(--slab);font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.mp-reset{border:0;background:none;padding:0;font:inherit;font-size:.8rem;font-weight:700;
  color:var(--muted-2);cursor:pointer}
.mp-reset:hover{text-decoration:underline;color:var(--muted)}
.mp-dd-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 9px}
.mp-dd-sep{height:1px;background:var(--line-2);margin:15px -16px}
.mp-dd-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mp-dd-row .mp-dd-label{margin:0}

/* sliders */
.mp-slider-val{float:right;font-weight:800;color:var(--gold-deep);text-transform:none;letter-spacing:0}
.mp-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
  background:var(--line);outline:none;margin:2px 0 16px;cursor:pointer}
.mp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--navy);border:2px solid #fff;box-shadow:0 1px 3px rgba(18,41,74,.4);cursor:pointer}
.mp-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--navy);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(18,41,74,.4);cursor:pointer}
.mp-slider:focus-visible{box-shadow:0 0 0 3px rgba(27,58,100,.22)}

/* checkboxes + shop chips */
.mp-check{display:flex;align-items:center;gap:9px;padding:6px 2px;font-size:.88rem;
  font-weight:600;color:var(--ink);cursor:pointer}
.mp-check input{accent-color:var(--navy);width:16px;height:16px;flex:none}
.mp-check-sub{color:var(--muted);font-weight:600}
.mp-check--valor{margin-top:11px;padding:9px 11px;border:1px solid var(--gold-soft);border-radius:var(--r-sm);
  background:rgba(196,162,60,.09);align-items:flex-start}
.mp-check--valor input{accent-color:var(--gold-deep)}
.mp-check--unver{margin-top:9px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);align-items:flex-start}
.mp-check--unver input{accent-color:var(--muted)}
.mp-check-tx{display:block;line-height:1.3}
.mp-check--valor .mp-check-sub,.mp-check--unver .mp-check-sub{display:block;font-size:.72rem;color:var(--muted);font-weight:600;margin-top:2px}
.mp-check--vet{margin-top:13px}
.mp-shop-acts{display:flex;gap:14px}
.mp-shop-all{border:0;background:none;padding:0;font-size:.8rem;font-weight:700;color:var(--navy);cursor:pointer}
.mp-shop-all:hover{text-decoration:underline}
.mp-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.mp-chips .mp-check{gap:0;padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:.82rem;font-weight:600;color:var(--ink-2);transition:background .15s,color .15s,border-color .15s}
.mp-chips .mp-check input{position:absolute;opacity:0;width:0;height:0;margin:0}
.mp-chips .mp-check:hover{border-color:var(--navy)}
.mp-chips .mp-check.is-on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* one-time "missing out" nudge */
.mp-nudge{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  width:min(430px,calc(100vw - 24px));background:var(--navy-deep);color:#fff;border-radius:14px;
  padding:15px 17px;box-shadow:0 18px 46px rgba(15,29,48,.45);display:flex;flex-direction:column;gap:11px}
.mp-nudge[hidden]{display:none}
.mp-nudge-tx{font-size:.92rem;font-weight:600;line-height:1.45}
.mp-nudge-tx strong{color:var(--gold-soft);font-weight:800}
.mp-nudge-actions{display:flex;gap:10px;align-items:center}
.mp-nudge-on{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:linear-gradient(100deg,#bfa640,#e3cf78 45%,#bfa640);color:#3a2c00;border:0;border-radius:8px;
  padding:11px 14px;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer}
.mp-nudge-x{background:none;border:0;color:rgba(255,255,255,.7);font:inherit;font-weight:700;cursor:pointer;padding:8px 4px}
.mp-nudge-x:hover{color:#fff}

/* signup gate — compact line at the end of the list */
.mp-gate{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 4px 14px;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--sh-sm)}
.mp-gate-tx{font-size:.9rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.mp-gate-seeall{flex:none;border:0;background:none;padding:0;font:inherit;font-size:.9rem;font-weight:800;
  color:var(--navy);cursor:pointer;white-space:nowrap}
.mp-gate-seeall:hover{color:var(--navy-deep);text-decoration:underline}

/* email signup modal */
.mp-signup{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,29,48,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.mp-signup[hidden]{display:none}
.mp-signup-card{position:relative;width:min(400px,100%);background:var(--paper);border-radius:16px;
  padding:26px 24px 24px;box-shadow:0 30px 70px rgba(15,29,48,.5)}
.mp-signup-x{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--surface-2);color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.mp-signup-x:hover{color:var(--ink)}
.mp-signup-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold-deep);background:rgba(196,162,60,.14);border-radius:var(--r-sm);
  padding:5px 10px;margin-bottom:13px}
.mp-signup-badge img{height:11px;width:auto;display:block}
.mp-signup-title{font-family:var(--slab);font-weight:800;font-size:1.34rem;line-height:1.15;color:var(--ink);
  letter-spacing:-.015em;margin:0 0 8px}
.mp-signup-tx{margin:0 0 16px;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.mp-signup-input{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;
  font:inherit;font-size:.95rem;color:var(--ink);margin-top:10px}
.mp-signup-card form .mp-signup-input:first-child{margin-top:0}
.mp-signup-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(27,58,100,.12)}
.mp-signup-select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235c6b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center}
.mp-signup-submit{width:100%;margin-top:10px;border:1.5px solid var(--navy);border-radius:var(--r-sm);padding:12px 14px;
  background:var(--paper);color:var(--navy);font:inherit;font-size:.92rem;font-weight:800;cursor:pointer;transition:background .15s}
.mp-signup-submit:hover{background:var(--surface-2)}
.mp-signup-or{text-align:center;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted-2);margin:14px 0}
.mp-signup-mil{text-align:center;font-size:.9rem;font-weight:800;color:var(--ink);margin-bottom:9px}
.mp-signup-mil .star{color:var(--gold-deep)}
.mp-signup-join{width:100%;border:1px solid rgba(196,162,60,.6);border-radius:var(--r-sm);padding:12px 14px;
  background:linear-gradient(100deg,#f0dfa6,#f7ecc6 48%,#f0dfa6);color:var(--gold-deep);font:inherit;font-size:.9rem;
  font-weight:800;cursor:pointer;transition:background .15s,border-color .15s}
.mp-signup-join:hover{background:linear-gradient(100deg,#ecd894,#f3e6b6 48%,#ecd894);border-color:var(--gold-deep)}

/* member / join unlock */
.mp-join{flex:none;margin:12px 12px 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--gold-deep);background:var(--surface);color:var(--gold-deep);
  border-radius:var(--r-sm);padding:11px 14px;font-size:.88rem;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,box-shadow .15s}
.mp-join:hover{background:#fff;box-shadow:var(--sh-sm)}
.mp-join.is-member{background:linear-gradient(100deg,#bfa640,#e3cf78 45%,#bfa640);color:#3a2c00;
  border-color:var(--gold-deep);box-shadow:var(--sh-sm)}

.mp-panel-head{display:flex;align-items:center;gap:10px;flex:none;padding:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--line-2);background:var(--paper)}
.mp-panel-head .mp-count{font-size:.78rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;margin:0}
.mp-head-ctrls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.mp-search-btn{padding:0;width:34px;justify-content:center}
.mp-search-btn svg{width:22px;height:22px;color:var(--navy)}
.mp-search-btn.is-on{background:var(--navy);border-color:var(--navy)}
.mp-search-btn.is-on svg{color:#fff}
.mp-search-row{display:flex;align-items:center;gap:8px;flex:none;padding:9px 12px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.mp-search-row[hidden]{display:none}
.mp-search-row svg{width:18px;height:18px;color:var(--muted-2);flex:none}
/* 16px min font-size stops iOS Safari from zooming the page on focus */
.mp-search-row input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:2px 0}
.mp-search-row input:focus{outline:none}
.mp-search-clear{flex:none;border:0;background:none;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 2px}
.mp-search-clear:hover{color:var(--ink)}
.mp-ctrl{height:34px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--paper);border-radius:var(--r-sm);padding:0 12px;font:inherit;font-size:.8rem;font-weight:700;
  color:var(--ink);cursor:pointer;transition:border-color .15s}
.mp-ctrl:hover{border-color:var(--navy)}
select.mp-ctrl{-webkit-appearance:none;appearance:none;padding-right:28px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%235c6b80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center}
.mp-list{flex:1;min-height:0;overflow-y:auto;padding:6px 8px 12px}
/* circular collapse button on the panel's right edge */
.mp-collapse{position:absolute;top:50%;right:-20px;transform:translateY(-50%);z-index:6;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);
  color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:5px 0 10px -3px rgba(18,41,74,.22);transition:background .15s}
.mp-collapse:hover{background:var(--surface-2)}
.mp-collapse svg{width:18px;height:18px}
.mp.list-collapsed .mp-collapse{display:none}

/* filters modal (opened from the head trigger or the collapsed Filters button) */
.mp-filters{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px}
.mp-filters[hidden]{display:none}
.mp-filters-backdrop{position:absolute;inset:0;background:rgba(15,29,48,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mp-filters-card{position:relative;z-index:1;width:min(360px,calc(100vw - 32px));max-height:84vh;overflow-y:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 30px 70px rgba(15,29,48,.4);padding:16px}
.mp-filters-card .mp-panel-top{padding-right:34px}
.mp-filters-x{position:absolute;top:13px;right:13px;z-index:2;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);cursor:pointer;padding:0}
.mp-filters-x svg{width:15px;height:15px}
.mp-filters-x:hover{color:var(--ink)}
.mp-filters-trigger .mp-filter-ic{width:15px;height:15px;color:var(--navy);display:flex}
.mp-filters-trigger .mp-filter-ic svg{width:15px;height:15px}


.mp-show-list{position:absolute;top:14px;left:14px;z-index:6;display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);padding:8px 13px 8px 11px;
  font-size:.84rem;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:var(--sh-md)}
.mp-show-list[hidden]{display:none}
.mp-show-filters{position:absolute;top:60px;left:14px;z-index:6;display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:var(--paper);border-radius:var(--r-sm);padding:8px 13px 8px 11px;
  font-size:.84rem;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:var(--sh-md)}
.mp-show-filters[hidden]{display:none}
.mp-show-filters .mp-filter-ic{width:15px;height:15px;color:var(--navy);display:flex}
.mp-show-filters .mp-filter-ic svg{width:15px;height:15px}
.mp-lt-ic{width:14px;height:11px;flex:none;
  background:linear-gradient(currentColor,currentColor) left top/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) left center/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/100% 2px no-repeat}

/* ---------- welcome modal (first visit) — centered card ---------- */
.mp-welcome{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(15,29,48,.55);backdrop-filter:blur(3px)}
.mp-welcome[hidden]{display:none}
.mp-welcome-card{position:relative;width:min(440px,100%);max-height:calc(100vh - 32px);overflow-y:auto;
  background:var(--paper);border-radius:var(--r);border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(15,29,48,.4);padding:30px 30px 22px;
  animation:welcomePop .24s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes welcomePop{from{transform:translateY(12px) scale(.98)}to{transform:none}}
.mp-welcome-x{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;border:0;background:none;color:var(--muted-2);cursor:pointer;
  transition:background .15s,color .15s}
.mp-welcome-x svg{width:16px;height:16px}
.mp-welcome-x:hover{background:var(--surface-2);color:var(--ink)}
.mp-welcome-badge{display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--gold-deep);background:rgba(196,162,60,.14);
  border-radius:var(--r-sm);padding:5px 10px;margin-bottom:15px}
.mp-welcome-badge img{height:12px;width:auto;display:block;position:relative;top:.5px}
.mp-welcome-title{font-family:var(--slab);font-weight:800;font-size:1.5rem;line-height:1.15;
  color:var(--ink);letter-spacing:-.015em;margin:0 0 11px}
.mp-welcome-sub{margin:0 0 20px;font-size:.92rem;line-height:1.55;color:var(--ink-2);font-weight:500}
.mp-welcome-learn{color:var(--navy);font-weight:800;text-decoration:none;white-space:nowrap}
/* official App Store / Google Play badges */
.mp-welcome-stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 20px}
.mp-store{display:inline-flex;text-decoration:none;transition:transform .12s,filter .12s}
.mp-store:hover{transform:translateY(-1px);filter:brightness(1.08)}
.mp-store img{height:46px;width:auto;display:block}
.mp-welcome-promo{margin:0 0 14px;font-size:.86rem;font-weight:700;color:var(--gold-deep);text-align:center}
.mp-welcome-promo strong{font-weight:800}
.mp-welcome-learn:hover{text-decoration:underline}
.mp-welcome-paths{display:flex;flex-direction:column;gap:10px}
.mp-welcome-path{display:flex;align-items:center;gap:13px;text-decoration:none;cursor:pointer;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;background:var(--paper);
  font:inherit;transition:border-color .15s,background .15s,box-shadow .15s}
.mp-welcome-path:hover{border-color:var(--navy);background:var(--surface);box-shadow:var(--sh-sm)}
.mp-welcome-path--primary{border-color:var(--navy);background:var(--navy)}
.mp-welcome-path--primary:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.mp-welcome-path-ic{display:flex;width:40px;height:40px;flex:none;border-radius:var(--r-sm);
  align-items:center;justify-content:center;background:var(--surface-2);color:var(--navy)}
.mp-welcome-path-ic svg{width:21px;height:21px}
.mp-welcome-path--primary .mp-welcome-path-ic{background:rgba(255,255,255,.14);color:var(--gold-soft)}
.mp-welcome-path-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.mp-welcome-path-tx strong{font-size:.98rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.mp-welcome-path-tx>span{font-size:.79rem;font-weight:600;color:var(--muted)}
.mp-welcome-path--primary .mp-welcome-path-tx strong{color:#fff}
.mp-welcome-path--primary .mp-welcome-path-tx>span{color:rgba(255,255,255,.78)}
.mp-welcome-path-go{flex:none;font-size:1.15rem;font-weight:800;color:var(--navy);transition:transform .15s}
.mp-welcome-path--primary .mp-welcome-path-go{color:var(--gold-soft)}
.mp-welcome-path:hover .mp-welcome-path-go{transform:translateX(3px)}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .mp-tagline{display:none}
}
@media (max-width:720px){
  .mp-bar{flex-wrap:nowrap;gap:10px;height:auto;padding:11px 12px}
  .mp-brand-lockup{order:0;gap:10px}
  .mp-brand{height:28px}
  .mp-tagline{display:none}
  .mp-info-btn{width:30px;height:30px}
  /* info popover becomes a centered glassy modal on mobile */
  .mp-info.open::before{content:"";position:fixed;inset:0;z-index:59;
    background:rgba(15,29,48,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .mp-info-panel{position:fixed;left:50%;top:50%;right:auto;transform:translate(-50%,-50%);
    width:min(360px,calc(100vw - 32px));z-index:60;padding:24px 22px}
  .mp-info-x{display:flex;align-items:center;justify-content:center;position:absolute;top:12px;right:12px;
    width:30px;height:30px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);cursor:pointer;padding:0}
  .mp-info-x svg{width:16px;height:16px}
  .mp-bar-spacer{display:none}
  /* CTA moves into the header as a plain text link */
  .mp-auth{order:2;position:static;margin-left:auto;flex:0 0 auto;z-index:auto}
  .mp:not(.list-collapsed) .mp-auth{display:flex}
  .mp-cta,.mp-cta:not(.is-member){width:auto;justify-content:flex-end;padding:8px 2px;font-size:.82rem;
    background:none;border:0;border-radius:0;box-shadow:none;color:var(--navy);white-space:normal;text-align:right;
    max-width:190px;line-height:1.25}
  .mp-cta:not(.is-member)::after{display:none}
  .mp-cta:hover{background:none;box-shadow:none}
  .mp-cta .star{display:none}
  /* map controls to the top-right so the pulled-up list never hides them */
  .maplibregl-ctrl-bottom-right{top:12px;bottom:auto;right:10px}
  /* collapse via tapping the map on mobile — no edge button */
  .mp-collapse{display:none}
  .mp-dd-panel{width:min(340px,calc(100vw - 24px));min-width:0;right:0}
  .mp-panel{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;height:52%;
    border-right:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -6px 22px rgba(18,41,74,.1)}
  .mp.list-collapsed .mp-panel{transform:translateY(101%)}
  /* a tapped place's detail fills the sheet up to the header (not a short overlay) */
  .mp.detail .mp-panel{height:100%;border-radius:0}
  .mp-hero{height:clamp(200px,32vh,300px)}  /* bigger photo showcase on mobile */
  .mp.dragging .mp-panel{transition:none}
  .mp-grip{display:flex;align-items:center;justify-content:center;flex:none;height:24px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
  .mp-grip::before{content:"";width:42px;height:5px;border-radius:3px;background:var(--line)}
  .mp-grip:active{cursor:grabbing}
  .mp-welcome-card{padding:22px 20px 18px}
  .mp-welcome-badge{margin-bottom:12px}
  .mp-welcome-title{font-size:1.24rem;margin-bottom:9px}
  .mp-welcome-sub{font-size:.86rem;line-height:1.5;margin-bottom:18px}
  .mp-welcome-path{padding:12px 12px;gap:10px}
  .mp-welcome-path-ic{width:34px;height:34px}
  .mp-welcome-path-ic svg{width:18px;height:18px}
  .mp-welcome-path-tx strong{font-size:.85rem;white-space:nowrap}
  .mp-welcome-path-tx>span{font-size:.75rem}
  .mp-welcome-path-go{font-size:1rem}
}