:root {
    color-scheme: light;
    --ink: #102d36;
    --muted: #50676b;
    --accent: #086858;
    --mint: #a9e5d4;
    --line: #d9e4df;
    --paper: #f3f6f4;
    font-family: system-ui, "Microsoft JhengHei", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button[hidden] { display: none; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid #227cd0; outline-offset: 3px; }

.topbar {
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px max(4vw, calc((100vw - 1280px) / 2));
    gap: 12px;
    min-height: 68px;
}
.brand { display: inline-flex; gap: 9px; align-items: center; color: #fff; text-decoration: none; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.15rem; letter-spacing: .09em; }
.brand small { color: #b8d0cc; font-size: .72rem; }
.install {
    border: 1px solid #5d847d;
    background: #1c4148;
    color: #e3fff4;
    font-weight: 650;
    padding: 9px 13px;
    border-radius: 9px;
    min-height: 44px;
}
.install:hover { background: #2a5558; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.language-switch { position: relative; z-index: 1000; }
.language-switch summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid #5d847d;
    border-radius: 9px;
    color: #e3fff4;
    background: #1c4148;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    list-style: none;
}
.language-switch summary::-webkit-details-marker { display: none; }
.language-switch summary:hover, .language-switch[open] summary { background: #2a5558; }
.language-menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    width: 190px;
    max-height: min(65vh, 390px);
    overflow: auto;
    padding: 6px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 25px #142d3530;
}
.language-menu p { margin: 0; padding: 8px 9px; color: var(--muted); font-size: .75rem; }
.language-menu a { display: flex; align-items: center; min-height: 36px; padding: 5px 9px; border-radius: 5px; text-decoration: none; }
.language-menu a:hover, .language-menu a:focus-visible { background: #eaf6f1; }
.language-menu a:focus-visible { outline-offset: -3px; }
main { max-width: 1330px; margin: auto; padding: 28px 4vw 24px; }
.intro { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; }
.eyebrow { color: var(--accent); font-size: .79rem; font-weight: 760; letter-spacing: .15em; }
.eyebrow span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 5px; }
.intro h1 { margin: 4px 0; font-size: clamp(1.65rem, 4vw, 2.8rem); letter-spacing: -.04em; line-height: 1.18; }
.intro p { margin: 7px 0 0; }
.intro p:last-child { color: var(--muted); }
.locate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--accent);
    color: #fff;
    border: 0;
    padding: 11px 14px;
    border-radius: 9px;
    font-weight: 650;
    min-height: 44px;
}
.locate:hover { background: #075849; }
.explorer {
    display: grid;
    grid-template-columns: minmax(270px, 33%) 1fr;
    grid-template-rows: auto minmax(420px, 63vh);
    grid-template-areas: "filters filters" "results map";
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 25px #142d3510;
}
.filters { grid-area: filters; display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.field { color: var(--muted); font-size: .78rem; font-weight: 700; display: grid; gap: 4px; }
.keyword { flex: 1; min-width: 0; }
.field input, .field select {
    background: #f7faf9;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 11px;
    min-height: 44px;
    font-size: 1rem;
    width: 100%;
}
.field select { min-width: 125px; }
.map-panel { grid-area: map; position: relative; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #e4edea; z-index: 0; }
.map-actions { display: flex; gap: 6px; position: absolute; top: 12px; left: 12px; z-index: 500; }
.map-reset {
    border: 1px solid #b5ccc5;
    background: #fff;
    color: var(--ink);
    border-radius: 8px;
    padding: 7px 11px;
    font-weight: 650;
    min-height: 40px;
}
.map-contribute { position: absolute; left: 12px; bottom: 26px; right: 12px; z-index: 500; pointer-events: none; }
.map-contribute button { pointer-events: auto; }
#pick-point-hint { width: fit-content; margin: 0 0 6px; padding: 5px 8px; background: #fff; border-radius: 6px; font-size: .82rem; }
#map.picking-point { cursor: crosshair; }
#map.picking-point .point-pin { pointer-events: none; }
.pick-point-target {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #b3261e;
    box-shadow: 0 0 0 2px currentColor, 0 2px 6px #102d36a6;
    background: radial-gradient(circle, currentColor 0 4px, #fff 4px 6px, transparent 6px);
    z-index: 499;
    pointer-events: none;
}
#map.picking-point + .pick-point-target { display: block; }
.pick-point-target::before, .pick-point-target::after {
    content: '';
    position: absolute;
    inset: 50% -7px auto;
    height: 2px;
    background: linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66%);
    filter: drop-shadow(0 0 1px #fff);
    transform: translateY(-50%);
}
.pick-point-target::after { transform: translateY(-50%) rotate(90deg); }
.point-pin { background: #087463; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 6px #102d3680; }
.point-pin::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #bcf2e4; }
.community-pin { background: #805220; }
.community-pin::after { background: #ffdf9e; }
.draft-pin { background: #b3261e; }
.draft-pin::after { background: #fff; }
.point-popup h3 { margin: 0; font-size: 1rem; }
.point-rating { margin: 9px 0; padding: 8px 0; border-block: 1px solid var(--line); }
.point-rating strong { color: var(--ink); }
.rating-stars { display: flex; gap: 4px; margin: 4px 0; }
.rating-stars button { width: 36px; min-height: 40px; padding: 0; border: 1px solid #bfc9c1; border-radius: 6px; color: #70470b; background: #fff; font-size: 1.45rem; line-height: 1; }
.rating-stars button:hover, .rating-stars button[aria-pressed="true"] { border-color: #a96e13; background: #fff1d6; }
.rating-stars button:focus-visible { outline-offset: 1px; }
.rating-message { display: block; color: var(--muted); min-height: 1em; }
.point-popup dl { display: grid; grid-template-columns: max-content 1fr; gap: 5px 10px; margin: 10px 0; }
.point-popup dt { color: var(--muted); }
.point-popup dd { margin: 0; overflow-wrap: anywhere; }
.point-popup a.directions { display: block; margin-top: 10px; background: var(--accent); color: white; border-radius: 6px; padding: 6px 10px; text-decoration: none; text-align: center; }
.result-panel { grid-area: results; display: flex; min-height: 0; flex-direction: column; border-right: 1px solid var(--line); }
.result-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px; padding: 13px 16px 0; }
.result-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; }
.result-limit, .result-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .85rem; font-weight: 700; }
.result-sort select { min-height: 44px; padding: 6px 8px; color: var(--ink); background: #f7faf9; border: 1px solid #b5ccc5; border-radius: 8px; }
.rating-filter select { min-width: 118px; }
.point-rating-badge { justify-self: start; color: #70470b; background: #fff1d6; padding: 2px 6px; border-radius: 5px; font-size: .77rem; white-space: nowrap; }
.point-rating-badge:empty { display: none; }
.result-limit select {
    appearance: none;
    color: #fff;
    background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center / 16px 16px no-repeat;
    border: 1px solid var(--accent);
    border-radius: 8px;
    min-height: 44px;
    min-width: 88px;
    padding: 8px 30px 8px 11px;
    font: inherit;
    cursor: pointer;
}
.result-limit select:hover { background-color: #075849; }
.result-limit option { background: #fff; color: var(--ink); }
@media (forced-colors: active) {
    .result-limit select { appearance: auto; background-image: none; padding-right: 11px; }
}
.result-heading h2 { margin: 0; font-size: 1.02rem; }
.count { background: #e3f4ef; color: var(--accent); font-size: .78rem; font-weight: 750; padding: 5px 9px; border-radius: 99px; white-space: nowrap; }
#status { margin: 6px 16px 12px; font-size: .82rem; color: var(--muted); }
.retry { background: transparent; color: var(--accent); padding: 5px; border: 0; text-decoration: underline; }
.results { overflow: auto; min-height: 0; margin: 0; padding: 0 10px 8px; list-style: none; }
.point-row { width: 100%; display: grid; gap: 3px; text-align: left; color: var(--ink); background: #fff; border: 0; border-top: 1px solid #e8efeb; padding: 10px 7px; }
.point-row:hover, .point-row:focus-visible { background: #eaf6f1; }
.point-row:focus-visible { outline-offset: -3px; }
.point-heading { display: flex; justify-content: space-between; gap: 6px; }
.point-row small, .guide-row small { display: block; color: var(--muted); }
.distance { color: var(--accent); font-size: .78rem; white-space: nowrap; }
.guide-row { padding: 10px 7px; border-top: 1px solid var(--line); }
.area-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px 14px; margin: 20px 0 0; font-size: .87rem; }
.area-links a[aria-current] { font-weight: 750; }
.ad-placement { margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; color: var(--muted); font-size: .72rem; }
.ad-placement ins { min-height: 90px; }
.ad-placement:has(ins[data-ad-status="unfilled"]) { display: none; }
footer { color: var(--muted); display: flex; gap: 10px 20px; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; font-size: .82rem; }
footer p { margin: 0; }
footer summary { color: var(--accent); cursor: pointer; font-weight: 650; }
footer ul { padding-left: 21px; }
footer li { margin-bottom: 4px; }
dialog { color: var(--ink); border: 1px solid var(--line); border-radius: 15px; padding: 22px; max-width: min(90vw, 390px); }
dialog::backdrop { background: #102d3690; }
dialog h2 { margin: 0; font-size: 1.25rem; }
dialog p { line-height: 1.6; }
.community-dialog { width: min(90vw, 390px); }
#community-add { width: min(90vw, 520px); max-width: 90vw; }
#community-add .field { margin-top: 8px; }
.community-coordinate { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.community-coordinate span { color: var(--muted); font-size: .85rem; }
.community-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 8px; }
.community-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.community-message { margin: 7px 0; color: #8a3019; }
.community-message:empty { display: none; }

@media (max-width: 720px) {
    .topbar { padding: 10px 15px; }
    main { padding: 17px 12px 20px; }
    .intro { align-items: start; flex-direction: column; gap: 10px; margin-bottom: 13px; }
    .filters { padding: 9px; gap: 8px; flex-wrap: wrap; }
    .keyword { flex-basis: 100%; }
    .field select { min-width: 99px; }
    .explorer { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto clamp(275px, 46vh, 460px) auto; grid-template-areas: "filters" "map" "results"; }
    .result-panel { border-top: 1px solid var(--line); border-right: 0; }
    .results { max-height: 52vh; }
}


@media (max-width: 420px) {
    .topbar { flex-wrap: wrap; gap: 8px; padding-inline: 12px; }
    .brand { gap: 6px; }
    .brand img { width: 34px; height: 34px; }
    .brand small { font-size: .65rem; }
    .topbar-actions { gap: 6px; }
    .install, .language-switch summary { padding-inline: 8px; font-size: .8rem; }
}