/* ---------------- Tool layout (specific to Pattern 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);
}
@media (max-width:960px){ .stage{border-right:none; border-bottom:1px solid var(--border-soft); min-height:60vh;} }

.stage-topbar{
  position:absolute;
  top:16px;left:16px;right:16px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  z-index:5;
}
.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 11px;
  border-radius:7px;
  transition:background .15s, color .15s;
}
.modetabs button.active{
  background:rgba(255,255,255,0.12);
  color:#fff;
}
.stage-actions{
  display:flex;gap:8px;
}
.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{
  flex:1;
  min-height:0;
}
#previewPattern{
  width:100%;
  height:100%;
  transition:background-color .1s ease;
}

/* ---------------- 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;
}

/* ---------------- 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;}

/* ---------------- 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:8px 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;
  border:1px solid var(--border-soft);
}

/* ---------------- 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);}