/* =========================
   CREATOR LAYOUT
========================= */

.creator-layout .top-layout{
  max-width:1100px;
  margin:0 auto 30px;
}

/* =========================
   GRID SYSTEM
========================= */
.creator-layout .grid-4{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(260px,1fr));
  gap:20px;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  align-items:stretch;
}

.creator-layout .grid-4 .panel{
  height:100%;
  display:flex;
  flex-direction:column;
}

.creator-layout .panel{
  width:100%;
  box-sizing:border-box;
}

.creator-layout .grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}

/* =========================
   WORKSPACE PANEL
========================= */

.creator-layout .workspace-panel{
padding:20px 20px 18px;
position:relative;
overflow:visible;
}

.creator-layout .workspace-panel h2,
.creator-layout .flow-text{
  text-align:center;
}

.creator-layout .flow-text{
  font-size:12px;
  opacity:0.8;
  margin-bottom:10px;
}

/* =========================
   VARIATION CONTROLS
========================= */

.creator-layout .variation-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;

  margin:10px 0 14px;
}

.creator-layout .variation-count{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:14px;
  flex-wrap:wrap;

  font-size:12px;
}

.creator-layout .control-group{
  display:flex;
  align-items:center;
  gap:6px;
}

/* =========================
   TOGGLES
========================= */

.creator-layout .variation-toggles{
  display:flex;
  justify-content:center;
  gap:10px;

  flex-wrap:wrap;
}

.creator-layout .variation-toggles label{
  display:flex;
  align-items:center;
  gap:6px;

  font-size:11px;
}

/* =========================
   OUTPUT SYSTEM
========================= */

.creator-layout .output-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;

  margin-top:10px;
}

.creator-layout .output-grid textarea{
  min-height:120px;
  resize:vertical;
}

/* =========================
   VARIATIONS GRID
========================= */

.creator-layout .variations-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

  gap:12px;
  margin-top:6px;
}

.creator-layout .var-card{
  display:flex;
  flex-direction:column;

  gap:10px;
  padding:12px;

  line-height:1.4;
}

.creator-layout .var-card button{
  align-self:flex-start;
  padding:4px 10px;
  font-size:11px;
}

/* =========================
   CHARACTER LIBRARY
========================= */

.creator-layout .library-item{
  padding:12px 14px;
  margin-bottom:10px;

  border-radius:8px;

  background:rgba(255,255,255,0.03);

  cursor:pointer;

  transition:all 0.15s ease;
}

.creator-layout .library-item:hover{
  background:rgba(255,255,255,0.08);
}

.creator-layout .library-item div:last-child{
  font-size:12px;
  opacity:0.75;
  line-height:1.4;
}

.creator-layout .library-title{
  font-size:13px;
  font-weight:600;

  margin-bottom:6px;

  color:rgba(255,255,255,0.95);
}

.creator-layout .library-item.active{
  background:rgba(79,70,229,0.25);

  border:1px solid rgba(99,102,241,0.6);
}

/* =========================
   LOCK STATUS
========================= */

#lockStatus{
display:flex;
align-items:center;
justify-content:center;
min-height:22px;
margin:14px auto 0;
padding:10px 14px;
width:fit-content;
max-width:90%;
background:rgba(10,18,35,.96);
color:#fff;
border-radius:10px;
font-size:13px;
font-weight:600;
border:1px solid rgba(90,140,255,.22);
box-shadow:0 8px 24px rgba(0,0,0,.35);
opacity:1!important;
transition:.2s ease;
}

@media (max-width: 1200px){
  .creator-layout .grid-4{
    grid-template-columns:
      repeat(2,minmax(260px,1fr));
  }
}

@media (max-width: 700px){
  .creator-layout .grid-4{
    grid-template-columns:1fr;
  }
}