/* Shore Pass — mobile-first home (new app design). Loaded after app.css. */
.mbody{background:#0e1015; margin:0}
.mshell{max-width:520px; margin:0 auto; min-height:100vh; background:var(--sp-bg);
  position:relative; padding-bottom:96px; overflow:hidden}

/* ---------- Header ---------- */
.mhead{background:var(--sp-surface); padding:16px 16px 14px; border-bottom:1px solid var(--sp-line); position:sticky; top:0; z-index:20}
.mhead__row{display:flex; align-items:center; gap:12px}
.mhead .sp-stamp{flex:0 0 auto}
.mhead__titles{flex:1; min-width:0}
.mhead__eyebrow{margin:0; text-transform:uppercase; letter-spacing:.15em; font-size:11px; font-weight:800; color:var(--sp-slate-2)}
.mhead__hi{margin:1px 0 0; font-family:var(--sp-font-display); font-size:24px; line-height:1.05; color:var(--sp-ink)}
.mhead__ico{width:20px; height:20px; color:var(--sp-ink-2)}
.mbell{position:relative; width:46px; height:46px; border:1px solid var(--sp-line); border-radius:13px;
  display:grid; place-items:center; background:var(--sp-surface); flex:0 0 auto}
.mbell__dot{position:absolute; top:-7px; right:-7px; background:var(--sp-red); color:#fff; font-size:10px;
  font-weight:800; min-width:19px; height:19px; border-radius:10px; display:grid; place-items:center; padding:0 4px; border:2px solid #fff}
.mavatar{width:46px; height:46px; border-radius:50%; background:var(--sp-red); color:#fff; display:grid;
  place-items:center; font-weight:800; font-size:14px; flex:0 0 auto; text-decoration:none}
.msearch{margin-top:14px; display:flex; align-items:center; gap:10px; background:var(--sp-bg);
  border:1px solid var(--sp-line); border-radius:15px; padding:13px 15px}
.msearch__ico{width:20px; height:20px; color:var(--sp-slate-2); flex:0 0 auto}
.msearch input{border:none; background:none; outline:none; font:inherit; font-size:15px; color:var(--sp-ink); flex:1; min-width:0}
.msearch--ac{position:relative}
.msearch-ac{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; background:var(--sp-surface);
  border:1px solid var(--sp-line); border-radius:14px; box-shadow:var(--sp-shadow-2); overflow:hidden; max-height:320px; overflow-y:auto}
.msearch-ac__item{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:11px 15px;
  text-decoration:none; color:inherit; border-top:1px solid var(--sp-line-2)}
.msearch-ac__item:first-child{border-top:none}
.msearch-ac__item:hover,.msearch-ac__item.is-active{background:var(--sp-blue-soft)}
.msearch-ac__name{font-weight:700; font-size:14px; color:var(--sp-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msearch-ac__country{flex:0 0 auto; font-size:12px; color:var(--sp-slate)}
.msearch-ac__empty{padding:13px 15px; font-size:13px; color:var(--sp-slate)}

/* ---------- Layout ---------- */
.mwrap{padding:16px}
.msec{margin-top:18px}
.msec__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:13px}
.msec__title{margin:0; font-family:var(--sp-font-display); font-size:21px; color:var(--sp-ink)}
.msec__link{color:var(--sp-blue); font-weight:700; font-size:14px; text-decoration:none}

/* ---------- Hero status card ---------- */
.mhero{background:linear-gradient(180deg,#161b25 0%,#0e1218 100%); border-radius:22px; overflow:hidden;
  color:#fff; box-shadow:0 14px 36px rgba(8,12,20,.28)}
.mhero__top{display:flex; align-items:center; gap:14px; padding:15px 16px; text-decoration:none; color:#fff}
.mhero__sg{flex:0 0 auto; width:48px; height:48px; border-radius:15px; background:var(--sp-red); color:#fff;
  display:grid; place-items:center; font-family:var(--sp-font-display); font-weight:700; font-size:17px;
  box-shadow:0 6px 18px rgba(211,32,39,.5)}
.mhero__port{flex:1; min-width:0; display:flex; flex-direction:column}
.mhero__port strong{font-family:var(--sp-font-display); font-size:23px; line-height:1.05}
.mhero__port span{color:#94a1b2; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mhero__status{flex:0 0 auto; align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-weight:800; font-size:11px; padding:6px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em}
.mhero__status::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor}
.mhero__status--ok{background:rgba(54,208,122,.16); color:#36d07a}
.mhero__status--cond{background:rgba(224,140,27,.18); color:#f0a73e}
.mhero__status--no{background:rgba(211,32,39,.2); color:#ff6b71}
.mhero__status--muted{background:rgba(255,255,255,.1); color:#aeb8c6}
.mhero__timer{padding:2px 16px 14px}
.mhero__label{margin:2px 0 5px; text-transform:uppercase; letter-spacing:.09em; font-size:12px; font-weight:800; color:#ef9499}
.mhero__count{margin:0; font-family:var(--sp-font-display); font-size:29px; color:#fff; font-variant-numeric:tabular-nums; line-height:1.1}
.mhero__count.is-due{color:#ff6b71}
.mhero__set{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px}
.mhero__time{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff;
  border-radius:10px; padding:9px 11px; font:inherit; font-size:14px; color-scheme:dark}
.mhero__setbtn{background:var(--sp-red); color:#fff; border:none; border-radius:10px; padding:10px 14px;
  font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit}
.mhero__setbtn:hover{background:var(--sp-red-deep)}
.mhero__clear{background:none; border:none; color:#94a1b2; font-weight:700; font-size:12.5px; text-decoration:underline; cursor:pointer}
.mhero__weather{display:flex; align-items:center; gap:10px; padding:11px 16px;
  background:linear-gradient(90deg,#2f6fd6,#5189e2); color:#fff}
.mhero__wico{width:24px; height:24px; flex:0 0 auto; opacity:.95}
.mhero__temp{font-family:var(--sp-font-display); font-size:26px; font-weight:700}
.mhero__wdesc{font-size:14px; flex:1}
.mhero__tide{font-size:10px; text-align:right; letter-spacing:.06em; opacity:.9; line-height:1.3}
.mhero__tide strong{font-size:13px}

/* ---------- Card (currency) ---------- */
.mcard{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:18px; box-shadow:var(--sp-shadow-1); margin-top:14px; overflow:hidden}
.mcard__head{display:flex; align-items:center; gap:8px; padding:12px 16px 2px; font-family:var(--sp-font-display);
  text-transform:uppercase; letter-spacing:.05em; color:var(--sp-red); font-size:14px}
.mcard__ico{width:18px; height:18px}
.mfx__body{padding:4px 16px 13px}
.mfx .sp-fx{margin-top:6px}
.mfx__rate{margin:10px 0 0; font-size:13px; color:var(--sp-slate); font-weight:600}

/* Port money-exchange details, kept inside the currency widget */
.mfx-money{margin-top:13px; padding-top:13px; border-top:1px solid var(--sp-line)}
.mfx-money__head{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; color:var(--sp-green, #16A34A)}
.mfx-money__head .sp-ico{flex:0 0 auto; color:var(--sp-green, #16A34A)}
.mfx-money__head > span{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mfx-money__time{flex:0 0 auto; font-weight:700; font-size:11px; color:var(--sp-slate); background:var(--sp-line-2); padding:3px 9px; border-radius:999px}
.mfx-money__txt{margin:7px 0 0; font-size:13px; color:var(--sp-ink-2); line-height:1.5; white-space:pre-line}

/* ---------- Live photo ---------- */
.mshot{display:block; position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/11; background:var(--sp-line-2)}
.mshot img{width:100%; height:100%; object-fit:cover; display:block}
.mshot__count{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  background:rgba(15,20,28,.66); color:#fff; padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700; backdrop-filter:blur(3px)}
.mshot__tag{position:absolute; top:12px; right:12px; background:var(--sp-red); color:#fff; font-family:var(--sp-font-display);
  text-transform:uppercase; letter-spacing:.04em; font-size:13px; font-weight:700; padding:8px 12px; border-radius:8px;
  transform:rotate(3deg); box-shadow:0 6px 16px rgba(211,32,39,.4)}

/* ---------- Horizontal tiles (transport) ---------- */
.mscroll{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; margin:0 -2px}
.mscroll::-webkit-scrollbar{display:none}
.mscroll{scrollbar-width:none}
.mtile{position:relative; flex:0 0 150px; scroll-snap-align:start; border-radius:18px; padding:16px;
  min-height:150px; display:flex; flex-direction:column; color:#fff; text-decoration:none; box-shadow:var(--sp-shadow-1)}
.mtile--blue{background:linear-gradient(160deg,#4f86e0,#2f6fd6)}
.mtile--green{background:linear-gradient(160deg,#34b36a,#1f9a55)}
.mtile--amber{background:linear-gradient(160deg,#eaa53e,#d4861b)}
a.mtile{text-decoration:none}
.mtile__ico{width:34px; height:34px; opacity:.95}
.mtile__pill{position:absolute; left:16px; bottom:58px; background:rgba(15,20,28,.4); color:#fff;
  font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px}
.mtile__label{margin-top:auto; font-weight:800; font-size:15px}
.mtile__sub{font-size:12px; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Getting around — featured transport card + car driving along the route track */
.gx-ride{display:block; text-decoration:none; color:inherit; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:18px; padding:16px; box-shadow:var(--sp-shadow-1); margin-bottom:14px}
.gx-ride__top{display:flex; align-items:center; gap:14px}
.gx-ride__badge{flex:0 0 auto; width:48px; height:48px; border-radius:14px; background:var(--sp-blue-soft); color:var(--sp-blue); display:grid; place-items:center}
.gx-ride__badge .sp-ico{width:26px; height:26px}
.gx-ride__info{flex:1; min-width:0; display:flex; flex-direction:column}
.gx-ride__eyebrow{font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--sp-red)}
.gx-ride__name{font-family:var(--sp-font-display); font-size:18px; font-weight:700; color:var(--sp-ink); line-height:1.1}
.gx-ride__sub{font-size:12.5px; color:var(--sp-slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.gx-ride__time{flex:0 0 auto; font-weight:800; font-size:13px; color:var(--sp-ink-2); background:var(--sp-bg-2); padding:6px 11px; border-radius:999px; white-space:nowrap}
.gx-track{position:relative; height:34px; margin-top:14px; background:var(--sp-bg-2); border-radius:10px; overflow:hidden}
.gx-track__dot{position:absolute; top:50%; transform:translateY(-50%); width:13px; height:13px; border-radius:50%; border:3px solid var(--sp-surface)}
.gx-track__dot--start{left:10px; background:var(--sp-red)}
.gx-track__dot--end{right:10px; background:var(--sp-blue)}
.gx-track__line{position:absolute; left:28px; right:28px; top:50%; transform:translateY(-50%); height:2px;
  background:repeating-linear-gradient(90deg,var(--sp-slate-2) 0 4px, transparent 4px 8px)}
.gx-track__car{position:absolute; top:50%; left:14px; transform:translateY(-50%); color:var(--sp-ink-2); animation:gx-drive 5s ease-in-out infinite}
.gx-track__car .sp-ico{width:22px; height:22px}
@keyframes gx-drive{ 0%,8%{left:14px} 92%,100%{left:calc(100% - 36px)} }
@media (prefers-reduced-motion: reduce){ .gx-track__car{animation:none; left:44%} }

/* ---------- Icon grid (shoreleave / crew change) ---------- */
.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.mcell{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:16px; padding:16px 10px;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; box-shadow:var(--sp-shadow-1)}
.mcell__ico{width:48px; height:48px; border-radius:14px; display:grid; place-items:center}
.mcell__ico svg{width:24px; height:24px}
.mcell__ico--blue{background:var(--sp-blue-soft); color:var(--sp-blue)}
.mcell__ico--red{background:var(--sp-red-soft); color:var(--sp-red)}
.mcell__label{font-size:12.5px; font-weight:700; color:var(--sp-ink-2); text-align:center; line-height:1.2}

/* ---------- CrewChat ---------- */
.mchat{display:flex; flex-direction:column; gap:0; background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:18px; overflow:hidden}
.mchat__item{display:flex; gap:12px; padding:14px 16px; text-decoration:none; border-bottom:1px solid var(--sp-line-2)}
.mchat__item:last-child{border-bottom:none}
.mchat__av{flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:var(--sp-blue); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:12px}
.mchat__body{display:flex; flex-direction:column; gap:3px; min-width:0}
.mchat__meta{font-size:12px; color:var(--sp-slate-2)}
.mchat__meta strong{color:var(--sp-ink-2)}
.mchat__text{font-size:13.5px; color:var(--sp-ink-2); line-height:1.35}

/* ---------- Bottom tab bar ---------- */
.mtabs{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:520px;
  background:var(--sp-surface); border-top:1px solid var(--sp-line); display:flex; align-items:flex-end; justify-content:space-around;
  padding:9px 6px calc(9px + env(safe-area-inset-bottom)); z-index:40; box-shadow:0 -4px 18px rgba(15,23,42,.06)}
.mtab{flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--sp-slate-2);
  text-decoration:none; font-size:11px; font-weight:700}
.mtab__ico{width:23px; height:23px}
.mtab.is-active{color:var(--sp-red)}
/* Centre tab — prototype BottomNav: a 48px circle, red only when active,
   muted otherwise, and no text label under it. */
.mtab--home{flex:0 0 auto}
.mtab__home{width:48px; height:48px; border-radius:50%; background:var(--sp-bg-2); color:var(--sp-slate);
  display:grid; place-items:center; margin-top:-16px; border:4px solid var(--sp-surface);
  transition:background 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease}
.mtab--home.is-active .mtab__home{background:var(--sp-red); color:#fff;
  box-shadow:0 4px 12px rgba(211,32,39,.30); transform:translateY(-4px)}
.mtab__home .mtab__ico{width:24px; height:24px}

/* ---------- Port detail ---------- */
.mtopbar{position:sticky; top:0; z-index:20; background:var(--sp-surface); border-bottom:1px solid var(--sp-line);
  display:flex; align-items:center; gap:12px; padding:11px 14px}
.mtopbar__back{flex:0 0 auto; width:42px; height:42px; border:1px solid var(--sp-line); border-radius:12px;
  display:grid; place-items:center; color:var(--sp-ink-2); text-decoration:none}
.mtopbar__back:hover{background:var(--sp-bg-2)}
/* Matches the prototype's shared TopBar (components.jsx › TopBar):
   a small red uppercase eyebrow ABOVE a 22px uppercase display title.
   Markup order is eyebrow-then-title so the DOM matches what is seen. */
.mtopbar__title{flex:1; min-width:0}
.mtopbar__title span{display:block; font-family:var(--sp-font-display); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--sp-red); font-weight:600; margin-bottom:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mtopbar__title strong{display:block; font-family:var(--sp-font-display); font-size:22px; font-weight:600;
  color:var(--sp-ink); line-height:1.1; text-transform:uppercase; letter-spacing:.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.mbanner{position:relative; height:196px; border-radius:20px; overflow:hidden; display:flex; flex-direction:column;
  justify-content:flex-end; padding:16px; color:#fff; background:linear-gradient(160deg,#161b25,#0e1218); box-shadow:var(--sp-shadow-2)}
.mbanner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.mbanner::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,20,.15) 30%,rgba(8,12,20,.82))}
.mbanner > *{position:relative; z-index:1}
.mbanner__status{align-self:flex-start; margin-bottom:auto}
.mbanner__country{display:flex; align-items:center; gap:8px; font-size:13px; color:#dbe4ef; font-weight:600}
.mbanner__cc{display:inline-grid; place-items:center; min-width:30px; height:24px; padding:0 7px; border-radius:7px;
  background:var(--sp-red); color:#fff; font-family:var(--sp-font-display); font-size:12px; font-weight:700}
.mbanner__name{margin:4px 0 0; font-family:var(--sp-font-display); font-size:26px; line-height:1.05}

.mcard[id]{scroll-margin-top:80px}
.mcard__body{padding:6px 16px 16px}
.mmuted{color:var(--sp-slate-2)}
.mtimer__readout{margin:8px 0; font-family:var(--sp-font-display); font-size:22px; color:var(--sp-ink); font-variant-numeric:tabular-nums}
.mtimer__readout.is-due{color:var(--sp-red)}
.mtimer__set{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mtimer__set .sp-input{max-width:150px}

.mdef{padding:10px 0; border-bottom:1px solid var(--sp-line-2)}
.mdef:last-child{border-bottom:none}
.mdef dt{font-size:12px; font-weight:700; color:var(--sp-slate); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px}
.mdef dd{margin:0; font-size:14px; color:var(--sp-ink-2); line-height:1.45}

.mlist{padding:4px 0}
.mrow{display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-bottom:1px solid var(--sp-line-2)}
.mrow:last-child{border-bottom:none}
.mrow__ico{flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center}
.mrow__ico svg{width:21px; height:21px}
.mrow__ico--blue{background:var(--sp-blue-soft); color:var(--sp-blue)}
.mrow__ico--green{background:var(--sp-green-soft); color:var(--sp-green)}
.mrow__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.mrow__body strong{font-size:14.5px; color:var(--sp-ink)}
.mrow__body > span{font-size:13.5px; color:var(--sp-ink-2); line-height:1.4}
.mrow__meta{font-size:12.5px; color:var(--sp-slate)}
.mrow__pill{flex:0 0 auto; align-self:center; background:var(--sp-bg); border:1px solid var(--sp-line);
  border-radius:999px; padding:4px 9px; font-size:11.5px; font-weight:700; color:var(--sp-slate); white-space:nowrap}

.mphoto{flex:0 0 220px; scroll-snap-align:start; margin:0; border-radius:16px; overflow:hidden; background:var(--sp-line-2)}
.mphoto img{width:100%; height:150px; object-fit:cover; display:block}
.mphoto figcaption{font-size:11px; color:var(--sp-slate); padding:6px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.mbtn-block{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px;
  background:var(--sp-red); color:#fff; border-radius:14px; padding:15px; font-weight:700; text-decoration:none; box-shadow:var(--sp-shadow-red)}
.mbtn-block:hover{background:var(--sp-red-deep)}

/* ---------- Shared bits: intro, links, pager ---------- */
.mintro{margin:0 0 14px; font-size:13.5px; color:var(--sp-slate); line-height:1.5}
.mrow--link{text-decoration:none; align-items:center}
.mrow__cc{flex:0 0 auto; display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 8px;
  border-radius:11px; background:var(--sp-red); color:#fff; font-family:var(--sp-font-display); font-size:13px; font-weight:700}
.mrow__rank{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--sp-red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:13px}
.mrow__chev{flex:0 0 auto; color:var(--sp-slate-2); font-size:22px; line-height:1}
.mpager{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; font-size:13px; color:var(--sp-slate)}
.mpager a{color:var(--sp-red); font-weight:700; text-decoration:none}

/* ---------- Review form (mobile) ---------- */
.sp-form-mobile .sp-form{display:flex; flex-direction:column; gap:14px}
.sp-form-mobile .sp-fieldset{border-radius:16px}
.mbtn-block--ghost{background:var(--sp-surface); color:var(--sp-red); border:1.5px solid var(--sp-red); box-shadow:none; margin-top:12px}
.mbtn-block--ghost:hover{background:var(--sp-red-tint)}
button.mbtn-block{width:100%; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:15px}

/* ---------- Profile ---------- */
.mprofile{display:flex; align-items:center; gap:14px; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:18px; padding:18px; box-shadow:var(--sp-shadow-1); margin-bottom:16px}
.mprofile__av{flex:0 0 auto; width:58px; height:58px; border-radius:50%; background:var(--sp-red); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:22px; font-family:var(--sp-font-display)}
.mprofile__id{display:flex; flex-direction:column; gap:2px; min-width:0}
.mprofile__id strong{font-family:var(--sp-font-display); font-size:20px}
.mprofile__id span{font-size:13px; color:var(--sp-slate)}
.mprofile__badge{align-self:flex-start; margin-top:4px; background:var(--sp-red); color:#fff; font-size:10px;
  font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:2px 8px; border-radius:999px}
.mprofile--guest{flex-direction:column; text-align:center; gap:10px; padding:30px 22px}
.mprofile--guest h2{font-family:var(--sp-font-display); font-size:24px; margin:6px 0 0}
.mprofile--guest p{margin:0 0 8px; color:var(--sp-slate); font-size:14px; line-height:1.5}

/* Desktop-only nav extras are hidden on mobile */
.mtabs__brand, .mtabs__cta{display:none}
.mtab--home .mtab__lbl{display:none}

@media (min-width:560px) and (max-width:1023px){
  .mbody{padding:0}
  .mshell{box-shadow:0 0 60px rgba(0,0,0,.25); min-height:100vh}
}

/* ============================================================
   DESKTOP (≥1024px): left sidebar nav + wide multi-column content
   ============================================================ */
@media (min-width:1024px){
  .mbody{background:var(--sp-bg)}
  .mshell{max-width:none; margin:0; padding:0 0 48px 240px; min-height:100vh; overflow:visible; box-shadow:none}
  .mmain{max-width:1080px; margin:0 auto; padding:0 30px}

  /* --- sidebar (from the bottom tab bar) --- */
  .mtabs{flex-direction:column; align-items:stretch; justify-content:flex-start; gap:5px;
    top:0; bottom:auto; left:0; transform:none; width:240px; height:100vh; max-width:none;
    border-top:none; border-right:1px solid var(--sp-line); padding:18px 14px; box-shadow:none}
  .mtabs__brand{display:flex; align-items:center; gap:11px; padding:4px 10px 16px; text-decoration:none;
    color:var(--sp-ink); font-family:var(--sp-font-display); font-size:19px; font-weight:700}
  .mtab{flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:13px; padding:11px 14px;
    border-radius:11px; font-size:14.5px; color:var(--sp-slate)}
  .mtab:hover{background:var(--sp-bg-2)}
  .mtab.is-active{background:var(--sp-red-soft); color:var(--sp-red)}
  .mtab__ico{width:21px; height:21px}
  .mtab__lbl, .mtab--home .mtab__lbl{display:inline}
  .mtab--home .mtab__home{width:auto; height:auto; margin:0; padding:0; background:none; border:none;
    box-shadow:none; color:inherit; display:contents}
  /* The mobile rule `.mtab--home.is-active .mtab__home` sets colour:#fff for the
     red circular FAB, and it out-specifies the reset above (0,3,0 vs 0,2,0) — so
     inside this sidebar the active Home icon kept painting white on the pale
     --sp-red-soft pill and disappeared. Match its specificity to undo it, and let
     the row take the same red-on-tint treatment every other tab gets. */
  .mtab--home.is-active .mtab__home{background:none; color:inherit;
    box-shadow:none; transform:none}
  .mtab--home .mtab__home .mtab__ico{width:21px; height:21px}
  .mtabs__cta{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:auto;
    background:var(--sp-red); color:#fff; border-radius:12px; padding:12px; font-weight:700;
    font-size:14px; text-decoration:none}
  .mtabs__cta:hover{background:var(--sp-red-deep)}

  /* --- page headers become inline content (not sticky bars) --- */
  .mhead, .mtopbar{position:static; background:transparent; border-bottom:none; padding:26px 0 4px}
  .mtopbar{display:flex; padding-top:22px}
  .msearch{max-width:560px}

  /* --- HOME & DETAIL: two-column masonry --- */
  [data-page="home"] .mwrap, [data-page="detail"] .mwrap{column-count:2; column-gap:24px; padding:14px 0 30px}
  [data-page="home"] .mwrap > *, [data-page="detail"] .mwrap > *{break-inside:avoid; margin:0 0 24px}
  [data-page="home"] .msec, [data-page="detail"] .msec{margin-top:0}
  [data-page="home"] .mhero{column-span:all}
  [data-page="detail"] .mbanner{column-span:all; height:260px}
  [data-page="detail"] .mbtn-block{column-span:all; max-width:340px}

  /* --- EXPLORE: two-column results --- */
  [data-page="explore"] .mmain{max-width:940px}
  [data-page="explore"] .mlist{display:grid; grid-template-columns:1fr 1fr; column-gap:0}

  /* --- REVIEW form & PROFILE: comfortable centered width --- */
  [data-page="review"] .mmain{max-width:780px}
  [data-page="profile"] .mmain{max-width:580px}
}

/* ---------- Back-onboard timer display (shoreleave remaining) ---------- */
/* Hide the set controls once a timer is running (any timer widget). */
[data-widget="timer"].is-timing #timerTime,
[data-widget="timer"].is-timing #timerSet{display:none}

.t-time{display:block; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:.01em}
.t-by{display:block; font-weight:700; letter-spacing:.08em; text-transform:uppercase}

/* Hero variant (dark card) */
.mhero__count{display:block}
.mhero__count .t-time{font-size:40px}
.mhero__count .t-time small{font-size:.42em; color:#8a96a6; font-weight:600; margin:0 8px 0 2px; letter-spacing:0}
.mhero__count .t-by{font-size:12px; color:#8a96a6; margin-top:7px}
.mhero__count.is-due .t-time{color:#ff6b71}
.mhero__timer.is-timing .mhero__set{gap:0}

/* Port-detail variant (light card) */
.mtimer__readout .t-time{font-size:28px; color:var(--sp-ink); font-family:var(--sp-font-display)}
.mtimer__readout .t-time small{font-size:.5em; color:var(--sp-slate); font-weight:600; margin:0 6px 0 1px}
.mtimer__readout .t-by{font-size:11.5px; color:var(--sp-slate); margin-top:3px}
.mtimer__readout.is-due .t-time{color:var(--sp-red)}

/* ============================================================
   Experience forms (Shoreleave / Crew change) — image format
   ============================================================ */
.expwrap{padding:14px 16px 24px}
.exp-progress{display:flex; align-items:flex-start; justify-content:space-between; margin:6px 2px 20px; position:relative}
.exp-progress::before{content:''; position:absolute; left:6%; right:6%; top:9px; height:3px; background:var(--sp-line); border-radius:3px}
.exp-progress__fill{position:absolute; left:6%; top:9px; height:3px; background:var(--sp-blue); border-radius:3px; transition:width .3s ease}
.exp-step{display:flex; flex-direction:column; align-items:center; gap:6px; position:relative; z-index:1; flex:1}
.exp-step__dot{width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--sp-line)}
.exp-step.is-on .exp-step__dot{background:var(--sp-blue); border-color:var(--sp-blue)}
.exp-step__pct{font-size:11px; font-weight:700; color:var(--sp-slate-2)}
.exp-step.is-on .exp-step__pct{color:var(--sp-blue)}

.exp-top{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:var(--sp-shadow-1)}
.exp-lab{display:block; font-weight:700; font-size:14px; color:var(--sp-ink); margin-bottom:8px}
.exp-lab em{color:var(--sp-red); font-style:normal}
.exp-in{width:100%; border:1px solid var(--sp-line); border-radius:12px; padding:12px 14px; font:inherit; font-size:15px;
  background:var(--sp-bg-2); color:var(--sp-ink); box-sizing:border-box}
.exp-in:focus{outline:none; border-color:var(--sp-blue); background:var(--sp-surface)}
textarea.exp-in{min-height:74px; resize:vertical; line-height:1.45}
.exp-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.exp-stars{display:flex; align-items:center; gap:6px; margin-top:6px}
.exp-stars__row{display:flex; gap:4px}
.exp-star{font-size:30px; line-height:1; color:#e3c84d; cursor:pointer; background:none; border:none; padding:0; opacity:.45; transition:opacity .1s}
.exp-star.is-on{opacity:1}
.exp-stars__hint{margin-left:auto; font-size:12.5px; color:var(--sp-slate-2)}

.exp-card{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:16px; padding:14px 16px; margin-bottom:12px; box-shadow:var(--sp-shadow-1)}
.exp-card__head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.exp-card__ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto}
.exp-card__ico svg{width:18px; height:18px}
.exp-card__ttl{font-weight:700; font-size:15px; color:var(--sp-ink)}
.exp-ico--blue{background:var(--sp-blue-soft); color:var(--sp-blue)}
.exp-ico--green{background:var(--sp-green-soft); color:var(--sp-green)}
.exp-ico--red{background:var(--sp-red-soft); color:var(--sp-red)}
.exp-ico--amber{background:var(--sp-amber-soft); color:var(--sp-amber)}
.exp-ico--purple{background:#efe7fb; color:#7c3aed}
.exp-ico--pink{background:#fde7f1; color:#db2777}
.exp-ico--navy{background:var(--sp-blue-soft); color:var(--sp-navy,#0b1f3a)}

/* Joining / Sign-off toggle (crew change) */
.exp-seg{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
.exp-seg label{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; border:1.5px solid var(--sp-line);
  border-radius:12px; font-weight:700; font-size:14px; color:var(--sp-slate); cursor:pointer; background:var(--sp-bg-2)}
.exp-seg input{position:absolute; opacity:0; pointer-events:none}
.exp-seg input:checked + label, .exp-seg label.is-on{border-color:var(--sp-blue); background:var(--sp-blue-soft); color:var(--sp-blue)}

/* Photos */
.exp-photos{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.exp-thumb{position:relative; width:92px; height:92px; border-radius:12px; overflow:hidden; background:var(--sp-line-2)}
.exp-thumb img{width:100%; height:100%; object-fit:cover}
.exp-add{width:92px; height:92px; border:1.5px dashed var(--sp-line); border-radius:12px; display:grid; place-items:center;
  color:var(--sp-slate-2); cursor:pointer; background:var(--sp-bg-2)}

/* Anonymous toggle row */
.exp-anon{display:flex; align-items:center; gap:12px; padding:14px 4px}
.exp-anon__ico{width:34px;height:34px;border-radius:50%;background:var(--sp-line-2);display:grid;place-items:center;color:var(--sp-slate)}
.exp-anon__txt{flex:1; font-weight:700; font-size:14px; color:var(--sp-ink)}
.exp-switch{position:relative; width:48px; height:28px; flex:0 0 auto}
.exp-switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.exp-switch__track{position:absolute; inset:0; background:var(--sp-line); border-radius:999px; transition:background .15s}
.exp-switch__track::after{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:50%; transition:transform .15s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.exp-switch input:checked + .exp-switch__track{background:var(--sp-blue)}
.exp-switch input:checked + .exp-switch__track::after{transform:translateX(20px)}

/* Blue submit */
.exp-submit{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; border:none; cursor:pointer;
  background:linear-gradient(180deg,#3b82f6,#2563eb); color:#fff; font-weight:700; font-size:16px; font-family:inherit;
  padding:16px; border-radius:14px; box-shadow:0 8px 20px rgba(37,99,235,.32); margin-top:8px}
.exp-submit:hover{filter:brightness(1.05)}

/* ---------- Crew change report cards ---------- */
.cc-list{display:flex; flex-direction:column; gap:12px}
.cc-card{display:block; background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:16px;
  padding:15px 16px; text-decoration:none; box-shadow:var(--sp-shadow-1)}
.cc-card__top{display:flex; align-items:center; gap:10px; justify-content:space-between}
.cc-card__top strong{font-size:16px; color:var(--sp-ink)}
.cc-badge{flex:0 0 auto; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:999px}
.cc-badge--joining{background:var(--sp-blue-soft); color:var(--sp-blue)}
.cc-badge--signoff{background:var(--sp-amber-soft); color:var(--sp-amber)}
.cc-card__meta{font-size:12.5px; color:var(--sp-slate-2); margin-top:6px}
.cc-card__snip{margin:8px 0 0; font-size:13.5px; color:var(--sp-ink-2); line-height:1.45}
.cc-stars{color:#e3c84d; letter-spacing:1px}
.cc-stars .cc-star{opacity:.3}
.cc-stars .cc-star.on{opacity:1}
.cc-stars--lg{font-size:18px}

/* ---------- Family Onboard hub ---------- */
.fam-sub{text-align:center; color:var(--sp-slate); font-size:14px; line-height:1.55; margin:2px 4px 20px}
.fam-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.fam-tile{display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 8px; border-radius:18px;
  text-decoration:none; text-align:center; border:1px solid transparent}
.fam-tile__ico{width:50px; height:50px; border-radius:15px; display:grid; place-items:center}
.fam-tile__ico svg{width:24px; height:24px}
.fam-tile__label{font-size:12.5px; font-weight:700; color:var(--sp-ink); line-height:1.2}
.fam-tile--pink{background:#fdeaf3; border-color:#f9d3e4} .fam-tile--pink .fam-tile__ico{background:#fbcfe2; color:#db2777}
.fam-tile--blue{background:#e9f1fe; border-color:#cfe0fb} .fam-tile--blue .fam-tile__ico{background:#cfe0fb; color:var(--sp-blue)}
.fam-tile--green{background:#e7f6ec; border-color:#c4e9d2} .fam-tile--green .fam-tile__ico{background:#bce8cd; color:var(--sp-green)}
.fam-tile--orange{background:#fdefdd; border-color:#fbdcb3} .fam-tile--orange .fam-tile__ico{background:#fbd9ab; color:#d4861b}
.fam-tile--purple{background:#f1eafc; border-color:#ddcdf8} .fam-tile--purple .fam-tile__ico{background:#dcccf7; color:#7c3aed}
.fam-info{width:38px; height:38px; border:1px solid var(--sp-line); border-radius:50%; display:grid; place-items:center;
  color:var(--sp-slate); background:var(--sp-surface); margin-left:auto; text-decoration:none; flex:0 0 auto}

/* ---------- Family Onboard home banner ---------- */
.fam-banner{display:flex; align-items:center; gap:14px; text-decoration:none; border-radius:18px; padding:18px;
  background:linear-gradient(160deg,#fdeaf3,#eaf1fe); border:1px solid #f3d9e8; box-shadow:var(--sp-shadow-1)}
.fam-banner__emoji{font-size:32px; flex:0 0 auto}
.fam-banner__txt{flex:1; display:flex; flex-direction:column; min-width:0}
.fam-banner__txt strong{font-family:var(--sp-font-display); font-size:18px; color:var(--sp-ink)}
.fam-banner__txt span{font-size:13px; color:var(--sp-slate)}
.fam-banner__chev{color:var(--sp-slate-2); font-size:24px; flex:0 0 auto}

/* ---------- Shoreleave topic detail ---------- */
.sltopic-hero{display:flex; align-items:center; gap:14px; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:18px; padding:16px; box-shadow:var(--sp-shadow-1)}
.sltopic-hero strong{display:block; font-family:var(--sp-font-display); font-size:20px; color:var(--sp-ink)}
.sltopic-hero span{font-size:13px; color:var(--sp-slate)}
.sltopic-meta{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; padding-top:12px; border-top:1px solid var(--sp-line-2);
  font-size:13px; color:var(--sp-slate)}
.sltopic-meta span{display:inline-flex; align-items:center; gap:6px}
.sltopic-rev{padding:14px 16px}
.sltopic-rev__meta{font-size:12px; color:var(--sp-slate-2)}
.sltopic-rev__meta strong{color:var(--sp-ink-2)}
.sltopic-rev__body{margin:6px 0 0; font-size:13.5px; color:var(--sp-ink-2); line-height:1.5}

/* ---------- Info / placeholder card ---------- */
.info-card{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:18px; padding:30px 22px;
  text-align:center; box-shadow:var(--sp-shadow-1)}
.info-card__ico{display:inline-grid; place-items:center; width:72px; height:72px; border-radius:18px;
  background:var(--sp-red-soft); color:var(--sp-red); margin-bottom:14px}
.info-card__ico svg{width:32px; height:32px}
.info-card h2{font-family:var(--sp-font-display); font-size:21px; margin:0}
.info-card p{margin:8px 0 0; color:var(--sp-slate); font-size:14px; line-height:1.55}
.info-card .mbtn-block{margin-top:16px}
.info-card__soon{font-size:12px; color:var(--sp-slate-2); margin-top:14px}
.menu-grp{margin:18px 4px 8px; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--sp-slate-2)}

/* ---------- Photos masonry ---------- */
.photo-masonry{column-count:2; column-gap:10px}
.photo-cell{display:block; position:relative; margin:0 0 10px; break-inside:avoid; border-radius:14px; overflow:hidden; background:var(--sp-line-2)}
.photo-cell img{width:100%; display:block}
.photo-cell__cap{position:absolute; left:0; right:0; bottom:0; padding:10px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75)); font-size:11.5px}
.photo-cell__cap strong{display:block; font-size:12.5px}
.photo-cell__cap span{opacity:.85}

/* ---------- Transport map ---------- */
.tmap{display:block; position:relative; height:170px; border-radius:18px; overflow:hidden; margin-bottom:18px;
  background:
    repeating-linear-gradient(0deg, rgba(120,150,200,.20) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(120,150,200,.20) 0 1px, transparent 1px 24px),
    linear-gradient(135deg,#e8f0fe,#dae7fa);
  box-shadow:var(--sp-shadow-1)}
.tmap > svg{position:absolute; inset:0; width:100%; height:100%}
.tmap__pin{position:absolute; width:14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.2)}
.tmap__pin--a{left:58px; top:112px; background:var(--sp-red)}
.tmap__pin--b{right:58px; top:64px; background:var(--sp-blue)}
.tmap__tag{position:absolute; background:rgba(255,255,255,.92); border-radius:8px; padding:6px 10px; font-size:11px; font-weight:700; color:var(--sp-ink)}
.tmap__tag--a{left:12px; bottom:12px; color:var(--sp-red)}
.tmap__tag--b{right:12px; top:12px; color:var(--sp-blue)}
.tmap__open{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); background:var(--sp-red); color:#fff;
  padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}

/* ---------- Weather ---------- */
.wx-hero{background:linear-gradient(135deg,#2f6fd6,#5189e2); color:#fff; border-radius:20px; padding:22px; box-shadow:var(--sp-shadow-2)}
.wx-hero__now{display:flex; align-items:center; gap:16px}
.wx-hero__temp{font-family:var(--sp-font-display); font-size:58px; line-height:1; font-weight:700}
.wx-hero__desc{font-size:16px; font-weight:700} .wx-hero__desc small{font-weight:500; opacity:.85}
.wx-hero__stats{display:flex; gap:18px; margin-top:14px; font-size:13px; opacity:.95; align-items:center}
.wx-live{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px;
  background:rgba(255,255,255,.22); font-weight:700; font-size:11px; letter-spacing:.03em; opacity:1}
.wx-hours{display:flex; gap:6px; overflow-x:auto; padding:14px}
.wx-hour{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 12px; border-radius:12px; background:var(--sp-bg-2); font-size:12px; color:var(--sp-slate)}
.wx-hour__i{font-size:20px}
.wx-hour strong{color:var(--sp-ink); font-size:14px}

/* ---------- AI assistant FAB ---------- */
.mfab{position:fixed; right:16px; bottom:96px; width:56px; height:56px; border-radius:50%; background:var(--sp-surface);
  border:1px solid var(--sp-line); box-shadow:0 8px 22px rgba(15,23,42,.2); display:grid; place-items:center; z-index:35;
  left:auto; transform:none}
.mfab__ico{width:26px; height:26px; color:var(--sp-blue)}

@media (min-width:1024px){
  .mfab{right:calc(50% - 520px); bottom:30px}
  [data-page="photos"] .photo-masonry{column-count:3}
  [data-page="menu"] .mmain, [data-page="info"] .mmain, [data-page="crewchat"] .mmain,
  [data-page="weather"] .mmain, [data-page="transport"] .mmain, [data-page="sltopic"] .mmain{max-width:760px}
  [data-page="crewchange"] .mmain, [data-page="family"] .mmain{max-width:820px}
}

/* ============ CrewChat (threads + replies) ============ */
.sp-ico--xs{width:.85em; height:.85em; vertical-align:-1px}
.mchat__stats{display:flex; gap:12px; align-items:center; margin-top:4px; font-size:12px; color:var(--sp-slate)}

.cchat-list{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.cchat{display:flex; gap:12px; padding:14px 14px; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:16px; text-decoration:none; color:inherit; box-shadow:var(--sp-shadow-1); transition:transform .12s, box-shadow .12s}
.cchat:hover{transform:translateY(-1px); box-shadow:var(--sp-shadow-2)}
.cchat__av{flex:0 0 auto; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--sp-blue-soft); color:var(--sp-blue); font-weight:800; font-size:13px; letter-spacing:.02em}
.cchat__av--sm{width:32px; height:32px; font-size:11px}
.cchat__av--lg{width:48px; height:48px; font-size:15px}
.cchat__main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.cchat__meta{font-size:12px; color:var(--sp-slate)}
.cchat__meta strong{color:var(--sp-ink); font-weight:700}
.cchat__rank{display:inline-block; padding:1px 7px; border-radius:999px; background:var(--sp-line-2);
  color:var(--sp-slate); font-size:11px; font-weight:700}
.cchat__title{font-size:15px; font-weight:700; color:var(--sp-ink); line-height:1.3}
.cchat__snip{font-size:13px; color:var(--sp-ink-2); line-height:1.4}
.cchat__foot{display:flex; align-items:center; gap:10px; margin-top:5px}
.cchat__tag{padding:2px 9px; border-radius:999px; background:var(--sp-blue-soft); color:var(--sp-blue);
  font-size:11px; font-weight:700}
.cchat__stat{font-size:12px; color:var(--sp-slate); font-weight:600; display:inline-flex; align-items:center; gap:4px}

.cchat-thread{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:18px;
  padding:18px; box-shadow:var(--sp-shadow-1); margin-top:6px}
.cchat-thread__head{display:flex; gap:12px; align-items:center}
.cchat-thread__who{display:flex; flex-direction:column; gap:2px}
.cchat-thread__who strong{font-size:15px; color:var(--sp-ink)}
.cchat-thread__sub{font-size:12px; color:var(--sp-slate)}
.cchat-thread__title{font-size:20px; font-weight:800; color:var(--sp-ink); line-height:1.3; margin:14px 0 8px}
.cchat-thread__body{font-size:15px; color:var(--sp-ink-2); line-height:1.55}
.cchat-thread__actions{display:flex; align-items:center; gap:12px; margin-top:16px}
.cchat-like{display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px;
  border:1.5px solid var(--sp-line); background:var(--sp-surface); color:var(--sp-slate); font:inherit; font-weight:700;
  font-size:13px; cursor:pointer; transition:.15s}
.cchat-like:hover{border-color:var(--sp-red); color:var(--sp-red)}
.cchat-like.on{border-color:var(--sp-red); color:var(--sp-red); background:var(--sp-red-tint)}
.cchat-like__heart{font-size:15px; line-height:1}
.cchat-like[disabled]{opacity:.7; cursor:default}

.cchat-replies{margin-top:22px}
.cchat-replies__h{font-size:15px; font-weight:800; color:var(--sp-ink); margin:0 0 12px}
.cchat-reply{display:flex; gap:10px; padding:12px 0; border-top:1px solid var(--sp-line-2)}
.cchat-reply__main{flex:1 1 auto; min-width:0}
.cchat-reply__meta{font-size:12px; color:var(--sp-slate)}
.cchat-reply__meta strong{color:var(--sp-ink)}
.cchat-reply__body{font-size:14px; color:var(--sp-ink-2); line-height:1.5; margin:4px 0 0}
.cchat-replies__empty{font-size:14px; color:var(--sp-slate); padding:8px 0}
.cchat-loadmore{display:block; width:100%; margin:0 0 14px; padding:9px; border-radius:10px; border:1px solid var(--sp-line);
  background:var(--sp-surface); color:var(--sp-blue); font:inherit; font-weight:700; font-size:13px; cursor:pointer; transition:.15s}
.cchat-loadmore:hover{background:var(--sp-bg-2)}
.cchat-loadmore[disabled]{opacity:.6; cursor:default}

.cchat-form{margin-top:22px; padding-top:18px; border-top:1px solid var(--sp-line)}
.cchat-form__id{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px}
.cchat-form__id .exp-in{flex:1 1 160px; min-width:0}
.cchat-anon{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--sp-slate); font-weight:600; white-space:nowrap}
.cchat-opt{font-weight:500; color:var(--sp-slate); font-size:13px}

/* ============ Alerts feed (Safety & Scam Watch) ============ */
.mtopbar--red{background:linear-gradient(180deg,var(--sp-red-tint),#fff)}
.alert-list{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.alert{display:flex; gap:0; background:var(--sp-surface); border:1px solid var(--sp-line);
  border-radius:16px; overflow:hidden; box-shadow:var(--sp-shadow-1)}
.alert__bar{flex:0 0 5px}
.alert--red .alert__bar{background:var(--sp-red)} .alert--amber .alert__bar{background:var(--sp-amber)} .alert--blue .alert__bar{background:var(--sp-blue)}
.alert__main{flex:1 1 auto; min-width:0; padding:14px 15px}
.alert__top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--sp-slate)}
.alert__kind{font-size:10px; font-weight:800; letter-spacing:.05em; padding:3px 8px; border-radius:999px}
.alert__kind--red{background:var(--sp-red-soft); color:var(--sp-red)}
.alert__kind--amber{background:var(--sp-amber-soft); color:var(--sp-amber)}
.alert__kind--blue{background:var(--sp-blue-soft); color:var(--sp-blue)}
.alert__port{display:inline-flex; align-items:center; gap:3px; font-weight:600}
.alert__time{margin-left:auto}
.alert__title{font-size:16px; font-weight:800; color:var(--sp-ink); line-height:1.3; margin:8px 0 5px}
.alert__body{font-size:14px; color:var(--sp-ink-2); line-height:1.5; margin:0}
.alert__foot{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--sp-slate)}
.alert__loc{display:inline-flex; align-items:center; gap:4px}
.alert__by{margin-left:auto; font-weight:700; color:var(--sp-slate-2)}

/* Report-alert form */
.alert-intro h1{font-family:var(--sp-font-display); font-size:22px; font-weight:700; color:var(--sp-ink); margin:6px 0 6px}
.alert-intro p{font-size:13px; color:var(--sp-slate); line-height:1.5; margin:0 0 18px}
.alert-form{border:0; padding:0; margin:0}
.alert-kinds{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.alert-kind{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  border:1.5px solid var(--sp-line); background:var(--sp-surface); cursor:pointer; transition:.15s}
.alert-kind input{position:absolute; opacity:0; width:0; height:0}
.alert-kind__ico{flex:0 0 auto; display:grid; place-items:center; width:26px; height:26px; color:var(--sp-slate)}
.alert-kind__txt{flex:1 1 auto; display:flex; flex-direction:column}
.alert-kind__txt strong{font-size:14px; color:var(--sp-ink)}
.alert-kind__txt small{font-size:11px; color:var(--sp-slate); margin-top:2px}
.alert-kind__check{flex:0 0 auto; opacity:0; transition:.15s}
.alert-kind--red:has(input:checked){background:var(--sp-red-soft); border-color:var(--sp-red)} .alert-kind--red:has(input:checked) .alert-kind__ico,.alert-kind--red:has(input:checked) .alert-kind__check{color:var(--sp-red); opacity:1}
.alert-kind--amber:has(input:checked){background:var(--sp-amber-soft); border-color:var(--sp-amber)} .alert-kind--amber:has(input:checked) .alert-kind__ico,.alert-kind--amber:has(input:checked) .alert-kind__check{color:var(--sp-amber); opacity:1}
.alert-kind--blue:has(input:checked){background:var(--sp-blue-soft); border-color:var(--sp-blue)} .alert-kind--blue:has(input:checked) .alert-kind__ico,.alert-kind--blue:has(input:checked) .alert-kind__check{color:var(--sp-blue); opacity:1}
.mbtn-block--alert{background:var(--sp-red)} .mbtn-block--alert:hover{background:var(--sp-red-deep)}

/* ============ eSIM reviews ============ */
.esim-note{display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:14px;
  background:var(--sp-red-tint); border:1px solid var(--sp-red-soft); margin-bottom:6px}
.esim-note__ico{flex:0 0 auto; color:var(--sp-red)}
.esim-note strong{display:block; font-size:13px; font-weight:800; color:var(--sp-red); text-transform:uppercase; letter-spacing:.04em}
.esim-note p{margin:4px 0 0; font-size:12px; color:var(--sp-ink-2); line-height:1.5}
.esim-list{display:flex; flex-direction:column; gap:10px}
.esim-card{display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px;
  background:var(--sp-surface); border:1px solid var(--sp-line); box-shadow:var(--sp-shadow-1)}
.esim-card__logo{flex:0 0 auto; width:48px; height:48px; border-radius:10px; color:#fff;
  display:grid; place-items:center; font-family:var(--sp-font-display); font-weight:700; font-size:20px}
.esim-card__main{flex:1 1 auto; min-width:0}
.esim-card__name{display:flex; align-items:center; gap:6px}
.esim-card__name strong{font-size:14px; color:var(--sp-ink)}
.esim-card__tag{font-size:8px; font-weight:800; letter-spacing:.04em; padding:2px 5px; border-radius:4px; background:var(--sp-red-soft); color:var(--sp-red)}
.esim-card__sub{font-size:11px; color:var(--sp-slate); margin-top:3px}
.esim-card__rate{display:flex; align-items:center; gap:4px; margin-top:4px; font-size:11px; color:var(--sp-slate)}
.esim-card__rate .sp-ico{color:var(--sp-amber)} .esim-card__rate strong{color:var(--sp-ink)}
.esim-card__price{flex:0 0 auto; text-align:right}
.esim-card__amt{display:block; font-family:var(--sp-font-display); font-weight:700; font-size:15px; color:var(--sp-ink)}
.esim-card__cta{display:inline-block; margin-top:6px; padding:6px 12px; border-radius:999px; background:var(--sp-red); color:#fff; font-size:11px; font-weight:700}
.esim-reviews{display:flex; flex-direction:column; gap:10px}
.esim-rev{padding:14px; border-radius:14px; background:var(--sp-surface); border:1px solid var(--sp-line)}
.esim-rev__top{display:flex; align-items:center; margin-bottom:6px}
.esim-rev__top strong{font-size:13px; color:var(--sp-ink)}
.esim-rev__stars{margin-left:auto; color:var(--sp-amber); font-size:12px; letter-spacing:1px}
.esim-rev p{margin:0; font-size:13px; color:var(--sp-ink-2); line-height:1.5}
.esim-rev__by{display:block; margin-top:6px; font-size:11px; font-weight:700; color:var(--sp-slate-2)}

/* ============ Translate phrasebook ============ */
.tl-langs{display:flex; gap:8px; margin:4px 0 16px}
.tl-lang{padding:7px 16px; border-radius:999px; border:1.5px solid var(--sp-line); background:var(--sp-surface);
  color:var(--sp-blue); font:inherit; font-weight:800; font-size:12px; letter-spacing:.04em; cursor:pointer; transition:.15s}
.tl-lang.is-on{background:var(--sp-blue); color:#fff; border-color:var(--sp-blue)}
.tl-list{display:flex; flex-direction:column; border:1px solid var(--sp-line); border-radius:16px; overflow:hidden; background:var(--sp-surface)}
.tl-row{display:flex; align-items:center; gap:10px; padding:13px 15px; border-top:1px dashed var(--sp-line)}
.tl-row:first-child{border-top:0}
.tl-row__main{flex:1 1 auto; min-width:0}
.tl-row__en{display:block; font-size:11px; color:var(--sp-slate); font-weight:600}
.tl-row__tx{display:block; font-size:16px; color:var(--sp-ink); font-weight:700; margin-top:3px; font-family:var(--sp-font-display)}
.tl-row__tag{flex:0 0 auto; font-size:9px; font-weight:800; color:var(--sp-blue); background:var(--sp-blue-soft); padding:3px 7px; border-radius:5px; letter-spacing:.04em}

/* ============ Shorey assistant ============ */
.shorey-top{color:var(--sp-ink)} .shorey-top__av{flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--sp-blue-soft); color:var(--sp-blue); display:grid; place-items:center}
.shorey-top__av svg{width:26px; height:26px}
.shorey{display:flex; flex-direction:column; min-height:calc(100dvh - 200px)}
.shorey__feed{flex:1 1 auto; display:flex; flex-direction:column; gap:12px; padding:16px 0; overflow-y:auto}
.shorey-msg{display:flex; gap:8px; max-width:85%}
.shorey-msg--bot{align-self:flex-start}
.shorey-msg--user{align-self:flex-end; justify-content:flex-end}
.shorey-msg__av{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--sp-blue-soft); color:var(--sp-blue); display:grid; place-items:center}
.shorey-msg__av svg{width:22px; height:22px}
.shorey-msg__bubble{padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.5}
.shorey-msg--bot .shorey-msg__bubble{background:var(--sp-bg-2); color:var(--sp-ink); border-bottom-left-radius:5px}
.shorey-msg--user .shorey-msg__bubble{background:var(--sp-blue); color:#fff; border-bottom-right-radius:5px}
.shorey-link{color:var(--sp-blue); font-weight:700; white-space:nowrap}
.shorey-msg--bot .shorey-msg__bubble .shorey-link{color:var(--sp-blue)}
.shorey-sugg{display:flex; flex-direction:column; gap:6px; align-self:stretch; margin-top:4px}
.shorey-sugg__lbl{font-size:11px; font-weight:800; color:var(--sp-slate-2); text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px}
.shorey-chip{text-align:left; padding:9px 13px; border-radius:12px; border:1px solid var(--sp-line);
  background:var(--sp-surface); color:var(--sp-ink); font:inherit; font-size:13px; cursor:pointer; transition:.15s}
.shorey-chip:hover{border-color:var(--sp-blue); color:var(--sp-blue)}
.shorey__bar{position:sticky; bottom:0; display:flex; gap:10px; align-items:center; padding:12px 0 14px;
  background:linear-gradient(180deg,transparent,var(--sp-bg) 22%)}
.shorey__in{flex:1 1 auto; padding:11px 16px; border-radius:999px; border:1.5px solid var(--sp-line);
  background:var(--sp-surface); font:inherit; font-size:14px; outline:none}
.shorey__in:focus{border-color:var(--sp-blue)}
.shorey__send{flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:none; background:var(--sp-blue);
  color:#fff; display:grid; place-items:center; cursor:pointer}
[data-page="assistant"] .mfab{display:none}  /* redundant on the assistant screen itself */

/* ============ Saved (bookmark states) ============ */
.msave-btn.is-on{background:var(--sp-red-soft); border-color:var(--sp-red); color:var(--sp-red)}
.msave-rm{flex:0 0 auto; width:26px; height:26px; border-radius:8px; border:1px solid var(--sp-line);
  background:var(--sp-surface); color:var(--sp-slate); font-size:18px; line-height:1; cursor:pointer; margin-left:auto}
.msave-rm:hover{border-color:var(--sp-red); color:var(--sp-red)}
.saved-sub{display:block; font-size:12px; color:var(--sp-slate); margin-top:2px}
[data-saved-list] .mrow{display:flex; gap:12px; align-items:center}

/* ============ Sponsored ad carousel (homepage) ============ */
.ad-sec__title{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sp-slate-2); font-weight:800}
.ad-carousel{position:relative}
.ad-track{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px}
.ad-track::-webkit-scrollbar{display:none}
.ad-slide{position:relative; flex:0 0 100%; scroll-snap-align:start; display:block; text-decoration:none;
  border:1px solid var(--sp-line); border-radius:18px; overflow:hidden; background:var(--sp-surface);
  box-shadow:var(--sp-shadow-1); color:inherit}
.ad-slide__img{display:block; width:100%; aspect-ratio:21/9; background:var(--sp-line-2) center/cover no-repeat}
.ad-slide__img--plain{background:linear-gradient(135deg,var(--sp-blue),#4A8FE7)}
.ad-slide__body{display:block; padding:13px 15px}
.ad-slide__title{display:block; font-size:15.5px; font-weight:800; color:var(--sp-ink); line-height:1.3}
.ad-slide__sub{display:block; font-size:13px; color:var(--sp-slate); margin-top:3px; line-height:1.4}
.ad-slide__cta{display:inline-block; margin-top:9px; font-size:13px; font-weight:800; color:var(--sp-blue)}
.ad-slide__flag{position:absolute; top:10px; right:10px; font-size:9px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:rgba(17,23,34,.62); padding:3px 8px; border-radius:999px}
.ad-dots{display:flex; justify-content:center; gap:7px; margin-top:11px}
.ad-dot{width:7px; height:7px; padding:0; border:none; border-radius:50%; background:var(--sp-line); cursor:pointer; transition:.2s}
.ad-dot.is-on{background:var(--sp-red); width:20px; border-radius:999px}
@media (min-width:1024px){ [data-page="home"] .ad-sec{column-span:all} }

/* ============ Family Onboard — share page (redesign) ============ */
.famx{--pink:#e0529a}
.famx-intro{text-align:center; font-size:15px; color:var(--sp-slate); line-height:1.5; margin:6px 0 18px}
.famx-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:8px}
.famx-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center;
  padding:18px 8px; border-radius:16px; border:1.5px solid var(--sp-line); background:var(--sp-surface);
  text-decoration:none; color:var(--sp-ink); min-height:120px; transition:transform .12s}
.famx-tile:hover{transform:translateY(-2px)}
.famx-tile__ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center}
.famx-tile__ico .sp-ico{width:24px; height:24px}
.famx-tile__label{font-size:13px; font-weight:700; line-height:1.25}
.famx-tile--blue{border-color:var(--sp-blue)} .famx-tile--blue .famx-tile__ico{background:var(--sp-blue-soft); color:var(--sp-blue)} .famx-tile--blue .famx-tile__label{color:var(--sp-blue)}
.famx-tile--amber{border-color:var(--sp-amber)} .famx-tile--amber .famx-tile__ico{background:var(--sp-amber-soft); color:var(--sp-amber)} .famx-tile--amber .famx-tile__label{color:var(--sp-amber)}
.famx-tile--pink{border-color:var(--pink)} .famx-tile--pink .famx-tile__ico{background:rgba(224,82,154,.14); color:var(--pink)} .famx-tile--pink .famx-tile__label{color:var(--pink)}

.famx-form{margin-top:18px}
.famx-card{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:18px; padding:18px; margin-bottom:16px; box-shadow:var(--sp-shadow-1)}
.famx-card__head{display:flex; align-items:center; gap:11px; margin-bottom:8px}
.famx-card__num{flex:0 0 auto; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px}
.famx-card__title{margin:0; font-size:17px; font-weight:800}
.famx-card__help{margin:0 0 12px; font-size:13px; color:var(--sp-slate); line-height:1.5}
.famx-card--blue .famx-card__num{background:var(--sp-blue)} .famx-card--blue .famx-card__title{color:var(--sp-blue)}
.famx-card--amber .famx-card__num{background:var(--sp-amber)} .famx-card--amber .famx-card__title{color:var(--sp-amber)}
.famx-card--pink .famx-card__num{background:var(--pink)} .famx-card--pink .famx-card__title{color:var(--pink)}
.famx-field{position:relative}
.famx-in{width:100%; border:1px solid var(--sp-line); border-radius:12px; padding:12px 14px; font:inherit; font-size:15px;
  background:var(--sp-bg-2); color:var(--sp-ink); resize:vertical; min-height:84px; line-height:1.45}
.famx-in:focus{outline:none; border-color:var(--sp-blue); background:var(--sp-surface)}
textarea.famx-in{display:block}
.famx-count{position:absolute; right:12px; bottom:9px; font-size:11px; color:var(--sp-slate-2); pointer-events:none}

.famx-photos{margin:4px 0 16px}
.famx-photos__h{margin:0; font-size:15px; font-weight:800; color:var(--sp-ink)} .famx-photos__h small{font-weight:600; color:var(--sp-slate)}
.famx-photos__sub{margin:2px 0 12px; font-size:12.5px; color:var(--sp-slate)}
.famx-photogrid{display:flex; gap:12px; flex-wrap:wrap}
.famx-add{flex:0 0 auto; width:96px; height:96px; border:1.5px dashed var(--sp-blue); border-radius:14px; background:var(--sp-blue-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--sp-blue); cursor:pointer; font-size:12px; font-weight:700}
.famx-add .sp-ico{width:24px; height:24px}
.famx-thumb{position:relative; width:96px; height:96px; border-radius:14px; overflow:hidden; border:1px solid var(--sp-line)}
.famx-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.famx-thumb__rm{position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(17,23,34,.72); color:#fff; font-size:15px; line-height:1; cursor:pointer; display:grid; place-items:center}

.famx-id{display:flex; gap:10px; margin-bottom:14px}
.famx-id .famx-in{min-height:0}
.famx-anon{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; background:var(--sp-surface);
  border:1px solid var(--sp-line); margin-bottom:16px}
.famx-anon__ico{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--sp-blue-soft); color:var(--sp-blue)}
.famx-anon__txt{flex:1; display:flex; flex-direction:column} .famx-anon__txt strong{font-size:14px; color:var(--sp-ink)} .famx-anon__txt small{font-size:12px; color:var(--sp-slate)}
.famx-switch{flex:0 0 auto; position:relative; width:48px; height:28px}
.famx-switch input{position:absolute; opacity:0; width:0; height:0}
.famx-switch__track{position:absolute; inset:0; background:var(--sp-line); border-radius:999px; transition:.2s}
.famx-switch__track::before{content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.famx-switch input:checked + .famx-switch__track{background:var(--sp-blue)}
.famx-switch input:checked + .famx-switch__track::before{transform:translateX(20px)}

.famx-submit{width:100%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px; border-radius:14px; background:linear-gradient(135deg,#1E6FE0,#2f6fd6); color:#fff; font:inherit; font-weight:800; font-size:16px;
  box-shadow:0 10px 24px rgba(30,111,224,.35)}
.famx-submit:hover{filter:brightness(1.05)}

.famx-thanks{display:flex; gap:12px; align-items:flex-start; margin:18px 0 8px; padding:15px 16px; border-radius:14px;
  background:var(--sp-amber-soft); border:1px solid var(--sp-amber-soft)}
.famx-thanks__star{flex:0 0 auto; color:var(--sp-amber)} .famx-thanks__star .sp-ico{width:22px; height:22px}
.famx-thanks strong{display:block; color:var(--sp-amber); font-size:14px} .famx-thanks p{margin:3px 0 0; font-size:13px; color:var(--sp-ink-2); line-height:1.5}

/* ============ Settings ============ */
.set-card{background:var(--sp-surface); border:1px solid var(--sp-line); border-radius:18px; padding:6px 4px; margin-bottom:16px; box-shadow:var(--sp-shadow-1)}
.set-card__h{display:flex; align-items:center; gap:8px; margin:0; padding:14px 16px 6px; font-family:var(--sp-font-display);
  text-transform:uppercase; letter-spacing:.05em; color:var(--sp-red); font-size:13px}
.set-row{display:flex; align-items:center; gap:12px; padding:12px 16px}
.set-row__label{flex:1; display:flex; flex-direction:column} .set-row__label strong{font-size:15px; color:var(--sp-ink)} .set-row__label small{font-size:12px; color:var(--sp-slate)}
.set-theme{display:inline-flex; background:var(--sp-bg-2); border:1px solid var(--sp-line); border-radius:11px; padding:3px; gap:2px}
.set-theme__opt{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border:none; border-radius:9px; background:none;
  color:var(--sp-slate); font:inherit; font-weight:700; font-size:13px; cursor:pointer}
.set-theme__opt.is-on{background:var(--sp-surface); color:var(--sp-ink); box-shadow:var(--sp-shadow-1)}
.set-theme__opt svg{flex:0 0 auto}
.set-link{display:flex; align-items:center; gap:12px; padding:13px 16px; text-decoration:none; color:inherit; border-top:1px solid var(--sp-line-2)}
.set-link__ico{flex:0 0 auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--sp-blue-soft); color:var(--sp-blue)}
.set-link__txt{flex:1; font-size:14.5px; font-weight:600; color:var(--sp-ink)}
.set-link__chev{color:var(--sp-slate-2); font-size:20px}
.set-link:hover{background:var(--sp-bg-2)}