:root{ 
  --bg:#121212; 
  --bg2:#1e1e1e; 
  --card:#2a2a2a; 
  --ink:#eee; 
  --ink2:#bbb; 
  --accent:#4fc3f7; 
}

*{ box-sizing:border-box }

body{ 
  margin:0; 
  font-family:system-ui,ui-sans-serif; 
  background:var(--bg); 
  color:var(--ink); 
  height:100vh; 
  display:flex; 
  flex-direction:column; 
}

/* Top Bar */
.topbar{ 
  display:flex; 
  gap:0; 
  background:#1e1e1e; 
  box-shadow:0 2px 8px rgba(0,0,0,.5); 
  z-index:10; 
}

.topbar button{ 
  flex:1; 
  background:none; 
  border:none; 
  color:var(--ink); 
  padding:.9rem 0; 
  font-size:1.2rem; 
  cursor:pointer; 
}

.topbar button:hover{ 
  color:var(--accent); 
  background:#262626; 
}

/* Panels */
.panel{ 
  max-height:0; 
  overflow:hidden; 
  background:#1b1b1b; 
  transition:max-height .35s ease; 
  border-bottom:1px solid #242424; 
}

.panel.open{ 
  max-height:360px; 
}

/* Settings (steppers) */
.settings-track{ 
  display:flex; 
  gap:1rem; 
  overflow-x:auto; 
  padding:.6rem 1rem; 
}

.stepper{ 
  flex:0 0 auto; 
  background:var(--card); 
  border:1px solid #333; 
  border-radius:.6rem; 
  padding:.5rem; 
  min-width:122px; 
  text-align:center; 
}

.stepper label{ 
  display:block; 
  font-size:.8rem; 
  color:var(--ink2); 
  margin-bottom:.35rem; 
}

.stepper-controls{ 
  display:flex; 
  align-items:center; 
  background:#1e1e1e; 
  border-radius:.5rem; 
  overflow:hidden; 
}

.stepper button{ 
  background:#333; 
  border:none; 
  color:var(--ink); 
  font-size:1.1rem; 
  padding:.35rem 0; 
  width:34%; 
  cursor:pointer; 
}

.stepper button:hover{ 
  background:var(--accent); 
  color:#000; 
}

.stepper input{ 
  flex:1; 
  background:#1e1e1e; 
  border:none; 
  color:var(--ink); 
  text-align:center; 
  padding:.25rem 0; 
  font-size:1rem; 
  width:56px; 
}

/* Gallery (PHP) */
.folder-bar{ 
  display:flex; 
  align-items:center; 
  gap:.5rem; 
  padding:.6rem 1rem; 
  border-bottom:1px solid #242424; 
}

.crumbs{ 
  display:flex; 
  flex-wrap:wrap; 
  gap:.4rem; 
  font-size:.9rem; 
}

.crumbs button{ 
  background:none; 
  border:none; 
  color:var(--accent); 
  cursor:pointer; 
  padding:.2rem .3rem; 
}

.crumbs .sep{ 
  color:#666; 
}

.folders-track, .gallery-track{ 
  display:flex; 
  gap:.8rem; 
  overflow-x:auto; 
  padding:.8rem 1rem; 
}

.folder-card{ 
  flex:0 0 auto; 
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  background:#222; 
  border:1px solid #333; 
  border-radius:.7rem; 
  padding:.55rem .75rem; 
  cursor:pointer; 
}

.folder-card:hover{ 
  border-color:var(--accent); 
  background:#2f2f2f; 
}

.gallery-track img{ 
  width:220px; 
  height:150px; 
  object-fit:cover; 
  border-radius:.8rem; 
  background:#333; 
  flex-shrink:0; 
  border:1px solid #333; 
  cursor:pointer; 
}

.gallery-track img:hover{ 
  border-color:var(--accent); 
}

.empty-hint{ 
  color:#aaa; 
  font-size:.9rem; 
  padding:0 1rem .8rem 1rem; 
}

/* Main content */
.content{ 
  flex:1; 
  display:flex; 
  flex-direction:column; 
  gap:.6rem; 
  padding:1rem; 
}

.meta{ 
  font-size:.9rem; 
  color:#cfcfcf; 
  opacity:.9; 
}

/* Objects bar */
.objects { 
  display:flex; 
  align-items:center; 
  gap:.5rem; 
  background:#161616; 
  border:1px solid #2a2a2a; 
  border-radius:.6rem; 
  padding:.5rem .6rem; 
}

.obj-pill{ 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:999px; 
  padding:.35rem .7rem; 
  cursor:pointer; 
}

.obj-pill.active{ 
  background:var(--accent); 
  color:#000; 
  border-color:transparent; 
}

.objects .controls{ 
  display:flex; 
  gap:.4rem; 
  margin-left:auto; 
}

.objects .controls button{ 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:.5rem; 
  padding:.35rem .6rem; 
  cursor:pointer; 
}

.objects .controls button:hover{ 
  background:var(--accent); 
  color:#000; 
  border-color:transparent; 
}

/* Lines (within active object) */
.lines { 
  display:flex; 
  gap:.5rem; 
  align-items:center; 
  flex-wrap:wrap; 
  background:#161616; 
  border:1px solid #2a2a2a; 
  border-radius:.6rem; 
  padding:.5rem .6rem; 
}

.line-pill{ 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:999px; 
  padding:.35rem .7rem; 
  cursor:pointer; 
}

.line-pill.active{ 
  background:var(--accent); 
  color:#000; 
  border-color:transparent; 
}

.lines .controls{ 
  display:flex; 
  gap:.4rem; 
  margin-left:auto; 
}

.lines .controls button{ 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:.5rem; 
  padding:.35rem .6rem; 
  cursor:pointer; 
}

.lines .controls button:hover{ 
  background:var(--accent); 
  color:#000; 
  border-color:transparent; 
}

/* Tank (for active line) */
.tank { 
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  background:#161616; 
  border:1px solid #2a2a2a; 
  border-radius:.6rem; 
  padding:.5rem .6rem; 
}

.tank .count{ 
  color:#bbb; 
  font-size:.9rem; 
}

.tank-strip{ 
  display:flex; 
  gap:.5rem; 
  overflow-x:auto; 
  padding:.3rem; 
  background:#0f0f0f; 
  border-radius:.4rem; 
  border:1px dashed #333; 
  flex:1; 
}

.tank-item{ 
  position:relative; 
  flex:0 0 auto; 
  width:72px; 
  height:72px; 
  border:1px solid #2a2a2a; 
  border-radius:.35rem; 
  overflow:hidden; 
  background:#111; 
}

.tank-item img{ 
  width:100%; 
  height:100%; 
  object-fit:contain; 
  image-rendering:pixelated; 
  display:block; 
}

.badge{ 
  position:absolute; 
  left:4px; 
  top:4px; 
  background:#000c; 
  color:#fff; 
  border-radius:.3rem; 
  padding:.05rem .3rem; 
  font-weight:700; 
  font-size:.85rem; 
}

.remove{ 
  position:absolute; 
  right:4px; 
  top:4px; 
  background:#000c; 
  color:#fff; 
  border:none; 
  border-radius:.3rem; 
  padding:.05rem .35rem; 
  cursor:pointer; 
  font-size:.85rem; 
}

.remove:hover{ 
  background:#f44336; 
}

/* Stage */
.stage{ 
  position:relative; 
  flex:1; 
  background:#0f0f0f; 
  border:1px solid #2a2a2a; 
  border-radius:.8rem; 
  overflow:hidden; 
  touch-action:none; 
}

.viewport{ 
  position:absolute; 
  left:0; 
  top:0; 
  transform-origin:0 0; 
  will-change: transform; 
}

.img-layer{ 
  position:absolute; 
  left:0; 
  top:0; 
}

.img-layer img{ 
  display:block; 
  image-rendering:pixelated; 
}

.grid{ 
  position:absolute; 
  left:0; 
  top:0; 
  pointer-events:auto; 
}

.tile{ 
  position:absolute; 
  border:1px solid red; 
  box-sizing:border-box; 
  pointer-events:auto; 
}

/* Full-screen Object View */
.overlay{ 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,.85); 
  display:none; 
  z-index:50; 
}

.overlay.open{ 
  display:block; 
}

.ov-wrap{ 
  position:absolute; 
  inset:3%; 
  background:#111; 
  border:1px solid #333; 
  border-radius:.8rem; 
  display:flex; 
  flex-direction:column; 
  overflow:hidden; 
}

.ov-head{ 
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  padding:.6rem .8rem; 
  background:#1b1b1b; 
  border-bottom:1px solid #222; 
}

.ov-head h2{ 
  margin:0; 
  font-size:1.05rem; 
  color:var(--accent); 
}

.ov-head button{ 
  margin-left:auto; 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:.5rem; 
  padding:.35rem .6rem; 
  cursor:pointer; 
}

.ov-head button:hover{ 
  background:var(--accent); 
  color:#000; 
  border-color:transparent; 
}

.ov-body{ 
  flex:1; 
  overflow:auto; 
  padding:.8rem; 
  display:flex; 
  flex-direction:column; 
  gap:.8rem; 
}

/* Attribute editors inside overlay */
.attr-row { 
  display:flex; 
  gap:.4rem; 
  margin:.35rem 0; 
  align-items:center; 
}

.attr-row input{ 
  padding:.35rem .5rem; 
  background:#1e1e1e; 
  border:1px solid #333; 
  border-radius:.35rem; 
  color:#eee; 
}

.attr-row .attr-key{ 
  flex:0 0 180px; 
}

.attr-row .attr-val{ 
  flex:1; 
}

.attr-del{ 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:.35rem; 
  padding:.35rem .5rem; 
  cursor:pointer; 
}

.attr-del:hover{ 
  background:#f44336; 
}

.attr-add{ 
  background:#222; 
  color:#ddd; 
  border:1px solid #333; 
  border-radius:.35rem; 
  padding:.35rem .6rem; 
  cursor:pointer; 
}

.attr-add:hover{ 
  background:var(--accent); 
  color:#000; 
}

.ov-line{ 
  background:#151515; 
  border:1px solid #2a2a2a; 
  border-radius:.6rem; 
  padding:.6rem; 
}

.ov-line h3{ 
  margin:.1rem 0 .5rem; 
  font-size:.95rem; 
  color:#ddd; 
}

.ov-strip{ 
  display:flex; 
  gap:.5rem; 
  flex-wrap:wrap; 
}

.ov-item{ 
  position:relative; 
  width:80px; 
  height:80px; 
  border:1px solid #333; 
  border-radius:.35rem; 
  overflow:hidden; 
  background:#111; 
}

.ov-item img{ 
  width:100%; 
  height:100%; 
  object-fit:contain; 
  image-rendering:pixelated; 
}

.ov-badge{ 
  position:absolute; 
  left:4px; 
  top:4px; 
  background:#000c; 
  color:#fff; 
  border-radius:.3rem; 
  padding:.05rem .35rem; 
  font-weight:700; 
  font-size:.85rem; 
}