:root {
  --ink: #25314a;
  --pink: #ff7d9c;
  --pink-dark: #b72e56;
  --shadow: 0 18px 45px rgba(74, 54, 108, .12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  background: radial-gradient(circle at 12% 5%, #ffe2ec 0 11%, transparent 30%),
    radial-gradient(circle at 90% 28%, #dff8ee 0 9%, transparent 26%), #f7f4ff;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid #8657c7; outline-offset: 3px;
}
.page-shell { width: min(1280px, calc(100% - 28px)); margin: 0 auto; padding: 38px 0 50px; }
.hero { position: relative; overflow: hidden; padding: 26px 12px 34px; text-align: center; }
.eyebrow { margin: 0 0 6px; color: var(--pink-dark); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
h1 { margin: 0; font-size: clamp(2.1rem, 7vw, 4.2rem); line-height: 1.15; letter-spacing: -.05em; }
.intro { margin: 14px 0 0; color: #59657d; font-size: 1.05rem; }
.hero-orbit { position: absolute; z-index: -1; border: 2px solid rgba(255, 125, 156, .3); border-radius: 50%; }
.orbit-one { width: 140px; height: 140px; top: -40px; left: 2%; }
.orbit-two { width: 95px; height: 95px; right: 4%; bottom: -28px; border-color: rgba(93, 202, 160, .35); }
.unlock-card, .location-panel {
  background: rgba(255, 253, 249, .96); border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 28px; box-shadow: var(--shadow);
}
.unlock-card { max-width: 510px; margin: 0 auto; padding: 30px; text-align: center; }
.lock-icon { font-size: 2.2rem; }
.unlock-card h2 { margin: 8px 0 5px; }
.unlock-card p { color: #657086; margin: 0 0 20px; line-height: 1.7; }
label { display: block; text-align: left; font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.token-row { display: flex; gap: 8px; }
input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid #d9d7e0; border-radius: 13px; }
.token-row button {
  border: 0; border-radius: 13px; padding: 0 17px; background: var(--pink-dark); color: #fff; font-weight: 800;
}
.message { min-height: 1.4em; margin: 10px 0 0 !important; font-size: .88rem; color: #b23558 !important; }
.location-panel { padding: 16px; }
.location-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.map-content { min-width: 0; }
.recent-panel { background: #f7f2fc; border: 1px solid #eee4f2; border-radius: 20px; padding: 20px 12px 12px; }
.recent-panel h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.03em; }
.recent-panel > .eyebrow, .recent-panel h2, .recent-panel > p { padding-left: 8px; padding-right: 8px; }
#recent-status { color: #68738a; font-size: .8rem; line-height: 1.6; }
.recent-note { color: #68738a; font-size: .75rem; line-height: 1.7; }
.recent-list { padding: 0; margin: 16px 0 0; list-style: none; max-height: 900px; overflow-y: auto; }
.recent-list li + li { margin-top: 6px; }
.recent-point { display: flex; align-items: flex-start; gap: 10px; padding: 13px 10px; width: 100%; border: 1px solid transparent; border-radius: 14px; background: #fff; color: var(--ink); text-align: left; }
.recent-point:hover, .recent-point[aria-pressed="true"] { border-color: #ec9fb9; background: #fff4f8; }
.point-number { display: grid; place-items: center; flex: 0 0 28px; height: 28px; background: #ffe4ee; color: #a43b64; border-radius: 9px; font-size: .75rem; font-weight: 800; }
.point-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.point-body time { font-size: .78rem; color: #8b4c6c; font-weight: 700; }
.point-body strong { font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.point-coordinates { color: #768095; font-size: .7rem; }
.nearby-address { padding: 17px 18px; background: linear-gradient(120deg, #fff0f4, #fff6e9); border: 1px solid #f9e3e8; border-radius: 16px; margin-top: 14px; }
.nearby-address > span { display: block; color: #8b4c6c; font-size: .8rem; font-weight: 700; }
.nearby-address > strong { display: block; margin-top: 7px; font-size: 1.12rem; line-height: 1.7; overflow-wrap: anywhere; }
.nearby-address p { margin: 6px 0 0; font-size: .75rem; color: #768095; line-height: 1.6; }
.status-row { display: flex; align-items: center; gap: 10px; padding: 5px 5px 18px; font-size: .9rem; line-height: 1.6; }
.pulse { flex-shrink: 0; width: 10px; height: 10px; background: #319c67; border-radius: 50%; box-shadow: 0 0 0 5px #4ec58a29; }
[data-kind="waiting"] .pulse, [data-kind="stale"] .pulse { background: #b38317; box-shadow: 0 0 0 5px #edc97333; }
[data-kind="error"] .pulse { background: #c94262; box-shadow: 0 0 0 5px #e97b9333; }
[data-kind="history"] .pulse { background: #8657c7; box-shadow: 0 0 0 5px #8657c722; }
.text-button { margin-left: auto; flex-shrink: 0; border: 0; background: transparent; color: #68738a; text-decoration: underline; font-size: .82rem; }
.share-badge { margin-left: auto; flex-shrink: 0; padding: 4px 10px; border-radius: 999px; color: #68738a; background: #f1edf5; font-size: .75rem; }
.map-toolbar { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.map-toolbar > div { margin-right: auto; flex: 1; }
.map-toolbar button, select { min-height: 44px; border: 1px solid #e5dce9; border-radius: 12px; color: var(--ink); background: #fff; padding: 9px 13px; }
select { width: 100%; max-width: 250px; }
.map-toolbar button { background: #f5f1ff; white-space: nowrap; }
.map-card { position: relative; isolation: isolate; overflow: hidden; height: clamp(340px, 55vw, 520px); border-radius: 20px; background: #e0eee8; }
#map { width: 100%; height: 100%; }
.map-fallback { position: absolute; z-index: 1000; left: 12px; right: 12px; top: 0; margin: 12px 0; padding: 12px; border-radius: 10px; background: #fff8e8; color: #765c2b; text-align: center; font-size: .86rem; }
.teddy-marker { border-radius: 50% 50% 50% 8px; background: #ff9fb8; border: 3px solid #fff; box-shadow: 0 4px 13px #783a5455; }
.teddy-marker span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 27px; }
.location-popup { font: 13px/1.5 "Microsoft JhengHei", system-ui, sans-serif; }
.location-popup p { margin: 5px 0; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.info-grid article { padding: 14px 12px; border-radius: 16px; background: #f5f1ff; }
.info-grid article:nth-child(2) { background: #fff1e8; }
.info-grid article:nth-child(3) { background: #e9f8f1; }
.info-grid span { display: block; color: #667085; font-size: .78rem; }
.info-grid strong { display: block; margin-top: 4px; font-size: .95rem; }
.directions { display: block; padding: 13px 16px; border-radius: 14px; background: var(--ink); color: #fff; text-align: center; text-decoration: none; font-weight: 800; }
.history-panel { margin-top: 22px; padding: 0 6px; }
.history-panel h2 { font-size: 1.15rem; margin: 0 0 8px; }
.history-panel p { color: #667085; font-size: .85rem; line-height: 1.65; }
.history-list { margin: 10px 0 0; padding: 0; list-style: none; max-height: 330px; overflow: auto; }
.history-list li + li { border-top: 1px solid #ece5ee; }
.history-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; border: 0; padding: 12px; background: transparent; color: var(--ink); text-align: left; border-radius: 10px; }
.history-list button:hover { background: #f5f1ff; }
.history-list span { color: #657086; font-size: .84rem; }
.privacy-note { margin: 14px 6px 2px; text-align: center; color: #697488; font-size: .78rem; line-height: 1.8; }
@media (max-width: 960px) {
  .location-layout { grid-template-columns: 245px minmax(0, 1fr); gap: 12px; }
  .map-toolbar { flex-wrap: wrap; }
  .map-toolbar > div { flex: 1 0 100%; }
  .map-toolbar select { max-width: none; }
  .map-toolbar button { flex: 1; }
}
@media (max-width: 760px) {
  .location-layout { display: flex; flex-direction: column; }
  .map-content { order: 0; width: 100%; }
  .recent-panel { order: 1; width: 100%; margin-top: 10px; }
  .recent-list { max-height: 510px; }
}
@media (max-width: 560px) {
  .page-shell { width: calc(100% - 20px); padding-top: 20px; }
  .unlock-card { padding: 24px 18px; }
  .token-row { flex-direction: column; }
  .token-row button { min-height: 45px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-grid article { display: flex; justify-content: space-between; align-items: center; }
  .map-card { height: 400px; height: min(58svh, 440px); min-height: 310px; }
  .status-row { align-items: baseline; }
  .map-toolbar { flex-wrap: wrap; }
  .map-toolbar > div { flex: 1 0 100%; }
  .map-toolbar select { max-width: none; }
  .map-toolbar button { flex: 1; }
  .history-list button { flex-direction: column; align-items: flex-start; gap: 5px; }
}