:root {
  color-scheme: light;
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #171717;
  background: #f7f7f6;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #f7f7f6;
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  border: 0;
  appearance: none;
}

.tool-page {
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #f7f7f6;
}

.topbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 45px;
  padding: max(4px, env(safe-area-inset-top)) 16px 6px;
}

.brand-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 18px;
}

.menu-icon {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  cursor: pointer;
  background: transparent;
}

.menu-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #171717;
  stroke-linecap: round;
  stroke-width: 2px;
}

.brand-name {
  overflow: hidden;
  color: #a83a04;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}

.account-pill {
  display: grid;
  flex: 0 1 155px;
  grid-template-columns: 20px minmax(0, 1fr) 23px;
  align-items: center;
  gap: 13px;
  min-width: 140px;
  height: 52px;
  padding: 0 16px 0 18px;
  color: #aaa;
  background: #fff;
  border-radius: 13px;
}

.avatar-placeholder {
  width: 20px;
  height: 20px;
  background: #f1f1f1;
  border-radius: 50%;
}

.account-name {
  overflow: hidden;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}



.workspace {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 22px 8px;
  overflow: hidden;
  place-items: center;
}

.country-stage { display: grid; width: 100%; height: 100%; min-height: 0; align-items: center; }
.country-stage[hidden], .location-candidates[hidden] { display: none; }
.country-map-wrap { display: grid; width: 100%; height: 100%; min-height: 0; place-items: center; }
.country-map { display: block; width: 100%; height: 100%; max-height: 54vh; overflow: hidden; background: #fff; border-radius: 12px; }
.world-outline, .selected-country { fill-rule: evenodd; stroke: none; }
.world-outline { fill: #eee; }
.world-boundaries { display: none; fill: none; stroke: #b8b8b8; stroke-width: .45; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.selected-country { fill: #993300; }
.renderer-capital { display: none; }
.small-country-ring { fill: none; stroke: #f00; stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.small-country-ring[hidden] { display: none; }
.location-marker { color: #a73500; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .18)); }
.location-marker[hidden] { display: none; }
.location-marker path { fill: currentColor; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.location-marker circle { fill: #fff; }
.location-label { pointer-events: none; }
.location-label[hidden] { display: none; }
.location-label rect { fill: #fff; stroke: #dedede; stroke-width: 1; vector-effect: non-scaling-stroke; }
.location-label text { fill: #333; font-size: 12px; font-weight: 500; dominant-baseline: middle; text-anchor: start; }
.location-candidates { width: 100%; max-height: 100%; overflow-y: auto; }
.location-candidates p { margin: 0 0 12px; color: #777; font-size: 14px; text-align: center; }
.location-candidates > div { display: grid; gap: 8px; }
.candidate-button { display: grid; width: 100%; min-height: 54px; padding: 9px 14px; cursor: pointer; text-align: left; background: #fff; border: 1px solid #ecebea; border-radius: 9px; }
.candidate-button strong { font-size: 15px; font-weight: 500; }
.candidate-button small { margin-top: 3px; color: #858585; font-size: 12px; }
.location-status { position: absolute; right: 24px; bottom: 10px; left: 24px; margin: 0; color: #777; font-size: 13px; line-height: 1.4; text-align: center; }
.location-status:empty { display: none; }
.location-status.is-error { color: #a73500; }

.bottom-controls {
  display: grid;
  flex: 0 0 auto;
  gap: 14px;
  padding: 0 22px max(6px, env(safe-area-inset-bottom));
}

.composer {
  position: relative;
  display: block;
  height: 60px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  transition: height 200ms ease, border-radius 200ms ease;
}


.add-button,
.send-button,
.start-button,
.sheet-backdrop,
.sheet-handle {
  cursor: pointer;
}

.add-button {
  display: grid;
  width: 46px;
  height: 42px;
  place-items: center;
  background: transparent;
}

.add-button svg {
  display: block;
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #c3c5c7;
  stroke-linecap: round;
  stroke-width: 2px;
}

.composer-left-actions {
  display: flex;
  grid-area: left;
  align-items: center;
}












.random-placeholder {
  position: absolute;
  inset: 0 6px;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

.random-placeholder[hidden],

.random-placeholder-name { overflow: hidden; color: #666; text-overflow: ellipsis; }
.random-placeholder-meta { flex: 0 0 auto; color: #ccc; }

.send-button {
  display: grid;
  grid-area: send;
  justify-self: end;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fff;
  background: #ccc;
  border-radius: 50%;
  transition: background-color .14s ease;
}

.composer.has-value .send-button { background: #2f80ed; }

.send-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
}

.mode-bar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
  padding: 0 18px;
  background: #f2f2f2;
  border-radius: 9px;
}

.mode-label {
  color: #909090;
  font-size: 14px;
}

.mode-demo {
  justify-self: start;
}

.mode-pin {
  justify-self: end;
}

.start-button {
  width: 67.2px;
  min-width: 67.2px;
  max-width: 67.2px;
  height: 34px;
  padding: 0 14px;
  color: #fff;
  font-size: 14px;
  background: #a73500;
  border-radius: 9px;
}

.history-actions { display: inline-flex; align-items: center; gap: 20px; }
.history-actions svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.history-actions svg[hidden] { display: none; }
.previous-button { display: grid; width: 34px; height: 34px; place-items: center; color: #ccc; cursor: pointer; background: transparent; }
.previous-button[hidden] { display: none; }
.previous-button:disabled { cursor: default; opacity: .45; }
.mode-bar.is-history .start-button { display: grid; padding: 0; place-items: center; }
.start-button:disabled, .send-button.is-loading { cursor: wait; opacity: .58; }

button:focus-visible {
  outline: 2px solid #2f80ed;
  outline-offset: 2px;
}

.sheet-layer[hidden] {
  display: none;
}

.sheet-layer {
  position: fixed;
  z-index: 20;
  inset: 0;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .31);
}

.tool-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-height: min(78dvh, 720px);
  margin: 0 auto;
  padding: 0 20px max(22px, env(safe-area-inset-bottom));
  overflow: hidden;
  background: #fff;
  border-radius: 54px 54px 0 0;
}

.sheet-handle {
  display: grid;
  flex: 0 0 44px;
  width: 100%;
  place-items: center;
  background: transparent;
}

.sheet-handle span {
  display: block;
  width: 70px;
  height: 7px;
  background: #4c4d4b;
  border-radius: 999px;
}

.quick-actions {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.quick-action {
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1 / .94;
  background: #f3f1f2;
  border-radius: 42px;
}

.quick-action svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #090909;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.tool-list {
  display: grid;
  gap: 2px;
  min-height: 0;
  margin-top: 22px;
  padding-bottom: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.tool-list::-webkit-scrollbar {
  display: none;
}

.tool-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 86px;
  padding: 10px 18px;
}

.tool-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.tool-copy strong {
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
}

.tool-copy small {
  color: #858585;
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 380px) {
  .topbar {
    padding-right: 12px;
    padding-left: 12px;
  }

  .brand-group {
    gap: 12px;
  }

  .brand-name {
    font-size: 20px;
  }

  .account-pill {
    flex-basis: 136px;
    grid-template-columns: 18px minmax(0, 1fr) 21px;
    gap: 9px;
    min-width: 120px;
    padding-right: 11px;
    padding-left: 13px;
  }

  .bottom-controls {
    padding-right: 16px;
    padding-left: 16px;
  }

  .tool-sheet {
    padding-right: 14px;
    padding-left: 14px;
    border-radius: 42px 42px 0 0;
  }

  .quick-action {
    border-radius: 34px;
  }

  .tool-copy strong {
    font-size: 18px;
  }

  .tool-copy small {
    font-size: 14px;
  }

}

@media (min-width: 521px) {
  .tool-page {
    border-right: 1px solid #efefef;
    border-left: 1px solid #efefef;
  }
}

/* Keep one layout throughout expansion; animate positions without grid swaps. */
.composer-left-actions {
  position: absolute; left: 8px; top: 8px; height: 42px;
  transition: transform 200ms ease;
}
.composer .send-button {
  position: absolute; right: 8px; top: 13px;
  transition: transform 200ms ease, background-color 140ms ease;
}


.history-actions { position: relative; display: block; justify-self: center; }
.previous-button { position: absolute; left: calc(100% + 20px); top: 0; }
.start-label[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .composer, .composer-input-wrap, .composer-input,
  .composer-left-actions, .composer .send-button,
  .composer-m09-button { transition: none; }
}

/* v1.15 country carousel */
.workspace { overflow: visible; padding-top: 34px; padding-bottom: 54px; }
.country-stage { height: auto; align-self: center; }
.country-map-wrap { position: relative; height: auto; width: min(100%, calc((100dvh - 360px) * 1.8)); min-width: 180px; margin: auto; background: #fff; border-radius: 12px; }
.country-map { height: auto; max-height: none; background: transparent; }
.country-walk { position: absolute; right: 0; top: -26px; color: #999; text-decoration: none; font-size: 13px; cursor: default; }
.country-audio-controls { position: absolute; left: 0; bottom: -40px; display: flex; align-items: center; gap: 8px; }
.country-audio-controls button { display: grid; width: 40px; height: 40px; padding: 0; line-height: 0; place-items: center; color: #aaa; background: transparent; cursor: pointer; }
.country-audio-controls button svg { display: block; width: 24px; height: 24px; }
.country-audio-controls button:hover, .country-audio-controls .is-playing { color: #993300; }
.country-audio-controls button:disabled { opacity: .4; cursor: default; }
.country-audio-controls [hidden] { display: none; }

.composer.is-focused .send-button, .composer.has-value .send-button { background: #2684fc; }
.mode-bar { grid-template-columns: repeat(5,minmax(0,1fr)); }
.mode-demo { grid-column: 1; grid-row: 1; justify-self: center; }
.mode-pin { grid-column: 5; grid-row: 1; }
.history-actions { display: contents; }
.mode-bar .start-button { grid-column: 3; grid-row: 1; justify-self: center; display: grid; place-items: center; padding: 0; }
.mode-bar .previous-button { position: static; grid-column: 2; grid-row: 1; justify-self: center; }
body[data-mobile="true"] { touch-action: pan-y; }
@media(max-height: 550px) { .tool-page { min-height: 550px; } body { overflow-y: auto; } .country-map-wrap { width: min(100%, 300px); } }

#countrySpeak svg { width: 30px; height: 30px; }
#countryMute svg { width: 24px; height: 24px; }
#countrySpeak { width: 38px; height: 38px; }
#countrySpeak > span:not([hidden]) { display: grid; place-items: center; line-height: 0; }



.composer .random-placeholder[hidden], .composer.is-focused .random-placeholder { display: none; }

/* v1.18: highlight muted and zero-volume state. */
#countryMute.is-muted { color: #993300; }

/* v1.19 homepage controls */
.brand-name { text-decoration: none; }
.account-pill { column-gap: 10.4px; padding: 0 11px 0 13px; height: 42px; flex-basis: 142.4px; min-width: 127.4px; }
.country-audio-controls[hidden], .mode-bar [hidden] { display: none !important; }
.country-walk { display: flex; align-items: center; gap: 13px; }
.country-walk a { color: #999; text-decoration: none; }
.country-walk button, .map-footer button, #leaveInput { display: grid; place-items: center; width: 32px; height: 32px; background: transparent; color: #aaa; padding: 0; }
.country-walk button { color: #ccc; width: 24px; height: 24px; }
.country-walk svg, .map-footer svg, #leaveInput svg { width: 24px; height: 24px; }
.map-footer { position: absolute; left: 0; right: 0; bottom: -44px; display: flex; align-items: center; justify-content: space-between; }
.map-footer .map-menu { background: white; border-radius: 50%; width: 36px; height: 36px; }
.map-footer-right { display: flex; gap: 8px; }
.mode-bar #countrySpeak { grid-column: 4; grid-row: 1; justify-self: center; display: grid; place-items: center; padding: 0; background: transparent; }

.add-button svg { width: 19px; height: 19px; }
.composer.is-focused .composer-input-wrap { left: 21.5px; }
.composer.is-focused .composer-input { padding-left: 0; }
#leaveInput { color:#ccc; display: none; position: absolute; top: -38px; left: 0; }
.composer.is-focused #leaveInput { display: grid; }
.mode-bar.is-focused .start-button { background: #e8e8e8; }
#languageDrawer { position: fixed; inset: 0; z-index: 100; }
#languageDrawer[hidden] { display: none; }
.drawer-backdrop { position: absolute; inset: 0; background: #0006; width: 100%; height: 100%; }
#languageDrawer aside { position: relative; height: 100%; width: min(80vw,360px); background: #fff; padding: 32px 24px; }
#languageDrawer p { margin: 36px 0 16px; color: #999; }
#languageDrawer [data-language] { display: block; width: 100%; padding: 16px; text-align: left; border-radius: 12px; background: transparent; }
#languageDrawer [aria-pressed="true"] { background: #eee; color: #993300; }
#closeMenu { color:#999; position: absolute; right: 16px; top: 30px; width: 28px; height: 28px; background: transparent; }
@media(max-width: 380px) { .account-pill { column-gap: 7.2px; padding-left: 8px; padding-right: 6px; flex-basis: 124.2px; min-width: 108.2px; } }

/* v1.20: anchor middle controls to their neighbours, independent of text width. */
.mode-bar { position: relative; }
.mode-demo { transform: translateX(-10px); color: #999; }
.mode-bar .previous-button { position: absolute; left: var(--previous-center, 30%); top: 50%; transform: translate(-50%, -50%); margin: 0; }
.mode-bar #countrySpeak { position: absolute; left: var(--play-center, 70%); top: 50%; transform: translate(-50%, -50%); margin: 0; }
.mode-pin { display: grid; place-items: center; background: transparent; padding: 0; }
.mode-pin svg { width: 30px; height: 24px; }

.mode-bar .previous-button, .mode-bar #countrySpeak { grid-column: auto; grid-row: auto; justify-self:start; align-self:start; right:auto; bottom:auto; }
.mode-bar .start-button { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); grid-column:auto; grid-row:auto; justify-self:start; align-self:start; margin:0; }

/* v1.21: inset map controls, shared translucent circular background. */
.map-footer .map-menu { position: absolute; left: 7px; bottom: 51px; }
.country-audio-controls { left: auto; right: 7px; bottom: 7px; }
.map-footer .map-menu, .country-audio-controls #countryMute { width: 25.2px; height: 25.2px; border-radius: 50%; background: rgba(0,0,0,.02); color: #ccc; }
.country-audio-controls #countryMute.is-muted { color: #993300; }

/* v1.23: right-aligned external actions and inset map content. */
.map-footer { justify-content: flex-end; }
.map-footer .map-menu svg, .country-audio-controls #countryMute svg { width: 16.8px; height: 16.8px; }
.country-map { transform: scale(.9); transform-origin: center; }

/* v1.26: account, map actions and content/action composer rows. */
.account-pill { height: 26px; padding: 0 15px 0 17px; grid-template-columns:12px minmax(0,1fr) 13px; align-items:center; }
.avatar-placeholder { width:12px; height:12px; }
.account-name { font-size:14px; line-height:20px; }
.workspace { align-content:start; }
.country-stage { align-self:start; }
.country-walk button { width:20px; height:20px; color:#aaa; }
.country-walk button svg { width:18px; height:18px; color:#aaa; }
.map-footer-right button { color:#bbb; }
.map-footer-right button:first-child { width:30px; height:30px; }
.map-footer-right button:first-child svg { width:20px; height:20px; stroke-width:1px; }
.map-footer-right button:first-child svg * { vector-effect:non-scaling-stroke; }
.map-footer-right button:nth-child(2) svg { width:26px; height:26px; }
.mode-bar .start-button { width:53.76px; min-width:53.76px; max-width:53.76px; height:27.2px; border-radius:8px; }
.mode-bar .start-button svg { width:14.4px; height:14.4px; }
.mode-bar .previous-button { width:27.2px; height:27.2px; }
.mode-bar .previous-button svg { width:14.4px; height:14.4px; }
.mode-bar.is-focused .start-button .next-icon { color:#ccc; stroke:#ccc; }
.mode-pin { color:#bbb; }
.mode-pin svg { width:26px; height:20px; }
.mode-pin svg * { vector-effect:non-scaling-stroke; }
#languageDrawer [data-language] { display:flex; align-items:center; justify-content:space-between; color:#aaa; }
#languageDrawer [aria-pressed="true"] { color:#333; }
.language-check { width:18px; height:18px; display:none; }
[aria-pressed="true"] .language-check { display:block; }
.composer { --content-height:24px; height:52px; }
.composer.is-editing { height:calc(var(--content-height) + 58px); border-radius:12px; }
.composer-input-wrap { position:absolute; top:0; left:102px; right:50px; height:50px; min-width:0; display:flex; align-items:center; }
.composer.is-editing .composer-input-wrap, .composer.is-focused .composer-input-wrap { top:10px; left:21.5px; right:16px; height:var(--content-height); align-items:flex-start; }
.composer-input { display:block; box-sizing:border-box; width:100%; height:24px; min-width:0; padding:0; margin:0; border:0; outline:0; resize:none; background:transparent; font:inherit; line-height:24px; overflow-y:auto; }
.composer.is-focused .composer-input { padding:0; }
.composer .composer-left-actions { top:auto; bottom:5px; height:36px; transform:none; }
.composer .send-button { top:auto; bottom:11px; transform:none; }
.account-pill .composer-m09-button { display:inline-block; opacity:1; visibility:visible; padding:0; margin-left:14px; color:inherit; font-size:14px; line-height:20px; background:transparent; }
.composer .random-placeholder { inset:0; height:24px; top:50%; transform:translateY(-50%); }
.composer.is-editing .random-placeholder { display:flex; top:0; height:24px; transform:none; }
.composer .random-placeholder[hidden], .composer.is-focused .random-placeholder { display:none; }
body.keyboard-open .bottom-controls { position:fixed; left:50%; transform:translateX(-50%); top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh)); margin-top:0; translate:0 -100%; width:min(100%,520px); padding:0 12px; z-index:20; gap:0; }
body.keyboard-open .mode-bar { display:none; }
body.keyboard-open .workspace { overflow:auto; padding-bottom:170px; }
@media(max-width:380px){.account-pill{padding-left:12px;padding-right:10px;}}

.country-audio-controls .sound-control { display:flex; align-items:center; height:25.2px; }

/* v1.32: send-button colors follow focus, including retained input. */
.composer:not(.is-focused) .send-button { background:#F2F2F2; color:#ccc; }
.composer.is-focused .send-button { color:#fff; }

/* v1.62: permanent pale pink play button; gray pause button. */
#countryPlayIcon circle { fill:#F0BFBB; }
#countryPauseIcon circle { fill:#aaa; }
#countryPlayIcon path, #countryPauseIcon path { fill:#fff; }

/* v1.41: swapped account label and composer grid; matching outer edges. */
.account-pill { display:flex; flex:0 0 auto; min-width:0; column-gap:6px; }
.account-pill .avatar-placeholder { flex:none; }
.account-pill .account-name, .account-pill .composer-m09-button { white-space:nowrap; }
.composer-left-actions .app-grid { display:block; flex:none; width:20px; height:20px; margin-left:8px; }
.country-map-wrap { width:100%; min-width:0; margin:0; }
@media(max-width:380px){.workspace { padding-left:16px; padding-right:16px; }}
body.keyboard-open .workspace { padding-left:12px; padding-right:12px; }

/* v1.56: a real card boundary, with symmetric heading/footer gaps. */
.country-map-wrap { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; background:transparent; --map-row-gap:6px; }
.country-walk { position:static; display:flex; width:100%; align-self:stretch; justify-content:flex-end; margin-bottom:var(--map-row-gap); min-height:20px; flex:none; }
.country-map-card { position:relative; width:100%; background:#fff; border-radius:12px; cursor:pointer; touch-action:manipulation; }
.country-map-card:focus-visible { outline:2px solid #bbb; outline-offset:3px; }
.country-map-card > .map-menu { position:absolute; left:7px; bottom:7px; display:grid; place-items:center; width:25.2px; height:25.2px; padding:0; border-radius:50%; background:rgba(0,0,0,.02); color:#ccc; }
.country-map-card > .map-menu svg { width:16.8px; height:16.8px; }
.map-footer { position:static; display:flex; width:100%; align-self:stretch; flex:none; margin-top:var(--map-row-gap); min-height:32px; justify-content:space-between; align-items:center; gap:8px; }
.map-footer-right { margin-left:auto; align-items:center; flex-shrink:0; }
.country-population { flex:0 0 auto; margin:0 auto 0 0; text-align:left; color:#bbb; font-size:13px; line-height:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.country-population[hidden] { display:none; }
.workspace.is-quick-entry { cursor:pointer; touch-action:manipulation; }

/* v1.58: fixed label gap and larger hit targets without layout changes. */
.country-population { display:inline-flex; align-items:center; column-gap:8px; }
#closeCountry, .map-footer-right button { position:relative; overflow:visible; }
#closeCountry::after { content:""; position:absolute; inset:-5px; }
/* Half of the existing 8px button gap on each side avoids overlapping targets. */
.map-footer-right button::after { content:""; position:absolute; inset:-5px -4px; }