:root{--bg:#07070a;--panel:#15151a;--panel2:#0d0d11;--line:#2b2b34;--text:#f5f5f7;--muted:#a1a1aa;--orange:#f97316;--red:#ef4444;--green:#22c55e;--yellow:#facc15;--blue:#38bdf8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;overflow:hidden}
button,input,select{font:inherit}
#app{height:100%;display:grid;grid-template-columns:390px 1fr}
.side{height:100%;overflow:auto;background:linear-gradient(180deg,#18181f,#09090c);border-right:1px solid var(--line);padding:14px;z-index:10}
h1{font-size:25px;line-height:.95;margin:0;font-weight:1000;letter-spacing:-.04em}
.sub{color:var(--muted);font-size:12px;line-height:1.35;margin-top:8px}
.section{background:rgba(13,13,17,.86);border:1px solid var(--line);border-radius:18px;padding:12px;margin:10px 0;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.sectionTitle{font-weight:950;margin-bottom:8px;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.small{font-size:12px;color:var(--muted);line-height:1.35}.tiny{font-size:11px;color:var(--muted);line-height:1.35}
.row{display:flex;gap:8px;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.btn,.linkBtn{border:1px solid #3f3f46;background:#27272f;color:#eee;border-radius:13px;padding:10px 12px;cursor:pointer;font-weight:850;min-height:42px;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:7px}
.btn:hover,.linkBtn:hover{background:#353541}.btn.active{background:var(--orange);border-color:var(--orange);color:#111}.btn.danger{background:#7f1d1d;border-color:#991b1b}.btn.blue{background:#0c4a6e;border-color:#0369a1}.btn.mini{padding:8px;min-height:34px;font-size:12px}
input,select{width:100%;background:#09090b;color:#fff;border:1px solid #3f3f46;border-radius:13px;padding:10px 12px;outline:none}
.pill{border-radius:13px;background:#27272f;padding:10px 12px;font-size:13px;color:#ddd;display:flex;align-items:center;justify-content:center;font-weight:800;min-height:42px}
.status{border-radius:14px;border:1px solid var(--line);background:#08080b;padding:10px;margin:7px 0;font-size:13px;line-height:1.35}.status.good{background:rgba(20,83,45,.38);border-color:#15803d}.status.bad{background:rgba(127,29,29,.42);border-color:#991b1b}.status.warn{background:rgba(113,63,18,.36);border-color:#a16207}
.mapWrap{position:relative;min-width:0;background:#101014;overflow:hidden;touch-action:none}
#map{position:absolute;inset:0;overflow:hidden;background:#0a0a0d;cursor:grab}
#map.dragging{cursor:grabbing}
#tiles,#markers{position:absolute;inset:0;transform-origin:0 0}
.tile{position:absolute;width:212px;height:212px;image-rendering:auto;user-select:none;pointer-events:none;border:0;outline:0;background:transparent}.tile.broken{display:none!important}
#heatCanvas{position:absolute;inset:0;z-index:5;pointer-events:none}
#ringCanvas{position:absolute;inset:0;z-index:6;pointer-events:none}
#markers{z-index:7;pointer-events:none}
.marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none}
.deathMarker,.targetMarker,.spotMarker,.inspectMarker{display:grid;place-items:center;border-radius:50%;border:2px solid white;box-shadow:0 3px 14px rgba(0,0,0,.5);font-weight:1000;color:#111}
.deathMarker{width:24px;height:24px;background:var(--red);position:relative}.deathMarker:after{content:'drag';position:absolute;left:26px;top:1px;color:white;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:2px 6px;font-size:11px}
.targetMarker{width:24px;height:24px;background:var(--green)}.spotMarker{width:20px;height:20px;background:var(--blue);font-size:11px}.inspectMarker{width:20px;height:20px;background:#a855f7;font-size:11px}
.modeHint{position:absolute;left:14px;top:14px;z-index:20;background:rgba(0,0,0,.77);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:9px 11px;font-size:12px;backdrop-filter:blur(8px);pointer-events:none}
.zoomBox{position:absolute;right:12px;top:12px;z-index:20;display:grid;gap:6px}.zoomBox button{width:40px;height:40px;border-radius:10px;border:1px solid #444;background:#222;color:white;font-size:20px;font-weight:900}
.legendDot{display:inline-block;width:11px;height:11px;border-radius:99px;margin-right:5px;vertical-align:-1px}
.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:999;background:#15151a;border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:0 18px 70px rgba(0,0,0,.45);max-width:560px}
.toast{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 14px;font-weight:900;font-size:13px;opacity:0;transition:.15s;pointer-events:none}.toast.show{opacity:1}
@media(max-width:900px){#app{grid-template-columns:1fr;grid-template-rows:45% 55%}.side{order:2;border-right:0;border-top:1px solid var(--line);padding:10px}h1{font-size:22px}.section{margin:8px 0;padding:10px}.btn{font-size:12px;padding:9px 8px}}

/* v16K modern HUD */
:root{
  --bg:#05060a;
  --panel:#10131b;
  --panel2:#0a0d13;
  --line:#293241;
  --text:#f8fafc;
  --muted:#9ca3af;
  --orange:#ff7a1a;
  --red:#ef4444;
  --green:#22c55e;
  --yellow:#fbbf24;
  --blue:#38bdf8;
  --glass:rgba(15,18,27,.82);
}
.side{
  width:390px;
  background:
    radial-gradient(circle at 20% 0%, rgba(249,115,22,.16), transparent 32%),
    linear-gradient(180deg,#10131b 0%,#07090f 100%);
  padding:16px;
  scrollbar-color:#ff7a1a #111827;
}
.brand{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.brandLogo{
  width:54px;
  height:54px;
  border-radius:18px;
  position:relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,122,26,.32), transparent 42%),
    linear-gradient(145deg,#1f2937,#0b0f17);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 34px rgba(0,0,0,.38), inset 0 0 22px rgba(255,122,26,.12);
  overflow:hidden;
}
.logoRing{
  position:absolute;
  inset:9px;
  border:3px solid var(--orange);
  border-radius:50%;
  box-shadow:0 0 16px rgba(255,122,26,.75);
}
.logoCross{
  position:absolute;
  background:#f8fafc;
  border-radius:99px;
  box-shadow:0 0 10px rgba(255,255,255,.55);
}
.logoCrossV{width:4px;height:34px;left:25px;top:10px}
.logoCrossH{height:4px;width:34px;left:10px;top:25px}
.logoDot{
  position:absolute;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--red);
  left:22px;top:22px;
  border:2px solid white;
}
h1{
  font-size:28px;
  letter-spacing:-.055em;
  line-height:.88;
  text-transform:none;
}
.sub{
  font-size:12.5px;
  color:#b6bdc9;
  margin-top:7px;
}
.section{
  background:linear-gradient(180deg,rgba(17,21,31,.92),rgba(9,12,18,.92));
  border:1px solid rgba(148,163,184,.18);
  border-radius:22px;
  padding:14px;
  margin:12px 0;
  box-shadow:
    0 18px 46px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.sectionTitle{
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#e5e7eb;
  margin-bottom:10px;
}
.sectionTitle span{
  background:rgba(255,122,26,.14);
  border:1px solid rgba(255,122,26,.26);
  color:#ffb27a!important;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
}
.btn,.linkBtn{
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#f8fafc;
  box-shadow:0 8px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-weight:900;
  letter-spacing:-.01em;
}
.btn:hover,.linkBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(255,122,26,.45);
  background:linear-gradient(180deg,#303746,#1c2230);
}
.btn:active{
  transform:translateY(1px) scale(.99);
}
.btn.active{
  background:linear-gradient(180deg,#ff8b32,#f97316);
  border-color:#ff9a4b;
  color:#130b05;
  box-shadow:0 12px 24px rgba(249,115,22,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn.blue{
  background:linear-gradient(180deg,#075985,#0c4a6e);
  border-color:rgba(56,189,248,.35);
}
.btn.danger{
  background:linear-gradient(180deg,#b91c1c,#7f1d1d);
  border-color:rgba(248,113,113,.35);
}
.btn.mini{
  min-height:42px;
  border-radius:14px;
  font-size:13px;
}
input,select{
  min-height:48px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.2);
  background:#070a10;
  color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
input:focus,select:focus{
  border-color:rgba(255,122,26,.65);
  box-shadow:0 0 0 3px rgba(255,122,26,.12);
}
.pill{
  min-height:48px;
  border-radius:16px;
  background:#1a1f2b;
  border:1px solid rgba(148,163,184,.14);
}
.status{
  border-radius:16px;
  border-color:rgba(148,163,184,.14);
  background:rgba(5,7,12,.72);
  font-size:12.5px;
}
.status.good{
  border-color:rgba(34,197,94,.35);
  background:rgba(20,83,45,.30);
}
.status.warn{
  border-color:rgba(251,191,36,.35);
  background:rgba(113,63,18,.26);
}
.grid2{gap:10px}
.grid3{gap:9px}
.tiny{
  color:#aab2c0;
  margin-bottom:5px;
  font-weight:750;
}
.modeHint{
  left:16px;
  top:16px;
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
  background:rgba(6,8,13,.78);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.zoomBox{
  right:16px;
  top:16px;
}
.zoomBox button{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(180deg,#242936,#151a24);
  border:1px solid rgba(255,255,255,.16);
}
.deathMarker,.targetMarker,.spotMarker,.inspectMarker{
  border-width:3px;
  box-shadow:0 0 0 4px rgba(255,255,255,.13),0 10px 22px rgba(0,0,0,.45);
}
.deathMarker{width:28px;height:28px}
.deathMarker:after{
  left:31px;
  top:2px;
  padding:4px 8px;
  font-size:12px;
  background:rgba(8,10,15,.86);
}
.targetMarker{width:28px;height:28px}
.spotMarker,.inspectMarker{width:22px;height:22px}
.loading{
  border-radius:26px;
  background:rgba(15,18,27,.94);
  border:1px solid rgba(148,163,184,.2);
}
.toast{
  border-radius:18px;
  background:rgba(6,8,13,.88);
  border-color:rgba(255,255,255,.16);
}
@media(max-width:900px){
  .side{width:auto;padding:12px}
  .brand{grid-template-columns:48px 1fr}
  .brandLogo{width:46px;height:46px;border-radius:15px}
  .logoRing{inset:8px}
  .logoCrossV{left:21px;top:9px;height:28px}
  .logoCrossH{left:9px;top:21px;width:28px}
  .logoDot{left:18px;top:18px}
  h1{font-size:23px}
  .btn{min-height:46px}
}


.autoLosCard{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:12px;
  align-items:center;
  background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(56,189,248,.08));
  border:1px solid rgba(34,197,94,.28);
  border-radius:22px;
  padding:13px 14px;
  margin:12px 0;
  box-shadow:0 14px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.autoIcon{
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  color:#052e16;
  background:linear-gradient(180deg,#86efac,#22c55e);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.04em;
  box-shadow:0 12px 22px rgba(34,197,94,.18);
}
.autoTitle{
  font-size:14px;
  font-weight:1000;
  color:#ecfdf5;
}
.autoSub{
  color:#a7f3d0;
  font-size:12px;
  line-height:1.3;
  margin-top:3px;
}


/* v16M ultra clean HUD polish */
.side{
  background:
    radial-gradient(circle at 10% -5%, rgba(255,122,26,.22), transparent 30%),
    radial-gradient(circle at 95% 15%, rgba(56,189,248,.10), transparent 28%),
    linear-gradient(180deg,#0f131d 0%,#06080d 100%);
  padding:18px;
}
.brand{
  grid-template-columns:62px 1fr;
  margin-bottom:16px;
  padding:10px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:24px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  box-shadow:0 20px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.brandLogo{
  width:58px;
  height:58px;
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,122,26,.34), transparent 44%),
    conic-gradient(from 180deg, rgba(255,122,26,.15), rgba(56,189,248,.16), rgba(255,122,26,.15)),
    linear-gradient(145deg,#1b2230,#080b12);
}
.logoRing{
  inset:8px;
  border-width:3px;
}
.logoCrossV{left:27px;top:9px;height:40px}
.logoCrossH{left:9px;top:27px;width:40px}
.logoDot{left:23px;top:23px;width:12px;height:12px}
h1{
  font-size:29px;
  line-height:.9;
  background:linear-gradient(180deg,#ffffff,#cbd5e1);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brandBadge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:8px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,122,26,.26);
  background:rgba(255,122,26,.10);
  color:#fed7aa;
  font-size:10.5px;
  font-weight:1000;
  letter-spacing:.09em;
}
.section{
  border-radius:24px;
  padding:15px;
  margin:13px 0;
  background:
    linear-gradient(180deg,rgba(17,22,34,.88),rgba(7,10,16,.90));
  border:1px solid rgba(148,163,184,.16);
  box-shadow:0 22px 60px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045);
}
.sectionTitle{
  font-size:12px;
  color:#f1f5f9;
  margin-bottom:12px;
  letter-spacing:.06em;
}
.btn{
  min-height:52px;
  border-radius:18px;
  font-size:14px;
  background:
    linear-gradient(180deg,rgba(47,55,72,.95),rgba(24,29,41,.98));
  border:1px solid rgba(148,163,184,.18);
}
.btn.active{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.28), transparent 26%),
    linear-gradient(180deg,#ff9b4a,#ff6b00);
}
.btn.mini{
  min-height:44px;
  border-radius:15px;
}
input,select{
  min-height:52px;
  border-radius:18px;
  font-size:15px;
  background:linear-gradient(180deg,#080b12,#05070c);
}
.pill{
  min-height:52px;
  border-radius:18px;
}
.autoMini{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  margin:12px 0;
  padding:11px 13px;
  border-radius:18px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.20);
  color:#bbf7d0;
  font-size:12px;
  font-weight:900;
}
.pulseDot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:pulseDot 1.6s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.status{
  border-radius:18px;
  padding:11px 12px;
  background:linear-gradient(180deg,rgba(8,11,18,.86),rgba(4,6,10,.86));
}
.modeHint{
  background:linear-gradient(180deg,rgba(10,14,22,.84),rgba(5,7,12,.84));
}
.zoomBox button{
  border-radius:16px;
  backdrop-filter:blur(8px);
}
@media(max-width:900px){
  .brand{grid-template-columns:52px 1fr;padding:8px}
  .brandLogo{width:50px;height:50px}
  h1{font-size:24px}
}


/* v16N compact control HUD */
.side{
  padding:14px;
}
.brand{
  margin-bottom:10px;
}
.section{
  padding:12px;
  margin:10px 0;
}
.sectionTitle{
  margin-bottom:9px;
}
.quickDock{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:10px 0 12px;
  padding:10px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(15,18,27,.86),rgba(7,10,16,.88));
  border:1px solid rgba(148,163,184,.15);
  box-shadow:0 14px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.quickBtn{
  min-height:44px;
  border-radius:15px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#f8fafc;
  font-weight:950;
  font-size:12.5px;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}
.quickBtn:hover{
  border-color:rgba(255,122,26,.45);
  transform:translateY(-1px);
}
.quickBtn.blue{
  background:linear-gradient(180deg,#075985,#0c4a6e);
  border-color:rgba(56,189,248,.35);
}
.quickBtn.danger{
  background:linear-gradient(180deg,#b91c1c,#7f1d1d);
  border-color:rgba(248,113,113,.35);
}
.compactStatus{
  padding:12px;
}
.statusGrid{
  display:grid;
  gap:7px;
}
.status.miniStatus{
  padding:9px 10px;
  border-radius:14px;
  font-size:12px;
  line-height:1.25;
  white-space:normal;
  margin:0;
}
.wideStatus{
  border-color:rgba(255,122,26,.18);
}
.legendDetails{
  margin-top:8px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:14px;
  background:rgba(5,7,12,.58);
  overflow:hidden;
}
.legendDetails summary{
  list-style:none;
  cursor:pointer;
  padding:9px 10px;
  font-size:12px;
  font-weight:950;
  color:#dbeafe;
}
.legendDetails summary::-webkit-details-marker{display:none}
.legendCompact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px 10px;
  padding:0 10px 10px;
  font-size:11.5px;
  color:#d1d5db;
}
.legendCompact span{
  display:flex;
  align-items:center;
  gap:6px;
}
.legendCompact i{
  width:9px;
  height:9px;
  border-radius:99px;
  display:inline-block;
}
.autoMini{
  margin:8px 0 10px;
  padding:9px 11px;
  border-radius:16px;
  font-size:11.5px;
}
.grid3{
  gap:7px;
}
.btn.mini{
  min-height:40px;
}
@media(max-width:900px){
  .quickDock{
    position:sticky;
    top:0;
    z-index:30;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin:8px 0;
    padding:8px;
    backdrop-filter:blur(12px);
  }
  .quickBtn{
    min-height:42px;
    font-size:12px;
    padding:6px;
  }
  .status.miniStatus{
    font-size:11.5px;
  }
}


/* v16S Focus Target LOS suggestions */
.suggestMarker{
  width:20px;
  height:20px;
  border-radius:50%;
  background:#22c55e;
  border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(34,197,94,.22),0 8px 22px rgba(0,0,0,.48);
  position:relative;
}
.suggestMarker:after{
  content:'LOS';
  position:absolute;
  left:22px;
  top:-2px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(5,8,13,.84);
  border:1px solid rgba(34,197,94,.35);
  color:#bbf7d0;
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}
.focusStatus{
  border-color:rgba(56,189,248,.22)!important;
}
.focusLineGlow{
  filter:drop-shadow(0 0 8px rgba(34,197,94,.35));
}


/* v16T QOL pack */
.qolStrip{
  display:grid;
  grid-template-columns:1.15fr .7fr .7fr 1.05fr;
  gap:7px;
  margin:9px 0 4px;
  padding:9px;
  border-radius:18px;
  background:rgba(5,7,12,.48);
  border:1px solid rgba(148,163,184,.13);
}
.qolSlider{
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:7px;
  color:#cbd5e1;
  font-size:11px;
  font-weight:950;
}
.qolSlider input{
  min-height:28px;
  padding:0;
}
.qolBtn{
  min-height:34px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#f8fafc;
  font-size:11px;
  font-weight:950;
  cursor:pointer;
}
.qolBtn:hover{
  border-color:rgba(255,122,26,.45);
}
.floatingTools{
  position:absolute;
  left:14px;
  bottom:16px;
  z-index:25;
  display:flex;
  gap:7px;
  padding:8px;
  border-radius:18px;
  background:rgba(5,7,12,.75);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 14px 38px rgba(0,0,0,.34);
  backdrop-filter:blur(10px);
}
.floatBtn{
  min-height:38px;
  padding:0 11px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#f8fafc;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}
.floatBtn.active{
  background:linear-gradient(180deg,#ff8b32,#f97316);
  color:#140a02;
  border-color:#ff9a4b;
}
.floatBtn.danger{
  background:linear-gradient(180deg,#b91c1c,#7f1d1d);
  border-color:rgba(248,113,113,.35);
}
.status.focusStatus{
  border-color:rgba(56,189,248,.28)!important;
  background:linear-gradient(180deg,rgba(8,47,73,.30),rgba(4,6,10,.86))!important;
}
@media(max-width:900px){
  .qolStrip{
    grid-template-columns:1fr 1fr 1fr;
  }
  .qolSlider{
    grid-column:1/-1;
  }
  .floatingTools{
    left:10px;
    right:10px;
    bottom:10px;
    justify-content:space-between;
  }
  .floatBtn{
    flex:1;
    padding:0 6px;
  }
}


/* v16X stable realtime sync */
.syncPanel{
  margin:10px 0;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(15,18,27,.86),rgba(7,10,16,.88));
  border:1px solid rgba(148,163,184,.15);
  overflow:hidden;
  box-shadow:0 14px 36px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04);
}
.syncPanel summary{
  cursor:pointer;
  list-style:none;
  padding:12px 13px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:1000;
  color:#e5e7eb;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.syncPanel summary::-webkit-details-marker{display:none}
.syncDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#64748b;
  box-shadow:0 0 0 4px rgba(100,116,139,.16);
}
.syncDot.on{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.16),0 0 18px rgba(34,197,94,.45);
}
.syncGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:0 11px 11px;
}
.syncGrid input{
  min-height:40px;
  border-radius:13px;
  font-size:12px;
}
.syncGrid input:nth-child(1),
.syncGrid input:nth-child(2){
  grid-column:1/-1;
}
.syncBtn{
  min-height:38px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#075985,#0c4a6e);
  color:#f8fafc;
  font-weight:950;
  cursor:pointer;
}
.syncBtn.danger{
  background:linear-gradient(180deg,#991b1b,#7f1d1d);
}
.syncHelp,.syncStatus{
  margin:0 11px 11px;
  color:#9ca3af;
  font-size:11.5px;
  line-height:1.3;
}
.syncStatus{
  color:#cbd5e1;
  border:1px solid rgba(148,163,184,.12);
  border-radius:12px;
  padding:8px 9px;
  background:rgba(5,7,12,.48);
}
.remoteMarker{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.remoteDot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid white;
  box-shadow:0 0 0 4px rgba(255,255,255,.13),0 10px 22px rgba(0,0,0,.45);
  position:relative;
}
.remoteDot.death{background:#ef4444}
.remoteDot.target{background:#22c55e}
.remoteDot.spot{background:#38bdf8}
.remoteDot.inspect{background:#a855f7}
.remoteDot:after{
  content:attr(data-label);
  position:absolute;
  left:23px;
  top:-4px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(5,8,13,.86);
  border:1px solid rgba(255,255,255,.16);
  color:white;
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
}
@media(max-width:900px){
  .syncGrid{grid-template-columns:1fr}
  .syncGrid input:nth-child(1),.syncGrid input:nth-child(2){grid-column:auto}
}


/* v16Y remote LOS line labels */
.remoteLosLabel{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(5,8,13,.84);
  border:1px solid rgba(255,255,255,.16);
  color:#e5e7eb;
  font-size:10px;
  font-weight:1000;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.32);
}


/* v16Z remote target/LOS visibility fix */
.remoteDot.target{
  width:24px;
  height:24px;
  background:#22c55e!important;
}
.remoteDot.target:before{
  content:'';
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(34,197,94,.35);
  box-shadow:0 0 18px rgba(34,197,94,.35);
}
.remoteDot.death{
  background:#ef4444!important;
}
.remoteLosLabel{
  z-index:40;
}


/* v17A remote LOS drawn in marker layer with SVG so it is always visible */
.remoteLosSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:32;
  overflow:visible;
}
.remoteLosSvg line.outline{
  stroke:rgba(0,0,0,.86);
  stroke-width:9;
  stroke-linecap:round;
}
.remoteLosSvg line.color{
  stroke-width:4;
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.65));
}
.remoteLosSvg circle{
  stroke:white;
  stroke-width:2.5;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.7));
}
.remoteLosLabel{
  z-index:45!important;
}


/* v17B remote LOS circles */
.syncSelect{
  min-height:38px;
  border-radius:13px;
  border:1px solid rgba(148,163,184,.18);
  background:#070a10;
  color:#f8fafc;
  font-size:12px;
  font-weight:900;
  padding:0 9px;
}


/* v17C remote LOS circle/fan always visible on marker SVG layer */
.remoteHeatRay{
  stroke-linecap:round;
  pointer-events:none;
}
.remoteRangeCircle{
  fill:none;
  stroke-width:2;
  stroke-dasharray:8 8;
  opacity:.65;
  pointer-events:none;
}


/* v17D polish */
.remoteHeatRay{
  stroke-linecap:round;
  pointer-events:none;
  filter:blur(.25px);
}
.remoteRangeCircle{
  fill:none;
  stroke-width:1.8;
  stroke-dasharray:7 9;
  opacity:.48;
  pointer-events:none;
}
.remoteLosSvg line.outline{
  stroke:rgba(0,0,0,.72);
  stroke-width:7;
  stroke-linecap:round;
}
.remoteLosSvg line.color{
  stroke-width:3.25;
  stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(0,0,0,.55));
}
.remoteLosLabel{
  opacity:.92;
  transform:translate(-50%,-145%)!important;
}
.deathMarker:after,
.targetMarker:after{
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .12s ease, transform .12s ease;
}
body.markerDragging .deathMarker:after,
body.markerDragging .targetMarker:after,
.deathMarker:hover:after,
.targetMarker:hover:after{
  opacity:1;
  transform:translateX(0);
}
.remoteMarker .remoteDot:after{
  opacity:.94;
}


/* v17E clearer remote threat zone */
.remoteThreatBase{
  pointer-events:none;
  opacity:.22;
}
.remoteThreatRing{
  fill:none;
  stroke-width:3;
  stroke-dasharray:9 7;
  opacity:.92;
  pointer-events:none;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.45));
}
.remoteHeatRay{
  stroke-linecap:round;
  pointer-events:none;
  filter:blur(.15px);
}
.remoteThreatLabel{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(7,10,16,.88);
  border:1px solid rgba(249,115,22,.34);
  color:#fed7aa;
  font-size:10.5px;
  font-weight:1000;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(0,0,0,.36);
  z-index:44;
}
.remoteLosSvg line.outline{
  stroke:rgba(0,0,0,.72);
  stroke-width:7;
}
.remoteLosSvg line.color{
  stroke-width:3.4;
}


/* v17F selective clear + remote persistence */
.selectiveClearPanel{
  margin:9px 0;
  border-radius:18px;
  background:rgba(5,7,12,.48);
  border:1px solid rgba(148,163,184,.13);
  overflow:hidden;
}
.selectiveClearPanel summary{
  cursor:pointer;
  list-style:none;
  padding:10px 12px;
  color:#e5e7eb;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.selectiveClearPanel summary::-webkit-details-marker{display:none}
.selectiveClearGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:0 10px 10px;
}
.smallClearBtn{
  min-height:36px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#f8fafc;
  font-size:11.5px;
  font-weight:950;
  cursor:pointer;
}
.smallClearBtn:hover{
  border-color:rgba(255,122,26,.45);
}
.smallClearBtn.danger{
  background:linear-gradient(180deg,#b91c1c,#7f1d1d);
  border-color:rgba(248,113,113,.35);
}
.smallClearBtn.purple{
  background:linear-gradient(180deg,#6d28d9,#4c1d95);
  border-color:rgba(168,85,247,.35);
}


.selectiveHint{
  padding:0 11px 10px;
  color:#9ca3af;
  font-size:11.5px;
  line-height:1.25;
}


/* v17I share room */
/* v17J simple room code */
.roomImportBox{
  display:grid;
  grid-template-columns:1fr .42fr;
  gap:8px;
  padding:0 11px 11px;
}
.roomImportBox input{
  min-height:40px;
  border-radius:13px;
  font-size:12px;
}
@media(max-width:900px){
  .roomImportBox{
    grid-template-columns:1fr;
  }
}


/* v17K short invite/code-only */
.syncBtn.codeOnly{
  background:linear-gradient(180deg,#334155,#1e293b);
  border-color:rgba(148,163,184,.28);
}


/* v17M Clean Combat UI - Alt-Tab friendly */
:root{
  --combat-card:rgba(7,10,16,.86);
  --combat-border:rgba(148,163,184,.16);
}
#app{
  grid-template-columns:360px 1fr;
}
.side{
  padding:12px;
}
.brand{
  padding:9px;
  margin-bottom:8px;
  border-radius:22px;
}
h1{
  font-size:26px;
}
.brandBadge{
  font-size:10px;
  padding:5px 8px;
}
.section{
  margin:8px 0;
  padding:11px;
  border-radius:20px;
}
.sectionTitle{
  margin-bottom:8px;
  font-size:11.5px;
}
.grid2{
  gap:8px;
}
.btn{
  min-height:58px;
  border-radius:18px;
  font-size:14px;
  font-weight:1000;
}
.btn.active{
  box-shadow:0 0 0 3px rgba(255,122,26,.18),0 12px 26px rgba(249,115,22,.24);
}
.small{
  font-size:11.5px;
}
#rangeInput{
  font-size:24px;
  font-weight:1000;
  text-align:center;
  min-height:58px;
}
.pill{
  min-height:58px;
  font-size:14px;
}
.quickDock{
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  padding:8px;
  margin:8px 0;
  border-radius:18px;
}
.quickBtn{
  min-height:44px;
  font-size:11.5px;
  border-radius:13px;
  padding:5px;
}
.grid3 .btn.mini{
  min-height:46px;
  font-size:13px;
  border-radius:14px;
}
.syncPanel,
.selectiveClearPanel,
.advancedPanel{
  margin:8px 0;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(15,18,27,.86),rgba(7,10,16,.88));
  border:1px solid var(--combat-border);
  overflow:hidden;
}
.syncPanel summary,
.selectiveClearPanel summary,
.advancedPanel summary{
  cursor:pointer;
  list-style:none;
  padding:11px 12px;
  font-size:12px;
  font-weight:1000;
  color:#f8fafc;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.syncPanel summary::-webkit-details-marker,
.selectiveClearPanel summary::-webkit-details-marker,
.advancedPanel summary::-webkit-details-marker{
  display:none;
}
.syncGrid{
  grid-template-columns:1fr;
  gap:7px;
  padding:0 10px 10px;
}
.syncGrid input{
  min-height:42px;
  font-size:13px;
}
.syncGrid input:nth-child(1),
.syncGrid input:nth-child(2){
  grid-column:auto;
}
.syncBtn{
  min-height:42px;
  font-size:12.5px;
  border-radius:13px;
}
.roomImportBox{
  grid-template-columns:1fr;
  padding:0 10px 10px;
}
.roomImportBox input{
  min-height:42px;
  font-size:13px;
}
.syncHelp{
  margin:0 10px 8px;
  font-size:11px;
}
.syncStatus{
  margin:0 10px 10px;
  font-size:11.5px;
  padding:7px 8px;
}
.selectiveClearGrid{
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  padding:0 10px 10px;
}
.smallClearBtn{
  min-height:42px;
  font-size:11.5px;
  border-radius:13px;
}
.advancedPanel .qolStrip{
  margin:0;
  border:0;
  border-radius:0;
  grid-template-columns:1fr 1fr;
  background:transparent;
  padding:0 10px 10px;
}
.advancedPanel .qolSlider{
  grid-column:1/-1;
}
.autoMini{
  display:none;
}
.compactStatus{
  padding:10px;
}
.statusGrid{
  gap:6px;
}
.status.miniStatus{
  padding:8px 9px;
  font-size:11.5px;
  border-radius:13px;
}
.legendDetails{
  display:none;
}
.floatingTools{
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  gap:8px;
  padding:8px;
  border-radius:20px;
  background:rgba(5,7,12,.78);
}
.floatBtn{
  min-height:46px;
  min-width:78px;
  border-radius:15px;
  font-size:13px;
}
.modeHint{
  font-size:12px;
  padding:8px 11px;
  opacity:.92;
}
.zoomBox button{
  width:48px;
  height:48px;
}
body.mapOnly #app{
  grid-template-columns:0 1fr;
}
body.mapOnly .side{
  display:none;
}
body.mapOnly .floatingTools{
  display:flex;
}
body.mapOnly .modeHint:after{
  content:' · map only';
  color:#f97316;
}
.mapOnlyReturn{
  position:absolute;
  left:14px;
  top:58px;
  z-index:28;
  display:none;
  min-height:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,7,12,.78);
  color:#f8fafc;
  font-weight:1000;
  cursor:pointer;
}
body.mapOnly .mapOnlyReturn{
  display:block;
}
@media(max-width:900px){
  #app{
    grid-template-rows:42% 58%;
  }
  .side{
    padding:9px;
  }
  h1{
    font-size:22px;
  }
  .brandLogo{
    width:44px;
    height:44px;
  }
  .btn{
    min-height:52px;
    font-size:13px;
  }
  #rangeInput,.pill{
    min-height:52px;
  }
  .quickDock{
    position:sticky;
    top:0;
    z-index:30;
    grid-template-columns:repeat(5,1fr);
  }
  .quickBtn{
    font-size:10.5px;
  }
  .floatingTools{
    left:8px;
    right:8px;
    transform:none;
    bottom:8px;
  }
  .floatBtn{
    min-width:0;
    flex:1;
  }
  body.mapOnly #app{
    display:block;
  }
  body.mapOnly .mapWrap{
    position:absolute;
    inset:0;
    height:100%;
  }
}


/* v17N Wide Combat Panel - no-scroll priority layout */
#app{
  grid-template-columns:560px 1fr;
}
.side{
  padding:10px;
  overflow-y:auto;
}
.brand{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:10px;
  padding:8px 10px;
  margin-bottom:7px;
  border-radius:20px;
}
.brandLogo{
  width:52px;
  height:52px;
}
h1{
  font-size:24px;
  line-height:1;
}
.brandBadge{
  margin-top:5px;
  font-size:10px;
}
.section{
  padding:9px 10px;
  margin:7px 0;
  border-radius:18px;
}
.sectionTitle{
  font-size:11px;
  margin-bottom:7px;
}
.grid2{
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.btn{
  min-height:46px;
  border-radius:15px;
  font-size:12.5px;
  padding:6px 7px;
}
.small{
  font-size:10.8px;
  line-height:1.25;
}
#rangeInput{
  min-height:46px;
  font-size:25px;
}
.pill{
  min-height:46px;
  font-size:12px;
}
.quickDock{
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  padding:7px;
  margin:7px 0 0;
}
.quickBtn{
  min-height:39px;
  font-size:10.7px;
  border-radius:12px;
}
.rangePresets,
.grid3{
  grid-template-columns:repeat(6,1fr);
  gap:7px;
}
.grid3 .btn.mini,
.btn.mini{
  min-height:40px;
  font-size:12.5px;
  border-radius:12px;
  padding:5px;
}
.selectiveClearPanel{
  margin:7px 0;
}
.selectiveClearPanel summary,
.syncPanel summary,
.advancedPanel summary{
  padding:9px 11px;
  font-size:11px;
}
.selectiveClearGrid{
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  padding:0 9px 9px;
}
.smallClearBtn{
  min-height:38px;
  font-size:10.8px;
  border-radius:12px;
  padding:5px;
}
.syncPanel{
  margin:7px 0;
}
.syncGrid{
  grid-template-columns:1.1fr 1.1fr .9fr .9fr;
  gap:7px;
  padding:0 9px 9px;
}
.syncGrid input{
  min-height:38px;
  font-size:11.5px;
}
.syncGrid input:nth-child(1),
.syncGrid input:nth-child(2){
  grid-column:span 2;
}
.syncBtn{
  min-height:38px;
  font-size:11px;
  border-radius:12px;
  padding:5px;
}
.syncSelect{
  min-height:38px;
  font-size:11px;
}
.roomImportBox{
  grid-template-columns:1fr .28fr;
  gap:7px;
  padding:0 9px 9px;
}
.roomImportBox input{
  min-height:38px;
  font-size:11.5px;
}
.syncHelp{
  display:none;
}
.syncStatus{
  margin:0 9px 9px;
  padding:6px 8px;
  font-size:10.8px;
}
.advancedPanel{
  margin:7px 0;
}
.advancedPanel .qolStrip{
  grid-template-columns:1fr repeat(3,.7fr);
  gap:7px;
  padding:0 9px 9px;
}
.advancedPanel .qolSlider{
  grid-column:auto;
}
.qolBtn{
  min-height:34px;
  font-size:10.5px;
}
.compactStatus{
  padding:8px;
}
.statusGrid{
  grid-template-columns:1fr 1fr;
}
.status.miniStatus{
  padding:7px 8px;
  font-size:10.8px;
}
.floatingTools{
  bottom:12px;
}
.floatBtn{
  min-height:42px;
  min-width:72px;
}
.modeHint{
  top:10px;
  left:10px;
}
/* Keep the important controls above the first screen on normal desktop */
.side > .section:first-of-type,
.side > .section:nth-of-type(2),
.side > .selectiveClearPanel{
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}
/* If the window is narrow, fall back to the previous compact layout */
@media(max-width:1200px){
  #app{
    grid-template-columns:420px 1fr;
  }
  .grid2{
    grid-template-columns:repeat(2,1fr);
  }
  .rangePresets,
  .grid3{
    grid-template-columns:repeat(3,1fr);
  }
  .selectiveClearGrid{
    grid-template-columns:repeat(3,1fr);
  }
  .syncGrid{
    grid-template-columns:1fr 1fr;
  }
  .syncGrid input:nth-child(1),
  .syncGrid input:nth-child(2){
    grid-column:1/-1;
  }
}
@media(max-width:900px){
  #app{
    grid-template-rows:46% 54%;
  }
  .grid2{
    grid-template-columns:repeat(2,1fr);
  }
  .quickDock{
    grid-template-columns:repeat(5,1fr);
  }
  .rangePresets,
  .grid3{
    grid-template-columns:repeat(3,1fr);
  }
  .selectiveClearGrid{
    grid-template-columns:repeat(3,1fr);
  }
  .syncGrid{
    grid-template-columns:1fr;
  }
  .roomImportBox{
    grid-template-columns:1fr;
  }
}


/* v17O: fix cramped teammate/team-zone controls */
.syncSelect,
#remoteHeatInput{
  min-width:135px;
  width:100%;
  padding-left:10px;
  padding-right:26px;
  text-overflow:clip;
  white-space:nowrap;
}
.syncGrid{
  grid-template-columns:1fr 1fr .8fr .8fr;
}
.syncBtn{
  white-space:nowrap;
  overflow:visible;
}
@media(max-width:1200px){
  .syncSelect,
  #remoteHeatInput{
    min-width:0;
  }
}


/* v18R clean select-go arty */
.openArtyFloatBtn{
  position:absolute;right:14px;top:126px;z-index:35;min-width:92px;min-height:44px;
  border-radius:15px;border:1px solid rgba(251,146,60,.45);
  background:linear-gradient(180deg,#f97316,#c2410c);color:#fff;font-size:13px;font-weight:1000;
  cursor:pointer;box-shadow:0 14px 32px rgba(0,0,0,.38),0 0 0 3px rgba(249,115,22,.16);
}
.artyCaptureHint{
  position:absolute;left:50%;top:68px;transform:translateX(-50%);z-index:80;
  background:rgba(5,7,12,.92);border:1px solid rgba(250,204,21,.45);color:#fde68a;
  border-radius:999px;padding:10px 14px;font-size:13px;font-weight:1000;box-shadow:0 12px 28px rgba(0,0,0,.38);
}
.artyCaptureHint.hidden{display:none}
.artyPanel{
  position:absolute;right:16px;top:16px;width:min(430px,calc(100% - 32px));max-height:calc(100% - 32px);
  overflow:auto;z-index:140;background:linear-gradient(180deg,rgba(17,24,39,.98),rgba(5,7,12,.99));
  border:1px solid rgba(148,163,184,.20);border-radius:24px;box-shadow:0 26px 80px rgba(0,0,0,.58);
  padding:10px;pointer-events:auto;
}
.artyPanel.hidden{display:none!important}
.artyPanelHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 8px;position:sticky;top:0;z-index:2;background:linear-gradient(180deg,rgba(17,24,39,.99),rgba(17,24,39,.92));border-radius:18px}
.artyTitle{font-size:23px;font-weight:1000;letter-spacing:-.04em}
.artySub{color:#9ca3af;font-size:11px;margin-top:2px}
.artyClose{width:44px;height:44px;border-radius:14px;border:1px solid rgba(148,163,184,.20);background:#0b0f18;color:#f8fafc;font-size:28px;font-weight:1000;cursor:pointer}
.artyBlock{border:1px solid rgba(148,163,184,.14);background:rgba(5,7,12,.47);border-radius:18px;padding:10px;margin:8px 0}
.artySelectGo{border-color:rgba(249,115,22,.28);background:linear-gradient(180deg,rgba(249,115,22,.10),rgba(5,7,12,.50))}
.artyBlockTitle{font-size:12px;font-weight:1000;color:#f8fafc;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.artyFoldBlock summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  list-style:none;
}
.artyFoldBlock summary::-webkit-details-marker{display:none}
.artyFoldBlock summary span{
  font-size:12px;
  font-weight:1000;
  color:#f8fafc;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.artyFoldBlock summary b{
  color:#bae6fd;
  font-size:11px;
  font-weight:950;
  text-align:right;
}
.artyFoldBlock summary:before{
  content:"+";
  width:22px;
  height:22px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(56,189,248,.14);
  color:#bae6fd;
  font-weight:1000;
  flex:0 0 auto;
}
.artyFoldBlock[open] summary{
  margin-bottom:9px;
}
.artyFoldBlock[open] summary:before{
  content:"-";
}
.artySelectGrid,.artyGrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.artySelectGrid label,.artyGrid2 label{display:block;color:#aab2c0;font-size:11px;font-weight:900}
.artyInput{width:100%;min-height:42px;margin-top:5px;border-radius:13px;border:1px solid rgba(148,163,184,.18);background:#05070d;color:#f8fafc;padding:0 10px;font-size:14px;font-weight:900;outline:none}
.artyProfileInfo,.artyAutoChargeBox,.artyCoordDebug{margin-top:9px;border-radius:13px;padding:9px;font-size:12px;line-height:1.35;font-weight:950}
.artyProfileInfo,.artyCoordDebug{border:1px solid rgba(56,189,248,.18);background:rgba(8,47,73,.28);color:#bae6fd}
.artyAutoChargeBox{border:1px solid rgba(34,197,94,.22);background:rgba(20,83,45,.22);color:#bbf7d0}
.artyAutoChargeBox.bad{border-color:rgba(239,68,68,.30);background:rgba(127,29,29,.22);color:#fecaca}
.artyTopMapButtons,.artyActualButtons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.artyActualButtons{grid-template-columns:1fr}
.artyHugeBtn{min-height:58px;border-radius:17px;color:#fff;font-size:15px;font-weight:1000;cursor:pointer;border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 28px rgba(0,0,0,.32)}
.artyHugeBtn.gun{background:linear-gradient(180deg,#2563eb,#1e40af)}
.artyHugeBtn.impact{background:linear-gradient(180deg,#f97316,#b91c1c)}
.artyHugeBtn.actual{background:linear-gradient(180deg,#14b8a6,#0f766e)}
.artyTopMapStatus{margin:0 0 8px;padding:10px 11px;font-size:13px;text-align:center;border:1px solid rgba(250,204,21,.20);background:rgba(250,204,21,.08);color:#fde68a;border-radius:14px;font-weight:900}
.artyResultGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.artyResultGrid div{background:rgba(5,7,12,.58);border:1px solid rgba(148,163,184,.13);border-radius:13px;padding:8px}
.artyResultGrid span{display:block;color:#9ca3af;font-size:10px;font-weight:900;text-transform:uppercase;margin-bottom:4px}
.artyResultGrid b{color:#f8fafc;font-size:15px}
.artyWarning{margin-top:8px;min-height:20px;color:#fed7aa;font-size:12px;line-height:1.3}
.artyCalibrationBlock{
  border-color:rgba(20,184,166,.28);
  background:linear-gradient(180deg,rgba(20,184,166,.10),rgba(5,7,12,.48));
}
.artyCalibrationMain{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.artyCalibrationMain div{
  min-height:58px;
  border:1px solid rgba(20,184,166,.20);
  border-radius:13px;
  background:rgba(4,47,46,.34);
  padding:8px;
}
.artyCalibrationMain span{
  display:block;
  color:#99f6e4;
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
  margin-bottom:5px;
}
.artyCalibrationMain b{
  color:#f8fafc;
  font-size:16px;
}
.artyCalibrationAdvice{
  margin-top:8px;
  border-radius:13px;
  border:1px solid rgba(250,204,21,.20);
  background:rgba(250,204,21,.08);
  color:#fde68a;
  padding:9px;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
}
.artyCalibrationSolution{
  margin-top:8px;
  border-radius:13px;
  border:1px solid rgba(56,189,248,.20);
  background:rgba(8,47,73,.24);
  color:#bae6fd;
  padding:9px;
  font-size:12px;
  font-weight:950;
  line-height:1.35;
}
.artyCalibrationDetails{
  margin-top:8px;
}
.artyCalibrationDetails summary{
  cursor:pointer;
  color:#bae6fd;
  font-size:11px;
  font-weight:1000;
}
.artyCalibrationInputRow{
  margin-top:8px;
}
.artyCalibrationInputRow.primary{
  padding:9px;
  border-radius:13px;
  border:1px solid rgba(34,197,94,.22);
  background:rgba(20,83,45,.20);
}
.artyCalibrationInputRow label{
  display:block;
  color:#aab2c0;
  font-size:11px;
  font-weight:900;
}
.artyResultGrid.compact{
  margin-top:8px;
}
.artyResultGrid.compact div{
  padding:7px;
}
.artyActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.artyBtn{min-height:40px;border-radius:12px;border:1px solid rgba(148,163,184,.18);background:linear-gradient(180deg,#075985,#0c4a6e);color:#f8fafc;font-size:11.5px;font-weight:1000;cursor:pointer}
.artyBtn.ghost{background:linear-gradient(180deg,#242936,#171b26)}
.artyBtn.copy{background:linear-gradient(180deg,#f97316,#c2410c)}
.artyBtn.sync{background:linear-gradient(180deg,#16a34a,#166534)}
.artyRemoteSolution{white-space:pre-wrap;background:rgba(2,6,23,.78);border:1px solid rgba(34,197,94,.20);border-radius:14px;padding:10px;color:#d1fae5;font-size:13px;line-height:1.38;min-height:96px}
@media(max-width:900px){.openArtyFloatBtn{top:70px;right:10px;min-width:72px;min-height:40px}.artyPanel{left:8px;right:8px;top:8px;width:auto;max-height:calc(100% - 16px)}.artySelectGrid,.artyGrid2,.artyTopMapButtons,.artyActualButtons,.artyCalibrationMain{grid-template-columns:1fr}}


/* v18S no-close arty capture */
.artyPanel.artyPickingPanel{
  width:300px!important;
  max-height:none!important;
  overflow:hidden!important;
  padding:10px!important;
  right:16px!important;
  top:16px!important;
  border-color:rgba(250,204,21,.40)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.55),0 0 0 4px rgba(250,204,21,.14)!important;
}
.artyPanel.artyPickingPanel .artyBlock,
.artyPanel.artyPickingPanel .artyTopMapButtons,
.artyPanel.artyPickingPanel .artyActions,
.artyPanel.artyPickingPanel details{
  display:none!important;
}
.artyPanel.artyPickingPanel .artyTopMapStatus{
  display:block!important;
  margin:8px 0 0!important;
  font-size:13px!important;
  border-color:rgba(250,204,21,.40)!important;
  background:rgba(250,204,21,.12)!important;
}
.artyPanel.artyPickingPanel .artyPanelHead{
  position:relative!important;
}
.artyPickCancelBtn{
  display:none;
  width:100%;
  margin-top:9px;
  min-height:38px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.20);
  background:linear-gradient(180deg,#374151,#111827);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
}
.artyPanel.artyPickingPanel .artyPickCancelBtn{
  display:block;
}
.artyPickOverlay{
  position:absolute;
  inset:0;
  z-index:75;
  cursor:crosshair;
  background:rgba(250,204,21,.001);
}
.artyPickOverlay.hidden{
  display:none;
}


/* v18U visible separate arty markers */
.artyMapMarker{
  position:absolute;
  width:30px;
  height:30px;
  margin-left:-15px;
  margin-top:-15px;
  border-radius:50%;
  z-index:85;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:1000;
  color:#fff;
  border:3px solid #fff;
  box-shadow:0 14px 30px rgba(0,0,0,.50),0 0 0 5px rgba(255,255,255,.16);
  pointer-events:none;
}
.artyMapMarker.gun{
  background:#2563eb;
}
.artyMapMarker.impact{
  background:#f97316;
}
.artyMapMarker.actual{
  background:#14b8a6;
}
.artyMapMarkerLabel{
  position:absolute;
  left:23px;
  top:-5px;
  background:rgba(5,7,12,.90);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:11px;
  padding:5px 8px;
  font-size:11px;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.40);
}
.artyShotLine{
  position:absolute;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#f97316);
  border-radius:999px;
  z-index:82;
  transform-origin:0 50%;
  box-shadow:0 8px 18px rgba(0,0,0,.40);
  pointer-events:none;
}
.artyShotLine.actual{
  height:3px;
  background:linear-gradient(90deg,#f97316,#14b8a6);
  opacity:.86;
}


/* v18V clear arty marker controls */
.artyClearButtons{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:7px;
  margin:0 0 8px;
}
.artyClearBtn{
  min-height:36px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#e5e7eb;
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}
.artyClearBtn.danger{
  background:linear-gradient(180deg,#991b1b,#7f1d1d);
  color:#fff;
}


/* v18W remote synced arty markers */
.artyMapMarker.remote{
  opacity:.72;
  transform:scale(.88);
  border-style:dashed;
}
.artyMapMarker.remote.gun{
  background:#0ea5e9;
}
.artyMapMarker.remote.impact{
  background:#fb923c;
}
.artyShotLine.remote{
  opacity:.45;
  height:3px;
  background:linear-gradient(90deg,#0ea5e9,#fb923c);
}
.artyRemoteBadge{
  display:inline-block;
  margin-left:5px;
  color:#93c5fd;
}


/* v18X floating gunner instructions */
.artySendTargetRow{
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:8px;
  margin-top:10px;
}
.artySendTargetRow label{
  display:block;
  color:#aab2c0;
  font-size:11px;
  font-weight:900;
}
.gunnerOverlay{
  position:fixed;
  left:calc(100vw - 455px);
  top:92px;
  width:min(420px,calc(100vw - 22px));
  max-height:min(520px,calc(100vh - 120px));
  z-index:220;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(2,6,23,.58));
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 28px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  color:#e5e7eb;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .28s ease, transform .28s ease;
}
.gunnerOverlay.hidden{
  opacity:0;
  transform:translateY(12px) scale(.985);
  pointer-events:none;
}
.gunnerOverlayHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 13px;
  cursor:grab;
  background:linear-gradient(90deg,rgba(249,115,22,.26),rgba(14,165,233,.18));
  border-bottom:1px solid rgba(148,163,184,.18);
  user-select:none;
}
.gunnerOverlayHead:active{
  cursor:grabbing;
}
.gunnerOverlayTitle{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  color:#fff;
}
.gunnerOverlaySub{
  margin-top:3px;
  font-size:11px;
  color:#bae6fd;
  font-weight:800;
}
.gunnerOverlayBtns{
  display:flex;
  gap:6px;
}
.gunnerOverlayBtns button{
  min-height:32px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,23,42,.70);
  color:#f8fafc;
  font-size:11px;
  font-weight:1000;
  cursor:pointer;
}
#gunnerHideBtn{
  width:34px;
  font-size:18px;
  line-height:1;
}
.gunnerOverlayBody{
  white-space:pre-wrap;
  padding:13px;
  font-size:13px;
  line-height:1.42;
  color:#d1fae5;
  max-height:420px;
  overflow:auto;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.gunnerOverlay.pulse{
  animation:gunnerPulse .72s ease both;
}
@keyframes gunnerPulse{
  0%{box-shadow:0 28px 90px rgba(0,0,0,.48),0 0 0 0 rgba(249,115,22,.0)}
  35%{box-shadow:0 28px 90px rgba(0,0,0,.48),0 0 0 6px rgba(249,115,22,.20)}
  100%{box-shadow:0 28px 90px rgba(0,0,0,.48),0 0 0 0 rgba(249,115,22,.0)}
}
@media(max-width:900px){
  .artySendTargetRow{grid-template-columns:1fr}
  .gunnerOverlay{
    left:10px;
    right:10px;
    top:72px;
    width:auto;
  }
}


/* v18Y: map remains movable while picking + draggable arty markers */
.artyPickOverlay{
  display:none!important;
  pointer-events:none!important;
}
.artyPanel.artyPickingPanel{
  width:min(430px,calc(100% - 32px))!important;
  max-height:calc(100% - 32px)!important;
  overflow:auto!important;
}
.artyPanel.artyPickingPanel .artyBlock,
.artyPanel.artyPickingPanel .artyTopMapButtons,
.artyPanel.artyPickingPanel .artyActions,
.artyPanel.artyPickingPanel details{
  display:block!important;
}
.artyPanel.artyPickingPanel .artySelectGrid,
.artyPanel.artyPickingPanel .artyGrid2,
.artyPanel.artyPickingPanel .artyActions,
.artyPanel.artyPickingPanel .artyTopMapButtons,
.artyPanel.artyPickingPanel .artyResultGrid{
  display:grid!important;
}
.artyMapMarker{
  pointer-events:auto!important;
  cursor:grab!important;
}
.artyMapMarker:active{
  cursor:grabbing!important;
}
.artyMapMarker.dragging{
  outline:4px solid rgba(250,204,21,.45);
  transform:scale(1.08);
}
.artyDragHint{
  color:#fde68a;
  font-size:11.5px;
  font-weight:900;
  margin-top:6px;
}
.gunnerOverlayHead{
  touch-action:none;
}
.gunnerOverlay.dragging{
  transition:none!important;
}
body.artyPickModeActive .modeHint:after{
  content:" · ARTY PICK: pan/zoom allowed, click map to set";
  color:#facc15;
}


/* v18Z better received mission close + no-valid info */
.liveGunnerHeader{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.miniCloseBtn{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(15,23,42,.75);
  color:#fff;
  font-size:20px;
  line-height:1;
  font-weight:1000;
  cursor:pointer;
}
.teammateSolution.hiddenReceived{
  display:none!important;
}
.gunnerOverlayBtns button{
  pointer-events:auto!important;
  position:relative;
  z-index:5;
}
.gunnerOverlay.hidden{
  display:none!important;
}
.noValidList{
  color:#fed7aa;
}


/* v18AB received clear button */
.artyBtn.dangerMini{
  background:linear-gradient(180deg,#991b1b,#7f1d1d)!important;
  color:#fff!important;
}


/* v18AC precise crosshair cursor while picking arty points */
body.artyPickModeActive #map,
body.artyPickModeActive #map *,
body.artyPickModeActive canvas,
body.artyPickModeActive .mapLayer,
body.artyPickModeActive #markers{
  cursor:crosshair!important;
}
body.artyPickModeActive .artyPanel,
body.artyPickModeActive .artyPanel *,
body.artyPickModeActive .gunnerOverlay,
body.artyPickModeActive .gunnerOverlay *{
  cursor:auto!important;
}
body.artyPickModeActive .artyMapMarker{
  cursor:grab!important;
}
body.artyPickModeActive .artyMapMarker:active{
  cursor:grabbing!important;
}
.artyCaptureHint{
  pointer-events:none;
}


/* v18AD Mobile / Tablet Edition */
.mobilePanelToggle,
.mobileClosePanel{display:none}

@media (max-width: 1180px){
  #app{grid-template-columns:340px 1fr!important}
  .btn,.quickBtn,.floatBtn,.artyBtn,.artyHugeBtn,.artyClearBtn,.pageTab{min-height:46px!important}
  input,select,.artyInput{min-height:46px!important;font-size:16px!important}
  .section,.artyBlock{padding:11px!important}
  .gunnerOverlay{width:min(460px,calc(100vw - 22px))!important}
}

@media (max-width: 760px){
  html,body{overflow:hidden!important;touch-action:none}
  #app{display:block!important;height:100%!important}
  .side{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:min(92vw,390px)!important;height:100%!important;z-index:260!important;
    transform:translateX(-105%);transition:transform .22s ease;
    border-right:1px solid rgba(148,163,184,.22)!important;
    box-shadow:26px 0 70px rgba(0,0,0,.55);
    padding:12px!important;overflow:auto!important;-webkit-overflow-scrolling:touch;
  }
  body.mobileMenuOpen .side{transform:translateX(0)}
  .mobilePanelToggle{
    display:block!important;position:absolute;left:10px;top:10px;z-index:95;
    min-width:82px;min-height:42px;border-radius:15px;
    border:1px solid rgba(148,163,184,.24);
    background:linear-gradient(180deg,rgba(15,23,42,.92),rgba(2,6,23,.90));
    color:#fff;font-size:12px;font-weight:1000;
    box-shadow:0 14px 32px rgba(0,0,0,.35);
  }
  .mobileClosePanel{
    display:block!important;width:100%;min-height:44px;margin-bottom:10px;
    border-radius:14px;border:1px solid rgba(148,163,184,.18);
    background:linear-gradient(180deg,#991b1b,#7f1d1d);
    color:#fff;font-size:13px;font-weight:1000;
  }
  .mapWrap{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important}
  #map{width:100vw!important;height:100vh!important}
  .brand h1,h1{font-size:22px!important}
  .grid2,.statusGrid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .qolStrip,.quickDock{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .btn,.quickBtn,.floatBtn{min-height:48px!important;font-size:12px!important;border-radius:14px!important}
  .floatingTools{
    left:8px!important;right:8px!important;bottom:8px!important;
    display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:7px!important;z-index:60!important;
  }
  .floatBtn{min-width:0!important;padding:0 4px!important;font-size:11px!important}
  .openArtyFloatBtn{
    right:10px!important;top:10px!important;min-width:78px!important;min-height:42px!important;
    font-size:12px!important;z-index:96!important;
  }
  .artyPanel{
    position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;
    width:auto!important;max-height:78vh!important;border-radius:24px!important;z-index:240!important;
    padding:10px!important;overflow:auto!important;-webkit-overflow-scrolling:touch;
  }
  .artyPanelHead{position:sticky!important;top:0!important;z-index:5!important}
  .artyTitle{font-size:21px!important}
  .artySub{font-size:11px!important}
  .artyTopMapButtons,.artyActualButtons,.artyClearButtons,.artyActions,.artyGrid2,.artySelectGrid,.artySendTargetRow,.artyResultGrid,.artyCalibrationMain{
    grid-template-columns:1fr 1fr!important;gap:8px!important;
  }
  .artyHugeBtn{min-height:56px!important;font-size:14px!important}
  .artyInput{min-height:46px!important;font-size:16px!important}
  .artyResultGrid b{font-size:14px!important}
  .artyCaptureHint{
    top:58px!important;max-width:calc(100vw - 20px);text-align:center;
    font-size:12px!important;z-index:180!important;
  }
  .gunnerOverlay{
    left:8px!important;right:8px!important;top:64px!important;width:auto!important;
    max-height:48vh!important;border-radius:20px!important;z-index:230!important;
  }
  .gunnerOverlayBody{max-height:34vh!important;font-size:12.5px!important}
  .artyMapMarker{
    width:34px!important;height:34px!important;margin-left:-17px!important;margin-top:-17px!important;font-size:17px!important;
  }
  .artyMapMarkerLabel{font-size:10.5px!important;padding:4px 7px!important}
}

@media (max-width: 430px){
  .floatingTools{grid-template-columns:repeat(2,1fr)!important;bottom:8px!important}
  .floatBtn{min-height:40px!important}
  .artyTopMapButtons,.artyActualButtons,.artyClearButtons,.artyActions,.artyGrid2,.artySelectGrid,.artySendTargetRow,.artyResultGrid,.artyCalibrationMain{grid-template-columns:1fr!important}
  .artyPanel{max-height:82vh!important}
  .gunnerOverlay{max-height:52vh!important}
}

@media (max-height: 520px) and (max-width: 980px){
  .artyPanel{
    top:8px!important;bottom:8px!important;left:auto!important;right:8px!important;
    width:min(410px,48vw)!important;max-height:calc(100vh - 16px)!important;
  }
  .gunnerOverlay{top:8px!important;max-height:calc(100vh - 16px)!important;width:min(390px,45vw)!important}
  .floatingTools{left:96px!important;right:96px!important;grid-template-columns:repeat(4,1fr)!important}
}


/* v18AE mobile: hide arty panel while picking gun/impact */
@media (max-width: 760px){
  body.mobileArtyPicking .artyPanel{
    display:none!important;
  }
  body.mobileArtyPicking .artyCaptureHint{
    display:block!important;
    top:62px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100vw - 20px)!important;
    padding:12px 16px!important;
    border-radius:999px!important;
    background:rgba(5,7,12,.94)!important;
    border:1px solid rgba(250,204,21,.52)!important;
    color:#fde68a!important;
    font-size:13px!important;
    font-weight:1000!important;
    text-align:center!important;
    box-shadow:0 16px 36px rgba(0,0,0,.46)!important;
    z-index:250!important;
  }
  body.mobileArtyPicking .openArtyFloatBtn{
    display:none!important;
  }
}


/* v18AF force hide arty panel on mobile pick */
@media (max-width: 760px){
  body.forceMobileArtyPick #artyPanel,
  body.forceMobileArtyPick .artyPanel{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.forceMobileArtyPick #artyCaptureHint{
    display:block!important;
    visibility:visible!important;
    pointer-events:none!important;
    top:62px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    width:max-content!important;
    max-width:calc(100vw - 20px)!important;
    z-index:9999!important;
  }
}


/* v18AG Mobile layout fix: free zoom buttons + higher bottom controls */
@media (max-width: 760px){
  .mobilePanelToggle{
    left:10px!important;
    top:10px!important;
    min-width:88px!important;
    min-height:44px!important;
    z-index:120!important;
  }

  .openArtyFloatBtn{
    left:auto!important;
    right:10px!important;
    top:10px!important;
    min-width:92px!important;
    min-height:44px!important;
    z-index:120!important;
    border-radius:15px!important;
  }

  /* Keep zoom controls free on the right side, under ARTY */
  .zoomBox,
  .zoomControls,
  .zoomBtns{
    right:10px!important;
    top:74px!important;
    z-index:110!important;
  }

  button[id*="zoom"],
  .zoomBtn{
    z-index:110!important;
  }

  .floatingTools{
    left:10px!important;
    right:10px!important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 54px)!important;
    display:grid!important;
    grid-template-columns:repeat(4,1fr)!important;
    gap:8px!important;
    padding:8px!important;
    border-radius:22px!important;
    background:rgba(8,13,24,.78)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    z-index:105!important;
  }

  .floatBtn{
    min-height:48px!important;
    border-radius:16px!important;
    font-size:12px!important;
    padding:0 6px!important;
  }

  .floatBtn,
  .btn,
  .quickBtn{
    white-space:normal!important;
    line-height:1.12!important;
  }

  .modeHint{
    top:58px!important;
  }

  .artyPanel{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 54px)!important;
    max-height:72vh!important;
  }

  .gunnerOverlay{
    top:calc(env(safe-area-inset-top, 0px) + 64px)!important;
    max-height:42vh!important;
  }
}

@media (max-width: 430px){
  .floatingTools{
    grid-template-columns:repeat(2,1fr)!important;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 58px)!important;
  }

  .floatBtn{
    min-height:46px!important;
    font-size:12px!important;
  }

  .artyPanel{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 58px)!important;
    max-height:70vh!important;
  }
}

@media (max-height: 520px) and (max-width: 980px){
  .mobilePanelToggle{
    left:10px!important;
    top:10px!important;
  }
  .openArtyFloatBtn{
    left:106px!important;
    right:auto!important;
    top:10px!important;
  }
  .zoomBox,
  .zoomControls,
  .zoomBtns{
    right:10px!important;
    top:10px!important;
  }
  .floatingTools{
    left:210px!important;
    right:100px!important;
    bottom:8px!important;
    grid-template-columns:repeat(4,1fr)!important;
  }
}


/* v18AH Visual Polish - safe CSS-only layer
   No IDs, JS functions, click handlers, sync logic or arty logic changed. */
:root{
  --cross-bg:#03050a;
  --cross-panel:rgba(8,12,20,.88);
  --cross-panel-soft:rgba(12,18,30,.82);
  --cross-border:rgba(255,255,255,.115);
  --cross-orange:#ff7a18;
  --cross-orange2:#ffb86b;
  --cross-blue:#38bdf8;
  --cross-green:#22c55e;
  --cross-red:#ef4444;
  --cross-glow:0 0 34px rgba(255,122,24,.13);
}
html,body{background:radial-gradient(circle at 18% 0%,rgba(255,122,24,.10),transparent 28%),var(--cross-bg)!important;}
#app{background:linear-gradient(120deg,#03050a,#050815 60%,#03050a)!important;}
.side{
  background:
    radial-gradient(circle at 0% 0%,rgba(255,122,24,.18),transparent 28%),
    radial-gradient(circle at 100% 8%,rgba(56,189,248,.09),transparent 30%),
    linear-gradient(180deg,rgba(12,17,28,.98),rgba(3,6,12,.98))!important;
  border-right:1px solid rgba(255,255,255,.10)!important;
  box-shadow:18px 0 70px rgba(0,0,0,.38)!important;
}
.side::-webkit-scrollbar,.artyPanel::-webkit-scrollbar,.gunnerOverlayBody::-webkit-scrollbar{width:10px;height:10px}
.side::-webkit-scrollbar-track,.artyPanel::-webkit-scrollbar-track,.gunnerOverlayBody::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
.side::-webkit-scrollbar-thumb,.artyPanel::-webkit-scrollbar-thumb,.gunnerOverlayBody::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,122,24,.9),rgba(56,189,248,.62));border-radius:999px;border:2px solid rgba(5,8,14,.9)}
.brand{
  background:
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),
    radial-gradient(circle at 12% 18%,rgba(255,122,24,.18),transparent 36%)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 22px 60px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06),var(--cross-glow)!important;
}
.brandLogo{box-shadow:0 15px 40px rgba(0,0,0,.42),0 0 34px rgba(255,122,24,.18),inset 0 1px 0 rgba(255,255,255,.08)!important;}
h1{letter-spacing:-.065em!important;text-shadow:0 12px 30px rgba(0,0,0,.45)!important;}
.brandBadge{
  color:#fed7aa!important;
  background:linear-gradient(90deg,rgba(255,122,24,.22),rgba(56,189,248,.10))!important;
  border-color:rgba(255,122,24,.35)!important;
  box-shadow:0 0 0 3px rgba(255,122,24,.055)!important;
}
.section,.syncPanel,.selectiveClearPanel,.advancedPanel{
  background:
    linear-gradient(180deg,rgba(15,22,35,.88),rgba(5,8,14,.88))!important;
  border:1px solid var(--cross-border)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.sectionTitle,.syncPanel summary,.selectiveClearPanel summary,.advancedPanel summary{
  color:#f8fafc!important;
  text-shadow:0 2px 12px rgba(0,0,0,.35)!important;
}
.btn,.quickBtn,.smallClearBtn,.syncBtn,.qolBtn,.floatBtn,.artyBtn,.artyClearBtn{
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.btn:hover,.quickBtn:hover,.smallClearBtn:hover,.syncBtn:hover,.qolBtn:hover,.floatBtn:hover,.artyBtn:hover,.artyClearBtn:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(255,122,24,.48)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.32),0 0 0 3px rgba(255,122,24,.08)!important;
}
.btn.active,.floatBtn.active{
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.33),transparent 30%),linear-gradient(180deg,#ff9a3d,#f97316)!important;
  color:#150903!important;
  border-color:rgba(255,190,120,.72)!important;
  box-shadow:0 18px 42px rgba(249,115,22,.28),0 0 0 3px rgba(249,115,22,.14),inset 0 1px 0 rgba(255,255,255,.25)!important;
}
input,select,.pill,.status,.syncStatus{
  background:linear-gradient(180deg,rgba(3,7,14,.92),rgba(2,4,9,.92))!important;
  border-color:rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
input:focus,select:focus{border-color:rgba(255,122,24,.72)!important;box-shadow:0 0 0 4px rgba(255,122,24,.13)!important;}
.mapWrap{background:#050814!important;}
.mapWrap:after{
  content:"";position:absolute;inset:0;z-index:13;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,transparent 48%,rgba(0,0,0,.18) 100%),
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 13%,transparent 87%,rgba(0,0,0,.28)),
    linear-gradient(180deg,rgba(0,0,0,.20),transparent 18%,transparent 84%,rgba(0,0,0,.26));
  mix-blend-mode:multiply;
}
#map{background:#07101c!important;}
.modeHint,.zoomBox button,.mobilePanelToggle,.openArtyFloatBtn,.mapOnlyReturn{
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(14px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;
}
.modeHint{background:rgba(3,7,14,.75)!important;}
.zoomBox button{background:linear-gradient(180deg,rgba(31,41,55,.92),rgba(8,13,22,.92))!important;}
.floatingTools{
  background:linear-gradient(180deg,rgba(8,13,24,.84),rgba(3,6,12,.84))!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,122,24,.07),inset 0 1px 0 rgba(255,255,255,.07)!important;
  backdrop-filter:blur(16px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.25)!important;
}
.deathMarker,.targetMarker,.spotMarker,.inspectMarker,.remoteDot,.artyMapMarker{
  box-shadow:0 0 0 4px rgba(255,255,255,.15),0 16px 34px rgba(0,0,0,.48),0 0 22px rgba(255,255,255,.13)!important;
}
.targetMarker,.remoteDot.target{box-shadow:0 0 0 4px rgba(34,197,94,.22),0 16px 34px rgba(0,0,0,.48),0 0 24px rgba(34,197,94,.35)!important;}
.deathMarker,.remoteDot.death{box-shadow:0 0 0 4px rgba(239,68,68,.20),0 16px 34px rgba(0,0,0,.48),0 0 24px rgba(239,68,68,.30)!important;}
.artyPanel{
  background:
    radial-gradient(circle at 95% 0%,rgba(249,115,22,.20),transparent 31%),
    radial-gradient(circle at 0% 12%,rgba(56,189,248,.12),transparent 33%),
    linear-gradient(180deg,rgba(12,18,31,.985),rgba(2,5,11,.985))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 34px 110px rgba(0,0,0,.68),0 0 0 1px rgba(249,115,22,.08),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.artyPanelHead{
  background:linear-gradient(90deg,rgba(249,115,22,.18),rgba(56,189,248,.08),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.08)!important;
}
.artyTitle{font-size:25px!important;text-shadow:0 14px 34px rgba(0,0,0,.45)!important;}
.artySub{color:#cbd5e1!important;}
.artyBlock,.artyResultGrid div,.artyRemoteSolution,.artyCoordDebug,.artyProfileInfo,.artyAutoChargeBox{
  border-color:rgba(255,255,255,.115)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.artySelectGo{
  background:linear-gradient(180deg,rgba(249,115,22,.13),rgba(5,7,12,.55))!important;
  border-color:rgba(249,115,22,.32)!important;
}
.artyHugeBtn.gun{background:linear-gradient(180deg,#3779ff,#1e40af)!important;box-shadow:0 18px 40px rgba(37,99,235,.26)!important;}
.artyHugeBtn.impact{background:linear-gradient(180deg,#ff8a2a,#b91c1c)!important;box-shadow:0 18px 40px rgba(249,115,22,.26)!important;}
.artyTopMapStatus{
  background:linear-gradient(90deg,rgba(250,204,21,.12),rgba(249,115,22,.08))!important;
  border-color:rgba(250,204,21,.34)!important;
}
.gunnerOverlay{
  background:linear-gradient(180deg,rgba(12,18,31,.78),rgba(2,6,23,.66))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 32px 120px rgba(0,0,0,.62),0 0 0 1px rgba(34,197,94,.08),inset 0 1px 0 rgba(255,255,255,.09)!important;
}
.gunnerOverlayHead{
  background:linear-gradient(90deg,rgba(34,197,94,.22),rgba(249,115,22,.20),rgba(56,189,248,.13))!important;
}
.gunnerOverlayTitle:before{content:"☄ ";}
.gunnerOverlayBody{font-size:13.5px!important;line-height:1.46!important;color:#dcfce7!important;}
.toast{
  background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(3,7,14,.94))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.52),0 0 0 3px rgba(255,122,24,.07)!important;
  backdrop-filter:blur(14px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.25)!important;
}
.syncPanel{border-color:rgba(56,189,248,.16)!important;}
.syncDot.on{box-shadow:0 0 0 4px rgba(34,197,94,.16),0 0 28px rgba(34,197,94,.65)!important;}
@media(max-width:900px){
  .mapWrap:after{background:radial-gradient(circle at 50% 48%,transparent 52%,rgba(0,0,0,.16) 100%)!important;}
  .artyTitle{font-size:22px!important;}
  .side{box-shadow:0 -18px 70px rgba(0,0,0,.40)!important;}
}

/* v18AI Mobile pinch zoom + touch polish */
#map,
.mapWrap,
.artyPickOverlay{
  touch-action:none;
  overscroll-behavior:none;
}
@media(max-width:900px){
  .zoomBox button{
    width:44px;
    height:44px;
  }
  .openArtyFloatBtn{
    min-width:74px;
    min-height:42px;
  }
}

/* v18AK select/dropdown readability + mobile flicker polish */
select,
.artyInput,
.syncSelect {
  color-scheme: dark;
}
select option,
.artyInput option,
.syncSelect option,
#artySendTargetSelect option,
#artyVehicleSelect option,
#artyShellSelect option {
  background: #0b0f18 !important;
  color: #f8fafc !important;
}
#artySendTargetSelect {
  background:
    linear-gradient(180deg,#080b12,#05070c) !important;
  color:#f8fafc !important;
  border-color:rgba(249,115,22,.45)!important;
  -webkit-font-smoothing:antialiased;
}
#artySendTargetSelect:focus {
  outline:none!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.16)!important;
}
@media(max-width:900px){
  .artySendTargetRow{
    grid-template-columns:1fr!important;
  }
  #artySendTargetSelect{
    min-height:46px!important;
    font-size:15px!important;
  }
}


/* v18AL Mobile sticky close menu button
   Keeps the menu close control visible while scrolling the mobile side panel. */
@media (max-width: 760px){
  .side{
    padding-top:calc(env(safe-area-inset-top, 0px) + 10px)!important;
  }
  .mobileClosePanel{
    position:sticky!important;
    top:calc(env(safe-area-inset-top, 0px) + 6px)!important;
    z-index:999!important;
    margin:0 0 12px 0!important;
    background:
      radial-gradient(circle at 15% 0%, rgba(255,255,255,.16), transparent 34%),
      linear-gradient(180deg,#b91c1c,#7f1d1d)!important;
    border:1px solid rgba(248,113,113,.42)!important;
    box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 3px rgba(239,68,68,.10)!important;
    backdrop-filter:blur(14px) saturate(1.2)!important;
    -webkit-backdrop-filter:blur(14px) saturate(1.2)!important;
  }
  .mobileClosePanel:active{
    transform:scale(.985);
  }
}

/* v18AT KOTH map preset overlay */
.kothPresetPanel{
  border-color:rgba(251,191,36,.22)!important;
  background:
    radial-gradient(circle at top right, rgba(251,191,36,.10), transparent 42%),
    linear-gradient(180deg,rgba(15,18,27,.92),rgba(7,10,16,.92))!important;
}
.kothPresetGrid{
  display:grid;
  grid-template-columns:1fr .75fr;
  gap:8px;
}
.kothPresetSelect{
  min-height:40px;
  border-radius:13px;
  font-size:12px;
  font-weight:950;
}
.kothPresetToggle{
  min-height:40px;
  border-radius:13px;
  border:1px solid rgba(251,191,36,.30);
  background:linear-gradient(180deg,#3a2a12,#171b26);
  color:#fde68a;
  font-size:11.5px;
  font-weight:1000;
  cursor:pointer;
}
.kothPresetToggle.on{
  background:linear-gradient(180deg,#f59e0b,#b45309);
  color:#120a02;
  border-color:#fbbf24;
  box-shadow:0 10px 22px rgba(245,158,11,.18);
}
.kothPresetLegend{
  margin-top:8px;
  color:#aab2c0;
  font-size:11.2px;
  line-height:1.3;
}
#kothPresetOverlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
  overflow:visible;
}
.kothZoneShape{
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}
.kothZoneLabel{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:9;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(5,8,13,.82);
  border:1px solid rgba(255,255,255,.16);
  color:#f8fafc;
  font-size:10.5px;
  font-weight:1000;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.kothZoneLabel.blue{border-color:rgba(56,189,248,.45);color:#bae6fd}
.kothZoneLabel.red{border-color:rgba(248,113,113,.45);color:#fecaca}
.kothZoneLabel.green{border-color:rgba(34,197,94,.45);color:#bbf7d0}
.kothZoneLabel.orange{border-color:rgba(251,191,36,.50);color:#fde68a}
body.kothZonesOn .modeHint:after{
  content:' · KOTH zones';
  color:#fbbf24;
}
@media(max-width:900px){
  .kothPresetGrid{grid-template-columns:1fr 1fr}
  .kothPresetSelect,.kothPresetToggle{min-height:38px;font-size:11.5px}
  .kothZoneLabel{font-size:9.5px;padding:3px 6px;opacity:.95}
}

/* v18AY KOTH visual zone editor */
.kothEditBox{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:7px;
  margin-top:9px;
}
.kothZoneSelect,.kothShapeSelect,.kothMiniBtn{
  min-height:36px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,#242936,#171b26);
  color:#f8fafc;
  font-size:11px;
  font-weight:1000;
  padding:0 8px;
}
.kothZoneSelect{
  grid-column:1/-1;
  background:#070a10;
}
.kothShapeSelect{
  grid-column:1/-1;
  background:#070a10;
  border-color:rgba(251,191,36,.22);
}
.kothShapeSelect:disabled{opacity:.55;cursor:not-allowed;}
.kothMiniBtn{cursor:pointer}
.kothMiniBtn:hover{border-color:rgba(249,115,22,.48)}
.kothMiniBtn.on{
  background:linear-gradient(180deg,#f97316,#c2410c);
  border-color:rgba(251,146,60,.65);
  color:#fff;
}
.kothMiniBtn.locked{
  background:linear-gradient(180deg,#16a34a,#166534);
  border-color:rgba(74,222,128,.45);
}
.kothMiniBtn.danger{
  background:linear-gradient(180deg,#991b1b,#7f1d1d);
  border-color:rgba(248,113,113,.35);
}
.kothMiniBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.kothEditorHint{
  margin-top:8px;
  padding:8px 9px;
  border-radius:13px;
  border:1px solid rgba(251,191,36,.22);
  background:rgba(113,63,18,.16);
  color:#fde68a;
  font-size:10.6px;
  line-height:1.28;
  font-weight:800;
}
body.kothZoneEditing #map{cursor:crosshair!important}
.kothZoneShape.selected{
  filter:drop-shadow(0 0 10px rgba(255,255,255,.38));
}
.kothZoneLabel.selected{
  border-color:rgba(255,255,255,.55)!important;
  color:#fff!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.10),0 10px 24px rgba(0,0,0,.34);
}
@media(max-width:900px){
  .kothEditBox{grid-template-columns:1fr 1fr;gap:6px}
  .kothZoneSelect{grid-column:1/-1}
  .kothMiniBtn,.kothZoneSelect,.kothShapeSelect{min-height:34px;font-size:10.5px}
  .kothEditorHint{font-size:10px}
}

/* v18AZ KOTH drag/resize editor polish */
.kothZoneShape.editable{
  pointer-events:all;
  cursor:move;
}
.kothEditHandle,
.kothCenterHandle{
  pointer-events:all;
  vector-effect:non-scaling-stroke;
  fill:#ffffff;
  stroke:#0f172a;
  stroke-width:2.5;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));
}
.kothCenterHandle{
  cursor:move;
  fill:#fbbf24;
  stroke:#fff7ed;
  stroke-width:2.8;
}
.kothEditHandle.n,.kothEditHandle.s{cursor:ns-resize}
.kothEditHandle.e,.kothEditHandle.w{cursor:ew-resize}
.kothEditHandle.ne,.kothEditHandle.sw{cursor:nesw-resize}
.kothEditHandle.nw,.kothEditHandle.se{cursor:nwse-resize}
body.kothZoneEditing #map{cursor:default!important}
body.kothZoneEditing #kothPresetOverlayWrap{touch-action:none}
@media(max-width:900px){
  .kothEditHandle{r:10px}
}

/* v18BA KOTH rotate handle + safer editor polish */
.kothRotateLine{
  pointer-events:none;
  stroke:rgba(251,191,36,.82);
  stroke-width:2.4;
  stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));
}
.kothRotateHandle{
  pointer-events:all;
  vector-effect:non-scaling-stroke;
  fill:#fbbf24;
  stroke:#fff7ed;
  stroke-width:2.8;
  cursor:grab;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.65));
}
.kothRotateHandle:active{cursor:grabbing}
body.kothZoneEditing .kothZoneShape.editable{cursor:move}


/* v18BD rectangle/square KOTH zone support */
.kothZoneShape.rect{
  stroke-linejoin:round;
}
.kothShapeSelect{
  cursor:pointer;
}

/* v18BG Charkia locked preset */
#kothAddMapBtn{
  background:linear-gradient(180deg,#14532d,#052e16);
  border-color:rgba(34,197,94,.35);
}
@media(max-width:900px){
  .kothEditBox{grid-template-columns:1fr 1fr;}
}