/* Color Studio — WellArt lighter blue / purple palette */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap');

.color-studio{
  margin:1.4rem 0 1.6rem;
  padding:1.15rem 1.1rem 1.25rem;
  border-radius:1.15rem;
  border:1px solid rgba(147,197,253,.55);
  background:linear-gradient(165deg,rgba(96,165,250,.2),rgba(139,92,246,.16) 55%,rgba(30,58,95,.45));
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.color-studio h2{
  margin:0 0 .25rem;
  font-size:clamp(1.25rem,2.8vw,1.55rem);
  color:#fff;
  font-family:Lexend,Inter,system-ui,sans-serif;
  font-weight:700;
}
.color-studio .cs-lead{
  margin:0 0 .85rem;
  color:#dbeafe;
  font-size:.9rem;
  font-family:Lexend,Inter,system-ui,sans-serif;
  font-weight:500;
  line-height:1.45;
}
.color-studio .cs-disclaimer{
  font-size:.75rem;
  color:#93c5fd;
  margin:0 0 .9rem;
  font-family:Lexend,Inter,system-ui,sans-serif;
  line-height:1.4;
}
.cs-tabs{
  display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.85rem;
}
.cs-tab{
  border:1px solid rgba(147,197,253,.55);
  background:rgba(15,40,70,.5);
  color:#f8fbff;
  border-radius:999px;
  padding:.45rem .85rem;
  font-size:.8rem;
  font-weight:700;
  font-family:Lexend,Inter,system-ui,sans-serif;
  cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.cs-tab:hover,.cs-tab.active{
  border-color:#93c5fd;
  background:linear-gradient(135deg,rgba(139,92,246,.45),rgba(96,165,250,.5));
  box-shadow:0 0 16px rgba(96,165,250,.35);
}
.cs-swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr));
  gap:.45rem;
  max-height:220px;
  overflow:auto;
  padding:.15rem .1rem .35rem;
  margin-bottom:.75rem;
  scrollbar-width:thin;
}
.cs-swatch{
  appearance:none;border:2px solid transparent;border-radius:.7rem;
  padding:0;cursor:pointer;aspect-ratio:1;min-height:3.4rem;
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .12s,border-color .12s,box-shadow .12s;
}
.cs-swatch:hover{transform:translateY(-2px)}
.cs-swatch.selected{
  border-color:#fff;
  box-shadow:0 0 0 2px #60a5fa,0 0 18px rgba(96,165,250,.55);
}
.cs-swatch .cs-swatch-name{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(15,23,42,.72);
  color:#fff;font-size:.58rem;font-weight:700;
  font-family:Lexend,Inter,system-ui,sans-serif;
  padding:.2rem .25rem;text-align:center;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-selected-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65rem;
  margin-bottom:.9rem;padding:.65rem .75rem;
  border-radius:.85rem;
  background:rgba(15,40,70,.45);
  border:1px solid rgba(147,197,253,.4);
  font-family:Lexend,Inter,system-ui,sans-serif;
}
.cs-selected-chip{
  width:2.4rem;height:2.4rem;border-radius:.55rem;
  border:2px solid #fff;flex-shrink:0;
  box-shadow:0 0 10px rgba(96,165,250,.4);
}
.cs-selected-meta strong{display:block;color:#fff;font-size:.95rem;font-weight:700}
.cs-selected-meta span{color:#93c5fd;font-size:.8rem;font-weight:500}
.cs-selected-meta em{display:block;color:#dbeafe;font-size:.75rem;font-style:normal;margin-top:.15rem}

.cs-places{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.65rem;
}
.cs-place{
  border:1px solid rgba(147,197,253,.5);
  background:rgba(15,40,70,.45);
  color:#fff;border-radius:999px;
  padding:.4rem .75rem;font-size:.78rem;font-weight:700;
  font-family:Lexend,Inter,system-ui,sans-serif;cursor:pointer;
}
.cs-place.active,.cs-place:hover{
  background:rgba(96,165,250,.4);border-color:#93c5fd;
}

.cs-preview-wrap{
  display:grid;grid-template-columns:1.35fr .9fr;gap:.85rem;
}
@media(max-width:820px){.cs-preview-wrap{grid-template-columns:1fr}}

.cs-canvas-box{
  position:relative;border-radius:1rem;overflow:hidden;
  border:1px solid rgba(147,197,253,.5);
  background:#0f1a2e;min-height:260px;
}
.cs-canvas-box canvas{
  display:block;width:100%;height:auto;max-height:380px;
  cursor:crosshair;touch-action:none;
}
.cs-room-mock{
  position:relative;aspect-ratio:16/10;width:100%;
  border-radius:1rem;overflow:hidden;
  border:1px solid rgba(147,197,253,.5);
  background:#1a2740;
}
.cs-room-mock .wall{
  position:absolute;cursor:pointer;
  transition:filter .15s;
}
.cs-room-mock .wall:hover{filter:brightness(1.08)}
.cs-room-mock .wall.painted{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.cs-room-mock .floor{
  position:absolute;left:0;right:0;bottom:0;height:28%;
  background:linear-gradient(180deg,#5c4a3a,#3d2e24);
  pointer-events:none;
}
.cs-room-mock .ceiling{
  position:absolute;left:0;right:0;top:0;height:12%;
  background:linear-gradient(180deg,#e8eef8,#cfd9ea);
  pointer-events:none;
}
.cs-room-mock .furn{
  position:absolute;pointer-events:none;border-radius:.35rem;
}
.cs-room-label{
  position:absolute;left:.55rem;top:.5rem;z-index:3;
  font-family:Lexend,Inter,system-ui,sans-serif;
  font-size:.72rem;font-weight:700;color:#fff;
  background:rgba(15,40,70,.85);border:1px solid rgba(147,197,253,.45);
  border-radius:999px;padding:.22rem .55rem;
}

.cs-controls{
  display:flex;flex-direction:column;gap:.65rem;
  font-family:Lexend,Inter,system-ui,sans-serif;
}
.cs-controls label{
  margin:0;font-size:.82rem;color:#dbeafe;font-weight:600;
}
.cs-controls input[type="range"]{width:100%;accent-color:#60a5fa}
.cs-btn-row{display:flex;flex-wrap:wrap;gap:.4rem}
.cs-btn{
  border:0;border-radius:.75rem;padding:.55rem .8rem;
  font-weight:700;font-size:.8rem;cursor:pointer;
  font-family:Lexend,Inter,system-ui,sans-serif;
  background:linear-gradient(135deg,#8b5cf6,#60a5fa);color:#fff;
}
.cs-btn.ghost{
  background:rgba(15,40,70,.55);
  border:1px solid rgba(147,197,253,.5);color:#fff;
}
.cs-btn:disabled{opacity:.45;cursor:not-allowed}
.cs-hint{
  font-size:.78rem;color:#93c5fd;line-height:1.4;margin:0;
  font-family:Lexend,Inter,system-ui,sans-serif;font-weight:500;
}
.cs-upload-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:.15rem;
}
.cs-upload-row input[type="file"]{
  font-size:.78rem;color:#dbeafe;max-width:100%;
  font-family:Lexend,Inter,system-ui,sans-serif;
}
.cs-brush-toggle{
  display:flex;align-items:center;gap:.4rem;
  font-size:.8rem;color:#dbeafe;font-weight:600;
}
.cs-brush-toggle input{width:auto;accent-color:#60a5fa}

/* Wes-tied labels in studio */
.color-studio .wes-tip-line{
  margin:.35rem 0 0;
  font-family:Lexend,Inter,system-ui,sans-serif;
  font-size:.88rem;font-weight:600;color:#f8fbff;
  line-height:1.4;
}