:root{--bg:#080a0d;--panel:#101318;--panel2:#15191f;--line:#242a32;--text:#f2f2ee;--muted:#9098a3;--red:#dc2027;--radius:16px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-height:100vh;background:radial-gradient(circle at 65% 10%,#1c2025 0,transparent 28%),linear-gradient(135deg,#090b0e,#0d1014 65%,#08090b);color:var(--text)}button{font:inherit;color:inherit}.topbar{height:76px;padding:0 3vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#090b0ee8;backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand img{width:118px;height:56px;object-fit:contain;filter:contrast(1.08)}.brand span{display:flex;flex-direction:column;line-height:1}.brand small{color:var(--muted);font-size:8px;letter-spacing:.22em}.header-actions{display:flex;gap:8px}.ghost,.primary{height:38px;padding:0 15px;border-radius:9px;border:1px solid var(--line);background:#13171c;cursor:pointer}.ghost:hover{border-color:#515963}.primary{background:var(--red);border-color:var(--red);font-weight:700}main{width:min(1600px,96vw);margin:0 auto;padding:30px 0 50px}.intro{display:flex;justify-content:space-between;align-items:end;padding:0 8px 24px}.eyebrow{color:#7f8790;font-size:10px;text-transform:uppercase;letter-spacing:.22em}.intro h1{font-size:clamp(28px,3.2vw,52px);margin:8px 0 4px;letter-spacing:-.045em}.intro p{margin:0;color:var(--muted)}.platform-switch,.segmented{display:flex;background:#0e1115;border:1px solid var(--line);border-radius:12px;padding:4px}.platform-switch button,.segmented button{border:0;background:transparent;border-radius:8px;padding:11px 24px;color:var(--muted);font-weight:700;cursor:pointer}.platform-switch button.active,.segmented button.active{background:#272d34;color:white;box-shadow:0 1px 0 #424952 inset}.parts{display:flex;gap:7px;padding:10px 4px;overflow:auto;scrollbar-width:none}.part-btn{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 14px;border-radius:10px;background:#0d1014;border:1px solid var(--line);color:#a7adb5;cursor:pointer}.part-btn .part-icon{font-size:10px;color:#58616d}.part-btn.active{color:white;border-color:#ad2b30;background:#291316}.part-btn.active .part-icon{color:#f23d44}.workspace{display:grid;grid-template-columns:220px minmax(0,1fr) 250px;gap:12px;align-items:stretch}.palette-panel,.summary-panel,.viewer-card{background:linear-gradient(145deg,#12161b,#0d1014);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.panel-title{height:55px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;text-transform:uppercase;letter-spacing:.13em;font-weight:800;font-size:10px;border-bottom:1px solid var(--line)}.panel-title button{display:none}.family{padding:14px 14px 4px}.family-title{font-size:10px;color:#7f8791;text-transform:uppercase;letter-spacing:.14em;margin-bottom:9px}.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.swatch{aspect-ratio:1;border-radius:8px;border:2px solid transparent;box-shadow:0 0 0 1px #ffffff15 inset;cursor:pointer;position:relative}.swatch:hover,.swatch.active{border-color:white;transform:translateY(-1px)}.swatch.active:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;font-weight:900;text-shadow:0 1px 4px black}.viewer-card{min-width:0}.viewer-toolbar{height:58px;padding:0 13px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.segmented button{padding:7px 16px;font-size:11px}.viewer-actions{display:flex;align-items:center;gap:8px}.chip,.icon-btn{border:1px solid var(--line);background:#15191e;border-radius:8px;padding:7px 10px;font-size:10px;color:#b4bac1;cursor:pointer}.icon-btn{font-size:16px;padding:2px;width:30px;height:30px}.viewer-actions span{font-size:10px;color:#777f89;width:34px;text-align:center}.canvas-wrap{height:clamp(390px,43vw,620px);position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#20262d 0,#11151a 48%,#0b0e12 75%);touch-action:none}.canvas-wrap:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(circle,#000 10%,transparent 72%)}#firearm{width:100%;height:100%;overflow:visible;transition:transform .2s ease;filter:drop-shadow(0 35px 25px #000b)}.platform-label{position:absolute;left:18px;top:16px;font-size:9px;letter-spacing:.18em;color:#6d7680}.hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:10px;color:#777f88;border:1px solid #303741;background:#0b0e12c9;padding:7px 12px;border-radius:30px}.length-row{min-height:75px;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-top:1px solid var(--line)}.length-row>div:first-child{display:flex;flex-direction:column;gap:4px}.length-options{display:flex;gap:7px}.length-options button{width:46px;height:38px;border:1px solid var(--line);background:#12161b;border-radius:8px;font-size:11px;cursor:pointer}.length-options button.active{background:var(--red);border-color:var(--red);font-weight:800}.status-dot{color:#5ce88b;font-size:8px}.summary-platform{padding:18px 16px;display:flex;flex-direction:column;border-bottom:1px solid var(--line)}.summary-platform span{font-weight:900;font-size:20px}.summary-platform small{color:var(--muted);letter-spacing:.17em;margin-top:4px}.summary-row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid #1b2026;font-size:11px}.summary-row span:first-child{color:#8c949d}.summary-value{display:flex;align-items:center;gap:7px}.summary-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px #fff3}.reset{display:block;width:calc(100% - 28px);margin:16px 14px 10px;padding:10px;border:1px solid #363d46;background:transparent;border-radius:9px;font-size:10px;cursor:pointer}.legal{font-size:9px;line-height:1.45;color:#666f79;margin:14px}.toast{position:fixed;left:50%;bottom:28px;z-index:40;transform:translate(-50%,20px);opacity:0;background:#f4f4ef;color:#111;padding:11px 18px;border-radius:10px;font-size:12px;font-weight:700;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.firearm-part{cursor:pointer;transition:filter .15s,opacity .15s}.firearm-part:hover{filter:drop-shadow(0 0 4px #a8ffbd)}.firearm-part.selected{filter:drop-shadow(0 0 7px #43f078) drop-shadow(0 0 2px #d9ffe4)}.clean .hotspot{display:none}.clean .firearm-part:hover,.clean .firearm-part.selected{filter:none}.fixed-accessory{fill:#0a0b0d;stroke:#343a42;stroke-width:2}.detail-line{fill:none;stroke:#5b626b;stroke-width:2;opacity:.65}.brand-mark{fill:#e3222b}.slot{fill:#090b0e;stroke:#424951;stroke-width:1}
.photo-base{pointer-events:none}.photo-zone{mix-blend-mode:normal;stroke:transparent;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.photo-zone:hover{stroke:#9fffb9;stroke-opacity:.72}.photo-zone.selected{stroke:transparent;stroke-opacity:0}.photo-zone path{pointer-events:visiblePainted}.selected-photo-blur{pointer-events:none;opacity:.95}.photo-logo{pointer-events:none;opacity:.34;mix-blend-mode:screen;filter:grayscale(1) contrast(1.25) drop-shadow(0 1px 0 #ffffff35) drop-shadow(0 -1px 0 #000)}.handguard-endcap{pointer-events:none}.clean .photo-zone{pointer-events:none}.clean .photo-zone path{opacity:0!important}.clean .selected-photo-blur,.clean .photo-logo{display:none}
.photo-logo.printed-logo{opacity:.96;mix-blend-mode:normal;filter:brightness(0) invert(1)}
@media(max-width:1100px){.workspace{grid-template-columns:190px minmax(0,1fr)}.summary-panel{grid-column:1/-1}.summary-panel #summaryRows{display:grid;grid-template-columns:repeat(3,1fr)}.legal{max-width:700px}.canvas-wrap{height:50vw}}
@media(max-width:760px){.topbar{height:64px;padding:0 14px}.brand img{width:40px;height:40px}.brand strong{font-size:11px}.brand small{font-size:7px}.labeled{font-size:0;width:38px;padding:0}.labeled:before{font-size:15px}.header-actions #saveBtn:before{content:'▣'}.header-actions #shareBtn:before{content:'↗'}.header-actions #downloadBtn:before{content:'↓'}.intro{align-items:start;gap:18px;flex-direction:column}.intro p{font-size:13px}.platform-switch{width:100%}.platform-switch button{flex:1}.workspace{display:flex;flex-direction:column}.viewer-card{order:1}.palette-panel{order:2}.summary-panel{order:3}.palette-panel #palette{display:grid;grid-template-columns:repeat(2,1fr)}.canvas-wrap{height:57vw;min-height:300px}.length-row{align-items:flex-start;gap:14px;flex-direction:column}.viewer-toolbar{gap:8px}.chip{display:none}.summary-panel #summaryRows{grid-template-columns:repeat(2,1fr)}.part-btn{padding:9px 12px}.intro h1{font-size:34px}}
@media(max-width:480px){main{width:100%;padding:22px 10px 40px}.intro{padding:0 4px 15px}.brand span{display:none}.ghost{display:none}.header-actions .labeled{display:block}.canvas-wrap{height:86vw;min-height:320px}.viewer-card{border-radius:12px}#firearm{width:120%;margin-left:-10%}.palette-panel #palette{grid-template-columns:1fr}.summary-panel #summaryRows{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(5,34px)}.length-options{width:100%}.length-options button{flex:1}.segmented button{padding:7px 11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.workspace{grid-template-columns:minmax(0,1fr) 250px}
.palette-popover{position:fixed;z-index:60;left:50%;top:50%;width:min(680px,calc(100vw - 32px));max-height:min(650px,82vh);overflow:auto;transform:translate(-50%,-46%) scale(.97);opacity:0;visibility:hidden;pointer-events:none;background:#101419f5;border:1px solid #39414b;border-radius:16px;box-shadow:0 30px 100px #000c;backdrop-filter:blur(18px);transition:.18s}
.palette-popover.open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.palette-popover .panel-title{position:sticky;top:0;z-index:2;background:#11151a}
.palette-popover .panel-title button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#181d23;cursor:pointer}
.palette-popover #palette{display:grid;grid-template-columns:repeat(2,1fr);padding-bottom:16px}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr)}.summary-panel{grid-column:1/-1}}
@media(max-width:760px){.palette-popover{top:auto;bottom:0;max-height:72vh;transform:translate(-50%,100%);width:100%;border-radius:18px 18px 0 0}.palette-popover.open{transform:translate(-50%,0)}.palette-popover #palette{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.palette-popover #palette{grid-template-columns:1fr}}
.viewer-primary-controls{display:flex;align-items:center;gap:10px;min-width:0}.length-compact{display:flex;align-items:center;gap:8px}.length-compact>span{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#7f8791}.length-compact .length-options{display:flex;gap:4px}.length-compact .length-options button{width:38px;height:31px;font-size:10px}.viewer-primary-controls .segmented{flex:0 0 auto}
@media(max-width:760px){.viewer-toolbar{height:auto;min-height:58px;padding:8px;align-items:flex-start}.viewer-primary-controls{align-items:flex-start;flex-direction:column;gap:6px}.length-compact>span{display:none}.length-compact .length-options button{width:37px}.viewer-actions{padding-top:3px}}

/* Light product-studio theme and refined finish selector */
:root{color-scheme:light;--bg:#eef0f2;--panel:#fff;--panel2:#f7f8f9;--line:#d8dde2;--text:#20252a;--muted:#68717b}
html{background:var(--bg)}body{background:linear-gradient(145deg,#f8f9fa 0,#eceff1 58%,#f5f6f7 100%);color:var(--text)}
.topbar{background:#ffffffed;border-color:#d9dde1;box-shadow:0 1px 10px #28323d0b}.brand small{color:#68717b}.ghost{background:#f6f7f8;border-color:#d7dce1;color:#30363c}.ghost:hover{background:#eceff1;border-color:#bbc3ca}.intro p,.eyebrow{color:#69727b}
.platform-switch,.segmented{background:#e9edf0;border-color:#d5dade}.platform-switch button,.segmented button{color:#69727a}.platform-switch button.active,.segmented button.active{background:#fff;color:#1f252a;box-shadow:0 1px 3px #1e29331f}
.summary-panel,.viewer-card{background:#fff;border-color:#d8dde2;box-shadow:0 8px 28px #36404a0d}.viewer-toolbar,.panel-title{border-color:#dfe3e7}.chip,.icon-btn{background:#f5f7f8;border-color:#d7dce1;color:#49515a}.canvas-wrap{background:radial-gradient(ellipse at center,#fff 0,#f2f4f5 58%,#e7eaed 100%)}.canvas-wrap:before{background-image:linear-gradient(#1d252c0a 1px,transparent 1px),linear-gradient(90deg,#1d252c0a 1px,transparent 1px)}.platform-label{color:#727c85}.hint{color:#505961;border-color:#d5dade;background:#fffffff0;box-shadow:0 4px 15px #2b35400f}.length-compact .length-options button,.length-options button{background:#f5f7f8;border-color:#d7dce1;color:#4b535b}.length-options button.active{background:#d8242b;border-color:#d8242b;color:#fff}.summary-row{border-color:#e5e8eb}.summary-row span:first-child{color:#6d7680}.summary-dot{box-shadow:0 0 0 1px #20283026}.reset{border-color:#cfd5da;color:#3e464e}.legal{color:#7c858e}.viewer-actions span{color:#66707a}
.palette-backdrop{position:fixed;inset:0;z-index:55;background:#20283052;backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.18s}.palette-backdrop.open{opacity:1;visibility:visible}
.photo-part-tint{opacity:.78;mix-blend-mode:color;pointer-events:none;transition:opacity .16s,filter .16s}.photo-part-tint.is-camo{opacity:1}.photo-part-lift{fill:#cfd4d8;opacity:.48;mix-blend-mode:screen;pointer-events:none}.photo-zone-wrap:has(.photo-part-path-hit:hover) .photo-part-tint{opacity:.94;filter:brightness(1.32)}.photo-part-tint.selected{opacity:.92;filter:brightness(1.4) saturate(1.2)}.photo-part-path-hit{fill:#fff;fill-opacity:.001;stroke:none;cursor:pointer;pointer-events:visiblePainted}.photo-part-hit{fill:transparent;cursor:pointer;pointer-events:all}.complete-rifle-model{overflow:visible}
.palette-popover{z-index:60;width:min(840px,calc(100vw - 36px));max-height:min(720px,84vh);background:#f8f9fa;border:1px solid #cfd5da;border-radius:20px;box-shadow:0 28px 90px #20283042;color:#20252a}
.palette-header{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:20px 22px 18px;background:#fffffff5;border-bottom:1px solid #dde2e6;backdrop-filter:blur(14px)}.palette-header>div{display:flex;flex-direction:column;gap:4px}.palette-header strong{font-size:21px;letter-spacing:-.025em}.palette-header small{font-size:12px;color:#737c85}.palette-header button{display:grid;place-items:center;width:36px;height:36px;border:1px solid #d4dae0;border-radius:10px;background:#f3f5f6;color:#30363c;font-size:20px;cursor:pointer}.palette-header button:hover{background:#e9edf0}
.palette-popover #palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:6px 12px 18px}.palette-popover .family{padding:15px 12px;border-bottom:1px solid #e2e6e9}.palette-popover .family-title{color:#69727b;font-weight:800;margin-bottom:10px}.palette-popover .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.palette-popover .swatch{min-width:0;aspect-ratio:auto;height:42px;display:flex;align-items:center;gap:9px;padding:6px 34px 6px 7px;border:1px solid #d9dee3;border-radius:10px;background:#fff;color:#353c43;box-shadow:0 1px 2px #28323c0b;transform:none;text-align:left}.palette-popover .swatch:hover{border-color:#aeb7bf;background:#f8fafb;transform:translateY(-1px)}.palette-popover .swatch i{display:block;flex:0 0 28px;width:28px;height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px #00000017}.palette-popover .swatch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650}.palette-popover .swatch.active{border-color:#d8242b;box-shadow:0 0 0 2px #d8242b20}.palette-popover .swatch.active:after{content:'✓';inset:auto 11px auto auto;display:block;color:#d8242b;text-shadow:none;font-size:14px}
.toast{background:#20262c;color:#fff;box-shadow:0 8px 30px #20283030}
@media(max-width:760px){.palette-popover{background:#f8f9fa}.palette-popover #palette{grid-template-columns:1fr}.palette-header{padding:16px}.palette-header strong{font-size:18px}}
@media(max-width:480px){.palette-popover .swatches{grid-template-columns:1fr}.palette-popover .family{padding:13px 8px}}

/* Direct-manipulation model panning */
.canvas-wrap{cursor:grab}
.canvas-wrap.panning{cursor:grabbing}
.canvas-wrap:before{pointer-events:none}
#firearm{transform-origin:center;user-select:none}
.canvas-wrap.panning #firearm{transition:none}
.placement-tools{position:absolute;z-index:6;top:12px;right:12px;display:none;align-items:center;gap:5px;padding:7px;border:1px solid #d5dbe0;border-radius:11px;background:#fffffff2;box-shadow:0 8px 24px #27313b1a;backdrop-filter:blur(12px)}
.placement-tools.open{display:flex}.placement-tools span{padding:0 5px;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6c757e}.placement-tools button{padding:7px 9px;border:1px solid #d7dce1;border-radius:7px;background:#f5f7f8;color:#48515a;font-size:10px;cursor:pointer}.placement-tools button.active{background:#252b31;border-color:#252b31;color:#fff}.placement-tools button:disabled{opacity:.4;cursor:not-allowed}.placement-tools #resetPartPosition{color:#b52027}
#positionBtn.active{background:#252b31;border-color:#252b31;color:#fff}.position-mode .photo-zone{pointer-events:none}.position-mode .positionable{cursor:move;pointer-events:all}.position-mode .positionable.placement-active{filter:drop-shadow(0 0 5px #d8242b) drop-shadow(0 0 2px #fff)}.canvas-wrap.moving-part{cursor:grabbing}.canvas-wrap.moving-part #firearm{transition:none}
@media(max-width:760px){.placement-tools{left:8px;right:8px;top:10px;overflow-x:auto}.placement-tools span{display:none}.placement-tools button{white-space:nowrap}}