/* ═══════════════════════════════════════════════════════════════════
   14 POLISH
   Premium polish (HD liquid glass pass)
   Sourced from monolithic main.css lines 5868-7043.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   LIQUID-GLASS REFINEMENT LAYER (v2 — high-fidelity)
   ───────────────────────────────────────────────────────────────────
   Aggressive polish to match `game_editor_liquid.html`.
   Source order matters: this layer is intentionally last so its
   class-level selectors win the cascade against the earlier rules.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout vars (re-declared so calc() positioning stays aligned) ── */
:root {
  --topbar-h: 50px;
  --status-h: 26px;

  /* Reference palette */
  --t-hi:  rgba(255,255,255,0.92);
  --t-med: rgba(255,255,255,0.55);
  --t-low: rgba(255,255,255,0.28);
  --t-dim: rgba(255,255,255,0.12);

  --glass-bg:           rgba(255,255,255,0.045);
  --glass-bg-md:        rgba(255,255,255,0.07);
  --glass-bg-hi:        rgba(255,255,255,0.10);
  --glass-border:       rgba(255,255,255,0.10);
  --glass-border-strong: rgba(255,255,255,0.18);
  --glass-shine:        rgba(255,255,255,0.06);
  --glass-blur:         blur(24px) saturate(180%);
  --glass-blur-sm:      blur(12px) saturate(160%);

  --acc:        #7c8fff;
  --acc-soft:   rgba(124,143,255,0.18);
  --acc-glow:   rgba(124,143,255,0.35);
  --acc-glow2:  rgba(124,143,255,0.12);

  --c-pink:     #ff6eb4;
  --c-pink-soft: rgba(255,110,180,0.15);
  --c-teal:     #38e8c8;
  --c-teal-soft: rgba(56,232,200,0.15);
  --c-amber:    #ffb347;
  --c-amber-soft: rgba(255,179,71,0.15);
  --c-rose:     #ff6070;
  --c-rose-soft: rgba(255,96,112,0.12);
  --c-mint:     #50e898;
  --c-mint-soft: rgba(80,232,152,0.12);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* ── Body: dense base, deep night background, no dotted grid ───── */
html, body { overflow: hidden; }
body {
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--t-med);
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%,  rgba(100,80,220,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 80%,  rgba(60,180,160,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 50% 50%,  rgba(80,60,180,0.08) 0%, transparent 80%),
    #05060f;
}
body::before { display: none; }    /* drop the dotted grid: too noisy under liquid glass */

/* ── Scrollbars: ultra-thin ────────────────────────────────────── */
::-webkit-scrollbar           { width: 3px; height: 3px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: rgba(255,255,255,0.10); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ═══ TITLEBAR (topbar) ══════════════════════════════════════════ */
#topbar {
  height: var(--topbar-h);
  min-height: var(--topbar-h);
  padding: 0;
  gap: 0;
  background: rgba(14, 16, 36, 0.82);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border-strong);
  box-shadow: 0 1px 0 var(--glass-shine), 0 4px 30px rgba(0,0,0,0.40);
  flex-shrink: 0;
  position: relative;
}
#topbar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 30%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.15) 70%, transparent 100%);
  pointer-events: none;
}
#topbar::after { display: none; }

/* Left brand area, separated by hairline */
.topbar-left {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  height: 100%;
  border-right: 1px solid var(--glass-border);
  flex-shrink: 0;
  min-width: 0;
}

.logo {
  width: 30px; height: 30px;
  border-radius: 10px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #a08fff 0%, #6378ff 40%, #ff6eb4 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.20),
    0 4px 18px rgba(100,80,255,0.50),
    0 0 38px rgba(100,80,255,0.20);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.logo::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

/* Brand text block: project name + subtitle with live-dot */
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.1;
}
#project-name-display {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--t-hi);
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#project-name-display:hover { color: var(--acc); }
.brand-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 400;
  color: var(--t-low);
  letter-spacing: 0.1px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 8px var(--c-mint);
  flex-shrink: 0;
  animation: livepulse 2.5s ease-in-out infinite;
}
@keyframes livepulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

.dirty-dot { color: var(--c-amber); filter: drop-shadow(0 0 5px var(--c-amber)); font-size: 9px; }

.topbar-genre-badge {
  height: 26px;
  padding: 0 11px 0 9px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--t-med);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  gap: 5px;
}
.topbar-genre-badge:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--glass-border-strong);
  color: var(--t-hi);
}
.topbar-genre-badge .genre-icon { font-size: 12px; }
.topbar-genre-badge .genre-label { color: var(--t-low); font-weight: 500; }

.topbar-sep {
  color: transparent;
  width: 1px; height: 22px;
  background: var(--glass-border);
  margin: 0 4px;
  font-size: 0;
  align-self: center;
}

.topbar-level-select {
  height: 26px;
  padding: 0 24px 0 11px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--t-hi);
  font-size: 11px; font-weight: 600;
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%);
  background-position: calc(100% - 12px) calc(50% - 1px), calc(100% - 8px) calc(50% - 1px);
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.topbar-level-select:hover { border-color: var(--glass-border-strong); }
.topbar-level-select option { background: #0c0d20; color: #e8e8ff; }

#topbar-btn-add-map,
.topbar-btn-del {
  width: 26px; height: 26px;
  border-radius: 7px;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--t-low);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
#topbar-btn-add-map:hover,
.topbar-btn-del:not(:disabled):hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--glass-border);
  color: var(--t-hi);
}
.topbar-btn-del:not(:disabled):hover { background: var(--c-rose-soft) !important; color: var(--c-rose) !important; border-color: rgba(255,96,112,0.30); }
.topbar-btn-del:disabled { opacity: 0.25; cursor: not-allowed; }

/* ═══ TAB NAV (center) ═══════════════════════════════════════════ */
.tab-nav {
  display: flex;
  height: 100%;
  gap: 0;
  flex: 1;
  justify-content: center;
  align-items: stretch;
}
.tab-btn {
  height: 100%;
  padding: 0 14px;
  border-radius: 0;
  background: transparent;
  color: var(--t-low);
  font-size: 12px; font-weight: 500;
  letter-spacing: 0;
  display: inline-flex; align-items: center;
  gap: 7px;
  position: relative;
  transition: color 0.15s;
  white-space: nowrap;
}
.tab-btn > svg {
  width: 12px; height: 12px;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.tab-btn:hover { background: transparent; color: var(--t-med); }
.tab-btn:hover > svg { opacity: 0.8; }
.tab-btn.active {
  background: transparent;
  color: var(--t-hi);
  box-shadow: none;
}
.tab-btn.active > svg { opacity: 1; }
.tab-btn.active::after {
  content: '';
  position: absolute; bottom: 0; left: 10px; right: 10px; height: 2px;
  background: linear-gradient(90deg, var(--acc), var(--c-pink));
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 10px var(--acc-glow);
}

/* ═══ TOPBAR RIGHT (peers + actions) ═════════════════════════════ */
.topbar-right {
  height: 100%;
  display: flex; align-items: center;
  gap: 6px;
  padding: 0 14px;
  border-left: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.peers-indicator { gap: 3px; padding: 0 4px; }
.peer-dot { font-size: 12px; }

/* PLAY button — green semantic kept, glass finish */
.btn-play {
  height: 30px;
  padding: 0 14px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4be695 0%, #2bbb6c 100%);
  color: #002a14;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.22);
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 18px rgba(61,220,132,0.40);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
}
.btn-play > svg { width: 11px; height: 11px; flex-shrink: 0; }
.btn-play::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%);
  border-radius: 9px 9px 0 0;
  pointer-events: none;
}
.btn-play:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 0 1px rgba(255,255,255,0.10),
    0 8px 26px rgba(61,220,132,0.50);
}

/* Icon buttons in topbar */
.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.03);
  color: var(--t-med);
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-icon > svg {
  width: 17px; height: 17px;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-icon:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--glass-border-strong);
  color: var(--t-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.btn-icon.active {
  background: var(--acc-soft);
  border-color: rgba(124,143,255,0.40);
  color: #d0d8ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 18px var(--acc-glow2);
}
/* Smaller icon buttons inside the map toolbar / VFX preview / etc. keep the
   original compact size — only the topbar wants the bigger affordance. */
.map-toolbar .btn-icon,
.preview-toolbar .btn-icon,
.audio-transport .btn-icon,
.vfx-preview-toolbar .btn-icon {
  width: 30px; height: 30px;
  background: transparent;
}
.map-toolbar .btn-icon > svg,
.preview-toolbar .btn-icon > svg,
.audio-transport .btn-icon > svg,
.vfx-preview-toolbar .btn-icon > svg {
  width: 14px; height: 14px;
  stroke-width: 1.4;
}

.btn-git {
  width: auto;
  height: 26px;
  padding: 0 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--t-med);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#btn-git-pull:not(:disabled):hover {
  background: rgba(56,232,200,0.10) !important;
  color: var(--c-teal) !important;
  border-color: rgba(56,232,200,0.35);
}
#btn-git-push:not(:disabled):hover {
  background: rgba(124,143,255,0.10) !important;
  color: #b6c1ff !important;
  border-color: rgba(124,143,255,0.35);
}

/* ═══ MAIN AREA ══════════════════════════════════════════════════ */
#main { position: relative; }

/* ═══ PANELS ═════════════════════════════════════════════════════ */
.panel {
  border-right: 1px solid var(--glass-border);
  position: relative;
}
.panel-left,
.panel-right {
  background: rgba(8, 9, 26, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.panel-left::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 70%, transparent);
  pointer-events: none;
}
.panel-right { border-right: none; border-left: 1px solid var(--glass-border); }
.panel-right::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08) 30%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 70%, transparent);
  pointer-events: none;
}
.panel-center { background: transparent; }

.panel-header {
  height: 40px;
  padding: 0 14px;
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--t-low);
  position: relative;
}
.panel-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--glass-shine);
  pointer-events: none;
}

.lib-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 10px 6px;
  border-bottom: none;
  background: transparent;
}
.lib-controls > .inp-search,
.lib-controls > .sel-sm,
.lib-controls > input,
.lib-controls > select {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.inp-search {
  height: 30px;
  padding: 0 14px 0 32px;
  border-radius: 99px;
  background-color: rgba(0,0,0,0.30);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><circle cx='6.5' cy='6.5' r='4.5' stroke='rgba(255,255,255,0.35)' stroke-width='1.4'/><line x1='10' y1='10' x2='14' y2='14' stroke='rgba(255,255,255,0.35)' stroke-width='1.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 12px 12px;
  border: 1px solid var(--glass-border);
  font-family: var(--font);
  font-size: 11px;
  color: var(--t-hi);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.inp-search::placeholder { color: var(--t-dim); }
.inp-search:focus {
  border-color: rgba(124,143,255,0.45);
  background-color: rgba(0,0,0,0.42);
  box-shadow: 0 0 0 3px var(--acc-soft), inset 0 1px 0 rgba(255,255,255,0.04);
}

.sel-sm {
  height: 30px;
  padding: 0 28px 0 12px;
  border-radius: 99px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  font-size: 11px; font-weight: 500;
  color: var(--t-hi);
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.45) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.45) 50%, transparent 50%);
  background-position: calc(100% - 13px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.sel-sm option { background: #0c0d20; color: #e8e8ff; }

/* ═══ ITEM LIST (asset library, etc.) ════════════════════════════ */
.item-list { padding: 4px 8px 10px; gap: 1px; }
.item-row {
  height: 36px; min-height: 36px;
  padding: 0 12px;
  gap: 9px;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  background: transparent;
  transition: background 0.1s;
}
.item-row:hover  { background: rgba(255,255,255,0.03); }
.item-row.active {
  background: rgba(124,143,255,0.08);
  color: var(--t-hi);
}
.item-row.active::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--acc), var(--c-pink));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--acc-glow);
}
.item-row .thumb {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.item-row .item-name { font-size: 11.5px; font-weight: 500; color: var(--t-med); }
.item-row.active .item-name { color: var(--t-hi); }
.item-row .item-sub { font-size: 10px; color: var(--t-dim); }
.item-row .btn-tiny {
  width: 22px; height: 22px;
  border-radius: 5px;
  font-size: 11px;
  background: transparent;
  color: var(--t-low);
}
.item-row .btn-tiny:hover { background: rgba(255,255,255,0.06); color: var(--t-hi); }

/* Asset category */
.asset-category-section { gap: 0; }
.asset-category-header {
  height: 30px; min-height: 30px;
  padding: 0 14px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--t-low);
}
.asset-category-header:hover { background: rgba(255,255,255,0.025); }
.asset-category-caret { color: var(--t-dim); }
.asset-category-count {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--t-dim);
  font-family: var(--mono);
  font-size: 9px; font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 0;
}
.asset-category-body { padding-left: 8px; gap: 1px; }
.asset-category-body .item-row { border-left: none; border-radius: 8px; }

/* ═══ TAG / BADGE PILLS ══════════════════════════════════════════ */
.tag-badge {
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.6px;
  background: rgba(255,255,255,0.06);
  color: var(--t-med);
  text-transform: uppercase;
}
.tag-badge[data-tag="main_character"] { background: var(--acc-soft);     color: #b6c1ff; }
.tag-badge[data-tag="enemy"]          { background: var(--c-rose-soft);  color: var(--c-rose); }
.tag-badge[data-tag="npc"]            { background: var(--c-teal-soft);  color: var(--c-teal); }
.tag-badge[data-tag="boss"]           { background: var(--c-amber-soft); color: var(--c-amber); }
.tag-badge[data-tag="prop"]           { background: rgba(255,255,255,0.06); color: var(--t-med); }
.tag-badge[data-tag="collectible"]    { background: var(--c-amber-soft); color: var(--c-amber); }
.tag-badge[data-tag="terrain"]        { background: var(--c-mint-soft);  color: var(--c-mint); }
.tag-badge[data-tag="decoration"]     { background: var(--c-pink-soft);  color: var(--c-pink); }
.tag-badge[data-tag="hazard"]         { background: var(--c-rose-soft);  color: var(--c-rose); }
.tag-badge[data-tag="trigger_zone"]   { background: var(--c-pink-soft);  color: var(--c-pink); }

/* ═══ ASSET PREVIEW (assets tab center) ══════════════════════════ */
.asset-canvas {
  border-color: var(--glass-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.preview-toolbar button {
  height: 28px;
  padding: 0 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--t-med);
}
.preview-toolbar button:hover {
  background: rgba(255,255,255,0.08);
  color: var(--t-hi);
  border-color: var(--glass-border-strong);
}
.frame-strip {
  background: rgba(0,0,0,0.22);
  border-color: var(--glass-border);
  border-radius: 10px;
  padding: 6px;
}
.frame-thumb { border-radius: 6px; border-color: transparent; }
.frame-thumb.active { border-color: var(--acc); box-shadow: 0 0 10px var(--acc-glow); }

/* ═══ INSPECTOR (right panel) ════════════════════════════════════ */
.inspector-content { padding: 0; }
.inspector-section {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--glass-border);
  margin: 0;
  padding: 14px 16px;
}
.inspector-section h3 {
  margin: 0 0 10px;
  padding: 0;
  border: none;
  font-family: var(--font);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--t-low);
  text-transform: uppercase;
}
.inspector-section.collapsible h3::before { color: var(--t-dim); }

.form-row { margin-bottom: 8px; gap: 8px; }
.form-row label,
.form-grid label {
  font-size: 10px; font-weight: 500;
  color: var(--t-low);
  letter-spacing: 0.1px;
  min-width: 58px; width: auto;
}
.form-row .inp,
.form-row input[type="text"],
.form-row input[type="number"],
.form-row select,
.form-grid .inp,
.form-grid input,
.form-grid select {
  height: 28px;
  padding: 0 7px;        /* tight: leaves room for 4-char numbers like "-180" inside 64px boxes */
  border-radius: 8px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--t-hi);
  min-width: 0;          /* let flex children actually shrink instead of overflowing */
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.form-row input[type="color"] { padding: 2px; }
/* Number inputs in compact rows: right-align so the most significant digit is
   always visible if the value gets truncated. */
.form-row input[type="number"] { text-align: right; }
/* Range inputs inside form rows: ensure they actually shrink to fill remaining
   width and don't push the number readout off-canvas. */
.form-row input[type="range"] { min-width: 0; }
/* Generic safety: any inline-flex-of-controls inside a form-row should be
   able to shrink so its trailing number input is fully visible. */
.form-row > div { min-width: 0; }
.form-row .inp:focus,
.form-row input:focus,
.form-row select:focus,
.form-grid .inp:focus,
.form-grid input:focus,
.form-grid select:focus {
  border-color: rgba(124,143,255,0.45);
  background: rgba(0,0,0,0.40);
  box-shadow: 0 0 0 3px var(--acc-soft), inset 0 1px 0 rgba(255,255,255,0.04);
}
.form-row select option,
.form-grid select option { background: #0c0d20; color: #e8e8ff; }

/* ═══ BUTTONS (general) ══════════════════════════════════════════ */
.btn-sm {
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  font-family: var(--font);
  font-size: 11px; font-weight: 500;
  color: var(--t-med);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-sm:hover {
  background: rgba(255,255,255,0.08);
  color: var(--t-hi);
  border-color: var(--glass-border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn-accent {
  background: linear-gradient(135deg, #7c8fff 0%, #5f6fff 100%);
  color: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.20);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 18px var(--acc-glow);
  position: relative;
}
.btn-accent::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  border-radius: 8px 8px 0 0;
  pointer-events: none;
}
.btn-accent:hover {
  filter: none;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 0 0 1px rgba(255,255,255,0.10),
    0 8px 26px var(--acc-glow);
}
.btn-danger {
  background: var(--c-rose-soft);
  color: var(--c-rose);
  border: 1px solid rgba(255,96,112,0.25);
  font-weight: 700;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-danger:hover {
  background: rgba(255,96,112,0.2);
  border-color: rgba(255,96,112,0.5);
  box-shadow: 0 0 20px rgba(255,96,112,0.15), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 1;
}

/* ═══ MAP TOOLBAR ════════════════════════════════════════════════ */
.map-toolbar {
  height: 42px;
  padding: 0 14px;
  gap: 3px;
  background: rgba(8, 9, 26, 0.50);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.map-toolbar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--glass-shine);
  pointer-events: none;
}
.map-toolbar .btn-icon {
  width: 30px; height: 30px;
  font-size: 13px;
  border-radius: 8px;
}
.map-toolbar .sep {
  width: 1px; height: 20px;
  background: var(--glass-border);
  color: transparent;
  margin: 0 5px;
  display: inline-block;
}
.zoom-label {
  height: 28px;
  min-width: 50px;
  padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--t-med);
  margin: 0 2px;
}
.coords-info {
  height: 28px;
  padding: 0 12px;
  display: inline-flex; align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.30);
  border: 1px solid var(--glass-border);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.3px;
}
.coords-info .caxis {
  font-family: var(--font);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-right: 4px;
}
.coords-info .cx { color: #ff8080; }
.coords-info .cy { color: var(--c-teal); }
.coords-info .cval { color: rgba(255,255,255,0.78); }
.coords-info .csep { color: rgba(255,255,255,0.18); margin: 0 2px; }

/* ═══ MINI-MAP ═══════════════════════════════════════════════════ */
.map-minimap {
  background: rgba(6, 8, 20, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: var(--glass-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 30px rgba(0,0,0,0.45);
}
.map-minimap-toggle {
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(0,0,0,0.50);
  color: var(--t-med);
}
.map-minimap-toggle:hover { background: rgba(0,0,0,0.75); color: var(--t-hi); }
.map-minimap-show {
  background: rgba(6, 8, 20, 0.7);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-color: var(--glass-border);
  color: var(--t-med);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 18px rgba(0,0,0,0.4);
}
.map-minimap-show:hover { border-color: var(--glass-border-strong); color: var(--t-hi); }

/* ═══ LAYER PANEL ════════════════════════════════════════════════ */
.layer-panel {
  background: rgba(8, 9, 26, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  min-height: 134px;
  position: relative;
}
.layer-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--glass-shine);
  pointer-events: none;
}
.layer-panel-header {
  background: transparent;
  border-bottom: 1px solid var(--glass-border);
  height: 32px;
  padding: 0 14px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--t-low);
}
.layer-row {
  height: 30px;
  padding: 0 12px;
  gap: 8px;
  position: relative;
  border-left: none !important;
  background: transparent;
  cursor: pointer;
}
.layer-row:hover { background: rgba(255,255,255,0.025); }
.layer-row.active {
  background: rgba(124,143,255,0.07);
}
.layer-row.active::before {
  content: '';
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 2px;
  background: linear-gradient(180deg, var(--acc), var(--c-pink));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--acc-glow);
}
.layer-grip { color: var(--t-dim); }
.layer-grip:hover { color: var(--t-med); }
.layer-vis, .layer-lock { color: var(--t-dim); }
.layer-vis.on, .layer-lock.on, .layer-vis:hover, .layer-lock:hover { color: var(--t-hi); }
.layer-name { font-size: 11px; color: var(--t-med); }
.layer-row.active .layer-name { color: var(--t-hi); }
.layer-type-badge {
  font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px;
  background: var(--acc-soft);
  color: #b6c1ff;
}
.layer-count-badge {
  font-family: var(--mono);
  font-size: 9px; font-weight: 600;
  padding: 1px 7px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  color: var(--t-dim);
  min-width: 0;
}
.layer-count-badge.has-items {
  background: var(--c-teal-soft);
  border-color: rgba(56,232,200,0.25);
  color: var(--c-teal);
}

/* Instance list rows */
.layer-instance-list { padding: 0 0 4px 24px; }
.inst-row {
  padding: 3px 8px 3px 6px;
  border-radius: 6px;
  font-size: 10.5px;
  border-left: none !important;
  position: relative;
}
.inst-row:hover { background: rgba(255,255,255,0.03); }
.inst-row.selected {
  background: rgba(124,143,255,0.10);
  color: var(--t-hi);
}
.inst-row.selected::before {
  content: '';
  position: absolute; left: -10px; top: 4px; bottom: 4px; width: 2px;
  background: linear-gradient(180deg, var(--acc), var(--c-pink));
  border-radius: 0 2px 2px 0;
}
.inst-row-name { color: var(--t-med); }
.inst-row.selected .inst-row-name { color: var(--t-hi); }
.inst-row-info { color: var(--t-dim); }
.inst-spawn-badge {
  background: var(--c-mint-soft) !important;
  color: var(--c-mint) !important;
  border-radius: 99px;
  letter-spacing: 0.5px;
}
.inst-pet-badge   { background: var(--c-teal-soft) !important; color: var(--c-teal) !important; border-radius: 99px; }
.inst-event-badge { background: var(--c-pink-soft) !important; color: var(--c-pink) !important; border-radius: 99px; }
.inst-tag-badge   {
  background: rgba(255,255,255,0.06);
  color: var(--t-low);
  border-radius: 99px;
  letter-spacing: 0.3px;
}

/* ═══ STATUSBAR (signature purple band) ══════════════════════════ */
#statusbar {
  height: var(--status-h);
  padding: 0 16px;
  gap: 14px;
  background: linear-gradient(90deg, rgba(100,80,255,0.70) 0%, rgba(80,60,220,0.70) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -1px 0 rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.12);
  font-family: var(--font);
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.78);
  position: relative;
  z-index: 50;
}
#statusbar > *,
#statusbar span,
#statusbar div { color: inherit; }
.save-ok    { color: #c4ffd9 !important; }
.save-dirty { color: #ffe9a8 !important; }
.statusbar-right { color: rgba(255,255,255,0.62); margin-left: auto; }
.status-version {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 500;
  color: rgba(255,255,255,0.60);
  opacity: 1;
  letter-spacing: 0.02em;
}
.status-version:hover { color: rgba(255,255,255,0.92); }
#btn-undo, #btn-redo {
  width: 22px; height: 22px;
  border-radius: 5px;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
}
#btn-undo:not([disabled]):hover,
#btn-redo:not([disabled]):hover { background: rgba(255,255,255,0.18); color: #fff; }
#btn-undo[disabled], #btn-redo[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ═══ MISC: placeholders, modal, tooltips ════════════════════════ */
.placeholder-msg { color: var(--t-low); padding: 16px; }
.placeholder-msg .hint { color: var(--t-dim); font-size: 11px; }
.hint { color: var(--t-dim); font-size: 11px; }

/* ═══ CONTEXT MENU (right-click) ═════════════════════════════════ */
.ctx-menu {
  min-width: 220px;
  padding: 5px;
  background: rgba(12, 14, 30, 0.92);
  border: 1px solid var(--glass-border-strong);
  border-radius: 12px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-family: var(--font);
  font-size: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.5);
}
.ctx-menu-item {
  padding: 7px 10px;
  border-radius: 7px;
  color: var(--t-med);
  gap: 10px;
  transition: background 0.08s, color 0.08s;
}
.ctx-menu-item.is-focused,
.ctx-menu-item:hover:not(.is-disabled) {
  background: rgba(124,143,255,0.18);
  color: var(--t-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ctx-menu-item.is-disabled {
  color: var(--t-dim);
  opacity: 0.6;
}
.ctx-menu-item.is-danger { color: var(--c-rose); }
.ctx-menu-item.is-danger.is-focused,
.ctx-menu-item.is-danger:hover:not(.is-disabled) {
  background: var(--c-rose-soft);
  color: var(--c-rose);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.ctx-menu-icon {
  width: 14px;
  font-size: 11px;
  opacity: 0.7;
}
.ctx-menu-item.is-focused .ctx-menu-icon,
.ctx-menu-item:hover:not(.is-disabled) .ctx-menu-icon { opacity: 1; }
.ctx-menu-shortcut {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--t-dim);
  letter-spacing: 0.3px;
}
.ctx-menu-item.is-focused .ctx-menu-shortcut,
.ctx-menu-item:hover:not(.is-disabled) .ctx-menu-shortcut {
  color: rgba(255,255,255,0.55);
}
.ctx-menu-sep {
  height: 1px;
  margin: 4px 4px;
  background: var(--glass-border);
}

/* ═══ VFX LIBRARY (left panel redesign) ══════════════════════════ */
.vfx-section-title {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t-low);
}
.vfx-presets {
  padding: 12px 10px 10px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}
.vfx-presets > .vfx-section-title { margin-bottom: 8px; }
.vfx-presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.vfx-preset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 58px;
  padding: 6px 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--t-low);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
  position: relative;
  overflow: hidden;
}
.vfx-preset::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  pointer-events: none;
}
.vfx-preset:hover {
  background: rgba(255,255,255,0.07);
  border-color: var(--glass-border-strong);
  color: var(--t-hi);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.3);
}
.vfx-preset:active { transform: translateY(0); }
.vfx-preset-emoji {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.vfx-preset-name {
  font-size: 9.5px;
  letter-spacing: 0.2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.vfx-section-divider {
  padding: 12px 14px 4px;
}

/* Per il list dei VFX dell'utente — riga compatta con palline-colore */
#vfx-list { padding: 4px 8px 10px; }
#vfx-list .item-row {
  padding: 0 10px;
  gap: 9px;
  min-height: 36px;
  border-radius: 8px;
}
#vfx-list .item-row.selected { background: rgba(124,143,255,0.10); }
#vfx-list .item-row.selected::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(180deg, var(--acc), var(--c-pink));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--acc-glow);
}

/* Global input look — fall-back for anything not theming itself */
input, select, textarea {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--t-hi);
  font-family: var(--font);
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(124,143,255,0.45);
  background: rgba(0,0,0,0.42);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
select option { background: #0c0d20; color: #e8e8ff; }