.clb-color-black { --clb-cover-dark: #15161a; --clb-cover-light: #3a3d46; }
.clb-color-purple { --clb-cover-dark: #25172f; --clb-cover-light: #63476f; }
.clb-color-teal { --clb-cover-dark: #103136; --clb-cover-light: #3d7378; }
.clb-color-red { --clb-cover-dark: #3c1522; --clb-cover-light: #814152; }
.clb-color-blue { --clb-cover-dark: #172a45; --clb-cover-light: #426187; }
.clb-color-green { --clb-cover-dark: #1c3024; --clb-cover-light: #4d7258; }
.clb-color-copper {
  --clb-cover-dark: #3f241b;
  --clb-cover-light: #b66e4a;
  --clb-cover-texture: repeating-linear-gradient(92deg, #ffe0b71c 0 1px, #1b0b1514 1px 3px, transparent 3px 5px);
}
.clb-color-pearl {
  --clb-cover-dark: #897b81;
  --clb-cover-light: #fff0d7;
  --clb-cover-texture: radial-gradient(ellipse at 88% 18%, #f4eeffae, transparent 70%),
    linear-gradient(115deg, transparent 15%, #afc1ed55 35%, #fcf1df86 44%, #ffcbe04d 62%, transparent 79%);
}
.clb-color-carbon {
  --clb-cover-dark: #0b0c11;
  --clb-cover-light: #373a44;
  --clb-cover-texture: repeating-linear-gradient(45deg, #08090f55 0 2px, #ffffff16 2px 4px, transparent 4px 8px),
    repeating-linear-gradient(135deg, #0008 0 2px, transparent 2px 4px, #aeb4cb22 4px 6px);
}
.clb-color-aurora {
  --clb-cover-dark: #171228;
  --clb-cover-light: #265f73;
  --clb-cover-texture: linear-gradient(140deg, #213f7466 12%, #407d8666 32%, #67c8a768 43%, #49397577 60%, #2c1f4d8c 76%);
}
.clb-color-slate {
  --clb-cover-dark: #232731;
  --clb-cover-light: #606772;
  --clb-cover-texture: repeating-linear-gradient(146deg, transparent 0 8px, #0c0e1644 10px 12px, #aeb5ca31 13px 14px, transparent 15px 19px);
}
.clb-color-mosaic {
  --clb-cover-dark: #35243a;
  --clb-cover-light: #69535c;
  --clb-cover-texture: repeating-conic-gradient(from 45deg at 8px 8px, #d7a15c45 0 25%, transparent 0 50%, #35264e64 0 75%, transparent 0)
    0 0 / 16px 16px;
}

[data-interior] {
  --clb-interior-background: linear-gradient(120deg, #25272e, #191b21);
  --clb-interior-liner: linear-gradient(145deg, #30323a, #17191f);
  --clb-interior-pocket: #11141c;
  --clb-interior-stroke: #747985;
  --clb-interior-ink: #ded2bc;
}
[data-interior="graphite"] {
  --clb-interior-background: repeating-linear-gradient(110deg, #0000 0 3px, #0003 3px 4px), linear-gradient(140deg, #414450, #1e2027);
  --clb-interior-liner: linear-gradient(140deg, #4c505b, #22242c);
  --clb-interior-pocket: #1b1d23;
  --clb-interior-stroke: #828798;
}
[data-interior="sand"] {
  --clb-interior-background: repeating-linear-gradient(122deg, #fff0 0 3px, #a0866926 3px 4px), linear-gradient(140deg, #d6c2a5, #a98969);
  --clb-interior-liner: linear-gradient(140deg, #c9ae8e, #76604b);
  --clb-interior-pocket: #4b3e36;
  --clb-interior-stroke: #856648;
  --clb-interior-ink: #2d2017;
}
[data-interior="forest"] {
  --clb-interior-background: linear-gradient(120deg, #475947, #22322b);
  --clb-interior-liner: linear-gradient(130deg, #566852, #26382d);
  --clb-interior-pocket: #182720;
  --clb-interior-stroke: #729078;
}
[data-interior="ice"] {
  --clb-interior-background: linear-gradient(130deg, #d2e6ee, #89a7bb);
  --clb-interior-liner: linear-gradient(150deg, #b9d3e0, #53738a);
  --clb-interior-pocket: #2a4356;
  --clb-interior-stroke: #567a93;
  --clb-interior-ink: #142b3b;
}
[data-interior="midnight"] {
  --clb-interior-background: linear-gradient(138deg, #263959, #172032 68%);
  --clb-interior-liner: linear-gradient(130deg, #324a74, #192335);
  --clb-interior-pocket: #121a2a;
  --clb-interior-stroke: #6681aa;
}
[data-interior="ruby"] {
  --clb-interior-background: linear-gradient(125deg, #673744, #351d2a);
  --clb-interior-liner: linear-gradient(140deg, #733b4b, #3d2332);
  --clb-interior-pocket: #2d1922;
  --clb-interior-stroke: #9a5f70;
}
[data-interior="lilac"] {
  --clb-interior-background: linear-gradient(140deg, #725f89, #483950);
  --clb-interior-liner: linear-gradient(130deg, #856f9a, #3f304c);
  --clb-interior-pocket: #382a43;
  --clb-interior-stroke: #9f87b0;
}
[data-interior="circuit"] {
  --clb-interior-background: repeating-linear-gradient(90deg, transparent 0 17px, #76cdb324 17px 18px, transparent 18px 25px, #6d96c832 25px 26px),
    repeating-linear-gradient(0deg, transparent 0 29px, #76cdb324 29px 30px), linear-gradient(135deg, #26483e, #172e2b);
  --clb-interior-liner: linear-gradient(140deg, #3f665c, #1b3a35);
  --clb-interior-pocket: #132b29;
  --clb-interior-stroke: #6ba694;
}
[data-interior="grid"] {
  --clb-interior-background: linear-gradient(#b9c1da2e 1px, transparent 1px) 0 0 / 9px 9px,
    linear-gradient(90deg, #b9c1da2e 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(140deg, #4b5670, #283349);
  --clb-interior-liner: linear-gradient(130deg, #506685, #28364c);
  --clb-interior-pocket: #1c263b;
  --clb-interior-stroke: #7b8ca9;
}
[data-interior="stars"] {
  --clb-interior-background: radial-gradient(circle, #fcdd9aac 0 .65px, transparent 1px) 3px 1px / 23px 19px,
    radial-gradient(circle, #d1c1ff80 0 .65px, transparent 1px) 12px 7px / 31px 27px, linear-gradient(140deg, #302e58, #191b3b);
  --clb-interior-liner: linear-gradient(140deg, #4f4376, #22223f);
  --clb-interior-pocket: #1c1b33;
  --clb-interior-stroke: #8174ad;
}
[data-interior="linen"] {
  --clb-interior-background: repeating-linear-gradient(90deg, #5e463522 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, #5e46352c 0 1px, transparent 1px 3px), linear-gradient(145deg, #cabdaf, #998675);
  --clb-interior-liner: linear-gradient(130deg, #c2ab95, #746050);
  --clb-interior-pocket: #413630;
  --clb-interior-stroke: #866c57;
  --clb-interior-ink: #291d16;
}

.clb-stage[data-interior]:not([data-interior="classic"]) .clb-sheet { background: var(--clb-interior-background); }
.clb-stage[data-interior]:not([data-interior="classic"]) :is(.clb-liner, .clb-opening-back) {
  background: repeating-linear-gradient(130deg, transparent 0 2px, #11101933 2px 3px), var(--clb-interior-liner);
}
.clb-stage[data-interior]:not([data-interior="classic"]) :is(.clb-liner, .clb-opening-back)::after {
  background: linear-gradient(170deg, transparent 14%, #ffffff42 15%, #0008 17%, transparent 18%), var(--clb-interior-liner);
}
.clb-stage[data-interior]:not([data-interior="classic"]) .clb-page-head { color: var(--clb-interior-ink); }
.clb-stage[data-interior]:not([data-interior="classic"]) .clb-pocket:not(.clb-pocket-filled) {
  border-color: var(--clb-interior-stroke);
  background: linear-gradient(122deg, #ffffff1c, transparent 30%), var(--clb-interior-pocket);
}
.clb-stage[data-interior]:not([data-interior="classic"]) .clb-pocket-add { color: #d9d3ca; }

.clb-design-dialog { width: min(38rem, calc(100% - 1.4rem)); }
.clb-design-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.clb-design-options legend { margin-bottom: .4rem; padding: 0; }
.clb .clb-design-option { position: relative; display: block; min-width: 0; cursor: pointer; }
.clb-design-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.clb-design-swatch {
  display: grid;
  gap: .32rem;
  min-height: 56px;
  padding: .3rem;
  border: 1px solid var(--clb-line);
  border-radius: .65rem;
  background: #111215;
  text-align: center;
}
.clb-design-option input:checked + .clb-design-swatch { border-color: #f0c46a; box-shadow: inset 0 0 0 1px #dcb36680; }
.clb-design-option input:focus-visible + .clb-design-swatch { outline: 2px solid var(--clb-focus); outline-offset: 2px; }
.clb-design-preview {
  position: relative;
  display: block;
  min-height: 30px;
  border: 1px solid #ffffff26;
  border-radius: .32rem;
  background: var(--clb-cover-texture, linear-gradient(transparent, transparent)),
    linear-gradient(90deg, #0005 0 11%, transparent 12%), linear-gradient(140deg, var(--clb-cover-light), var(--clb-cover-dark));
}
.clb-design-preview[data-interior] { background: var(--clb-interior-background); }
.clb-design-preview[data-interior]::before {
  content: "";
  position: absolute;
  inset: 16% 18%;
  border: 1px solid var(--clb-interior-stroke);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 48%, var(--clb-interior-stroke) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 47%, var(--clb-interior-stroke) 47% 53%, transparent 53%), var(--clb-interior-pocket);
}
.clb-design-caption { font-size: .75rem; line-height: 1.2; overflow-wrap: anywhere; }
.clb-design-plan { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.clb-design-plan p { margin: 0; color: var(--clb-muted); font-size: .86rem; }
@media (min-width: 32rem) {
  .clb-design-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}