/* Apply form: the cart preview in a checker room, sticker crop, segmented choices. */
.cartview { border-radius: 14px; overflow: hidden; background: #0b0b0b; box-shadow: var(--ring); }
.cv-stage { position: relative; aspect-ratio: 3 / 4; max-height: 600px; margin: 0 auto;
  background: linear-gradient(180deg, #0b0b0bcc, #0b0b0b00 30%, #0b0b0b00 70%, #0b0b0bcc),
    repeating-conic-gradient(#2a2a2a 0 25%, #151515 0 50%) 0 0 / 36px 36px; display: grid; place-items: center; }
.cv-stage svg { width: 86%; height: 92%; display: block; filter: drop-shadow(0 10px 14px #000a); }
.cv-tabs { display: flex; justify-content: center; gap: 6px; padding: 10px; background: #111; }
.cv-tabs button { border: 0; border-radius: 999px; padding: 7px 16px; font: 700 14px 'Mulish', sans-serif; background: #ffffff10; color: #f3f1ec; cursor: pointer; }
.cv-tabs button[aria-selected="true"] { background: #f3f1ec; color: #111; }
.field { display: grid; gap: 6px; }
.field .lbl { font-weight: 700; font-size: 15px; }
.field .lbl small { font-weight: 400; font-size: 13px; opacity: .6; }
.glyphs { min-height: 0; font-size: 13px; font-weight: 700; }
.glyphs .bad { color: #ff7a66; } .glyphs .soon { color: #f2e39a; } .glyphs .ok { color: var(--green); }
.crop { position: relative; border-radius: 10px; overflow: hidden; touch-action: none; cursor: grab; box-shadow: var(--ring); }
.crop canvas { display: block; width: 100%; height: auto; background: #000; }
.crop-safe { position: absolute; inset: 6.3% 5.1%; border: 1.5px dashed #f3f1ecaa; border-radius: 4px; pointer-events: none; }
.crop-ctl { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.crop-ctl input[type=range] { accent-color: var(--green); width: 100%; }
.filebtn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; border-radius: 10px;
  background: #ffffff10; box-shadow: var(--ring); font-weight: 700; cursor: pointer; justify-self: start; }
.filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tbl.spec { font-size: 13px; margin-top: 4px; } .tbl.spec td { padding: 6px 8px; } .tbl.spec td:first-child { white-space: nowrap; opacity: .7; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 9px 14px; border-radius: 999px; background: #ffffff10; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--ring); }
.seg input:checked + span { background: #f3f1ec; color: #111; }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.keep { font-size: 14px; } .keep b { color: var(--green); }
.addon { grid-template-columns: 1.6fr 90px 1fr 40px; }
.addon select { font: 500 15px 'Mulish', sans-serif; color: #f3f1ec; background: #0b0b0b; border: 1.5px solid #ffffff2a; border-radius: 10px; padding: 10px 8px; }
@media (max-width: 760px) { .addon { grid-template-columns: 1fr 84px 40px; } .addon select { grid-column: 1 / 3; } }
.form input[type=file]::file-selector-button { font: 700 14px 'Mulish', sans-serif; color: #f3f1ec; background: #ffffff14; border: 0; border-radius: 9px; padding: 9px 14px; margin-right: 10px; cursor: pointer; }
.form .check > span { display: inline; }
.addon .grants { grid-column: 1 / -1; }
.addon .grants[hidden] { display: none; }
.crop canvas:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.cv-stage .cv3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .4s; touch-action: pan-y; }
.cv-stage .cv3d.live { z-index: 1; }
.cv-stage.on3d svg { visibility: hidden; }
.cv-hint { display: none; margin: 0; padding: 8px 0 0; text-align: center; font: 700 12px 'Fira Mono', monospace; letter-spacing: .08em; text-transform: uppercase; opacity: .55; background: #111; }
.cartview[data-mode="3d"] .cv-tabs { display: none; }
.cartview[data-mode="3d"] .cv-hint { display: block; }
@media (prefers-reduced-motion: reduce) { .cv-stage .cv3d { transition: none; } }
.cv-stage .cv3d.live { opacity: 1; }
.cv-stage .cv3d:not(.live) { pointer-events: none; }
.addon { grid-template-columns: 120px 1.4fr 80px 40px; }
.addon .key { grid-column: 1 / 3; font-family: 'Fira Mono', monospace; font-size: 14px; }
.addon .grants { grid-column: 3 / -1; }
.addon .art { grid-column: 1 / -1; font-size: 13px; font-weight: 600; display: grid; gap: 4px; }
.addon .art[hidden], .addon .grants[hidden] { display: none; }
.addon { padding: 10px; border-radius: 12px; background: #0b0b0b; box-shadow: inset 0 0 0 1.5px #ffffff1a; }
@media (max-width: 760px) { .addon { grid-template-columns: 1fr 84px 40px; } .addon select { grid-column: 1 / -1; } .addon .key { grid-column: 1 / -1; } .addon .grants { grid-column: 1 / -1; } }
.addon .bind { grid-column: 1 / -1; font-size: 13px; opacity: .8; }
.addon .bind code { font-family: 'Fira Mono', monospace; color: #21bca5; }