*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0c11;--surface:#0f141a;--surface-2:#151b22;--line:#20272f;--text:#d7dee6;--text-dim:#7e8a97;--accent:#4cc1d8;--accent-dim:#2f86a6;--accent-glow:#4cc1d847;--font-display:"Chakra Petch", "Rajdhani", system-ui, sans-serif;--font-ui:"Rajdhani", system-ui, -apple-system, sans-serif;--order-accent:var(--accent);--cta:#2563eb}.app{background:radial-gradient(120% 80% at 50% -10%, #45c2da0d, transparent 60%), var(--bg);height:100dvh;color:var(--text);font-family:var(--font-ui);flex-direction:column;display:flex}.app-header{border-bottom:1px solid var(--line);justify-content:flex-start;align-items:center;gap:16px;padding:12px 24px;display:flex;position:relative;box-shadow:0 1px #45c2da24}.logo{border-radius:6px;width:auto;height:50px;display:block}.app-header p{font-family:var(--font-display);color:var(--order-accent);text-shadow:0 0 9px var(--accent-glow);text-align:center;letter-spacing:.5px;margin:0;font-size:19px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.app-header .title-brand{color:#eef2f8;letter-spacing:.4px;font-size:.8em}.app-layout{flex:1;display:flex;overflow:hidden}.panel{background:var(--surface);border-right:1px solid var(--line);border-top:2px solid var(--accent-dim);flex-direction:column;flex:0 0 300px;gap:12px;width:300px;padding:12px 16px;display:flex;overflow-y:auto}.panel h2{border-left:2px solid var(--accent);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:1.2px;color:var(--accent);margin:0 0 6px;padding-left:9px;font-size:13.5px;font-weight:600}.upload-btn{text-align:center;cursor:pointer;color:var(--accent);border:2px dashed #383d45;border-radius:8px;padding:8px;font-size:13px;transition:border-color .2s;display:block}.upload-btn:hover{border-color:var(--accent)}.upload-btn.loaded{color:#cfe1fb;border-style:solid;border-color:#4d8ff0;font-weight:600}.upload-hint{color:#777;margin:6px 0 0;font-size:11px;line-height:1.4}.catalog{margin-top:12px}.catalog-label{text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin:0 0 6px;font-size:12px}.catalog-grid{grid-template-columns:repeat(3,1fr);gap:6px;max-height:290px;padding-right:4px;display:grid;overflow-y:auto}.catalog-grid::-webkit-scrollbar{width:8px}.catalog-grid::-webkit-scrollbar-thumb{background:#2c333c;border-radius:4px}.catalog-grid::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}.catalog-thumb{aspect-ratio:1;cursor:pointer;background:#1c1f25;border:2px solid #383d45;border-radius:6px;padding:0;transition:border-color .15s,box-shadow .15s;overflow:hidden}.catalog-thumb img{object-fit:cover;width:100%;height:100%;display:block}.catalog-thumb:hover{border-color:var(--accent)}.catalog-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px #45c2da80}.browse-catalog-btn{color:var(--accent);font-family:var(--font-ui);letter-spacing:.3px;cursor:pointer;background:#1c1f25;border:1px solid #383d45;border-radius:8px;margin-top:2px;padding:9px 10px;font-size:13px;font-weight:600;transition:border-color .15s,background .15s}.browse-catalog-btn:hover{border-color:var(--accent);background:#20242b}.design-gallery{z-index:30;background:radial-gradient(120% 80% at 50% -10%, #45c2da0f, transparent 60%), var(--bg);padding:36px 32px 48px;position:absolute;inset:0;overflow-y:auto}.dg-close{z-index:31;border:1px solid var(--line);width:32px;height:32px;color:var(--text);cursor:pointer;background:#14161bd9;border-radius:8px;font-size:14px;transition:border-color .15s,color .15s;position:absolute;top:12px;right:14px}.dg-close:hover{border-color:var(--accent);color:var(--accent)}.dg-inner{flex-direction:column;gap:12px;max-width:960px;margin:0 auto;display:flex}.dg-title{font-family:var(--font-display);color:var(--accent);text-align:center;text-shadow:0 0 12px var(--accent-glow);border:0;margin:0;padding:0;font-size:22px;font-weight:600}.dg-sub{text-align:center;color:var(--text-dim);margin:0;font-size:13.5px}.dg-upload{color:var(--accent);font-family:var(--font-ui);cursor:pointer;background:#4cc1d80f;border:2px dashed #3a4250;border-radius:10px;align-self:center;align-items:center;gap:8px;margin-top:2px;padding:10px 22px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s;display:inline-flex}.dg-upload:hover{border-color:var(--accent);background:#4cc1d81f}.dg-hint{text-align:center;max-width:560px;color:var(--text-dim);margin:0 auto 6px;font-size:11.5px;line-height:1.45}.dg-cat-label{text-align:center;font-family:var(--font-ui);letter-spacing:.5px;color:var(--accent);margin:10px 0 2px;font-size:14px;font-weight:600}.dg-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:4px;display:grid}.dg-thumb{aspect-ratio:1;cursor:pointer;background:#14171c;border:2px solid #2c333c;border-radius:10px;padding:0;transition:border-color .15s,box-shadow .15s,transform .1s;overflow:hidden}.dg-thumb img{object-fit:cover;width:100%;height:100%;display:block}.dg-thumb:hover{border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow);transform:translateY(-2px)}.dg-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px #45c2da8c}.tip-icon{color:#8b95a3;width:16px;height:16px;font-family:var(--font-display);vertical-align:middle;cursor:help;background:0 0;border:1px solid #4a5360;border-radius:50%;flex:none;justify-content:center;align-items:center;margin-left:5px;padding:0;font-size:10px;font-style:italic;font-weight:700;line-height:1;transition:border-color .15s,color .15s;display:inline-flex;position:relative}.tip-icon:hover,.tip-icon:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}.tip-icon:before{content:"";width:28px;height:28px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tip-bubble{z-index:60;border:1px solid var(--accent-dim);color:#d6dde6;max-width:260px;font-family:var(--font-ui);text-align:left;pointer-events:none;white-space:normal;background:#0f1318;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:500;line-height:1.4;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #0000008c}.tip-bubble.tip-above{transform:translate(-50%,-100%)}.upload-row{align-items:stretch;gap:8px;display:flex}.upload-row .upload-btn{flex:1}.icon-btn{color:#a6aeb7;cursor:pointer;background:0 0;border:2px dashed #383d45;border-radius:8px;flex:none;width:42px;font-size:18px;line-height:1;transition:border-color .2s}.icon-btn:hover{border-color:#a6aeb7}.upload-status{color:#a6aeb7;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;display:flex}.hourglass{display:inline-block}@keyframes hourglass-flip{0%,35%{transform:rotate(0)}50%,85%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.hourglass{animation:1.4s ease-in-out infinite hourglass-flip}.param-row{margin-bottom:12px}.param-row label{text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11.5px;display:flex}.param-label{color:#c4ccd6}.param-label.changed{color:#4d8ff0}.param-value{min-width:46px;color:var(--accent);text-align:right;background:#10151b;border:1px solid #2c3a42;border-radius:3px;padding:1px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;font-weight:700;transition:border-color .15s,box-shadow .15s}.param-row:hover .param-value{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}.param-value.changed{color:#4d8ff0}.param-row input[type=range]{appearance:none;cursor:pointer;background:#1b222a;border-radius:4px;width:100%;height:8px;margin:0;display:block;box-shadow:inset 0 1px 3px #000000b3}.param-row input[type=range]::-webkit-slider-thumb{appearance:none;background:linear-gradient(to right, transparent 46%, var(--accent) 46%, var(--accent) 54%, transparent 54%), linear-gradient(180deg, #39434f, #1a212a);cursor:pointer;border:1px solid #46535f;border-radius:4px;width:14px;height:26px;transition:border-color .15s,box-shadow .15s;box-shadow:0 2px 4px #00000080}.param-row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--accent);box-shadow:0 2px 5px #00000080, 0 0 11px var(--accent-glow)}.param-row input[type=range]:active::-webkit-slider-thumb{border-color:var(--accent);box-shadow:0 2px 5px #00000080, 0 0 18px var(--accent-glow)}.param-row input[type=range]::-moz-range-thumb{background:linear-gradient(to right, transparent 46%, var(--accent) 46%, var(--accent) 54%, transparent 54%), linear-gradient(180deg, #39434f, #1a212a);cursor:pointer;border:1px solid #46535f;border-radius:4px;width:14px;height:26px;transition:border-color .15s,box-shadow .15s;box-shadow:0 2px 4px #00000080}.param-row input[type=range]:hover::-moz-range-thumb{border-color:var(--accent);box-shadow:0 2px 5px #00000080, 0 0 11px var(--accent-glow)}.param-row input[type=range]::-moz-range-track{background:#1b222a;border-radius:4px;height:8px;box-shadow:inset 0 1px 3px #000000b3}.param-row input[type=range]::-moz-range-progress{background:var(--accent);border-radius:4px;height:8px}.param-row input[type=range].changed::-webkit-slider-thumb{background:linear-gradient(90deg,#0000 46%,#4d8ff0 46% 54%,#0000 54%),linear-gradient(#39434f,#1a212a)}.param-row input[type=range].changed::-moz-range-thumb{background:linear-gradient(90deg,#0000 46%,#4d8ff0 46% 54%,#0000 54%),linear-gradient(#39434f,#1a212a)}.param-row input[type=range].changed::-moz-range-progress{background:#4d8ff0}.generate-btn{color:#14161b;cursor:pointer;background:#a6aeb7;border:none;border-radius:8px;padding:14px;font-size:15px;font-weight:600;transition:opacity .2s}.generate-btn:hover:not(:disabled){opacity:.9}.generate-btn:disabled{opacity:.4;cursor:not-allowed}.error{color:#f87171;font-size:13px}.reset-btn{color:#a6aeb7;cursor:pointer;background:0 0;border:1px solid #383d45;border-radius:8px;padding:10px;font-size:13px;transition:border-color .2s,background .2s}.reset-btn:hover{background:#a6aeb714;border-color:#a6aeb7}.reset-btn.customized{color:#4d8ff0;border-color:#2f5b8f}.viewer{background:var(--bg);flex:1;position:relative;box-shadow:inset 0 0 0 1px #45c2da0f}.webgl-unsupported{background:radial-gradient(120% 80% at 50% -10%, #45c2da0f, transparent 60%), var(--bg);justify-content:center;align-items:center;padding:28px;display:flex;position:absolute;inset:0}.webgl-unsupported .wu-inner{text-align:center;border:1px solid var(--line);background:#ffffff04;border-radius:14px;max-width:460px;padding:34px 30px}.webgl-unsupported .wu-icon{margin-bottom:14px;font-size:40px;line-height:1}.webgl-unsupported h2{font-family:var(--font-display);color:var(--text);border:0;margin:0 0 12px;padding:0;font-size:20px;font-weight:600}.webgl-unsupported p{color:var(--text-dim);margin:0 0 10px;font-size:14px;line-height:1.5}.webgl-unsupported p:last-child{margin-bottom:0}.webgl-unsupported strong{color:var(--text);font-weight:600}.viewer-hint{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.upload-prompt{text-align:center;background:#ffffff04;border:2px dashed #353a42;border-radius:14px;flex-direction:column;align-items:center;gap:10px;max-width:460px;padding:34px 30px;transition:border-color .2s,background .2s;display:flex}.viewer-hint:hover .upload-prompt{border-color:var(--accent);background:#45c2da0d}.upload-prompt-mark{color:var(--accent);font-size:34px;line-height:1}.upload-prompt-title{color:#cfd4da;font-size:17px;font-weight:600}.upload-prompt-detail{color:#8a929b;font-size:12.5px;line-height:1.6}.upload-prompt-cta{letter-spacing:.3px;color:var(--accent);margin-top:4px;font-size:12px;font-weight:600}.viewer-loading{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;z-index:5;background:#0a0a0e8c;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.hourglass-lg{font-size:52px;animation:1.4s ease-in-out infinite hourglass-flip;display:inline-block}.viewer-loading-text{color:#e6e6ee;letter-spacing:.5px;font-size:16px}.check-row{color:#cfcfd6;cursor:pointer;align-items:center;gap:10px;margin-bottom:12px;font-size:14px;display:flex}.check-row input{accent-color:#4d8ff0;cursor:pointer;width:18px;height:18px}.hue-row{gap:6px;margin:-2px 0 0 24px;display:flex}.hue-btn{color:#aaa;cursor:pointer;background:#1c1f25;border:1px solid #353a42;border-radius:6px;flex:1;padding:4px 0;font-size:11px;transition:all .15s}.hue-btn:hover{border-color:#a6aeb7}.hue-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.bulb-note{color:#777;margin:6px 0 0 24px;font-size:11px;line-height:1.4}.order-section{border-top:1px solid #2a2e35;margin-top:4px;padding-top:14px}@keyframes cta-pulse{0%,to{box-shadow:0 6px 18px #00000080,0 0 #eef2f600}50%{box-shadow:0 6px 18px #00000080,0 0 22px 2px #eef2f680}}.order-btn{background:var(--cta);color:#fff;letter-spacing:.3px;cursor:pointer;border:none;border-radius:8px;width:100%;padding:15px;font-size:16px;font-weight:700;transition:transform .12s,box-shadow .12s,filter .12s,opacity .15s;animation:2.6s ease-in-out infinite cta-pulse;box-shadow:0 6px 18px #00000080}.order-btn:hover:not(:disabled){filter:brightness(.97);animation:none;transform:translateY(-1px);box-shadow:0 12px 26px #0000008c,0 0 28px 3px #eef2f699}.order-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 12px #00000080}.order-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;animation:none}.order-done{background:#45c2da12;border:1px solid #234b56;border-radius:8px;flex-direction:column;gap:8px;padding:12px;display:flex}.order-done-title{color:var(--order-accent);margin:0;font-size:15px;font-weight:700}.order-id{color:#e6e6ee;letter-spacing:.4px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.order-ref{color:#8a929c;letter-spacing:.3px;margin:2px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.order-fields{flex-direction:column;gap:8px;margin-bottom:10px;display:flex}.order-input{border:1px solid var(--line);color:var(--text);font-family:var(--font-ui);background:#1a1d23;border-radius:8px;padding:9px 11px;font-size:13px}.order-input:disabled{opacity:.55;cursor:not-allowed}.order-fields-note{color:#8a929c;margin:0;font-size:10.5px;line-height:1.4}.order-done-note{color:#9aa3ad;margin:0;font-size:11px;line-height:1.5}.order-done-note code{color:#cdd6e0;background:#1c1f25;border-radius:4px;padding:1px 4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}.order-panel{background:var(--surface);border-left:1px solid var(--line);border-top:2px solid var(--accent-dim);flex-direction:column;flex:0 0 300px;gap:12px;width:300px;padding:12px 16px;display:flex;overflow-y:auto}.order-panel h2{border-left:2px solid var(--accent);font-family:var(--font-ui);text-transform:uppercase;letter-spacing:1.2px;color:var(--order-accent);margin:0 0 6px;padding-left:9px;font-size:13.5px;font-weight:600}.order-empty{color:#777;margin:0;font-size:13px;line-height:1.5}.order-summary{flex-direction:column;display:flex}.summary-row{border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim);justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:11.5px;display:flex}.summary-row .summary-label{color:#c4ccd6}.summary-row .summary-label.changed{color:#4d8ff0}.summary-row .summary-val{color:#e6e6ee;text-transform:none;text-align:right;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600}.summary-row .summary-val.changed{color:#4d8ff0}.viewer-controls{z-index:6;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.vc-bar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14161bc7;border:1px solid #2a2e35;border-radius:10px;align-items:center;gap:14px;padding:8px 14px;display:flex;box-shadow:0 4px 16px #0000004d}.vc-toggle{color:#d4d4db;cursor:pointer;white-space:nowrap;align-items:center;gap:8px;font-size:13px;display:flex}.vc-toggle input{accent-color:#4d8ff0;cursor:pointer;width:20px;height:20px}.vc-watt{gap:6px;display:flex}.vc-watt-btn{color:#aaa;cursor:pointer;background:#1c1f25;border:1px solid #353a42;border-radius:6px;padding:3px 9px;font-size:11px;transition:all .15s}.vc-watt-btn:hover{border-color:#a6aeb7}.vc-watt-btn.active{color:#ebd8ab;border-color:var(--accent);background:#14110b;font-weight:600;box-shadow:0 0 8px #4cc1d859}.vc-sep{background:#353a42;width:1px;height:18px}.viewer-help{z-index:6;letter-spacing:.3px;color:#3f9cbd;text-align:center;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;margin:0;font-size:12px;font-weight:500;position:absolute;top:58px;left:50%;transform:translate(-50%)}.vc-note{z-index:6;text-align:center;color:#bcc3cc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14161bb8;border-radius:8px;width:max-content;max-width:min(760px,100% - 32px);margin:0;padding:8px 26px 8px 12px;font-size:11px;line-height:1.4;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.vc-note-x{color:#9aa3ad;cursor:pointer;background:0 0;border:none;width:22px;height:22px;padding:0;font-size:13px;line-height:1;position:absolute;top:3px;right:5px}.vc-note-x:hover{color:var(--accent)}.vc-note-show{z-index:6;color:#aab2bc;font-family:var(--font-ui);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#14161bc7;border:1px solid #2a2e35;border-radius:999px;padding:6px 14px;font-size:11.5px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.vc-note-show:hover{border-color:var(--accent);color:var(--accent)}.hud-frame{z-index:4;pointer-events:none;position:absolute;inset:0}.hud-frame:before,.hud-frame:after{content:"";opacity:.4;width:28px;height:28px;position:absolute}.hud-frame:before{border-top:2px solid var(--accent);border-left:2px solid var(--accent);top:12px;left:12px}.hud-frame:after{border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);bottom:12px;right:12px}@media (pointer:coarse){.param-row input[type=range]{height:10px}.param-row input[type=range]::-webkit-slider-thumb{width:24px;height:30px}.param-row input[type=range]::-moz-range-thumb{width:24px;height:30px}.param-row input[type=range]::-moz-range-track{height:10px}.param-row input[type=range]::-moz-range-progress{height:10px}.check-row,.vc-toggle{min-height:36px}.check-row input,.vc-toggle input{width:24px;height:24px}.vc-watt-btn{padding:8px 15px;font-size:13px}}.mobile-bar,.sheet-backdrop,.see-result-btn{display:none}@media (width<=900px){.app-layout{position:relative}.panel,.order-panel{z-index:45;border:none;border-top:1px solid var(--accent-dim);border-radius:16px 16px 0 0;flex:none;width:auto;max-width:none;max-height:82vh;padding-bottom:28px;transition:transform .3s;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(110%);box-shadow:0 -12px 32px #0000008c}.panel.sheet-open,.order-panel.sheet-open{transform:translateY(0)}.panel:before,.order-panel:before{content:"";background:#3a424d;border-radius:2px;width:40px;height:4px;margin:0 auto 12px;display:block}.sheet-backdrop{z-index:44;background:#00000080;display:block;position:fixed;inset:0}.mobile-bar{z-index:35;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);gap:8px;display:flex;position:fixed;bottom:0;left:0;right:0}.mb-btn{border:1px solid var(--line);color:var(--text);font-family:var(--font-ui);cursor:pointer;background:#1c1f25;border-radius:10px;flex:1;padding:13px 10px;font-size:14px;font-weight:600}.mb-btn.active{border-color:var(--accent);color:var(--accent)}.mb-order{background:var(--cta);border-color:var(--cta);color:#fff}.vc-note{bottom:78px}.design-gallery{padding-bottom:84px}.app-header{gap:10px;padding:8px 12px}.logo{height:38px}.app-header p{text-align:left;font-size:15px;line-height:1.15;position:static;top:auto;left:auto;transform:none}.viewer-controls{left:8px;right:8px;transform:none}.vc-bar{flex-wrap:wrap;justify-content:center;gap:7px 12px;max-width:100%;font-size:12px}.vc-sep,.viewer-help{display:none}.panel{padding-bottom:0}.see-result-btn{width:calc(100% + 32px);padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border:none;border-top:1px solid var(--accent-dim);background:var(--accent);color:#0d1014;font-family:var(--font-ui);letter-spacing:.3px;cursor:pointer;margin:10px -16px 0;font-size:15px;font-weight:700;display:block;position:sticky;bottom:0}.see-result-btn:active{background:var(--accent-dim)}}