/* ---------------- Tool layout (specific to Shadow Studio) ---------------- */
.app{
  display:grid;
  grid-template-columns:1fr 380px 300px;
  grid-template-areas:"stage panel ads";
  min-height:calc(100vh - var(--header-h));
}
@media (max-width:1320px){
  .app{
    grid-template-columns:1fr 380px;
    grid-template-areas:"stage panel" "ads ads";
  }
}
@media (max-width:960px){
  .app{
    grid-template-columns:1fr;
    grid-template-areas:"stage" "panel" "ads";
  }
}
.stage{ grid-area:stage; }
.panel{ grid-area:panel; }
.ad-rail{ grid-area:ads; }

/* ---------------- Stage (live preview) ---------------- */
.stage{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:420px;
  overflow:hidden;
  border-right:1px solid var(--border-soft);
  transition:background .2s ease;
}
@media (max-width:960px){ .stage{border-right:none; border-bottom:1px solid var(--border-soft); min-height:60vh;} }

.stage[data-bg="light"]{ background:#eef0f4; }
.stage[data-bg="mid"]{   background:#c9cfd9; }
.stage[data-bg="dark"]{  background:#14151b; }
.stage[data-bg="warm"]{  background:#f2e2c4; }

.stage-topbar{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:16px;
}
.modetabs{
  display:flex;
  gap:2px;
  background:rgba(12,13,17,0.55);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:3px;
}
.modetabs button{
  background:none;border:none;
  font-family:var(--mono);
  font-size:12px;
  color:rgba(242,242,239,0.6);
  padding:7px 14px;
  border-radius:7px;
  transition:background .15s, color .15s;
}
.modetabs button.active{
  background:rgba(255,255,255,0.12);
  color:#fff;
}
.stage-actions{
  display:flex;align-items:center;gap:8px;
}
.bg-swatches{
  display:flex;gap:6px;
  background:rgba(12,13,17,0.55);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:6px;
}
.bg-swatch{
  width:20px;height:20px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.5);
  padding:0;
}
.bg-swatch[data-bg="light"]{ background:#eef0f4; }
.bg-swatch[data-bg="mid"]{   background:#c9cfd9; }
.bg-swatch[data-bg="dark"]{  background:#14151b; }
.bg-swatch[data-bg="warm"]{  background:#f2e2c4; }
.bg-swatch.active{ border-color:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.25); }

.icon-btn{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,13,17,0.55);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:9px;
  color:#fff;
}
.icon-btn:hover{background:rgba(255,255,255,0.12);}

.preview-wrap{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.preview-shape{
  width:200px;height:140px;
  background:#fff;
  transition:box-shadow .1s ease, border-radius .1s ease, background .1s ease;
}
.preview-text{
  display:none;
  font-family:var(--display);
  font-size:56px;
  font-weight:700;
  letter-spacing:-0.01em;
  outline:none;
  cursor:text;
  transition:text-shadow .1s ease, color .1s ease;
}
.drag-handle{
  position:absolute;
  top:50%; left:50%;
  width:16px;height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  cursor:grab;
  touch-action:none;
  z-index:6;
}
.drag-handle:active{cursor:grabbing;}

.stage-hint{
  position:relative;
  z-index:5;
  text-align:center;
  font-family:var(--mono);
  font-size:11px;
  color:rgba(20,21,27,0.5);
  padding:0 16px 16px;
}
.stage[data-bg="dark"] .stage-hint{ color:rgba(242,242,239,0.55); }

/* ---------------- Control panel ---------------- */
.panel{
  background:var(--surface);
  border-left:1px solid var(--border-soft);
  padding:22px 20px 40px;
  overflow-y:auto;
  max-height:calc(100vh - var(--header-h));
}
@media (max-width:960px){ .panel{border-left:none; max-height:none;} }

.panel h2{
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  margin:0 0 4px;
}
.panel .sub{
  font-size:12.5px;
  color:var(--text-faint);
  margin:0 0 22px;
  line-height:1.5;
}

/* ---------------- Layer list ---------------- */
.layer-list{display:flex;flex-direction:column;gap:8px;}
.layer-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:9px;
  padding:8px 10px;
  cursor:pointer;
}
.layer-row.selected{border-color:var(--accent-dim); box-shadow:0 0 0 1px var(--accent-dim);}
.layer-swatch{
  flex:0 0 auto;
  width:26px;height:26px;
  border-radius:7px;
  background:#fff;
  border:1px solid var(--border-soft);
}
.layer-summary{
  flex:1;
  min-width:0;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--text-dim);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.layer-summary .layer-color{
  font-size:10.5px;
  color:var(--text-faint);
}
.layer-row .rm{
  background:none;border:none;color:var(--text-faint);
  font-size:16px;line-height:1;padding:2px 4px;
}
.layer-row .rm:hover{color:#f0729b;}

/* ---------------- Color row (reused pattern) ---------------- */
.color-row{
  display:flex;align-items:center;gap:10px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:9px;
  padding:8px 10px;
}
.color-row input[type=color]{
  width:28px;height:28px;
  border:none;border-radius:7px;
  padding:0;background:none;
  cursor:pointer;
  flex:0 0 auto;
}
.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
.color-row input[type=color]::-webkit-color-swatch{border:1px solid rgba(255,255,255,.15);border-radius:7px;}
.color-row input[type=text]{
  flex:1;
  background:none;border:none;outline:none;
  font-family:var(--mono);font-size:12px;
  color:var(--text);
  min-width:0;
}
.color-row input[type=range]{width:76px;flex:0 0 auto;}

/* ---------------- Checkbox / switch ---------------- */
.checkbox-row{
  display:flex;align-items:center;justify-content:space-between;
}
.switch{
  position:relative;width:36px;height:20px;
  background:var(--surface-3);
  border:1px solid var(--border-soft);
  border-radius:999px;
  cursor:pointer;
}
.switch::after{
  content:'';position:absolute;top:1px;left:1px;
  width:16px;height:16px;border-radius:50%;
  background:var(--text-dim);
  transition:transform .15s ease, background .15s ease;
}
.switch.on{background:var(--accent-soft);border-color:var(--accent-dim);}
.switch.on::after{transform:translateX(16px);background:var(--accent);}

/* ---------------- Presets ---------------- */
.preset-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.preset-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:0;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:11px;
  padding:12px 8px 10px;
}
.preset-btn:hover{border-color:var(--border);}
.preset-btn em{
  font-style:normal;
  font-size:11px;
  color:var(--text-dim);
  text-align:center;
}
.preset-swatch{
  width:100%;height:56px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.preset-swatch.bg-light{ background:#eef0f4; }
.preset-swatch.bg-mid{   background:#c9cfd9; }
.preset-swatch.bg-dark{  background:#14151b; }
.preset-swatch.bg-warm{  background:#f2e2c4; }
.preset-swatch i{
  display:block;
  width:34px;height:24px;
  font-style:normal;
}
.preset-swatch span{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
}

/* ---------------- Export ---------------- */
.code-box{
  position:relative;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:9px;
  padding:12px 12px 12px;
}
.code-box pre{
  margin:0;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-all;
  max-height:180px;
  overflow-y:auto;
}
.code-box .copy{
  position:absolute;top:8px;right:8px;
  font-family:var(--mono);
  font-size:10.5px;
  padding:4px 8px;
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text-dim);
}
.code-box .copy:hover{color:var(--text);}
.code-tabs{display:flex;gap:6px;margin-bottom:8px;}
.code-tabs button{
  font-size:11px;font-family:var(--mono);
  background:none;border:1px solid var(--border-soft);
  color:var(--text-faint);
  padding:4px 9px;border-radius:6px;
}
.code-tabs button.active{color:var(--accent);border-color:var(--accent-dim);}