@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Graduate&family=DM+Sans:wght@400;500;600;700&display=swap');
@font-face{font-family:'Phenomena';src:url('assets/fonts/Phenomena-Black.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
:root{--ink:#182b32;--muted:#7b8789;--line:#dce3df;--green:#123f38;--accent:#c8e27b}*{box-sizing:border-box}body{margin:0;background:#f8faf7;color:var(--ink);font:13px 'DM Sans',Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);padding:11px 15px;transition:.15s}button:hover{border-color:#6a827a;background:#edf2ea}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8eaa62;outline-offset:2px}button.active{background:var(--green);color:#fff;border-color:var(--green)}header{height:86px;padding:0 32px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);background:white}.brand{display:flex;align-items:center;gap:13px;color:var(--green);text-decoration:none}.brand svg{width:35px;height:38px;fill:var(--green)}.brand strong{font-family:'Phenomena','Barlow Condensed',sans-serif;font-weight:800;font-size:28px;letter-spacing:1px;line-height:1;display:block}.brand span{display:block;font:700 8px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:2.1px;margin-top:5px;color:var(--green)}.header-note{margin:auto;font-size:10px;letter-spacing:2px;color:var(--muted)}.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}.primary:hover{background:#215c50;color:white}.quiet{background:transparent;border-color:transparent}main{display:grid;grid-template-columns:225px minmax(440px,1fr) 330px;min-height:calc(100vh - 136px)}.steps{padding:37px 27px;display:flex;flex-direction:column;border-right:1px solid var(--line);background:#f3f6ef}.eyebrow{font-size:9px;letter-spacing:1.9px;font-weight:700;color:#728279}h1,h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;margin:12px 0}h1{font-size:47px;line-height:1.03;letter-spacing:-.5px}.intro{color:#849087;font-size:11px;line-height:1.8;margin:8px 0 34px}nav{display:grid;gap:9px}nav button{border-color:transparent;background:transparent;text-align:left;display:flex;gap:13px;align-items:center;padding:12px 10px;font-size:12px}nav button span{font-size:9px;display:grid;place-items:center;border:1px solid #cad6ca;border-radius:50%;width:23px;height:23px;color:#7b8c7d}nav button.active{background:white;color:var(--green);border:1px solid #d6dfcd;box-shadow:0 2px 4px #172d2110}nav button.active span{background:var(--green);color:white}.side-bottom{margin-top:auto;padding-top:50px;font-size:9px;color:#7e8c80}.side-bottom small{display:block;line-height:1.8;margin-top:18px;font-size:9px}.live-dot{display:inline-block;width:5px;height:5px;background:#739c58;border-radius:50%}.stage{padding:30px 32px 20px;background:radial-gradient(ellipse at 50% 45%,#fff 0,#f0f3f0 75%);display:flex;flex-direction:column}.stage-top{display:flex;align-items:center;justify-content:space-between}.stage h2{font-size:29px;margin:7px 0}.pill{border:1px solid #d0dbcd;border-radius:20px;font-size:8px;letter-spacing:1px;padding:7px 11px;color:#72866a}.viewbar{display:flex;align-items:center;justify-content:space-between;margin:25px 0 0;gap:10px}.viewbar button{font-size:10px;padding:8px 11px}.segmented{display:flex;padding:3px;border:1px solid #dce2d9;border-radius:8px;background:#fff}.segmented button{border:0;background:transparent;padding:7px 12px}.segmented button.active{background:#eaf0e5;color:#214d38}#jerseys{display:flex;align-items:center;justify-content:center;gap:3%;flex:1;min-height:400px;padding:20px 0 0}#jerseys svg{width:48%;max-height:620px;filter:drop-shadow(0 13px 12px #12273b12)}#jerseys.single svg{width:84%;max-height:650px}#jerseys [data-panel]{cursor:pointer}#jerseys [data-panel]:hover{stroke:#8ba264;stroke-width:2}.view-labels{display:flex;justify-content:space-around;font-size:7px;letter-spacing:1.3px;color:#8d9893;padding:12px 0 24px}.stage-footer{display:flex;justify-content:space-between;align-items:center;color:#87948b;border-top:1px solid var(--line);padding:17px 0;font-size:9px;gap:8px}.stage-footer label{display:flex;align-items:center;gap:4px}.palette-strip{display:flex;gap:8px;align-items:center;padding-top:9px}.palette-strip>span{font-size:8px;letter-spacing:1.3px;margin-right:auto;color:#829085}.palette-strip button{font-size:9px;padding:7px 10px;display:flex;align-items:center;gap:6px}.palette-strip i{width:9px;height:9px;border-radius:50%}.controls{padding:32px 25px 20px;background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column}.control-head h2{font-size:28px;margin:10px 0}.control-head p{font-size:11px;color:#8b9591;margin:0 0 24px}#fields{display:grid;gap:13px}.field{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:500}input:not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fafcf9;color:var(--ink)}input[type=color]{border:0;background:transparent;width:35px;height:30px;padding:0;cursor:pointer}.color-row{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid #edf0eb}.color-row label{flex:1;font-size:11px}.hex{font-size:9px;font-family:monospace;color:#8b9591}.field small,.fine{font-size:10px;line-height:1.65;color:#8a9790;font-weight:400}.switch{display:flex;align-items:center;gap:8px;font-size:11px;padding:8px 0}.rule{font-size:10px;line-height:1.7;padding:12px;background:#f2f6ed;border-radius:6px;color:#78856b}.rule b{display:block;color:#40553c;margin-bottom:3px}.control-bottom{padding-top:24px;margin-top:auto}#hint{font-size:9px;color:#8c9790;text-align:center;margin-bottom:13px}.wide{width:100%;margin-bottom:5px}.control-bottom button{font-size:11px}footer{height:50px;border-top:1px solid var(--line);padding:0 30px;display:flex;align-items:center;gap:20px;font-size:8px;letter-spacing:1.5px;color:#8b978f}footer span{margin-right:auto;letter-spacing:0}footer button{font-size:9px;padding:5px 8px;border:0;background:transparent}dialog{border:1px solid var(--line);border-radius:15px;width:min(640px,94vw);max-height:92vh;padding:32px;color:var(--ink)}dialog::backdrop{background:#13292188;backdrop-filter:blur(4px)}dialog h2{font-size:35px}dialog>p{color:#7c8a81;font-size:12px;line-height:1.7}.close{position:absolute;top:14px;right:14px;border:0;font-size:22px;padding:3px 10px}dialog .field{margin:15px 0}.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}#checks{font-size:11px;line-height:1.8;padding:15px;background:#f2f6ee;border-radius:6px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;border-radius:8px;padding:13px 22px;opacity:0;pointer-events:none;transition:.2s;font-size:12px;z-index:10}#toast.show{opacity:1}.upload{border:1px dashed #b6c7b1;border-radius:8px;padding:13px;display:grid;gap:9px;font-size:11px}.upload input{font-size:10px;width:100%}.upload button{padding:6px;font-size:10px}.row{display:flex;gap:8px}.row>*{flex:1}input[type=range]{width:100%;accent-color:var(--green)}.tolerance{display:none}.tolerance.visible{display:block}.badge{font-size:9px;background:#eaf1df;color:#496436;padding:6px 9px;border-radius:5px;display:inline-block}@media(min-width:1550px){main{grid-template-columns:250px minmax(550px,1fr) 370px}.stage{padding:35px 50px}#jerseys svg{max-height:730px}.controls{padding:40px 35px}}@media(max-width:1100px){main{grid-template-columns:175px minmax(350px,1fr) 280px}.steps{padding:30px 17px}.stage{padding:25px 17px}.controls{padding:28px 18px}h1{font-size:40px}.header-note{font-size:8px}.palette-strip{flex-wrap:wrap}}@media(max-width:850px){header{padding:0 15px;height:72px}.header-note{display:none}.brand{margin-right:auto}.brand strong{font-size:23px}header button{font-size:10px;padding:9px}main{display:flex;flex-direction:column}.steps{padding:18px;border:0}.steps h1,.intro,.side-bottom,.steps>.eyebrow{display:none}nav{display:flex;overflow-x:auto;gap:2px}nav button{flex-shrink:0;font-size:10px;gap:5px;padding:8px}nav button span{width:20px;height:20px}.stage{padding:22px 18px}#jerseys{min-height:0}#jerseys svg{max-height:530px}.controls{border-left:0;border-top:1px solid var(--line);padding:25px}#fields{grid-template-columns:1fr 1fr;gap:18px}#fields>.rule,#fields>.upload{grid-column:1/-1}.control-bottom{max-width:400px;width:100%;align-self:center}.stage-footer{font-size:8px}.stage h2{font-size:26px}.pill{font-size:7px}.palette-strip{justify-content:center}.palette-strip>span{margin-right:0}.view-labels{font-size:6px}footer{height:auto;min-height:50px;padding:14px;flex-wrap:wrap;gap:10px}footer span{display:none}.export-grid{grid-template-columns:1fr}}@media print{body>*{display:none!important}body #review-dialog{display:block!important;position:static;max-height:none;width:100%;border:0}#review-dialog button,#review-dialog .field,#review-dialog .export-grid{display:none}#review-dialog .print-proof{display:block!important}dialog::backdrop{display:none}}

#jerseys svg{height:auto}@media(min-width:851px){main{height:calc(100vh - 136px);min-height:720px}.controls{overflow-y:auto}.stage{min-height:0}#jerseys{min-height:0}.steps{min-height:0}}

.color-row input.hex{width:75px!important;padding:6px 2px!important;border:0!important;background:transparent!important;text-align:right;font:10px monospace!important;color:#71827a!important}.color-row label{min-width:0}
@media(min-width:851px){main{grid-template-columns:190px minmax(440px,1fr) 310px}.stage{padding-left:24px;padding-right:24px}}

.color-row input.hex{flex:0 0 75px!important;min-width:0!important;max-width:75px!important}.color-row{min-width:0}.color-row input[type=color]{flex:0 0 31px}.color-row label{flex:1}

.stripe-section{margin-top:24px;padding-top:20px;border-top:1px solid #dce3dd}.stripe-section h3{font-size:18px;margin:0 0 8px}.stripe-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.stripe-option{font-size:11px;text-align:left;padding:9px;border:1px solid #d4ddd6;border-radius:8px;background:#fff}.stripe-option.selected{border:2px solid #174e43;background:#f1f6f1}.stripe-swatch{height:26px;display:flex;flex-direction:column;overflow:hidden;border-radius:3px;background:#214fba;margin-bottom:7px}.stripe-swatch i{display:block;min-height:1px}
.logo-orientation{margin:14px 0;padding-top:12px;border-top:1px solid #dce3dd}.logo-orientation .switch{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:12px;line-height:1.4}.logo-orientation .field{font-size:12px}

/* Modern frosted toggles */
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;position:relative;margin:0;min-height:44px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.85);color:#143f37;font-size:12px;font-weight:600;line-height:1.35}
.toggle input[type=checkbox]{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;pointer-events:none}
.toggle-track{position:relative;flex:0 0 46px;width:46px;height:28px;border-radius:999px;background:rgba(18,63,56,.18);border:1px solid rgba(18,63,56,.16);box-shadow:inset 0 1px 3px rgba(18,40,32,.12);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.toggle-thumb{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,#fff,#f3f7f2);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 10px rgba(18,45,38,.18),inset 0 1px 0 #fff;transition:transform .2s ease}
.toggle input:checked + .toggle-track{background:linear-gradient(180deg,#1c564b,#123f38);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 14px rgba(18,63,56,.22)}
.toggle input:checked + .toggle-track .toggle-thumb{transform:translateX(18px)}
.toggle input:focus-visible + .toggle-track{outline:3px solid #8eaa62;outline-offset:2px}
.toggle.is-disabled,.toggle:has(input:disabled){opacity:.55;cursor:not-allowed}
.toggle-label{flex:1;min-width:0}
.toggle.stage-toggle{background:transparent;border:0;box-shadow:none;padding:0;min-height:0;font-size:11px;font-weight:500;color:#5f7269}
.toggle.stage-toggle .toggle-track{flex-basis:40px;width:40px;height:24px}
.toggle.stage-toggle .toggle-thumb{width:18px;height:18px}
.toggle.stage-toggle input:checked + .toggle-track .toggle-thumb{transform:translateX(16px)}
.studio .pants-row.toggle{display:flex!important;grid-template-columns:none!important;align-items:center!important;gap:12px!important}
.studio .switch.toggle{padding:8px 10px;margin:0}
@media(max-width:850px){.brand strong{font-size:22px}.brand span{margin-top:4px}}

/* Frosted glass studio */
.studio{min-height:100vh;padding:12px 14px 10px;background:radial-gradient(980px 520px at -8% -18%,rgba(200,226,123,.5),transparent 58%),radial-gradient(860px 480px at 108% -8%,rgba(146,196,184,.42),transparent 54%),radial-gradient(720px 420px at 50% 112%,rgba(232,240,220,.95),transparent 52%),linear-gradient(165deg,#e7f0e4 0%,#f7f8f4 46%,#e4eee8 100%);color:#182b32}
.studio header,.studio footer,.studio .steps,.studio .stage,.studio .controls{background:rgba(255,255,255,.52);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.72);box-shadow:0 16px 40px rgba(18,45,38,.06),inset 0 1px 0 rgba(255,255,255,.88)}
.studio header{height:68px;border-radius:18px;position:sticky;top:12px;z-index:6}
.studio footer{height:auto;min-height:46px;margin-top:12px;border-radius:16px;font-size:11px;letter-spacing:.06em}
.studio main{gap:12px;margin-top:12px}
.studio .steps,.studio .stage,.studio .controls{border-radius:22px}
.studio .steps{border-right:1px solid rgba(255,255,255,.72)}
.studio .controls{border-left:1px solid rgba(255,255,255,.72)}
.studio .steps h1.page-glass__title,.studio .stage h2.page-glass__title,.studio .controls h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:600;letter-spacing:0;line-height:1.05}
.studio .steps h1.page-glass__title{font-size:clamp(.95rem,.75rem + .9vw,1.45rem);margin:8px 0 6px}
.studio .stage h2.page-glass__title,.studio .controls h2{font-size:clamp(1rem,.85rem + .4vw,1.35rem);margin:2px 0 6px}
.studio .intro,.studio .control-head p,.studio #pants-step-description{font-size:12px;line-height:1.5;color:#5e726c}
.studio .intro{margin:6px 0 18px}
.studio button{border-radius:12px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(18,40,32,.05);min-height:40px}
.studio button:hover{background:rgba(255,255,255,.82);border-color:rgba(255,255,255,.95)}
.studio button.primary{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 40%),linear-gradient(180deg,#1c564b,#123f38);color:#fff;border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px rgba(18,63,56,.24)}
.studio button.primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%),linear-gradient(180deg,#24685b,#174e43);color:#fff}
.studio button.quiet{background:transparent;border-color:transparent;box-shadow:none}
.studio nav{gap:6px}
.studio nav button{border-radius:14px;background:transparent;box-shadow:none;border-color:transparent;min-height:44px}
.studio nav button span{background:rgba(255,255,255,.9);border-color:rgba(18,63,56,.22);color:#24574c}
.studio nav button.active{background:rgba(255,255,255,.78);color:#123f38;border-color:rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(18,45,38,.08)}
.studio nav button.active span{background:#123f38;color:#fff;border-color:#123f38}
.studio .segmented,.studio .product-links{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff}
.studio .segmented button,.studio .product-links a{border:0!important;background:transparent;box-shadow:none;border-radius:10px;min-height:34px;color:#19443c;text-decoration:none;font-size:12px;font-weight:600;padding:8px 12px;display:inline-flex;align-items:center}
.studio .segmented button.active,.studio .product-links a.active{background:linear-gradient(180deg,#1c564b,#123f38)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px rgba(18,63,56,.18)}
.studio .pill{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.85);border-radius:999px;padding:7px 12px}
.studio .view-labels{font-size:11px;letter-spacing:.02em;color:#5d726b;text-transform:none}
.studio .stage-footer{border-top-color:rgba(18,63,56,.08);font-size:12px}
.studio .palette-strip button{border-radius:999px}
.studio #fields{display:flex;flex-direction:column;gap:12px}
.studio .glass-card{background:rgba(255,255,255,.46);border:1px solid rgba(255,255,255,.78);border-radius:16px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 18px rgba(18,45,38,.04)}
.studio .glass-card + .glass-card{margin-top:0}
.studio .pants-layout .glass-card{margin-bottom:12px}
.studio .glass-card__head h3,.studio .glass-card > h3,.studio .glass-card h3{font-family:'Barlow Condensed',Impact,sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:.01em;line-height:1.1;margin:0 0 4px;color:#143f37}
.studio .glass-card__head p,.studio .glass-card > p:first-of-type{margin:0;font-size:12px;line-height:1.45;color:#5e726c;font-weight:400}
.studio .glass-card__body{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.studio .glass-card__body:empty{display:none}
.studio .step-note,.studio .rule{background:rgba(200,226,123,.28);border:1px solid rgba(255,255,255,.65);border-radius:12px;color:#3e5348;font-size:12px;line-height:1.5;padding:10px 12px}
.studio .glass-card .stripe-section{margin:2px 0 0;padding:12px 0 0;border:0;border-top:1px solid rgba(18,63,56,.1)}
.studio .stripe-section h3{font-size:1rem}
.studio .stripe-option{background:rgba(255,255,255,.58);border-radius:12px;min-height:74px}
.studio .stripe-option.selected{border:1px solid #174e43;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px #174e43}
.studio .upload{border:1px dashed rgba(23,78,67,.38);border-radius:14px;background:rgba(255,255,255,.38)}
.studio input:not([type=checkbox]):not([type=range]):not([type=color]),.studio select,.studio textarea{border-radius:12px;border:1px solid rgba(190,206,190,.9);background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff;min-height:42px}
.studio .pants-row{margin:0 0 8px!important;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.72);min-height:44px}
.studio .pants-layout .viewbar{background:transparent!important}
.studio dialog{background:rgba(248,251,246,.88);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);border-radius:22px;border:1px solid rgba(255,255,255,.78);box-shadow:0 28px 70px rgba(16,40,34,.28),inset 0 1px 0 #fff}
.studio dialog h2{font-size:clamp(1.05rem,.9rem + .45vw,1.4rem)}
.studio #checks{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);border-radius:12px}
.studio #toast{border-radius:999px;background:rgba(18,63,56,.92);backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(18,63,56,.28)}
@media(min-width:851px){.studio main{height:calc(100vh - 152px);min-height:640px}}
@media(max-width:850px){.studio{padding:8px}.studio header{height:auto;min-height:64px;flex-wrap:wrap;padding:8px 10px;gap:8px;position:static}.studio main{height:auto;min-height:0}.studio #fields{display:flex}.studio .controls{border-left:0}.studio .steps{border-right:0}.studio .view-labels{font-size:10px}}