#unifiedCropMap { margin: 1rem auto 2rem; max-width: 1480px; padding: 1.15rem; border: 1px solid var(--line, #d8e0da); border-radius: 18px; background: var(--panel, #fff); color: var(--ink, #193e35); }
#unifiedCropMap * { box-sizing: border-box; }
.mapV2Intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,300px); gap: 1rem; align-items: start; }
.mapV2Intro h2 { margin: 0; font-size: clamp(1.25rem,2vw,1.7rem); }
#mapV2Answer { margin: .55rem 0 .25rem; font-size: clamp(1.1rem,2vw,1.55rem); font-weight: 750; line-height: 1.3; }
.mapV2SnapshotNote { margin: 0; color: var(--muted, #5c716a); font-size: .9rem; }
.mapV2Steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; padding: 0; margin: 1rem 0; list-style: none; counter-reset: mapstep; }
.mapV2Steps li { counter-increment: mapstep; border: 1px solid var(--line, #d8e0da); border-radius: 10px; padding: .65rem .7rem; min-height: 3.8rem; color: var(--muted, #5c716a); font-size: .84rem; }
.mapV2Steps li::before { content: counter(mapstep) ". "; color: var(--ink, #193e35); font-weight: 750; }
.mapV2Controls { display: grid; grid-template-columns: auto minmax(130px,210px) auto minmax(140px,1fr) minmax(180px,240px); align-items: end; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--line, #d8e0da); }
.mapV2Date strong { display: block; font-size: 1.3rem; line-height: 1.2; }
.mapV2Date span,.mapV2Controls label span { display: block; color: var(--muted, #5c716a); font-size: .78rem; }
.mapV2Controls input,.mapV2Controls select,.mapV2Controls button { min-height: 42px; }
.mapV2Controls input[type=date],.mapV2Controls select,.mapV2Controls button,.mapV2DistrictYear { border: 1px solid var(--line, #b9c9c0); border-radius: 8px; background: var(--panel, #fff); color: inherit; padding: .55rem .7rem; font: inherit; }
.mapV2Controls button { background: #15523f; color: #fff; font-weight: 700; cursor: pointer; }
.mapV2Timeline { grid-column: 1 / -1; }
.mapV2Timeline input { width: 100%; accent-color: #17624b; }
.mapV2Months { display: flex; justify-content: space-between; gap: .15rem; color: var(--muted, #5c716a); font-size: .75rem; }
.mapV2Main { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,.8fr); gap: .9rem; align-items: start; margin-top: .35rem; }
#mapV2Canvas { height: min(67vh,680px); min-height: 380px; border: 1px solid var(--line, #d8e0da); border-radius: 12px; overflow: hidden; background: #e6eff1; }
.mapV2MapHeader { position: absolute; z-index: 500; top: .65rem; left: 3.8rem; display: flex; gap: .5rem; flex-wrap: wrap; pointer-events: none; }
.mapV2MapHeader > * { border-radius: 8px; background: rgba(255,255,255,.95); color: #173e34; padding: .45rem .65rem; box-shadow: 0 1px 5px #0002; font-size: .84rem; font-weight: 700; }
.mapV2MapStage { background: #173e34 !important; color: white !important; }
.mapV2Panel { border: 1px solid var(--line, #d8e0da); border-radius: 12px; padding: 1rem; }
.mapV2Panel h3 { margin: .1rem 0 .5rem; font-size: 1.25rem; }
.mapV2Panel .mapV2Delta { margin: .15rem 0 .4rem; font-size: 2rem; font-weight: 800; line-height: 1.1; }
.mapV2Panel .mapV2Fact { display: flex; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 1px solid var(--line, #e1e8e3); font-size: .9rem; }
.mapV2Panel .mapV2Fact span:first-child { color: var(--muted, #5c716a); }
.mapV2Panel .mapV2Implications p { margin: .45rem 0; font-size: .88rem; }
.mapV2Chart { width: 100%; height: 90px; margin: .45rem 0; }
.mapV2Unavailable { padding: .65rem; border-left: 3px solid #a36d38; background: color-mix(in srgb, #a36d38 9%, transparent); font-size: .86rem; }
.mapV2Biggest { margin-top: .9rem; }
.mapV2Biggest h3 { margin: .2rem 0 .45rem; font-size: 1rem; }
.mapV2Biggest ol { padding-left: 1.4rem; margin: 0; }
.mapV2Biggest li { padding: .28rem 0; }
.mapV2Biggest button,.mapV2Crumbs button { border: 0; padding: .1rem; background: none; color: #145542; text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.mapV2Crumbs { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.mapV2Crumbs span { color: var(--muted, #5c716a); }
.mapV2Legend { display: flex; gap: .5rem 1rem; flex-wrap: wrap; margin-top: .65rem; color: var(--muted, #5c716a); font-size: .82rem; }
.mapV2Swatch { display: inline-block; width: .8rem; height: .8rem; margin-right: .25rem; border: 1px solid #6d7c75; vertical-align: -.1rem; }
.mapV2Status { min-height: 1.3rem; margin: .45rem 0 0; color: var(--muted, #5c716a); font-size: .82rem; }
.mapV2Freshness { margin:.35rem 0 .7rem; padding:.55rem .75rem; border-left:4px solid #39715b; border-radius:.3rem; background:#edf6f0; color:#244b3c; font-size:.82rem; font-weight:650; }
.mapV2Freshness.isStale { border-color:#b53e32; background:#fae8e5; color:#79271f; }
.mapV2AccuracyLink { display:inline-block; margin:.15rem 0 .4rem; font-weight:700; }
.mapV2Calendar { margin:1rem 0; padding:.75rem; border:1px solid var(--line,#d8e0da); border-radius:.65rem; }
.mapV2CalendarTrack { position:relative; height:14px; margin:.65rem 0 .25rem; background:#e4e9e5; border-radius:8px; overflow:visible; }
.mapV2CalendarTrack > i:not(.mapV2CalendarMarker) { position:absolute; top:0; height:14px; border-radius:3px; }
.mapV2CalendarTrack > .mapV2CalendarMarker { position:absolute; top:-4px; width:3px; height:22px; background:#1d3128; border:1px solid #fff; z-index:2; }
.mapV2CalendarMonths { display:flex; justify-content:space-between; color:var(--muted,#5c716a); font-size:.66rem; }
.mapV2Calendar p { margin:.45rem 0 0; font-size:.78rem; color:var(--muted,#5c716a); }
.mapV2Fact small { display:block; margin-top:.2rem; color:var(--muted,#5c716a); font-size:.72rem; }
.mapV2Experimental { display: inline-block; border-radius: 999px; padding: .18rem .5rem; background: #fff1cf; color: #664600; font-size: .75rem; font-weight: 700; }
#unifiedCropMap[hidden],#mapV2DistrictYearLabel[hidden] { display: none !important; }
@media (prefers-color-scheme: dark) {
 #unifiedCropMap { --panel:#17231f; --ink:#ecf4ef; --muted:#b6c5bd; --line:#41534a; background:#17231f; color:#ecf4ef; }
 .mapV2Controls input[type=date],.mapV2Controls select,.mapV2Controls button:not(#mapV2Play) { background:#22332c; color:#ecf4ef; }
 .mapV2Biggest button,.mapV2Crumbs button { color:#9cdbbd; }
 .mapV2Freshness { background:#20392d; color:#d9f1e2; }
 .mapV2Freshness.isStale { background:#4a2925; color:#ffd9d4; }
}
@media (max-width: 760px) {
 #unifiedCropMap { padding: .75rem; margin: .6rem .5rem 1rem; }
 .mapV2Intro { grid-template-columns: 1fr; }
 .mapV2Steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .mapV2Controls { grid-template-columns: 1fr 1fr; }
 .mapV2Controls .mapV2Date,.mapV2Timeline { grid-column: 1 / -1; }
 .mapV2Main { grid-template-columns: 1fr; }
 #mapV2Canvas { min-height: 330px; height: 55vh; }
 .mapV2Panel { order: 2; }
}
@media (max-width: 420px) { .mapV2Controls { grid-template-columns: 1fr; } .mapV2Controls > * { grid-column:1 !important; } .mapV2Steps li { min-height: 4.2rem; } }
.mapV2TableWrap { max-width:100%; overflow-x:auto; }
.mapV2Biggest table { width:100%; border-collapse:collapse; font-size:.82rem; }
.mapV2Biggest th,.mapV2Biggest td { padding:.45rem .35rem; border-bottom:1px solid var(--line,#d8e0da); text-align:left; vertical-align:top; }
.mapV2Biggest th { color:var(--muted,#5c716a); font-size:.72rem; }
.mapV2Biggest button { font-weight:700; }
.mapV2MapLabel { background:transparent; border:0; }
.mapV2MapLabel span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid #26342d; border-radius:4px; padding:2px 5px; background:rgba(255,255,255,.94); color:#14251d; box-shadow:0 1px 3px #0005; font-size:11px; font-weight:800; text-align:center; }
@media (prefers-color-scheme:dark) { .mapV2MapLabel span { background:rgba(20,31,26,.94); color:#f4faf6; border-color:#d1e0d6; } }
.mapV2CroplandToggle{display:flex;align-items:center;gap:.55rem;border:1px solid #c9d8d0;border-radius:.55rem;padding:.55rem .7rem;color:#23483d;background:#fff;font-weight:650;white-space:nowrap}
.mapV2CroplandToggle input{width:1.05rem;height:1.05rem;accent-color:#24733b}
.mapV2WorldCoverTile{image-rendering:auto}