.upload-page{padding:clamp(36px,5vw,68px) 0 88px}
.upload-page-intro{max-width:760px;margin-bottom:34px}
.upload-page-intro .eyebrow{margin:0 0 12px}
.upload-page-intro h1{margin:0 0 12px;font-size:clamp(2.4rem,5vw,4.3rem);line-height:1.08;letter-spacing:-.05em}
.upload-page-intro>p:last-child{max-width:58ch;margin:0;color:var(--muted);font-size:1.05rem;line-height:1.65}
.upload-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:24px;align-items:start}
.upload-art-panel,.upload-details-panel{min-width:0;padding:clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:24px;background:var(--panel)}
.upload-panel-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.upload-step{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;font-weight:500}
.upload-panel-heading h2{margin:1px 0 4px;font-size:1.35rem;letter-spacing:-.025em}
.upload-panel-heading p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}
.upload-dropzone{position:relative;display:grid;place-items:center;width:100%;min-height:330px;overflow:hidden;border:2px dashed var(--line);border-radius:18px;background:var(--bg);cursor:pointer;transition:border-color .2s,background .2s}
.upload-dropzone:hover,.upload-dropzone.is-dragging,.upload-dropzone:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,var(--bg));outline:none}
.upload-dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.upload-empty{display:flex;align-items:center;flex-direction:column;gap:12px;max-width:100%;padding:28px;text-align:center}
.upload-empty strong{font-size:1.06rem;line-height:1.35}
.upload-empty small{color:var(--muted);line-height:1.5}
.upload-image-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:var(--accent-soft);color:var(--accent)}
.upload-image-icon svg{width:29px;height:29px}
.upload-choose{display:inline-flex;justify-content:center;padding:9px 17px;border:1px solid var(--accent-fill);border-radius:999px;background:var(--accent-fill);color:var(--on-accent);font-size:.88rem;font-weight:500}
.upload-preview{display:block;width:100%;height:auto;aspect-ratio:1536/969;object-fit:cover;border-radius:16px}
.upload-dropzone:has(.upload-preview:not([hidden])){min-height:0;padding:10px;border-style:solid}
.upload-selected{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.upload-selected>div{display:flex;flex:1;min-width:120px;flex-direction:column;gap:2px}
.upload-selected strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.upload-selected span{color:var(--muted);font-size:.78rem}
.upload-selected button{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--text);font-size:.8rem;font-weight:500}
.upload-selected button:hover{border-color:var(--accent);color:var(--accent)}
.upload-hint{margin:14px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.upload-feedback{min-height:1.35em;margin:9px 0 0;color:var(--accent);font-size:.83rem}
.upload-feedback[data-kind=error]{color:#b91c1c}
.upload-fields{display:grid;gap:19px}
.upload-fields>label:not(.community-check){display:grid;gap:8px;font-size:.88rem;font-weight:500}
.upload-fields input:not([type=checkbox]),.upload-fields textarea{width:100%;min-width:0;margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font-size:1rem;font-weight:400}
.upload-fields input:not([type=checkbox]){height:48px}
.upload-fields textarea{min-height:106px;resize:vertical}
.upload-fields input:focus,.upload-fields textarea:focus{border-color:var(--accent);outline:2px solid var(--accent)}
.upload-fields .community-check{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--muted);font-size:.86rem;font-weight:500;line-height:1.55}
.upload-fields .community-check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--accent)}
.upload-fields .cf-turnstile{max-width:100%;overflow:hidden}
.upload-submit{width:100%;min-height:49px;margin-top:0;font-size:.96rem}
.upload-submit:disabled{opacity:.55;cursor:wait}
.upload-page [hidden]{display:none!important}
@media(max-width:850px){.upload-layout{grid-template-columns:1fr}.upload-dropzone{min-height:290px}}
@media(max-width:520px){.upload-page{padding:36px 0 64px}.upload-page-intro{margin-bottom:24px}.upload-art-panel,.upload-details-panel{padding:20px}.upload-dropzone{min-height:250px}.upload-empty{padding:20px}}

.upload-choose:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}

/* Inline artwork studio; crop geometry derives from the MIT AirCard tool. */
.upload-art-panel.is-dragging{outline:2px dashed var(--accent);outline-offset:4px}
.artwork-modes{display:flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.artwork-modes button{flex:1;min-height:42px;border:0;border-radius:8px;color:var(--muted);background:transparent;font:inherit;font-size:.88rem}
.artwork-modes button[aria-pressed=true]{color:var(--accent);background:var(--accent-soft);font-weight:600}
.artwork-canvas-wrap{overflow:hidden;border:1px solid var(--line);background-color:#f9fafc;background-image:conic-gradient(#e5e8ee 25%,transparent 0 50%,#e5e8ee 0 75%,transparent 0);background-size:20px 20px}
.artwork-canvas-wrap canvas,.artwork-canvas-wrap img{display:block;width:100%;height:auto;border-radius:0}
.artwork-canvas-wrap canvas{aspect-ratio:1536/969;touch-action:none;cursor:grab}
.artwork-canvas-wrap canvas:active{cursor:grabbing}
.gallery-ui .artwork-canvas-wrap canvas:focus{outline:none;box-shadow:none}
.artwork-range{display:grid;grid-template-columns:1fr auto;gap:8px;margin:18px 0;font-size:.86rem}
.artwork-range output{color:var(--muted);font-variant-numeric:tabular-nums}
.artwork-range input{grid-column:1/-1;width:100%;min-height:28px;margin:0;padding:0;accent-color:var(--accent)}
.gallery-ui .artwork-range input:focus{outline:none;box-shadow:none}
.artwork-position-controls{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 18px}
.artwork-position-controls .artwork-range{margin:10px 0}
.artwork-background{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.86rem}
.artwork-background select{min-height:42px;max-width:65%;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit}
.artwork-edit-actions,.artwork-result-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.artwork-edit-actions button,.artwork-result-actions button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;font-size:.86rem}
.artwork-edit-actions .community-primary{margin-left:auto;background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.artwork-edit-actions .community-primary:hover{background:var(--accent-fill-hover)}
.artwork-ready{display:flex;align-items:center;gap:8px;margin:18px 0 0;color:var(--accent);font-size:.9rem}
#artwork-editor button:disabled,#artwork-editor input:disabled,#artwork-editor select:disabled{opacity:.5;cursor:not-allowed}
#artwork-editor button:focus-visible,#artwork-editor select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#artwork-editor .upload-selected{padding-top:18px;border-top:1px solid var(--line);margin-top:22px}
#artwork-editor .upload-selected>div{min-width:0;flex-basis:100%}
#artwork-editor .upload-selected button{min-height:40px}
.upload-submit:disabled{cursor:not-allowed}
@media(min-width:851px){.upload-details-panel{position:sticky;top:100px}.upload-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr)}}
@media(max-width:520px){.artwork-edit-actions button,.artwork-result-actions button{padding:10px 12px}.artwork-position-controls{gap:12px}}

.artwork-credit{display:inline-block;margin-top:8px;color:color-mix(in srgb,var(--muted) 65%,var(--bg));font-size:.72rem;text-decoration:none}
.artwork-credit:hover{text-decoration:none}

#artwork-ratio-hint{margin:0 0 16px;color:var(--accent)}

.artwork-size-dialog h2{margin:0 0 12px;font-size:1.2rem}
.artwork-size-dialog p{margin:0;color:var(--muted);line-height:1.65}
.artwork-size-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.artwork-size-actions a,.artwork-size-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--accent);font:inherit;font-size:.88rem;text-decoration:none}

/* Template studio: one workspace, followed by a separate publishing page. */
.studio-page{padding-top:36px}
.studio-page .upload-page-intro{margin-bottom:24px}
.studio-page .upload-page-intro h1{font-size:clamp(2rem,3.8vw,3.2rem)}
.studio-steps{display:flex;align-items:center;gap:18px;margin:24px 0;color:var(--muted);font-size:.82rem}
.studio-steps>a,.studio-steps>span{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.studio-steps [aria-current=step]{color:var(--accent);font-weight:600}
#artwork-studio{border:1px solid var(--line);border-radius:18px;overflow:clip;background:var(--bg)}
.studio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line)}
.studio-toolbar>div:first-child{display:flex;align-items:center;gap:8px;min-width:0;font-size:.76rem;color:var(--muted)}
.studio-dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent)}
.studio-toolbar-actions{display:flex;gap:10px;flex-shrink:0}
.studio-toolbar button,.studio-filebar button,#studio-reset{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:10px 14px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;font-size:.82rem;cursor:pointer}
.studio-toolbar .community-primary{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
.studio-toolbar .community-primary:hover{background:var(--accent-fill-hover)}
.studio-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 230px;min-height:580px}
.studio-templates,.studio-settings{padding:22px 18px;min-width:0}
.studio-templates{border-right:1px solid var(--line)}
.studio-settings{border-left:1px solid var(--line)}
.studio-layout h2{margin:0 0 8px;font-size:.96rem;letter-spacing:-.02em}
.studio-templates>p{font-size:.76rem;color:var(--muted);line-height:1.6;margin:0 0 20px}
.studio-template-list{display:grid;gap:12px}
.studio-template{position:relative;display:block;text-align:left;width:100%;padding:7px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--text);cursor:pointer;font:inherit}
.studio-template[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}
.studio-template:hover{background:var(--panel)}
.studio-template canvas{display:block;width:100%;height:auto;border-radius:6px}
.studio-template>span{display:grid;gap:3px;padding:9px 3px 3px}
.studio-template strong{font-size:.82rem;font-weight:600}
.studio-template small{font-size:.72rem;color:var(--muted)}
.studio-template>svg{display:none;position:absolute;right:10px;bottom:20px;color:var(--accent)}
.studio-template[aria-pressed=true]>svg{display:block}
.studio-center{display:flex;flex-direction:column;min-width:0;padding:28px 24px 18px;background:var(--panel)}
.studio-stage{display:flex;flex:1;min-height:350px;align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:12px 0}
.studio-stage.is-dragging{outline:2px dashed var(--accent);outline-offset:6px}
.studio-stage .upload-dropzone{min-height:285px;border-width:1px;background:var(--bg);border-radius:12px}
.studio-stage .upload-empty>svg{color:var(--accent);margin-bottom:8px}
.studio-art{width:100%;max-width:680px;overflow:hidden;border-radius:clamp(12px,2vw,24px);background-color:#edf0f2;background-image:conic-gradient(#dce2e6 25%,transparent 0 50%,#dce2e6 0 75%,transparent 0);background-size:16px 16px;box-shadow:0 22px 36px -23px #152e4366}
.studio-art canvas,.studio-art img{display:block;width:100%;height:auto}
.studio-art canvas{touch-action:none;cursor:grab}
.studio-art canvas:active{cursor:grabbing}
#studio-stage-hint{margin:0;color:var(--muted);font-size:.76rem;text-align:center}
.studio-filebar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:26px}
.studio-filebar>span{font-size:.72rem;color:var(--muted);min-width:0;overflow-wrap:anywhere}
.studio-filebar button{white-space:nowrap;padding:6px 10px;min-height:36px;background:transparent;font-size:.76rem}
.studio-privacy{display:flex;justify-content:center;align-items:center;gap:6px;font-size:.7rem;color:var(--muted);margin:8px 0 0;line-height:1.5}
.studio-privacy svg{flex:none}
.studio-settings fieldset{padding:0;margin:0;border:0;min-width:0}
.studio-field{display:grid;gap:8px;margin:18px 0;font-size:.8rem}
.studio-field select,.studio-field input{width:100%;min-width:0;min-height:40px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}
.studio-settings h3{margin:24px 0 16px;padding-top:22px;border-top:1px solid var(--line);font-size:.85rem}
.studio-settings .artwork-range{font-size:.76rem;margin:14px 0}
.studio-original-toggle{display:flex;gap:8px;font-size:.82rem;line-height:1.6;margin-top:18px}
.studio-original-toggle input{width:16px;height:16px;flex:0 0 16px;align-self:flex-start;margin:5px 0 0;padding:0;accent-color:var(--accent)}
#artwork-studio #studio-original:focus{outline:none;box-shadow:none}
#artwork-studio #studio-original:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
.studio-original-toggle small{display:block;color:var(--muted);font-size:.72rem}
#studio-reset{padding:8px 0;min-height:38px;border:0;font-size:.76rem;color:var(--muted)}
#artwork-studio button:disabled{opacity:.5;cursor:not-allowed}
#artwork-studio :is(button,select,input,canvas):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.publish-preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;font-size:.82rem;color:var(--muted)}
.publish-preview-footer a{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none}
.publish-empty{padding:48px 24px;background:var(--panel);border:1px dashed var(--line);border-radius:16px;text-align:center}
@media(max-width:1100px){.studio-layout{grid-template-columns:170px minmax(0,1fr) 200px}.studio-center{padding:20px 16px}.studio-templates,.studio-settings{padding:18px 12px}}
@media(max-width:850px){.studio-layout{grid-template-columns:minmax(0,1fr) 230px}.studio-center{grid-column:1;grid-row:1}.studio-settings{grid-column:2;grid-row:1/3}.studio-templates{grid-column:1;grid-row:2;border-right:0;border-top:1px solid var(--line)}.studio-template-list{display:flex;overflow-x:auto;gap:8px;padding:3px}.studio-template{flex:0 0 145px}.studio-templates>p{margin-bottom:10px}.studio-stage{min-height:270px}.studio-toolbar{flex-wrap:wrap}.studio-toolbar-actions{margin-left:auto}.studio-center{padding-bottom:18px}}
@media(max-width:580px){.studio-page{padding-top:26px}.studio-page .upload-page-intro>p:last-child{font-size:.9rem}.studio-layout{display:flex;flex-direction:column}.studio-center{order:0;padding:20px 16px 12px}.studio-templates{order:1}.studio-settings{order:2;border-left:0;border-top:1px solid var(--line);padding:20px}.studio-toolbar{padding:12px;gap:12px}.studio-toolbar>div:first-child{font-size:.7rem;width:100%}.studio-toolbar-actions{width:100%;margin:0}.studio-toolbar-actions button{flex:1;min-height:44px;font-size:.78rem;padding:9px}.studio-toolbar-actions #studio-next{flex:1.5}.studio-stage{min-height:210px;padding:8px 0}.studio-stage .upload-dropzone{min-height:235px}.studio-template{flex-basis:142px}.studio-filebar{margin-top:14px}.studio-privacy{justify-content:flex-start}.studio-steps{gap:12px;font-size:.76rem}.studio-settings .artwork-range input{min-height:34px}.studio-art{border-radius:15px}}

/* Exposed choices keep card networks, brand marks and finishes visible at a glance. */
.studio-layout{grid-template-columns:192px minmax(0,1fr) 286px;height:790px;min-height:0}
.studio-templates,.studio-settings{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.studio-center{overflow:hidden}
.studio-stage{min-height:0}
.studio-choice-field{margin:22px 0!important;padding:0;border:0;min-width:0}
.studio-choice-field legend{margin-bottom:10px;font-size:.8rem;color:var(--text)}
.studio-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.studio-choices-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
.studio-choice{position:relative;display:block;min-width:0;cursor:pointer}
.studio-choice input{position:absolute;width:1px;height:1px;opacity:0;inset:0;margin:0}
.studio-choice-tile{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--muted);font-size:.74rem;text-align:center;transition:border-color .15s,background .15s}
.studio-choice-tile>span{min-width:0;overflow-wrap:anywhere}
.studio-choices-logos .studio-choice-tile{height:70px;flex-direction:column;gap:6px;padding:8px 3px;font-size:.61rem;line-height:1.2}
.studio-choice-tile img{display:block;width:53px;height:28px;object-fit:contain}
.studio-choice-tile img.is-mono{filter:brightness(0) var(--studio-invert,invert(0))}
.studio-choice-tile>svg{height:28px;color:var(--muted)}
.studio-choice:hover .studio-choice-tile{border-color:var(--accent)}
.studio-choice input:checked+.studio-choice-tile{border-color:var(--accent);background:var(--accent-soft);color:var(--text);box-shadow:inset 0 0 0 .5px var(--accent)}
.studio-choice input:focus-visible+.studio-choice-tile{outline:2px solid var(--accent);outline-offset:3px}
.studio-choice input:disabled+.studio-choice-tile{opacity:.5;cursor:not-allowed}
.studio-swatch{width:16px;height:16px;flex:none;border-radius:50%;border:1px solid #87929c55}
.studio-swatch-light{background:#fafbf9}.studio-swatch-dark{background:#1b2832}.studio-swatch-gold{background:linear-gradient(135deg,#f0dfa6,#be985c,#eedba2)}.studio-swatch-silver{background:linear-gradient(135deg,#e3e9ea,#92a0a8,#e0e6e9)}.studio-swatch-transparent{background:conic-gradient(#d3dce3 25%,#fafbfc 0 50%,#d3dce3 0 75%,#fafbfc 0);background-size:8px 8px}
#studio-chip .studio-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
:root[data-theme=dark] .studio-settings{--studio-invert:invert(1)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .studio-settings{--studio-invert:invert(1)}}
@media(max-width:1100px) and (min-width:851px){.studio-layout{grid-template-columns:156px minmax(0,1fr) 250px}.studio-center{padding-inline:14px}}
@media(max-width:850px){.studio-layout{grid-template-columns:minmax(0,1fr) 258px;height:auto;min-height:650px}.studio-settings{max-height:860px}.studio-center{min-height:390px}.studio-templates{overflow:visible}.studio-stage{min-height:230px}}
@media(max-width:580px){.studio-layout{height:auto;min-height:0}.studio-center{min-height:0;overflow:visible}.studio-settings{overflow:visible;max-height:none}.studio-choices-logos{grid-template-columns:repeat(4,minmax(0,1fr))}.studio-choices-logos .studio-choice-tile{height:72px}.studio-templates{padding:18px 12px}.studio-stage{min-height:210px}.studio-center:has(#studio-art:not([hidden])){position:sticky;top:112px;z-index:3;box-shadow:0 8px 12px -12px #152e4366}.studio-center:has(#studio-art:not([hidden])) .studio-stage{min-height:0}.studio-center:has(#studio-art:not([hidden])) .studio-filebar{margin-top:8px}.studio-center:has(#studio-art:not([hidden])) .studio-privacy{display:none}.studio-center:has(#studio-art:not([hidden])) #studio-stage-hint{display:none}.studio-center:has(#studio-art:not([hidden])) .upload-feedback:empty{display:none}}

.studio-choice-tile img.is-grayscale{filter:grayscale(1) contrast(1.25) var(--studio-invert,)}
.studio-wordmark{font-family:"Card Sans","Avenir Next",sans-serif;font-size:13px;font-weight:800;letter-spacing:-.6px;line-height:32px;color:var(--text)}

#studio-original-image{touch-action:none;user-select:none}

.studio-art:has(#studio-original-image:not([hidden])){max-width:min(680px,calc(42vh * var(--studio-original-ratio,1.585)))}