@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{color-scheme:dark;--bg:#08090b;--panel:#101216;--soft:#191d24;--line:#2b3039;--text:#f5f7fa;--muted:#a3acba;--accent:#ee2034;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.5}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ff6675;outline-offset:4px}[hidden]{display:none!important}
.account-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 30px;background:var(--panel);border-bottom:1px solid var(--line)}.store-brand{display:flex;align-items:center;gap:15px;text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:20px}.store-brand img{display:block;object-fit:contain;width:56px;height:56px;aspect-ratio:1;border-radius:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:11px 17px;font-size:14px;font-weight:600;text-decoration:none;min-height:44px}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.secondary{background:var(--panel);color:var(--text)}.button:hover{filter:brightness(1.12)}
h1{font-size:32px;line-height:1.15;letter-spacing:-.04em;margin:0 0 12px;font-weight:800}h2{font-size:20px;line-height:1.25;letter-spacing:-.025em;margin:0}h3{font-size:16px;margin:0 0 6px}p{margin:0 0 16px}.muted{color:var(--muted)}.small{font-size:14px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.11em;color:var(--muted);margin-bottom:12px;overflow-wrap:anywhere}.login-panel{max-width:470px;margin:70px auto 25px;padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:14px}.login-panel label{display:block;font-size:14px;margin:24px 0 8px}.login-panel input{width:100%;padding:13px;border-radius:8px;background:var(--bg);color:var(--text);border:1px solid var(--line)}.login-panel .button{width:100%;margin:16px 0}.login-panel .small{margin:10px 0 0}.text-button{color:var(--muted);background:none;border:0;text-decoration:underline;text-underline-offset:4px;padding:10px 0}.account-shell{display:grid;grid-template-columns:200px minmax(0,1fr);max-width:1350px;margin:auto;min-height:650px}.sidebar{padding:30px 16px;display:flex;flex-direction:column;align-items:stretch;gap:7px;border-right:1px solid var(--line);background:var(--panel)}.sidebar button,.sidebar a{color:var(--muted);background:transparent;border:0;text-align:left;padding:12px 15px;border-radius:7px;font-size:14px;text-decoration:none}.sidebar [aria-current=page]{background:var(--soft);color:var(--text);box-shadow:inset 3px 0 var(--accent)}.sidebar #supportLink{margin-top:30px}.account-content{padding:36px;min-width:0}.page-heading,.section-heading,.order-top,.order-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.page-heading{margin-bottom:32px}.section-heading{margin:24px 0 15px}.order-card,.detail-panel{padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:16px}.order-top strong{overflow-wrap:anywhere}.order-top p{margin:4px 0 0}.status-badge{display:inline-block;color:#ced9e7;background:#263142;padding:6px 10px;border-radius:6px;font-size:14px}.order-product{display:flex;align-items:center;gap:20px;margin:24px 0}.order-product img{width:95px;height:95px;object-fit:contain;background:#eee;border-radius:9px}.order-product p{margin:5px 0}.order-bottom{border-top:1px solid var(--line);padding-top:18px}.order-bottom p{margin:0}.design-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.design-card{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.design-image{height:190px;background:#e9edf2}.design-image img{height:100%;width:100%;object-fit:contain}.design-info{padding:18px}.design-info .button{width:100%;margin-top:8px}.design-info p{margin:4px 0 12px}.empty-state{padding:35px 24px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}.empty-state h3{color:var(--text)}.detail-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(230px,1fr);gap:20px}.detail-panel dl{margin:20px 0}.detail-panel dl div{display:flex;justify-content:space-between;gap:15px;margin:12px 0}.detail-panel dt{color:var(--muted)}.detail-panel dd{margin:0;text-align:right}.detail-panel .total{border-top:1px solid var(--line);padding-top:14px}.order-actions{display:flex;gap:10px;flex-wrap:wrap}.account-status{max-width:900px;margin:20px auto;padding:0 24px;color:var(--muted);overflow-wrap:anywhere}.account-status.error{color:#ff9aa5}.retry-button{display:flex;margin:15px auto}.back-button{margin-bottom:22px}.email-value{overflow-wrap:anywhere}#verifyEmail{color:var(--text);overflow-wrap:anywhere}
@media(min-width:1100px){.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.account-shell{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;padding:12px;border-right:0;border-bottom:1px solid var(--line)}.sidebar #supportLink{margin-top:0}.account-content{padding:26px 20px}.detail-grid{grid-template-columns:1fr}.account-header{padding:15px 20px}.account-header .button{padding:10px}.store-brand{font-size:16px}.store-brand img{width:48px;height:48px}.login-panel{margin:35px 20px;max-width:470px}.page-heading :is(h1,h2){font-size:28px}}
@media(max-width:450px){.account-header{align-items:flex-start}.store-brand{gap:10px;max-width:190px}.account-header .button{font-size:12px}.page-heading{align-items:flex-start;gap:12px}.page-heading .button{width:100%}.order-card{padding:18px}.order-product{gap:12px}.order-product img{width:70px;height:70px}.sidebar button,.sidebar a{padding:10px;font-size:14px}.login-panel{padding:24px}.order-bottom .button{width:100%}}

.account-header-actions{display:flex;align-items:center;gap:10px}
.install-app-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 15px;border:1px solid var(--line);border-radius:8px;background:var(--soft);color:var(--text);font-size:14px;font-weight:600;white-space:nowrap}
.install-app-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.install-app-button:hover{border-color:var(--accent)}
@media(display-mode:standalone){.install-app-button{display:none!important}}
.version-update-notice{position:fixed;left:50%;bottom:82px;z-index:1600;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 36px);padding:12px 14px 12px 20px;border:2px solid var(--line);border-radius:999px;background:rgba(16,18,22,.97);color:var(--text);box-shadow:0 18px 52px rgba(0,0,0,.52);font-size:20px;font-weight:750;line-height:1;white-space:nowrap;transform:translateX(-50%)}
.version-update-notice button{min-height:48px;padding:12px 20px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:18px;font-weight:900;line-height:1}
.version-update-notice button:hover{filter:brightness(1.12)}
@media(max-width:780px){.account-header-actions{gap:8px}.install-app-button{padding:10px;font-size:12px}.version-update-notice{bottom:70px;gap:8px;max-width:calc(100vw - 24px);padding:10px 10px 10px 14px;font-size:16px}.version-update-notice button{min-height:44px;padding:10px 14px;font-size:16px}}

/* Compact account workspace: order rows, a resume panel, and a design strip. */
.account-header{padding:13px 24px;gap:16px}
.store-brand{gap:10px;font-size:18px}.store-brand img{width:40px;height:40px;border-radius:7px}
.store-brand img.store-header-logo{width:auto;height:40px;max-width:none;aspect-ratio:auto;border-radius:0}
.header-support{font-size:13px;color:var(--muted);text-decoration:none;padding:8px 0}
.account-shell{grid-template-columns:220px minmax(0,1fr);max-width:none;min-height:0}
.sidebar{padding:22px 10px;gap:5px}.sidebar-label{padding:0 10px 8px;font-size:11px;letter-spacing:.1em;color:var(--muted);font-weight:600}
.sidebar button{padding:10px 10px 10px 14px;font-size:13px}.sidebar-divider{width:100%;height:0;margin:8px 0;border:0;border-top:1px solid var(--line)}
.preview-zoomable{cursor:zoom-in}.preview-zoomable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.image-lightbox{margin:auto;padding:0;border:0;background:transparent;max-width:min(92vw,1100px);max-height:92vh;overflow:visible}.image-lightbox::backdrop{background:rgba(0,0,0,.88)}.image-lightbox img{display:block;max-width:min(92vw,1100px);max-height:92vh;width:auto;height:auto;border-radius:12px;background:#eee}
.image-lightbox-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:1px solid #414854;background:var(--panel);color:var(--text);font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 24px #000a}.image-lightbox-close:hover{background:var(--soft)}
.profile-panel{max-width:980px}.profile-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 18px;margin-top:6px}.profile-form label{display:block;font-size:13px;margin:0;color:var(--muted)}.profile-span-3{grid-column:span 3}.profile-span-2{grid-column:span 2}.profile-form input{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:8px;background:var(--bg);color:var(--text);border:1px solid var(--line);font-size:14px}.profile-country{grid-column:1/-1;margin:0}.profile-actions{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}.profile-form .button{margin:0}.profile-form [data-profile-status]{margin:0}.profile-form [data-profile-status].error{color:#ff9aa5}
@media(max-width:780px){.profile-form{grid-template-columns:1fr}.profile-span-3,.profile-span-2{grid-column:auto}}
.account-content{width:100%;max-width:1480px;padding:24px;min-width:0}.page-heading{margin-bottom:22px;gap:12px}.page-heading>div{min-width:0}.page-heading :is(h1,h2){font-size:27px;margin:0 0 5px;overflow-wrap:anywhere}.page-heading p{margin:0;font-size:13px}
.section-heading{margin:0 0 10px;gap:8px;align-items:baseline}.section-heading h2{font-size:17px;line-height:1.4}.section-count{font-size:12px;font-weight:400;color:var(--muted);letter-spacing:0;white-space:nowrap;margin-left:6px}
.account-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:4px 0;border:0;background:none;color:var(--text);font-size:13px;font-weight:600;text-decoration:none;text-align:left}
.account-link:hover,.header-support:hover{text-decoration:underline;text-underline-offset:4px}
.overview-workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:18px;align-items:stretch}
.overview-workspace .section-heading{min-height:32px}
.orders-section,.saved-section{min-width:0}.saved-section{display:flex;flex-direction:column}.saved-section>.section-heading{flex:none}
.order-list{border:1px solid var(--line);border-radius:9px;background:var(--panel);overflow:hidden}
.order-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.order-card:last-child{border-bottom:0}.order-thumbnail{width:58px;height:58px;background:#e9edf2;object-fit:contain;border-radius:6px}
.order-info{min-width:0}.order-info h3{font-size:15px;margin:0 0 5px;overflow-wrap:anywhere}.order-info p{margin:0;font-size:12px}.order-reference{font-size:11px!important;color:var(--muted);overflow-wrap:anywhere;margin:6px 0 0!important}
.order-summary{display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:220px}.order-summary .status-badge{font-size:12px;padding:4px 8px;border-radius:5px;max-width:100%;text-align:right}
.order-summary-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.order-summary-actions strong{font-size:14px;font-variant-numeric:tabular-nums}
.section-heading-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-left:auto}.order-filter{display:inline-flex;padding:2px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}.order-filter button{min-height:32px;padding:5px 12px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:600}.order-filter button[aria-pressed=true]{background:var(--soft);color:var(--text);box-shadow:0 1px 4px #0005}.order-filter button:hover{color:var(--text)}
.order-archive-help{margin:-3px 0 12px;color:var(--muted);font-size:12px}.order-archive-button{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:4px 9px;border:1px solid #3a424f;border-radius:6px;background:transparent;color:var(--muted);font-size:12px;font-weight:600}.order-archive-button:hover{border-color:#6d788a;color:var(--text);background:var(--soft)}.order-archive-button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.archived-order{background:rgba(255,255,255,.012)}
.account-toast{position:fixed;left:50%;bottom:28px;z-index:1700;display:flex;align-items:center;gap:10px;min-width:250px;max-width:calc(100vw - 32px);padding:11px 14px;border:1px solid #39414d;border-radius:9px;background:#171b21;color:var(--text);box-shadow:0 18px 50px #0009;transform:translateX(-50%);font-size:13px}.account-toast-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#31b45b;color:#08110b;font-size:13px;font-weight:900}.account-toast button{margin-left:auto;padding:5px 3px;border:0;background:transparent;color:#86b4ff;font-size:13px;font-weight:700}.account-toast button:hover{text-decoration:underline;text-underline-offset:3px}
.design-card h3{overflow-wrap:anywhere}.design-saved{margin:0;padding:0 18px;font-size:12px}.design-continue{display:flex}.design-actions{display:grid;grid-template-columns:minmax(0,2fr) minmax(100px,1fr);gap:10px;margin:12px 18px 18px}.design-actions .button{margin:0;padding:10px 12px}.design-delete{border-color:#71313a;background:#1b1115;color:#ff7180}.design-delete:hover{border-color:var(--accent);background:#281318}.design-delete svg,.delete-design-dialog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.resume-card{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px 12px;padding:14px;align-content:start;flex:1;border-radius:9px}
.resume-card .design-image{width:66px;height:66px;border-radius:6px;overflow:hidden}.resume-card .design-info{padding:0;align-self:center;min-width:0}.resume-card h3{font-size:15px;margin:3px 0}.resume-card .design-info p{font-size:12px;margin:0}.design-kind{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.06em}
.resume-card .design-saved{grid-column:1/-1;padding:0;margin:0}.resume-card .design-continue{grid-column:1/-1;margin:10px 0 0;font-size:12px;padding:8px;align-self:end}
.purchased-section{margin-top:22px}.purchased-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.purchased-compact{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;padding:14px;align-items:center;border-radius:9px}.purchased-compact .design-image{width:62px;height:62px;border-radius:6px;overflow:hidden}.purchased-compact .design-info{padding:0;min-width:0}.purchased-compact h3{font-size:15px;margin:2px 0 4px}.purchased-compact p{font-size:12px;margin:0}.purchased-compact .account-link{margin-top:5px}
.empty-state{padding:22px 18px;font-size:14px;border-radius:9px}.empty-state h3{font-size:16px}.saved-section>.empty-state{flex:1}.load-more{margin-top:16px}.production-unavailable{margin:12px 0 0}
.account-status:empty{display:none}
.delete-design-dialog{width:min(430px,calc(100vw - 32px));padding:28px;border:1px solid #414854;border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 24px 80px #000c;text-align:center}.delete-design-dialog::backdrop{background:#000b}.delete-design-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:#2b1419;color:#ff7180}.delete-design-icon svg{width:23px;height:23px}.delete-design-dialog h2{margin-bottom:9px}.delete-design-dialog p{color:var(--muted);font-size:14px}.delete-design-dialog strong{color:var(--text);overflow-wrap:anywhere}.delete-design-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}.delete-design-dialog-actions .button{width:100%;margin:0}.delete-design-dialog .danger{border-color:var(--accent);background:var(--accent);color:#fff}.delete-design-error{margin:14px 0 0!important;color:#ff9aa5!important}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1;display:flex;flex-direction:column;min-width:0}
.account-shell{flex:1;width:100%;margin:0}
.order-card{position:relative}
.order-hit{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:transparent;cursor:pointer}
.order-hit:hover{background:rgba(255,255,255,.035)}
.order-hit:focus-visible{outline:3px solid #ff6675;outline-offset:-3px}
.drawer-open{overflow:hidden}
.preview-unavailable{display:flex;align-items:center;justify-content:center;min-height:64px;width:100%;height:100%;padding:5px;text-align:center;color:var(--muted);background:var(--soft);font-size:11px;line-height:1.3;border-radius:6px}
.preview-unavailable.order-thumbnail{width:58px;max-width:100%;height:66px}
.order-product>.preview-unavailable{width:95px;height:95px;flex-shrink:0}
/* An order opens in place of the list, with a way back; never a second drawer. */
.order-view-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.order-view-header>div{min-width:0}.order-view-header h2{font-size:26px;overflow-wrap:anywhere}.order-view-header .eyebrow{margin-bottom:5px}
.order-view .detail-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.order-view .detail-panel{min-width:0}.order-view .detail-panel h2{overflow-wrap:anywhere}
.drawer-error{color:#ff9aa5;overflow-wrap:anywhere}

@media(prefers-reduced-motion:reduce){.order-drawer[open]{animation:none}}
@media(max-width:1100px){.order-drawer .detail-grid{grid-template-columns:1fr}}
@media(max-width:540px){.drawer-header{padding:14px;align-items:flex-start;gap:8px}.drawer-header h2{font-size:16px}.drawer-header .button{padding:8px;font-size:12px}.drawer-content{padding:12px}.order-drawer .detail-panel{padding:14px}.order-drawer .order-product{flex-wrap:wrap}.order-drawer .order-actions .button{width:100%;white-space:normal}.order-drawer .detail-panel dl div{flex-wrap:wrap}.order-drawer .detail-panel dd{overflow-wrap:anywhere}}
@media(max-width:780px){.account-shell{flex:none}.sidebar{align-content:start}}
@media(max-width:1150px){.overview-workspace{grid-template-columns:minmax(0,1fr) 220px;gap:14px}.order-card{gap:10px;padding:14px;grid-template-columns:50px minmax(0,1fr)}.order-thumbnail{width:50px;height:50px}.order-summary{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center;max-width:none}.order-summary .status-badge{text-align:left}.order-summary-actions{flex-shrink:0}}
@media(max-width:900px){.overview-workspace{grid-template-columns:1fr}.resume-card{grid-template-columns:66px minmax(0,1fr) auto;align-items:center}.resume-card .design-saved{grid-column:2;grid-row:2}.resume-card .design-image{grid-row:1/3}.resume-card .design-continue{grid-column:3;grid-row:1/3;margin:0;align-self:center}.order-card{grid-template-columns:50px minmax(0,1fr) auto}.order-summary{grid-column:auto;flex-direction:column;align-items:flex-end;max-width:190px}.order-summary .status-badge{text-align:right}}
@media(max-width:780px){.account-shell{grid-template-columns:1fr}.sidebar{flex-direction:row;padding:8px 14px;border-right:0;border-bottom:1px solid var(--line)}.sidebar-label{display:none}.sidebar-divider{width:0;height:auto;align-self:stretch;margin:0 4px;border-top:0;border-left:1px solid var(--line)}.sidebar #logoutButton{margin-left:auto}.account-content{padding:20px}.account-header{padding:12px 20px;flex-wrap:wrap}.account-header-actions{flex-wrap:wrap}.purchased-grid{gap:12px}.page-heading :is(h1,h2){font-size:25px}}
@media(max-width:540px){.account-header{padding:12px 14px;gap:10px}.account-header-actions{width:100%;justify-content:flex-end}.header-support{margin-right:auto}.store-brand{max-width:none}.account-content{padding:18px 14px}.page-heading .button{width:auto;font-size:12px;padding:9px 12px}.page-heading{align-items:center}.section-heading{align-items:flex-start}.section-heading h2{font-size:16px}.section-heading-actions{width:100%;justify-content:space-between;gap:10px}.order-filter{flex:1}.order-filter button{flex:1;padding:5px 8px}.section-count{font-size:11px}.order-card{grid-template-columns:44px minmax(0,1fr);gap:10px;padding:12px}.order-thumbnail{width:44px;height:44px}.order-summary{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;max-width:none;gap:8px;flex-wrap:wrap}.order-summary .status-badge{text-align:left}.order-summary-actions{margin-left:auto;gap:8px}.order-info h3{font-size:14px}.order-summary .status-badge{font-size:11px}.order-summary-actions strong{font-size:13px}.account-link{font-size:12px}.purchased-grid{grid-template-columns:1fr}.resume-card{grid-template-columns:66px minmax(0,1fr)}.resume-card .design-saved{grid-column:1/-1;grid-row:auto}.resume-card .design-image{grid-row:auto}.resume-card .design-continue{grid-column:1/-1;grid-row:auto;margin-top:3px}.sidebar button{font-size:12px;padding:9px 8px 9px 12px}.sidebar{gap:4px;padding:8px}.detail-panel{padding:18px}.account-header .install-app-button{font-size:12px}.account-toast{bottom:18px}}
@media(pointer:coarse){.account-link,.header-support,.sidebar button{min-height:44px}}

/* My designs: compact square cards with edge-to-edge 1:1 preview areas. */
.design-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.design-grid .design-card{display:flex;min-width:0;height:100%;flex-direction:column}
.design-grid .design-image{width:100%;height:auto;aspect-ratio:1/1;overflow:hidden;flex:0 0 auto}
.design-grid .design-image img{display:block;width:100%;height:100%;object-fit:contain}
.design-grid .design-info{display:flex;min-width:0;flex:1;flex-direction:column}
.design-grid .design-actions{margin-top:auto}
@media(min-width:1280px){.design-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:900px) and (max-width:1279px){.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.design-grid{grid-template-columns:1fr}.design-actions{grid-template-columns:minmax(0,1.7fr) minmax(96px,1fr);margin:12px 14px 14px}.delete-design-dialog{padding:24px 18px}.delete-design-dialog-actions{grid-template-columns:1fr}}
.login-panel input:read-only{padding-right:40px;background:#0c0e11 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3acba' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") right 13px center/16px no-repeat;color:var(--muted)}
.login-panel .button:disabled{background:var(--soft);border-color:var(--line);color:var(--muted);cursor:default}.login-panel .button:disabled:hover{filter:none}
.login-sent{display:flex;gap:12px;align-items:flex-start;margin:0 0 6px;padding:14px;border:1px solid #2a6b3f;border-radius:8px;background:rgba(49,180,91,.1)}.login-sent[hidden]{display:none}
.login-sent-icon{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#31b45b;color:#08110b}.login-sent-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.login-panel .order-placed{text-align:center}.order-placed-icon{width:72px;height:72px;margin:0 auto 18px;color:#55e6ad}.order-placed-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.order-placed-title{font-size:26px;margin:0 0 6px}.order-placed-total{font-size:20px;font-weight:700;margin:0 0 10px}.order-placed-note{color:var(--muted);margin:0 0 20px;overflow-wrap:anywhere}.order-placed-link{font-weight:600}
.login-code{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.login-code[hidden]{display:none}.login-code label{margin-top:0}.login-panel .login-code input{font-size:22px;font-weight:600;letter-spacing:.18em;text-align:center}.login-code .button{margin:12px 0 0}.login-code p{margin:10px 0 0}.login-code p.error{color:#ff9aa5}
.login-sent strong{display:block;font-size:15px;line-height:1.3}.login-sent p{margin:4px 0 0;line-height:1.45}.login-panel .login-sent .text-button{padding:8px 0 0;font-size:13px}
.account-header-title{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.5}
/* Order status (2026-10-01): five steps from Order placed to Shipped, and each parcel's USPS number. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.progress-panel{display:flex;flex-direction:column;gap:22px}
.progress-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.progress-head h2{margin:0;font-size:26px;line-height:1.15}.progress-head .small{margin:6px 0 0}
.progress-kicker{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.progress-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.progress-steps::before,.progress-steps::after{content:"";position:absolute;top:21px;left:10%;right:10%;height:3px;border-radius:2px;background:var(--line)}
.progress-steps::after{right:auto;width:var(--progress);background:var(--text)}
.progress-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;min-width:0}
.progress-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.progress-dot{position:relative;z-index:1;width:44px;height:44px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);border:2px solid var(--muted);color:var(--muted);box-sizing:border-box}
.progress-dot svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-done .progress-dot{background:var(--text);border-color:var(--text);color:var(--panel)}.is-done .progress-dot svg{stroke-width:2.6}
.is-current .progress-dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 6px var(--soft)}
.progress-name{font-size:15px;font-weight:700;overflow-wrap:anywhere}.is-todo .progress-name{color:var(--muted);font-weight:600}
.progress-when{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.parcels{display:flex;flex-direction:column;gap:10px}.parcels .small{margin:0}
.parcel{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.parcel-icon{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--panel);color:var(--text)}
.parcel-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.parcel-number{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.parcel-number span{font-size:12px;font-weight:600;color:var(--muted)}.parcel-number strong{font-size:18px;letter-spacing:.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.parcel-actions{display:flex;gap:8px;flex-wrap:wrap}.parcel-actions .button{width:auto;margin:0;min-height:44px}
.parcel-actions .button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.progress-mini{display:flex;gap:3px;width:110px}.progress-mini i{flex:1;height:5px;border-radius:3px;background:var(--line)}.progress-mini i.done{background:var(--text)}.progress-mini i.current{background:var(--accent)}
.order-track-link{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:32px;font-size:13px;font-weight:700;color:var(--text)}
@media(max-width:640px){
  .progress-steps{grid-template-columns:1fr;gap:0}
  .progress-steps::before,.progress-steps::after{top:22px;bottom:22px;left:20px;right:auto;width:3px;height:auto}
  .progress-steps::after{bottom:auto;height:calc((100% - 44px)*var(--ratio))}
  .progress-step{flex-direction:row;align-items:center;gap:14px;text-align:left;min-height:62px}
  .parcel{flex-wrap:wrap}.parcel-actions{width:100%}.parcel-actions .button{flex:1}
  /* The order page's two columns stack on a phone too (its own rule outranked the one-column one). */
  .order-view .detail-grid{grid-template-columns:1fr}
}
/* Its own page (3.166.0): the store's brand, Settings, and the way back into the store. */
.account-header-start{display:flex;align-items:center;gap:14px;min-width:0}
.account-header-start .store-brand{min-width:0;color:var(--text)}.account-header-start .store-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-brand img[hidden],.store-brand span[hidden]{display:none}
.account-header-divider{width:1px;height:26px;background:var(--line);flex:none}
.account-header-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.account-header-link:hover{background:var(--soft)}.account-header-link:focus-visible{outline:2px solid #95bbff;outline-offset:2px}
.account-header-link svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* One row on a phone: the brand and Settings on the left, Design and Cart as icons on the right. */
@media(max-width:780px){.account-header{flex-wrap:nowrap;align-items:center}.account-header-actions{width:auto;flex-wrap:nowrap;flex:none}}
@media(max-width:540px){.account-header-start{gap:10px}.account-header-title{font-size:17px}.account-header-link{padding:0 10px}.account-header-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.account-header-link svg{width:22px;height:22px}}
@media(max-width:340px){.account-header-divider,.account-header-title{display:none}}
/* A picture still loading: its tile shimmers instead of a broken image. */
body img[data-loading]{background-color:var(--soft);background-image:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--text) 10%,transparent) 50%,transparent 70%);background-size:250% 100%;background-repeat:no-repeat;animation:image-loading-shimmer 1.4s ease-in-out infinite}
@keyframes image-loading-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){body img[data-loading]{animation:none;background-image:none}}
/* Phones (3.171.0, F03/F25): a wide store logo shrinks into its slot, keeping its shape, so the header never
   runs off the screen or under its buttons. On a phone the brand takes the room Settings had, Install shows as
   its icon, and every header target is at least 44px on a touch screen. */
.account-header-start{flex:1 1 auto}
.account-header-start .store-brand{flex:0 1 auto;min-width:0}
.account-header-actions{flex:none}
.store-brand img.store-header-logo{height:auto;max-height:40px;max-width:100%;object-fit:contain;object-position:left center}
@media(max-width:540px){.account-header-divider,.account-header-title{display:none}.account-header .install-app-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.account-header .install-app-button{padding:0 10px}}
@media(pointer:coarse){#storeHomeLink{min-width:44px;min-height:44px}.account-header-link,.account-header .install-app-button{min-width:44px;min-height:44px;justify-content:center}}
/* 3.172.0: the customizer's kind of top bar (the store logo, then Back to store; Design and Cart on the
   right), and a Settings title row under it with the account's email. On a phone the back arrow comes first,
   as in the customizer's bar. */
.page-heading .page-title{line-height:1.15;letter-spacing:-.04em;font-weight:800}
.account-header{min-height:64px;padding:8px 24px;gap:16px;flex-wrap:nowrap;align-items:center;background:var(--bg)}
.account-header-start{gap:24px;flex:1 1 auto;min-width:0}
.account-back-link{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;color:var(--text);font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.account-back-link svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.account-back-link:hover span{text-decoration:underline;text-underline-offset:3px}
.account-back-link:focus-visible{outline:2px solid #95bbff;outline-offset:2px}
/* The section's title (My orders, My designs, My profile) is the page's h1;
   Install app, when the browser offers it, sits beside it. */
.page-heading{display:flex;align-items:center;justify-content:space-between}
.page-heading .install-app-button{flex:none}
/* Page Designer's Header › Logo size (account.js): the target height below 768px and from 768px, and on a
   computer the widest the store's header lets a logo be. The width the bar leaves always wins, so a wide
   logo shrinks, keeping its shape. Without a size the logo keeps 40px; the square store icon is unchanged. */
.store-brand img.store-header-logo{width:auto;height:auto;max-height:var(--account-logo-h-mobile,40px);max-width:100%}
@media(min-width:768px){.store-brand img.store-header-logo{max-height:var(--account-logo-h-desktop,40px)}.account-header-start .store-brand:has(img.store-header-logo){max-width:var(--account-logo-max-desktop,none)}}
@media(max-width:540px){
  .account-header{padding:6px 12px;gap:8px}
  .account-header-start{gap:8px}
  .account-back-link{order:-1;justify-content:center;min-width:44px}
  .account-back-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
/* Settings is the page title (h1); the sign-in panels keep their look as h2. */
.panel-title{font-size:32px;line-height:1.15;letter-spacing:-.04em;margin:0 0 12px;font-weight:800}
/* Saved design cards laid out like purchased ones; the picture and name open the design. */
.design-image-link{display:block;color:inherit}
.design-title-link{color:inherit;text-decoration:none}
.design-title-link:hover{text-decoration:underline;text-underline-offset:3px}
.design-grid .design-info>.button{margin-top:auto}
.design-grid .saved-card .design-actions{display:flex;gap:8px;margin:auto 0 0;padding-top:8px}
.design-grid .saved-card .design-continue{flex:1;justify-content:center;align-items:center;width:auto;min-width:0;margin:0;padding-left:10px;padding-right:10px;white-space:nowrap}
.design-grid .saved-card .design-delete{flex:none;display:grid;place-items:center;width:44px;margin:0;padding:0;border-color:var(--line);background:transparent;color:#ff7180}
.design-grid .saved-card .design-delete:hover{border-color:#ff7180;background:#281318}
.design-grid .saved-card .design-delete svg{width:18px;height:18px}
/* 3.176.0: the menu with an icon beside each item, counts for orders and saved designs, the selected item
   tinted in the store's colour, and Help (the store's contact page or support email) above Sign out. On a
   phone, where the menu is a row of tabs, Help and Sign out keep their icons only. */
.sidebar button,.sidebar a{display:flex;align-items:center;gap:10px;position:relative;isolation:isolate}
.sidebar-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-count{margin-left:auto;min-width:20px;padding:1px 7px;border-radius:999px;background:var(--line);color:var(--text);font-size:11px;font-weight:600;line-height:18px;text-align:center}
.sidebar [aria-current=page]{border-radius:0 7px 7px 0}
.sidebar [aria-current=page]::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--accent);opacity:.12;pointer-events:none}
.sidebar [aria-current=page] .sidebar-icon{color:var(--accent)}
.sidebar [aria-current=page] .sidebar-count{background:var(--accent);color:#fff}
.sidebar .sidebar-help:hover,.sidebar button:not([aria-current=page]):hover{color:var(--text)}
.sidebar-divider{margin:12px 0 8px}
.sidebar .sidebar-help{font-size:13px;line-height:inherit;padding:10px 10px 10px 14px}
@media(max-width:780px){.sidebar-divider{margin:0 4px}.sidebar .sidebar-help{margin-left:auto}.sidebar .sidebar-help:not([hidden])~#logoutButton{margin-left:0}.sidebar [aria-current=page]{border-radius:0 7px 7px 0}}
@media(max-width:540px){
  .sidebar{flex-wrap:nowrap;gap:2px;padding:6px 8px}
  .sidebar button,.sidebar a,.sidebar .sidebar-help,.sidebar #logoutButton{flex:1 1 0;min-width:0;margin:0;flex-direction:column;justify-content:center;gap:3px;padding:7px 2px 6px;font-size:11px;text-align:center}
  .sidebar-icon{width:20px;height:20px}
  .sidebar-text{max-width:100%}
  .sidebar-count{position:absolute;top:2px;left:calc(50% + 5px);margin:0;min-width:16px;padding:0 4px;font-size:10px;line-height:15px}
  .sidebar [aria-current=page]{border-radius:7px 7px 0 0;box-shadow:inset 0 -2px var(--accent)}
  .sidebar-divider{margin:6px 2px}
}
