:root{
  --bg:#f3f5fb;
  --panel:#ffffffcc;
  --ink:#0f172a;
  --muted:#64748b;
  --ring:#6366f1;
  --error:#ef4444;
  --grid:rgba(0,0,0,.06);
  --shadow:0 14px 40px rgba(2,6,23,.14);
  --tbar-h:60px;
  --insp-w:520px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 20% -10%,#eef2ff,transparent),var(--bg);
  color:var(--ink);
  font:14px/1.45 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
}
.app{display:flex;flex-direction:column;min-height:100%}

/* Header */
header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-bottom:1px solid #e5e7eb;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));
  backdrop-filter:saturate(140%) blur(6px);
  position:sticky;top:0;z-index:30
}
header h1{margin:0;font-size:22px;line-height:1.05}
.subtitle{opacity:.7;font-size:12px}
.tools{display:flex;align-items:center;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 11px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;
  box-shadow:var(--shadow);cursor:pointer;user-select:none;transition:.15s transform,.15s filter;
  font-weight:600
}
.btn:hover{filter:brightness(.985)}
.btn:active{transform:translateY(1px)}
.btn.danger{background:#ef4444;color:#fff;border-color:transparent}

/* Layout */
.shell{display:flex;flex:1;min-height:0}
.panel{
  width:300px;min-width:240px;max-width:480px;padding:14px;background:var(--panel);
  backdrop-filter:saturate(140%) blur(6px);border-right:1px solid #e5e7eb
}
.panel h2{margin:8px 0 10px;font-size:15px}
.grid{display:grid;gap:10px}
.grid.palette{grid-template-columns:1fr 1fr}
.sep{height:1px;background:#e5e7eb;margin:12px 0}
.field{display:flex;align-items:center;justify-content:space-between;margin:6px 0;gap:8px}
.field input[type="number"],.field input[type="text"],.field input[type="color"],
.field input[type="search"],.field select{
  width:160px;padding:7px 9px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.03)
}
.field input[type="range"]{width:160px}
.resizer{
  width:6px;cursor:col-resize;background:linear-gradient(to right,#e5e7eb,#cbd5e1);
  box-shadow:inset 0 0 0 1px #e5e7eb
}

/* Workspace */
.workspace{flex:1;display:flex;align-items:stretch;justify-content:stretch;padding:14px;min-width:0}
.stageWrap{
  position:relative; /* for view label */
  flex:1;border:1px solid #e5e7eb;border-radius:16px;background:#fff;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.03);
  display:flex;flex-direction:column;overflow:hidden;min-height:calc(100vh - 120px)
}

/* View label */
.viewLabel{
  position:absolute;left:12px;top:0;transform:translateY(-56%);
  background:#eef2ff;border:1px solid #e5e7eb;border-radius:999px;
  font-size:12px;color:#334155;padding:3px 8px;box-shadow:0 2px 6px rgba(2,6,23,.08);
  pointer-events:none;z-index:21
}

/* Top bar: inspector left, meta right */
.stageTop{
  position:sticky;top:0;z-index:20;height:var(--tbar-h);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border-bottom:1px solid #e5e7eb;
  background:linear-gradient(180deg,#fff,#fafafa)
}
.roomControls{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.chip{font-size:12px;color:#334155;background:#eef2ff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 8px}
.chip.small{font-size:11px;padding:3px 7px}
.roomControls label{display:inline-flex;align-items:center;gap:6px}
.roomControls input[type="number"]{width:64px}
.roomControls input[type="range"]{width:160px}
.roomControls select{border:1px solid #e5e7eb;border-radius:10px;background:#fff;padding:4px 8px}

.inspectorBar{
  display:flex;align-items:center;gap:8px;min-width:0;
  opacity:1;visibility:visible;transition:opacity .12s;
}
.inspectorBar.hidden{opacity:.0;visibility:hidden;pointer-events:none}
.inspectorBar label{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:6px 8px}
.inspectorBar input[type="number"],.inspectorBar input[type="color"],.inspectorBar input[type="range"]{width:80px}
.inspectorBar input[type="range"]{width:120px}

.topMeta{display:flex;align-items:center;gap:8px}

/* Grid area */
.stageOuter{position:relative;flex:1;overflow:hidden;cursor:crosshair;background:#fff}
.stageOuter.panning{cursor:grabbing}
.stageOuter.spaceHold{cursor:grab}
.stage{
  position:absolute;left:0;top:0;transform-origin:top left;border-radius:0;background:#fafafa;
  will-change:transform
}
.stage.gridOn{
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px)
}

/* Items */
.item{position:absolute;transform-origin:center center;user-select:none;z-index:2;will-change:transform,left,top}
.ring{outline:2px solid transparent;border-radius:16px}
.selected{outline-color:var(--ring)}
.selectedGroup{box-shadow:0 0 0 2px rgba(99,102,241,.35) inset,var(--shadow)}
.invalid{outline-color:var(--error)}
.resize{position:absolute;width:10px;height:10px;background:#fff;border:1px solid #cbd5e1;border-radius:4px;box-shadow:var(--shadow)}
.handle-w{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.handle-d{left:50%;bottom:-5px;transform:translateX(-50%);cursor:ns-resize}
.handle-r{right:-5px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.glyph{position:absolute;left:6px;top:6px;width:16px;height:16px;opacity:.85;z-index:3}
.glyph svg{display:block;width:16px;height:16px;stroke:#0f172a}
.zone{
  background:repeating-linear-gradient(45deg,rgba(239,68,68,.1),rgba(239,68,68,.1) 10px,rgba(239,68,68,.18) 10px,rgba(239,68,68,.18) 20px)!important;
  outline:2px dashed rgba(239,68,68,.75);box-shadow:none!important
}
.zone.selected{outline-width:3px;outline-color:#ef4444}

/* HUD / status */
.hud{
  position:absolute;left:12px;bottom:12px;font-size:12px;color:#334155;background:#fffbeacc;border:1px solid #fde68a;
  box-shadow:var(--shadow);border-radius:999px;padding:6px 10px
}
.status{
  position:absolute;right:12px;bottom:12px;background:#000b;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px
}

/* Utils */
.desktopOnly{display:none}
/* .viewCtlTop – marker class pentru controalele de view din top bar (nu are stiluri de bază) */

/* Mobile defaults (hidden) */
#mobileDock{display:none}
.drawer{display:none}

/* ------------------ Mobile (<=900px) ------------------ */
@media (max-width:900px){
  header{padding:10px 12px}
  header h1{font-size:20px}
  .subtitle{display:none}
  .tools{display:none}

  .shell{flex-direction:column}
  .workspace{order:2;padding:10px}
  #panelResizer,.panel{display:none}

  /* Dock: Menu + tiny controls */
  #mobileDock{
    position:sticky;top:10px;display:flex;gap:8px;padding:0 12px 8px;z-index:25;align-items:center
  }
  #mobileDock .btn{border-radius:14px}
  #mobileCount{margin-left:auto}

  /* Drawer (bottom sheet) */
  .drawer{
    display:block;position:fixed;left:0;right:0;bottom:0;top:auto;max-height:72dvh;
    background:#fff;border-top-left-radius:18px;border-top-right-radius:18px;
    box-shadow:0 -14px 40px rgba(2,6,23,.22);transform:translateY(110%);
    transition:transform .22s ease;z-index:60;overflow:auto;border-top:1px solid #e5e7eb
  }
  .drawer.open{transform:translateY(0)}
  .drawer .closeRow{
    position:sticky;top:0;background:#fff;padding:10px;border-bottom:1px solid #eee;display:flex;justify-content:flex-end
  }

  :root{--tbar-h:56px;--insp-w:300px}
  .inspectorBar label{padding:4px 6px}
  .inspectorBar input[type="number"],.inspectorBar input[type="range"]{width:64px}
  .roomControls input[type="range"]{width:120px}

  .stageOuter{touch-action:none}
  .hud{display:none} /* hide long tips on mobile */

  /* On mobile we ascundem bara de sus, inspectorul coboară dedesubt */
  .stageTop{display:none!important}

  /* Mobile inspector dock */
  #inspectorDockMobile{display:block;padding:8px;border-top:1px solid #e5e7eb;background:#fff}
  #inspectorDockMobile .inspectorBar{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
  #inspectorDockMobile .inspectorBar label{padding:4px 6px}
  #inspectorDockMobile .inspectorBar input[type="number"]{width:64px}
  #inspectorDockMobile .inspectorBar input[type="range"]{width:110px}
  #inspectorDockMobile .btn{padding:6px 8px}
}

/* ------------------ Desktop (>=901px) ------------------ */
@media (min-width:901px){
  .viewLabel{display:none}
  .desktopOnly{display:flex}
  .roomControls{display:none}           /* am mutat view controls în panel/drawer */
  .viewCtlTop{display:none!important}   /* ascunse dacă rămân în DOM */
}