:root{color-scheme:dark;--bg:#0b1120;--panel:#161f33;--border:#344662;--ink:#f3f6ff;--muted:#b6c5df;--accent:#78b2ff;--green:#b4e6c3}
*[hidden]{display:none!important}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at top right,#203d69 0%,#0b1120 46%);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:#b5d7ff}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:progress}
.shell{max-width:1330px;margin:auto;padding:20px 24px 70px}.top{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:26px}.top a{text-decoration:none;color:#d7e7ff}.brandmark{font-size:1.1rem;font-weight:900;letter-spacing:-.04em}.hero{margin-bottom:24px}.eyebrow{font-size:.77rem;font-weight:800;letter-spacing:.14em;color:#9cc7fc;text-transform:uppercase}.hero h1{font-size:clamp(2.1rem,4.7vw,3.4rem);line-height:1.09;letter-spacing:-.05em;max-width:830px;margin:8px 0 14px}.hero p{color:var(--muted);max-width:820px;margin:0}.notice{display:flex;align-items:flex-start;gap:10px;background:#1f2a41;border:1px solid #597296;border-radius:12px;margin-top:20px;padding:13px 16px;font-size:.89rem;color:#e1eafa}
.workspace{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:22px;align-items:start}.panel{border:1px solid var(--border);border-radius:22px;background:linear-gradient(160deg,#1b263e,#141d30);box-shadow:0 20px 55px #05091835;overflow:hidden}.panel-head{padding:24px 26px 15px;border-bottom:1px solid #344662}.panel-head h2{margin:0 0 6px;font-size:1.35rem}.panel-head p{margin:0;color:var(--muted);font-size:.9rem}.section{padding:22px 26px}.section+.section{border-top:1px solid #33425d}.section h3{margin:0 0 12px;font-size:1.04rem}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{min-width:0}.field.full{grid-column:1/-1}label{font-size:.84rem;display:block;font-weight:690;margin:0 0 6px;color:#d6e2f7}input:not([type=checkbox]):not([type=file]),select,textarea{border:1px solid #50617d;border-radius:10px;background:#0f192b;color:var(--ink);width:100%;padding:11px 12px;min-width:0}input[type=file]{max-width:100%;font-size:.86rem;padding:7px 0}textarea{min-height:73px;resize:vertical}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #b6d8ff;outline-offset:2px}.muted{font-size:.83rem;color:var(--muted);margin:9px 0 0}.checks{display:flex;flex-wrap:wrap;gap:10px 20px}.checks label{display:flex;align-items:center;gap:8px;font-weight:550}.actions{display:flex;gap:9px;flex-wrap:wrap}.btn{background:#78b2ff;color:#08172b;padding:12px 16px;border:1px solid transparent;border-radius:11px;font-size:.93rem;font-weight:750}.btn.secondary{background:#293954;color:#edf5ff;border:1px solid #5d7398}.btn.danger{background:#3b2534;border:1px solid #8d5365;color:#fff}.btn.text{padding:10px;background:transparent;border:1px solid #5d7398;color:#dbebff}.btn.small{padding:8px 12px;font-size:.82rem}.account{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:17px 26px;background:#101a2c}.account p{margin:0;color:var(--muted);font-size:.87rem}.project-list{display:flex;gap:8px;flex-wrap:wrap;padding:13px 26px;border-top:1px solid #354765}.project-list button{border:1px solid #53698b;background:#202e48;color:#eaf1ff;border-radius:999px;padding:7px 12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-list button[aria-pressed=true]{background:#4070ae;border-color:#abd1ff}
.preview-side{position:sticky;top:18px}.preview-body{padding:25px}.preview-tabs{display:flex;gap:8px;margin-bottom:17px}.preview-tabs button{flex:1;background:#1b2b45;border:1px solid #4f6586;border-radius:9px;padding:10px;color:#e2efff;font-weight:700}.preview-tabs button[aria-pressed=true]{background:#4785cd;border-color:#a6d3ff;color:#08172b}.physical{width:100%;max-width:540px;aspect-ratio:1.586;margin:auto;border-radius:18px;border:1px solid #ffffff48;box-shadow:0 25px 40px #0008;display:flex;justify-content:space-between;flex-direction:column;padding:6%;overflow:hidden;position:relative;isolation:isolate;transition:background .2s;color:white}.physical:before{content:"";position:absolute;inset:-50%;z-index:-1;transform:rotate(20deg);background:linear-gradient(90deg,transparent 44%,#ffffff11 51%,transparent 57%)}.physical.centered{text-align:center;align-items:center}.physical.minimal .card-overline{opacity:.48}.card-overline{font-size:clamp(.53rem,1.2vw,.77rem);font-weight:800;letter-spacing:.18em}.physical .wordmark{font-weight:850;font-size:clamp(1.14rem,3.2vw,2rem);overflow-wrap:anywhere;line-height:1.13;letter-spacing:-.04em}.physical .card-owner{font-size:clamp(.75rem,1.6vw,1.15rem);font-weight:620;margin-top:8px}.physical .card-role{font-size:clamp(.63rem,1.3vw,.89rem);margin-top:3px;opacity:.8}.physical img{max-width:28%;max-height:26%;object-fit:contain}.physical .card-footer{font-size:clamp(.5rem,1.1vw,.72rem);font-weight:700;letter-spacing:.12em}.back-content{display:flex;align-items:center;gap:16px;justify-content:space-between}.back-content span{font-size:clamp(.85rem,2vw,1.35rem);font-weight:700}.qrcode{width:116px;height:116px;flex:0 0 116px;background:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;padding:4px}.qrcode img,.qrcode canvas{max-width:108px;max-height:108px}.qrcode span{font-size:11px;color:#23354e;text-align:center}.sharebox{margin-top:22px;border-radius:14px;border:1px solid #455c80;background:#111e33;padding:17px}.sharebox h3{margin:0 0 4px}.sharebox p{margin:0 0 10px;color:var(--muted);font-size:.87rem}.sharebox .url{font-size:.8rem;overflow-wrap:anywhere;color:#a7d2ff;margin:10px 0}.sharebox .actions{margin-top:11px}.status{min-height:27px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--green);font-size:.88rem;margin:14px 0 0}.status.error{color:#ffb6b6}.order{background:#202e45;border-top:1px solid #4a5d7b;padding:22px 26px}.order p{color:#c5d1e6;font-size:.87rem;margin:0 0 14px}.order h3{margin:0 0 7px}.smart-offer{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:13px 15px;background:#111e33;border:1px solid #58729d;border-radius:12px;margin:12px 0 15px}.offer-price{font-size:1.28rem;font-weight:850;letter-spacing:-.02em;color:#eaf3ff}.offer-note{font-size:.8rem;color:#c0cee2;flex:1 1 190px}.order .offer-total{font-size:.89rem;color:#c9ecff;line-height:1.5;margin:10px 0}.order .orderline{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.orderline .field{max-width:145px}footer{font-size:.83rem;color:#b1c1da;margin-top:26px;text-align:center}
@media(max-width:930px){.workspace{grid-template-columns:1fr}.preview-side{position:static}.preview-body{padding:20px}.physical{max-width:530px}.physical .wordmark{font-size:clamp(1.3rem,5vw,2.1rem)}.physical .card-owner{font-size:clamp(.87rem,2.9vw,1.2rem)}.card-overline{font-size:.7rem}}
@media(max-width:540px){.shell{padding:14px 13px 50px}.top{margin-bottom:17px}.hero h1{font-size:2.25rem}.panel-head,.section,.account,.order{padding:17px}.form-grid{grid-template-columns:1fr 1fr;gap:10px}.field.full-mobile{grid-column:1/-1}.project-list{padding:12px 17px}.physical{border-radius:15px}.qrcode{height:88px;width:88px;flex-basis:88px}.qrcode canvas,.qrcode img{max-height:80px;max-width:80px}.btn{padding:11px 12px}.card-overline{font-size:.56rem}}

/* Smart Card Studio mobile-first navigation (2026-10-21). Existing desktop layout remains unchanged. */
.studio-jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.studio-jump .btn{display:inline-flex;text-decoration:none;align-items:center;justify-content:center;font-size:.85rem;padding:10px 12px}
#editor-heading,#preview-heading,#physical-offer-heading{scroll-margin-top:14px}
@media(max-width:930px){.workspace>.preview-side{order:-1}}
@media(max-width:540px){
  .hero{padding-bottom:16px}
  .hero h1{font-size:clamp(1.9rem,7vw,2.25rem)}
  .studio-jump{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .studio-jump a:first-child{grid-column:1/-1}
  .studio-jump .btn{white-space:normal;text-align:center;min-height:40px;padding:9px}
  .order .smart-offer{margin:8px 0 11px;padding:11px}
  .order .offer-total{line-height:1.35}
}

/* Clear availability for digital card profiles vs. physical NFC production. */
.nfc-status-pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 17px}
.nfc-status-pills span{border:1px solid #4f7aa4;border-radius:999px;background:#143051;color:#e2f2ff;font-size:12px;font-weight:750;padding:7px 11px}
.nfc-status-pills span:last-child{border-color:#6abf99;color:#dcfff0;background:#153d34}
@media(max-width:540px){.nfc-status-pills{gap:6px}.nfc-status-pills span{font-size:11px;padding:6px 9px}}


/* Smart Cards control panels only; physical card preview artwork is untouched. */
.panel{border-radius:12px;min-width:0}
.form-grid{align-items:start}
input:not([type=checkbox]):not([type=file]),select,textarea{border-radius:12px;min-width:0}
.actions{gap:10px}
.btn:not(.text){
 border-radius:12px;min-height:44px;padding:10px 16px;font-weight:700;
 transition:opacity .2s ease,background-color .2s ease,border-color .2s ease;
}
.btn:not(.text):not(:disabled):hover{opacity:.9}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* Smart Cards: printable NFC art remains exact; editing controls only. */
.workspace,.panel,.form-grid{min-width:0}
.panel{box-shadow:0 10px 25px rgba(0,0,0,.09)}
.panel-head :is(h1,h2,h3),.hero :is(h1,h2){letter-spacing:-.027em;text-wrap:balance}
.actions :is(a,button),.top :is(a,button),.panel-head :is(a,button){
 min-height:44px;touch-action:manipulation;
}
.actions .btn{
 transition:transform .16s ease,background-color .2s ease,border-color .2s ease,opacity .2s ease;
}
.actions .btn:not(:disabled):active{transform:scale(.985)}
.actions :is(button,a):focus-visible{outline:3px solid #9dccff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
 .actions .btn{transition:none;transform:none}
}

/* Customer-first controls; no changes to print geometry or preview rendering. */
.card-optional-settings{margin:14px 0;border:1px solid #b6cde4;border-radius:13px;overflow:hidden;background:#f5f9fe;color:#224563;min-width:0}
.card-optional-settings>summary{cursor:pointer;min-height:48px;display:list-item;padding:13px 16px;font-weight:800;line-height:1.35;list-style-position:inside;touch-action:manipulation}
.card-optional-settings>summary:focus-visible{outline:3px solid #74b8ff;outline-offset:-3px}
.card-optional-settings[open]>summary{border-bottom:1px solid #bfd4e8}
.card-optional-settings>.section{border:0;margin:0;padding:12px 14px!important}
.card-optional-settings>.section h3{font-size:15px;margin:4px 0 11px}
.card-artwork-download>.section .actions{flex-wrap:wrap}
@media(max-width:600px){.card-optional-settings{margin:10px 0}.card-optional-settings>summary{font-size:14px;padding:12px}.card-optional-settings>.section{padding:10px!important}}