/* Builder screen */
.builder{padding:24px 32px 64px;max-width:1500px;margin:0 auto;position:relative;z-index:2}
.builder-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}

.preview-pane{position:sticky;top:88px;border:1px solid var(--ink-500);border-radius:14px;background:linear-gradient(160deg,#0E0E12,#15151B);overflow:hidden}
.preview-chrome{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--ink-500);background:rgba(11,11,13,.5)}
.chrome-eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-700)}
.chrome-eyebrow .d{width:6px;height:6px;border-radius:999px;background:var(--verdigris-500);box-shadow:0 0 8px var(--verdigris-500);animation:pulse 1.6s infinite}
.chrome-actions{display:flex;gap:8px}
.chrome-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:transparent;color:var(--ink-700);border:1px solid var(--ink-500);border-radius:4px;font:600 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.14em;transition:all .15s;cursor:pointer}
.chrome-btn:hover{color:var(--ink-900);border-color:var(--gold-700)}
.chrome-btn.active{color:var(--gold-500);border-color:var(--gold-700);background:rgba(212,175,55,.05)}

.preview-stage{position:relative;height:600px;perspective:1400px;perspective-origin:50% 35%;display:flex;align-items:center;justify-content:center}
.preview-grid-bg{position:absolute;inset:0;background-image:
  linear-gradient(rgba(212,175,55,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(212,175,55,.05) 1px,transparent 1px);
  background-size:40px 40px;mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 0%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%,#000 0%,transparent 80%)}
.preview-orb{position:absolute;width:480px;height:480px;border-radius:999px;background:radial-gradient(circle,rgba(212,175,55,.12),transparent 60%);filter:blur(30px);pointer-events:none}

.preview-binder{position:relative;width:280px;height:380px;transform-style:preserve-3d;transition:transform .15s var(--ease-out)}
.pb-face{position:absolute;border:1px solid rgba(0,0,0,.4);box-shadow:inset 0 0 50px rgba(0,0,0,.4)}
.pb-face.front,.pb-face.back{width:280px;height:380px;border-radius:6px}
.pb-face.front{transform:translateZ(28px)}
.pb-face.back{transform:translateZ(-28px) rotateY(180deg)}
.pb-face.left,.pb-face.right{width:56px;height:380px;top:0}
.pb-face.left{left:0;transform:rotateY(-90deg) translateZ(28px)}
.pb-face.right{right:0;transform:rotateY(90deg) translateZ(28px)}
.pb-face.top,.pb-face.bottom{width:280px;height:56px;left:0}
.pb-face.top{top:0;transform:rotateX(90deg) translateZ(28px)}
.pb-face.bottom{bottom:0;transform:rotateX(-90deg) translateZ(28px)}
.pb-grain{position:absolute;inset:0;background-image:
  repeating-linear-gradient(40deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(-30deg,rgba(0,0,0,.06) 0 1px,transparent 1px 5px);
  mix-blend-mode:overlay;border-radius:inherit;pointer-events:none}
.pb-emblem{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pb-monogram{font:500 140px/1 var(--font-display);letter-spacing:-.02em;background-size:200% 100%;animation:foil 4s linear infinite;filter:drop-shadow(0 0 20px rgba(212,175,55,.4))}
.pb-stamp{font:600 9px/1 var(--font-body);text-transform:uppercase;letter-spacing:.4em;color:rgba(212,175,55,.7);margin-top:24px}
.preview-shadow{position:absolute;bottom:50px;left:50%;width:300px;height:30px;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);transform:translateX(-50%);filter:blur(10px)}
.preview-readouts{position:absolute;left:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:3}
.readout{display:flex;flex-direction:column;gap:2px;background:rgba(11,11,13,.6);backdrop-filter:blur(10px);padding:8px 12px;border:1px solid var(--ink-500);border-left:2px solid var(--gold-500);border-radius:3px}
.ro-lbl{font:600 9px/1 var(--font-body);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-700)}
.ro-val{font:500 12px/1 var(--font-mono);color:var(--ink-900);letter-spacing:.04em}
.preview-corners .corner{position:absolute;width:14px;height:14px;border:1px solid var(--gold-500)}
.preview-corners .tl{top:14px;left:14px;border-right:0;border-bottom:0}
.preview-corners .tr{top:14px;right:14px;border-left:0;border-bottom:0}
.preview-corners .bl{bottom:14px;left:14px;border-right:0;border-top:0}
.preview-corners .br{bottom:14px;right:14px;border-left:0;border-top:0}

.builder-form{background:linear-gradient(160deg,#15151B,#0F0F14);border:1px solid var(--ink-500);border-radius:14px;padding:32px;display:flex;flex-direction:column;gap:24px}
.builder-head .builder-h{font:500 32px/1.1 var(--font-display);margin:8px 0 0;letter-spacing:-.01em}

.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px;background:var(--ink-200);border:1px solid var(--ink-500);border-radius:8px}
.step{display:flex;align-items:center;gap:10px;padding:10px 14px;background:transparent;border:0;border-radius:6px;color:var(--ink-700);transition:all .2s;cursor:pointer}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--ink-500);border-radius:999px;font:500 10px/1 var(--font-mono);color:var(--ink-700)}
.step-label{font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.14em}
.step.active{background:var(--ink-300);color:var(--ink-900)}
.step.active .step-num{border-color:var(--gold-500);color:var(--gold-500);box-shadow:0 0 12px rgba(212,175,55,.3)}
.step.done .step-num{background:var(--gold-500);color:var(--ink-100);border-color:var(--gold-500)}
.step.done{color:var(--ink-800)}

.builder-step{min-height:360px;animation:scene-in 360ms var(--ease-out)}
.step-content{display:flex;flex-direction:column;gap:16px}
.step-h{font:500 22px/1.2 var(--font-display);margin:0;letter-spacing:-.005em}
.step-sub{font:400 13px/1.55 var(--font-body);color:var(--ink-700);margin:0}

.leather-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.leather-card{display:flex;flex-direction:column;gap:8px;padding:8px;background:transparent;border:1px solid var(--ink-500);border-radius:8px;text-align:left;transition:all .2s;cursor:pointer;color:var(--ink-900)}
.leather-card:hover{border-color:var(--gold-700)}
.leather-card.sel{border-color:var(--gold-500);box-shadow:0 0 0 1px var(--gold-500),0 8px 24px rgba(212,175,55,.15)}
.leather-swatch{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;border:1px solid rgba(0,0,0,.2)}
.leather-grain{position:absolute;inset:0;background-image:
  repeating-linear-gradient(40deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px),
  repeating-linear-gradient(-25deg,rgba(0,0,0,.07) 0 1px,transparent 1px 5px);
  mix-blend-mode:overlay}
.leather-check{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;background:var(--gold-500);color:var(--ink-100);display:grid;place-items:center;animation:scene-in .3s var(--ease-out)}
.leather-meta{padding:0 4px 4px}
.leather-name{font:500 13px/1.2 var(--font-body);color:var(--ink-900)}
.leather-desc{font:400 11px/1.4 var(--font-body);color:var(--ink-700);margin-top:2px}

.foil-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.foil-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:10px;background:transparent;border:1px solid var(--ink-500);border-radius:8px;text-align:left;cursor:pointer;color:var(--ink-900);transition:all .2s}
.foil-card:hover{border-color:var(--gold-700)}
.foil-card.sel{border-color:var(--gold-500);box-shadow:0 0 0 1px var(--gold-500),0 8px 24px rgba(212,175,55,.15)}
.foil-swatch{height:48px;border-radius:4px;background-size:200% 100% !important;animation:foil 3.6s linear infinite;position:relative;overflow:hidden}
.foil-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);animation:shine 4s infinite}
.foil-name{font:500 12px/1 var(--font-body);color:var(--ink-900)}
.foil-tag{position:absolute;top:8px;right:8px;font:600 9px/1 var(--font-mono);color:var(--gold-500);background:rgba(11,11,13,.7);padding:4px 8px;border:1px solid var(--gold-700);border-radius:3px;letter-spacing:.1em}

.format-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.format-card{display:flex;flex-direction:column;gap:14px;padding:18px;background:transparent;border:1px solid var(--ink-500);border-radius:8px;cursor:pointer;color:var(--ink-900);transition:all .2s;text-align:left}
.format-card:hover{border-color:var(--gold-700)}
.format-card.sel{border-color:var(--gold-500);box-shadow:0 0 0 1px var(--gold-500)}
.format-pockets{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:var(--ink-300);border-radius:3px}
.pocket-dot{aspect-ratio:5/7;background:var(--ink-100);border:1px solid var(--ink-500);border-radius:1px}
.format-card.sel .pocket-dot{border-color:var(--gold-700);background:rgba(212,175,55,.08)}
.format-meta{display:flex;flex-direction:column;gap:2px}
.format-name{font:500 14px/1 var(--font-body);color:var(--ink-900)}
.format-cap{font:400 11px/1 var(--font-mono);color:var(--ink-700)}
.format-price{font:500 18px/1 var(--font-display);color:var(--gold-500)}

.addons{margin-top:24px;display:flex;flex-direction:column;gap:6px}
.addon-row{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:center;padding:12px 14px;background:var(--ink-300);border:1px solid var(--ink-500);border-radius:6px;cursor:pointer;transition:all .15s}
.addon-row:hover{border-color:var(--ink-600)}
.addon-row.on{border-color:var(--gold-700);background:rgba(212,175,55,.04)}
.addon-check{width:18px;height:18px;border:1.5px solid var(--ink-500);border-radius:3px;display:grid;place-items:center;transition:all .15s}
.addon-row.on .addon-check{background:var(--gold-500);border-color:var(--gold-500);color:var(--ink-100)}
.addon-name{font:500 13px/1 var(--font-body);color:var(--ink-900)}
.addon-price{font:500 13px/1 var(--font-mono);color:var(--gold-500)}

.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-700)}
.input,.textarea{height:44px;background:var(--ink-300);border:1px solid var(--ink-500);color:var(--ink-900);border-radius:4px;padding:0 16px;font:400 14px/1.4 var(--font-body);outline:none;transition:all .2s;font-family:var(--font-body)}
.input:focus,.textarea:focus{border-color:var(--gold-500);box-shadow:0 0 0 1px var(--gold-500),0 0 24px rgba(212,175,55,.18)}
.textarea{height:auto;padding:12px 16px;resize:vertical;min-height:96px}

.confirm-card{margin-top:8px;padding:16px;background:rgba(11,11,13,.5);border:1px solid var(--gold-700);border-radius:8px;position:relative;overflow:hidden}
.confirm-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-500),transparent);animation:data-flow 3s linear infinite}
@keyframes data-flow{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.confirm-mono{font:500 10px/1 var(--font-mono);color:var(--gold-500);letter-spacing:.18em;margin-bottom:14px}
.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.confirm-grid > div{display:flex;flex-direction:column;gap:4px}
.ck-lbl{font:600 9px/1 var(--font-body);text-transform:uppercase;letter-spacing:.2em;color:var(--ink-700)}
.ck-val{font:500 13px/1.3 var(--font-body);color:var(--ink-900)}

.builder-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ink-500);padding-top:20px;margin-top:auto}
.builder-total-lbl{font:600 9px/1 var(--font-body);text-transform:uppercase;letter-spacing:.22em;color:var(--ink-700);margin-bottom:4px}
.builder-total-amt{font:500 32px/1 var(--font-display);color:var(--gold-500);font-variant-numeric:tabular-nums}
.builder-nav{display:flex;gap:8px}

.quote-form{margin-top:16px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--ink-500);padding-top:16px}

@media (max-width: 1100px){
  .builder-grid{grid-template-columns:1fr;gap:16px}
  .preview-pane{position:sticky;top:64px;z-index:5;max-height:48vh;overflow:hidden}
  .preview-stage{height:32vh;min-height:200px}
  .preview-readouts{flex-direction:row;flex-wrap:wrap;gap:6px;left:12px;bottom:12px}
  .preview-readouts .readout{padding:6px 10px}
  .leather-grid{grid-template-columns:repeat(2,1fr)}
  .format-row{grid-template-columns:1fr}
}
@media (max-width: 768px){
  .builder{padding:16px 16px 48px}
  .builder-form{padding:20px}
  .stepper{grid-template-columns:repeat(2,1fr)}
  .foil-grid{grid-template-columns:1fr}
  .preview-pane{top:56px;max-height:40vh}
  .preview-stage{height:28vh;min-height:180px}
  .builder-foot{flex-direction:column;gap:16px;align-items:stretch}
  .builder-nav{justify-content:stretch}
  .builder-nav .btn{flex:1}
  .confirm-grid{grid-template-columns:1fr}
}