/* Phase 12 - Heavy Layer Management + Composite Workflow */
:root{
  --phase12-blue:#38bdf8;
  --phase12-green:#2fbf71;
  --phase12-gold:#f7c24f;
  --phase12-red:#ef6461;
  --phase12-purple:#a78bfa;
  --phase12-silver:#cbd5e1;
}
html[data-app-phase="12-heavy-layer-management"] .brand-copy span{ color:var(--phase12-blue); }
.phase12-layer-hud-strip{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:6px;
  align-items:center;
}
.phase12-layer-hud-strip span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#layerSelectedCount,#layerPerfChip{
  border:1px solid rgba(56,189,248,.22);
  border-radius:999px;
  padding:2px 7px;
  color:#bdefff;
  background:rgba(56,189,248,.07);
}
.phase12-layer-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 108px;
  gap:6px;
  margin:6px 0 8px;
}
.phase12-layer-search-row input,
.phase12-layer-search-row select,
#layerTagInput,
#layerColorTagInput{
  width:100%;
  background:rgba(2,6,23,.7);
  color:#e5f6ff;
  border:1px solid rgba(148,163,184,.25);
  border-radius:9px;
  padding:7px 8px;
  font:inherit;
  outline:none;
}
.phase12-layer-search-row input:focus,
.phase12-layer-search-row select:focus,
#layerTagInput:focus,
#layerColorTagInput:focus{ border-color:rgba(56,189,248,.72); box-shadow:0 0 0 2px rgba(56,189,248,.12); }
.phase12-layer-toolbar,.phase12-composite-toolbar{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:5px;
}
.phase12-composite-toolbar{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:6px; }
.phase12-composite-toolbar .small-btn,.phase12-layer-toolbar .small-btn{ min-width:0; padding-inline:6px; }
.danger-lite{ border-color:rgba(239,100,97,.5)!important; color:#ffd2d2!important; }
.phase12-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:7px 0;
}
.tag-chip{
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.74);
  color:#dbeafe;
  border-radius:999px;
  padding:4px 8px;
  font-size:11px;
  cursor:pointer;
}
.tag-chip.blue{ border-color:rgba(56,189,248,.55); }
.tag-chip.green{ border-color:rgba(47,191,113,.55); }
.tag-chip.gold{ border-color:rgba(247,194,79,.55); }
.tag-chip.red{ border-color:rgba(239,100,97,.55); }
.tag-chip.purple{ border-color:rgba(167,139,250,.55); }
.phase12-layers-list{
  max-height:min(48vh, 540px);
  overflow:auto;
  scrollbar-width:thin;
  contain:content;
}
.phase12-layer-row{
  display:grid!important;
  grid-template-columns:18px 24px 24px 24px 18px 54px 24px minmax(0,1fr) auto;
  gap:5px;
  align-items:center;
  min-height:48px;
  padding:5px 6px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.14);
  background:rgba(15,23,42,.48);
  cursor:pointer;
}
.phase12-layer-row[data-layer-depth="1"]{ margin-left:16px; border-left-color:rgba(247,194,79,.38); }
.phase12-layer-row.selected{ outline:1px solid rgba(56,189,248,.65); background:rgba(56,189,248,.09); }
.phase12-layer-row.dragging{ opacity:.54; }
.phase12-layer-row.drag-over{ box-shadow:0 0 0 2px rgba(247,194,79,.58) inset; }
.phase12-layer-row.alpha-locked .layer-alpha{ color:#ffe08a; border-color:rgba(247,194,79,.55); }
.layer-select-box{ accent-color:var(--phase12-blue); width:14px; height:14px; }
.layer-alpha,.layer-group-toggle{
  height:24px;
  min-width:24px;
  border:1px solid rgba(148,163,184,.18);
  color:#cbd5e1;
  border-radius:7px;
  background:rgba(2,6,23,.38);
  cursor:pointer;
}
.layer-group-spacer{ width:18px; height:1px; }
.layer-thumb{
  width:50px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.28));
  overflow:hidden;
}
.layer-thumb-canvas{ width:48px; height:34px; image-rendering:auto; }
.layer-color-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:5px;
  background:rgba(148,163,184,.35);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}
.layer-color-dot.blue{ background:var(--phase12-blue); }
.layer-color-dot.green{ background:var(--phase12-green); }
.layer-color-dot.gold{ background:var(--phase12-gold); }
.layer-color-dot.red{ background:var(--phase12-red); }
.layer-color-dot.purple{ background:var(--phase12-purple); }
.layer-color-dot.silver{ background:var(--phase12-silver); }
.phase12-layer-row[data-color-tag="blue"]{ border-left:3px solid var(--phase12-blue); }
.phase12-layer-row[data-color-tag="green"]{ border-left:3px solid var(--phase12-green); }
.phase12-layer-row[data-color-tag="gold"]{ border-left:3px solid var(--phase12-gold); }
.phase12-layer-row[data-color-tag="red"]{ border-left:3px solid var(--phase12-red); }
.phase12-layer-row[data-color-tag="purple"]{ border-left:3px solid var(--phase12-purple); }
.phase12-layer-row[data-color-tag="silver"]{ border-left:3px solid var(--phase12-silver); }
@media (max-width: 980px){
  .phase12-layer-toolbar,.phase12-composite-toolbar{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .phase12-layer-row{ grid-template-columns:18px 22px 22px 22px 16px 46px 20px minmax(0,1fr); }
  .phase12-layer-row .layer-size{ display:none; }
}