/* Poster Studio styles */
:root{
  --bg: #0b1020;
  --panel: #11162a;
  --muted: #778;
  --text: #e9ecf8;
  --accent: #7c9cff;
  --accent-2: #22cc88;
  --border: #1f2741;
}
:root.light{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --muted:#667085;
  --text:#0f1222;
  --accent:#4f46e5;
  --accent-2:#059669;
  --border:#e6e8f0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins", system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
button,select,input,dialog,textarea{font-family:inherit}
#app{display:flex; flex-direction:column; min-height:100dvh}

.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:700}
.toolbar{display:flex; gap:8px; align-items:center}
.toolbar button{
  background:transparent; border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:10px; cursor:pointer
}
.toolbar button.primary{background:var(--accent); border-color:var(--accent); color:white}
.toolbar button:hover{filter:brightness(1.1)}
#zoomInfo{min-width:56px; text-align:center; color:var(--muted)}

.switch{position:relative; display:inline-block; width:44px; height:24px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; inset:0; background:#7774; border:1px solid var(--border); border-radius:999px; transition:.2s}
.slider:before{content:""; position:absolute; height:18px; width:18px; left:3px; top:50%; transform:translateY(-50%); background:white; border-radius:50%; transition:.2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{left:23px}
.toggle-label{margin-left:6px; color:var(--muted); font-size:12px}

.layout{display:grid; grid-template-columns: 300px 1fr 300px; gap:12px; padding:12px}
.sidebar{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:12px; display:flex; flex-direction:column; gap:12px; min-height:0}
.sidebar h3{margin:.3rem 0 .6rem 0}
.panel{background:transparent; border:1px dashed var(--border); padding:12px; border-radius:12px}
.size-grid, .add-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px}
.size, .add-grid button, .filelike{
  border:1px solid var(--border); background:transparent; color:var(--text);
  padding:10px; border-radius:10px; cursor:pointer; text-align:center
}
.size:hover, .add-grid button:hover, .filelike:hover{background:color-mix(in oklab, var(--panel), #fff 5%)}
.filelike{display:block}
.row{display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:10px}
.row.compact{justify-content:flex-start; gap:20px}
.row input[type="number"]{width:90px}
.hint{font-size:12px; color:var(--muted)}

.workspace{display:flex; flex-direction:column; gap:8px; min-height:0}
#canvasWrapper{
  position:relative;
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel), #fff 6%), color-mix(in oklab, var(--panel), #000 6%));
  border:1px solid var(--border); border-radius:16px; min-height:300px; display:flex; align-items:center; justify-content:center;
  overflow:auto;
}
#c{ background:#fff; border-radius:2px; box-shadow:0 10px 30px rgba(0,0,0,.15); }
#dropOverlay{
  position:absolute; inset:12px; border:2px dashed var(--accent); border-radius:16px;
  display:none; align-items:center; justify-content:center; font-weight:600; color:var(--accent);
  background:color-mix(in oklab, var(--accent), transparent 92%);
  pointer-events:none
}
#grid{position:absolute; inset:auto; pointer-events:none}
.status{color:var(--muted); font-size:12px}

#layers{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:40dvh; overflow:auto}
#layers li{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--border);
  border-radius:10px; background:color-mix(in oklab, var(--panel), #fff 8%);
  cursor:pointer; user-select:none;
}
#layers li.active{outline:2px solid var(--accent)}
#layers .layer-name{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#layers .layer-actions{display:flex; gap:6px}
#layers button{border:1px solid var(--border); background:transparent; color:var(--text); border-radius:8px; padding:4px 6px; cursor:pointer}
#layers button:hover{background:color-mix(in oklab, var(--panel), #fff 6%)}

.inspector.hidden{display:none}
.inspector .row{margin-bottom:12px}
.nudge{display:grid; grid-template-rows:auto auto auto; gap:6px; align-items:center; justify-items:center}
.nudge div{display:flex; align-items:center; gap:8px}

.templates{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.templates button{border:1px solid var(--border); background:transparent; color:var(--text); border-radius:10px; padding:10px; cursor:pointer}
.templates button:hover{background:color-mix(in oklab, var(--panel), #fff 6%)}

dialog{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:16px;
  padding:16px 18px;
}
dialog .row{margin-bottom:10px}
dialog menu{display:flex; justify-content:flex-end; gap:10px}
dialog button{border:1px solid var(--border); background:transparent; color:var(--text); border-radius:10px; padding:8px 12px; cursor:pointer}
dialog button.primary{background:var(--accent); border-color:var(--accent); color:white}

@media (max-width: 1100px){
  .layout{grid-template-columns: 260px 1fr; grid-template-areas: "left right" "workspace workspace"}
  .right{grid-column:1 / -1}
}
@media (max-width: 860px){
  .layout{grid-template-columns: 1fr; gap:10px}
  .left,.right{order:2}
  .workspace{order:1}
  #canvasWrapper{min-height:50dvh}
}

/* form controls */
input[type="color"]{inline-size:44px; block-size:32px; border:none; background:transparent; padding:0}
input, select{
  background:transparent; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px;
}
label{font-size:12px; color:var(--muted)}
button{transition:filter .15s ease}