:root{
  --bg:#05070c;
  --bg-2:#0a0e16;
  --glass: rgba(10,14,22,.72);
  --glass-2: rgba(18,24,38,.55);
  --stroke: rgba(255,255,255,.07);
  --stroke-2: rgba(255,255,255,.14);
  --text:#eef2f8;
  --muted:#8a96ad;
  --accent:#5eb0ff;
  --accent-2:#7dd3fc;
  --ok:#2bd387;
  --danger:#ff5d73;
  --shadow: 0 24px 70px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.45);
  --pin-w: 70px;
  --pin-h: 92px;
  --map-bg: #5287de;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#05070c;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:inherit;color:inherit}

/* ===== Fullscreen map ===== */
#mapWrap{
  position:fixed;inset:0;
  width:100vw;height:100vh;height:100dvh;
  background: var(--map-bg);
  overflow:hidden;z-index:0;
}
#viewport{position:absolute;inset:0;cursor:grab;user-select:none;touch-action:none}
#viewport.dragging{cursor:grabbing}
#viewport.addmode,
#viewport.addmode.dragging{ cursor: crosshair; }

#stage{
  position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
}
#map{display:block;max-width:none;border-radius:0;outline:none;border:0}
#pinLayer{position:absolute;left:0;top:0;pointer-events:none}
#pinLayer .pin{pointer-events:auto}

/* ===== Pins ===== */
.pin{
  position:absolute;transform:translate(-50%,-100%);
  width:var(--pin-w);height:var(--pin-h);
  cursor:pointer;border:0;background:transparent;padding:0;
  -webkit-mask-image:url('/static/marker-shape.png');
          mask-image:url('/static/marker-shape.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.7));
  transition: transform .14s ease, filter .14s ease;
}
.pin:hover{
  transform: translate(-50%,-100%) scale(1.18);
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.75)) brightness(1.08);
}
.pin.dragging{opacity:.85}

/* ===== Floating chrome ===== */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
          backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
}

/* top bar */
.topbar{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px 0 4px}
.logo{
  width:30px;
  height:30px;
  border-radius:9px;
  object-fit:cover;
  display:block;
}
.brand-name{font-weight:700;letter-spacing:.2px;font-size:13.5px}
.brand-name span{color:var(--muted);font-weight:500;margin-left:4px}
.sep{width:1px;height:20px;background:var(--stroke-2)}
.tbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 11px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;
  transition: background .15s,border-color .15s,color .15s;
}
.tbtn:hover{background:rgba(255,255,255,.07);border-color:var(--stroke)}
.tbtn.active{background:rgba(94,176,255,.18);border-color:rgba(94,176,255,.45);color:#cfe6ff}
.tbtn .ico{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.role-chip{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:rgba(43,211,135,.12);border:1px solid rgba(43,211,135,.35);
  color:#9dffd2;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
}
.role-chip.viewer{background:rgba(140,160,200,.1);border-color:rgba(140,160,200,.25);color:#b8c4dc}

/* zoom dock */
.zoomdock{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:0;padding:5px;
  z-index:20;
}
.zbtn{
  width:38px;height:38px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.zbtn:hover{background:rgba(255,255,255,.08);border-color:var(--stroke)}
.zbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zsep{height:1px;background:var(--stroke);margin:4px 6px}
/* ===== Draggable panels ===== */
.panel{
  position:fixed;z-index:20;
  width:300px;max-height:min(70vh,620px);
  display:flex;flex-direction:column;overflow:hidden;
  padding:4px;
}
/* default placements (overridden by JS / drag) */
#catPanel{left:14px;bottom:14px}
#markerPanel{left:14px;bottom:14px;transform:translateY(-110%)}

/* When a panel is being dragged */
.panel.dragging,.topbar.dragging,.zoomdock.dragging{cursor:grabbing;opacity:.96}

/* Drag handle */
.drag-handle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;cursor:grab;
  color:var(--muted);flex-shrink:0;
  transition:background .15s,color .15s;
}
.drag-handle:hover{background:rgba(255,255,255,.07);color:var(--text)}
.drag-handle:active{cursor:grabbing}
.drag-handle svg{width:14px;height:14px;fill:currentColor}
.drag-handle-v{align-self:center;margin-bottom:2px}

.dock-section{display:flex;flex-direction:column;min-height:0}

.dock-head{
  display:flex;align-items:center;gap:6px;justify-content:space-between;
  padding:8px 10px;background:transparent;border:0;
  width:100%;cursor:default;color:var(--text);
}
.dock-toggle{
  flex:1;display:flex;align-items:center;gap:8px;min-width:0;
  background:transparent;border:0;color:var(--text);
  padding:4px 6px;border-radius:8px;cursor:pointer;transition:background .15s;
}
.dock-toggle:hover{background:rgba(255,255,255,.05)}
.head-left{display:flex;align-items:center;gap:8px;min-width:0}

.dock-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;background:transparent;border:0;
  width:100%;cursor:default;color:var(--text);
}
.dock-toggle{cursor:pointer;border-radius:10px;transition:background .15s}
.dock-toggle:hover{background:rgba(255,255,255,.04)}
.head-left{display:flex;align-items:center;gap:8px;min-width:0}
.dock-head h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#cfd6e6}
.dock-head .count{
  font-size:11px;color:var(--muted);font-weight:600;
  background:rgba(255,255,255,.05);padding:2px 9px;border-radius:999px;border:1px solid var(--stroke);
}
.chev{
  width:14px;height:14px;stroke:var(--muted);fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.dock-section.collapsed .chev{transform:rotate(-90deg)}
.dock-section.collapsed .collapsible{
  max-height:0 !important;padding-top:0 !important;padding-bottom:0 !important;
  opacity:0;pointer-events:none;
}

.dock-body{
  overflow:auto;padding:6px 8px 10px;display:grid;gap:6px;
  scrollbar-width:none;-ms-overflow-style:none;
  max-height:340px;transition:max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.dock-body::-webkit-scrollbar{width:0;height:0;display:none}

.cat-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 11px;border-radius:9px;border:1px solid transparent;cursor:pointer;
  transition:background .12s,border-color .12s;
}
.cat-row:hover{background:rgba(255,255,255,.05);border-color:var(--stroke)}
.cat-left{display:flex;align-items:center;gap:10px;min-width:0;font-size:13px}
.cat-dot{
  width:12px;
  height:12px;
  min-width:12px;
  min-height:12px;
  border-radius:50%;
  flex-shrink:0;
  display:block;

  background:var(--dot-color);

  box-shadow:
    0 0 0 3px rgba(255,255,255,.04),
    0 0 8px rgba(255,255,255,.18);

  transition:
    background .18s ease,
    opacity .18s ease,
    filter .18s ease,
    box-shadow .18s ease;
}
.cat-edit{
  opacity:0;transition:opacity .15s;
  background:transparent;border:1px solid var(--stroke);color:var(--muted);
  padding:3px 8px;border-radius:7px;font-size:11px;cursor:pointer;
}
.cat-row:hover .cat-edit{opacity:1}
.cat-edit:hover{color:var(--text);border-color:var(--stroke-2)}

.add-cat{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px;margin-top:4px;border-radius:10px;
  background:transparent;border:1px dashed var(--stroke-2);
  color:var(--muted);cursor:pointer;font-size:12px;font-weight:500;
  transition:color .15s,border-color .15s,background .15s;
}
.add-cat:hover{color:var(--text);border-color:var(--accent);background:rgba(94,176,255,.06)}

.section-divider{height:1px;background:var(--stroke);margin:4px 6px}

.marker-item{
  padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.025);
  border:1px solid var(--stroke);cursor:pointer;
  transition:transform .12s ease, background .12s, border-color .12s;
}
.marker-item:hover{background:rgba(255,255,255,.06);border-color:var(--stroke-2);transform:translateY(-1px)}
.marker-item .mt{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#dde4f1}
.marker-item p{margin:5px 0 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}

.empty{color:var(--muted);font-size:12px;padding:14px;text-align:center}

/* ===== Login ===== */
#login{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;
  background:radial-gradient(1000px 700px at 50% 30%, #1a2542 0%, #05070c 70%);
}
.login-card{
  width:min(400px,92vw);padding:30px;border-radius:20px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
          backdrop-filter:blur(22px) saturate(150%);
  border:1px solid var(--stroke-2);
  box-shadow:var(--shadow);
}
.login-card .logo{
  width:54px;
  height:54px;
  border-radius:14px;
  margin-bottom:16px;
  object-fit:cover;
}
.login-card h1{margin:0 0 4px 0;font-size:24px;font-weight:700;letter-spacing:-.3px}
.login-card p.sub{margin:0 0 22px 0;color:var(--muted);font-size:13px}
.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.input{
  width:100%;padding:12px 14px;border-radius:11px;
  background:rgba(0,0,0,.4);border:1px solid var(--stroke);
  color:var(--text);font-size:14px;outline:none;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.input:focus{border-color:var(--accent);background:rgba(0,0,0,.55);box-shadow:0 0 0 3px rgba(94,176,255,.15)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:11px;border:1px solid transparent;
  font-size:13.5px;font-weight:600;cursor:pointer;transition:transform .08s,filter .15s,background .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#5eb0ff,#2b7fe0);color:#fff;width:100%;box-shadow:0 8px 20px rgba(43,127,224,.35)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--stroke-2);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-danger{background:rgba(255,93,115,.12);border-color:rgba(255,93,115,.4);color:#ffb8c2}
.btn-danger:hover{background:rgba(255,93,115,.2)}
.login-msg{margin-top:10px;font-size:12px;color:var(--danger);min-height:16px}

/* ===== Dialogs ===== */
dialog{
  border:0;padding:0;border-radius:18px;color:var(--text);
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
          backdrop-filter:blur(24px) saturate(160%);
  border:1px solid var(--stroke-2);
  box-shadow:var(--shadow);
  width:min(580px,94vw);
  max-height:90vh;overflow:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
dialog::-webkit-scrollbar{width:0;height:0;display:none}
dialog form{max-height:90vh;display:flex;flex-direction:column}
.dlg-body{overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.dlg-body::-webkit-scrollbar{width:0;height:0;display:none}
dialog::backdrop{background:rgba(2,4,8,.6);backdrop-filter:blur(6px)}
.dlg-head{padding:20px 22px 8px}
.dlg-head h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px}
.dlg-body{padding:14px 22px 4px;display:grid;gap:12px}
.dlg-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px 18px;border-top:1px solid var(--stroke);margin-top:10px}
.row{display:grid;gap:6px}
.row.is-hidden{display:none}
.row label{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}
.row textarea,.row input,.row select{
  width:100%;padding:10px 12px;border-radius:10px;
  background:rgba(0,0,0,.35);border:1px solid var(--stroke);
  color:var(--text);font-size:13.5px;outline:none;font-family:inherit;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.row textarea:focus,.row input:focus,.row select:focus{
  border-color:var(--accent);background:rgba(0,0,0,.5);
  box-shadow:0 0 0 3px rgba(94,176,255,.15);
}
.row textarea{resize:vertical;min-height:90px}

/* Custom select chevron (replaces native UA arrow) */
.row select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a96ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:36px;
}
/* When .no-chev is added (viewer mode), hide the indicator entirely */
.row select.no-chev{
  background-image:none;padding-right:12px;pointer-events:none;
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#previewWrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:8px;
}

#previewWrap img{
  max-width:220px;
  max-height:220px;
  object-fit:cover;
  border:1px solid var(--stroke);
  border-radius:10px;
  display:block;
}
input[type=color]{height:42px;padding:4px;cursor:pointer}

/* File upload */
.file-drop{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:auto;align-self:start;
  padding:10px 16px;min-height:0;border-radius:12px;cursor:pointer;
  background:rgba(94,176,255,.06);
  border:1.5px dashed rgba(94,176,255,.4);
  color:var(--accent);
  transition:background .15s,border-color .15s,color .15s,transform .08s;
}
.file-drop:hover{background:rgba(94,176,255,.12);border-color:var(--accent);color:#cfe6ff}
.file-drop:active{transform:scale(.98)}
.file-drop .plus{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(94,176,255,.15);border:1px solid rgba(94,176,255,.45);
}
.file-drop .plus svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.file-drop .lbl{position:static;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.2px}
.file-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-drop.has-file{background:rgba(43,211,135,.08);border-color:rgba(43,211,135,.45);color:#9dffd2}
.file-drop.has-file .plus{background:rgba(43,211,135,.15);border-color:rgba(43,211,135,.45)}

/* hint pill */
.hint{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);
  padding:9px 16px;border-radius:999px;
  background:rgba(94,176,255,.16);border:1px solid rgba(94,176,255,.45);
  color:#cfe6ff;font-size:12.5px;font-weight:500;z-index:25;
  display:none;backdrop-filter:blur(10px);
}
.hint.show{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
  .panel{width:calc(100vw - 24px);max-height:50vh}
@media(max-width:720px){
  :root{ --pin-w:60px; --pin-h:80px; }
  .legend-dock{width:calc(100vw - 24px);max-height:55vh}
  .topbar{flex-wrap:wrap;left:10px;right:10px;transform:none;justify-content:center}
  .brand-name span{display:none}
  .zoomdock{right:10px}
}
/* Keskenyebb panelek */
.panel { width: 220px !important; max-width: 90vw; }

/* Térkép keret/árnyék eltávolítása */
#stage { filter: none !important; }
#map { border: 0 !important; outline: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

.toggle-dot{
  cursor:pointer;
  flex-shrink:0;
  transition:.18s ease;
}

.toggle-dot.off{
  opacity:.28;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.02),
    0 0 8px rgba(255,255,255,.06);

  filter:saturate(.15) brightness(.7);
}