:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #eef4ff;
  background: #050a12;
  --builder-blue: #72a9ff;
  --panel: rgba(12, 21, 36, .92);
  --panel-border: #26354e;
  --muted: #8190a8;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100svh;
  background:
    radial-gradient(circle at 35% 0%, rgba(24, 79, 160, .19), transparent 32%),
    linear-gradient(150deg, #07101f, #03060c 58%);
}

button, input, textarea, select { font: inherit; }
button, .button-label, .builder-actions a {
  min-height: 34px;
  border: 1px solid #344967;
  border-radius: 7px;
  padding: 7px 11px;
  color: #dce9ff;
  background: #101d31;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button-label:hover, .builder-actions a:hover { border-color: #5f8fc9; background: #152843; }
.button-danger { color: #ffc0c8; border-color: #63323b; background: #271219; }

.builder-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(104, 137, 184, .25);
  background: rgba(5, 10, 18, .88);
  backdrop-filter: blur(18px);
}
.builder-kicker, .panel-overline { margin: 0 0 5px; color: var(--builder-blue); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.builder-header h1 { margin: 0; font-size: clamp(18px, 2.2vw, 28px); letter-spacing: -.035em; }
.builder-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.builder-shell {
  display: grid;
  grid-template-columns: minmax(220px, 270px) minmax(460px, 1fr) minmax(250px, 310px);
  gap: 12px;
  min-height: calc(100svh - 76px);
  padding: 12px;
}
.builder-panel, .pose-panel, .preview-toolbar {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .22);
}
.builder-panel { min-width: 0; padding: 14px; }
.panel-heading, .pose-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-heading h2, .pose-heading h2 { margin: 0; font-size: 16px; }
.panel-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.panel-note { color: var(--muted); font-size: 11px; line-height: 1.5; }

.layer-list { display: grid; gap: 6px; margin: 14px 0; padding: 0; list-style: none; }
.layer-group { display: grid; gap: 2px; padding: 8px 9px; border: 1px solid #334761; border-radius: 7px; color: #dce9ff; background: #0d1b2e; }
.layer-group strong { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.layer-group small { color: #7487a3; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.layer-row { display: grid; grid-template-columns: 26px 30px minmax(0, 1fr); gap: 4px; }
.layer-disclosure { min-height: 48px; padding: 0; color: #8297b6; }
.layer-visibility { min-height: 48px; padding: 0; color: #8fc0ff; font-size: 16px; }
.layer-visibility.is-hidden { color: #536176; background: #080d15; }
.layer-item:has(.layer-visibility.is-hidden) .layer-select { opacity: .48; }
.layer-select {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  padding: 7px 8px;
  text-align: left;
}
.layer-item.is-selected .layer-select { border-color: #6fa9f5; background: #173153; box-shadow: inset 3px 0 #76aeff; }
.layer-thumb { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; border-radius: 5px; background: #070c14; color: #8facd5; font-size: 10px; font-weight: 800; }
.layer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.layer-copy { min-width: 0; }
.layer-copy strong, .layer-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-copy strong { color: #e7effe; font-size: 12px; }
.layer-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.layer-channels { color: #77aef5; font-size: 9px; letter-spacing: .08em; }
.layer-channel-list { display: grid; gap: 3px; margin: 4px 0 4px 60px; padding: 0; list-style: none; }
.channel-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 29px;
  padding: 4px 7px;
  text-align: left;
  color: #b8c6da;
  background: #091321;
}
.channel-row small { color: #64758d; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.channel-row.is-disabled { opacity: .55; }
.channel-row.is-active { border-color: #80b9ff; color: #fff; background: #173354; box-shadow: inset 2px 0 #82b8ff; }
.channel-swatch { width: 14px; height: 14px; border: 1px solid #50617a; border-radius: 3px; background: #05080d; }
.channel-row.is-enabled .channel-swatch { background: #f5f7fb; }
.channel-swatch.channel-rgb { background: linear-gradient(135deg, #f04, #fc0 35%, #1dd8b4 68%, #408cff); }
.channel-swatch.channel-foilExclude { background: repeating-linear-gradient(135deg, #f5f7fb 0 3px, #101722 3px 6px); }
.channel-swatch.channel-bottomFade { background: linear-gradient(#f5f7fb 35%, transparent 100%); }

.builder-workspace { display: grid; align-content: start; gap: 10px; min-width: 0; padding-bottom: 190px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px; }
.segmented { display: flex; flex-wrap: wrap; gap: 5px; }
.segmented button[aria-pressed="true"] { color: #05101e; border-color: #82b5f7; background: #82b5f7; }
.zoom-control { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.zoom-control output { min-width: 34px; color: #dce8f9; font-variant-numeric: tabular-nums; }
.zoom-control button { min-height: 28px; padding: 4px 8px; }

.canvas-viewport {
  display: grid;
  place-items: center;
  min-height: 580px;
  overflow: auto;
  border: 1px solid #1f2c42;
  border-radius: 13px;
  padding: 28px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.026) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.026) 75%),
    linear-gradient(45deg, rgba(255,255,255,.026) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.026) 75%),
    #030710;
  background-position: 0 0, 12px 12px;
  background-size: 24px 24px;
  perspective: 1300px;
  overscroll-behavior: contain;
  touch-action: none;
}
.builder-card {
  --card-scale: .7;
  --rx: 3.12deg;
  --ry: 4.94deg;
  --mx: 69%;
  --my: 38%;
  --bgx: 54.94%;
  --bgy: 45.92%;
  --glare-x: 67%;
  --glare-y: 40%;
  --foil-opacity: .88;
  position: relative;
  flex: none;
  width: calc(1074px * var(--card-scale));
  height: calc(1344px * var(--card-scale));
  overflow: hidden;
  border-radius: calc(42px * var(--card-scale));
  background: #071226;
  box-shadow: 0 34px 85px rgba(0,0,0,.55), 0 0 0 1px rgba(180,215,255,.28);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  isolation: isolate;
  transition: transform 90ms linear;
  container-type: inline-size;
}
.builder-card::after { content: ""; position: absolute; z-index: 20; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), inset 0 0 30px rgba(180,220,255,.14); pointer-events: none; }
.composition, .channel-canvas, .material, .selection-box { position: absolute; inset: 0; width: 100%; height: 100%; }
.composition { z-index: 1; }
.composition-layer { position: absolute; transform-origin: center; user-select: none; }
.composition-layer img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.composition-text { display: flex; align-items: flex-start; overflow: hidden; line-height: 1; white-space: nowrap; }
.composition-layer.is-selected { outline: calc(2px / var(--card-scale)) solid #5eb6ff; outline-offset: calc(2px / var(--card-scale)); }
.channel-canvas { z-index: 8; display: none; background: #000; }
.material { pointer-events: none; }

.material-foil {
  z-index: 4;
  opacity: var(--foil-opacity);
  background:
    repeating-linear-gradient(110deg, #c929f1, #0dbde9, #21e985, #eedf10, #f80e35, #c929f1, #0dbde9, #21e985, #eedf10, #f80e35),
    repeating-linear-gradient(90deg, #050505 0 .3%, #777 .3% .6%);
  background-position: calc(((50% - var(--bgx)) * 2.6) + 50%) calc(((50% - var(--bgy)) * 3.5) + 50%), center;
  background-size: 400% 400%, cover;
  background-blend-mode: overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(1.08) contrast(1.08) saturate(1.15);
  -webkit-mask: url("./public/channels/foil-mask.png") center / 100% 100%;
  mask: url("./public/channels/foil-mask.png") center / 100% 100%;
}
.material-glare {
  z-index: 5;
  opacity: .52;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.06) 34%, rgba(255,255,255,.42) 49%, rgba(220,239,255,.12) 58%, transparent 79%),
    radial-gradient(ellipse 115% 70% at var(--glare-x) var(--glare-y), rgba(255,255,255,.35), rgba(225,242,252,.09) 42%, transparent 75%);
  background-position: var(--mx) var(--my), center;
  mix-blend-mode: screen;
}
.material-glare-lines {
  z-index: 6;
  opacity: .36;
  background:
    linear-gradient(90deg, transparent 26%, rgba(220,242,255,.05) 39%, rgba(255,255,255,.5) 50%, rgba(225,245,255,.08) 61%, transparent 75%),
    linear-gradient(0deg, transparent 26%, rgba(220,242,255,.05) 39%, rgba(255,255,255,.45) 50%, rgba(225,245,255,.08) 61%, transparent 75%);
  background-size: 210% 100%, 100% 210%;
  background-position: var(--glare-x) center, center var(--glare-y);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}
.material-glare-oval {
  z-index: 7;
  opacity: .24;
  background: radial-gradient(ellipse 105% 68% at var(--glare-x) var(--glare-y), rgba(255,255,255,.5), rgba(232,246,255,.14) 24%, rgba(220,240,255,.04) 48%, transparent 72%);
  mix-blend-mode: screen;
}
.material-varnish { z-index: 9; opacity: .42; mix-blend-mode: screen; -webkit-mask: linear-gradient(90deg, transparent 43%, #000 49% 51%, transparent 57%) var(--glare-x) center / 210% 100% no-repeat; mask: linear-gradient(90deg, transparent 43%, #000 49% 51%, transparent 57%) var(--glare-x) center / 210% 100% no-repeat; }
.selection-box { z-index: 15; display: none; border: 1px solid #80c2ff; pointer-events: none; }

.builder-card[data-preview="rgb"] .material { display: none; }
.builder-card[data-preview="foil"] .composition,
.builder-card[data-preview="foil"] .material,
.builder-card[data-preview="foil"] .selection-box,
.builder-card[data-preview="glare"] .composition,
.builder-card[data-preview="glare"] .material,
.builder-card[data-preview="glare"] .selection-box,
.builder-card[data-preview="varnish"] .composition,
.builder-card[data-preview="varnish"] .material,
.builder-card[data-preview="varnish"] .selection-box { display: none; }
.builder-card[data-preview="foil"] .channel-canvas,
.builder-card[data-preview="glare"] .channel-canvas,
.builder-card[data-preview="varnish"] .channel-canvas { display: block; }

.pose-panel {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(720px, calc(100vw - 640px));
  padding: 12px;
  transform: translateX(-50%);
  border-color: #3b5274;
  background: rgba(8, 17, 30, .94);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .62);
  backdrop-filter: blur(18px);
}
.pose-panel > label { display: grid; grid-template-columns: 18px 1fr 36px; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 11px; }
.pose-panel output { color: #dce9fb; text-align: right; font-variant-numeric: tabular-nums; }
.pose-presets { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin-top: 10px; }
.pose-presets button { padding-inline: 5px; }
.status { margin: 10px 0 0; color: #7da8df; font-size: 11px; }

.property-form { display: grid; gap: 12px; margin-top: 12px; }
fieldset { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 11px; border: 1px solid #293a54; border-radius: 9px; }
legend { padding: 0 6px; color: #8297b6; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.property-form label { display: grid; gap: 5px; color: #9cacbf; font-size: 10px; }
.property-form input:not([type="checkbox"]), .property-form textarea, .property-form select {
  min-width: 0;
  width: 100%;
  border: 1px solid #334761;
  border-radius: 6px;
  padding: 7px 8px;
  color: #edf4ff;
  background: #07101d;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-grid label { display: flex; align-items: center; gap: 7px; }
.effect-toggle { display: flex !important; grid-column: 1 / -1; align-items: center; gap: 7px !important; }
.replace-label { display: block !important; text-align: center; }
.layer-commands { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.is-image .text-only, .is-text .image-only { display: none; }

@media (max-width: 1100px) {
  .builder-shell { grid-template-columns: 220px minmax(430px, 1fr); }
  .property-panel { grid-column: 1 / -1; }
  .property-form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .pose-panel { left: calc(220px + (100vw - 232px) / 2); width: min(680px, calc(100vw - 260px)); }
}

@media (max-width: 760px) {
  .builder-header { position: relative; align-items: flex-start; flex-direction: column; }
  .builder-actions { justify-content: flex-start; }
  .builder-shell { display: flex; flex-direction: column; padding: 7px; }
  .layer-panel { order: 2; }
  .builder-workspace { order: 1; }
  .property-panel { order: 3; }
  .canvas-viewport { min-height: 520px; padding: 18px 8px; }
  .preview-toolbar { align-items: flex-start; flex-direction: column; }
  .property-form { grid-template-columns: 1fr; }
  .pose-presets { grid-template-columns: repeat(5, 1fr); }
  .pose-panel { left: 50%; width: calc(100vw - 14px); }
}