:root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #17231f;
    background: #f4f6f3;
    --green: #123d35;
    --line: #d8dfda;
    --muted: #64726d;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
header {
    height: 52px;
    padding: 0 max(16px, calc((100% - 1120px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--green);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
}
header small {
    color: #caddd5;
}
main > section,
nav {
    max-width: 1120px;
    margin: auto;
    padding: 28px 20px;
}
.hero {
    background: #e7efe9;
    max-width: none !important;
    padding-left: max(20px, calc((100% - 1080px) / 2)) !important;
}
.hero p {
    margin: 0;
    color: #447365;
}
.hero h1 {
    font-size: 32px;
    margin: 8px 0;
}
.hero strong {
    font-size: 15px;
}
nav {
    padding-top: 12px;
    padding-bottom: 12px;
    display: flex;
    gap: 20px;
    overflow: auto;
    white-space: nowrap;
    position: sticky;
    top: 52px;
    background: #fff;
    z-index: 999;
    border-bottom: 1px solid var(--line);
}
nav a {
    color: #27483f;
    text-decoration: none;
}
.sectionHead {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}
.sectionHead h2 {
    margin: 0 0 10px;
}
.sectionHead p {
    color: var(--muted);
    font-size: 14px;
}
.needs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.needs article,
.card,
.control,
.warning,
details {
    background: white;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
}
.needs li {
    margin: 7px 0;
}
.controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.control label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.control input[type="range"] {
    width: 100%;
}
.thresholds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.thresholds input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
}
button,
input,
select {
    font: inherit;
}
button {
    min-height: 44px;
    border: 0;
    border-radius: 10px;
    padding: 9px 14px;
    background: var(--green);
    color: white;
    cursor: pointer;
}
#map {
    height: 500px;
    border-radius: 14px;
    overflow: hidden;
}
.rankMarker {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: #173f36;
    color: white;
    border: 2px solid white;
    display: grid;
    place-items: center;
    font-weight: 800;
    box-shadow: 0 2px 8px #0005;
}
.mapDot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px #0006;
}
.mapDot.action-优先 {
    background: #176447 !important;
}
.mapDot.action-保留 {
    background: #b78922 !important;
}
.mapDot.action-暂缓 {
    background: #966458 !important;
}
.mapDot.noSupply {
    background: transparent !important;
    border-color: #64726d;
}
.leaflet-tooltip {
    white-space: normal !important;
    writing-mode: horizontal-tb !important;
    max-width: 260px;
    line-height: 1.45;
}
.cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.cardHead {
    display: flex;
    justify-content: space-between;
}
.rank {
    font-size: 22px;
    color: #174d40;
}
.muted,
.status {
    color: var(--muted);
    font-size: 12px;
}
.verdict {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 10px 0;
}
.scoreLine { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:12px 0 8px; }
.scoreLine b { color:#174d40; font-size:18px; }
.scoreLine span { color:var(--muted); font-size:12px; }
.dimensionChips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; }
.dimensionChips span { display:flex; gap:5px; padding:5px 8px; border-radius:999px; background:#eef4f0; font-size:12px; }
.communityPreview { margin:10px 0; padding:10px; border-radius:9px; background:#f5f7f5; }
.communityPreview p { margin:5px 0 0; line-height:1.5; }
.communityPreview .concentration { color:#704d12; font-weight:600; }
.detailCommunities { margin:16px 0 22px; }
.communityList { display:grid; gap:8px; }
.communityRow { display:grid; grid-template-columns:minmax(150px,1.4fr) .45fr .8fr 1fr; gap:8px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:9px; background:#fff; }
.communityRow span { color:var(--muted); font-size:13px; }
.locationContext {
    color: var(--muted);
}
.good {
    color: #176447;
}
.bad {
    color: #9b3c31;
}
.matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.metric {
    padding: 8px;
    background: #f1f4f1;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 12px;
}
.metric b {
    font-size: 14px;
}
.actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.actions button {
    flex: 1;
}
.secondary {
    background: #e3ece7;
    color: #173f36;
}
.toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.toolbar input,
.toolbar select {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
}
.toolbar input {
    flex: 1;
}
dialog {
    width: min(760px, 100%);
    max-height: 94vh;
    border: 0;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 12px 40px #0005;
}
dialog::backdrop {
    background: #0008;
}
.close {
    position: sticky;
    float: right;
    top: 8px;
    margin: 8px;
    z-index: 2;
    border-radius: 50%;
    width: 44px;
}
#detailBody {
    padding: 24px;
}
.dimDetail {
    border-top: 1px solid var(--line);
    padding: 14px 0;
}
.dimTitle {
    display: flex;
    justify-content: space-between;
}
.subscores,
.facts {
    display: grid;
    gap: 6px;
}
.fact {
    background: #f5f7f5;
    padding: 9px;
    border-radius: 8px;
    font-size: 13px;
}
.fact a {
    color: #176447;
}
.compareWrap {
    overflow: auto;
}
.compareWrap table {
    border-collapse: collapse;
    min-width: 720px;
    background: white;
}
.compareWrap th,
.compareWrap td {
    border: 1px solid var(--line);
    padding: 9px;
    text-align: center;
}
.compareWrap th:first-child,
.compareWrap td:first-child {
    position: sticky;
    left: 0;
    background: white;
    text-align: left;
}
.unknown {
    color: #a35c20;
}
.confidence {
    color: #536c63;
}
.supply {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
}
.uncertain {
    background: #fff0c7;
    color: #713f05;
    border: 1px solid #e5b94e;
    border-radius: 8px;
    padding: 8px;
    margin: 8px 0;
    font-weight: 700;
}
.band-A {
    background: #145c46 !important;
}
.band-B {
    background: #2e725e !important;
}
.band-C {
    background: #7a6722 !important;
}
.band-D {
    background: #875040 !important;
}
.rank.band-A,
.rank.band-B,
.rank.band-C,
.rank.band-D {
    color: white;
    border-radius: 8px;
    padding: 6px 8px;
}
.nestedFacts {
    display: grid;
    gap: 5px;
    margin-top: 7px;
}
.nestedFacts > .fact {
    border-left: 3px solid #b6c9c0;
}
.rawFacts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 3px 8px;
    margin: 7px 0;
}
.rawFacts dt {
    font-weight: 700;
}
.rawFacts dd {
    margin: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    main > section,
    nav {
        padding-left: 12px;
        padding-right: 12px;
    }
    .hero h1 {
        font-size: 25px;
    }
    .sectionHead {
        display: block;
    }
    .sectionHead p {
        margin-top: -6px;
    }
    .needs,
    .cards {
        grid-template-columns: 1fr;
    }
    .communityRow {
        grid-template-columns: 1fr 1fr;
    }
    .communityRow b {
        grid-column: 1 / -1;
    }
    .controls {
        grid-template-columns: 1fr 1fr;
    }
    #map {
        height: 410px;
    }
    .matrix {
        grid-template-columns: 1fr 1fr;
    }
    .metric {
        padding: 7px 6px;
    }
    .verdict {
        grid-template-columns: 1fr;
    }
    .hero {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
    dialog {
        margin: auto 0 0 0;
        width: 100%;
        max-width: none;
        height: 94vh;
        max-height: none;
        border-radius: 18px 18px 0 0;
    }
    #detailBody {
        padding: 18px 12px;
    }
    .dimTitle {
        padding-right: 40px;
    }
}
@media (max-width: 370px) {
    .controls {
        grid-template-columns: 1fr;
    }
    .metric {
        font-size: 11px;
    }
    .metric b {
        font-size: 13px;
    }
}
.leaflet-tooltip {
    width: max-content;
    min-width: 190px;
    max-width: min(280px, calc(100vw - 36px));
    white-space: nowrap !important;
    writing-mode: horizontal-tb !important;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.45;
}
@media (max-width: 600px) {
    .leaflet-tooltip {
        min-width: 170px;
        max-width: calc(100vw - 36px);
    }
}
.rank.band-A {
    background: #d9eee4 !important;
    color: #17483b;
    border: 1px solid #86b6a2;
}
.rank.band-B {
    background: #e6eee9 !important;
    color: #315a4e;
    border: 1px solid #aec6bb;
}
.rank.band-C {
    background: #f5edcf !important;
    color: #6e5916;
    border: 1px solid #d8c475;
}
.rank.band-D {
    background: #f3e2dc !important;
    color: #7b4336;
    border: 1px solid #d1a493;
}
.rankMarker.band-A {
    background: #145c46 !important;
    color: #fff;
}
.rankMarker.band-B {
    background: #2e725e !important;
    color: #fff;
}
.rankMarker.band-C {
    background: #7a6722 !important;
    color: #fff;
}
.rankMarker.band-D {
    background: #875040 !important;
    color: #fff;
}
.actions button {
    background: #e4eee9;
    color: #173f36;
    border: 1px solid #8fb1a4;
}
.actions button:hover {
    background: #d6e6de;
}
.actions .secondary {
    background: #fff;
    color: #36574e;
    border-color: #c6d5cf;
}
.summaryVerdict {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0;
}
.summaryVerdict span {
    padding: 10px;
    border-radius: 10px;
    background: #f4f7f5;
}
.summaryDimensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.summaryDimension {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
}
.summaryDimension h3 {
    margin: 0;
}
.summaryDimension ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.summaryDimension li {
    margin: 6px 0;
    font-size: 14px;
}
.dimensionConclusion {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}
.scoreBreakdown { display:flex; gap:8px; align-items:flex-start; margin:6px 0 8px; font-size:13px; line-height:1.55; color:#53655f; }
.scoreBreakdown b { flex:0 0 auto; color:#263d36; font-size:13px; }
.dimensionTradeoff {
    margin: 10px 0 0;
    padding-top: 9px;
    border-top: 1px dashed var(--line);
    color: #7b4336;
    font-size: 13px;
    line-height: 1.5;
}
.supplyAlert {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #d1a493;
    border-radius: 10px;
    background: #f8ece8;
    color: #713a30;
    font-weight: 700;
}
.actionBadge,
.decisionAction {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
}
.action-优先 {
    background: #d9eee4 !important;
    color: #17483b !important;
}
.action-保留 {
    background: #e6eee9 !important;
    color: #315a4e !important;
}
.action-暂缓 {
    background: #f3e2dc !important;
    color: #7b4336 !important;
}
.supplyState {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}
.decisionAction {
    background: #eef3f0;
    color: #315a4e;
}
.excludedItem {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}
.excludedItem span {
    color: var(--muted);
}
.rankingToolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.rankingToolbar select { padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.mapLegend { display: flex; gap: 6px; flex-wrap: wrap; }
.mapLegend span { padding: 4px 7px; border-radius: 999px; color: #fff; font-size: 11px; }
.legendTop,.tone-top { background: #145c46 !important; }
.legendGood,.tone-good { background: #27664f !important; }
.legendMid,.tone-mid { background: #765b0c !important; }
.legendLow,.tone-low { background: #9a5549 !important; }
.tone-none { background: #77817d !important; }
.rankMarker { font-size: 12px; font-weight:800; }
.rankMarker.noSupply { border-style: dashed; }
.primaryRank { display:inline-block; margin-right:6px; color:#174d40; font-size:17px; font-weight:800; }
.cardHead > div:first-child > b { font-size:17px; }
.dualScores { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.scoreBox { position:relative; display:grid; grid-template-columns:1fr auto; gap:3px 8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#f7f9f7; }
.scoreBox span { color:var(--muted); font-size:12px; }
.scoreBox b { grid-row:2; font-size:22px; color:#173f36; }
.scoreBox em { grid-row:2; align-self:end; font-style:normal; font-weight:700; color:#36574e; }
.scoreBox.preference { background:#eef4f0; }
.keyFacts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.keyFacts span,.detailBasics > div { display:flex; flex-direction:column; gap:3px; padding:9px; background:#f5f7f5; border-radius:9px; }
.keyFacts small,.detailBasics small { color:var(--muted); }
.keyFacts b { font-size:15px; }
.floorSummary { margin:7px 0; color:#5d6e68; font-size:12px; }
.detailScores { max-width:480px; }
.detailBasics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0 20px; }
.detailBasics b { font-size:18px; }
.detailBasics span { color:var(--muted); font-size:12px; }
.dimensionScore { padding:4px 7px; border-radius:999px; background:#e7efe9; color:#17483b; font-size:13px; }
.summaryDimension h3 { font-size:15px; font-weight:650; }
.communityCard { border:1px solid var(--line); border-radius:11px; padding:12px; background:#fff; }
.communityHead { display:flex; justify-content:space-between; gap:12px; }
.communityHead div { display:flex; flex-direction:column; gap:3px; }
.communityHead small { color:var(--muted); }
.communityHead strong { font-size:18px; color:#174d40; }
.communityMetrics { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.communityMetrics span { font-size:12px; padding:6px; background:#f5f7f5; border-radius:7px; }
.communityDimensions { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.communityDimensions span { display:flex; gap:4px; padding:4px 6px; border:1px solid var(--line); border-radius:999px; font-size:11px; }
.communityPartial { border-style:dashed; background:#fafbfa; }
@media (max-width: 600px) {
    .summaryDimensions,
    .summaryVerdict {
        grid-template-columns: 1fr;
    }
    .rankingToolbar { align-items:flex-start; flex-direction:column; }
    .dualScores,.keyFacts { grid-template-columns:1fr 1fr; }
    .detailBasics,.communityMetrics { grid-template-columns:1fr 1fr; }
}
@media (max-width: 390px) {
    .cardHead { flex-wrap:wrap; gap:8px; }
    .cardHead > div:first-child { min-width:0; }
    .supplyState { text-align:left; white-space:normal; }
    .controls { grid-template-columns:1fr; }
    .scoreBox { padding:8px; }
}
@media (max-width: 360px) {
    .dualScores,.keyFacts,.detailBasics,.communityMetrics { grid-template-columns:1fr; }
}