*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:#10110f;color:#eee9db}
body{display:grid;grid-template-rows:64px 38px 1fr}

.topbar{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 16px;background:rgba(19,20,17,.97);border-bottom:1px solid rgba(255,255,255,.09);box-shadow:0 8px 25px rgba(0,0,0,.22)}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.04em}
.brand-dot{width:10px;height:10px;border-radius:50%;background:#b4533c;box-shadow:0 0 16px rgba(180,83,60,.6)}
.brand strong{display:block;font-size:14px}
.brand small{display:block;margin-top:2px;font-size:11px;color:#989487}
.toolbar{display:flex;gap:8px;align-items:center}
.search-wrap{height:34px;min-width:220px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#151611}
.search-icon{color:#7f7b70;font-size:16px;line-height:1}
.search-wrap input{width:180px;border:0;outline:0;background:transparent;color:#eee9db;font:inherit;font-size:12px}
.search-clear{width:22px;min-width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;color:#8f8b80;font-size:17px;line-height:20px}
.search-clear:hover{background:rgba(255,255,255,.08);color:#eee9db}
.search-wrap input::placeholder{color:#777369}
.search-wrap:focus-within{border-color:#6f6a5e;background:#181914}
button{height:34px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:#24251f;color:#f2efe1;cursor:pointer;font-weight:650}
button:hover{background:#303128}
button.primary{background:#7d3528;border-color:#a84c3a}
button.primary:hover{background:#913d2d}
button.danger{background:#4d211d;border-color:#74342d;color:#ffd8d2}
button.icon-btn{width:32px;min-width:32px;padding:0;font-size:20px;line-height:1}

.category-legend{position:relative;z-index:32;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 14px;background:rgba(16,17,14,.98);border-bottom:1px solid rgba(255,255,255,.07);overflow-x:auto;white-space:nowrap}
.legend-item{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#b8b3a7}
.legend-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,248,235,.75);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.legend-title{color:#e0dccf;font-weight:650;margin-right:2px}
.legend-separator{width:1px;height:16px;background:rgba(255,255,255,.12);flex:none}
.legend-info-icon{width:15px;height:15px;display:inline-grid;place-items:center}
.legend-info-icon svg{width:15px;height:15px;display:block}
.legend-info-icon .icon-fill{fill:var(--legend-color)}
.legend-info-icon .icon-stroke{stroke:#f2ecdf;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.legend-info-icon .icon-dark{stroke:rgba(25,25,22,.9);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

.map-viewport{position:relative;overflow:hidden;cursor:grab;touch-action:none;user-select:none;background:radial-gradient(circle at center,rgba(255,255,255,.025),transparent 55%),#0d0e0c}
.map-viewport.dragging{cursor:grabbing}
.map-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
#mapImage{display:block;max-width:none;pointer-events:none;box-shadow:0 0 45px rgba(0,0,0,.45)}

.marker-screen-layer{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
.marker{position:absolute;transform:translate(-50%,-50%) scale(var(--zoom-factor,1));width:38px;height:38px;pointer-events:auto;cursor:pointer;z-index:2;transform-origin:center}
.marker-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--core-size,10px);height:var(--core-size,10px);border-radius:50%;background:var(--marker-color,#aaa);border:1.5px solid rgba(255,248,235,.96);box-shadow:0 0 0 2px rgba(0,0,0,.30),0 0 11px color-mix(in srgb,var(--marker-color) 72%,transparent);transition:width .12s ease,height .12s ease,filter .12s ease}
.marker-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid color-mix(in srgb,var(--marker-color) 86%,white 14%);box-shadow:0 0 7px color-mix(in srgb,var(--marker-color) 38%,transparent);opacity:0}
.marker.level-3 .ring-1{opacity:.86;width:27px;height:27px}
.marker.level-4 .ring-1{opacity:.94;width:30px;height:30px}
.marker.level-4 .ring-2{opacity:.58;width:38px;height:38px}
.marker:hover .marker-core{filter:brightness(1.18)}

.info-blip{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;display:grid;place-items:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.info-blip svg{display:block;width:100%;height:100%;overflow:visible}
.info-blip .icon-fill{fill:var(--marker-color,#aaa)}
.info-blip .icon-stroke{stroke:rgba(255,248,235,.96);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.info-blip .icon-dark{stroke:rgba(25,25,22,.88);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.marker.kind-warning .info-blip{width:30px;height:30px}
.marker.kind-hostile .info-blip{width:29px;height:29px}
.marker.kind-camp .info-blip{width:31px;height:31px}
.marker:not(.kind-loot) .marker-core,
.marker:not(.kind-loot) .marker-ring{display:none}
.marker.kind-loot .info-blip{display:none}


.marker-tooltip{position:absolute;left:50%;bottom:28px;transform:translateX(-50%) translateY(3px) scale(calc(1 / var(--zoom-factor,1)));transform-origin:bottom center;min-width:185px;max-width:300px;padding:10px 11px;border-radius:9px;background:rgba(16,17,14,.97);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 24px rgba(0,0,0,.4);opacity:0;visibility:hidden;pointer-events:none;transition:.12s ease;z-index:30}
.marker:hover .marker-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(calc(1 / var(--zoom-factor,1)))}
.marker-tooltip strong{display:block;font-size:12px;color:#f3efe2;margin-bottom:4px}
.marker-tooltip .meta{display:block;font-size:10px;color:#8e8a7f;margin-bottom:5px}
.marker-tooltip .loot,.marker-tooltip .kind-badge{display:inline-block;font-size:10px;font-weight:750;padding:2px 6px;border-radius:999px;background:rgba(255,255,255,.07);color:#ddd8ca;margin-bottom:6px}
.marker-tooltip .kind-badge{border:1px solid color-mix(in srgb,var(--marker-color) 45%,transparent)}
.marker-tooltip .desc{display:block;font-size:11px;line-height:1.45;color:#aaa69a;white-space:normal}

.help,.status,.connection-badge{position:absolute;z-index:20;background:rgba(18,19,16,.86);border:1px solid rgba(255,255,255,.1);box-shadow:0 7px 22px rgba(0,0,0,.24);backdrop-filter:blur(8px)}
.help{left:14px;bottom:14px;padding:10px 12px;border-radius:10px;font-size:12px;line-height:1.6;color:#aaa79c;max-width:330px}
.help b{color:#e7e3d6}
.status{right:14px;bottom:14px;padding:8px 11px;border-radius:8px;font-size:12px;color:#d8d4c8}
.connection-badge{right:14px;top:14px;padding:7px 10px;border-radius:8px;font-size:11px;color:#d8d4c8}
.connection-badge.online{border-color:rgba(102,157,108,.45);color:#a8c9aa}
.connection-badge.local{border-color:rgba(201,155,69,.45);color:#d8bc83}
.connection-badge.error{border-color:rgba(181,75,60,.5);color:#db9c92}

.context-menu{position:fixed;z-index:80;min-width:190px;background:#171813;border:1px solid rgba(255,255,255,.13);border-radius:10px;box-shadow:0 16px 35px rgba(0,0,0,.42);padding:6px}
.context-menu.hidden{display:none}
.context-menu button{width:100%;display:block;text-align:left;border:0;background:transparent;height:auto;padding:9px 10px;border-radius:7px;font-weight:550;color:#e9e5d8}
.context-menu button:hover{background:#292a23}
.context-menu button.danger-item{color:#e7a49a}
.context-sep{height:1px;background:rgba(255,255,255,.08);margin:5px 4px}

.hidden{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.54);display:flex;align-items:center;justify-content:center;z-index:90}
.modal-card{width:min(500px,calc(100vw - 24px));background:#181914;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;box-shadow:0 20px 45px rgba(0,0,0,.42)}
.key-card{width:min(410px,calc(100vw - 24px))}
.key-card p{font-size:12px;line-height:1.55;color:#aaa69a;margin-top:0}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.modal-head h3{margin:0}
.modal-card label{display:block;margin-bottom:10px;font-size:13px;color:#e7e3d6}
.modal-card input,.modal-card textarea,.modal-card select{width:100%;margin-top:6px;background:#0f100d;color:#f0ecdf;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:10px;outline:none}
.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus{border-color:#8e4537}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modal-actions{display:flex;align-items:center;gap:8px;margin-top:12px}
.modal-actions .spacer{flex:1}

.color-row{display:flex;align-items:flex-end;gap:16px;padding:4px 0 10px}
.color-label{margin:0!important;width:125px}
.color-label input[type=color]{height:40px;padding:4px;cursor:pointer}
.default-color-check{display:flex!important;align-items:center;gap:8px;margin:0!important;padding-bottom:8px;color:#aaa69a!important}
.default-color-check input{width:auto;margin:0}

.loot-preview-wrap{display:flex;align-items:center;gap:12px;padding:10px 12px;background:#11120f;border:1px solid rgba(255,255,255,.08);border-radius:9px;font-size:11px;color:#aaa69a}
.preview-marker{position:relative;width:40px;height:40px;--preview-color:#6f9c70}

.preview-info-icon{position:absolute;inset:0;display:none;place-items:center}
.preview-info-icon svg{width:31px;height:31px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.preview-info-icon .icon-fill{fill:var(--preview-color)}
.preview-info-icon .icon-stroke{stroke:#fff5e9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.preview-info-icon .icon-dark{stroke:rgba(25,25,22,.88);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.preview-marker:not([data-kind="loot"]) .preview-core,
.preview-marker:not([data-kind="loot"]) .preview-ring{display:none}
.preview-marker:not([data-kind="loot"]) .preview-info-icon{display:grid}

.preview-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--preview-color);border:1.5px solid #fff5e9}
.preview-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1.5px solid var(--preview-color);border-radius:50%;opacity:0}
.preview-marker[data-level="1"] .preview-core{width:6px;height:6px}
.preview-marker[data-level="2"] .preview-core{width:11px;height:11px}
.preview-marker[data-level="3"] .preview-core{width:15px;height:15px}
.preview-marker[data-level="3"] .ring-1{opacity:.86;width:27px;height:27px}
.preview-marker[data-level="4"] .preview-core{width:19px;height:19px}
.preview-marker[data-level="4"] .ring-1{opacity:.94;width:30px;height:30px}
.preview-marker[data-level="4"] .ring-2{opacity:.58;width:38px;height:38px}

.filter-wrap{position:relative}
.filter-panel{position:absolute;right:0;top:42px;width:225px;padding:8px;background:#171813;border:1px solid rgba(255,255,255,.13);border-radius:10px;box-shadow:0 16px 35px rgba(0,0,0,.42)}
.filter-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#777369;padding:6px}
.filter-row{display:flex;align-items:center;gap:9px;padding:7px 6px;font-size:12px;color:#d8d4c8}
.filter-row input{accent-color:#9b493a;width:auto}
.filter-swatch{width:10px;height:10px;border-radius:50%;flex:none}
.filter-info-icon{width:16px;height:16px;display:grid;place-items:center;flex:none}
.filter-info-icon svg{width:16px;height:16px}
.filter-info-icon .icon-fill{fill:var(--filter-color)}
.filter-info-icon .icon-stroke{stroke:#f2ecdf;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.filter-info-icon .icon-dark{stroke:rgba(25,25,22,.9);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;padding:10px 14px;border-radius:9px;background:#1a1b16;border:1px solid rgba(255,255,255,.13);box-shadow:0 12px 28px rgba(0,0,0,.42);font-size:12px;color:#eee9db}

@media(max-width:1100px){
  .search-wrap{min-width:170px}
  .search-wrap input{width:125px}
  .category-legend{justify-content:flex-start}
}
@media(max-width:900px){
  body{grid-template-rows:74px 38px 1fr}
  .brand small{display:none}
  .toolbar button{padding:0 8px;font-size:11px}
  .two-col{grid-template-columns:1fr}
  .search-wrap{min-width:145px}
  .search-wrap input{width:100px}
}