/* === Palette from your existing file (kept) === */
:root{
  /* Align with site base theme */
  --bg:#070C1E;
  --bg-2:#0B122B;
  --panel:#0E1530;
  --ink:#EAF1FF;
  --muted:#A8B2D8;
  --accent:#79C9FF;
  --accent-2:#FFD886;
  --danger:#FF7A7A;
  --border:#1A2342;
  --shadow:0 10px 30px rgba(8,12,30,.45);
  --radius:16px;
  --radius-sm:10px;
  --glow:0 0 0 2px rgba(121,201,255,.2), 0 0 24px rgba(121,201,255,.12) inset;
}
*{box-sizing:border-box}
html,body{min-height:100%;background:var(--bg);color:var(--ink);margin:0;font-family:Montserrat,system-ui,Segoe UI,Arial,sans-serif;overflow:auto}

#app{
  display:grid;
  grid-template-columns: 84px minmax(0,1fr) minmax(300px,340px);
  grid-template-rows: minmax(0,1fr);
  height:100dvh;
  min-height:680px;
  overflow:hidden;
}

/* Left rail */
.rail-left{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border-right:1px solid var(--border);
  position:relative;
  padding:12px 10px;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
}
.rail-left .brand{
  display:flex;align-items:center;gap:8px;
  color:var(--muted);font-weight:700;letter-spacing:.4px;
  margin-bottom:12px;justify-content:center;flex-direction:column;
}
.rail-left .brand img{width:60px;height:60px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.rail-left .brand span{font-size:.85rem;opacity:.9}
/* === Add this to the bottom of your style.css === */
.drag-handle {
  user-select: none;
  background: #1b132b;
  padding: 6px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  border-radius: 12px 12px 0 0;
  cursor: move;
}

.resize-handle {
  width: 14px;
  height: 14px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--accent);
  cursor: nwse-resize;
  border-radius: 0 0 10px 0;
}


.tool-buttons{display:flex;flex-direction:column;gap:10px;align-items:center}
.tool-btn{
  width:60px;height:60px;border:none;border-radius:18px;
  background:var(--panel);
  color:var(--ink);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
}
.tool-btn small{font-size:.63rem;color:var(--muted)}
.tool-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.tool-btn.active{outline:2px solid var(--accent);background:#2e224c}
.tool-sep{height:1px;width:60px;background:#4a3a76;margin:4px 0}

.tool-panel-container{
  /* Let the always-on Equalizer sit under the buttons */
  position:static;
  margin-top:8px;
}
.tool-panel{
  width:260px;background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--border); padding:14px; margin-top:12px; display:none;
  max-height:calc(100vh - 48px);
  overflow-x:hidden;
  overflow-y:auto;
}
.tool-panel.show{display:block; animation:panelIn .2s ease; position:relative; z-index:999}
@keyframes panelIn{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}
.tool-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tool-panel h3{margin:0;font-size:1rem}
.panel-close{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:1rem}

.tool-panel .panel-tabs{
  display:flex;
  gap:6px;
  margin-bottom:12px;
  padding:6px;
  border-radius:12px;
  background:linear-gradient(135deg,rgba(34,45,90,.75),rgba(16,23,54,.9));
  border:1px solid rgba(79,112,185,.35);
  box-shadow:inset 0 0 0 1px rgba(35,52,96,.35);
}
.tool-panel .panel-tab{
  flex:1 1 0;
  border-radius:9px;
  border:1px solid rgba(70,104,173,.35);
  background:linear-gradient(180deg,rgba(18,26,56,.88),rgba(10,16,42,.92));
  color:var(--muted);
  padding:8px 0;
  cursor:pointer;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  appearance:none;
  box-shadow:inset 0 0 0 1px rgba(24,36,74,.6), 0 4px 12px rgba(5,8,20,.45);
}
.tool-panel .panel-tab:hover{
  border-color:rgba(121,201,255,.55);
  color:var(--ink);
  background:linear-gradient(180deg,rgba(28,46,92,.82),rgba(14,23,56,.92));
  box-shadow:inset 0 0 0 1px rgba(60,108,180,.6), 0 6px 14px rgba(10,18,40,.55);
}
.tool-panel .panel-tab.active{
  border-color:rgba(121,201,255,.85);
  color:var(--ink);
  background:linear-gradient(180deg,rgba(90,150,225,.55),rgba(58,110,214,.6));
  box-shadow:0 8px 18px rgba(15,36,82,.55), inset 0 0 0 1px rgba(140,210,255,.45);
}
.tool-panel .panel-tab.active:hover{
  background:linear-gradient(180deg,rgba(108,180,240,.58),rgba(70,132,230,.65));
}
.tool-panel .tab-content{display:none;padding:4px 2px;border-radius:14px;}
.tool-panel .tab-content.active{display:block;animation:tabFade .2s ease;}
@keyframes tabFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.adjust-group{
  background:linear-gradient(180deg,rgba(24,26,62,.85),rgba(16,20,49,.92));
  border:1px solid rgba(88,68,158,.55);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.adjust-group .group-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(134,177,255,.88);
}
.adjust-actions{display:flex;justify-content:flex-end;margin-top:4px;}
.adjust-actions .row{flex:1;}
.resize-fields{display:flex;flex-wrap:wrap;gap:12px;}
.resize-fields .field{flex:1 1 120px;display:flex;flex-direction:column;gap:6px;}
.resize-presets{display:flex;flex-wrap:wrap;gap:8px;}
.ghost.small{padding:8px 10px;font-size:.78rem;}
.adjust-group label{margin-top:4px;}
.adjust-group label:first-of-type{margin-top:6px;}
.resize-preview-info{
  margin:6px 2px 10px;
  font-size:.8rem;
  color:rgba(200,214,255,.8);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.tool-panel label{display:block;font-size:.85rem;margin:8px 0 4px 2px;color:var(--muted)}
.tool-panel input[type="text"],
.tool-panel input[type="number"],
.tool-panel select{
  width:100%;padding:8px 10px;border-radius:10px;border:1px solid #57448f;background:#2b2147;color:var(--ink);
}
.tool-panel input[type="color"]{width:100%;height:36px;border:none;border-radius:10px;background:#2b2147}
.tool-panel input[type="range"]{width:100%}
.tool-panel .row{display:flex;gap:10px;align-items:center;margin-top:8px}
.tool-panel .row .half{flex:1}
.tool-panel .quick-actions{display:flex;gap:8px;margin:10px 0 4px}
.tool-panel .quick-actions .primary,
.tool-panel .quick-actions .ghost{flex:1}
.muted-control{opacity:.48}
.muted-control input{cursor:not-allowed}

.text-panel textarea{
  width:100%;
  min-height:58px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #57448f;
  background:#2b2147;
  color:var(--ink);
  resize:vertical;
}
.text-panel .text-row{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
}
.text-panel .control{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.text-panel .control.grow{flex:1 1 220px;}
.text-panel .control.compact{flex:0 0 160px;gap:12px;}
.text-panel .control.compact .field{display:flex;flex-direction:column;gap:6px;}
.text-panel .font-select{display:flex;align-items:center;gap:8px;}
.text-panel .font-select select{flex:1;}
.text-panel .font-select .ghost{padding:8px 12px;white-space:nowrap;}
.text-panel .font-preview{
  min-height:38px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #3a2d5f;
  background:#241a3f;
  color:var(--muted);
  font-size:.85rem;
  display:flex;
  align-items:center;
}
.text-panel .text-row.align{align-items:center;justify-content:space-between;gap:14px;}
.text-panel .format-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.text-panel .group-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.text-panel label.toggle{position:relative;display:inline-flex;align-items:center;}
.text-panel label.toggle input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.text-panel label.toggle span{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid #312350;
  background:#21183a;
  font-size:.78rem;
  color:var(--muted);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  pointer-events:none;
}
.text-panel label.toggle input:checked + span{
  border-color:var(--accent);
  background:rgba(121,201,255,.12);
  color:var(--accent);
}
.text-panel label.toggle input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
.text-panel .color{flex:0 0 160px;}
.text-panel .color input[type="color"]{width:100%;height:44px;border-radius:12px;border:none;background:#2b2147;}
.text-panel details.gradient-card{
  margin-top:8px;
  border-radius:14px;
  border:1px solid #35275a;
  background:#1a1231;
  padding:10px 12px 12px;
}
.text-panel details.gradient-card[open]{background:#21163c;}
.text-panel details.gradient-card summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--ink);
  margin:-10px -12px 10px;
  padding:10px 12px;
  border-radius:12px;
  list-style:none;
}
.text-panel details.gradient-card summary span:first-child{flex:1;}
.gradient-chip{
  width:56px;
  height:20px;
  border-radius:999px;
  background:linear-gradient(135deg,#555,#222);
  border:1px solid rgba(140,210,255,.4);
  box-shadow:0 0 0 1px rgba(12,18,42,.8);
  transition:opacity .18s ease, filter .18s ease;
}
.gradient-chip.disabled{opacity:.35;filter:saturate(.2);}
.text-panel details.gradient-card summary::-webkit-details-marker{display:none;}
.text-panel .gradient-controls{display:flex;flex-direction:column;gap:12px;}
.text-panel .gradient-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.text-panel .angle-field{display:flex;flex-direction:column;gap:6px;min-width:120px;}
.gradient-preview{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:12px;
  background:rgba(16,22,48,.8);
  border:1px solid rgba(60,108,180,.35);
}
.gradient-preview-box{
  flex:1 1 160px;
  height:26px;
  border-radius:10px;
  background:linear-gradient(135deg,#ffffff,#66d8ff);
  box-shadow:inset 0 0 0 1px rgba(18,28,68,.4), 0 8px 14px rgba(4,8,20,.45);
  transition:opacity .18s ease, filter .18s ease;
}
.gradient-preview-label{
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.gradient-preview-box.disabled{opacity:.35;filter:saturate(.25);}
.text-panel .gradient-stops{display:flex;flex-direction:column;gap:10px;}
.gradient-stop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.gradient-stop-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(14,20,46,.9);
  border:1px solid rgba(72,112,180,.35);
  box-shadow:inset 0 0 0 1px rgba(22,34,70,.4);
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.gradient-stop-item.dragging{opacity:.6;border-color:rgba(121,201,255,.65);box-shadow:0 8px 20px rgba(10,20,44,.45);}
.gradient-stop-item button.remove-stop{
  background:rgba(30,42,82,.7);
  border:1px solid transparent;
  color:var(--muted);
  cursor:pointer;
  padding:6px 8px;
  border-radius:8px;
  font-size:.9rem;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.gradient-stop-item button.remove-stop:hover{color:var(--ink);border-color:rgba(121,201,255,.45);background:rgba(44,66,124,.7);}
.gradient-stop-item button.remove-stop:disabled{opacity:.3;cursor:not-allowed;border-color:transparent;background:transparent;color:var(--muted);}
.gradient-stop-item .drag-handle{
  cursor:grab;
  color:var(--muted);
  font-size:1rem;
  line-height:1;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px;
}
.gradient-stop-item.dragging .drag-handle{cursor:grabbing;}
.gradient-stop-item input[type="color"]{
  width:56px;
  height:32px;
  border:none;
  border-radius:8px;
  background:#2b2147;
  box-shadow:inset 0 0 0 1px rgba(32,46,96,.4);
}
.gradient-stop-item input[type="color"]::-webkit-color-swatch,
.gradient-stop-item input[type="color"]::-webkit-color-swatch-wrapper{border:none;border-radius:8px;padding:0;}
.gradient-stop-item .stop-pos{display:flex;align-items:center;gap:10px;flex:1;}
.gradient-stop-item .stop-pos input[type="number"]{
  width:64px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #57448f;
  background:#2b2147;
  color:var(--ink);
}
.gradient-stop-item .stop-pos input[type="range"]{flex:1;accent-color:var(--accent);}
.gradient-stop-actions{display:flex;justify-content:flex-end;}
.gradient-stop-actions .ghost.small{padding:7px 12px;}
.gradient-stop-list.disabled{opacity:.4;pointer-events:none;}
.gradient-stop-item.disabled{opacity:.5;}
.gradient-stop-list .helper-text{font-size:.75rem;color:var(--muted);margin-top:4px;}
.text-panel .actions-row{margin-top:14px;display:flex;justify-content:flex-end;}

.primary, .ghost, .danger{
  border:none;border-radius:12px;padding:10px 12px;cursor:pointer;
}
.primary{background:linear-gradient(180deg,#66d8ff,#54c2f0);color:#061323;font-weight:700}
.primary:hover{filter:brightness(1.05)}
.ghost{background:#2c2149;color:var(--ink);border:1px solid #4a3a77}
.ghost[disabled]{opacity:.5;cursor:not-allowed}
.danger{background:#ff416c;color:#12020a}

/* Workspace */
.workspace{display:flex;flex-direction:column;gap:12px;padding:12px;border-right:1px solid var(--border);min-width:0;min-height:0;overflow:auto;overscroll-behavior:auto}
.topbar{
  min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:6px 8px;background:linear-gradient(180deg,#0E1839,#0B122B);border:1px solid var(--border);border-radius:12px;color:var(--muted)
}
.topbar .left{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.topbar .left .ghost.appbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin-right:6px;line-height:0;
  border-radius:10px;
}
.topbar .left .ghost.appbtn img{width:28px;height:28px;display:block;border-radius:8px;border:1px solid var(--border)}
.topbar .actions > button{
  background:#3a2d5f;border:none;border-radius:10px;color:var(--ink);padding:6px 10px;margin-left:6px;cursor:pointer
}
.topbar .actions > button:hover{background:#423570}
.topbar .actions{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.menu-wrap{position:relative;margin-left:8px}
.menu-panel{position:absolute;right:0;top:36px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:10px;min-width:320px;z-index:1000;max-height:70vh;overflow:auto}
.menu-panel .ghost{margin-left:0;padding:6px 8px;border-radius:8px}
.menu-panel .ghost + .ghost{margin-left:6px}
.menu-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.menu-panel label{font-size:.85rem;color:var(--muted)}
.menu-panel input[type="range"]{flex:1}
.menu-panel select{background:#2b2147;color:var(--ink);border:1px solid #57448f;border-radius:8px;padding:4px}

/* Library rows in Beatinator */
.lib-row{ transition: background .15s ease, border-color .15s ease }
.lib-row.active{ border-color:#4b6bd6; box-shadow:0 0 0 1px rgba(75,107,214,.25) inset; background:linear-gradient(180deg,#173063,#111f46) }

/* Preview areas */
.preview-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:360px;padding:4px 0}
.preview-area{
  position:relative;width:100%;height:100%;min-height:320px;background:radial-gradient(circle at top,#1F3059,#0B122B 70%);
  border-radius:20px;border:1px solid #2f4a78;box-shadow:var(--shadow);overflow:hidden;display:flex;align-items:center;justify-content:center
}
#imgStage{
  width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;
  /* UI-only checkerboard to distinguish transparent areas. Does not affect export. */
  background-color:#1a1a1a;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.08) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  overscroll-behavior: contain;
}
.preview-area video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;border-radius:20px;
}
.preview-area .doc-surface{display:flex;align-items:center;justify-content:center;text-align:center}
.preview-area .doc-surface h2{margin:0 0 6px 0}
.overlay-box{position:absolute;min-width:80px;min-height:36px;padding:6px 8px;border-radius:10px;outline:2px solid transparent}
.overlay-box.selected{outline-color:var(--accent)}
.overlay-box .resize-handle{width:12px;height:12px;background:var(--accent);position:absolute;right:-6px;bottom:-6px;border-radius:3px;cursor:nwse-resize}
.crop-box{position:absolute;inset:20% 20% auto auto;width:60%;height:60%;border:2px dashed var(--accent);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(126,225,255,.25)}
.crop-box[hidden]{display:none}
.crop-box .drag-handle{position:absolute;top:-28px;left:0;right:0;margin:auto;width:72px}
.crop-box .resize-handle{right:-7px;bottom:-7px}
.preview-area::before{
  content:"";position:absolute;inset:0;border-radius:20px;box-shadow:var(--glow);pointer-events:none
}

.bg-size-controls{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.bg-size-controls .field{display:flex;flex-direction:column;gap:4px}
.bg-size-controls .field input{padding:8px 10px;border-radius:10px;border:1px solid #57448f;background:#2b2147;color:var(--ink)}
.bg-size-controls .small-toggle{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.bg-size-controls .small-toggle input{width:auto;height:auto;margin:0}
.bg-size-controls button{align-self:flex-start}

/* Generic doc surface */
.doc-surface{
  width:100%;height:100%;background:#1a2541;border-radius:12px;padding:24px;line-height:1.65;
  border:1px solid #2f4a78;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)
}
.doc-surface h1,h2,h3{color:var(--accent-2);margin:.4rem 0}

/* Grid (spreadsheet) */
table.grid{border-collapse:separate;border-spacing:0;width:100%}
table.grid th, table.grid td{
  border:1px solid #2f3f6a;padding:8px 10px;min-width:100px;background:#1a2350;
}
table.grid th{
  position:sticky;top:0;background:#1d2a59;color:var(--muted);z-index:2;cursor:text
}
table.grid td{cursor:text}
table.grid td:focus{outline:2px solid var(--accent)}
table.grid tr:nth-child(even) td{background:#17204a}

/* PDF canvas */
#pdf-canvas{max-width:95%;max-height:90%;border-radius:12px;border:1px solid #2f4a78;background:#0b1227}

/* Timeline (visual rhythm, reused) */
.timeline-wrap{
  width:min(1200px,100%);
  margin:0 auto;
  background:#2a1f45;
  border:1px solid #3b2e61;
  border-radius:16px;
  box-shadow:var(--shadow)
}
.timeline-head{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #3d2f62}
.time-readouts{display:flex;gap:16px;color:var(--muted)}
.tl-zoom{display:flex;align-items:center;gap:8px}
.timeline{
  position:relative;
  height:180px;
  background:#161128;
  border-radius:0 0 16px 16px;
  border-top:1px solid #3d2f62;
  overflow:hidden;
}
.tl-ruler{height:36px;background:#251d40;border-bottom:1px solid #3d2f62;position:relative;font-size:12px;color:#cbd1ff}
.tl-ruler .tick{position:absolute;top:0;height:100%;width:1px;background:#3d2f62}
.tl-ruler .label{position:absolute;top:8px;transform:translateX(-50%);color:#b9b8d6;font-size:11px}
.tl-scroller{position:absolute;left:0;right:0;top:36px;bottom:0;overflow:auto}
.tl-tracks{position:relative;height:120px;min-width:100%}
.tl-track{position:relative;height:84px;margin:16px;border-radius:12px;background:#20173b;border:1px solid #3b2e61}
.timeline-clip{position:absolute;top:8px;height:68px;background:#0f0b1b;border:2px solid #8f6cff;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.35);cursor:grab;overflow:hidden}
.timeline-clip .thumbs{display:flex;height:100%;opacity:.9}
.timeline-clip .thumbs img{object-fit:cover;height:100%;flex:1;filter:contrast(1.05)}
.timeline-clip .title{position:absolute;left:8px;top:6px;font-size:11px;color:#d9d6ff;background:rgba(15,11,27,.6);padding:2px 6px;border-radius:6px}
.timeline-clip .handle{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;background:rgba(143,108,255,.25)}
.timeline-clip .handle.left{left:0;border-right:2px solid #8f6cff}
.timeline-clip .handle.right{right:0;border-left:2px solid #8f6cff}
.timeline-clip.dragging{opacity:.9;cursor:grabbing}
.tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:#9ee7ff;pointer-events:none}
.tl-playhead-dot{position:absolute;top:28px;left:-6px;width:12px;height:12px;border-radius:50%;background:#9ee7ff}

/* Right rail */
.rail-right{
  background:linear-gradient(180deg,#1e1630,#1b132b);padding:12px 10px;overflow:auto;min-height:0; z-index:10
}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);margin-bottom:12px}
.card h3{margin:0 0 8px 0}

/* Arrange panel polish */
#panel-arrange .row{ gap:10px; }
#panel-arrange label{ color:var(--muted); font-size:.85rem; }
#panel-arrange input[type="number"]{ width:100%; padding:6px 8px; border-radius:10px; border:1px solid #57448f; background:#2b2147; color:var(--ink); font-size:.85rem; height:28px; }

/* ---------------- Responsive: mobile optimizations ---------------- */
@media (max-width: 980px){
  #app{
    /* Collapse layout and drop CSS Grid to avoid awkward row sizing */
    display:block;
    grid-template-columns: 1fr; /* for any residual grid contexts */
    grid-template-rows: auto;   /* ensure natural stacking */
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  /* Move left rail to a bottom toolbar */
  .rail-left{
    position:fixed; left:0; right:0; bottom:0;
    padding:8px 10px; border-top:1px solid var(--border); border-right:none;
    background:linear-gradient(180deg, rgba(14,21,48,.95), rgba(11,18,43,.95));
    display:flex; align-items:center; justify-content:flex-start; gap:10px;
    z-index:1200; height:64px; overflow-x:auto; overflow-y:hidden;
  }
  .rail-left .brand{ display:none; }
  .tool-buttons{ flex-direction:row; gap:8px; align-items:center; overflow:auto; }
  .tool-btn{ width:48px; height:48px; border-radius:14px; }
  .tool-btn small{ display:none; }
  .tool-sep{ display:none; }

  /* Give workspace room above bottom bar */
  .workspace{ padding:10px; padding-bottom:78px; }
  .topbar{ height:42px; }
  .menu-panel{ min-width: min(92vw, 360px); right:4px; left:auto; top:42px; }

  /* Panels become overlay sheets */
  .tool-panel{
    position:fixed; left:10px; right:10px; top:64px; bottom:78px;
    width:auto; max-height:none; margin:0; border-radius:16px;
    display:none; /* default hidden */
  }
  .tool-panel.show{ display:block; left:10px !important; right:10px !important; top:64px !important; bottom:78px !important; width:auto !important; max-height:none !important; }
  .rail-right{ padding-bottom:86px; }
}

@media (max-width: 640px){
  /* Tighter controls for very small devices (e.g., Galaxy S22 in narrow orientation) */
  .topbar .actions > button{ padding:6px 8px; }
  .preview-wrap{ padding:2px 0; }
  .preview-area{ border-radius:14px; }
  #imgStage{ background-size: 18px 18px; }
  .tool-panel label{ font-size:.8rem; }
  .ghost.small{ padding:6px 8px; font-size:.75rem; }
}
#panel-arrange input[type="range"]{ width:100%; }
#panel-arrange .ghost, #panel-arrange .primary{ padding:8px 10px; border-radius:10px; }

/* Image Colors list */
.recolor-list{ display:flex; flex-direction:column; gap:8px; }
.recolor-list .row{ display:flex; align-items:center; gap:10px; width:100%; flex-wrap:nowrap; }
.recolor-list input[type="color"]{ width:40px; height:28px; border:none; border-radius:6px; background:#2b2147; box-shadow:inset 0 0 0 1px rgba(32,46,96,.4); }
.recolor-list input[type="text"]{ width:100%; height:28px; padding:6px 8px; border-radius:8px; border:1px solid #57448f; background:#2b2147; color:var(--ink); font-family:monospace; font-size:.85rem; text-transform:uppercase; }
.recolor-list .swatch-col{ display:flex; flex-direction:column; gap:6px; min-width:120px; }
.recolor-list .row .hint{ color:var(--muted); font-size:.82rem; }
.recolor-list .row .arrow{ margin:0 6px; }
.recolor-list .row .ghost{ margin-left:auto; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; border-radius:8px; }
.recolor-list input[type="text"].transparent{ opacity:.85; color:#aab6de; font-style:italic; }

/* Keep arrange section rows compact and inline */
.recolor-list .row .ghost:hover{ filter:brightness(1.08); }
.placeholder{color:var(--muted);font-size:.9rem}
.layer-list{list-style:none;padding:0;margin:0}
.layer-list li{
  padding:8px 10px;border-radius:10px;background:#2b2147;border:1px solid #4a3a77;margin-bottom:8px;display:flex;justify-content:space-between
}
.layer-list li.active{outline:2px solid var(--accent);background:#2d2250}
.layer-list li{cursor:grab}
.layer-list li.dragging{opacity:.75;cursor:grabbing}
.layer-list .row{display:flex;gap:8px;align-items:center;width:100%}
.layer-list .name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-list li[data-locked="true"] .name::before{content:'\1F512';margin-right:6px;font-size:.82em;opacity:.75;}
.layer-list .eye{background:#3a2d5f;border:none;border-radius:6px;color:var(--ink);padding:4px 8px;cursor:pointer}
.layer-list .del{background:#5f2d3a;border:none;border-radius:6px;color:var(--ink);padding:4px 8px;cursor:pointer}
/* Collapsible boards in layers */
.layer-list .toggle{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:0 4px;font-size:.95rem;line-height:1}
.layer-list .toggle:hover{color:var(--ink)}
.layer-list li[data-type="node"]{ padding-left:26px }

/* Hints / kbd */
.hint{color:var(--muted);font-size:.8rem;margin-top:6px}
kbd{background:#1a1131;border:1px solid #4a3a77;border-radius:6px;padding:2px 6px}

/* Utility */
[hidden]{display:none !important}

/* Buttons and states on the rail */
.tool-btn{position:relative}
.tool-btn:focus{outline:2px solid var(--accent)}
.tool-btn.active::after{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--accent);border-radius:2px}

/* Drop target */
#overlay-stage.dragover{outline:2px dashed var(--accent)}
#imgStage.dragover{outline:2px dashed var(--accent)}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:18px; background:linear-gradient(180deg,#0E1839,#0B122B);
  border:1px solid var(--border); color:var(--ink);
  padding:10px 14px; border-radius:12px; box-shadow:var(--shadow);
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-2px); }

/* Photo editor */
/*
  Important: Let the canvas use its intrinsic width/height set by JS.
  Avoid forcing CSS width/height or full inset stretching that can distort
  the drawn pixels when the stage resizes. JS updates canvas.width/height
  to match the stage, so we only need to anchor it.
*/
#photoCanvas{
  position:absolute;
  left:0;
  top:0;
  image-rendering:auto;
  border-radius:20px;
}
.brush-cursor{cursor:crosshair}
/* Brush preview circle aligned to actual brush position */
#brushPreview{position:absolute;left:0;top:0;transform:translate(-50%,-50%);border:1.6px solid rgba(255,216,134,.95);border-radius:9999px;pointer-events:none;display:none;box-shadow:0 0 0 2px rgba(255,216,134,.18)}

/* Toast */
.toast{position:fixed;right:16px;bottom:16px;background:#2b2147;border:1px solid #4a3a77;color:var(--ink);padding:10px 12px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(6px);transition:all .2s ease}
.toast.show{opacity:1;transform:none}

/* Floating Palette */
.palette-panel{
  position:fixed; left:24px; top:24px; width:480px; height:420px;
  display:flex; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
  z-index:10010; overflow:hidden;
}
.palette-panel[hidden]{display:none !important}
.palette-header{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:linear-gradient(180deg,#131a3a,#0e1530); border-bottom:1px solid var(--border); cursor:move; user-select:none}
.palette-header .title{font-weight:700; letter-spacing:.04em}
.palette-header .controls{display:flex; align-items:center; gap:8px}
.palette-header select, .palette-header input[type="search"]{height:32px; border-radius:8px; border:1px solid #4a3a77; background:#241a3f; color:var(--ink); padding:4px 8px}
.palette-toolbar{display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--border); background:linear-gradient(180deg,#101532,#0b122b)}
.palette-grid{
  --preview: 56px; /* default thumbnail edge */
  flex:1 1 auto; overflow:auto; padding:12px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--preview, 56px), 1fr));
  grid-auto-rows:minmax(calc(var(--preview, 56px) + 38px), auto);
  gap:10px
}
.palette-item{
  background:linear-gradient(180deg,#1c1433,#17102d);
  border:1px solid #3b2e61; border-radius:12px; padding:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative
}
.palette-item:hover{outline:2px solid var(--accent)}
.palette-item img{max-width:100%; max-height:100%; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.palette-item .name{font-size:.72rem; color:var(--muted); text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.palette-item .badge{position:absolute; left:8px; bottom:8px; font-size:.68rem; color:#c7d9ff; background:rgba(34,46,94,.8); border:1px solid rgba(92,124,194,.5); padding:2px 6px; border-radius:999px}
/* Old actions hidden (replaced by compact overlay buttons) */
.palette-actions{ display:none }

/* Compact overlay buttons */
.tile-btn{ position:absolute; width:22px; height:22px; border-radius:6px; border:1px solid rgba(234,241,255,.45); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.82rem; cursor:pointer; box-shadow:none; opacity:.75 }
.tile-btn:hover{ background:rgba(255,255,255,.10); opacity:1 }
.tile-add{ left:6px; top:6px; }
.tile-remove{ left:6px; bottom:6px; }
.tile-top-right{ position:absolute; right:6px; top:6px; display:flex; gap:6px; }
.tile-copy-url, .tile-copy-img{ position:static }