@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink:#18211f; --muted:#68736e; --paper:#f1eee7; --panel:#fbfaf6; --line:#d7d7cc; --acid:#d8ed47; --rust:#c95739; --sage:#6f806f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Space Grotesk', sans-serif; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(#adb2a9 0.65px, transparent .65px); background-size:7px 7px; mix-blend-mode:multiply; }
.shell { max-width:1440px; margin:auto; padding:34px 44px 72px; position:relative; }
.topbar { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--ink); padding-bottom:20px; }
.brand-mark { width:39px; height:39px; display:grid; place-items:center; background:var(--acid); font-size:27px; line-height:1; font-weight:700; transform:rotate(-8deg); }
.eyebrow,.kicker { font:500 10px 'DM Mono', monospace; letter-spacing:.08em; text-transform:uppercase; margin:0 0 5px; color:var(--muted); }
h1 { font-size:20px; line-height:1; margin:0; letter-spacing:-.04em; }
.header-status { display:flex; align-items:center; gap:8px; font:500 11px 'DM Mono', monospace; text-transform:uppercase; color:var(--sage); }
.header-status span:first-child { margin-left:0; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#9bad20; box-shadow:0 0 0 4px #e6edb9; }
.hero-line { display:flex; justify-content:space-between; align-items:end; padding:68px 8px 45px; gap:40px; }
h2 { font-size:clamp(44px,6vw,86px); line-height:.9; letter-spacing:-.075em; font-weight:600; margin:0; }
h2 em { font-style:normal; color:var(--rust); }
.intro { max-width:310px; line-height:1.5; font-size:14px; margin:0 4% 5px 0; color:#53605b; }
.workspace { display:grid; grid-template-columns:304px 1fr; min-height:600px; border:1px solid var(--line); background:var(--panel); }
.control-panel { padding:25px 23px; border-right:1px solid var(--line); }
.panel-heading { display:flex; align-items:center; gap:9px; margin-bottom:19px; }
.panel-heading span { color:var(--rust); font:500 11px 'DM Mono',monospace; }
h3 { margin:0; font-size:17px; letter-spacing:-.035em; }
.upload-zone { border:1px dashed #adb6aa; min-height:123px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; text-align:center; transition:background .2s, border-color .2s; }
.upload-zone:hover { background:#f2f4df; border-color:var(--rust); }
.upload-zone input { display:none; }
.upload-icon { font-size:28px; line-height:1; color:var(--rust); margin-bottom:6px; }
.upload-zone strong { font-size:13px; }
.upload-zone small { font:11px 'DM Mono',monospace; color:var(--muted); margin-top:5px; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 9px; margin-top:22px; }
.field-grid label { display:flex; flex-direction:column; gap:5px; }
.field-grid span { font:10px 'DM Mono',monospace; color:var(--muted); }
input { font:13px 'DM Mono',monospace; color:var(--ink); background:transparent; border:0; border-bottom:1px solid #aeb4aa; padding:6px 0; outline:none; width:100%; }
input:focus { border-color:var(--rust); }
.hint { color:var(--muted); font-size:11px; line-height:1.45; margin:17px 0 0; }
.second { margin-top:38px; }
.third { margin-top:38px; }
.search-box { display:flex; align-items:center; gap:8px; border-bottom:1px solid #aeb4aa; padding:3px 0; }
.search-box span { font-size:22px; color:var(--rust); }
.search-box input { border:0; }
.filter-row { display:flex; gap:6px; margin:18px 0; }
.filter { border:1px solid var(--line); background:transparent; padding:7px 8px; color:var(--muted); font:10px 'DM Mono',monospace; cursor:pointer; }
.filter b { font-weight:400; color:var(--ink); margin-left:3px; }
.filter.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.filter.active b { color:var(--acid); }
.text-button { border:0; border-bottom:1px solid var(--ink); background:none; padding:0 0 4px; color:var(--ink); font:11px 'DM Mono',monospace; cursor:pointer; }
.text-button span { color:var(--rust); margin-left:6px; }
.map-stage { min-width:0; display:flex; flex-direction:column; background:#dfe1d5; }
.map-toolbar,.map-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font:10px 'DM Mono',monospace; color:var(--muted); }
.map-toolbar { background:var(--panel); border-bottom:1px solid var(--line); }
.map-toolbar div { display:flex; align-items:center; gap:7px; color:var(--ink); }
.legend-x { color:var(--rust); font:bold 22px 'Space Grotesk'; line-height:.5; }
.map-canvas { position:relative; overflow:hidden; flex:1; min-height:520px; background-color:#1a1a1a; }
#map-image { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
#map-image.ready { display:block; }
.map-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:#69766e; }
.map-empty[hidden] { display:none; }
.empty-cross { font-size:70px; line-height:.7; font-weight:400; color:rgba(201,87,57,.5); transform:rotate(10deg); }
.map-empty strong { font-size:16px; }
.map-empty span { font:11px 'DM Mono',monospace; }
.markers { position:absolute; inset:0; pointer-events:none; }
.bluemap-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#1a1a1a; }
.view-switch { display:flex; gap:6px; }
.view-button { border:1px solid var(--line); background:var(--paper); color:var(--muted); padding:5px 10px; font:10px 'DM Mono',monospace; cursor:pointer; }
.view-button.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.marker { pointer-events:auto; position:absolute; width:27px; height:27px; transform:translate(-50%,-50%); border:0; background:var(--rust); color:#fff; clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%); cursor:pointer; display:grid; place-items:center; font-weight:700; font-size:22px; line-height:1; transition:transform .15s; }
.marker:hover,.marker.selected { transform:translate(-50%,-50%) scale(1.3); z-index:5; }
.marker-tooltip { position:absolute; z-index:10; min-width:205px; max-width:270px; background:var(--ink); color:#fff; padding:13px 14px; box-shadow:5px 5px 0 rgba(201,87,57,.6); pointer-events:none; }
.marker-tooltip strong { display:block; color:var(--acid); font-size:14px; margin-bottom:7px; }
.marker-tooltip span { display:block; font:10px/1.5 'DM Mono',monospace; color:#d4d8cc; }
.archive { margin-top:58px; }
.archive-heading { display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid var(--ink); padding-bottom:13px; }
.archive-heading h3 { font-size:29px; }
.archive-heading > span { font:11px 'DM Mono',monospace; color:var(--muted); }
.archive-heading-right { display:flex; align-items:center; gap:18px; }
.range-toggle { display:flex; align-items:center; gap:8px; font:11px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); cursor:pointer; user-select:none; }
.range-toggle input { width:15px; height:15px; accent-color:var(--rust); cursor:pointer; border:0; background:transparent; padding:0; }
.range-toggle.checked { color:var(--rust); }
.villager-list { margin-top:17px; border:1px solid var(--line); border-bottom:0; background:var(--panel); }
.villager-row { display:flex; gap:18px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s; }
.villager-row:hover { background:#eef1d8; }
.villager-row.focused { background:#e8edbe; box-shadow:inset 3px 0 0 var(--rust); }
.villager-row.out-of-range { opacity:.65; }
.row-info { flex:1; min-width:0; }
.row-top { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.row-coords { font:12px 'DM Mono',monospace; color:var(--ink); }
.card-name { font-size:15px; font-weight:600; }
.card-tag { font:9px 'DM Mono',monospace; text-transform:uppercase; color:var(--rust); border:1px solid var(--rust); padding:1px 5px; }
.row-meta { font:11px 'DM Mono',monospace; color:var(--muted); margin-top:5px; }
.row-map { flex:0 0 262px; }
.row-map .card-map-slot { display:none; }
.row-map .card-map-slot:not([hidden]) { display:block; }
.card-focus-box { border:1px solid var(--ink); background:#101512; box-shadow:4px 4px 0 rgba(201,87,57,.55); }
#villager-bluemap-crop { width:262px; height:172px; border:0; display:block; background:#1a1a1a; }
.empty-archive { padding:22px 16px; font:11px 'DM Mono',monospace; color:var(--muted); }
.confirm-button { flex:0 0 auto; border:1px solid var(--ink); background:var(--acid); color:var(--ink); font:11px 'DM Mono',monospace; padding:8px 12px; cursor:pointer; }
.card-status { font:9px 'DM Mono',monospace; text-transform:uppercase; color:var(--sage); margin-left:auto; }
.card-status.pending { color:var(--rust); }
.confirm-button:hover { background:var(--rust); border-color:var(--rust); color:#fff; }
.server-box { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.analysis-status { font:500 10px 'DM Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.analysis-status.busy { color:var(--rust); }
.analysis-status.error { color:#e5484d; }
.analyze-button { border:1px solid var(--ink); background:var(--ink); color:var(--acid); padding:9px 15px; font:600 12px 'Space Grotesk',sans-serif; cursor:pointer; transition:background .2s, color .2s, transform .1s; }
.analyze-button:hover { background:var(--rust); border-color:var(--rust); color:#fff; transform:translateY(-1px); }
.analyze-button:disabled { opacity:.55; cursor:wait; transform:none; }
.analyze-button span { display:inline-block; font-size:14px; line-height:0; margin-left:4px; }
.analyze-button span.spinning { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.marker.confirmed { background:#9aa39b; opacity:.75; }
@media (max-width:520px) { .header-status{font-size:0}.villager-row{flex-wrap:wrap}.row-map{flex:1 1 100%}#villager-bluemap-crop{width:100%} }