:root{
  --cc-orange:#D83200;
  --cc-charcoal:#212121;
  --cc-granite:#A5ABB7;
  --cc-ocean:#BAD4EC;
  --cc-navy:#183468;
  --cc-vibrantblue:#2566CE;
  --cc-moss:#006841;
  --cc-darkgreen:#0C3116;
  --cc-vibrantgreen:#7BCF84;
  --cc-white:#ffffff;

  --accent:#6F7CFF;
  --accent-strong:#94A2FF;
  --accent-soft:rgba(111,124,255,0.25);

  --ui-bg:rgba(18,20,28,0.78);
  --ui-bg-strong:rgba(18,20,28,0.92);
  --ui-border:rgba(255,255,255,0.08);
  --ui-elev:rgba(9,12,21,0.45);
  --ui-elev-soft:rgba(9,12,21,0.32);
  --ui-text:#E8ECF9;
  --ui-muted:#8D95AD;
  --ui-radius:16px;
  --ui-radius-lg:20px;
  --ui-gap:16px;
  --template-accent:#7B8CFF;
  --surface-spacing:36px;
  --surface-spacing-sm:26px;
  --surface-spacing-xs:16px;
  --panel-gap:80px;
  --panel-toggle-offset:24px;
  --glow-primary:0 22px 60px rgba(111,124,255,0.35);
  --glow-ambient:0 18px 48px rgba(5,8,16,0.65);
  --glass-border:rgba(255,255,255,0.12);
  --glass-highlight:rgba(255,255,255,0.06);
  --glass-shadow:0 28px 60px rgba(5,8,18,0.45);

  --app-backdrop-dark:#F5F5F5;
  --app-backdrop-light:#F5F5F5;
  --app-backdrop:#F5F5F5;

  --canvas-bg:#000;
  --pad-x:70px;
  --pad-top:110px;
  --pad-bottom:110px;

  --s:1;
  --canvas-zoom:1;
  --canvas-zoom-inv:1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--app-backdrop);
  color:var(--ui-text);
  font-family:"Inter Tight", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-synthesis-weight:none;
  transition:background .6s ease;
}

body.is-backdrop-dark{--app-backdrop:var(--app-backdrop-dark);}
body.is-backdrop-light{--app-backdrop:var(--app-backdrop-light);}

/* Stage + artboard */
.stage-wrap{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; height:100%; min-height:0; overflow:hidden}
.stage{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  width:100%;
  overflow:auto;
  padding:20px;
}
.canvas-stack{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:48px;
  padding:40px 64px;
}
.canvas-node{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  cursor:default;
  width:fit-content;
}
.canvas-node__viewport{
  position:relative;
  width:min(100%, 480px);
  aspect-ratio:3 / 4;
  background:var(--canvas-bg);
  border-radius:calc(24px * var(--s));
  box-shadow:0 calc(6px * var(--s)) calc(32px * var(--s)) rgba(0,0,0,.12);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-radius .18s ease;
}
.canvas-node.is-active .canvas-node__viewport{
  box-shadow:0 calc(10px * var(--s)) calc(48px * var(--s)) rgba(15,23,42,0.24), 0 0 0 2px rgba(111,124,255,0.35);
}
.canvas-node.is-selected .canvas-node__viewport{
  box-shadow:0 calc(8px * var(--s)) calc(36px * var(--s)) rgba(15,23,42,0.3), 0 0 0 3px rgba(111,124,255,0.4);
}
.canvas-node.is-preview .canvas-node__viewport{
  opacity:0.92;
  cursor:pointer;
  box-shadow:0 calc(4px * var(--s)) calc(24px * var(--s)) rgba(15,23,42,0.14);
}
.canvas-node.is-preview .canvas-node__viewport:hover{
  transform:translateY(-6px);
}
.canvas-node__outline{
  position:absolute;
  inset:6px;
  border:1px dashed rgba(255,255,255,0.15);
  border-radius:calc(26px * var(--s));
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}
.canvas-node__handle{
  position:absolute;
  width:8px;
  height:8px;
  border:1px solid rgba(255,255,255,0.7);
  border-radius:50%;
  background:rgba(15,17,25,0.8);
  transform:translate(-50%, -50%);
}
.canvas-node__handle--tl{top:0%; left:0%;}
.canvas-node__handle--tr{top:0%; left:100%;}
.canvas-node__handle--bl{top:100%; left:0%;}
.canvas-node__handle--br{top:100%; left:100%;}
.canvas-node__handle--ct{top:0%; left:50%;}
.canvas-node__handle--cb{top:100%; left:50%;}
.canvas-node__handle--lc{top:50%; left:0%;}
.canvas-node__handle--rc{top:50%; left:100%;}
.canvas-node:hover .canvas-node__outline{
  opacity:1;
}
.canvas-node__quick{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease;
}
.canvas-node:hover .canvas-node__quick{
  opacity:1;
  transform:translateY(0);
}
.canvas-quick-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(12,14,20,0.85);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
}
.canvas-quick-btn svg{width:16px; height:16px; stroke:currentColor; fill:none}
.canvas-node [data-region].is-highlighted{
  outline:2px solid rgba(111,124,255,0.85);
  outline-offset:8px;
  box-shadow:0 0 0 8px rgba(111,124,255,0.15);
  border-radius:20px;
  position:relative;
}
.canvas-node__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.canvas-node__overlay{position:absolute; inset:0}
.canvas-node__frame,
.frame{
  position:relative;
  z-index:1;
  height:100%;
  width:100%;
}

.canvas-node__header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 16px;
  color:#0f172a;
  transform-origin:left top;
}
.canvas-node__label{
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
}
.canvas-node.is-preview .canvas-node__label{color:#475569;}
.canvas-node.is-active .canvas-node__label{color:#111827}
.canvas-node__actions{display:none;}
.canvas-node__action{
  width:36px;
  height:36px;
  border:none;
  border-radius:50%;
  background:rgba(15,23,42,0.08);
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.canvas-node__action svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none; pointer-events:none;}
.canvas-node__action:hover{background:rgba(15,23,42,0.12); transform:translateY(-1px);}
.canvas-node__action:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.canvas-node__action--danger{background:rgba(220,38,38,0.12); color:#b91c1c;}
.canvas-node__action--danger:hover{background:rgba(220,38,38,0.18);}
.canvas-node__action.is-disabled{opacity:.4; cursor:not-allowed; transform:none;}

/* Small utilities */
.is-disabled{opacity:.5; pointer-events:none}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#475569}
.chip .dot{width:8px; height:8px; border-radius:50%; background:#94a3b8}
.chip.loading .dot{background:#2563eb; animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.3}}
.canvas-node.is-preview{cursor:pointer;}
.canvas-node.is-preview .canvas-node__header{cursor:pointer;}