/* additions.css — styles for the review-round additions (A–J comments).
   Loaded by BOTH shells after app.css/citymap.css (and after desktop.css on desktop). */

/* ============ A2 · quota pill ============ */
.paste-wrap { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.quota-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font: 600 12px/1 var(--font-body), system-ui; color: var(--text-2); cursor: default; }
.quota-pill i { font-size: 13px; color: var(--magic-deep); }
.quota-pill b { color: var(--ink); font-weight: 800; }
.quota-pill__bonus { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font-weight: 800; font-size: 10.5px; }
.quota-pill.low { border-color: color-mix(in srgb, var(--coral) 45%, var(--border)); color: var(--coral); }
.quota-pill.low i, .quota-pill.low b { color: var(--coral); }
.quota-pill.out { cursor: pointer; border-color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--surface)); color: var(--ink); }
.quota-pill.out b { color: var(--coral); }
.paste-field.out .paste-go { background: var(--grey-150); color: var(--text-2); }

/* ============ A5 · mic button + recording overlay ============ */
.paste-mic { position: relative; flex: none; width: 38px; height: 38px; border-radius: 999px; border: none; background: transparent;
  color: var(--ink-2); font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.paste-mic:hover { background: var(--grey-150); }
.paste-mic.sm { width: 30px; height: 30px; font-size: 15px; border: 1px solid var(--border); background: var(--surface); }
.paste-mic__lock { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 999px; background: #F5C451;
  color: #4a3403; display: grid; place-items: center; font-size: 8px; }
.mic-scrim { position: absolute; inset: 0; z-index: 96; background: rgba(15,22,32,.5); display: grid; place-items: center; padding: 22px; animation: fade .16s ease-out; }
.mic-card, .wiz-card { width: 320px; max-width: 100%; background: var(--surface); border-radius: 24px; padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: var(--shadow-lg); position: relative; }
.mic-card b, .wiz-card b { font-size: 16px; color: var(--ink); }
.mic-card p, .wiz-card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.mic-card__pulse { width: 62px; height: 62px; border-radius: 999px; display: grid; place-items: center; font-size: 26px; color: #fff;
  background: var(--coral); animation: micPulse 1.4s ease-in-out infinite; }
.mic-card__pulse.proc { background: var(--magic-deep); animation: none; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 45%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }
.mic-card__wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.mic-card__wave i { width: 4px; border-radius: 2px; background: var(--coral); height: 8px; animation: micWave 1s ease-in-out infinite; }
@keyframes micWave { 0%,100% { height: 6px; } 50% { height: 22px; } }
.mic-card__stop { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 999px; border: none;
  background: var(--ink); color: #fff; font: 700 13.5px var(--font-body), system-ui; cursor: pointer; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .mic-card__pulse, .mic-card__wave i { animation: none; } }

/* ============ A3 · parse failure + Wizard Council ============ */
.paste-fail { border: 1px solid color-mix(in srgb, var(--coral) 34%, var(--border)); border-radius: 16px; background: var(--surface);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); animation: fade .18s ease-out; }
.paste-fail__hd { display: flex; gap: 10px; align-items: flex-start; }
.paste-fail__ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  background: color-mix(in srgb, var(--coral) 11%, var(--surface)); color: var(--coral); }
.paste-fail__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.paste-fail__txt b { font-size: 13.5px; color: var(--ink); }
.paste-fail__txt span { font-size: 12px; line-height: 1.45; color: var(--text-2); }
.paste-fail__row { display: flex; gap: 8px; flex-wrap: wrap; }
.paste-fail__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: 700 12px var(--font-body), system-ui; color: var(--ink); }
.paste-fail__btn.wiz { border-color: color-mix(in srgb, var(--magic) 40%, var(--border)); color: var(--magic-deep);
  background: color-mix(in srgb, var(--magic) 7%, var(--surface)); }
.paste-fail__em { font-size: 14px; }
.wiz-card { align-items: stretch; text-align: left; }
.wiz-card__x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 999px; border: none;
  background: var(--grey-150); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.wiz-card__orb { align-self: center; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; font-size: 26px;
  background: color-mix(in srgb, var(--magic) 14%, var(--surface)); color: var(--magic-deep); }
.wiz-card__orb.ok { background: color-mix(in srgb, var(--success) 13%, var(--surface)); color: var(--success); }
.wiz-card__em { font-size: 27px; }
.wiz-card__ctx { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--surface-muted);
  font: 600 11px var(--font-body), system-ui; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wiz-card__in { min-height: 74px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); resize: none;
  padding: 10px 12px; font: 500 13px/1.5 var(--font-body), system-ui; color: var(--ink); }
.wiz-card__in:focus { outline: none; border-color: var(--magic); background: var(--surface); }
.wiz-card__shot { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  border: 1px dashed var(--border); background: transparent; font: 650 12.5px var(--font-body), system-ui; color: var(--text-2); }
.wiz-card__shot.on { border-style: solid; border-color: color-mix(in srgb, var(--success) 45%, var(--border)); color: var(--success); }

/* ============ A4 · local-first results ============ */
.paste-local { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 10px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); animation: fade .18s ease-out; }
.paste-local__lbl { display: flex; align-items: center; gap: 6px; font: 800 10px var(--font-body), system-ui; letter-spacing: .07em;
  text-transform: uppercase; color: var(--success); padding: 2px 2px 0; }
.paste-local__row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 11px; border: none; background: transparent;
  cursor: pointer; text-align: left; font-family: inherit; }
.paste-local__row:hover { background: var(--surface-muted); }
.paste-local__em { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-muted); display: grid; place-items: center; font-size: 17px; }
.paste-local__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.paste-local__txt b { font-size: 13px; color: var(--ink); }
.paste-local__txt span { font-size: 11px; color: var(--text-3); }
.paste-local__go { flex: none; font: 700 11.5px var(--font-body), system-ui; color: var(--coral); }
.paste-local__anyway { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 11px; cursor: pointer;
  border: 1px dashed color-mix(in srgb, var(--magic) 45%, var(--border)); background: transparent; font: 700 12px var(--font-body), system-ui; color: var(--magic-deep); }
.paste-local__anyway span { font-weight: 600; color: var(--text-3); }
.paste-local__fn { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: none; background: transparent; cursor: pointer; text-align: left; font-family: inherit; }
.paste-local__fn:hover { background: var(--surface-muted); }
.paste-local__fnic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px;
  background: color-mix(in srgb, var(--info-blue) 11%, var(--surface)); color: var(--info-blue); }
.paste-local__fntxt { flex: 1; display: flex; flex-direction: column; }
.paste-local__fntxt b { font-size: 13px; color: var(--ink); text-transform: capitalize; }
.paste-local__fntxt span { font-size: 11px; color: var(--text-2); }

/* ============ A1 · paywall flow ============ */
.pw-scrim { position: absolute; inset: 0; z-index: 97; background: rgba(15,22,32,.55); display: grid; place-items: center; padding: 22px; animation: fade .18s ease-out; }
.pw-card { position: relative; width: 340px; max-width: 100%; background: var(--surface); border-radius: 26px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lg); text-align: center; align-items: center; }
.pw-card__x { position: absolute; top: 13px; right: 13px; width: 30px; height: 30px; border-radius: 999px; border: none; background: var(--grey-150);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.pw-card__eye { font: 800 10.5px var(--font-body), system-ui; letter-spacing: .1em; text-transform: uppercase; color: var(--magic-deep); }
.pw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.pw-stat { border: 1px solid var(--border); border-radius: 15px; padding: 12px 6px 10px; background: var(--surface-muted); }
.pw-stat b { display: block; font-size: 22px; color: var(--ink); }
.pw-stat span { font-size: 10.5px; color: var(--text-2); }
.pw-card__lead { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.pw-card__ghost { border: none; background: none; font: 650 12.5px var(--font-body), system-ui; color: var(--text-3); cursor: pointer; }
.pw-hero { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--brand-gradient, linear-gradient(135deg,#FF5A5F,#7C4DDB)); }
.pw-hero img { width: 34px; height: 34px; }
.pw-card__title { font-size: 18px; color: var(--ink); }
.pw-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.pw-feats li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); text-align: left; }
.pw-feats li i { color: var(--success); font-size: 15px; }
.pw-cta { width: 100%; border: none; border-radius: 15px; padding: 11px 14px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--btn-accent-bg, var(--coral)); color: #fff; }
.pw-cta span { font: 800 14.5px var(--font-body), system-ui; }
.pw-cta small { font: 600 10.5px var(--font-body), system-ui; opacity: .85; }
.pw-cta.ghost { background: var(--surface-muted); color: var(--ink); border: 1px solid var(--border); }
.pw-card__note { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-3); }
.pw-card--wait { gap: 8px; }
.pw-wait__spin { font-size: 30px; color: var(--magic-deep); display: grid; }
.pw-wait__spin i { animation: pwspin 1s linear infinite; }
@keyframes pwspin { to { transform: rotate(360deg); } }
.pw-wait__bar { width: 100%; height: 6px; border-radius: 3px; background: var(--grey-150); overflow: hidden; }
.pw-wait__bar i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--magic-deep); animation: pwbar 1.4s ease-in-out infinite; }
@keyframes pwbar { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.pw-toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 98; display: flex; gap: 10px; align-items: center;
  background: var(--ink); color: #fff; border-radius: 16px; padding: 11px 15px; box-shadow: var(--shadow-lg); width: max-content; max-width: 86%; animation: fade .2s ease-out; }
.pw-toast__spark { font-size: 18px; color: #F5C451; }
.pw-toast b { display: block; font-size: 13.5px; }
.pw-toast span { font-size: 11.5px; opacity: .8; }

/* ============ A6 · global parse pill ============ */
.parse-pill { position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 66; display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 9px 7px 13px; box-shadow: var(--shadow-lg);
  max-width: 88%; animation: fade .2s ease-out; }
.parse-pill__spin { display: grid; color: var(--magic-deep); font-size: 16px; }
.parse-pill__spin i { animation: pwspin 1s linear infinite; }
.parse-pill__txt { font: 650 12.5px var(--font-body), system-ui; color: var(--ink); white-space: nowrap; }
.parse-pill__ok { color: var(--success); font-size: 17px; display: grid; }
.parse-pill__review { border: none; background: none; cursor: pointer; text-align: left; display: flex; flex-direction: column; font-family: inherit; }
.parse-pill__review b { font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.parse-pill__review span { font-size: 10.5px; color: var(--coral); font-weight: 700; }
.parse-pill__x { border: none; background: var(--grey-150); width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer; font-size: 12px; flex: none; }
.parse-pill.done { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }

/* ============ A2 · free usage block (Plan & usage) ============ */
.usage-free { border: 1px solid var(--border); border-radius: 16px; padding: 13px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.usage-free__hd { display: flex; align-items: center; gap: 8px; }
.usage-free__hd b { font-size: 14px; color: var(--ink); }
.usage-free__bonus { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); font: 800 11px var(--font-body), system-ui; }
.usage-free__bar { height: 8px; border-radius: 4px; background: var(--grey-150); overflow: hidden; }
.usage-free__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--coral), var(--magic-deep)); }
.usage-free__sub { font-size: 11.5px; color: var(--text-2); }
.usage-earn { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.usage-earn__lbl { font: 800 10px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.usage-earn__row { display: flex; align-items: center; gap: 10px; }
.usage-earn__ic { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 15px;
  background: var(--surface-muted); color: var(--magic-deep); }
.usage-earn__t { display: flex; flex-direction: column; }
.usage-earn__t b { font-size: 12.5px; color: var(--ink); }
.usage-earn__t span { font-size: 11px; color: var(--text-2); }
.badge-magic.free { background: var(--grey-150); color: var(--ink-2); }
.plan--free .plan__inf { color: var(--coral); }

/* ============ A8 · guide "try it" CTA ============ */
.guide2__try { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
  border-radius: 14px; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--coral) 45%, var(--border)); background: color-mix(in srgb, var(--coral) 5%, var(--surface));
  font: 700 13px var(--font-body), system-ui; color: var(--coral); }
.guide2__tryem { font-size: 15px; }

/* ============ J1/J2 · referral + add-by-handle ============ */
.shareme__refbox { grid-column: 1 / -1; margin-top: 4px; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; padding: 11px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--magic) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--magic) 22%, var(--border)); }
.shareme__refgift { grid-row: 1 / 3; align-self: center; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px;
  background: var(--magic-deep); color: #fff; }
.shareme__reftxt { align-self: center; display: flex; flex-direction: column; }
.shareme__reftxt b { font-size: 13px; color: var(--ink); }
.shareme__reftxt span { font-size: 11px; line-height: 1.35; color: var(--text-2); }
.shareme__reflink { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding: 8px 8px 8px 11px; border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--magic) 35%, var(--border)); background: var(--surface); cursor: pointer; font-family: inherit; }
.shareme__reflink:hover { border-style: solid; }
.shareme__reflinkurl { min-width: 0; font: 600 11.5px var(--font-mono, ui-monospace), monospace; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.shareme__reflinkurl b { color: var(--magic-deep); }
.shareme__reflinkcopy { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-muted); color: var(--magic-deep); }
.addhandle { margin: 10px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.addhandle__lbl { font: 800 10px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 0 2px; }
.addhandle__row { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 8px 0 14px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); }
.addhandle__row input { flex: 1; min-width: 0; border: none; background: none; font: 500 13.5px var(--font-body), system-ui; color: var(--ink); outline: none; }
.addhandle__row button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  border: none; background: var(--surface-muted); color: var(--ink); font: 700 12px var(--font-body), system-ui; cursor: pointer; }
.addhandle__row button:not(:disabled):hover { background: var(--coral); color: #fff; }
.addhandle__row button:disabled { opacity: .5; cursor: default; }
.addhandle__sent { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-radius: 13px; font-size: 12.5px; color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--border)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); }
.addhandle__sent i { color: var(--success); font-size: 16px; }
.qrmodal__ref { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 11px; color: var(--magic-deep); }

/* ============ I2/I4 · shared-with-you + delete ============ */
.triprow2__del, .triprow2__del i { color: var(--danger-alt, #D14343) !important; }
.triprow2--shared .triprow2__ic { position: relative; cursor: default; }
.triprow2__ownerav { position: absolute; right: -5px; bottom: -5px; width: 21px; height: 21px; border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; background: var(--c, #888); border: 2px solid var(--surface); }
.triprow2--shared .td-role { margin-left: 7px; }
.triprow2__invite { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; padding: 10px 11px; border-radius: 12px;
  background: color-mix(in srgb, var(--coral) 6%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--coral) 35%, var(--border)); }
.triprow2__invtxt { display: inline-flex; align-items: center; gap: 6px; font: 650 12px var(--font-body), system-ui; color: var(--ink); }
.triprow2__invtxt i { color: var(--coral); font-size: 15px; }
.triprow2__inviteacts { display: flex; gap: 8px; }
.triprow2__join { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; border: none;
  background: var(--coral); color: #fff; font: 700 12.5px var(--font-body), system-ui; cursor: pointer; }
.triprow2__peek { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); font: 700 12.5px var(--font-body), system-ui; color: var(--ink); cursor: pointer; }

/* Kaio review — shared-trip rows: member dots + roles + compact one-line invite (was a taller banner) */
.triprow2__people { flex: none; align-self: center; display: inline-flex; align-items: center; padding: 4px; border: none; background: none; cursor: pointer; border-radius: 999px; }
.triprow2__people:active { background: var(--surface-muted); }
.mdots { display: inline-flex; align-items: center; }
.mdots__av { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 12px;
  background: var(--c, #888); border: 2px solid var(--surface); margin-left: -7px; }
.mdots__av:first-child { margin-left: 0; }
.mdots__more { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; margin-left: -7px;
  font: 800 10.5px var(--font-body), system-ui; color: var(--text-2); background: var(--surface-muted); border: 2px solid var(--surface); }
.triprow2__joinsm { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px; border: none;
  background: var(--coral); color: #fff; font: 700 12.5px var(--font-body), system-ui; cursor: pointer; }
.triprow2__joinsm i { font-size: 15px; }
.triprow2__joinsm:active { filter: brightness(.95); }

/* who's-in-this-trip popover — clip-proof centered overlay for all platforms (Kaio mobile bug) */
.ppl-pop { position: fixed; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%); z-index: 71; width: 320px; max-width: calc(100% - 32px); max-height: 80vh; overflow-y: auto; padding: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg, 0 16px 42px rgba(20,20,30,.18)); }
.ppl-pop__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.ppl-pop__hd b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--ink); }
.ppl-pop__hd b i { font-size: 15px; color: var(--text-2); }
.ppl-pop__me { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3);
  background: var(--surface-muted); border-radius: 999px; padding: 3px 7px; }
.ppl-pop__me.admin { color: var(--coral-hover); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
.ppl-pop__list { display: flex; flex-direction: column; }
.ppl-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.ppl-row + .ppl-row { border-top: 1px solid var(--border); }
.ppl-row__av { flex: none; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; background: var(--c, #888); }
.ppl-row__nm { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.ppl-row__you { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); background: var(--surface-muted); border-radius: 999px; padding: 2px 6px; }
.ppl-row__badge { flex: none; font-size: 11px; font-weight: 700; color: var(--text-2); }
.ppl-row__badge.creator { color: var(--coral); }
.ppl-row__badge.coadmin { color: var(--info-blue); }
.ppl-row__role { flex: none; display: inline-flex; align-items: center; gap: 3px; font: 700 11px var(--font-body), system-ui; color: var(--text-2);
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 10px; cursor: pointer; }
.ppl-row__role.editor { color: var(--info-blue); }
.ppl-row__role.coadmin { color: var(--info-blue); border-color: color-mix(in srgb, var(--info-blue) 40%, var(--border)); }
.ppl-row__role i { color: var(--text-3); }
.ppl-pop__foot { margin-top: 10px; }
.ppl-pop__tip { display: block; margin-top: 7px; font-size: 10.5px; line-height: 1.35; color: var(--text-3); }
.ppl-pop__invite { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; margin-top: 10px; border-radius: 11px;
  border: 1px solid var(--coral-soft); background: color-mix(in srgb, var(--coral) 8%, var(--surface)); color: var(--coral); font: 700 12.5px var(--font-body), system-ui; cursor: pointer; }
.ppl-pop__invite i { font-size: 16px; }
.ppl-pop__note { display: flex; align-items: flex-start; gap: 6px; margin: 9px 0 0; font-size: 11px; line-height: 1.35; color: var(--text-2); }
.ppl-pop__note i { flex: none; margin-top: 1px; color: var(--text-3); font-size: 14px; }
.td-modal__cta.danger { background: var(--danger-alt, #D14343); }

/* ============ C4 · For you block + nav badges ============ */
.foryou { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 10px 10px 6px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.foryou__hd { display: flex; align-items: center; gap: 7px; padding: 2px 4px 8px; }
.foryou__hd b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.foryou__n { padding: 2px 8px; border-radius: 999px; background: var(--coral); color: #fff; font: 800 10px var(--font-body), system-ui; }
.foryou__mark { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer;
  font: 700 11px var(--font-body), system-ui; color: var(--text-2); }
.foryou__row { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 8px 6px; border: none; background: none;
  cursor: pointer; border-radius: 12px; font-family: inherit; }
.foryou__row:hover { background: var(--surface-muted); }
.foryou__row.unread { background: color-mix(in srgb, var(--coral) 4%, transparent); }
.foryou__av { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; background: var(--c, #999); }
.foryou__av.logo { background: var(--surface-muted); }
.foryou__av.logo img { width: 18px; height: 18px; }
.foryou__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.foryou__line { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.foryou__line b { color: var(--ink); }
.foryou__quote { font-size: 11.5px; color: var(--text-3); font-style: italic; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.foryou__when { flex: none; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-3); padding-top: 2px; }
.foryou__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--coral); }
.foryou__more { width: 100%; display: flex; align-items: center; justify-content: center; gap: 5px; border: none; background: none; cursor: pointer;
  padding: 7px 0; font: 700 11.5px var(--font-body), system-ui; color: var(--text-2); border-top: 1px dashed var(--border); margin-top: 4px; }
.bn-tab__icw { position: relative; display: grid; place-items: center; }
.bn-badge { position: absolute; top: -5px; right: -9px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--coral);
  color: #fff; font: 800 9px/15px var(--font-body), system-ui; text-align: center; border: 1.5px solid var(--surface); }
.ymd-navbadge { margin-left: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--coral); color: #fff;
  font: 800 9.5px/16px var(--font-body), system-ui; text-align: center; }

/* ============ C1/C2/J1 · sign-in states + account variants ============ */
.invited { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 15px; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--magic) 26%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--magic) 9%, var(--surface)), var(--surface)); }
.invited__gift { flex: none; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; background: var(--magic-deep); color: #fff; font-size: 15px; }
.invited__txt { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.invited__txt b { color: var(--ink); }
.signin-sent__ic { width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; font-size: 26px; margin: 4px auto 2px;
  background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.signin-sent__ic.err { background: color-mix(in srgb, var(--coral) 10%, var(--surface)); color: var(--coral); }
.signin-sent__bonus { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11.5px; color: var(--magic-deep); margin: 2px 0 8px; }
.signin-alt { border: none; background: none; cursor: pointer; margin-top: 9px; font: 700 12px var(--font-body), system-ui; color: var(--text-2); }
.signin-alt em { font-style: normal; font-weight: 600; color: var(--text-3); }
.signin-alt:hover { color: var(--ink); }
.signin-fail { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; margin-bottom: 8px; border-radius: 12px; font-size: 12px;
  color: var(--ink); border: 1px solid color-mix(in srgb, var(--coral) 40%, var(--border)); background: color-mix(in srgb, var(--coral) 7%, var(--surface)); }
.signin-fail i { color: var(--coral); font-size: 15px; }
.signin-demo { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.signin-demo span { font-size: 10px; color: var(--text-3); }
.signin-demo button { border: 1px solid var(--border); background: var(--surface-muted); border-radius: 999px; padding: 3px 10px; cursor: pointer;
  font: 650 10.5px var(--font-body), system-ui; color: var(--text-2); }
.acct-field.locked .acct-field__in { color: var(--text-2); background: var(--surface-muted); border-radius: 8px; padding: 4px 8px; }
.acct-field__managed { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: 650 10px var(--font-body), system-ui;
  font-style: normal; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.acct-oauth { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 15px; border: 1px solid var(--border); background: var(--surface); }
.acct-oauth__ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px;
  background: var(--surface-muted); color: var(--ink); }
.acct-oauth__txt { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.acct-oauth__txt b { font-size: 13.5px; color: var(--ink); }
.acct-oauth__txt span { font-size: 11.5px; line-height: 1.45; color: var(--text-2); }

/* ============ C3 · import ============ */
.imp-lead { margin: 0 2px 10px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.imp-srcs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.imp-src { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid var(--border); background: var(--surface); font-family: inherit; text-align: left; }
.imp-src.on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 5%, var(--surface)); }
.imp-src b { font-size: 13.5px; color: var(--ink); }
.imp-src span { font-size: 11px; color: var(--text-2); }
.imp-src__ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; margin-bottom: 3px; }
.imp-src__ic.mapstr { background: color-mix(in srgb, var(--coral) 11%, var(--surface)); color: var(--coral); }
.imp-src__ic.takeout { background: color-mix(in srgb, var(--info-blue) 11%, var(--surface)); color: var(--info-blue); }
.imp-drop { margin-top: 10px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 14px; border-radius: 16px;
  border: 1.5px dashed var(--border); background: var(--surface-muted); cursor: pointer; font-family: inherit; color: var(--text-3); }
.imp-drop i { font-size: 22px; }
.imp-drop b { font-size: 13.5px; color: var(--text-2); }
.imp-drop span { font-size: 11px; }
.imp-drop.ready { border-color: var(--coral); color: var(--coral); background: color-mix(in srgb, var(--coral) 4%, var(--surface)); }
.imp-drop.ready b { color: var(--ink); }
.imp-drop:disabled { cursor: default; }
.imp-sum { display: flex; flex-direction: column; gap: 3px; padding: 13px 14px; border-radius: 15px; margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); background: color-mix(in srgb, var(--success) 6%, var(--surface)); }
.imp-sum b { font-size: 15px; color: var(--ink); }
.imp-sum span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.imp-cityrow { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.imp-cityrow__em { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-muted); display: grid; place-items: center; font-size: 16px; }
.imp-cityrow__txt { flex: 1; display: flex; flex-direction: column; }
.imp-cityrow__txt b { font-size: 13px; color: var(--ink); }
.imp-cityrow__txt span { font-size: 11px; color: var(--text-3); }
.imp-cityrow__fix { display: inline-flex; align-items: center; gap: 3px; border: none; border-radius: 999px; padding: 5px 10px; cursor: pointer;
  background: color-mix(in srgb, var(--coral) 9%, var(--surface)); color: var(--coral); font: 700 11px var(--font-body), system-ui; }
.imp-prog, .imp-done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 14px; }
.imp-prog__ic { font-size: 28px; color: var(--magic-deep); display: grid; }
.imp-prog__ic i { animation: pwspin 1s linear infinite; }
.imp-prog b, .imp-done b { font-size: 16px; color: var(--ink); }
.imp-prog span { font-size: 12px; color: var(--text-2); }
.imp-prog__bar { width: 100%; max-width: 320px; height: 8px; border-radius: 4px; background: var(--grey-150); overflow: hidden; margin-top: 8px; }
.imp-prog__bar i { display: block; height: 100%; border-radius: 4px; background: var(--coral); transition: width .1s linear; }
.imp-done__ic { font-size: 40px; color: var(--success); }
.imp-done p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); }
.imp-done .btn-primary, .imp-done .btn-ghost { max-width: 320px; }

/* ============ I5 · friend trip viewer ============ */
.ftrip-pill { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 15px; margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--info-blue) 32%, var(--border)); background: color-mix(in srgb, var(--info-blue) 6%, var(--surface));
  position: sticky; top: -8px; z-index: 5; }
.ftrip-pill__av { flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 16px; background: var(--c, #999); }
.ftrip-pill__txt { flex: 1; display: flex; flex-direction: column; }
.ftrip-pill__txt b { font-size: 13px; color: var(--ink); }
.ftrip-pill__txt span { font-size: 11px; color: var(--text-2); }
.ftrip-pill__x { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  padding: 6px 11px; cursor: pointer; font: 700 11.5px var(--font-body), system-ui; color: var(--ink); }
.ftrip-meta { display: flex; gap: 12px; padding: 0 4px 12px; }
.ftrip-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); }
.ftrip-meta i { font-size: 14px; color: var(--ink-2); }
.ftrip-day { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.ftrip-day__hd { display: flex; align-items: baseline; gap: 8px; padding: 10px 13px 8px; border-bottom: 1px solid var(--border); }
.ftrip-day__hd b { font-size: 13.5px; color: var(--ink); }
.ftrip-day__hd span { font-size: 11px; color: var(--text-3); }
.ftrip-stop { display: flex; align-items: center; gap: 11px; padding: 9px 13px; }
.ftrip-stop + .ftrip-stop { border-top: 1px dashed var(--border); }
.ftrip-stop__em { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-muted); display: grid; place-items: center; font-size: 16px; }
.ftrip-stop__txt { flex: 1; display: flex; flex-direction: column; }
.ftrip-stop__txt b { font-size: 12.5px; color: var(--ink); }
.ftrip-stop__txt span { font-size: 10.5px; color: var(--text-3); }
.ftrip-stop__add { flex: none; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--coral); cursor: pointer; display: grid; place-items: center; font-size: 15px; }

/* ============ I3 · public shared-map page ============ */
.sharedmap { position: absolute; inset: 0; z-index: 30; background: var(--surface-muted); display: flex; flex-direction: column; }
.sharedmap__top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 58px 16px 10px; z-index: 3; }
.sharedmap__brand { display: inline-flex; align-items: center; gap: 7px; font: 800 15px var(--font-display, var(--font-body)), system-ui; color: var(--ink); }
.sharedmap__brand img { width: 22px; height: 22px; }
.sharedmap__login { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 14px; cursor: pointer;
  font: 700 12px var(--font-body), system-ui; color: var(--ink); }
.sharedmap__map { position: absolute; inset: 0; }
.sharedmap__pin { cursor: pointer; }
.sharedmap__panel { position: relative; z-index: 2; margin: auto 10px 10px; max-height: 46%; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px 20px 16px 16px; box-shadow: var(--shadow-lg); overflow: hidden; }
.sharedmap__owner { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sharedmap__av { flex: none; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; font-size: 18px;
  background: var(--c, #7FB23A); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.sharedmap__ownertxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sharedmap__ownertxt b { font-size: 14px; color: var(--ink); }
.sharedmap__ownertxt span { font-size: 11px; color: var(--text-2); }
.sharedmap__ro { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--surface-muted);
  font: 700 10.5px var(--font-body), system-ui; color: var(--text-2); }
.sharedmap__list { overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.sharedmap__row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; }
.sharedmap__row:hover, .sharedmap__row.open { background: var(--surface-muted); }
.sharedmap__em { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-muted); display: grid; place-items: center; font-size: 17px; }
.sharedmap__row.open .sharedmap__em { background: var(--surface); }
.sharedmap__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sharedmap__txt b { font-size: 13px; color: var(--ink); }
.sharedmap__txt span { font-size: 11px; color: var(--text-3); }
.sharedmap__save { position: relative; flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-3); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.sharedmap__savelock { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 999px; background: #F5C451;
  color: #4a3403; display: grid; place-items: center; font-size: 8px; }
.sharedmap__lockhint { flex: none; display: flex; align-items: center; gap: 7px; margin: 0 10px 10px; padding: 9px 12px; border-radius: 12px;
  font-size: 11.5px; color: var(--ink); background: color-mix(in srgb, #F5C451 18%, var(--surface)); border: 1px solid color-mix(in srgb, #F5C451 45%, var(--border)); }
.sharedmap__cta { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 10px 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); }
.sharedmap__ctatxt { flex: 1; display: flex; flex-direction: column; }
.sharedmap__ctatxt b { font-size: 14px; }
.sharedmap__ctatxt span { font-size: 11px; opacity: .75; }
.sharedmap__ctabtn { flex: none; display: inline-flex; align-items: center; gap: 5px; border: none; border-radius: 999px; padding: 9px 15px;
  background: var(--coral); color: #fff; font: 800 12.5px var(--font-body), system-ui; cursor: pointer; }

/* ============ D1 · layer sheet ============ */
.cm-layers { display: flex; flex-direction: column; gap: 8px; }
.cm-layer { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); }
.cm-layer.on { border-color: color-mix(in srgb, var(--coral) 35%, var(--border)); background: color-mix(in srgb, var(--coral) 3%, var(--surface)); }
.cm-layer.off { opacity: .75; }
.cm-layer__ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.cm-layer__ic.explore { background: color-mix(in srgb, #F5A524 16%, var(--surface)); color: #B57200; }
.cm-layer__ic.districts { background: color-mix(in srgb, var(--info-blue) 12%, var(--surface)); color: var(--info-blue); }
.cm-layer__ic.transit { background: color-mix(in srgb, var(--success) 12%, var(--surface)); color: var(--success); }
.cm-layer__ic.friends { background: color-mix(in srgb, var(--magic) 12%, var(--surface)); color: var(--magic-deep); }
.cm-layer__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-layer__txt b { font-size: 13.5px; color: var(--ink); }
.cm-layer__txt span { font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
.cm-layer__load { display: inline-flex; align-items: center; gap: 5px; color: var(--magic-deep) !important; }
.cm-layer__load i { animation: pwspin 1s linear infinite; }
.cm-layer__err { display: inline-flex; align-items: center; gap: 5px; color: var(--coral) !important; }
.cm-layer__err button { border: none; background: none; color: var(--coral); font: 800 11.5px var(--font-body), system-ui; cursor: pointer; text-decoration: underline; }
.cm-layer .tgl { cursor: pointer; flex: none; }

/* ============ D5/D3/D7/D2/F2 · map markers ============ */
.cm-spot__badges { position: absolute; top: -7px; right: -9px; display: flex; }
.cm-spot__badges i { width: 15px; height: 15px; border-radius: 999px; display: grid; place-items: center; font-size: 8.5px; font-style: normal;
  background: var(--c, #999); border: 1.5px solid #fff; margin-left: -5px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cm-spot__badges em { font: 800 8.5px/15px var(--font-body), system-ui; font-style: normal; background: var(--ink); color: #fff;
  border-radius: 999px; padding: 0 4px; margin-left: -4px; border: 1.5px solid #fff; }
.cm-spot.wiggle { animation: cmWiggle .4s ease-in-out infinite; }
@keyframes cmWiggle { 0%,100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } }
@media (prefers-reduced-motion: reduce) { .cm-spot.wiggle { animation: none; } }
.cm-spot__del { position: absolute; top: -8px; left: -8px; width: 18px; height: 18px; border-radius: 999px; background: var(--danger-alt, #D14343);
  color: #fff; display: grid; place-items: center; font-size: 10px; border: 1.5px solid #fff; cursor: pointer; }
.cm-spot.dim { opacity: .3; filter: saturate(.4); pointer-events: none; }
.cm-spot.moving { z-index: 40; transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 14px 26px -8px rgba(15,22,32,.5); cursor: grabbing;
  outline: 3px solid var(--coral); outline-offset: 2px; }
.citymap.moving .citymap__map { cursor: grabbing; }
.cm-spot--stay { border-radius: 13px; }
.cm-spot--stay::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 2px solid #003580; opacity: .55; pointer-events: none; }
.cm-spot--pending { border: 2px dashed var(--coral) !important; border-radius: 50% !important; padding: 6px !important; box-sizing: border-box !important;
  background: color-mix(in srgb, var(--surface) 78%, transparent) !important; animation: pendPulse 1.6s ease-in-out infinite; }
@keyframes pendPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 40%, transparent); } 55% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .cm-spot--pending { animation: none; } }
.cm-spot--pending .cm-spot__em { opacity: .8; }
.cm-spot--pending.focus { outline: 3px solid var(--coral); outline-offset: 2px; }
.cm-spot__pendtag { position: absolute; top: -8px; right: -8px; width: 17px; height: 17px; border-radius: 999px; background: var(--coral); color: #fff;
  font: 800 10px/17px var(--font-body), system-ui; text-align: center; border: 1.5px solid #fff; }
.cm-spot--friendpin { border-color: var(--fc, #888) !important; box-shadow: 0 3px 10px -2px color-mix(in srgb, var(--fc, #888) 55%, transparent); }
.cm-spot__ftag { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 7px;
  border-radius: 999px; background: var(--fc, #888); color: #fff; font: 700 9px var(--font-body), system-ui; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.cm-spot--explore { border-color: #F5A524 !important; color: #B57200; font-size: 15px; width: 30px; height: 30px; }
.cm-spot--guide { border: 2px dashed #B57200 !important; background: #FFF7E6 !important; box-shadow: 0 4px 12px -3px rgba(181,114,0,.45); }
.cm-district { position: absolute; transform: translate(-50%, -50%); border: 1.5px dashed color-mix(in srgb, var(--info-blue) 55%, transparent);
  border-radius: 30% 42% 38% 30%; background: color-mix(in srgb, var(--info-blue) 6%, transparent); pointer-events: none; display: grid; place-items: center; }
.cm-district i { font: 800 9.5px var(--font-body), system-ui; font-style: normal; letter-spacing: .06em; text-transform: uppercase;
  color: var(--info-blue); background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: 999px; padding: 2px 8px; }
.cm-transit { position: absolute; height: 3.5px; border-radius: 2px; opacity: .65; pointer-events: none; }
.cm-transit.ns { left: 26%; top: 30%; width: 42%; transform: rotate(38deg); background: #D42E12; }
.cm-transit.ew { left: 30%; top: 52%; width: 46%; transform: rotate(-8deg); background: #009645; }
.cm-transit__lbl { position: absolute; font: 800 8.5px var(--font-body), system-ui; color: #D42E12; background: color-mix(in srgb, var(--surface) 85%, transparent);
  padding: 1px 6px; border-radius: 999px; pointer-events: none; }
.citymap__note--btn { border: none; background: none; cursor: pointer; padding: 0; }
.citymap__notecount { position: absolute; top: -7px; right: -9px; min-width: 15px; height: 15px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 800 9px/15px var(--font-body), system-ui; text-align: center; padding: 0 3px; border: 1.5px solid #fff; }
.cm-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; border-radius: 999px; padding: 10px 16px; font: 650 12.5px var(--font-body), system-ui;
  box-shadow: var(--shadow-lg); white-space: nowrap; max-width: 92%; animation: fade .2s ease-out; }
.cm-toast i { color: #F5C451; }

/* ============ D7 · pending list segment ============ */
.cm-pending { margin: 0 0 10px; border: 1.5px dashed color-mix(in srgb, var(--coral) 45%, var(--border)); border-radius: 16px;
  background: color-mix(in srgb, var(--coral) 3%, var(--surface)); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.cm-pending__hd { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cm-pending__badge { width: 20px; height: 20px; border-radius: 999px; background: var(--coral); color: #fff; font: 800 11px/20px var(--font-body), system-ui; text-align: center; }
.cm-pending__hd b { font-size: 12.5px; color: var(--ink); }
.cm-pending__src { font-size: 11px; color: var(--text-2); }
.cm-pending__all { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 999px; padding: 6px 11px;
  background: var(--coral); color: #fff; font: 700 11px var(--font-body), system-ui; cursor: pointer; white-space: nowrap; flex: none; }
.cm-pendcard { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border: 1.5px dashed var(--border); border-radius: 13px; background: var(--surface); }
.cm-pendcard.focus { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 18%, transparent); }
.cm-pendcard__preview { all: unset; flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.cm-pendcard__em, .cm-pendcard__thumb { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--surface-muted); display: grid; place-items: center;
  font-size: 18px; opacity: .85; }
.cm-pendcard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-pendcard__txt b { font-size: 13px; color: var(--ink); }
.cm-pendcard__txt span { font-size: 10.5px; color: var(--coral); font-weight: 700; }
.cm-pendcard__txt .cm-pendcard__desc { margin-top: var(--space-1); font-size: 11.5px; line-height: 1.4; color: var(--text-2); font-weight: 400; }
.cm-pendcard__acts { flex: none; display: flex; gap: 6px; }
.cm-pendcard__ok, .cm-pendcard__no { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 15px; cursor: pointer; border: none; }
.cm-pendcard__ok { background: var(--success); color: #fff; }
.cm-pendcard__no { background: var(--grey-150); color: var(--ink-2); }
.cm-pendcard button:disabled, .cm-pending__all:disabled { cursor: wait; opacity: .65; }

.spot-sheet--pending { outline-style: dashed; outline-color: var(--coral); }
.spot-pending-review { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3); border-radius: var(--radius-sm); background: var(--accent-soft); }
.spot-pending-review__copy, .spot-pending-review__copy > span, .spot-pending-review__acts { display: flex; align-items: center; gap: var(--space-2); }
.spot-pending-review__copy > span { align-items: flex-start; flex-direction: column; gap: 0; }
.spot-pending-review__copy small { color: var(--text-2); }
.spot-pending-review__acts button { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.spot-pending-review__acts .keep { border-color: var(--success); background: var(--success); color: var(--surface); }
.spot-pending-review__acts button:disabled { cursor: wait; opacity: .65; }

/* ============ D2 · friend segments in the list ============ */
.cm-friendseg { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cm-friendseg__hd { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.cm-friendseg__av { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font-size: 13px;
  background: var(--c, #999); border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.cm-friendseg__hd b { font-size: 12.5px; color: var(--ink); }
.cm-friendseg__hd span { font-size: 10.5px; color: var(--text-3); }
.cm-poi--friend { border-left: 3px solid var(--fc, #888); }
.cm-poi__addmine { flex: none; align-self: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--coral); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.cm-poi__platform { font-style: normal; color: #003580; font-weight: 800; }
.cm-poi__editacts { display: flex; flex-direction: column; gap: 6px; align-self: center; }
.cm-poi__move { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--info-blue);
  cursor: pointer; display: grid; place-items: center; font-size: 14px; }

/* ============ D3 · move-pin bar ============ */
.cm-movebar { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 60; display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border-radius: 17px; padding: 11px 13px; box-shadow: var(--shadow-lg); animation: fade .18s ease-out; }
.cm-movebar__ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 17px; }
.cm-movebar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-movebar__txt b { font-size: 12.5px; }
.cm-movebar__txt span { font-size: 10.5px; opacity: .7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-movebar__cancel { border: none; background: none; color: rgba(255,255,255,.75); font: 700 12px var(--font-body), system-ui; cursor: pointer; }
.cm-movebar__save { display: inline-flex; align-items: center; gap: 5px; border: none; border-radius: 999px; padding: 9px 14px;
  background: var(--coral); color: #fff; font: 800 12px var(--font-body), system-ui; cursor: pointer; }

/* ============ D6 · note sheet ============ */
.cm-notesheet { display: flex; flex-direction: column; gap: 8px; max-height: 72%; overflow-y: auto; }
.cm-note__cluster { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 13px; font-size: 11.5px; color: var(--text-2);
  background: var(--surface-muted); border: 1px dashed var(--border); }
.cm-note__cluster > i { margin-right: 4px; }
.cm-note__clusterrow { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-note__clusterchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); font: 650 11px var(--font-body), system-ui; color: var(--ink); }
.cm-note__title { display: flex; align-items: center; gap: 8px; }
.cm-note__title b { font-size: 17px; color: var(--ink); }
.cm-note__title input { flex: 1; border: 1px solid var(--coral); border-radius: 10px; padding: 7px 10px; font: 700 15px var(--font-body), system-ui; color: var(--ink); outline: none; }
.cm-note__pen { border: none; background: var(--grey-150); width: 26px; height: 26px; border-radius: 999px; color: var(--ink-2); cursor: pointer; font-size: 13px; }
.cm-note__by { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.spot-cmt__av.sm { width: 20px; height: 20px; font-size: 10px; }

/* ============ E1/E2 · reactions + comment management ============ */
.spot-cmt { position: relative; }
.spot-cmt__you { margin-left: 6px; font: 700 9px var(--font-body), system-ui; letter-spacing: .05em; text-transform: uppercase;
  background: var(--grey-150); color: var(--text-2); border-radius: 999px; padding: 1.5px 6px; }
.spot-cmt__edited { margin-left: 5px; font-size: 10px; color: var(--text-3); }
.spot-cmt.hidden { align-items: center; gap: 8px; display: flex; padding: 6px 2px; }
.spot-cmt__hiddenlb { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); font-style: italic; }
.spot-cmt__unhide { border: none; background: none; color: var(--coral); font: 700 11.5px var(--font-body), system-ui; cursor: pointer; }
.spot-cmt__edit { display: flex; gap: 6px; margin-top: 3px; }
.spot-cmt__edit input { flex: 1; border: 1px solid var(--coral); border-radius: 9px; padding: 6px 9px; font: 500 12.5px var(--font-body), system-ui; color: var(--ink); outline: none; }
.spot-cmt__edit button { border: none; background: var(--coral); color: #fff; border-radius: 9px; width: 30px; cursor: pointer; }
.rx-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.rx-pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: 700 11px var(--font-body), system-ui; color: var(--ink); }
.rx-pill.me { border-color: color-mix(in srgb, var(--coral) 55%, var(--border)); background: color-mix(in srgb, var(--coral) 9%, var(--surface)); }
.cmt-hoverbar { position: absolute; top: -14px; right: 0; display: none; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 6; }
.cmt-hoverbar.show { display: flex; animation: fade .12s ease-out; }
.cmt-hoverbar__e { border: none; background: none; width: 26px; height: 26px; border-radius: 999px; font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.cmt-hoverbar__e:hover { background: var(--grey-150); }
.cmt-hoverbar__e.more { color: var(--ink-2); font-size: 14px; }
.cmt-menu { position: absolute; top: 14px; right: 0; z-index: 8; display: flex; flex-direction: column; min-width: 150px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-lg); animation: fade .12s ease-out; }
.cmt-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none; background: none; border-radius: 9px;
  font: 650 12px var(--font-body), system-ui; color: var(--ink); cursor: pointer; text-align: left; }
.cmt-menu button:hover { background: var(--surface-muted); }
.cmt-menu button.danger, .cmt-menu button.danger i { color: var(--danger-alt, #D14343); }
.rx-picker__scrim { position: fixed; inset: 0; z-index: 7; }
.rx-picker { position: absolute; top: 16px; right: 0; z-index: 9; width: 224px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 15px; box-shadow: var(--shadow-lg); padding: 8px; animation: fade .12s ease-out; }
.rx-picker__tabs { display: flex; gap: 2px; overflow-x: auto; padding-bottom: 6px; }
.rx-picker__tabs button { flex: none; border: none; background: none; border-radius: 999px; padding: 4px 8px; cursor: pointer;
  font: 700 10px var(--font-body), system-ui; color: var(--text-2); }
.rx-picker__tabs button.on { background: var(--grey-150); color: var(--ink); }
.rx-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; }
.rx-picker__grid button { border: none; background: none; border-radius: 8px; font-size: 15px; padding: 3px 0; cursor: pointer; }
.rx-picker__grid button:hover { background: var(--grey-150); }

/* ============ E3/E4/E5 · spot sheet extras ============ */
.spot-quote { display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; margin: 14px 0 0; padding: 9px 11px;
  border-radius: 13px; border: 1px solid var(--border); background: var(--surface-muted); cursor: pointer; font-family: inherit; }
.spot-quote__ic { flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-size: 13px;
  background: var(--surface); color: var(--magic-deep); border: 1px solid var(--border); }
.spot-quote__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spot-quote__t b { font: 800 8.5px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.spot-quote__t em { font-style: italic; font-size: 12.5px; line-height: 1.5; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.spot-quote.open .spot-quote__t em { -webkit-line-clamp: unset; color: var(--ink); }
.spot-descpanel__who { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-3); padding: 0 2px 6px; }
.spot-descpanel__foot .paste-mic.sm { margin-right: auto; }
.spot-sug__state.half { color: var(--magic-deep); display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.spot-sug__state.half i { animation: pwspin 1s linear infinite; }
.spot-friendbar { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 9px 11px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--c, #888) 45%, var(--border)); background: color-mix(in srgb, var(--c, #888) 7%, var(--surface)); }
.spot-friendbar__av { flex: none; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; font-size: 15px;
  background: var(--c, #888); border: 2px solid var(--surface); }
.spot-friendbar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.spot-friendbar__txt b { font-size: 12.5px; color: var(--ink); }
.spot-friendbar__txt span { font-size: 10.5px; color: var(--text-2); }
.spot-friendbar__add { flex: none; display: inline-flex; align-items: center; gap: 5px; border: none; border-radius: 999px; padding: 8px 12px;
  background: var(--coral); color: #fff; font: 800 11.5px var(--font-body), system-ui; cursor: pointer; }

/* ============ A2 · been-here bonus popover ============ */
.been-pop { position: absolute; right: 10px; top: calc(100% + 8px); z-index: 12; width: 270px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; animation: fade .15s ease-out; }
.been-pop b { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.been-pop b i { color: var(--coral); }
.been-pop p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
.been-pop__row { display: flex; flex-direction: column; gap: 6px; }
.been-pop__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 11px; border: none;
  background: var(--coral); color: #fff; font: 700 12px var(--font-body), system-ui; cursor: pointer; }
.been-pop__ghost { border: none; background: none; color: var(--text-3); font: 700 11.5px var(--font-body), system-ui; cursor: pointer; padding: 4px; }
.been-pop__check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--magic-deep); }
.been-pop__check i { animation: pwspin 1s linear infinite; }
.been-pop__ok { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--success); }
.been-pop__far { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--coral); font-weight: 700; }
.been-pop__farsub { font-size: 11px !important; }

/* ============ F2 · guides in Vibe & Guides + guide view ============ */
.cm-guides { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 7px; }
.cm-guides__lbl { display: inline-flex; align-items: center; gap: 6px; font: 800 10px var(--font-body), system-ui; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); }
.cm-guidecard { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); cursor: pointer; text-align: left; font-family: inherit; }
.cm-guidecard:hover { border-color: color-mix(in srgb, var(--coral) 40%, var(--border)); }
.cm-guidecard__av { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; background: var(--c, #999); }
.cm-guidecard__av.official { background: var(--surface-muted); border: 1px solid var(--border); }
.cm-guidecard__av img { width: 20px; height: 20px; }
.cm-guidecard__av.sm { width: 28px; height: 28px; border-radius: 9px; }
.cm-guidecard__av.sm img { width: 16px; height: 16px; }
.cm-guidecard__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-guidecard__txt b { font-size: 13px; color: var(--ink); }
.cm-guidecard__by { display: inline-flex; align-items: center; gap: 4px; font: 700 10.5px var(--font-body), system-ui; color: var(--text-2); }
.cm-guidecard__sub { font-size: 11px; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cm-guides__more { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer;
  font: 700 11.5px var(--font-body), system-ui; color: var(--coral); padding: 2px; }
.cm-guidebar { position: absolute; left: 50%; top: 60px; transform: translateX(-50%); z-index: 26; display: flex; align-items: center; gap: 6px;
  background: #FFF7E6; border: 1.5px dashed #B57200; border-radius: 999px; padding: 5px 6px 5px 6px; box-shadow: var(--shadow-lg); max-width: 92%; }
.cm-guidebar__main { display: flex; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; text-align: left; font-family: inherit; min-width: 0; }
.cm-guidebar__txt { display: flex; flex-direction: column; min-width: 0; }
.cm-guidebar__txt span { font: 800 8.5px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: #B57200; }
.cm-guidebar__txt b { font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-guidebar__x { flex: none; display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 999px; padding: 6px 11px;
  background: #B57200; color: #fff; font: 800 11px var(--font-body), system-ui; cursor: pointer; }
.cm-sharemenu__ref { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-2); padding: 0 4px; }
.cm-sharemenu__ref b { color: var(--magic-deep); }

/* ============ H1 · plan my days ============ */
.pmd-bar { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 11px 13px; border-radius: 16px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--magic) 50%, var(--border));
  background: linear-gradient(120deg, color-mix(in srgb, var(--magic) 8%, var(--surface)), var(--surface)); font-family: inherit; margin: 2px 0 6px; }
.pmd-bar__logo { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--border); }
.pmd-bar__logo img { width: 22px; height: 22px; }
.pmd-bar__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pmd-bar__txt b { font-size: 13.5px; color: var(--ink); }
.pmd-bar__txt span { font-size: 11.5px; line-height: 1.4; color: var(--text-2); }
.pmd-bar__go { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--magic-deep); color: #fff; font-size: 15px; }
.pmd-q { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.pmd-how { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px; border-radius: 13px; background: var(--surface-muted); border: 1px solid var(--border); }
.pmd-how__row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--text-2); }
.pmd-how__row i { flex: none; font-size: 15px; color: var(--magic-deep); }
.td-toast--undo { display: flex; align-items: center; gap: 8px; }
.td-toast__undo { display: inline-flex; align-items: center; gap: 4px; border: none; border-radius: 999px; padding: 5px 11px; margin-left: 6px;
  background: rgba(255,255,255,.16); color: #fff; font: 800 11.5px var(--font-body), system-ui; cursor: pointer; }
[data-theme="day"] .td-toast--undo .td-toast__undo { background: rgba(255,255,255,.2); }
.td-card.auto { border-color: color-mix(in srgb, var(--magic) 38%, var(--border)); }
.td-autotag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1.5px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--magic) 12%, var(--surface)); color: var(--magic-deep); font: 800 8.5px var(--font-body), system-ui;
  letter-spacing: .05em; text-transform: uppercase; }

/* ============ H2 · day management ============ */
.td-dayhd { position: relative; }
.td-dayhd > div:first-child { min-width: 0; }
.td-dayhd > div:first-child span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-dayhd__more { flex: none; width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 14px; margin-left: 6px; }
.td-daymenu { right: 0; left: auto; top: 34px; width: 230px; }
.td-daymenu button:disabled { opacity: .4; cursor: default; }
.td-daymenu__cur { margin-left: auto; font: 650 11px var(--font-body), system-ui; color: var(--text-3); }
.td-daymenu__rename { padding: 4px; }
.td-daymenu__rename input { width: 100%; border: 1px solid var(--coral); border-radius: 10px; padding: 9px 11px; font: 650 13px var(--font-body), system-ui;
  color: var(--ink); outline: none; background: var(--surface); }
.td-daymenu__cities { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.td-daycell--new { border-style: dashed; color: var(--text-3); gap: 0; }
.td-daycell--new i { font-size: 14px; }
.td-daycell__newlb { font: 700 8.5px var(--font-body), system-ui; letter-spacing: .05em; text-transform: uppercase; }
.td-daycell--new:hover { color: var(--coral); border-color: var(--coral); }
.td-days__note { display: flex; align-items: flex-start; gap: 7px; margin: 10px 2px 0; font-size: 11px; line-height: 1.55; color: var(--text-3); }
.td-days__note i { flex: none; margin-top: 1px; }

/* ============ H5 · fixed time + drag reorder ============ */
.td-card { position: relative; }
.td-card__grab.live { cursor: grab; touch-action: none; }
.td-card__grab.live:active { cursor: grabbing; }
.td-card.dragging { z-index: 12; box-shadow: 0 14px 28px -10px rgba(15,22,32,.4); opacity: .95; }
.td-card__time { display: inline-flex; align-items: center; gap: 3px; margin-right: 7px; padding: 1.5px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--info-blue) 11%, var(--surface)); color: var(--info-blue); font: 800 10px var(--font-body), system-ui; }
.td-card__clock { flex: none; width: 26px; height: 26px; border-radius: 999px; border: none; background: none; color: var(--text-3);
  cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.td-card__clock.on { color: var(--info-blue); }
.td-card__clock:hover { background: var(--grey-150); }
.td-timepop { left: auto; right: 6px; top: calc(100% - 6px); width: 240px; }
.td-timepop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
.td-timepop__t { border: 1px solid var(--border); background: var(--surface); border-radius: 9px; padding: 7px 0; cursor: pointer;
  font: 700 12px var(--font-body), system-ui; color: var(--ink); }
.td-timepop__t.on { border-color: var(--info-blue); background: color-mix(in srgb, var(--info-blue) 9%, var(--surface)); color: var(--info-blue); }
.td-timepop__custom { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 0 4px 0 10px; height: 38px; }
.td-timepop__custom i { color: var(--text-3); font-size: 14px; }
.td-timepop__custom input { flex: 1; min-width: 0; border: none; background: none; outline: none; font: 600 12.5px var(--font-body), system-ui; color: var(--ink); }
.td-timepop__custom button { border: none; background: var(--info-blue); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.td-timepop__custom button:disabled { opacity: .4; }

/* ============ H3 · attach / replace confirmation ============ */
.td-attach { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--border); background: var(--surface-muted); font-family: inherit; }
.td-attach__ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); }
.td-attach__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.td-attach__txt b { font-size: 12.5px; color: var(--ink); }
.td-attach__txt span { font-size: 11px; color: var(--text-2); }
.td-attach.has { border-style: solid; }
.td-attach.has .td-attach__ic { color: var(--success); }

/* ============ I1 · trip visibility ============ */
.tvis { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.tvis__hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.45; color: var(--text-2); padding: 0 2px; }

/* ============ H4 · hero phases ============ */
.td-hero__cd-sub { font-size: 10px; color: var(--text-2); }
.td-hero__cd-row.today b { color: var(--coral); }
.td-hero--post { filter: saturate(.55); }
.td-hero--post .td-hero__name { color: var(--text-2); }
.td-hero__cd.past { opacity: .8; }
.td-hero__recap { margin-top: 9px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 11px;
  border-radius: 12px; border: 1px dashed var(--border); background: var(--surface); cursor: pointer;
  font: 700 12px var(--font-body), system-ui; color: var(--ink); }
.td-hero__recap i { color: var(--coral); }

/* ============ G1 · compass ============ */
.mapctl__compass { position: relative; }
.mapctl__needle { position: absolute; inset: 8px; transition: transform .45s cubic-bezier(.3,1.4,.5,1); display: grid; place-items: center; }
.mapctl__needle i { position: absolute; left: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; transform: translateX(-50%); }
.mapctl__needle i.n { top: 3px; border-bottom: 12px solid var(--coral); }
.mapctl__needle i.s { bottom: 3px; border-top: 12px solid var(--text-3); }
.mapctl__north { position: absolute; top: 1px; right: 5px; font: 800 8px var(--font-body), system-ui; color: var(--text-2); }

/* ============ F1 · discovery ============ */
.citypick__chip--add.disc { border-style: dashed; }
.citypick__city.discovered { animation: fade .4s ease-out; }
.cp-discover { position: absolute; left: 50%; bottom: 178px; transform: translateX(-50%); z-index: 26; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 10px 18px; border-radius: 16px; cursor: pointer; border: 1.5px dashed color-mix(in srgb, var(--magic) 55%, var(--border));
  background: var(--surface); box-shadow: var(--shadow-lg); font: 800 13px var(--font-body), system-ui; color: var(--magic-deep); }
.cp-discover span { font: 600 10.5px var(--font-body), system-ui; color: var(--text-2); }
.cp-discover > i { font-size: 15px; }
.cp-disctoast { position: absolute; left: 50%; top: 118px; transform: translateX(-50%); z-index: 27; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 10px 8px 14px; box-shadow: var(--shadow-lg);
  font: 650 12px var(--font-body), system-ui; color: var(--ink); white-space: nowrap; max-width: 92%; }
.cp-disctoast__spin { display: grid; color: var(--magic-deep); }
.cp-disctoast__spin i { animation: pwspin 1s linear infinite; }
.cp-disctoast__x { border: none; background: var(--grey-150); width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer; font-size: 11px; }
.cp-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px; }
.cp-filters__lbl { display: inline-flex; align-items: center; gap: 4px; font: 800 10px var(--font-body), system-ui; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); }
.cp-filters__chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 11px; cursor: pointer;
  font: 700 11px var(--font-body), system-ui; color: var(--text-2); }
.cp-filters__chip.on { border-color: var(--magic-deep); background: color-mix(in srgb, var(--magic) 9%, var(--surface)); color: var(--magic-deep); }

/* ============ desktop (.ymd) placement overrides ============ */
.ymd .paste-wrap { position: relative; }
.ymd .ymd-search .paste-wrap > .quota-pill,
.ymd .ymd-search .paste-wrap > .paste-local,
.ymd .ymd-search .paste-wrap > .paste-fail { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; }
.ymd .ymd-search .paste-wrap > .quota-pill { right: auto; }
.ymd-droptarget { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 61; display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 22px 14px; border-radius: 18px; border: 2px dashed var(--coral); background: color-mix(in srgb, var(--coral) 6%, var(--surface));
  font: 700 13px var(--font-body), system-ui; color: var(--coral); box-shadow: var(--shadow-lg); pointer-events: none; }
.ymd-search.dropping .paste-field { border-color: var(--coral); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 20%, transparent); }
.ymd-drophint { display: flex; align-items: center; gap: 6px; margin: -2px 2px 12px; padding: 7px 11px; border-radius: 10px;
  border: 1px dashed var(--border); background: var(--surface-muted); font: 650 11px var(--font-body), system-ui; color: var(--text-2); }
.ymd-drophint__prem { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: #B57200; font-weight: 800; }
.ymd .parse-pill { top: 74px; }
.ymd .pw-toast { top: 74px; }
.ymd .sharedmap__top { padding-top: 14px; }
.ymd .sharedmap__panel { position: absolute; left: 18px; top: 64px; bottom: 88px; margin: 0; width: 400px; max-height: none; }
.ymd .sharedmap__cta { position: absolute; left: 18px; bottom: 18px; width: 400px; margin: 0; }
.ymd .cm-movebar { left: auto; right: 18px; bottom: 18px; width: 430px; }
.ymd .cm-guidebar { left: auto; right: 18px; top: 74px; transform: none; }
.ymd .been-pop { right: auto; left: 14px; }
.ymd .cp-discover { bottom: 150px; }
.ymd .mic-scrim, .ymd .pw-scrim { position: fixed; }

/* night-mode sanity for new surfaces */
[data-theme="night"] .cm-guidebar { background: #3a2f14; }
[data-theme="night"] .cm-spot--guide { background: #3a2f14 !important; }
[data-theme="night"] .sharedmap__lockhint { background: color-mix(in srgb, #F5C451 22%, var(--surface)); color: var(--ink); }

/* ============================================================
   REVIEW ROUND 2 — Kaio's comment fixes
   ============================================================ */

/* CM-e · description with inline icon-only edit controls */
.spot-descrow { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 2px; }
.spot-descrow .spot-desc { flex: 1; min-width: 0; margin: 0; }
.spot-descrow__acts { flex: none; display: flex; gap: 4px; padding-top: 1px; }
.spot-iconact { position: relative; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.spot-iconact:hover { color: var(--ink); border-color: var(--slate-400); }
.spot-iconact.on { background: color-mix(in srgb, var(--coral) 10%, var(--surface)); border-color: var(--coral); color: var(--coral); }
.spot-iconact__n { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--coral); color: #fff; font: 800 9px/15px var(--font-body), system-ui; text-align: center; border: 1.5px solid var(--surface); }
.spot-desced { margin: 6px 0 0; }

/* CM-c · remove this pin from my map */
.spot-removemine { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger-alt, #D14343) 30%, var(--border)); background: var(--surface);
  color: var(--danger-alt, #D14343); font: 700 13px var(--font-body), system-ui; cursor: pointer; }
.spot-removemine:hover { background: color-mix(in srgb, var(--danger-alt, #D14343) 7%, var(--surface)); }
.spot-removemine i { font-size: 16px; }

/* CM-d · 1-deep reply threads */
.spot-cmtgroup { display: flex; flex-direction: column; }
.spot-replies { margin: 2px 0 8px 30px; padding-left: 11px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.spot-reply { display: flex; gap: 8px; }
.spot-reply__b { flex: 1; min-width: 0; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 12px; padding: 7px 10px; }
.spot-reply__b > b { display: block; font-size: 11.5px; font-weight: 700; margin-bottom: 2px; color: var(--ink); }
.spot-reply__b p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text); }
.spot-replybox { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px 41px; }
.spot-replybox input { flex: 1; height: 34px; border: 1px solid var(--border); border-radius: 999px; padding: 0 12px; font: 400 12.5px var(--font-body), system-ui; background: var(--surface); outline: none; }
.spot-replybox input:focus { border-color: var(--coral-soft); }
.spot-replybox button { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--coral); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.spot-replybox button:disabled { opacity: .4; }

/* CM-h · pending suggestions header on one line */
.cm-pending__hd { flex-wrap: nowrap !important; }
.cm-pending__hd b { flex: none; white-space: nowrap; }
.cm-pending__src { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* CM-f · simpler note sheet */
.cm-notesheet { position: relative; padding-top: 18px; }
.cm-notesheet__x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-muted);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 16px; z-index: 2; }
.cm-note__head { display: flex; align-items: flex-start; gap: 11px; padding-right: 34px; }
.cm-note__pin { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px;
  color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.cm-note__headtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cm-note__headtxt > b { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cm-note__titlein { border: 1.5px solid var(--coral); border-radius: 10px; padding: 6px 10px; font: 700 16px var(--font-body), system-ui; color: var(--ink); outline: none; background: var(--surface); }
.cm-note__by { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.cm-note__also { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; font-size: 11px; color: var(--text-3); }
.cm-note__alsolbl { font-weight: 700; }
.cm-note__alsochip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: var(--surface-muted);
  border: 1px solid var(--border); font: 650 11px var(--font-body), system-ui; color: var(--ink); }

/* M-j / M-k · guide mode bottom panel (mirrors the social guide look) */
.cm-panel--guide { border-top: 3px solid #E4A300; }
.cm-guidehd { display: flex; align-items: flex-start; gap: 11px; padding: 4px 16px 0; }
.cm-guidehd__av { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--c, #E4572E); }
.cm-guidehd__av.official { background: #FFF7E6; border: 1px solid #F0D99B; }
.cm-guidehd__av img { width: 26px; height: 26px; }
.cm-guidehd__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-guidehd__eye { display: inline-flex; align-items: center; gap: 5px; font: 800 9.5px var(--font-body), system-ui; letter-spacing: .08em; text-transform: uppercase; color: #B57200; }
.cm-guidehd__id b { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); }
.cm-guidehd__by { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.cm-guidehd__x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 16px; }
.cm-guideacts { display: flex; gap: 8px; padding: 12px 16px 8px; }
.cm-guidebm { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid #F0D99B; background: #FFF7E6; color: #8A5A00; font: 700 13px var(--font-body), system-ui; }
.cm-guidebm.on { background: #B57200; border-color: #B57200; color: #fff; }
.cm-guidefull { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 12.5px var(--font-body), system-ui; }
.cm-poi--guide { cursor: default; }
.cm-poi--guide .cm-poi__addmine { color: #B57200; border-color: #F0D99B; }
.cm-poi__gnote { margin-top: 5px; font-size: 11.5px; line-height: 1.4; color: var(--text-2); font-style: italic; }
.cm-guidespanel { margin: 0 14px 10px; animation: fade .16s ease-out; }
[data-theme="night"] .cm-guidehd__av.official, [data-theme="night"] .cm-guidebm { background: #3a2f14; border-color: #5a4a20; color: #F0D99B; }

/* D-c · subscription — payment method + billing history */
.pay-card { position: relative; border-radius: 18px; padding: 16px 18px 14px; margin-bottom: 4px; color: #fff; overflow: hidden;
  background: linear-gradient(135deg, #2A2F45 0%, #3A2B52 60%, #52325a 100%); box-shadow: var(--shadow-md); }
.pay-card__chip { display: inline-grid; place-items: center; width: 34px; height: 26px; border-radius: 6px; font-size: 15px;
  background: rgba(255,255,255,.16); color: #fff; }
.pay-card__brand { position: absolute; top: 16px; right: 18px; font: 800 15px var(--font-display, var(--font-body)), system-ui; letter-spacing: .06em; opacity: .9; }
.pay-card__num { margin: 16px 0 12px; font: 600 18px/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: .06em; }
.pay-card__row { display: flex; justify-content: space-between; font-size: 12px; opacity: .82; }
.pay-form { display: flex; flex-direction: column; gap: 10px; }
.pay-form__row { display: flex; gap: 10px; }
.pay-form__row .pay-field { flex: 1; }
.pay-field { display: flex; flex-direction: column; gap: 5px; }
.pay-field span { font: 700 10.5px var(--font-body), system-ui; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.pay-field input { height: 44px; border: 1px solid var(--border); border-radius: 12px; padding: 0 13px; font: 500 14px var(--font-body), system-ui;
  color: var(--ink); background: var(--surface); outline: none; }
.pay-field input:focus { border-color: var(--coral-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent); }
.bill-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.bill-row:last-child { border-bottom: none; }
.bill-row__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: var(--ink-2); background: var(--surface-muted); }
.bill-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bill-row__txt b { font-size: 14px; color: var(--ink); }
.bill-row__txt span { font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-row__dl { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 16px; }
.bill-row__dl:hover { color: var(--coral); border-color: var(--coral-soft); }

/* D-f · shared map \u2014 reuses the real map shell + bottom panel, tinted + read-only */
.sharedmap2 { background: color-mix(in srgb, var(--info-blue) 7%, var(--bg)); }
.sharedmap2__top { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 52px 16px 10px; }
.sharedmap2__ro { position: absolute; left: 50%; top: 96px; transform: translateX(-50%); z-index: 25; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; background: var(--info-blue); color: #fff; font: 700 12px var(--font-body), system-ui; box-shadow: var(--shadow-md); }
.sharedmap2__ro i { font-size: 15px; }
.sharedmap2__panel { border-top: 3px solid var(--info-blue); background: color-mix(in srgb, var(--info-blue) 4%, var(--surface)); }
.sharedmap2__owner { display: inline-flex; align-items: center; gap: 6px; color: var(--info-blue) !important; }
.sharedmap2__ownerav { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: #7FB23A; font-size: 11px; }
.cm-ropill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--info-blue) 12%, var(--surface)); color: var(--info-blue); font: 700 11px var(--font-body), system-ui; }
.sharedmap2__savelock { position: relative; color: var(--text-3) !important; }
.sharedmap2__lockdot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 999px; background: #F5C451; color: #4a3403; display: grid; place-items: center; font-size: 7px; }
.sharedmap2__cta { width: 100%; margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; cursor: pointer; border: none;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-md); text-align: left; }
.sharedmap2__ctatxt { flex: 1; display: flex; flex-direction: column; }
.sharedmap2__ctatxt b { font-size: 14px; }
.sharedmap2__ctatxt span { font-size: 11px; opacity: .75; }
.sharedmap2__ctago { flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--coral); color: #fff; font-size: 16px; }
.ymd .sharedmap2__top { display: none; }
.ymd .sharedmap2__ro { top: calc(var(--top-h) + 12px); left: auto; right: var(--edge); transform: none; }
[data-theme="night"] .sharedmap2 { background: color-mix(in srgb, var(--info-blue) 12%, var(--bg)); }

/* M-a · help & feedback \u2014 nicer replay card */
.help-replay { padding: 14px; border-radius: 16px; gap: 13px; border-color: var(--coral-soft);
  background: linear-gradient(135deg, color-mix(in srgb, var(--coral) 12%, var(--surface)), color-mix(in srgb, var(--magic) 8%, var(--surface))); }
.help-replay:hover { border-color: var(--coral); }
.help-replay__ico { width: 44px; height: 44px; border-radius: 999px; font-size: 17px; background: var(--brand-gradient, var(--coral));
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--coral) 70%, transparent); }
.help-replay__txt b { font-size: 14.5px; }

/* M-f · add-by-handle row \u2014 clearer Request CTA */
.addhandle__row { height: 48px; }
.addhandle__row button { height: 36px; padding: 0 14px; background: var(--coral); color: #fff; }
.addhandle__row button:not(:disabled):hover { background: var(--coral-hover, var(--coral)); }
.addhandle__row button:disabled { background: var(--surface-muted); color: var(--text-3); }

/* M-c · room line \u2014 room type leads + guests chip */
.td-roomline { align-items: center; gap: 12px; }
.td-roomline__ic { color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--surface)); }
.td-roomline__guests { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-muted); border: 1px solid var(--border); font: 700 12px var(--font-body), system-ui; color: var(--text-2); }

/* M-h · notification bell badge on sheet header actions */
.sheet__act--badge { position: relative; overflow: visible; }
.sheet__act-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--coral); color: #fff; font: 800 9.5px/16px var(--font-body), system-ui; text-align: center; border: 1.5px solid var(--surface); }

/* M-d · Discover search */
.disc-search { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 8px 0 14px; margin-bottom: 10px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface); }
.disc-search:focus-within { border-color: var(--coral-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent); }
.disc-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: 400 14px var(--font-body), system-ui; color: var(--ink); }
.disc-search__x { flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--grey-150); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 14px; }

/* M-e · Instagram-style stories \u2014 add bubble + unseen rings + viewer */
.soc-story--add .soc-story__ring.add { background: var(--surface-muted); border: 1.5px dashed var(--slate-400); padding: 0; display: grid; place-items: center; }
.soc-story__addbub { width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--coral); color: #fff; font-size: 15px; }
.soc-story__ring.unseen { background: var(--brand-gradient); }
.story { position: absolute; inset: 0; z-index: 90; background: rgba(8,10,16,.92); display: grid; place-items: center; padding: 10px; animation: fade .16s ease-out; }
.story__card { position: relative; width: 100%; max-width: 460px; height: 100%; max-height: 100%; border-radius: 20px; overflow: hidden;
  background: var(--ink); display: flex; flex-direction: column; }
.story__bars { display: flex; gap: 4px; padding: 12px 12px 6px; }
.story__bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.story__bar i { display: block; height: 100%; background: #fff; border-radius: 2px; }
.story__top { display: flex; align-items: center; gap: 9px; padding: 4px 14px 10px; position: relative; z-index: 3; }
.story__av { flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 17px; background: var(--c, #888); border: 2px solid rgba(255,255,255,.6); }
.story__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.story__id b { font-size: 13px; color: #fff; }
.story__id span { font-size: 11px; color: rgba(255,255,255,.6); }
.story__x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 17px; }
.story__body { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; padding: 20px;
  background: radial-gradient(120% 90% at 50% 25%, hsl(var(--hue), 70%, 42%), hsl(var(--hue), 60%, 20%)); }
.story__emoji { font-size: 82px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.story__meta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.story__cat { font: 800 10px var(--font-body), system-ui; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,.16); }
.story__meta b { font-family: var(--font-display, var(--font-body)); font-size: 23px; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.15; }
.story__loc { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,.82); }
.story__cta { position: relative; z-index: 3; margin: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 14px;
  border: none; background: #fff; color: var(--ink); font: 700 13.5px var(--font-body), system-ui; cursor: pointer; }
.story__nav { position: absolute; top: 60px; bottom: 74px; width: 40%; border: none; background: none; cursor: pointer; z-index: 2; }
.story__nav.left { left: 0; }
.story__nav.right { right: 0; }

/* M-b · onboarding passport/language picker \u2014 collapsed */
.oa-selected { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--coral-soft); background: color-mix(in srgb, var(--coral) 5%, var(--surface)); font-family: inherit; text-align: left; }
.oa-selected__flag { font-size: 26px; line-height: 1; }
.oa-selected__name { flex: 1; font: 700 15px var(--font-body), system-ui; color: var(--ink); }
.oa-selected__change { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--font-body), system-ui; color: var(--coral); }
.oa-selchips { display: flex; flex-wrap: wrap; gap: 6px; }
.oa-selchip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--surface)); color: var(--coral-hover, var(--coral)); font: 700 12.5px var(--font-body), system-ui; }
.oa-pickhint { font-size: 12px; color: var(--text-3); padding: 2px 2px 0; }

/* D-d · full emoji picker for the avatar */
.emojipick { border: 1px solid var(--border); border-radius: 15px; overflow: hidden; background: var(--surface); }
.emojipick__tabs { display: flex; gap: 2px; padding: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.emojipick__tabs::-webkit-scrollbar { display: none; }
.emojipick__tab { flex: none; width: 34px; height: 34px; border-radius: 9px; border: none; background: none; cursor: pointer; display: grid; place-items: center; font-size: 17px; color: var(--text-2); }
.emojipick__tab:hover { background: var(--surface); color: var(--ink); }
.emojipick__tab.on { background: var(--me, var(--coral)); color: #fff; }
.emojipick__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 8px; max-height: 216px; overflow-y: auto; scrollbar-width: thin; }
.emojipick__grid .ebtn { border-radius: 10px; font-size: 20px; }

/* ============================================================
   REVIEW ROUND — teammate comments (Kaio)
   ============================================================ */

/* C4 · spot description edit icons now sit INLINE, right after the last words */
.spot-descrow { display: block; }
.spot-descrow .spot-desc { display: inline; }
.spot-descrow__acts { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin-left: 7px; padding-top: 0; }
.spot-iconact { width: 23px; height: 23px; border: none; background: transparent; color: var(--text-3); font-size: 14px; }
.spot-iconact:hover { background: var(--surface-muted); border-color: transparent; color: var(--ink); }
.spot-iconact.on { background: color-mix(in srgb, var(--coral) 12%, var(--surface)); border-color: transparent; color: var(--coral); }
.spot-iconact__n { top: -3px; right: -3px; min-width: 13px; height: 13px; font: 800 8px/13px var(--font-body), system-ui; border-width: 1.5px; }

/* C5 · Creator's Note — breathing room so it never touches the Discussion field */
.spot-quote { margin-bottom: 14px; }

/* C2 · share sheet reworked — status card with a direct privacy toggle, a copyable
   link chip, and a 2-up action grid (cleaner than the old stacked rows) */
.cm-sharestatus { align-items: center; }
.cm-sharestatus__t { flex: 1; min-width: 0; }
.cm-sharetog { flex: none; height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--coral);
  background: var(--coral); color: #fff; font: 700 12px var(--font-body), system-ui; white-space: nowrap; }
.cm-sharetog:hover { filter: brightness(.96); }
.cm-sharetog.on { background: var(--surface); color: var(--ink-2); border-color: var(--border); }
.cm-sharetog.on:hover { border-color: var(--slate-400); color: var(--ink); }
.cm-sharelink { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 6px 6px 6px 12px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--surface-muted); }
.cm-sharelink__url { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px var(--font-body), system-ui; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-sharelink__url i { flex: none; color: var(--coral); }
.cm-sharelink__copy { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--coral); color: #fff; font: 700 12px var(--font-body), system-ui; }
.cm-sharelink__copy.done { background: var(--success); }
.cm-shareacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cm-shareact { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px 10px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 12.5px var(--font-body), system-ui; }
.cm-shareact:hover:not(:disabled) { border-color: var(--coral-soft); background: var(--surface-muted); }
.cm-shareact:disabled { opacity: .45; cursor: default; }
.cm-shareact__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.cm-sharemenu__ref { margin-top: 8px; }
.cm-modal__hd b { white-space: nowrap; }

/* C6 · guide panel now shows the FULL guide inline — back arrow + bookmark in the
   header, an intro line, and an insider-tips block after the spots */
.cm-guidehd { align-items: center; }
.cm-guidehd__back { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 18px; }
.cm-guidehd__back:hover { border-color: var(--slate-400); color: var(--ink); }
.cm-guidebm--icon { flex: none; width: 40px; height: 40px; padding: 0; }
.cm-guideintro { margin: 9px 16px 2px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.cm-guidetips { margin: 8px 0 4px; padding: 12px 13px; border-radius: 14px; border: 1px solid #F0D99B; background: #FFF7E6;
  display: flex; flex-direction: column; gap: 8px; }
.cm-guidetips__lbl { display: inline-flex; align-items: center; gap: 6px; font: 800 10px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: #B57200; }
.cm-guidetip { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.cm-guidetip i { flex: none; color: #B57200; margin-top: 1px; }
[data-theme="night"] .cm-guidetips { background: #3a2f14; border-color: #5a4a20; }
[data-theme="night"] .cm-guidetips__lbl, [data-theme="night"] .cm-guidetip, [data-theme="night"] .cm-guidetip i { color: #F0D99B; }

/* C8/C9 · save-via-chat — intro moved BELOW the code & made readable; channels
   carry a connected / not-connected status and open the real app with the code */
.chat-intro { align-items: flex-start; margin: 12px 0 4px; }
.chat-intro__txt { flex: 1; min-width: 0; }
.chat-intro__txt b { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.chat-intro__txt p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--text-2); }
.chat-intro__txt p b { display: inline; margin: 0; font-weight: 800; color: var(--coral); }
.chat-chan__status { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--text-3); }
.chat-chan__status.on { color: var(--success); }
.chat-chan__open { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: 700 12.5px var(--font-body), system-ui; text-decoration: none; }
.chat-chan__open:hover { border-color: var(--slate-400); color: var(--coral); }
.chat-chan__btn { text-decoration: none; }

/* C10 · add-a-friend by username — clearer label + a hint on where to find it */
.addhandle__hint { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.5; color: var(--text-3); padding: 4px 2px 0; }
.addhandle__hint b { color: var(--text-2); }
.addhandle__hint i { flex: none; color: var(--text-3); margin-top: 1px; }

/* C13 · booking status chip vertically centred in the row (was stuck to the top) */
.td-bkrow > .td-bkstatus { align-self: center; margin-left: 6px; }
/* C12 · the labelled check-in pill is wider now — stop it inheriting the row's
   ellipsis clipping so "Check-in 12 May · 15:00" shows in full (wraps if needed) */
.td-bkrow .td-pill2 { flex: none; overflow: visible; text-overflow: clip; }

/* Kaio review — expense row: label + meta share one line (was stacked) */
.td-exp__txt { display: flex; align-items: baseline; gap: 7px; }
.td-exp__txt b { flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-exp__meta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
/* Kaio review — status badge now lives inline in the title row (mobile); keep it from shrinking */
.td-bkrow__top .td-bkstatus { flex: none; }
/* Kaio review — a second copy of the badge is rendered as a direct row child for the DESKTOP
   centred-right layout; hide it everywhere by default (desktop.css re-shows it under .ymd). */
.td-bkstatus--side { display: none; }

/* Kaio review (Round 12) — trip setup: every connector gap must be EQUAL. They were uneven
   (origin→stop 38 · stop→stop 46 · stop→round-trip 34); normalise all connectors to one
   height so the route reads evenly, now that each connector carries an "Add destination". */
.route .conn.seg-home, .route .conn--rt { min-height: 46px; }

/* C14 · trip-hero countdown / progress — larger, cleaner, more premium */
.td-hero__cd { gap: 5px; padding: 11px 14px; border-radius: 16px; min-width: 116px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--coral) 15%, var(--surface)), color-mix(in srgb, var(--coral) 5%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--coral) 22%, transparent); }
.td-hero__cd-eye { font-size: 9px; }
.td-hero__cd-row { gap: 5px; }
.td-hero__cd-row b { font-size: 25px; }
.td-hero__cd-row span { font-size: 12px; }
.td-hero__cd-track { height: 6px; margin-top: 3px; }
.td-hero__cd-sub { font-size: 10.5px; margin-top: 1px; }

/* C16 · Trips & Maps — distinct section headers so the two are clearly different things */
.tripsw__sechd { display: flex; align-items: center; gap: 11px; margin: 18px 0 10px; }
.tripsw__sechd:first-of-type { margin-top: 8px; }
.tripsw__sechd__ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.tripsw__sechd__ic.trips { color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
.tripsw__sechd__ic.maps { color: var(--magic-deep); background: color-mix(in srgb, var(--magic) 13%, var(--surface)); }
.tripsw__sechd__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tripsw__sechd__tx b { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.tripsw__sechd__tx span { font-size: 11.5px; line-height: 1.35; color: var(--text-2); }

/* C17 · Trip setup entry in the header + read-only "Preview" mode for shared trips */
.td-setup { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: 700 12.5px var(--font-body), system-ui; }
.td-setup i { font-size: 17px; }
.td-setup:hover { border-color: var(--coral-soft); color: var(--coral); }
.td-preview { display: flex; align-items: center; gap: 11px; padding: 11px 13px; margin: 0 0 12px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--info-blue) 34%, var(--border)); background: color-mix(in srgb, var(--info-blue) 8%, var(--surface)); }
.td-preview__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px;
  color: var(--info-blue); background: var(--surface); border: 1px solid var(--border); }
.td-preview__tx { flex: 1; min-width: 0; }
.td-preview__tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.td-preview__tx span { font-size: 11.5px; color: var(--text-2); }
.td-preview__join { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--info-blue); color: #fff; font: 700 12.5px var(--font-body), system-ui; }
.td-preview__join:hover { filter: brightness(.96); }
/* read-only preview hides the edit affordances so it reads as a viewer, not an editor */
[data-readonly="1"] .td-add,
[data-readonly="1"] .td-addplace,
[data-readonly="1"] .td-line__x,
[data-readonly="1"] .td-card__x,
[data-readonly="1"] .td-card__clock,
[data-readonly="1"] .td-card__grab,
[data-readonly="1"] .td-slot__empty,
[data-readonly="1"] .td-slot__more,
[data-readonly="1"] .td-votemini,
[data-readonly="1"] .td-baltog,
[data-readonly="1"] .td-place__tagbtn,
[data-readonly="1"] .td-place__assign,
[data-readonly="1"] .td-daycell--new,
[data-readonly="1"] .td-cmt__add,
[data-readonly="1"] .td-dayhd__more { display: none !important; }
[data-readonly="1"] .td-notes { pointer-events: none; opacity: .65; }
[data-readonly="1"] .td-people { pointer-events: none; }

/* ============================================================
   REVIEW ROUND 2 — teammate comments (Kaio)
   ============================================================ */

/* N1+N2 · city-map guide panel now reads like a created guide (creator · voice · vibe) */
.cm-list--guide { padding-top: 10px; }
.cm-guideintro { margin: 2px 2px 4px; }
.cm-guidecreator { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 13px;
  border: 1px solid var(--border); background: var(--surface-muted); }
.cm-guidecreator__av { flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; font-size: 20px; background: var(--c, #E4572E); }
.cm-guidecreator__av.official { background: #FFF7E6; border: 1px solid #F0D99B; }
.cm-guidecreator__av img { width: 24px; height: 24px; }
.cm-guidecreator__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-guidecreator__id b { font-size: 13.5px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; }
.cm-guidecreator__id span { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-guidefollow { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--coral); background: var(--coral); color: #fff; font: 700 12px var(--font-body), system-ui; }
.cm-guidefollow.on { background: var(--surface); color: var(--ink-2); border-color: var(--border); }
.cm-guideaudio { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 13px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--coral-soft); background: linear-gradient(120deg, color-mix(in srgb, var(--coral) 8%, var(--surface)), var(--surface)); }
.cm-guideaudio__btn { flex: none; width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 17px; color: #fff; background: var(--coral); }
.cm-guideaudio__wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 26px; overflow: hidden; }
.cm-guideaudio__wave i { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--coral) 40%, var(--surface)); }
.cm-guideaudio.on .cm-guideaudio__wave i { background: var(--coral); }
.cm-guideaudio__t { flex: none; font: 700 11px var(--font-body), system-ui; color: var(--coral-hover); }
.cm-guideaudio__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cm-guidesec { font: 800 10px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 4px 2px 0; }
.cm-guidevibe { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-guidevibe__chip { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; font: 600 12px var(--font-body), system-ui;
  color: var(--ink-2); background: var(--surface-muted); border: 1px solid var(--border); }
.cm-guidesaveall { flex: none; margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 56px; border-radius: 16px;
  border: none; cursor: pointer; background: var(--coral); color: #fff; font: 800 15.5px var(--font-body), system-ui;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--coral) 55%, transparent); }
.cm-guidesaveall i { font-size: 20px; }
.cm-guidesaveall:hover { background: var(--coral-hover, var(--coral)); }

/* N3 · note placing mode — tap the map first, then name it */
.citymap__map.placing { cursor: crosshair; }
.citymap__map.placing::after { content: ""; position: absolute; inset: 0; background: rgba(15,22,32,.05); pointer-events: none; }
.cm-noteplacing { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 44;
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 9px 9px 15px; border-radius: 999px;
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); font: 600 13px var(--font-body), system-ui; white-space: nowrap; }
.cm-noteplacing__t { display: inline-flex; align-items: center; gap: 7px; }
.cm-noteplacing__t i { color: var(--coral); font-size: 17px; }
.cm-noteplacing__x { flex: none; border: none; cursor: pointer; height: 30px; padding: 0 13px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; font: 700 12px var(--font-body), system-ui; }
.cm-noteplacing__x:hover { background: rgba(255,255,255,.26); }

/* N4 · visa info button + popover */
.cv-info__cell--visa { position: relative; }
.cv-visa-info { flex: none; width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-3); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.cv-visa-info:hover { color: var(--coral); border-color: var(--coral-soft); }
.cv-visa-pop__scrim { position: fixed; inset: 0; z-index: 30; }
.cv-visa-pop { position: absolute; z-index: 31; right: 0; top: calc(100% + 8px); width: 250px; display: flex; gap: 8px; padding: 12px 13px;
  border-radius: 13px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: fade .14s ease-out; }
.cv-visa-pop span { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.cv-visa-link { border: none; background: none; padding: 0; cursor: pointer; font: 700 12px var(--font-body), system-ui; color: var(--coral); text-decoration: underline; }

/* N5 · explore-mode origin picker (city card) */
.cv-originpick__scrim { position: absolute; inset: 0; z-index: 40; background: rgba(15,22,32,.34); animation: fade .14s ease-out; }
.cv-originpick { position: absolute; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(340px, calc(100% - 36px));
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 12px; animation: rise .2s var(--ease-out); }
.cv-originpick__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cv-originpick__hd b { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.cv-originpick__hd button { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--surface-muted); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.cv-originpick__sub { margin: 0 2px 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.cv-originpick__opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; background: none; font-family: inherit; text-align: left; }
.cv-originpick__opt:hover { background: var(--surface-muted); }
.cv-originpick__opt.on { border-color: var(--coral-soft); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.cv-originpick__flag { font-size: 20px; flex: none; }
.cv-originpick__city { flex: 1; min-width: 0; font: 700 13.5px var(--font-body), system-ui; color: var(--ink); }
.cv-originpick__est { font: 600 12px var(--font-body), system-ui; color: var(--text-2); }

/* N6 · Trip setup — the entry where a trip begins: wider, prominent, coral */
.td-setup { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: none; background: var(--coral); color: #fff; font: 700 13.5px var(--font-body), system-ui; box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--coral) 75%, transparent); }
.td-setup i { font-size: 18px; }
.td-setup:hover { background: var(--coral-hover, var(--coral)); }

/* N7/N10 · save-via-chat — steps as rows, pending status */
.chat-steps { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.chat-step { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface-muted); }
.chat-step__n { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; font: 800 13px var(--font-display, var(--font-body)); color: #fff; background: var(--coral); }
.chat-step p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.chat-chan__status.pending { color: var(--coral-hover, var(--coral)); }
.chat-chan__status.pending i { animation: spin 1.1s linear infinite; }

/* N12 · booking-row × and vote thumbs centred top-to-bottom (matches the status chip) */
.td-bkrow > .td-line__x, .td-bkrow > .td-votemini { align-self: center; }

/* ============================================================
   REVIEW ROUND 3 — teammate comments (Kaio)
   ============================================================ */

/* M2 · Trips section header a distinct colour from the coral Explore hero */
.tripsw__sechd__ic.trips { color: var(--info-blue); background: color-mix(in srgb, var(--info-blue) 12%, var(--surface)); }

/* M3 · attach-source menu on the paste field */
.paste-wrap { position: relative; }
.paste-attach__scrim { position: fixed; inset: 0; z-index: 60; }
.paste-attachmenu { position: absolute; z-index: 61; left: 6px; top: calc(100% + 8px); width: 264px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); animation: fade .14s ease-out; }
.paste-attachmenu__opt { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 12px; cursor: pointer; border: none; background: none; text-align: left; font-family: inherit; }
.paste-attachmenu__opt:hover { background: var(--surface-muted); }
.paste-attachmenu__ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.paste-attachmenu__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.paste-attachmenu__tx b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.paste-attachmenu__tx span { font-size: 11.5px; color: var(--text-2); }
.paste-attachmenu__drop { margin: 6px 4px 2px; padding: 10px; border-radius: 11px; border: 1.5px dashed var(--border); text-align: center; font-size: 12px; color: var(--text-3); display: flex; align-items: center; justify-content: center; gap: 6px; }
.paste-attachmenu__prem { display: flex; align-items: center; gap: 5px; padding: 6px 6px 2px; font-size: 10.5px; color: var(--magic-deep); }

/* M5 · shared-map read-only POI overview */
.sharedmap2__spot { position: absolute; z-index: 42; right: 14px; top: 14px; bottom: 14px; width: 360px; max-width: calc(100% - 28px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; animation: rise .2s var(--ease-out); }
.sharedmap2__spotphoto { position: relative; height: 150px; flex: none; background: repeating-linear-gradient(135deg, var(--surface-muted), var(--surface-muted) 10px, var(--grey-150) 10px, var(--grey-150) 20px); display: grid; place-items: center; }
.sharedmap2__spotem { font-size: 56px; }
.sharedmap2__spotx { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.9); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.sharedmap2__spotbody { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sharedmap2__spotname { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sharedmap2__spotcost { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.sharedmap2__spotcost b { color: var(--ink); }
.sharedmap2__spotdesc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.sharedmap2__spotnote { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); }

/* M4 · shared-map add-to menu */
.sharedmap2__addmenu { top: auto; bottom: 20px; }
.sharedmap2__addopt { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); margin-bottom: 7px; text-align: left; font-family: inherit; }
.sharedmap2__addopt:hover { border-color: var(--coral-soft); background: var(--surface-muted); }
.sharedmap2__addopt__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 20px; background: var(--surface-muted); }
.sharedmap2__addopt__tx { flex: 1; min-width: 0; }
.sharedmap2__addopt__tx b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.sharedmap2__addopt__tx span { font-size: 11.5px; color: var(--text-2); }
.sharedmap2__addnote { display: flex; align-items: center; gap: 6px; margin: 4px 2px 0; font-size: 11.5px; color: var(--text-3); }

/* M6 · Your-story composer */
.stc-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.stc-media { width: 100%; aspect-ratio: 4 / 5; max-height: 300px; border-radius: 18px; cursor: pointer; border: 1.5px dashed var(--coral-soft); background: #FFF6F6; display: grid; place-items: center; font-family: inherit; overflow: hidden; padding: 0; }
[data-theme="night"] .stc-media { background: rgba(255,90,95,.08); }
.stc-media__empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--coral); }
.stc-media__empty i { font-size: 30px; }
.stc-media__empty b { font-size: 14.5px; color: var(--ink); }
.stc-media__empty span { font-size: 12px; color: var(--text-2); }
.stc-media.on { border-style: solid; border-color: var(--coral); }
.stc-media__img { position: relative; width: 100%; height: 100%; display: grid; place-items: end center; padding-bottom: 14px; background: linear-gradient(160deg, hsl(20 70% 60%), hsl(340 60% 45%)); }
.stc-media__badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font: 700 11.5px var(--font-body), system-ui; }
.stc-spots { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.stc-spot { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); text-align: left; font-family: inherit; }
.stc-spot.on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.stc-spot__em { flex: none; font-size: 22px; }
.stc-spot__tx { flex: 1; min-width: 0; }
.stc-spot__tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.stc-spot__tx span { font-size: 11.5px; color: var(--text-2); }
.stc-spot__pick { flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-muted); color: var(--text-3); }
.stc-done { text-align: center; padding: 20px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stc-done__ic { font-size: 44px; color: var(--success); }
.stc-done b { font-family: var(--font-display); font-size: 19px; }
.stc-done p { margin: 0 0 8px; font-size: 13px; color: var(--text-2); }

/* M7 · StoryViewer — media fills, white POI card at the bottom */
.story__body { padding: 0 !important; justify-content: stretch !important; align-items: stretch !important; }
.story__media { position: absolute; inset: 0; display: grid; place-items: center; }
.story__emoji { filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)); }
.story__poi { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); }
.story__poi__em { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: var(--surface-muted); }
.story__poi__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.story__poi__cat { font: 800 9px var(--font-body), system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); }
.story__poi__tx b { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.15; }
.story__poi__loc { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2); }
.story__poi__save { flex: none; width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; display: grid; place-items: center; font-size: 19px; background: var(--coral); color: #fff; }

/* M9 · guide editor — voice block + comments preview */
.ge-voice { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 13px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--coral-soft); background: linear-gradient(120deg, color-mix(in srgb, var(--coral) 8%, var(--surface)), var(--surface)); }
.ge-voice__btn { flex: none; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 18px; color: #fff; background: var(--coral); }
.ge-voice__tx { flex: 1; min-width: 0; text-align: left; }
.ge-voice__tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ge-voice__tx span { font-size: 11.5px; color: var(--text-2); }
.ge-comments { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-muted); }
.ge-comments__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--info-blue); background: var(--surface); border: 1px solid var(--border); }
.ge-comments__tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ge-comments__tx span { font-size: 11.5px; color: var(--text-2); }
.ge-shownote { display: flex; align-items: flex-start; gap: 7px; margin: 10px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.ge-shownote i { flex: none; color: var(--coral); margin-top: 1px; }

/* M10 · guide panel polish — cleaner spacing */
.cm-list--guide { gap: 11px; padding-top: 12px; }
.cm-guideintro { margin: 0 2px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.cm-guidecreator { padding: 9px 11px; }
.cm-guidesec { padding: 6px 2px 0; }
.cm-guidevibe { margin-bottom: 2px; }

/* M11 · drop-a-note modal — just a titled text field, no blurb */
.cm-droppin__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cm-droppin__x { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--surface-muted); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }

/* M12 · city-card origin picker scrolls when the list is long */
.cv-originpick { max-height: 80%; overflow-y: auto; }

/* ============================================================
   REVIEW ROUND 4 — teammate comments (Kaio)
   ============================================================ */

/* R1 · guide intro — align with the spot list below (was flush-left & cramped) */
.cm-guideintro { margin: 6px 14px 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

/* R2 · guide editor — comments are a real on/off setting (on by default), and
   the "appears 1:1 in the city" note is proper prose, not fragmented flex items */
.ge-comments { width: 100%; cursor: pointer; text-align: left; font-family: inherit; transition: border-color .15s, background .15s; }
.ge-comments.on { border-color: var(--coral-soft); background: color-mix(in srgb, var(--coral) 5%, var(--surface)); }
.ge-comments.on .ge-comments__ic { color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); border-color: var(--coral-soft); }
.ge-comments__tx { flex: 1; min-width: 0; }
.ge-toggle { flex: none; width: 42px; height: 25px; border-radius: 999px; background: var(--grey-300); position: relative; transition: background .18s; }
.ge-toggle i { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s; }
.ge-toggle.on { background: var(--coral); }
.ge-toggle.on i { transform: translateX(17px); }
.ge-shownote { margin: 10px 0 0; padding: 11px 12px; border-radius: 13px; border: 1px dashed var(--border); background: var(--surface-muted); display: flex; align-items: flex-start; gap: 10px; }
.ge-shownote__ic { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: var(--coral); background: var(--surface); border: 1px solid var(--border); }
.ge-shownote__tx { flex: 1; min-width: 0; font-size: 12px; line-height: 1.55; color: var(--text-2); }
.ge-shownote__tx b { color: var(--ink); font-weight: 700; }

/* Kaio review — StoryViewer POI card gets its own clean layout (was reusing the cramped
   city-map row, where the title ellipsised awkwardly next to the emoji). */
.story__poicard { position: absolute; left: 14px; right: 14px; bottom: 16px; z-index: 3;
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 18px;
  background: var(--surface); box-shadow: 0 18px 40px -14px rgba(0,0,0,.6); }
.story__poicard__em { flex: none; width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  font-size: 28px; line-height: 1; background: var(--surface-muted); border: 1px solid var(--border); }
.story__poicard__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.story__poicard__tx b { font: 700 15.5px/1.25 var(--font-display, var(--font-body)); color: var(--ink); text-wrap: pretty; }
.story__poicard__sub { font-size: 12px; font-weight: 600; color: var(--text-2); }
.story__poicard__pin { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.story__acts { position: relative; z-index: 3; display: flex; gap: 8px; padding: 12px 14px 14px; }
.story__save, .story__seemap { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 14px; cursor: pointer; border: none; font: 700 13.5px var(--font-body), system-ui; }
.story__save { background: #fff; color: var(--ink); }
.story__save:hover { filter: brightness(.95); }
.story__save.on { background: color-mix(in srgb, var(--success) 90%, #fff); color: #fff; }
.story__seemap { background: rgba(255,255,255,.15); color: #fff; }
.story__seemap:hover { background: rgba(255,255,255,.26); }

/* R4 · story composer — search a place (or paste a link) + a one-line note */
.stc-search { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 8px 0 13px; margin-bottom: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.stc-search.link { border-color: var(--coral-soft); background: color-mix(in srgb, var(--coral) 5%, var(--surface)); }
.stc-search:focus-within { border-color: var(--coral-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent); }
.stc-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: 400 14px var(--font-body), system-ui; color: var(--ink); }
.stc-search__x { flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--grey-150); color: var(--ink-2); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.stc-spots__lbl { display: block; font: 700 10px var(--font-body), system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 2px 2px 8px; }
/* Kaio review — collapse Recent places to 3, reveal the rest */
.stc-showmore { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px;
  padding: 8px 13px; border-radius: 11px; border: 1px dashed var(--border); background: var(--surface);
  font: 700 12px var(--font-body), system-ui; color: var(--coral); cursor: pointer; }
.stc-showmore:active { background: var(--surface-muted); }
.stc-linkrow { width: 100%; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 14px; cursor: pointer; text-align: left; font-family: inherit; border: 1.5px solid var(--coral-soft); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.stc-linkrow__ic { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; color: #fff; background: var(--coral); }
.stc-linkrow__tx { flex: 1; min-width: 0; }
.stc-linkrow__tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.stc-linkrow__tx span { font-size: 11.5px; color: var(--text-2); }
.stc-noresult { display: flex; align-items: center; gap: 8px; padding: 14px 12px; border-radius: 13px; border: 1px dashed var(--border); background: var(--surface-muted); font-size: 12.5px; color: var(--text-2); }
.stc-noresult i { color: var(--text-3); font-size: 17px; flex: none; }
.stc-picked { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; border: 1.5px solid var(--coral); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); margin-bottom: 4px; }
.stc-picked__em { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 21px; background: var(--surface); }
.stc-picked__tx { flex: 1; min-width: 0; }
.stc-picked__tx b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.stc-picked__tx span { font-size: 11.5px; color: var(--text-2); }
.stc-picked__change { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: 700 12px var(--font-body), system-ui; }
.stc-picked__change:hover { border-color: var(--slate-400); color: var(--ink); }
.stc-descwrap { position: relative; margin-bottom: 12px; }
.stc-desc { width: 100%; min-height: 64px; resize: none; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); padding: 12px 13px 22px; font: 400 14px/1.5 var(--font-body), system-ui; color: var(--ink); outline: none; box-sizing: border-box; }
.stc-desc:focus { border-color: var(--coral-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 12%, transparent); }
.stc-desc__count { position: absolute; right: 12px; bottom: 9px; font: 600 10.5px var(--font-body), system-ui; color: var(--text-3); pointer-events: none; }

/* R5 · maps get their own detail view — preview, pins-by-city, cities, a map menu */
.mapdet-preview { position: relative; height: 150px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 13px; }
.mapdet-dot { position: absolute; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 18px; background: var(--surface); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.mapdet-preview__tag { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 8px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); font: 700 12.5px var(--font-body), system-ui; color: var(--ink); }
[data-theme="night"] .mapdet-preview__tag { background: rgba(20,26,34,.9); }
.mapdet-preview__em { font-size: 16px; }
.mapdet-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; }
.mapdet-meta > span { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--font-body), system-ui; color: var(--text-2); }
.mapdet-meta i { color: var(--text-3); }
.mapdet-vis i { color: var(--coral); }
.mapdet-collab { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 12px; border-radius: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-muted); font-family: inherit; text-align: left; }
.mapdet-collab:hover { border-color: var(--coral-soft); }
.mapdet-collab__avs { display: inline-flex; flex: none; }
.mapdet-collab__tx { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.mapdet-collab__manage { flex: none; font: 700 12px var(--font-body), system-ui; color: var(--coral); }
/* Kaio review — "Open on the map" primary; Edit/Share demoted to secondary so there's one clear primary */
.mapdet-openmap { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; margin-bottom: 8px; border-radius: 13px; cursor: pointer; border: none; background: var(--coral); color: #fff; font: 800 14px var(--font-body), system-ui; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--coral) 55%, transparent); }
.mapdet-openmap i { font-size: 18px; }
.mapdet-openmap:hover { background: var(--coral-hover, var(--coral)); }
.mapdet-acts { display: flex; gap: 8px; margin-bottom: 4px; }
.mapdet-acts__edit, .mapdet-acts__share { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border-radius: 13px; cursor: pointer; font: 700 13.5px var(--font-body), system-ui; }
.mapdet-acts__edit { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.mapdet-acts__edit:hover { border-color: var(--slate-400); }
.mapdet-acts__share { flex: 1; border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.mapdet-acts__share:hover { border-color: var(--slate-400); }
.mapdet-cities { display: flex; flex-wrap: wrap; gap: 7px; }
.mapdet-city { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font: 700 12.5px var(--font-body), system-ui; color: var(--ink); }
.mapdet-city__flag { font-size: 15px; }
.mapdet-city em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-muted); color: var(--text-2); font: 700 10.5px/18px var(--font-body), system-ui; text-align: center; }
.mapdet-pins { display: flex; flex-direction: column; gap: 9px; }
.mapdet-poi { cursor: default; }
.mapdet-poi:active { transform: none; background: var(--surface); }
.mapdet-menu__scrim { position: fixed; inset: 0; z-index: 60; }
.mapdet-menu { position: absolute; z-index: 61; right: 14px; top: 52px; width: 232px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: fade .14s ease-out; }
.mapdet-menu button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border: none; background: none; border-radius: 10px; cursor: pointer; font: 600 13.5px var(--font-body), system-ui; color: var(--ink); text-align: left; }
.mapdet-menu button:hover { background: var(--surface-muted); }
.mapdet-menu button i { font-size: 17px; color: var(--text-2); }
.mapdet-toast { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 62; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 13px var(--font-body), system-ui; box-shadow: var(--shadow-lg); }

/* ============================================================
   REVIEW ROUND 5 — teammate comments (Kaio)
   ============================================================ */

/* R6 · drop-a-note field — one row that grows with the text; text vertically centred */
.cm-droppin__in { min-height: 48px; height: 48px; max-height: 132px; padding: 13px 14px; line-height: 1.4; overflow-y: auto; box-sizing: border-box; }

/* R7 · guide "add all" button — label kept as one run so it doesn't space out */
.cm-guidesaveall span { display: inline; }

/* R8 · guide editor — starter-layout picker (opens with a full worked example) */
.ge-templates { margin: 2px 0 4px; }
.ge-templates__lbl { display: block; font: 700 10px var(--font-body), system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 2px 8px; }
.ge-templates__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ge-templates__row::-webkit-scrollbar { display: none; }
.ge-tpl { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; padding: 9px 13px 9px 9px; border-radius: 13px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); font-family: inherit; text-align: left; }
.ge-tpl:hover { border-color: var(--coral-soft); }
.ge-tpl.on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 6%, var(--surface)); }
.ge-tpl__em { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; background: var(--surface-muted); }
.ge-tpl__tx { display: flex; flex-direction: column; min-width: 0; }
.ge-tpl__tx b { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ge-tpl__tx span { font-size: 11px; color: var(--text-2); white-space: nowrap; }

/* R9 · mobile trip header was cramped — members move to their own row below
   (desktop .ymd has room and is untouched) */
.ym:not(.ymd) .td-head { flex-wrap: wrap; }
.ym:not(.ymd) .td-head .sheet__back { order: 0; }
.ym:not(.ymd) .td-head .td-switch { order: 1; }
.ym:not(.ymd) .td-head .td-setup { order: 2; }
.ym:not(.ymd) .td-head .sheet__x { order: 3; }
.ym:not(.ymd) .td-head .td-people {
  order: 4; flex-basis: 100%; justify-content: flex-start;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border);
}
.ym:not(.ymd) .td-head .td-people::before {
  content: "Shared with"; align-self: center; margin-right: 9px;
  font: 800 9.5px var(--font-body), system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}

/* R10 · guide viewer renders a fully-arranged example (headings · photos · notes ·
   tips · halves side by side) — "how a published guide looks", shown right here */
.cm-gv { display: flex; flex-wrap: wrap; gap: 10px; }
.cm-gv > * { flex: 1 1 100%; min-width: 0; }
.cm-gv .cm-gv--full { flex-basis: 100%; }
.cm-gv .cm-gv--half { flex: 1 1 calc(50% - 5px); }
.cm-gv__head { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 4px 0 -2px; }
.cm-gv__text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.cm-gv__photo { border-radius: 14px; min-height: 104px; display: grid; place-items: center; color: rgba(255,255,255,.92); font-size: 26px;
  background: linear-gradient(150deg, hsl(var(--hue, 20), 68%, 60%), hsl(calc(var(--hue, 20) + 28), 58%, 44%)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.cm-gv__photo.cm-gv--half { min-height: 96px; }
.cm-gv__tip { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 13px; border: 1px solid #F0D99B; background: #FFF7E6;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.cm-gv__tip i { color: #B57200; flex: none; margin-top: 1px; }
[data-theme="night"] .cm-gv__tip { background: #3a2f14; border-color: #5a4a20; color: #F0D99B; }
[data-theme="night"] .cm-gv__tip i { color: #F0D99B; }

/* ============================================================
   REVIEW ROUND 6 — teammate comments (Kaio)
   ============================================================ */

/* M1 · story composer — creator chooses what friends can open (map · guide · none) */
.stc-link { display: flex; gap: 7px; margin-bottom: 8px; }
.stc-link__opt { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: 700 12.5px var(--font-body), system-ui; }
.stc-link__opt i { font-size: 16px; }
.stc-link__opt:hover { border-color: var(--coral-soft); }
.stc-link__opt.on { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 7%, var(--surface)); color: var(--coral); }
.stc-link__hint { margin: 0 2px 14px; font-size: 11.5px; line-height: 1.45; color: var(--text-3); }

/* M4 · stay rooms — labelled row: type leads, rooms + guests as compact stats */
.td-roomcard { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.td-roomcard__ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; color: var(--coral); background: color-mix(in srgb, var(--coral) 9%, var(--surface)); }
.td-roomcard__type { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.td-roomcard__lbl { font: 800 9px var(--font-body), system-ui; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.td-roomcard__type b { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.td-roomcard__stat { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 46px; padding-left: 12px; border-left: 1px solid var(--border); }
.td-roomcard__stat b { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.td-roomcard__stat span { font-size: 10.5px; color: var(--text-2); }

/* M5 · shared trips inline in the trips list — "Shared" tag distinct from the owner crown */
.triprow2__tag.shared, .triprow2__tag.shared i { color: var(--info-blue); }
.td-role { white-space: nowrap; }
.triprow2__invtxt { align-items: flex-start; }
.triprow2__invtxt > span { min-width: 0; }
.triprow2__invtxt i { margin-top: 1px; }

/* M3 · trip destinations — drag to reorder + quick-add popular stops */
.leg__grip { flex: none; display: inline-grid; place-items: center; width: 22px; height: 32px; color: var(--text-3); cursor: grab; font-size: 16px; }
.leg__grip:active { cursor: grabbing; }
.leg--drag { cursor: grab; }
.leg.dragging { opacity: .45; }
.leg.dragover { box-shadow: 0 -2px 0 0 var(--coral); }
.trip-suggest { margin-top: 14px; }
.trip-suggest__lbl { display: flex; align-items: center; gap: 6px; font: 700 11px var(--font-body), system-ui; color: var(--text-3); margin: 0 2px 8px; }
.trip-suggest__lbl i { color: var(--coral); }
.trip-suggest__row { display: flex; flex-wrap: wrap; gap: 7px; }
.trip-suggest__chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px 0 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font: 700 12.5px var(--font-body), system-ui; color: var(--ink); }
.trip-suggest__chip:hover { border-color: var(--coral); color: var(--coral); }
.trip-suggest__chip i { color: var(--coral); }
.trip-suggest__fl { font-size: 15px; }

/* ═══════════ R6-W3 · CityMap surface (list data, photos, markers) ═══════════ */

/* ---- L3/P1 · the real photo inside the designed .cm-shot frame ----
   The frame (striped placeholder + emoji badge) is unchanged and still shows
   whenever there is no photo; when there IS one it fills the frame edge to edge. */
.cm-shot__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spot-photo__img .cm-shot__img { border-radius: 0; }

/* ---- L7 · the name label under a map marker ----
   The legacy map labelled every pin; the R3 port dropped it and left bare emoji,
   which are not identifiable on a busy map. Subtle by design (the pin is the
   figure, the label the caption): small, tight, with a white halo so it survives
   both a pale street and a dark park underneath. Notes render their own text
   (.citymap__notelbl) and friend pins their owner tag — neither gets this. */
.cm-spot__lbl { position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%);
  max-width: 104px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  font: 700 9.5px/1.25 var(--font-body), system-ui; letter-spacing: .01em; color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(255,255,255,.9); }
[data-theme="night"] .cm-spot__lbl { color: #F2F5F8;
  text-shadow: 0 0 3px rgba(12,18,28,.95), 0 0 3px rgba(12,18,28,.95), 0 1px 2px rgba(12,18,28,.9); }
/* an explore pin is smaller — keep its label clear of the pin body */
.cm-spot--explore .cm-spot__lbl { top: calc(100% + 2px); color: #7A4E00; }
[data-theme="night"] .cm-spot--explore .cm-spot__lbl { color: #F7C86B; }

/* ---- L5 · the curated (must-see) section in the list ----
   Same shape as the friend segment (.cm-friendseg), amber/curated accent instead
   of the friend blue, so a curated place never reads as one of your own pins. */
.cm-curatedseg { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cm-curatedseg__hd { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.cm-curatedseg__ic { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font-size: 14px; color: #7A4E00; background: #FFF1D6; border: 1px solid #F5A524; }
.cm-curatedseg__hd b { font-size: 12.5px; color: var(--ink); }
.cm-curatedseg__hd span { font-size: 10.5px; color: var(--text-3); }
.cm-poi--curated { border-left: 3px solid #F5A524; }

/* ---- L6 · the notes section in the list ----
   Kaio: "those notes we place, they don't show up in the overview and that's
   really sad … it could have a note section with the notes listed below with the
   text. There's no picture, it's just the text." So: text only — no thumb, no
   category (catOf() would mis-bucket a note as "Activity"), no price, no tags. */
.cm-noteseg { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cm-noteseg__hd { display: flex; align-items: center; gap: 8px; padding: 0 2px; }
.cm-noteseg__ic { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  font-size: 14px; color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface));
  border: 1px solid var(--coral-soft); }
.cm-noteseg__hd b { font-size: 12.5px; color: var(--ink); }
.cm-noteseg__hd span { font-size: 10.5px; color: var(--text-3); }
.cm-noterow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--border); border-left: 3px solid var(--coral); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-sm); }
.cm-noterow:active { transform: scale(.995); background: var(--surface-muted); }
.cm-noterow__ic { flex: none; font-size: 15px; color: var(--coral); margin-top: 1px; }
.cm-noterow__t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- P2 · the discussion badge ----
   Kaio: "just show zero. The red circle is only a notice that someone wrote
   something I haven't read yet." 0 → no badge at all (the JSX drops it); >0 all
   seen → a neutral count chip; >0 with unread → the coral badge. */
.spot-disc__n.seen { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); font-weight: 700; }

/* ---- Mo3 · the draggable place-detail sheet ----
   The sheet is draggable now (snaps .62 / .82 / .95). The handle floats over the
   photo header so the photo keeps its full bleed. */
.spot-sheet__grab { position: absolute; left: 0; right: 0; top: 0; height: 24px; z-index: 5;
  display: grid; place-items: center; cursor: grab; touch-action: none; }
.spot-sheet__grab i { width: 40px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.85);
  box-shadow: 0 1px 3px rgba(15,22,32,.35); }

/* ============================================================================
   R1-maps (0716) · Place importer (Mapstr JSON / Google Takeout KML) — §5 P1.4.
   The /app shell loads NEITHER styles/app.css NOR styles/import-places.css, so
   import-places.js openImportDialog() would render unstyled here. Ported the
   MINIMAL set the dialog actually uses: the design-system primitives it reuses
   (.ym-btn, .ym-icon-btn, .ym-eyebrow, .ym-title, .ym-sub, .ym-press) + all the
   .ym-import-* rules, remapped from the legacy design tokens to the /app shell
   tokens (--coral / --coral-hover for accent, --shadow-lg for --shadow-xl,
   --dur-fast/--dur-base for --dur-1/2/3, --ease-pop for --ease-spring, 999px for
   --radius-full, color-mix soft coral for --accent-soft). App-owned; NOT scanned
   by the token ratchet (styles/ only). Source: styles/import-places.css +
   styles/{design-system,app}.css. Keep in sync with the legacy CSS if it changes.
   ============================================================================ */

/* — design-system primitives the dialog reuses (only the states it hits) — */
.ym-eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.ym-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.15; margin: 0;
}
.ym-sub { font-size: 0.85rem; color: var(--text-2); line-height: 1.45; margin: 0; }

.ym-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ym-icon-btn:hover { border-color: var(--coral); box-shadow: var(--shadow-md); }
.ym-icon-btn i { font-size: 1.15rem; }

.ym-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.84rem;
  line-height: 1; border-radius: 999px; border: 1px solid transparent;
  padding: 10px 16px; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ym-btn i { font-size: 1.05em; }
.ym-btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-sm); }
.ym-btn--primary:hover { background: var(--coral-hover); box-shadow: var(--shadow-md); }
.ym-btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.ym-btn--ghost:hover { border-color: var(--coral); color: var(--coral-hover); }
.ym-btn--block { width: 100%; }
.ym-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.ym-press { transition: transform var(--dur-fast) var(--ease-out); }
.ym-press:active { transform: scale(0.97); }

/* — overlay / card — */
.ym-import-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.ym-import-overlay.is-in { opacity: 1; }

.ym-import-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

.ym-import-card {
  position: relative; z-index: 1;
  width: min(440px, calc(100vw - 40px));
  max-height: min(86vh, 640px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px 22px;
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform var(--dur-base) var(--ease-pop);
}
.ym-import-overlay.is-in .ym-import-card { transform: none; }

.ym-import-close { position: absolute; top: 14px; right: 14px; }
.ym-import-close:disabled { opacity: 0.4; cursor: default; }

.ym-import-hero {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 12%, var(--surface));
  color: var(--coral-hover);
  font-size: 1.55rem;
}

.ym-import-eyebrow { margin-bottom: 6px; }
.ym-import-title { margin: 0 0 4px; }

.ym-import-body {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 8px;
  overflow-y: auto;
  min-height: 0;
}
.ym-import-sub { margin: 0; }

/* — file pick / drop zone — */
.ym-import-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ym-import-drop:hover,
.ym-import-drop:focus-visible,
.ym-import-drop.is-over {
  border-color: var(--coral);
  background: color-mix(in srgb, var(--coral) 12%, var(--surface));
  outline: none;
}
.ym-import-drop i { font-size: 1.5rem; color: var(--coral-hover); }
.ym-import-drop strong { font-size: 0.9rem; color: var(--text); }
.ym-import-drop span { font-size: 0.76rem; color: var(--text-3); }

.ym-import-hints {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
}
.ym-import-hints li {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.76rem; color: var(--text-3); line-height: 1.35;
}
.ym-import-hints i { flex: none; font-size: 0.9rem; color: var(--text-3); }
.ym-import-hints em { font-style: normal; font-weight: 700; color: var(--text-2); }

.ym-import-error {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  color: var(--danger);
  font-size: 0.8rem; line-height: 1.4; text-align: left;
}
.ym-import-error i { flex: none; margin-top: 1px; }

/* — preview / summary city list — */
.ym-import-cities {
  display: flex; flex-direction: column;
  max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.ym-import-cities:empty { display: none; }
.ym-import-city-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}
.ym-import-city-row:last-child { border-bottom: none; }
.ym-import-city-name {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 0; color: var(--text); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ym-import-city-name i { flex: none; color: var(--coral-hover); font-size: 0.95rem; }
.ym-import-city-count {
  flex: none; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--coral-hover);
}
.ym-import-city-row--skipped .ym-import-city-name,
.ym-import-city-row--skipped .ym-import-city-name i,
.ym-import-city-row--skipped .ym-import-city-count { color: var(--text-3); font-weight: 600; }

.ym-import-note {
  margin: 0; font-size: 0.74rem; color: var(--text-3); line-height: 1.4; text-align: left;
}

.ym-import-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;
}
.ym-import-actions .ym-btn { flex: 1 1 auto; justify-content: center; }

/* — progress — */
.ym-import-progress {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 0 4px;
}
.ym-import-spin { font-size: 1.4rem; color: var(--coral-hover); animation: ym-import-rotate 0.9s linear infinite; }
@keyframes ym-import-rotate { to { transform: rotate(360deg); } }
.ym-import-progress-label { margin: 0; font-size: 0.88rem; color: var(--text); }
.ym-import-progress-count { font-variant-numeric: tabular-nums; }
.ym-import-bar {
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); overflow: hidden;
}
.ym-import-bar-fill {
  display: block; height: 100%; width: 0;
  background: var(--coral);
  border-radius: inherit;
  transition: width var(--dur-base) var(--ease-out);
}
.ym-import-progress-city { margin: 0; min-height: 1.1em; font-size: 0.76rem; color: var(--text-3); }

/* — signed-out + done states — */
.ym-import-signin,
.ym-import-done {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 4px;
}
.ym-import-signin > i,
.ym-import-done > i { font-size: 1.9rem; color: var(--coral-hover); }
.ym-import-done .ym-import-cities { align-self: stretch; }

@media (prefers-reduced-motion: reduce) {
  .ym-import-overlay, .ym-import-card, .ym-import-bar-fill { transition: none; }
  .ym-import-card { transform: none; }
  .ym-import-spin { animation: none; }
  .ym-press { transition: none; }
}

/* ---- CityPick · seeded ("existing") trip-city chips ----
   tripcities.jsx CityPickScreen tags cities already in the trip with `.existing`
   (they carry no remove button — they are locked in). The base .cp-chip (mirror
   citymap.css) rendered them identically to a fresh pick. Reduced-emphasis state
   so "already in the trip" reads calmer than a new selection: transparent fill +
   a dashed hairline instead of the solid --surface-muted pill, secondary text,
   and a dimmed hue dot. Neutral tokens resolve in both day and night themes. */
.cp-chip.existing { background: transparent; border-style: dashed; color: var(--text-2); }
.cp-chip.existing .cp-chip__dot { opacity: .5; }