@font-face { font-family: Beaufort; src: url('/fonts/BeaufortforLOL-Light.ttf'); font-weight: 300; font-style: normal; }
@font-face { font-family: Beaufort; src: url('/fonts/BeaufortforLOL-Regular.ttf'); font-weight: 400; font-style: normal; }
@font-face { font-family: Beaufort; src: url('/fonts/BeaufortforLOL-Medium.ttf'); font-weight: 500; font-style: normal; }
@font-face { font-family: Beaufort; src: url('/fonts/BeaufortforLOL-Bold.ttf'); font-weight: 700; font-style: normal; }
@font-face { font-family: Beaufort; src: url('/fonts/BeaufortforLOL-Heavy.ttf'); font-weight: 900; font-style: normal; }
:root { color-scheme: dark; --bg:#090d10; --panel:#11171b; --panel-2:#161e23; --line:#273138; --text:#edf5f3; --muted:#93a29f; --accent:#a0ffed; --accent-dark:#062d28; --danger:#ff8a8a; --identity-bg:#090a0a; --identity-ink:#f2eee4; --gold:#d1b77e; --gold-light:#e1cb98; --gold-muted:#8c7549; --gold-line:rgba(209,183,126,.46); --surface-void:#090b0b; --surface-panel:#101313; --surface-raised:#171b19; --border-subtle:rgba(224,211,176,.16); --border-gold:rgba(209,183,126,.58); --text-soft:#d8d1c2; --focus-gold:rgba(225,203,152,.28); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% -10%, #17302f 0, transparent 30%),var(--bg); color:var(--text); font-family:Beaufort,Segoe UI,sans-serif; }
.topbar { height:68px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(9,13,16,.82); backdrop-filter:blur(12px); position:sticky; top:0; z-index:5; }
.brand { color:var(--accent); text-decoration:none; font-size:20px; font-weight:700; letter-spacing:.16em; }
.main-nav { display:flex; align-items:center; gap:4px; margin-left:auto; margin-right:28px; }
.main-nav a { color:var(--muted); text-decoration:none; padding:9px 13px; border-radius:8px; font-size:14px; }
.main-nav a:hover,.main-nav a.active { color:var(--accent); background:rgba(160,255,237,.06); }
.stage,.privacy,.runtime { color:var(--muted); font-size:13px; }
main { width:min(1480px,calc(100% - 32px)); margin:0 auto; padding:44px 0 96px; }
.intro { max-width:760px; margin-bottom:38px; }
.compact-intro { margin-bottom:22px; max-width:900px; }
.compact-intro h1 { font-size:clamp(32px,4vw,52px); }
.home-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,410px); gap:18px; align-items:start; }
.home-map { margin:0; min-width:0; }
.map-sidebar { min-width:0; }
.map-sidebar .panel { padding:22px; }
.map-sidebar .panel-heading { align-items:flex-start; flex-direction:column; }
.map-sidebar .panel-heading>div { align-items:center; }
.map-sidebar .form-grid { grid-template-columns:1fr; margin-top:20px; }
.map-sidebar .file-field,.map-sidebar .field { min-height:118px; padding:18px; }
.map-sidebar .market-controls { grid-template-columns:1fr; }
.map-sidebar .lodging-tools { align-items:stretch; flex-direction:column; }
.map-sidebar .search-field { max-width:none; }
.map-sidebar .lodging-table-head,.map-sidebar .bonus-row { grid-template-columns:minmax(140px,1fr) 120px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:700; margin:0 0 12px; }
h1 { font-size:clamp(36px,5vw,64px); line-height:1.02; letter-spacing:-.025em; margin:0 0 18px; }
.intro>p:last-child,.section-title p,.processing p,.table-heading p { color:var(--muted); margin:4px 0 0; line-height:1.55; }
.panel,.table-panel { background:linear-gradient(145deg,rgba(22,30,35,.96),rgba(14,20,24,.96)); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 20px 70px rgba(0,0,0,.22); }
.panel-heading,.lodging-section,.result-heading,.table-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.panel-heading>div,.section-title { display:flex; align-items:center; gap:12px; }
.step { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--accent); border:1px solid #37645d; font-size:12px; }
h2,h3 { margin:0; }
.form-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; margin:28px 0 34px; }
.file-field,.field { border:1px solid var(--line); border-radius:12px; min-height:144px; padding:22px; background:rgba(255,255,255,.018); }
.file-field { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; cursor:pointer; transition:.2s; }
.file-field:hover,.file-field.drag { border-color:var(--accent); background:rgba(160,255,237,.055); }
.file-field input { position:absolute; opacity:0; pointer-events:none; }
.file-icon { color:var(--accent); font-size:28px; margin-bottom:8px; }
.file-field small,.field small { color:var(--muted); margin-top:8px; }
.field { display:flex; flex-direction:column; justify-content:center; }
.field>span,.compact-field>span { color:var(--muted); font-size:13px; margin-bottom:8px; }
input,select { width:100%; color:var(--text); background:#0b1114; border:1px solid #344149; border-radius:9px; padding:12px 13px; font:inherit; outline:none; }
input.reserved-workers::-webkit-outer-spin-button,
input.reserved-workers::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
input.reserved-workers { -moz-appearance:textfield; appearance:textfield; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(160,255,237,.08); }
#cp-budget { font-size:26px; color:var(--accent); font-weight:700; }
.market-section { border-top:1px solid var(--line); padding:26px 0; }
.market-controls { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:12px; align-items:end; margin-top:18px; }
.compact-field { display:flex; flex-direction:column; }
.market-output { min-height:44px; display:flex; align-items:center; justify-content:center; padding:10px 14px; border:1px solid #37645d; border-radius:9px; color:var(--accent); background:rgba(160,255,237,.045); font-weight:700; }
.advanced-market { margin-top:14px; color:var(--muted); }
.advanced-market summary { cursor:pointer; width:max-content; }
.advanced-market .check-field { margin-top:12px; }
.lodging-section { border-top:1px solid var(--line); padding-top:26px; }
button { font:inherit; cursor:pointer; }
.lodging-tools { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:18px 0 10px; }
.search-field { flex:1; max-width:440px; display:flex; align-items:center; gap:8px; padding-left:12px; border:1px solid #344149; border-radius:9px; background:#0b1114; color:var(--muted); }
.search-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(160,255,237,.08); }
.search-field input { border:0; box-shadow:none; padding-left:0; }
.check-field { display:flex; align-items:center; gap:8px; color:var(--muted); white-space:nowrap; }
.check-field input { width:16px; height:16px; accent-color:var(--accent); }
.lodging-table { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.lodging-table-head,.bonus-row { display:grid; grid-template-columns:minmax(180px,1fr) 190px; align-items:center; gap:16px; }
.lodging-table-head { padding:10px 14px; color:var(--muted); background:#0d1316; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.lodging-table-head span:last-child { text-align:center; }
.bonus-list { max-height:310px; overflow:auto; }
.bonus-row { padding:8px 14px; border-top:1px solid var(--line); color:var(--text); }
.bonus-row:first-child { border-top:0; }
.bonus-row:hover { background:rgba(160,255,237,.035); }
.bonus-row[hidden] { display:none; }
.bonus-row input { text-align:center; padding:9px 12px; }
.primary { width:100%; margin-top:26px; border:0; border-radius:11px; padding:16px 22px; background:var(--accent); color:#07110f; font-weight:700; display:flex; justify-content:center; gap:12px; }
.primary:hover { filter:brightness(.92); }
.primary:disabled { opacity:.5; cursor:wait; }
.message { margin-top:20px; padding:13px 15px; border-radius:9px; }
.error { color:#ffd5d5; background:#3b171a; border:1px solid #6a292e; }
.processing { margin-top:24px; display:flex; align-items:center; gap:18px; }
.processing[hidden] { display:none; }
.spinner { width:34px; height:34px; border:3px solid #28413d; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.optimization-overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(3,7,9,.62); backdrop-filter:blur(2px); }
.optimization-overlay[hidden] { display:none; }
.optimization-overlay .processing { display:block; }
.optimization-modal { width:min(520px,100%); max-height:min(720px,calc(100dvh - 48px)); overflow:auto; margin:0; padding:28px; border-color:#37645d; box-shadow:0 24px 90px rgba(0,0,0,.58); }
.optimization-modal-heading { display:flex; align-items:center; gap:16px; }
.optimization-modal-heading h2 { color:var(--text); }
.optimization-modal-heading p { color:var(--muted); margin:5px 0 0; }
.optimization-stages { display:grid; gap:8px; list-style:none; margin:26px 0 0; padding:0; }
.optimization-stage { display:flex; align-items:center; gap:12px; min-height:42px; padding:9px 12px; border:1px solid transparent; border-radius:9px; color:#82908d; transition:color .2s,background .2s,border-color .2s; }
.optimization-stage[data-status="running"] { color:var(--accent); border-color:#37645d; background:rgba(160,255,237,.065); }
.optimization-stage[data-status="completed"] { color:#8effae; }
.optimization-stage[data-status="error"] { color:var(--danger); border-color:#6a292e; background:rgba(106,41,46,.24); }
.optimization-stage-icon { display:grid; place-items:center; width:22px; min-width:22px; height:22px; font-weight:700; }
.optimization-stage[data-status="completed"] .optimization-stage-icon { color:#8effae; }
.optimization-stage[data-status="error"] .optimization-stage-icon { color:var(--danger); }
.optimization-stage-spinner { width:14px; height:14px; border:2px solid #28413d; border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.optimization-status { margin:20px 0 0; color:#8effae; font-weight:700; }
.optimization-error { margin:20px 0 0; padding:12px 14px; border:1px solid #6a292e; border-radius:9px; color:#ffd5d5; background:#3b171a; }
.optimization-dismiss { width:100%; margin-top:16px; }
[data-state="success"] .optimization-modal-heading .spinner { border-top-color:#8effae; animation:none; }
#result { margin-top:58px; }
.estimate-note { margin:20px 0; padding:14px 16px; border-left:3px solid #d9b96f; background:#2b271b; color:#d9d2bd; }
.empire-map-panel { margin:22px 0 18px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0a1013; }
.map-heading,.map-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 18px; }
.map-heading p,.map-footer p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.map-modes { display:flex; padding:3px; border:1px solid #344149; border-radius:10px; background:#070b0d; }
.map-modes button { border:0; border-radius:7px; padding:9px 14px; color:var(--muted); background:transparent; }
.map-modes button:hover { color:var(--accent); }
.map-modes button.active { color:#07110f; background:var(--accent); font-weight:700; }
.map-stage { position:relative; aspect-ratio:16/9; min-height:430px; max-height:720px; overflow:hidden; border-block:1px solid var(--line); background:radial-gradient(circle at 46% 52%,#17302f 0,#0e191c 44%,#080d10 100%); }
#empire-map { display:block; width:100%; height:100%; touch-action:none; cursor:grab; color:rgba(160,255,237,.055); user-select:none; }
#empire-map.dragging { cursor:grabbing; }
#map-content { --map-inverse-scale:1; }
.map-screen-space { transform:scale(var(--map-inverse-scale)); transform-origin:0 0; }
.map-grid { opacity:.14; }
.map-tile { opacity:1; image-rendering:auto; pointer-events:none; }
.map-tile.tile-pending { opacity:0; }
.map-tile.map-tile-ready { opacity:1; }
.map-ocean { pointer-events:none; }
.map-tile-failed { display:none; }
.map-tile-parent-fallback.map-tile-resolved { display:none; }
.map-world-connection { stroke:#d5dfdc; stroke-width:2; vector-effect:non-scaling-stroke; opacity:.62; pointer-events:none; }
.map-connection { stroke:#f0bb55; stroke-width:2.5; vector-effect:non-scaling-stroke; opacity:.96; pointer-events:none; }
.map-world-node,.map-world-plantzone { pointer-events:auto; }
.map-workerman-node-icon { pointer-events:none; }
.map-workerman-node-icon.muted { opacity:.72; filter:saturate(.72); }
.map-workerman-node-icon.selected { filter:drop-shadow(0 0 2px rgba(160,255,237,.9)); }
.map-workerman-node-icon.route { filter:drop-shadow(0 0 2px rgba(240,187,85,.8)); }
.map-world-node-icon,.map-plantzone-icon { vector-effect:non-scaling-stroke; stroke-width:1.25; }
.map-world-node-icon.exploration { fill:#9ba9a5; stroke:#172522; opacity:.82; }
.map-world-node-icon.special { fill:#72817e; stroke:#172522; opacity:.72; }
.map-world-node-icon.resource { fill:#597d74; stroke:#142a25; stroke-linecap:round; stroke-linejoin:round; opacity:.72; }
.map-plantzone-icon { fill:#6f9188; stroke:#142a25; stroke-linecap:round; stroke-linejoin:round; opacity:.82; }
.map-world-plantzone.selected .map-plantzone-icon { fill:#a0ffed; stroke:#062d28; opacity:1; }
.map-node-marker { pointer-events:auto; }
.map-node-icon { vector-effect:non-scaling-stroke; stroke-width:1.5; }
.map-node-icon.connection { fill:#d8e3df; stroke:#233d3a; }
.map-node-icon.production { fill:#a0ffed; stroke:#062d28; stroke-linecap:round; stroke-linejoin:round; }
.map-node-route-ring { fill:rgba(7,17,15,.28); stroke:#f0bb55; stroke-width:2; vector-effect:non-scaling-stroke; }
.map-node-route-ring.production { stroke:#a0ffed; stroke-width:2.5; }
.map-node-label,.map-plantzone-label,.map-town-label,.map-base-label { fill:#edf5f3; font-size:17px; paint-order:stroke; stroke:#081012; stroke-width:3px; stroke-linejoin:round; pointer-events:none; }
.map-node-label { font-size:14px; fill:#d7e3df; }
.map-plantzone-label { font-size:14px; fill:#cce5de; }
.map-town-icon { fill:#0b1718; stroke:#f0d184; stroke-width:2; vector-effect:non-scaling-stroke; }
.map-town-label { fill:#ffe3a0; font-size:18px; }
.map-base-label { fill:#f2fffb; font-size:15px; }
.map-collidable-label.collision-hidden,.utility-label { display:none!important; }
#map-content[data-map-tier="far"] .map-town:not(.major),
#map-content[data-map-tier="far"] .map-world-node,
#map-content[data-map-tier="far"] .map-world-plantzone,
#map-content[data-map-tier="far"] .map-base,
#map-content[data-map-tier="far"] .map-node-marker { display:none; }
#map-content[data-map-tier="far"] .map-town.major .map-marker-symbol { transform:scale(.42); transform-box:fill-box; transform-origin:center; }
.map-town.active .map-town-icon { fill:#183d37; stroke:#a0ffed; }
.map-town.active .map-workerman-node-icon { filter:drop-shadow(0 0 4px rgba(160,255,237,.95)); }
.map-base { cursor:pointer; outline:none; }
.map-base .base-core { fill:rgba(7,17,15,.82); stroke:#a0ffed; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.map-base .base-ring { fill:rgba(160,255,237,.08); stroke:#a0ffed; stroke-width:1.25; vector-effect:non-scaling-stroke; opacity:.92; }
.map-base .base-node-icon { pointer-events:none; filter:drop-shadow(0 0 3px rgba(0,0,0,.85)); }
.map-base .base-worker-badge { fill:#081012; stroke:#d9eee8; stroke-width:1; vector-effect:non-scaling-stroke; }
.map-base .base-worker-icon { pointer-events:none; }
.map-base.reference .base-core { stroke:#e8c36f; }
.map-base.reference .base-ring { stroke:#e8c36f; }
.map-base.maintained .base-ring { stroke:#f0d184; }
.map-base.maintained .base-core { stroke:#f0d184; }
.map-base.added .base-core { stroke:#6cff9e; }.map-base.added .base-ring{stroke:#6cff9e}
.map-base.removed .base-core { stroke:#ff7272; }.map-base.removed .base-ring{stroke:#ff7272}
.map-base.removed { opacity:.72; stroke-dasharray:4 3; }
.map-base.removed .base-ring { fill:rgba(255,114,114,.1); }
.map-base.maintained { opacity:.72; }
.map-base.worker-change .base-ring { stroke:#69aaff; stroke-width:4; }
.map-base.town-change .base-core { stroke:#c57bff; stroke-width:3; }
.map-base:focus .base-ring,.map-base:hover .base-ring { stroke-width:2; opacity:1; }
.map-controls { position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:5px; }
.map-controls button,.map-detail-close { width:34px; height:34px; border:1px solid #425158; border-radius:8px; color:var(--text); background:rgba(9,14,17,.9); font-weight:700; }
.map-controls button:hover,.map-detail-close:hover { color:var(--accent); border-color:var(--accent); }
.map-detail { position:absolute; top:14px; right:14px; width:min(330px,calc(100% - 72px)); padding:18px; border:1px solid #45645e; border-radius:12px; background:rgba(10,16,19,.96); box-shadow:0 16px 48px rgba(0,0,0,.48); }
.map-detail-close { position:absolute; right:10px; top:10px; }
.map-detail small { color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }.map-detail h4{font-size:18px;margin:8px 38px 14px 0}
.map-detail dl,.map-detail dd { margin:0; }.map-detail dl>div{padding:9px 0;border-top:1px solid var(--line)}.map-detail dt{color:var(--muted);font-size:11px;text-transform:uppercase}.map-detail dd{margin-top:4px}
.map-footer { min-height:54px; position:relative; }.map-footer p[data-state="UNAVAILABLE"]::before{content:"◌ ";color:#e8c36f}
.map-footer small { color:var(--muted); font-size:11px; }
.map-source-diagnostic { display:block; margin-top:4px; color:var(--accent)!important; }
.map-footer-diagnostics[hidden] { display:none; }
.map-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; font-size:12px; color:var(--muted); }.map-legend-item{display:inline-flex;align-items:center;gap:6px;padding:4px 5px;border:1px solid transparent;border-radius:7px;color:var(--muted);background:transparent;font:inherit;white-space:nowrap}.map-legend-item:hover,.map-legend-item:focus-visible,.map-legend-item.active{color:var(--text);border-color:#37645d;background:rgba(160,255,237,.08);outline:none}.map-legend-item b{min-width:1.2em;color:var(--text);font-size:11px}.map-legend i{width:9px;height:9px;border-radius:50%;background:#899b97}.map-legend i.added,.map-legend i.best{background:#6cff9e}.map-legend i.removed,.map-legend i.worst{background:#ff7272}.map-legend i.worker-change{background:#69aaff}.map-legend i.reference{background:#e8c36f}.map-legend i.town-change{background:#c57bff}
.map-diff-panel { position:absolute; right:0; bottom:calc(100% + 8px); z-index:25; width:min(430px,calc(100vw - 32px)); max-height:min(54vh,480px); overflow:auto; overscroll-behavior:contain; border:1px solid rgba(80,107,106,.72); border-radius:12px; background:rgba(7,13,15,.96); box-shadow:0 14px 36px rgba(0,0,0,.38); backdrop-filter:blur(14px); scrollbar-color:#47726c rgba(8,14,16,.72); scrollbar-width:thin; }
.map-diff-panel[hidden]{display:none}.map-diff-panel-inner{padding:12px}.map-diff-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 2px 9px;border-bottom:1px solid rgba(80,107,106,.38)}.map-diff-kicker{display:block;color:var(--accent);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.map-diff-panel h3{margin:4px 0 0;font-size:16px}.map-diff-panel h3 small{color:var(--muted);font-size:12px;font-weight:400}.map-diff-close{display:grid;place-items:center;width:28px;height:28px;border:1px solid #344149;border-radius:7px;color:var(--muted);background:transparent;font-size:20px;line-height:1}.map-diff-close:hover,.map-diff-close:focus-visible{color:var(--accent);border-color:var(--accent);outline:none}.map-diff-list{display:grid;gap:5px;list-style:none;margin:9px 0 0;padding:0}.map-diff-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;width:100%;padding:9px 10px;border:1px solid rgba(80,107,106,.3);border-radius:8px;color:var(--text);background:rgba(255,255,255,.025);text-align:left}.map-diff-row:hover,.map-diff-row:focus-visible{border-color:#6ba79b;background:rgba(160,255,237,.08);outline:none}.map-diff-row>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.map-diff-row small{grid-column:1;color:var(--muted);font-size:11px;margin-top:3px;min-width:0}.map-diff-row small span{display:block;overflow-wrap:anywhere;line-height:1.35}.map-diff-row-arrow{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--accent)}.map-diff-empty{padding:10px;color:var(--muted);font-size:12px}
.metrics { display:grid; grid-template-columns:1.35fr repeat(3,1fr); gap:12px; }
.metric { min-height:142px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; justify-content:center; }
.metric span,.metric small { color:var(--muted); }
.metric strong { font-size:30px; margin:8px 0 5px; }
.metric.hero { border-color:#37645d; background:linear-gradient(145deg,#15332f,#101d1d); }
.metric.hero strong { color:var(--accent); }
.reference-summary { display:flex; align-items:center; gap:24px; margin:18px 0 28px; color:var(--muted); flex-wrap:wrap; }
.reference-summary[hidden] { display:none; }
.reference-summary>div { display:flex; align-items:center; gap:7px; color:var(--text); }
.reference-summary img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.table-panel { padding:0; overflow:hidden; }
.table-heading { padding:22px 24px; }
.table-wrap { overflow:auto; max-height:670px; border-top:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:790px; }
th,td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; background:#0d1316; position:sticky; top:0; }
td:last-child,th:last-child { text-align:right; }
.worker-chip { display:inline-flex; align-items:center; gap:9px; }
.worker-chip img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.worker-chip span { display:flex; flex-direction:column; }
.worker-chip small { color:var(--muted); }
.badge { display:inline-block; margin-top:3px; width:max-content; padding:2px 6px; border-radius:4px; font-size:10px; font-style:normal; text-transform:uppercase; letter-spacing:.06em; }
.badge.real { color:var(--accent); background:#153a34; }
.badge.reference { color:#e1cb96; background:#37301d; }
@media(max-width:1050px) { .home-shell { grid-template-columns:1fr; }.map-sidebar .panel-heading { flex-direction:row; align-items:center; }.map-sidebar .form-grid,.map-sidebar .market-controls { grid-template-columns:1.3fr .7fr; }.map-sidebar .market-controls { grid-template-columns:1fr 1fr 1.2fr; }.map-sidebar .lodging-tools { align-items:center; flex-direction:row; }.map-sidebar .search-field { max-width:440px; } }
@media(max-width:800px) { main{padding-top:36px}.form-grid,.metrics,.market-controls,.map-sidebar .form-grid,.map-sidebar .market-controls{grid-template-columns:1fr}.panel-heading,.result-heading,.map-heading,.map-footer{align-items:flex-start;flex-direction:column}.privacy{display:none}.lodging-tools,.map-sidebar .lodging-tools{align-items:stretch;flex-direction:column}.search-field,.map-sidebar .search-field{max-width:none;width:100%}.lodging-table-head,.bonus-row,.map-sidebar .lodging-table-head,.map-sidebar .bonus-row{grid-template-columns:1fr 110px}.panel,.map-sidebar .panel{padding:20px}.metric{min-height:110px}.map-stage{min-height:390px;aspect-ratio:auto}.map-modes{width:100%}.map-modes button{flex:1}.map-legend{justify-content:flex-start} }
@media(max-width:520px) { .optimization-overlay { padding:14px; }.optimization-modal { max-height:calc(100dvh - 28px); padding:22px; } }

/* Nodes ranking */
.nodes-page { min-width:320px; }
body.nodes-page { height:100dvh; overflow:hidden; }
.nodes-main { width:min(1480px,calc(100% - 32px)); height:calc(100dvh - 68px); min-height:0; display:flex; flex-direction:column; overflow:hidden; padding:22px 0 16px; }
.nodes-intro { display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:28px; margin-bottom:12px; }
.nodes-intro>div:first-child { max-width:850px; }
.nodes-intro h1 { font-size:clamp(34px,4vw,52px); margin-bottom:4px; }
.nodes-intro p:last-child { color:var(--muted); line-height:1.45; margin:0; max-width:780px; }
.nodes-model-badge { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid #37645d; border-radius:11px; background:rgba(160,255,237,.045); white-space:nowrap; }
.nodes-model-badge>div { display:flex; flex-direction:column; gap:3px; }
.nodes-model-badge strong { color:var(--accent); font-size:12px; letter-spacing:.06em; }
.nodes-model-badge small { color:var(--muted); font-size:11px; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(160,255,237,.8); }
.nodes-toolbar { flex:0 0 auto; padding:0 22px 12px; border-bottom:1px solid var(--line); }
.nodes-toolbar-row { display:grid; grid-template-columns:minmax(260px,1.5fr) 140px 150px; gap:12px; align-items:end; }
.nodes-search { max-width:none; min-width:0; }
.nodes-select { display:flex; flex-direction:column; gap:7px; min-width:0; }
.nodes-select>span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }
.nodes-select select { padding:10px 11px; }
.nodes-market-info { display:flex; justify-content:space-between; gap:18px; margin-top:8px; color:var(--muted); font-size:11px; }
.nodes-market-info [data-state="stale"] { color:var(--warning); }
.quiet-button { border:1px solid #344149; border-radius:8px; padding:7px 10px; color:var(--muted); background:transparent; }
.quiet-button:hover { color:var(--accent); border-color:#37645d; }
.nodes-loading { display:flex; align-items:center; gap:16px; min-height:105px; margin-bottom:18px; }
.nodes-loading[hidden] { display:none; }
.nodes-loading p { color:var(--muted); margin:4px 0 0; }
.nodes-table-panel { display:flex; flex:1 1 auto; flex-direction:column; min-height:0; padding:0; overflow:hidden; }
.nodes-table-heading { display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:20px; padding:16px 22px 12px; }
.nodes-table-heading p { color:var(--muted); margin:5px 0 0; }
.table-count { color:var(--muted); font-size:13px; white-space:nowrap; }
.nodes-table-wrap { flex:1 1 auto; min-height:0; max-height:none; overflow:auto; overscroll-behavior:contain; border-top:0; }
.nodes-table { width:100%; min-width:1180px; border-collapse:collapse; table-layout:fixed; }
.nodes-table .node-col { width:245px; }.nodes-table .drops-col { width:320px; }.nodes-table .worker-col { width:168px; }.nodes-table .town-col { width:128px; }.nodes-table .cycles-col { width:112px; }.nodes-table .silver-col { width:125px; }.nodes-table .cp-col { width:118px; }.nodes-table .status-col { width:144px; }
.nodes-table th,.nodes-table td { padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; white-space:nowrap; }
.nodes-table th { top:0; z-index:2; text-transform:none; letter-spacing:0; font-size:13px; background:#0d1316; }
.nodes-table tbody tr:hover { background:rgba(160,255,237,.035); }
.nodes-table td { color:var(--text); }
.sort-button { display:inline-flex; align-items:center; gap:7px; padding:0; border:0; color:var(--muted); background:transparent; font:inherit; white-space:nowrap; }
.sort-button:hover,.sort-button[aria-current="true"] { color:var(--accent); }
.sort-indicator { width:10px; color:var(--accent); font-size:11px; }
.sort-button[aria-current="true"] .sort-indicator::after { content:"↑"; }.sort-button[data-direction="desc"] .sort-indicator::after { content:"↓"; }
.node-name,.town-name,.number,.worker-inline,.drop-line,.status-chip { white-space:nowrap; }
.node-name { color:var(--accent); font-size:15px; }
.drops-cell { padding-top:10px!important; padding-bottom:10px!important; }
.drop-line { display:flex; align-items:center; gap:8px; min-height:24px; color:var(--text); }
.drop-quantity { min-width:42px; color:var(--accent); text-align:right; font-variant-numeric:tabular-nums; }
.drop-icon { display:inline-grid; place-items:center; width:22px; height:22px; color:#d9c188; font-size:15px; }
.drop-icon img { display:block; width:22px; height:22px; object-fit:contain; }
.drop-icon.fallback { border:1px solid #796b45; border-radius:50%; font-size:11px; }
.worker-inline { display:inline-flex; align-items:center; gap:9px; }
.worker-inline img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.worker-inline .worker-copy { display:flex; flex-direction:column; gap:2px; }
.worker-inline small { color:var(--muted); font-size:10px; }
.worker-hover-trigger,.status-hover-trigger { cursor:help; font:inherit; }
.worker-hover-trigger { display:inline-flex; padding:0; border:0; color:inherit; background:transparent; text-align:left; }
.worker-hover-trigger:focus-visible,.status-hover-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.number { text-align:right; font-variant-numeric:tabular-nums; }
.silver-value { color:var(--accent); font-weight:700; }
.status-cell { text-align:center; }
.status-chip { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-width:108px; padding:7px 8px; border:0; border-radius:8px; font-size:12px; }
.status-chip i { display:grid; place-items:center; width:18px; height:18px; border-radius:50%; font-style:normal; font-weight:700; }
.status-chip.success { color:#a6f5be; background:rgba(79,193,111,.13); }.status-chip.success i { background:#347e4d; color:#e8ffec; }
.status-chip.warning { color:#f4ce79; background:rgba(201,143,46,.13); }.status-chip.warning i { background:#8c6729; color:#fff3cb; }
.status-chip.danger { color:#ffaaa5; background:rgba(211,68,68,.13); }.status-chip.danger i { background:#8e3535; color:#ffe8e6; }
.status-chip.neutral { color:var(--muted); background:rgba(147,162,159,.1); }.status-chip.neutral i { background:#43504e; color:#dbe5e2; }
.nodes-empty { padding:48px 22px; text-align:center; color:var(--muted); }
.nodes-hover-card { position:fixed; z-index:50; width:min(390px,calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; padding:16px; color:var(--text); background:linear-gradient(145deg,#162126,#0d1417); border:1px solid #31504e; border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.48); pointer-events:auto; }
.nodes-hover-card[hidden] { display:none; }
.nodes-hover-heading { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center; }
.nodes-hover-kicker { display:block; color:var(--accent); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.nodes-hover-card h3 { margin:3px 0 2px; color:#f2eee1; font-size:17px; }
.nodes-hover-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.4; white-space:normal; }
.nodes-worker-portrait { display:block; width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid #53716d; background:#202d30; }
.nodes-worker-portrait.fallback { display:grid; place-items:center; color:#d9c188; font-size:22px; }
.nodes-worker-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:14px; }
.nodes-worker-stats>div,.nodes-status-metrics>div { min-width:0; padding:8px; background:rgba(255,255,255,.045); border-radius:7px; }
.nodes-worker-stats span,.nodes-status-metrics span { display:block; color:var(--muted); font-size:10px; white-space:normal; }
.nodes-worker-stats strong,.nodes-status-metrics strong { display:block; margin-top:3px; color:#f2eee1; font-size:13px; white-space:normal; overflow-wrap:anywhere; }
.nodes-hover-section-title { margin:15px 0 7px; color:#d9c188; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.nodes-skill-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.nodes-skill { display:grid; grid-template-columns:30px minmax(0,1fr); gap:7px; align-items:center; min-width:0; padding:6px; border:1px solid rgba(160,255,237,.12); border-radius:7px; }
.nodes-skill-icon { display:grid; place-items:center; width:30px; height:30px; }
.nodes-skill-icon img { display:block; width:28px; height:28px; object-fit:contain; }
.nodes-skill-icon.fallback { color:#d9c188; border:1px solid #796b45; border-radius:50%; font-size:11px; }
.nodes-skill strong { display:block; color:#f2eee1; font-size:11px; white-space:normal; }
.nodes-skill small { display:block; margin-top:2px; color:var(--muted); font-size:10px; line-height:1.25; white-space:normal; }
.nodes-hover-muted { grid-column:1/-1; }
.nodes-status-card h3 { margin-top:4px; }
.nodes-status-card>p { margin-top:7px; }
.nodes-status-metrics { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:14px; }
@media(max-width:900px) { body.nodes-page { height:auto; overflow:auto; }.nodes-main { height:auto; min-height:0; overflow:visible; padding-top:24px; }.nodes-intro { align-items:flex-start; flex-direction:column; }.nodes-model-badge { width:max-content; }.nodes-toolbar-row { grid-template-columns:1fr 1fr; }.nodes-search { grid-column:1/-1; }.nodes-table-panel { display:block; }.nodes-table-wrap { min-height:320px; max-height:calc(100dvh - 300px); } }
@media(max-width:560px) { .topbar { padding-inline:14px; }.topbar .stage { display:none; }.main-nav { margin-right:0; }.main-nav a { padding-inline:9px; }.nodes-main { width:min(100% - 20px,1480px); padding-top:22px; }.nodes-toolbar { padding-inline:14px; }.nodes-toolbar-row { grid-template-columns:1fr; }.nodes-search { grid-column:auto; }.nodes-market-info { align-items:flex-start; flex-direction:column; }.nodes-table-wrap { max-height:calc(100dvh - 330px); }.nodes-table-heading { padding-inline:14px; }.nodes-hover-card { padding:13px; }.nodes-skill-grid,.nodes-status-metrics { grid-template-columns:1fr; } }

/* Home map workspace: the renderer owns the full area below the app bar. */
.home-page { height:100dvh; overflow:hidden; }
.home-main { position:relative; width:100%; height:calc(100dvh - 68px); margin:0; padding:0; overflow:hidden; }
.home-main .home-shell {
  --home-panel-open-width:clamp(390px,30vw,500px);
  --home-panel-active-width:var(--home-panel-open-width);
  --home-panel-gap:16px;
  position:relative;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
}
.home-main .home-shell:has(.map-sidebar[data-collapsed="true"]) { --home-panel-active-width:44px; }
.home-shell > .home-map { position:absolute; inset:0; min-width:0; height:100%; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; }
.home-map-viewport { width:100%; height:100%; min-height:0; max-height:none; aspect-ratio:auto; border:0; cursor:grab; }
.home-map-viewport:active { cursor:grabbing; }

.home-main .map-sidebar {
  position:absolute;
  z-index:30;
  top:var(--home-panel-gap);
  bottom:var(--home-panel-gap);
  left:var(--home-panel-gap);
  width:var(--home-panel-open-width);
  min-width:0;
  overflow:visible;
  border:1px solid rgba(80,107,106,.72);
  border-radius:14px;
  background:rgba(9,13,16,.93);
  box-shadow:0 18px 54px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
  transition:width .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.home-main .map-sidebar[data-collapsed="true"] { width:44px; border-color:transparent; background:transparent; box-shadow:none; backdrop-filter:none; }
.home-main .map-sidebar .panel { display:flex; flex-direction:column; height:100%; min-height:0; padding:0; overflow:hidden; border:0; border-radius:13px; box-shadow:none; background:transparent; transition:opacity .12s ease,transform .18s ease; }
.home-main .map-sidebar[data-collapsed="true"] .panel { opacity:0; transform:translateX(-16px); pointer-events:none; }
.panel-toggle { position:absolute; z-index:3; top:18px; right:-15px; display:grid; place-items:center; width:30px; height:44px; padding:0; border:1px solid #45605e; border-radius:0 10px 10px 0; color:var(--accent); background:rgba(8,14,16,.96); box-shadow:8px 8px 24px rgba(0,0,0,.3); font:700 25px/1 Segoe UI,sans-serif; }
.panel-toggle:hover,.panel-toggle:focus-visible { border-color:var(--accent); background:#10201f; outline:none; }
.map-sidebar[data-collapsed="true"] .panel-toggle { right:0; border-radius:10px; }

.home-main .map-sidebar .panel-heading { flex:none; flex-direction:row; align-items:center; padding:15px 16px 12px; border-bottom:1px solid rgba(39,49,56,.8); }
.home-main .map-sidebar .panel-heading h2 { font-size:20px; }
.home-main .map-sidebar form { display:flex; flex:1; flex-direction:column; min-height:0; }
.panel-content { flex:1; min-height:0; padding:14px 16px 18px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-color:#47726c rgba(8,14,16,.72); scrollbar-width:thin; }
.panel-content::-webkit-scrollbar { width:9px; }
.panel-content::-webkit-scrollbar-track { background:rgba(8,14,16,.72); border-radius:10px; }
.panel-content::-webkit-scrollbar-thumb { background:#47726c; border:2px solid rgba(8,14,16,.72); border-radius:10px; }
.panel-content::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.panel-actions { flex:none; padding:10px 16px 14px; border-top:1px solid var(--line); background:rgba(9,13,16,.97); box-shadow:0 -12px 24px rgba(4,8,10,.36); }
.panel-actions .action-heading { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.panel-actions .action-heading > div { display:flex; flex-direction:column; }
.panel-actions .action-heading strong { font-size:16px; }
.panel-actions .action-heading small { margin-top:1px; color:var(--muted); font-size:11px; }
.panel-actions .step { width:28px; height:28px; }
.panel-actions .primary { margin-top:0; padding:11px 16px; }
.panel-actions .message { margin:0 0 10px; }

.home-main .map-sidebar .form-grid { grid-template-columns:minmax(0,1fr) 155px; gap:12px; margin:0 0 20px; }
.home-main .map-sidebar .file-field,.home-main .map-sidebar .field { min-height:80px; padding:11px 12px; }
.home-main .map-sidebar .file-field { align-items:flex-start; text-align:left; }
.home-main .map-sidebar .file-icon { margin:0 0 3px; font-size:20px; }
.home-main .map-sidebar .file-field small,.home-main .map-sidebar .field small { margin-top:5px; font-size:11px; line-height:1.3; }
.home-main .map-sidebar .file-field[data-loaded="true"] { border-color:#37645d; background:rgba(160,255,237,.045); }
.home-main .map-sidebar #cp-budget { padding:8px 10px; font-size:21px; }
.home-main .market-section { padding:17px 0; }
.home-main .section-title h2 { font-size:19px; }
.home-main .section-title p { line-height:1.32; font-size:12px; }
.home-main .map-sidebar .market-controls { grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.home-main .map-sidebar .market-output { grid-column:1/-1; min-height:40px; padding:8px 12px; }
.home-main .advanced-market { margin-top:11px; font-size:13px; }
.home-main .lodging-section { padding-top:17px; }
.home-main .map-sidebar .lodging-tools { flex-direction:row; align-items:center; gap:10px; margin:12px 0 8px; }
.home-main .map-sidebar .search-field { max-width:none; }
.home-main .lodging-table { overflow:visible; border:0; border-radius:0; }
.home-main .lodging-table-head { display:none; }
.home-main .bonus-list {
  --lodging-columns:3;
  --lodging-rows:10;
  display:grid;
  grid-template-columns:repeat(var(--lodging-columns),minmax(0,1fr));
  grid-template-rows:repeat(var(--lodging-rows),minmax(36px,auto));
  grid-auto-flow:column;
  gap:6px;
  max-height:none;
  overflow:visible;
}
.home-main .map-sidebar .bonus-row { display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:5px; min-width:0; padding:4px 6px; border:1px solid rgba(39,49,56,.9); border-radius:8px; background:rgba(255,255,255,.015); }
.home-main .map-sidebar .bonus-row[hidden] { display:none; }
.home-main .map-sidebar .bonus-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.home-main .map-sidebar .bonus-row input { width:38px; min-width:0; height:30px; padding:4px 2px; text-align:center; }
.home-main .reserved-workers-section { margin-top:17px; padding-top:17px; border-top:1px solid var(--line); }
.home-main .reserved-workers-section .section-title { margin-bottom:0; }
.home-main .reserved-tools { margin-top:12px; }
.home-main .reserved-list { margin-bottom:2px; }

.home-map-viewport .map-floating { position:absolute; z-index:10; pointer-events:none; }
.home-map-viewport .map-floating > * { pointer-events:auto; }
.home-map-viewport .map-floating-top { top:16px; left:auto; right:16px; width:auto; padding:0; border:0; border-radius:12px; background:transparent; box-shadow:none; backdrop-filter:none; transition:none; }
.home-map-viewport .map-top-controls { left:16px; right:16px; width:auto; max-width:none; }
.home-map-viewport .map-hud-layout { display:grid; grid-template-columns:auto auto; justify-content:end; align-items:center; gap:14px; width:100%; }
.home-map-viewport .map-hud-utilities { display:flex; align-items:stretch; gap:8px; min-width:0; }
.home-map-viewport .map-import-clear-group { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; width:300px; height:44px; min-height:44px; flex:0 0 300px; border-radius:4px; background:rgba(7,13,15,.86); box-shadow:0 10px 36px rgba(0,0,0,.25); backdrop-filter:blur(12px); overflow:hidden; }
.home-map-viewport .map-import-clear-group .map-import-control,
.home-map-viewport .map-import-clear-group .current-clear-button { height:100%; min-height:0; padding:0 14px; border:0; border-radius:0; color:var(--text); background:transparent; box-shadow:none; backdrop-filter:none; cursor:pointer; line-height:1; }
.home-map-viewport .map-import-clear-group .map-import-control { display:grid; place-items:center; width:auto; min-width:0; padding:0; text-align:center; }
.home-map-viewport .map-import-control input { position:absolute; opacity:0; pointer-events:none; }
.home-map-viewport .map-import-clear-group .current-clear-button { width:auto; min-width:0; padding:0; border-left:1px solid rgba(209,183,126,.28); }
.home-map-viewport .map-import-control { height:100%; min-height:0; padding:0 14px; line-height:1; }
.home-map-viewport .map-import-label { display:block; line-height:1; }
.home-map-viewport .map-import-clear-group:focus-within { box-shadow:0 0 0 2px var(--focus-gold),0 10px 30px rgba(0,0,0,.24); outline:none; }
.home-map-viewport .map-import-clear-group .map-import-control:hover,
.home-map-viewport .map-import-clear-group .map-import-control:focus-within,
.home-map-viewport .map-import-clear-group .current-clear-button:hover:not(:disabled),
.home-map-viewport .map-import-clear-group .current-clear-button:focus-visible { color:var(--gold-light); background:rgba(209,183,126,.075); outline:none; }
.home-map-viewport .map-import-control strong { display:block; font-size:13px; white-space:nowrap; }
.home-map-viewport .current-clear-button { color:var(--muted); }
.home-map-viewport .current-clear-button:disabled { opacity:.52; cursor:not-allowed; }
.home-map-viewport .current-clear-button:disabled:hover { color:var(--muted); border-color:rgba(80,107,106,.72); }
.home-map-viewport .current-origin-dialog { position:absolute; top:76px; right:16px; z-index:25; width:min(330px,calc(100% - 32px)); padding:18px; border:1px solid #45645e; border-radius:12px; background:rgba(10,16,19,.97); box-shadow:0 16px 48px rgba(0,0,0,.48); color:var(--text); }
.home-map-viewport .current-origin-dialog h3 { margin:0 0 6px; font-size:18px; }
.home-map-viewport .current-origin-dialog p { margin:0 0 14px; color:var(--muted); font-size:13px; }
.home-map-viewport .current-origin-dialog label { display:block; margin-bottom:6px; color:var(--muted); font-size:12px; }
.home-map-viewport .current-origin-dialog select { width:100%; }
.current-origin-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.current-origin-actions .primary { width:auto; padding:10px 14px; }
.current-origin-actions .quiet-button { padding:10px 14px; }
.home-map-viewport .map-controls { display:none; }
.home-map-viewport .map-modes { display:flex; align-items:center; height:44px; min-height:44px; gap:0; justify-self:end; border:1px solid rgba(80,107,106,.72); border-radius:12px; background:rgba(7,13,15,.86); box-shadow:0 10px 36px rgba(0,0,0,.25); backdrop-filter:blur(12px); overflow:hidden; }
.home-map-viewport .map-modes button { height:100%; min-width:92px; min-height:0; padding:0 16px; border:0; border-radius:0; background:transparent; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.home-map-viewport .map-modes button + button { border-left:1px solid rgba(80,107,106,.4); }
.home-map-viewport .map-modes button.active { color:#07110f; background:var(--accent); font-weight:700; border-radius:7px; }
.home-map-viewport .map-modes button.active:hover,
.home-map-viewport .map-modes button.active:focus-visible { color:#07110f; background:var(--accent); }
.home-map-viewport .map-modes button:not(.active):hover,
.home-map-viewport .map-modes button:not(.active):focus-visible { color:var(--accent); background:rgba(160,255,237,.06); }
.home-map-viewport .economic-hud { top:76px; right:16px; min-width:156px; padding:9px 12px; border:1px solid rgba(80,107,106,.55); border-radius:10px; background:rgba(7,13,15,.84); box-shadow:0 8px 24px rgba(0,0,0,.22); backdrop-filter:blur(10px); color:var(--muted); pointer-events:none; }
.home-map-viewport .economic-hud .hud-title { display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.home-map-viewport .economic-hud strong { display:block; margin-top:2px; color:var(--accent); font-size:17px; line-height:1.15; }
.home-map-viewport .economic-hud .hud-delta { display:block; margin-top:3px; font-size:11px; }
.home-map-viewport .economic-hud .hud-delta.positive { color:#79ffa5; }
.home-map-viewport .economic-hud .hud-delta.negative { color:#ff8d91; }
.home-map-viewport .economic-hud .hud-delta.neutral { color:var(--muted); }
.home-map-viewport .economic-hud .hud-cp { display:block; margin-top:5px; color:var(--text); font-size:11px; }
.home-map-viewport .economic-hud .hud-cp.warning { color:#ff8d91; font-weight:700; }
.home-map-viewport .map-floating-top h3 { font-size:18px; }
.home-map-viewport .map-floating-top p { max-width:48vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-map-viewport .map-floating-bottom { right:16px; bottom:16px; left:auto; width:max-content; max-width:calc(100% - 32px); min-height:0; padding:8px 10px; border:1px solid rgba(80,107,106,.45); border-radius:10px; background:rgba(7,13,15,.72); backdrop-filter:blur(10px); }
.home-map-viewport .map-floating-bottom:has(.map-legend:empty) { display:none; }
.home-map-viewport .map-controls { top:16px; left:calc(var(--home-panel-active-width) + var(--home-panel-gap) * 2); z-index:12; transition:left .18s ease; }
.home-map-viewport .map-detail { top:76px; right:16px; z-index:20; }
.home-map-viewport .map-loading { bottom:28px; }
.home-map-viewport .map-diff-panel { right:0; }
.home-main > .processing,.home-main > #result { width:min(1480px,calc(100% - 32px)); margin-inline:auto; }
.home-main > #result { padding-bottom:96px; }

@media(max-width:900px) {
  .home-main .home-shell { --home-panel-open-width:min(380px,calc(100vw - 40px)); }
  .home-main .map-sidebar .form-grid { grid-template-columns:1fr; }
  .home-main .map-sidebar .file-field,.home-main .map-sidebar .field { min-height:76px; }
  .home-main .map-sidebar .lodging-tools { align-items:stretch; flex-direction:column; }
}

@media(max-width:560px) {
  .home-main .home-shell { --home-panel-open-width:min(360px,calc(100vw - 32px)); }
  .home-main .map-sidebar .panel-heading { padding-inline:14px; }
  .panel-content,.panel-actions { padding-inline:14px; }
  .home-map-viewport .map-hud-layout { grid-template-columns:1fr; gap:8px; }
  .home-map-viewport .map-hud-utilities { width:100%; }
  .home-map-viewport .map-hud-utilities .map-import-clear-group { width:100%; flex:1 1 auto; min-width:0; }
  .home-map-viewport .map-hud-utilities .map-import-clear-group .map-import-control { width:auto; flex:1 1 auto; min-width:0; }
  .home-map-viewport .map-hud-layout .map-modes { grid-column:1; width:100%; justify-self:stretch; }
  .home-map-viewport .map-modes button { flex:1; min-width:0; }
  .home-map-viewport .map-floating-bottom { display:block; left:16px; right:16px; width:auto; bottom:12px; padding:6px; }
  .home-map-viewport .map-legend { justify-content:flex-start; gap:3px; }
  .home-map-viewport .map-legend-item { padding:4px; font-size:11px; }
  .home-map-viewport .map-diff-panel { right:0; width:100%; max-height:46vh; }
}

/* Witcher-derived header composition: one visual surface continues from the
   fixed header into a masked fade over the map. The visual extent never
   changes layout or the header's physical height. */
.topbar {
  --header-height:84px;
  --header-visual-height:120px;
  --header-surface:rgba(3,4,4,.88);
  position:fixed;
  z-index:5;
  top:0;
  right:0;
  left:0;
  min-height:var(--header-height);
  padding:10px max(40px,calc((100vw - 1840px)/2)) 20px;
  display:flex;
  align-items:center;
  border:0;
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  isolation:isolate;
  pointer-events:none;
}
.topbar::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  left:0;
  height:var(--header-visual-height);
  pointer-events:none;
  background:linear-gradient(to bottom,
    var(--header-surface) 0%,
    var(--header-surface) 30%,
    rgba(3,4,4,.78) 48%,
    rgba(3,4,4,.58) 64%,
    rgba(3,4,4,.34) 80%,
    rgba(3,4,4,.12) 93%,
    rgba(3,4,4,0) 100%);
  -webkit-mask:linear-gradient(to bottom,#000 60%,#0000 100%);
  mask:linear-gradient(to bottom,#000 60%,#0000 100%);
}
.topbar > * { position:relative; z-index:1; pointer-events:auto; }
.brand {
  display:inline-flex;
  width:240px;
  align-items:baseline;
  gap:10px;
  color:var(--identity-ink);
  text-decoration:none;
  white-space:nowrap;
}
.brand::before {
  content:"◇";
  color:var(--gold);
  font-size:13px;
  line-height:1;
  transform:translateY(-1px);
}
.brand-maker {
  color:var(--gold-light);
  font-size:24px;
  font-weight:900;
  letter-spacing:.13em;
}
.brand-product {
  color:var(--gold-muted);
  font-size:15px;
  font-weight:500;
  letter-spacing:.17em;
}
.main-nav {
  display:flex;
  align-items:center;
  gap:50px;
  margin-left:auto;
  margin-right:50px;
}
.main-nav a,
.main-nav .nav-placeholder {
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 0;
  border-radius:0;
  color:rgba(242,238,228,.75);
  font-family:Beaufort,Segoe UI,sans-serif;
  font-size:18px;
  font-weight:500;
  letter-spacing:1.8px;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .18s ease;
}
.main-nav a::after {
  content:"";
  position:absolute;
  right:0;
  bottom:1px;
  left:0;
  height:1px;
  background:var(--gold-light);
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  transition:transform .2s ease,opacity .2s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active { color:var(--gold-light); outline:none; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.active::after { transform:scaleX(1); opacity:1; }
.main-nav .nav-placeholder { color:rgba(242,238,228,.42); cursor:default; }
.stage {
  color:rgba(242,238,228,.48);
  font-size:11px;
  font-weight:300;
  letter-spacing:.045em;
  white-space:nowrap;
}
.primary {
  background:var(--gold-light);
  color:#17130c;
  border:1px solid rgba(225,203,152,.74);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.primary:hover { filter:brightness(1.04); }

/* Keep the existing tab geometry and behavior; only their visual treatment changes. */
.home-map-viewport .map-modes {
  border-color:var(--gold-line);
  border-radius:8px;
  background:rgba(7,9,9,.88);
  box-shadow:0 10px 32px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);
}
.home-map-viewport .map-modes button + button { border-left-color:rgba(209,183,126,.22); }
.home-map-viewport .map-modes button.active {
  color:var(--gold-light);
  background:rgba(209,183,126,.13);
  border-radius:5px;
  box-shadow:inset 0 -2px 0 var(--gold);
}
.home-map-viewport .map-modes button.active:hover,
.home-map-viewport .map-modes button.active:focus-visible { color:var(--gold-light); background:rgba(209,183,126,.17); }
.home-map-viewport .map-modes button:not(.active):hover,
.home-map-viewport .map-modes button:not(.active):focus-visible { color:var(--gold-light); background:rgba(209,183,126,.06); }

/* The important HUD frames stay angular and inherit the separator family without loose crosses. */
.home-map-viewport .map-import-clear-group { border-radius:4px; }
.home-map-viewport .map-import-clear-group .map-import-control,
.home-map-viewport .map-import-clear-group .current-clear-button { border-radius:0; }
.home-map-viewport .map-modes { border-radius:4px; }
.home-map-viewport .map-modes button.active { border-radius:2px; }
.home-map-viewport .economic-hud,
.home-map-viewport .map-floating-bottom { border-radius:4px; }
.home-map-viewport .map-import-clear-group,
.home-map-viewport .map-modes,
.home-map-viewport .economic-hud,
.home-map-viewport .map-floating-bottom { border-color:transparent; }

/* Page content responds to the same canonical overlay, without changing the header itself. */
.home-page .home-main { height:100dvh; }
.home-page .home-main .map-sidebar,
.home-page .home-map-viewport .map-floating-top { top:104px; }
.home-page .home-map-viewport .economic-hud,
.home-page .home-map-viewport .map-detail { top:164px; }
.nodes-page .nodes-main { height:100dvh; padding-top:104px; }

@media(max-width:1366px) and (min-width:991px) {
  .brand { width:220px; }
  .main-nav { gap:20px; margin-right:20px; }
  .main-nav a,
  .main-nav .nav-placeholder { font-size:16px; }
}

@media(max-width:990px) and (min-width:576px) {
  .topbar { --header-height:76px; --header-visual-height:108px; padding:8px 20px 16px; }
  .brand { width:190px; }
  .brand-maker { font-size:20px; }
  .brand-product { font-size:13px; }
  .main-nav { gap:16px; margin-right:0; }
  .main-nav a,
  .main-nav .nav-placeholder { font-size:14px; letter-spacing:1.2px; }
  .stage { display:none; }
  .home-page .home-main .map-sidebar,
  .home-page .home-map-viewport .map-floating-top { top:92px; }
  .home-page .home-map-viewport .economic-hud,
  .home-page .home-map-viewport .map-detail { top:152px; }
  .nodes-page .nodes-main { padding-top:92px; }
}

@media(max-width:575px) {
  .topbar { --header-height:68px; --header-visual-height:96px; padding:8px 20px 16px; }
  .brand { width:auto; gap:6px; }
  .brand::before { font-size:10px; }
  .brand-maker { font-size:16px; letter-spacing:.1em; }
  .brand-product { font-size:10px; letter-spacing:.12em; }
  .main-nav { gap:14px; margin-right:0; }
  .main-nav a,
  .main-nav .nav-placeholder { min-height:34px; padding:6px 0; font-size:12px; letter-spacing:1px; }
  .main-nav .nav-placeholder,
  .stage { display:none; }
  .home-page .home-main .map-sidebar,
  .home-page .home-map-viewport .map-floating-top { top:84px; }
  .home-page .home-map-viewport .economic-hud,
  .home-page .home-map-viewport .map-detail { top:144px; }
  .nodes-page .nodes-main { height:100dvh; padding-top:84px; }
}

/* Phase 2: the Home editor uses the same dark-fantasy vocabulary as the header. */
.ornament {
  --ornament-line:rgba(209,183,126,.72);
  --ornament-node:var(--gold);
  position:relative;
  display:block;
  height:10px;
  flex:0 0 auto;
  pointer-events:none;
  background:radial-gradient(circle at 0 50%,var(--ornament-node) 0 1.5px,transparent 2.1px),radial-gradient(circle at 100% 50%,var(--ornament-node) 0 1.5px,transparent 2.1px),linear-gradient(90deg,var(--ornament-line),rgba(209,183,126,.2)) center/100% 1px no-repeat;
}
.ornament--short { width:64px; }
.ornament--medium { width:min(120px,100%); }
.ornament--long { width:min(168px,100%); }
/* Separador: the single shared divider system used for sidebar hierarchy. */
.ornament-divider { --ornament-glyph-size:8px; }
.ornament-center-glyph { position:absolute; left:50%; top:50%; width:var(--ornament-glyph-size,8px); height:var(--ornament-glyph-size,8px); box-sizing:border-box; transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--ornament-node); background:var(--surface-void); pointer-events:none; }
.ornament-frame { --ornament-line:rgba(209,183,126,.64); --ornament-node:var(--gold); position:relative; isolation:isolate; }
/* Borda 1: Separator glyph reused at a quieter frame scale (8px -> 6px). */
.ornament-frame--border-1 { --ornament-glyph-size:6px; }
/* Borda 2: complete angular frame used by the mode tabs and top-map controls. */
.ornament-frame--border-2 { --ornament-frame-motif-size:8px; overflow:hidden; }
#drop-zone.ornament-frame--border-2,
#current-clear-button.ornament-frame--border-2,
.map-modes.ornament-frame--border-2 { border-radius:4px; }
.ornament-frame::before { content:""; position:absolute; z-index:0; inset:0; box-sizing:border-box; border:1px solid rgba(209,183,126,.62); pointer-events:none; background:linear-gradient(90deg,var(--ornament-line),rgba(209,183,126,.16)) center top/100% 1px no-repeat,linear-gradient(90deg,var(--ornament-line),rgba(209,183,126,.16)) center bottom/100% 1px no-repeat; }
.ornament-frame::after { content:""; position:absolute; z-index:0; inset:2px; box-sizing:border-box; pointer-events:none; background:radial-gradient(circle at 0 0,var(--ornament-node) 0 2.5px,transparent 2.9px),radial-gradient(circle at 100% 0,var(--ornament-node) 0 2.5px,transparent 2.9px),radial-gradient(circle at 0 100%,var(--ornament-node) 0 2.5px,transparent 2.9px),radial-gradient(circle at 100% 100%,var(--ornament-node) 0 2.5px,transparent 2.9px); opacity:.82; }
.ornament-frame > * { z-index:1; }
.ornament-frame > *:not(.map-diff-panel) { position:relative; }
.ornament-frame .map-diff-panel { position:absolute; }
.ornament-border-2-motif { position:absolute; left:50%; top:50%; width:var(--ornament-frame-motif-size,8px); height:var(--ornament-frame-motif-size,8px); box-sizing:border-box; transform:translate(-50%,-50%) rotate(45deg); border:1px solid var(--ornament-node); background:var(--surface-void); pointer-events:none; }
.ornament-frame > .ornament-border-2-motif { position:absolute; z-index:2; }
.ornament-frame > .ornament-border-2-motif--top { top:0; }
.ornament-frame > .ornament-border-2-motif--bottom { top:auto; bottom:0; transform:translate(-50%,50%) rotate(45deg); }
.ornament-frame > .frame-ornament-center { position:absolute; z-index:2; }
.ornament-frame > .frame-ornament-center--top { top:0; }
.ornament-frame > .frame-ornament-center--bottom { top:auto; bottom:0; transform:translate(-50%,50%) rotate(45deg); }
.ornament-frame--short::before,
.ornament-frame--medium::before,
.ornament-frame--long::before { inset:0; }
.home-main .map-sidebar {
  border-color:var(--border-gold);
  background:linear-gradient(156deg,rgba(13,16,15,.985) 0%,rgba(8,10,10,.97) 72%,rgba(6,8,8,.96) 100%);
  box-shadow:0 24px 58px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,246,220,.035);
  backdrop-filter:blur(3px);
}
.home-main .map-sidebar .panel-heading {
  min-height:62px;
  padding:17px 18px 14px;
  border-bottom:0;
  background:linear-gradient(90deg,rgba(209,183,126,.055),transparent 48%);
}
.home-main .map-sidebar .panel-heading > div { width:100%; flex-direction:column; align-items:center; gap:9px; }
.home-main .map-sidebar .panel-heading h2 {
  color:var(--identity-ink);
  font-size:22px;
  font-weight:900;
  letter-spacing:.025em;
  text-align:center;
}
.home-main .map-sidebar .panel-ornament { width:100%; height:8px; opacity:.82; }
.home-main .panel-content {
  padding:16px 18px 18px;
  scrollbar-color:var(--gold-muted) rgba(8,10,10,.72);
}
.home-main .panel-content::-webkit-scrollbar-track { background:rgba(8,10,10,.72); }
.home-main .panel-content::-webkit-scrollbar-thumb { background:rgba(140,117,73,.7); border-radius:2px; }
.panel-toggle {
  border-color:var(--border-gold);
  border-radius:0 4px 4px 0;
  color:var(--gold-muted);
  background:rgba(10,12,11,.98);
  box-shadow:7px 8px 20px rgba(0,0,0,.3);
  font-size:0;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.panel-toggle-icon { display:block; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; }
.panel-toggle:hover,.panel-toggle:focus-visible { border-color:rgba(225,203,152,.72); background:#171711; color:var(--gold-light); outline:none; }
.map-sidebar[data-collapsed="true"] .panel-toggle { border-radius:4px; }
.map-sidebar[data-collapsed="true"] .panel-toggle-icon { transform:rotate(180deg); }

.home-main .map-sidebar .form-grid { gap:11px; margin-bottom:19px; }
.home-main .map-sidebar .field {
  min-height:84px;
  padding:12px;
  border-color:var(--border-subtle);
  border-radius:3px;
  background:linear-gradient(145deg,rgba(255,247,224,.025),rgba(255,255,255,.008));
}
.home-main .map-sidebar .field>span,
.home-main .map-sidebar .compact-field>span {
  color:var(--text-soft);
  font-size:12px;
  font-weight:500;
  letter-spacing:.035em;
}
.home-main .map-sidebar .field small { color:rgba(216,209,194,.58); }
.home-main .map-sidebar #cp-budget {
  min-height:45px;
  padding:7px 10px;
  border-color:rgba(209,183,126,.48);
  border-radius:2px;
  color:var(--gold-light);
  background:#090b0b;
  box-shadow:inset 0 0 0 1px rgba(255,244,213,.025);
  font-size:23px;
  font-weight:900;
  letter-spacing:.03em;
}
.home-main .map-sidebar input,
.home-main .map-sidebar select {
  border-color:var(--border-subtle);
  border-radius:3px;
  color:var(--identity-ink);
  background:#0a0d0d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.home-main .map-sidebar input::placeholder { color:rgba(216,209,194,.42); }
.home-main .map-sidebar input:focus,
.home-main .map-sidebar select:focus {
  border-color:var(--gold-light);
  box-shadow:0 0 0 2px var(--focus-gold),inset 0 1px 0 rgba(255,255,255,.025);
}
.home-main .market-section,
.home-main .lodging-section,
.home-main .reserved-workers-section { border-top:0; border-color:var(--border-subtle); }
.home-main .lodging-section { display:block; }
.home-main .market-section { padding:19px 0; }
.home-main .section-title {
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 0 9px;
  border-bottom:0;
}
.home-main .section-title > div { min-width:0; flex:1 1 auto; }
.home-main .section-ornament { width:100%; height:9px; margin:6px 0 1px; opacity:.82; }
.home-main .market-section > .section-ornament { margin-bottom:14px; }
.home-main .reserved-workers-section > .section-ornament { margin-bottom:14px; }
.home-main .section-title .step,
.home-main .panel-actions .step {
  width:auto;
  height:auto;
  padding:0;
  border:0;
  border-radius:0;
  color:var(--gold);
  background:transparent;
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
}
.home-main .section-title h2 { color:var(--text-soft); font-size:18px; font-weight:700; letter-spacing:.025em; }
.home-main .section-title p { color:rgba(216,209,194,.57); font-weight:300; }
.home-main .map-sidebar .market-controls { gap:9px; margin-top:13px; }
.home-main .map-sidebar .market-output {
  min-height:39px;
  border-color:rgba(209,183,126,.36);
  border-radius:2px;
  color:var(--gold-light);
  background:linear-gradient(90deg,rgba(209,183,126,.085),rgba(209,183,126,.025));
  font-weight:700;
}
.home-main .advanced-market {
  padding-top:11px;
  border-top:1px solid rgba(224,211,176,.1);
  color:rgba(216,209,194,.68);
}
.home-main .advanced-market summary {
  color:var(--text-soft);
  font-weight:500;
  letter-spacing:.02em;
  list-style:none;
}
.home-main .advanced-market summary::-webkit-details-marker { display:none; }
.home-main .advanced-market summary::before { content:"›"; display:inline-block; width:13px; color:var(--gold); font-size:17px; line-height:0; transform:translateY(1px); transition:transform .16s ease; }
.home-main .advanced-market[open] summary::before { transform:translateY(1px) rotate(90deg); }
.home-main .check-field { color:rgba(216,209,194,.68); }
.home-main .check-field input { accent-color:var(--gold); }

.home-main .map-sidebar .lodging-tools { margin:13px 0 10px; }
.home-main .map-sidebar .search-field {
  min-height:38px;
  border-color:var(--border-subtle);
  border-radius:3px;
  background:#0a0d0d;
  color:var(--gold-muted);
}
.home-main .map-sidebar .search-field:focus-within { border-color:var(--gold-light); box-shadow:0 0 0 2px var(--focus-gold); }
.home-main .map-sidebar .bonus-row {
  border-color:rgba(224,211,176,.13);
  border-radius:2px;
  background:rgba(255,247,224,.018);
}
.home-main .map-sidebar .bonus-row:hover { border-color:rgba(209,183,126,.38); background:rgba(209,183,126,.05); }
.home-main .map-sidebar .bonus-row > span { color:rgba(237,245,243,.82); }
.home-main .map-sidebar .bonus-row input { border-radius:2px; }
.home-main .reserved-workers-section { margin-top:19px; padding-top:19px; }

@media(max-width:800px) {
  .home-main .section-ornament { width:100%; }
}
@media(max-width:520px) {
  .home-main .section-ornament { height:7px; margin-top:5px; }
  .ornament-frame::after { opacity:.62; }
  .ornament--long::after { display:none; }
}

.home-main .panel-actions {
  padding:13px 18px 17px;
  border-top:1px solid var(--border-subtle);
  background:linear-gradient(180deg,rgba(255,247,224,.018),rgba(0,0,0,.09));
}
.home-main .panel-actions .primary {
  position:relative;
  min-height:46px;
  margin:0;
  border:1px solid var(--border-gold);
  border-radius:2px;
  color:var(--gold-light);
  background:linear-gradient(100deg,rgba(39,33,21,.97),rgba(23,22,17,.98) 52%,rgba(39,33,21,.97));
  box-shadow:inset 0 1px 0 rgba(255,245,215,.08),0 8px 18px rgba(0,0,0,.18);
  font-weight:700;
  letter-spacing:.025em;
  overflow:hidden;
}
.home-main .panel-actions .primary::before,
.home-main .panel-actions .primary::after {
  content:"";
  position:absolute;
  top:7px;
  bottom:7px;
  width:5px;
  border-top:1px solid rgba(225,203,152,.68);
  border-bottom:1px solid rgba(225,203,152,.68);
}
.home-main .panel-actions .primary::before { left:7px; border-left:1px solid rgba(225,203,152,.68); }
.home-main .panel-actions .primary::after { right:7px; border-right:1px solid rgba(225,203,152,.68); }
.home-main .panel-actions .primary:hover,
.home-main .panel-actions .primary:focus-visible {
  color:#17130c;
  border-color:var(--gold-light);
  background:linear-gradient(100deg,#d1b77e,#e1cb98 52%,#d1b77e);
  outline:none;
}
.home-main .panel-actions .primary:focus-visible { box-shadow:0 0 0 3px var(--focus-gold),inset 0 1px 0 rgba(255,255,255,.22); }

/* Home visual consolidation: warm interaction states for UI chrome only.
   Semantic map colors remain owned by the map renderer and its status classes. */
.home-page {
  --ui-hover:var(--gold-light);
  --ui-active:var(--gold-light);
  --ui-focus:var(--gold-light);
  --ui-disabled:rgba(216,209,194,.58);
  --ui-surface-hover:rgba(209,183,126,.075);
}

.home-page .map-import-control,
.home-page .current-clear-button,
.home-page .map-import-clear-group,
.home-page .map-modes button,
.home-page .map-legend-item,
.home-page .map-diff-close,
.home-page .map-diff-row,
.home-page .panel-toggle,
.home-page .advanced-market summary,
.home-page .bonus-row,
.home-page .panel-actions .primary,
.home-page .map-sidebar input,
.home-page .map-sidebar select {
  transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease;
}

/* Top controls keep Borda 2 and use the same warm interaction language. */
.home-page .home-map-viewport .map-import-clear-group .map-import-control,
.home-page .home-map-viewport .map-import-clear-group .current-clear-button {
  color:var(--text-soft);
}
.home-page .home-map-viewport .map-import-clear-group .map-import-control:hover,
.home-page .home-map-viewport .map-import-clear-group .map-import-control:focus-within,
.home-page .home-map-viewport .map-import-clear-group .current-clear-button:hover:not(:disabled),
.home-page .home-map-viewport .map-import-clear-group .current-clear-button:focus-visible {
  color:var(--ui-hover);
  background:var(--ui-surface-hover);
  outline:none;
}
.home-page .home-map-viewport .map-import-clear-group .current-clear-button:disabled {
  color:var(--ui-disabled);
  border-color:rgba(209,183,126,.24);
  background:rgba(12,13,12,.72);
  opacity:.82;
}
.home-page .home-map-viewport .map-import-clear-group .current-clear-button:disabled:hover {
  color:var(--ui-disabled);
  border-color:rgba(209,183,126,.24);
  box-shadow:none;
}
.home-page .home-map-viewport .map-modes button {
  color:rgba(242,238,228,.68);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.home-page .home-map-viewport .map-modes button.active,
.home-page .home-map-viewport .map-modes button.active:hover,
.home-page .home-map-viewport .map-modes button.active:focus-visible {
  color:var(--ui-active);
  background:rgba(209,183,126,.15);
  box-shadow:inset 0 -2px 0 var(--gold);
  outline:none;
}
.home-page .home-map-viewport .map-modes button:not(.active):hover,
.home-page .home-map-viewport .map-modes button:not(.active):focus-visible {
  color:var(--ui-hover);
  background:var(--ui-surface-hover);
  outline:none;
}

/* Compact legend remains a status control; only its semantic dots keep status colors. */
.home-page .home-map-viewport .map-legend-item {
  color:rgba(216,209,194,.72);
  border-radius:2px;
}
.home-page .home-map-viewport .map-legend-item span {
  text-transform:uppercase;
  letter-spacing:.055em;
}
.home-page .home-map-viewport .map-legend-item:hover,
.home-page .home-map-viewport .map-legend-item:focus-visible,
.home-page .home-map-viewport .map-legend-item.active {
  color:var(--ui-hover);
  border-color:rgba(209,183,126,.52);
  background:var(--ui-surface-hover);
  outline:none;
}

/* Expanded legend panel: angular, restrained, and shared by Atual/Otimizado. */
.home-page .home-map-viewport .map-diff-panel {
  border-color:var(--border-gold);
  border-radius:3px;
  background:linear-gradient(145deg,rgba(14,16,15,.985),rgba(7,9,9,.98));
  box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,246,220,.035);
  scrollbar-color:var(--gold-muted) rgba(8,10,10,.72);
}
.home-page .home-map-viewport .map-diff-panel-inner { padding:13px; }
.home-page .home-map-viewport .map-diff-panel-heading {
  padding:2px 2px 10px;
  border-bottom-color:rgba(209,183,126,.26);
}
.home-page .home-map-viewport .map-diff-kicker {
  color:var(--gold);
  letter-spacing:.14em;
}
.home-page .home-map-viewport .map-diff-panel h3 { color:var(--identity-ink); }
.home-page .home-map-viewport .map-diff-panel h3 small { color:var(--gold-muted); }
.home-page .home-map-viewport .map-diff-close {
  position:relative;
  width:30px;
  height:30px;
  border-color:rgba(209,183,126,.42);
  border-radius:3px;
  color:var(--gold);
  background:rgba(209,183,126,.025);
  font-size:0;
}
.home-page .home-map-viewport .map-diff-close::before,
.home-page .home-map-viewport .map-diff-close::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:1px;
  background:currentColor;
}
.home-page .home-map-viewport .map-diff-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.home-page .home-map-viewport .map-diff-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.home-page .home-map-viewport .map-diff-close:hover,
.home-page .home-map-viewport .map-diff-close:focus-visible {
  color:var(--gold-light);
  border-color:var(--gold-light);
  background:var(--ui-surface-hover);
  outline:none;
}
.home-page .home-map-viewport .map-diff-row {
  padding:10px 11px;
  border-color:rgba(224,211,176,.14);
  border-radius:2px;
  background:rgba(255,247,224,.018);
}
.home-page .home-map-viewport .map-diff-row:hover,
.home-page .home-map-viewport .map-diff-row:focus-visible {
  color:var(--identity-ink);
  border-color:rgba(209,183,126,.54);
  background:rgba(209,183,126,.075);
  outline:none;
}
.home-page .home-map-viewport .map-diff-row-arrow { color:var(--gold); }

/* Economic HUD is a quiet Borda 1 information card, not a cyan status badge. */
.home-page .home-map-viewport .economic-hud {
  min-width:156px;
  padding:10px 13px;
  border-color:transparent;
  border-radius:3px;
  background:rgba(8,10,10,.9);
  box-shadow:0 14px 30px rgba(0,0,0,.36);
}
.home-page .home-map-viewport .economic-hud-content { position:relative; z-index:1; }
.home-page .home-map-viewport .economic-hud .hud-title {
  color:var(--gold-muted);
  font-size:10px;
  letter-spacing:.12em;
}
.home-page .home-map-viewport .economic-hud strong {
  color:var(--gold-light);
  font-size:17px;
}
.home-page .home-map-viewport .economic-hud .hud-delta.positive { color:#8fdda7; }
.home-page .home-map-viewport .economic-hud .hud-delta.negative { color:#df8f86; }
.home-page .home-map-viewport .economic-hud .hud-delta.neutral { color:var(--gold-muted); }
.home-page .home-map-viewport .economic-hud .hud-cp { color:var(--text-soft); }

/* Sidebar controls stay content-first while adopting the shared focus language. */
.home-page .map-sidebar input:hover,
.home-page .map-sidebar select:hover {
  border-color:rgba(209,183,126,.38);
}
.home-page .map-sidebar input:focus,
.home-page .map-sidebar select:focus,
.home-page .map-sidebar .search-field:focus-within {
  border-color:var(--ui-focus);
  box-shadow:0 0 0 2px var(--focus-gold),inset 0 1px 0 rgba(255,255,255,.025);
  outline:none;
}
.home-page .advanced-market summary::before {
  content:"";
  width:7px;
  height:7px;
  margin:0 7px 0 2px;
  border-top:1px solid var(--gold);
  border-right:1px solid var(--gold);
  transform:translateY(-1px) rotate(45deg);
  transition:transform .16s ease;
}
.home-page .advanced-market[open] summary::before { transform:translateY(-1px) rotate(135deg); }
.home-page .advanced-market summary:hover,
.home-page .advanced-market summary:focus-visible {
  color:var(--gold-light);
  outline:none;
}

/* CTA keeps its own role while sharing the warm angular treatment. */
.home-page .panel-actions .primary:hover,
.home-page .panel-actions .primary:focus-visible {
  color:#17130c;
  border-color:var(--gold-light);
  box-shadow:0 0 0 3px var(--focus-gold),0 10px 24px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22);
}
.home-page .panel-actions .primary:active { transform:translateY(1px); filter:brightness(.96); }

@media(max-width:800px) {
  .home-page .home-map-viewport .map-diff-panel { border-radius:3px; }
  .home-page .home-map-viewport .map-diff-panel-inner { padding:11px; }
}

/* Home finishing pass: interface vocabulary is uppercase; content remains readable. */
.home-page .map-sidebar .panel-heading h2,
.home-page .map-import-control #file-title,
.home-page .current-clear-button,
.home-page .panel-actions .primary,
.home-page .advanced-market summary {
  text-transform:uppercase;
  letter-spacing:.09em;
}
.home-page .map-sidebar .panel-heading h2 { letter-spacing:.11em; }
.home-page .map-import-control #file-title { font-size:12px; letter-spacing:.075em; }
.home-page .advanced-market summary { font-size:12px; }
.home-page .home-map-viewport .map-diff-panel h3 {
  text-transform:uppercase;
  letter-spacing:.075em;
}

/* Witcher-derived bottom composition: the same single visual surface is
   inverted so its fade rises from the fixed base into the map. */
.home-page {
  --home-bottom-band-height:56px;
  --home-bottom-visual-height:84px;
  --home-bottom-surface:rgba(3,4,4,.88);
  --home-bottom-hud-offset:calc(var(--home-bottom-band-height) + 8px);
  --home-bottom-sidebar-offset:100px;
}
.home-page .home-bottom-band {
  position:absolute;
  z-index:4;
  right:0;
  bottom:0;
  left:0;
  height:var(--home-bottom-band-height);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:20px;
  pointer-events:none;
  isolation:isolate;
  background:transparent;
}
.home-page .home-bottom-band::before {
  content:"";
  position:absolute;
  z-index:0;
  top:auto;
  right:0;
  bottom:0;
  left:0;
  height:var(--home-bottom-visual-height);
  pointer-events:none;
  background:linear-gradient(to top,
    var(--home-bottom-surface) 0%,
    var(--home-bottom-surface) 30%,
    rgba(3,4,4,.78) 48%,
    rgba(3,4,4,.58) 64%,
    rgba(3,4,4,.34) 80%,
    rgba(3,4,4,.12) 93%,
    rgba(3,4,4,0) 100%);
  -webkit-mask:linear-gradient(to top,#000 60%,#0000 100%);
  mask:linear-gradient(to top,#000 60%,#0000 100%);
}
.home-page .home-bottom-band-ornament {
  position:relative;
  z-index:1;
  width:calc(100vw - 32px);
  max-width:none;
  height:10px;
  opacity:.8;
}
.home-page .home-map-viewport .map-floating-bottom {
  z-index:12;
  bottom:var(--home-bottom-hud-offset);
}
.home-page .home-map-viewport .map-diff-panel {
  bottom:calc(100% + 10px);
}
.home-page .home-main .map-sidebar { bottom:var(--home-bottom-sidebar-offset); }

@media(max-width:800px) {
  .home-page {
    --home-bottom-band-height:48px;
    --home-bottom-visual-height:72px;
    --home-bottom-hud-offset:calc(var(--home-bottom-band-height) + 8px);
    --home-bottom-sidebar-offset:82px;
  }
  .home-page .home-bottom-band { padding-bottom:15px; }
  .home-page .home-bottom-band-ornament { width:calc(100vw - 24px); }
}

@media(max-width:560px) {
  .home-page {
    --home-bottom-band-height:40px;
    --home-bottom-visual-height:60px;
    --home-bottom-hud-offset:calc(var(--home-bottom-band-height) + 6px);
    --home-bottom-sidebar-offset:64px;
  }
  .home-page .home-bottom-band { padding-bottom:11px; }
  .home-page .home-bottom-band-ornament { width:calc(100vw - 24px); height:8px; opacity:.66; }
  .home-page .home-map-viewport .map-floating-bottom { right:12px; left:12px; max-width:calc(100% - 24px); }
}