:root {
  --la-bg: #14191c;
  --la-bg-2: #20272b;
  --la-panel: rgba(255,255,255,.065);
  --la-panel-strong: rgba(255,255,255,.085);
  --la-border: rgba(255,255,255,.11);
  --la-border-soft: rgba(255,255,255,.075);
  --la-text: rgba(255,255,255,.94);
  --la-muted: rgba(255,255,255,.66);
  --la-dim: rgba(255,255,255,.43);
  --la-orange: #ff5a3c;
  --la-orange-2: #ff8069;
  --la-purple: #ff653c;
}

* {
  box-sizing: border-box;
}

body.colour-studio-page {
  background: var(--la-bg);
  color: var(--la-text);
}


/* =========================================================
   MAIN STUDIO LAYOUT
   ========================================================= */

body.colour-studio-page .studio-grid {
  display: grid;
  grid-template-columns: 270px minmax(520px,1fr) 320px;
  gap: 12px;
  width: 100%;
  height: calc(100vh - 112px);
  min-height: 650px;
  padding: 12px 14px;
  align-items: stretch;
}

body.colour-studio-page .left-panel,
body.colour-studio-page .right-panel,
body.colour-studio-page .workspace {
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(0,0,0,.20);
}

body.colour-studio-page .left-panel,
body.colour-studio-page .right-panel {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.065),
    rgba(255,255,255,.038)
  );
  overflow-y: auto;
  overflow-x: hidden;
}

body.colour-studio-page .workspace {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
}

body.colour-studio-page .panel-section,
body.colour-studio-page .right-section {
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

body.colour-studio-page .panel-section:last-child,
body.colour-studio-page .right-section:last-child {
  border-bottom: 0;
}

body.colour-studio-page .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.colour-studio-page .panel-section h2,
body.colour-studio-page .right-section h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .01em;
}

body.colour-studio-page .intro-section h1 {
  margin: 4px 0 7px;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -.02em;
}

body.colour-studio-page .intro-section p {
  margin: 0;
  color: var(--la-muted);
  font-size: 8.5px;
  line-height: 1.5;
}

body.colour-studio-page .studio-kicker {
  color: var(--la-orange-2);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}

body.colour-studio-page .mini-badge {
  padding: 3px 6px;
  border: 1px solid rgba(255,90,60,.28);
  border-radius: 6px;
  background: rgba(255,90,60,.07);
  color: #ff9c89;
  font-size: 7px;
  font-weight: 900;
}

body.colour-studio-page .mini-badge.success {
  color: #a7f3c1;
  border-color: rgba(92,220,135,.28);
  background: rgba(92,220,135,.07);
}


/* =========================================================
   UPLOAD AREAS
   ========================================================= */

body.colour-studio-page .upload-box {
  position: relative;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

body.colour-studio-page .upload-box:hover,
body.colour-studio-page .upload-box.drag {
  border-color: rgba(255,90,60,.55);
  background: rgba(255,90,60,.045);
}

body.colour-studio-page .upload-box input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

body.colour-studio-page .upload-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,90,60,.25);
  border-radius: 9px;
  background: rgba(255,90,60,.10);
  color: var(--la-orange-2);
  font-size: 16px;
  font-weight: 900;
}

body.colour-studio-page .upload-box strong {
  font-size: 10px;
  font-weight: 850;
}

body.colour-studio-page .upload-box small {
  font-size: 8px;
  color: var(--la-dim);
}

body.colour-studio-page .help-copy {
  margin: 7px 0 0;
  color: var(--la-dim);
  font-size: 8.5px;
  line-height: 1.45;
}


/* =========================================================
   TEXTAREA / PROMPT
   ========================================================= */

body.colour-studio-page textarea {
  width: 100%;
  min-height: 112px;
  padding: 10px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  outline: none;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.9);
  font: inherit;
  font-size: 10px;
  line-height: 1.45;
  transition: .18s ease;
}

body.colour-studio-page textarea:focus {
  border-color: rgba(255,90,60,.55);
  box-shadow: 0 0 0 2px rgba(255,90,60,.08);
}

body.colour-studio-page .prompt-section textarea {
  min-height: 82px;
}


/* =========================================================
   OLD PRESET GRID
   ========================================================= */

body.colour-studio-page .preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

body.colour-studio-page .preset-grid button {
  min-height: 31px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

body.colour-studio-page .preset-grid button:hover {
  border-color: rgba(255,90,60,.38);
  background: rgba(255,90,60,.055);
  color: #fff;
}


/* =========================================================
   GENERATE AREA
   ========================================================= */

body.colour-studio-page .sticky-generate {
  position: sticky;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(20,25,28,.70),
    rgba(20,25,28,.98)
  );
  backdrop-filter: blur(10px);
  z-index: 3;
}

body.colour-studio-page .generate-btn {
  width: 100%;
  min-height: 43px;
  padding: 0 13px;
  border: 1px solid rgba(255,90,60,.62);
  border-radius: 11px;
  background: linear-gradient(180deg,#ff684d,#ff5238);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

body.colour-studio-page .generate-btn b {
  font-size: 8px;
  opacity: .78;
}

body.colour-studio-page .generate-btn:hover {
  filter: brightness(1.05);
}

body.colour-studio-page .generate-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

body.colour-studio-page .error-box {
  margin-bottom: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(255,107,107,.28);
  border-radius: 9px;
  background: rgba(255,107,107,.08);
  color: #ffb0b0;
  font-size: 8px;
  line-height: 1.4;
}

body.colour-studio-page .error-box[hidden] {
  display: none;
}


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

body.colour-studio-page .workspace-toolbar {
  flex: 0 0 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid #ddd8df;
  background: #20272b;
  position: relative;
  z-index: 5;
}

body.colour-studio-page .workspace-toolbar > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.colour-studio-page .workspace-toolbar strong {
  font-size: 10px;
}

body.colour-studio-page .workspace-toolbar div span {
  font-size: 7.5px;
  color: var(--la-muted);
}

body.colour-studio-page .status-pill {
  padding: 6px 8px;
  border: 1px solid rgba(255,90,60,.26);
  border-radius: 999px;
  background: rgba(255,90,60,.08);
  color: #ff9c89;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .08em;
}

body.colour-studio-page .status-pill.working {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  color: #a9a5ad;
}

body.colour-studio-page .status-pill.done {
  border-color: rgba(62,190,112,.3);
  background: rgba(62,190,112,.08);
  color: #76d99b;
}

body.colour-studio-page .preview-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  color: #21182a;
}

body.colour-studio-page .empty-state {
  width: min(470px,90%);
  text-align: center;
  padding: 30px;
  color: #21182a;
}

body.colour-studio-page .empty-state h1 {
  margin: 18px 0 8px;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -.025em;
}

body.colour-studio-page .empty-state p {
  margin: 0;
  color: #5e5365;
  font-size: 10px;
  line-height: 1.55;
}


/* =========================================================
   EMPTY LAYER ICON
   ========================================================= */

body.colour-studio-page .layer-icon {
  position: relative;
  width: 92px;
  height: 72px;
  margin: 0 auto;
}

body.colour-studio-page .layer-icon i {
  position: absolute;
  width: 66px;
  height: 44px;
  border: 1px solid #d7d0da;
  border-radius: 8px;
  background: #fff;
}

body.colour-studio-page .layer-icon i:nth-child(1) {
  left: 2px;
  top: 23px;
}

body.colour-studio-page .layer-icon i:nth-child(2) {
  left: 7px;
  top: 18px;
}

body.colour-studio-page .layer-icon i:nth-child(3) {
  left: 12px;
  top: 13px;
}

body.colour-studio-page .layer-icon i:nth-child(4) {
  left: 17px;
  top: 8px;
}

body.colour-studio-page .layer-icon i:nth-child(5) {
  left: 22px;
  top: 3px;
  border-color: rgba(255,90,60,.50);
}


/* =========================================================
   MASTER RESULT
   ========================================================= */

body.colour-studio-page .master-result {
  width: min(92%,820px);
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}

body.colour-studio-page .master-result:not([hidden]) {
  display: flex;
}

body.colour-studio-page .master-result img {
  display: block;
  max-width: 94%;
  max-height: calc(100% - 50px);
  object-fit: contain;
  border: 1px solid #eee;
  border-radius: 8px;
}

body.colour-studio-page .cs-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(255,90,60,.38);
  border-radius: 9px;
  background: #fff2ee;
  color: #d94b32;
  text-decoration: none;
  font-size: 9px;
  font-weight: 850;
}


/* =========================================================
   PROGRESS OVERLAY
   ========================================================= */

body.colour-studio-page .progress-overlay {
  position: absolute;
  inset: 48px 0 54px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: rgba(20,25,28,.90);
  backdrop-filter: blur(10px);
  color: #fff;
}

body.colour-studio-page .progress-overlay[hidden] {
  display: none !important;
}

body.colour-studio-page .spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--la-orange);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

body.colour-studio-page .progress-overlay strong {
  font-size: 11px;
}

body.colour-studio-page .progress-overlay > span {
  max-width: 360px;
  text-align: center;
  color: var(--la-muted);
  font-size: 8.5px;
}


/* =========================================================
   WORKSPACE BOTTOM BAR
   ========================================================= */

body.colour-studio-page .workspace-bottom-bar {
  position: relative;
  flex: 0 0 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 10px;
  background: #fff;
  border-top: 1px solid rgba(33,24,42,.08);
  color: #6b6272;
  font-size: 8px;
  gap: 10px;
}

body.colour-studio-page .workspace-download-btn {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(255,90,60,.38);
  border-radius: 10px;
  background: rgba(255,90,60,.08);
  color: #d94b32;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

body.colour-studio-page .workspace-download-btn:hover {
  background: var(--la-orange);
  border-color: var(--la-orange);
  color: #fff;
}

body.colour-studio-page .workspace-download-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

body.colour-studio-page .bottom-actions {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

body.colour-studio-page .bottom-actions .workspace-download-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
}

body.colour-studio-page .workspace-download-btn.secondary {
  background: #fff;
  color: #5c4c66;
  border-color: #d9d1dd;
}

body.colour-studio-page .workspace-download-btn.secondary:hover {
  background: #21182a;
  color: #fff;
  border-color: #21182a;
}


/* =========================================================
   RIGHT PANEL / LAYERS
   ========================================================= */

body.colour-studio-page .right-panel {
  display: flex;
  flex-direction: column;
}

body.colour-studio-page .right-panel .right-section {
  overflow-y: auto;
  overflow-x: hidden;
}

body.colour-studio-page .right-panel .right-section:first-child {
  flex: 1;
}

body.colour-studio-page .results-section {
  max-height: 46%;
  flex: 0 1 auto;
}

body.colour-studio-page .layer-list,
body.colour-studio-page .result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.colour-studio-page .layer-placeholder {
  padding: 20px 10px;
  text-align: center;
  color: var(--la-dim);
  font-size: 8.5px;
  line-height: 1.5;
}

body.colour-studio-page .cs-layer {
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
  background: rgba(255,255,255,.032);
  cursor: grab;
}

body.colour-studio-page .cs-layer > img {
  width: 55px;
  height: 55px;
  object-fit: contain;
  border-radius: 7px;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10);
  display: block;
  float: left;
  margin-right: 8px;
}

body.colour-studio-page .cs-layer footer {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #fff;
  font-size: 9px;
  font-weight: 850;
}

body.colour-studio-page .cs-layer footer button {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  color: #ff9c89;
  font-size: 16px;
  cursor: pointer;
}

body.colour-studio-page .cs-layer::after {
  content: "";
  display: block;
  clear: both;
}

body.colour-studio-page .result-list .cs-layer {
  cursor: default;
}

body.colour-studio-page .result-list .cs-layer .cs-download {
  width: 100%;
  margin-top: 7px;
  background: rgba(255,90,60,.07);
  color: #ff9c89;
  border-color: rgba(255,90,60,.28);
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

body.colour-studio-page .left-panel::-webkit-scrollbar,
body.colour-studio-page .right-panel::-webkit-scrollbar,
body.colour-studio-page .preview-canvas::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

body.colour-studio-page .left-panel::-webkit-scrollbar-thumb,
body.colour-studio-page .right-panel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 10px;
}

body.colour-studio-page .preview-canvas::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.16);
  border-radius: 10px;
}


/* =========================================================
   CHECKERBOARD / LAYER 1 COMPARE
   ========================================================= */

body.colour-studio-page .checkerboard {
  background-color: #fff;
  background-image:
    linear-gradient(45deg,#e9e9e9 25%,transparent 25%),
    linear-gradient(-45deg,#e9e9e9 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e9e9e9 75%),
    linear-gradient(-45deg,transparent 75%,#e9e9e9 75%);
  background-size: 22px 22px;
  background-position: 0 0,0 11px,11px -11px,-11px 0;
}

body.colour-studio-page .anchor-compare {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(94%,820px);
  height: calc(100% - 50px);
  min-height: 300px;
  border: 1px solid #ddd6e0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

body.colour-studio-page .anchor-compare img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

body.colour-studio-page .compare-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ff5a3c;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

body.colour-studio-page .compare-badge.original {
  background: #201727;
}

body.colour-studio-page .compare-help {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(23,17,29,.82);
  color: #fff;
  font-size: 8px;
  white-space: nowrap;
  pointer-events: none;
}

body.colour-studio-page .complete-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(94%,820px);
  height: calc(100% - 50px);
  min-height: 300px;
  border: 1px solid #ddd6e0;
  border-radius: 10px;
  overflow: hidden;
}

body.colour-studio-page .complete-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0;
}

body.colour-studio-page .cs-download.as-button {
  font: inherit;
  cursor: pointer;
}


/* =========================================================
   RIGHT-SIDE RESULT CAROUSEL
   ========================================================= */

body.colour-studio-page .result-carousel-mini {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 28px;
  align-items: center;
  gap: 5px;
}

body.colour-studio-page .result-list {
  min-width: 0;
}

body.colour-studio-page .carousel-arrow {
  width: 28px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

body.colour-studio-page .carousel-arrow:hover {
  border-color: rgba(255,90,60,.45);
  background: rgba(255,90,60,.08);
}

body.colour-studio-page .carousel-arrow:disabled {
  opacity: .25;
  cursor: default;
}

body.colour-studio-page .cs-result-card {
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.03);
}

body.colour-studio-page .result-image-wrap {
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}

body.colour-studio-page .result-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}

body.colour-studio-page .cs-result-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 1px 4px;
  color: #fff;
  font-size: 8.5px;
  font-weight: 850;
}

body.colour-studio-page .cs-result-card footer b {
  color: var(--la-dim);
  font-size: 7.5px;
}

body.colour-studio-page .cs-result-card .cs-download {
  width: 100%;
  background: rgba(255,90,60,.07);
  color: #ff9c89;
  border-color: rgba(255,90,60,.28);
}

body.colour-studio-page .result-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 7px;
}

body.colour-studio-page .result-dots button {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  cursor: pointer;
}

body.colour-studio-page .result-dots button.active {
  background: var(--la-orange);
  transform: scale(1.25);
}


/* =========================================================
   LAYERED PREVIEW MODAL
   ========================================================= */

body.modal-open {
  overflow: hidden;
}

body.colour-studio-page .layered-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8,5,12,.78);
  backdrop-filter: blur(8px);
}

body.colour-studio-page .layered-modal[hidden] {
  display: none !important;
}

body.colour-studio-page .layered-modal-card {
  display: flex;
  flex-direction: column;
  width: min(1180px,96vw);
  height: min(820px,92vh);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: #242b2f;
  box-shadow: 0 30px 90px rgba(0,0,0,.48);
}

body.colour-studio-page .layered-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body.colour-studio-page .layered-modal-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

body.colour-studio-page .layered-modal-head strong {
  font-size: 13px;
}

body.colour-studio-page .layered-modal-head span {
  font-size: 8px;
  color: var(--la-muted);
}

body.colour-studio-page .layered-modal-head button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

body.colour-studio-page .preview-tabs {
  display: flex;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

body.colour-studio-page .preview-tabs button {
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: var(--la-muted);
  font: inherit;
  font-size: 8.5px;
  font-weight: 850;
  cursor: pointer;
}

body.colour-studio-page .preview-tabs button.active {
  border-color: rgba(255,90,60,.48);
  background: rgba(255,90,60,.10);
  color: #fff;
}

body.colour-studio-page .modal-view {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

body.colour-studio-page .modal-view[hidden] {
  display: none !important;
}

body.colour-studio-page .all-layers-view {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  gap: 12px;
  align-content: start;
}

body.colour-studio-page .all-layer-card {
  padding: 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
}

body.colour-studio-page .all-layer-card > div {
  height: 230px;
  border-radius: 8px;
  overflow: hidden;
}

body.colour-studio-page .all-layer-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
}

body.colour-studio-page .all-layer-card strong {
  display: block;
  padding: 8px 2px 2px;
  font-size: 9px;
  text-align: center;
}

body.colour-studio-page .stacked-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: auto;
  padding-left: 4%;
  padding-right: 4%;
}

body.colour-studio-page .stack-stage {
  position: relative;
  flex: 1;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 12px;
  perspective: 1200px;
  margin: 4px 7%;
}

body.colour-studio-page .stack-scene {
  position: absolute;
  inset: 12%;
  transform-style: preserve-3d;
  transition: transform .15s ease;
}

body.colour-studio-page .stack-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.12));
  transition: transform .12s ease-out;
}

body.colour-studio-page .stack-scene.is-exploded {
  transform: rotateX(4deg) rotateY(-6deg);
}

body.colour-studio-page .explode-controls {
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

body.colour-studio-page .explode-controls label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
  font-size: 9px;
  font-weight: 850;
}

body.colour-studio-page .explode-controls label b {
  color: #ff9c89;
}

body.colour-studio-page .explode-controls input {
  width: 100%;
  accent-color: var(--la-orange);
}

body.colour-studio-page .explode-labels {
  display: flex;
  justify-content: space-between;
  color: var(--la-dim);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}


/* =========================================================
   STYLE PICKER
   ========================================================= */

body.colour-studio-page .style-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

body.colour-studio-page .style-picker-head span {
  color: var(--la-dim);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .09em;
}

body.colour-studio-page .style-picker-head b {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ff9c89;
  font-size: 7.5px;
  font-weight: 900;
}

body.colour-studio-page .featured-styles {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
  margin-top: 7px;
}

body.colour-studio-page .style-option-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
}


/* =========================================================
   COLOURED STYLE BUTTONS
   ========================================================= */

body.colour-studio-page [data-preset] {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 34px;
  padding: 6px 7px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;

  background: #211a29;

  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(0,0,0,.85);

  font: inherit;
  font-size: 8px;
  font-weight: 900;
  line-height: 1.15;

  cursor: pointer;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

/*
  The coloured layer sits BEHIND the text.
  This gives every style its own recognisable palette
  while keeping the MarcAM dark interface.
*/
body.colour-studio-page [data-preset]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background: var(
    --style-bg,
    linear-gradient(135deg,#30283a,#211a29)
  );

  opacity: .58;

  transition:
    opacity .16s ease,
    transform .2s ease;
}

/*
  Dark overlay keeps white text readable.
*/
body.colour-studio-page [data-preset]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    linear-gradient(
      180deg,
      rgba(8,5,12,.12),
      rgba(8,5,12,.48)
    );

  transition: background .16s ease;
}

body.colour-studio-page [data-preset]:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.34);
  color: #fff;
  box-shadow: 0 5px 13px rgba(0,0,0,.20);
}

body.colour-studio-page [data-preset]:hover::before {
  opacity: .82;
  transform: scale(1.04);
}

body.colour-studio-page [data-preset]:hover::after {
  background:
    linear-gradient(
      180deg,
      rgba(8,5,12,.05),
      rgba(8,5,12,.30)
    );
}

body.colour-studio-page [data-preset].active {
  border-color: #ff5a3c;
  color: #fff;

  box-shadow:
    0 0 0 1px rgba(255,90,60,.38),
    0 0 13px rgba(255,90,60,.18);
}

body.colour-studio-page [data-preset].active::before {
  opacity: .88;
}

body.colour-studio-page [data-preset].active::after {
  background:
    linear-gradient(
      180deg,
      rgba(8,5,12,.02),
      rgba(8,5,12,.25)
    );
}


/* =========================================================
   INDIVIDUAL STYLE PALETTES
   ========================================================= */

/* Vibrant Fantasy */
body.colour-studio-page [data-style-name="Vibrant Fantasy"] {
  --style-bg:
    radial-gradient(circle at 10% 10%,#ff32c8 0,transparent 42%),
    radial-gradient(circle at 90% 15%,#00d9ff 0,transparent 42%),
    radial-gradient(circle at 55% 100%,#ff7b22 0,transparent 45%),
    linear-gradient(135deg,#6a28db,#1879dc,#22a85e);
}

/* Cartoon */
body.colour-studio-page [data-style-name="Cartoon"] {
  --style-bg:
    linear-gradient(
      135deg,
      #28aef5 0 33%,
      #ffd63a 33% 66%,
      #f54d45 66% 100%
    );
}

/* Comic Book */
body.colour-studio-page [data-style-name="Comic Book"] {
  --style-bg:
    radial-gradient(circle,#241825 1px,transparent 1.7px),
    linear-gradient(
      135deg,
      #ed3e3e 0 34%,
      #f4cf28 34% 67%,
      #2773cc 67%
    );

  background-size: 6px 6px,100% 100%;
}

/* Asian Art */
body.colour-studio-page [data-style-name="Asian Art"] {
  --style-bg:
    linear-gradient(
      135deg,
      #a71d26 0 34%,
      #d0a02d 34% 62%,
      #126a59 62%
    );
}

/* Gothic */
body.colour-studio-page [data-style-name="Gothic"] {
  --style-bg:
    radial-gradient(circle at 75% 20%,#72203e,transparent 45%),
    linear-gradient(135deg,#0d0b12,#2c173b,#50172f);
}

/* Stained Glass */
body.colour-studio-page [data-style-name="Stained Glass"] {
  --style-bg:
    linear-gradient(
      45deg,
      transparent 46%,
      rgba(15,10,17,.85) 47% 51%,
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #1751a0 0 23%,
      #9d1e3e 23% 44%,
      #d49b20 44% 62%,
      #13735b 62% 80%,
      #652f91 80%
    );
}

/* Anime */
body.colour-studio-page [data-style-name="Anime"] {
  --style-bg:
    linear-gradient(
      135deg,
      #4ebcf5,
      #f47fbd,
      #8069d6,
      #f6d978
    );
}

/* Pop Art */
body.colour-studio-page [data-style-name="Pop Art"] {
  --style-bg:
    radial-gradient(circle,#e52c50 1.6px,transparent 2px),
    linear-gradient(
      135deg,
      #f3d52e 0 50%,
      #20a8db 50%
    );

  background-size: 7px 7px,100% 100%;
}

/* Retro Comic */
body.colour-studio-page [data-style-name="Retro Comic"] {
  --style-bg:
    radial-gradient(circle,rgba(44,32,30,.72) 1px,transparent 1.5px),
    linear-gradient(
      125deg,
      #bd5145,
      #cba447,
      #467481
    );

  background-size: 6px 6px,100% 100%;
}

/* Tattoo Flash */
body.colour-studio-page [data-style-name="Tattoo Flash"] {
  --style-bg:
    linear-gradient(
      135deg,
      #d8c493 0 26%,
      #a92829 26% 51%,
      #315b38 51% 76%,
      #171519 76%
    );
}

/* Graffiti */
body.colour-studio-page [data-style-name="Graffiti"] {
  --style-bg:
    radial-gradient(circle at 20% 20%,#ff2a9e,transparent 35%),
    radial-gradient(circle at 80% 30%,#d7ef25,transparent 38%),
    radial-gradient(circle at 60% 90%,#00d8d5,transparent 42%),
    linear-gradient(120deg,#f37522,#6533d5);
}

/* Watercolour */
body.colour-studio-page [data-style-name="Watercolour"] {
  --style-bg:
    radial-gradient(circle at 20% 50%,#e994b4,transparent 48%),
    radial-gradient(circle at 70% 25%,#80bddd,transparent 48%),
    radial-gradient(circle at 80% 85%,#a7c79b,transparent 48%),
    linear-gradient(135deg,#d9b7a5,#a991cc);
}

/* Natural */
body.colour-studio-page [data-style-name="Natural / Realistic"] {
  --style-bg:
    linear-gradient(
      135deg,
      #6ba0bf 0 31%,
      #49743c 31% 62%,
      #725038 62% 82%,
      #ad956b 82%
    );
}

/* Pastel */
body.colour-studio-page [data-style-name="Pastel"] {
  --style-bg:
    linear-gradient(
      120deg,
      #efabc5,
      #baa9e5,
      #a5d8c5,
      #edc896
    );
}

/* Vintage */
body.colour-studio-page [data-style-name="Vintage"] {
  --style-bg:
    linear-gradient(
      120deg,
      #a94f38,
      #b99637,
      #3e706e,
      #c9b88f
    );
}

/* Dark Fantasy */
body.colour-studio-page [data-style-name="Dark Fantasy"] {
  --style-bg:
    radial-gradient(circle at 75% 65%,#7b1e38,transparent 45%),
    linear-gradient(
      125deg,
      #0b1120,
      #27143d,
      #4e1830
    );
}

/* Fairytale */
body.colour-studio-page [data-style-name="Fairytale"] {
  --style-bg:
    linear-gradient(
      125deg,
      #69b888,
      #68a9dc,
      #db8cb7,
      #d6ae42
    );
}

/* Neon */
body.colour-studio-page [data-style-name="Neon"] {
  --style-bg:
    radial-gradient(circle at 20% 50%,#00e8f2 0,transparent 34%),
    radial-gradient(circle at 78% 50%,#ff24c8 0,transparent 36%),
    linear-gradient(120deg,#090812,#5416a6,#08070e);
}

/* Steampunk */
body.colour-studio-page [data-style-name="Steampunk"] {
  --style-bg:
    radial-gradient(circle at 75% 25%,#c69a45,transparent 38%),
    linear-gradient(
      125deg,
      #332118,
      #77451f,
      #a36a2c,
      #54301e
    );
}

/* Christmas */
body.colour-studio-page [data-style-name="Christmas"] {
  --style-bg:
    linear-gradient(
      125deg,
      #a51f2b 0 35%,
      #17603b 35% 70%,
      #cda43b 70%
    );
}

/* Halloween */
body.colour-studio-page [data-style-name="Halloween"] {
  --style-bg:
    linear-gradient(
      125deg,
      #e96d18 0 34%,
      #5d277e 34% 68%,
      #7fa72c 68%
    );
}


/* =========================================================
   MORE STYLES
   ========================================================= */

body.colour-studio-page .more-styles-btn {
  width: 100%;
  min-height: 32px;
  margin-top: 7px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
  color: var(--la-muted);
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  cursor: pointer;
}

body.colour-studio-page .more-styles-btn:hover {
  border-color: rgba(255,90,60,.28);
  color: #fff;
}

body.colour-studio-page .more-styles-btn b {
  font-size: 13px;
  line-height: 1;
  transition: transform .18s ease;
}

body.colour-studio-page .more-styles-btn.open b {
  transform: rotate(180deg);
}

body.colour-studio-page .all-styles-panel {
  margin-top: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 10px;
  background: rgba(0,0,0,.10);
}

body.colour-studio-page .all-styles-panel[hidden] {
  display: none !important;
}

body.colour-studio-page .style-group + .style-group {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.055);
}

body.colour-studio-page .style-group h3 {
  margin: 0 0 6px;
  color: var(--la-dim);
  font-size: 6.8px;
  font-weight: 900;
  letter-spacing: .08em;
}

body.colour-studio-page .style-option-grid button {
  min-height: 30px;
  font-size: 7.5px;
}


/* =========================================================
   MAIN COMPLETED-LAYER CAROUSEL
   ========================================================= */

body.colour-studio-page .master-result.all-complete {
  width: min(96%,980px);
  height: 100%;
  gap: 9px;
}

body.colour-studio-page .main-layer-carousel {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) 46px;
  align-items: center;
  gap: 10px;
}

body.colour-studio-page .main-layer-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd6e0;
  border-radius: 12px;
  overflow: hidden;
}

body.colour-studio-page .main-layer-stage img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: transparent !important;
}

body.colour-studio-page .main-carousel-arrow {
  width: 46px;
  height: 72px;
  border: 1px solid #d9d1dd;
  border-radius: 11px;
  background: #fff;
  color: #21182a;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(33,24,42,.06);
}

body.colour-studio-page .main-carousel-arrow:hover {
  background: #21182a;
  color: #fff;
  border-color: #21182a;
}

body.colour-studio-page .main-layer-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #21182a;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
}

body.colour-studio-page .main-layer-count {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #5c4c66;
  border: 1px solid #ded7e1;
  font-size: 8px;
  font-weight: 900;
}

body.colour-studio-page .main-result-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  min-height: 9px;
}

body.colour-studio-page .main-result-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d2cad6;
  cursor: pointer;
}

body.colour-studio-page .main-result-dots button.active {
  background: var(--la-orange);
  transform: scale(1.3);
}


/* =========================================================
   UPLOADED LAYER 1 PREVIEW
   ========================================================= */

body.colour-studio-page .uploaded-layer-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(94%,820px);
  height: calc(100% - 20px);
  min-height: 300px;
  border: 1px solid #ddd6e0;
  border-radius: 10px;
  overflow: hidden;
}

body.colour-studio-page .uploaded-layer-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.colour-studio-page .centre-preview-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.colour-studio-page .centre-preview-actions .cs-download {
  min-width: 125px;
}


/* =========================================================
   PROJECT-SAFE UPLOADS / CLEAR ALL
   ========================================================= */

body.colour-studio-page .upload-heading-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.colour-studio-page .clear-layers-btn {
  height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(255,90,60,.30);
  border-radius: 6px;
  background: rgba(255,90,60,.08);
  color: #ff9c89;
  font: inherit;
  font-size: 6.8px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
}

body.colour-studio-page .clear-layers-btn:hover:not(:disabled) {
  background: rgba(255,90,60,.16);
  border-color: rgba(255,90,60,.55);
  color: #fff;
}

body.colour-studio-page .clear-layers-btn:disabled {
  opacity: .32;
  cursor: default;
}


/* =========================================================
   PROJECT UPLOAD WARNING MODAL
   ========================================================= */

body.colour-studio-page .project-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(13,8,17,.72);
  backdrop-filter: blur(7px);
}

body.colour-studio-page .project-upload-modal[hidden] {
  display: none !important;
}

body.colour-studio-page .project-upload-card {
  width: min(440px,94vw);
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: #211727;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  text-align: center;
  color: #fff;
}

body.colour-studio-page .project-upload-icon {
  display: flex;
  width: 42px;
  height: 42px;
  margin: 0 auto 12px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,90,60,.13);
  border: 1px solid rgba(255,90,60,.28);
  color: #ff785f;
  font-size: 24px;
  font-weight: 800;
}

body.colour-studio-page .project-upload-card h2 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
}

body.colour-studio-page .project-upload-card p {
  margin: 0 auto 18px;
  max-width: 360px;
  color: rgba(255,255,255,.62);
  font-size: 10px;
  line-height: 1.55;
}

body.colour-studio-page .project-upload-actions {
  display: grid;
  gap: 8px;
}

body.colour-studio-page .project-upload-actions button {
  min-height: 38px;
  border-radius: 9px;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

body.colour-studio-page .project-primary {
  border: 1px solid #ff5a3c;
  background: #ff5a3c;
  color: #fff;
}

body.colour-studio-page .project-danger {
  border: 1px solid rgba(255,90,60,.32);
  background: rgba(255,90,60,.08);
  color: #ff9c89;
}

body.colour-studio-page .project-cancel {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.62);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1120px) {
  body.colour-studio-page .studio-grid {
    grid-template-columns: 240px minmax(420px,1fr) 275px;
    gap: 10px;
    padding: 10px;
  }
}

@media (max-width:900px) {
  body.colour-studio-page .studio-grid {
    height: auto;
    min-height: 0;
    grid-template-columns: 250px minmax(0,1fr);
  }

  body.colour-studio-page .right-panel {
    grid-column: 1 / -1;
    max-height: 460px;
  }

  body.colour-studio-page .workspace {
    min-height: 650px;
  }
}

@media (max-width:720px) {
  body.colour-studio-page .studio-grid {
    display: block;
    padding: 9px;
  }

  body.colour-studio-page .left-panel,
  body.colour-studio-page .workspace,
  body.colour-studio-page .right-panel {
    margin-bottom: 9px;
    min-height: auto;
  }

  body.colour-studio-page .left-panel,
  body.colour-studio-page .right-panel {
    max-height: none;
    overflow: visible;
  }

  body.colour-studio-page .workspace {
    min-height: 620px;
  }

  body.colour-studio-page .preview-canvas {
    min-height: 520px;
    padding: 12px;
  }

  body.colour-studio-page .workspace-bottom-bar {
    height: auto;
    min-height: 70px;
    align-items: flex-start;
    flex-direction: column;
    padding: 8px;
  }

  body.colour-studio-page .bottom-actions {
    width: 100%;
  }

  body.colour-studio-page .bottom-actions button {
    flex: 1;
  }

  body.colour-studio-page .layered-modal {
    padding: 8px;
  }

  body.colour-studio-page .all-layers-view {
    grid-template-columns: 1fr 1fr;
  }

  body.colour-studio-page .all-layer-card > div {
    height: 160px;
  }

  body.colour-studio-page .main-layer-carousel {
    grid-template-columns: 34px minmax(0,1fr) 34px;
    gap: 5px;
  }

  body.colour-studio-page .main-carousel-arrow {
    width: 34px;
    height: 58px;
    font-size: 25px;
  }

  body.colour-studio-page .main-layer-stage {
    min-height: 360px;
  }

  body.colour-studio-page .stack-stage {
    margin: 4px 3%;
    min-height: 400px;
  }
}
```
/* Colour Layer Studio — Layer 1 free allowance notice */
.layer1-allowance-notice {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 90, 60, 0.28);
  border-radius: 8px;
  background: rgba(255, 90, 60, 0.07);
  font-size: 12px;
  line-height: 1.4;
}

.layer1-allowance-notice strong {
  display: block;
  margin-bottom: 2px;
  color: #ff7a63;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.layer1-allowance-notice span {
  display: block;
  opacity: 0.82;
}

.layer1-allowance-notice.paid {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.045);
}

.layer1-allowance-notice.paid strong {
  color: inherit;
}

/* ===== MARCAM CHARCOAL THEME — page surfaces and shared header ===== */
body.colour-studio-page { background:#14191c !important; background-image:none !important; color:#f3f5f5; }
body.colour-studio-page .left-panel,
body.colour-studio-page .right-panel { background:#242b2f !important; background-image:none !important; border-color:#3a4449 !important; }
body.colour-studio-page .panel-section,
body.colour-studio-page .right-section { border-bottom-color:#3a4449; }
body.colour-studio-page .upload-box,
body.colour-studio-page textarea,
body.colour-studio-page .cs-layer,
body.colour-studio-page .cs-result-card,
body.colour-studio-page .preset-grid button,
body.colour-studio-page .carousel-arrow,
body.colour-studio-page .preview-tabs button,
body.colour-studio-page .all-layer-card,
body.colour-studio-page .explode-controls { background-color:#2c353a; border-color:#465158; }
body.colour-studio-page .sticky-generate { background:linear-gradient(180deg,rgba(36,43,47,.80),#242b2f) !important; }
body.colour-studio-page .workspace-toolbar { background:#20272b !important; border-bottom-color:#3a4449; }
body.colour-studio-page .layered-modal-card,
body.colour-studio-page .project-upload-card { background:#242b2f !important; border-color:#465158; }
body.colour-studio-page .layered-modal { background:rgba(10,14,17,.82); }
body.colour-studio-page .progress-overlay { background:rgba(20,25,28,.90); }
body.colour-studio-page .workspace-download-btn.secondary { background:#2c353a; color:#f3f5f5; border-color:#465158; }
body.colour-studio-page .workspace-download-btn.secondary:hover { background:#ff653c; border-color:#ff653c; color:#fff; }
body.colour-studio-page .compare-badge.original,
body.colour-studio-page .compare-help { background:#20272b; }
/* Shared nav: page theme also works with an older shared-nav.css cached by browsers. */
body.colour-studio-page .app-header { background:#20272b !important; background-image:none !important; border-bottom:1px solid #3a4449 !important; color:#f3f5f5; }
body.colour-studio-page .app-header .header-left,
body.colour-studio-page .app-header .header-right,
body.colour-studio-page .app-header .header-nav { background:transparent !important; background-image:none !important; }
body.colour-studio-page .app-header .nav-dropdown-menu { background:#252d31 !important; background-image:none !important; border:1px solid #465158 !important; box-shadow:0 18px 40px rgba(0,0,0,.35) !important; }
body.colour-studio-page .app-header .header-nav > a,
body.colour-studio-page .app-header .nav-dropdown-toggle,
body.colour-studio-page .app-header .nav-dropdown-menu a { color:#dce3e6 !important; }
body.colour-studio-page .app-header .header-nav > a:hover,
body.colour-studio-page .app-header .nav-dropdown-toggle:hover { color:#ff653c !important; }
body.colour-studio-page .app-header .nav-dropdown-menu a:hover { background:#344047 !important; }
body.colour-studio-page .app-header .nav-menu-icon { background:#343035 !important; border-color:#75483d !important; color:#ff653c !important; }
/* Preview and actual layer images deliberately retain white/transparent backgrounds. */