body.layer-workspace {
  background:
    radial-gradient(circle at 8% 9%, rgba(111,75,232,.16), transparent 27%),
    radial-gradient(circle at 93% 10%, rgba(0,193,183,.16), transparent 29%),
    linear-gradient(145deg,#f7f5ff,#f1fbfb 52%,#f8fbff);
}

.layer-workspace .brand-mark {
  background: linear-gradient(140deg,#1b153d,#6945df 52%,#00afa8);
  box-shadow: 0 8px 22px rgba(85,58,195,.34);
}

.layer-workspace .panel {
  border-color: rgba(107,87,191,.23);
  box-shadow: 0 18px 44px rgba(54,45,105,.11);
}

.layer-workspace .source-title {
  background: linear-gradient(108deg,#18152f,#43308c 58%,#6852ce);
  box-shadow: 0 9px 22px rgba(42,29,95,.28);
}

.layer-workspace .control-title {
  background: linear-gradient(108deg,#5334ca,#7650e7 48%,#218bca);
  box-shadow: 0 9px 22px rgba(84,53,197,.27);
}

.layer-workspace .result-title {
  background: linear-gradient(108deg,#075e72,#008f91 53%,#24af81);
  box-shadow: 0 9px 22px rgba(0,126,129,.24);
}

.layer-workspace .panel-title .title-copy strong { color: #fff; }
.layer-workspace .panel-title .title-copy small { color: rgba(255,255,255,.76); }

.layer-workspace .selected-tool-bar {
  border-color: #a99af1;
  background: linear-gradient(110deg,#f3f0ff,#ecfbff 62%,#edfff8);
  box-shadow: inset 4px 0 #6847dc, 0 7px 18px rgba(77,56,166,.1);
}

.layer-workspace #change-tool-button,
.layer-workspace #tool-ready-count,
.layer-workspace #move-left,
.layer-workspace #move-right {
  display: none !important;
}

.setting-card.setting-theme-image_layers {
  position: relative;
  overflow: hidden;
  border-color: rgba(105,72,221,.32);
  background: linear-gradient(145deg,rgba(250,249,255,.98),rgba(239,252,253,.97));
  box-shadow: 0 14px 34px rgba(68,48,148,.13);
}

.setting-card.setting-theme-image_layers:before {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -92px;
  top: -105px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(60,214,203,.28),rgba(104,71,220,.08) 58%,transparent 70%);
  pointer-events: none;
}

.setting-theme-image_layers .setting-head {
  position: relative;
  border-bottom-color: rgba(99,73,197,.17);
}

.setting-theme-image_layers .setting-head strong {
  color: #332563;
  font-size: 18px;
}

.setting-theme-image_layers .setting-options { display: block; }

.layering-overview { display: grid; gap: 12px; }

.layering-hero {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(113,83,222,.25);
  border-radius: 14px;
  background: linear-gradient(120deg,#201a46,#5633bc 56%,#087f96);
  color: #fff;
  box-shadow: 0 12px 25px rgba(50,35,119,.22);
}

.layering-hero > span:last-child { min-width: 0; }
.layering-hero small,.layering-hero strong,.layering-hero em { display: block; }
.layering-hero small { color: #9bf7ee; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.layering-hero strong { margin-top: 3px; font-size: 19px; letter-spacing: .03em; }
.layering-hero em { margin-top: 4px; color: rgba(255,255,255,.72); font-size: 11px; font-style: normal; }

.layering-stack { position: relative; width: 56px; height: 56px; flex: 0 0 56px; }
.layering-stack i { position: absolute; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.68); border-radius: 9px; transform: rotate(-7deg); }
.layering-stack i:nth-child(1) { left: 2px; top: 15px; background: rgba(4,206,188,.42); }
.layering-stack i:nth-child(2) { left: 10px; top: 9px; background: rgba(122,93,235,.58); }
.layering-stack i:nth-child(3) { left: 18px; top: 3px; background: linear-gradient(135deg,#fff,#bdfaf3); box-shadow: 0 7px 16px rgba(0,0,0,.22); }

.layering-ratio {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  gap: 10px;
}

.layering-ratio > span {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #dad5f5;
  border-radius: 11px;
  background: rgba(255,255,255,.86);
}

.layering-ratio small,.layering-ratio b { display: block; }
.layering-ratio small { color: #828ba0; font-size: 10px; }
.layering-ratio b { margin-top: 3px; overflow: hidden; color: #49358f; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.layering-ratio > i { color: #7a65d9; font-size: 19px; font-style: normal; }

.layering-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.layering-flow span { padding: 9px 7px; border-radius: 9px; background: #eeebfb; color: #51457c; font-size: 10px; font-weight: 800; text-align: center; }
.layering-flow i { margin-right: 4px; color: #7455df; font-style: normal; }

.layering-promise { display: flex; flex-wrap: wrap; gap: 6px; }
.layering-promise span { padding: 5px 8px; border: 1px solid #bce6dd; border-radius: 99px; background: #edfaf7; color: #157a69; font-size: 10px; font-weight: 800; }

.layer-workspace .run-button {
  background: linear-gradient(105deg,#4f34c8,#784ee7 48%,#00a99d);
  box-shadow: 0 10px 24px rgba(78,54,192,.28);
  letter-spacing: .04em;
}

.layer-workspace .run-button:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
.layer-workspace .poster-result-mode .result-preview { border-color: #59499c; box-shadow: inset 0 0 0 2px rgba(96,76,177,.18); }

@media(max-width:600px) {
  .layering-hero { min-height: 82px; padding: 12px; }
  .layering-hero strong { font-size: 17px; }
  .layering-flow { grid-template-columns: 1fr; }
}