:root{--bg: #0a0d0a;--bg-2: #10150f;--panel: #141a12;--panel-2: #1a2118;--line: #2a3326;--line-bright: #3c4a35;--green: #c8ff00;--green-dim: #9dcc00;--cyan: #38e0d0;--text: #f2f5ef;--muted: #9aa694;--muted-2: #6f7a68;--danger: #ff5a52;--warn: #ffcc33;--radius: 4px;--chamfer: 10px;--maxw: 560px;--footer-h: 84px;font-synthesis:none;-webkit-text-size-adjust:100%}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background-color:var(--bg);background-image:linear-gradient(rgba(200,255,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,.03) 1px,transparent 1px);background-size:28px 28px;color:var(--text);font-family:Inter,system-ui,-apple-system,Noto Sans TC,PingFang HK,Microsoft JhengHei,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}#root{max-width:var(--maxw);margin:0 auto;min-height:100vh;position:relative}h1,h2,h3{line-height:1.2;margin:0 0 .4em;letter-spacing:.01em}h1{font-size:1.7rem;font-weight:800}h2{font-size:1.25rem;font-weight:700}h3{font-size:1.02rem;font-weight:700}p{margin:0 0 .8em}a{color:var(--cyan)}small{font-size:.8rem}.mono{font-family:JetBrains Mono,ui-monospace,SF Mono,Menlo,Consolas,monospace;letter-spacing:.02em}.muted{color:var(--muted)}.green{color:var(--green)}.cyan{color:var(--cyan)}.center{text-align:center}.screen{padding:16px 16px calc(var(--footer-h) + 28px);animation:fade .25s ease}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.section{margin:22px 0}.section-label{display:flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-dim);margin-bottom:12px}.section-label:before{content:"";width:14px;height:2px;background:var(--green);box-shadow:0 0 8px var(--green)}.card{position:relative;background:var(--panel);border:1px solid var(--line);clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));padding:14px;margin-bottom:12px}.card.selected{border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 0 18px #c8ff001f}.hud{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#141a12e6,#0a0d0a99);position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hud .brand{font-weight:800;letter-spacing:.04em;font-size:.95rem}.hud .brand b{color:var(--green)}.hud .tag{font-size:.68rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}.steps{display:flex;gap:6px;padding:10px 16px 0}.steps .step{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}.steps .step.done{background:var(--green-dim)}.steps .step.active{background:var(--green);box-shadow:0 0 10px #c8ff0080}.banner{border:1px dashed var(--warn);background:#ffcc3314;color:var(--warn);font-size:.82rem;padding:8px 12px;border-radius:var(--radius);margin:12px 16px}.notice{border-left:3px solid var(--cyan);background:#38e0d00f;padding:8px 12px;font-size:.85rem;color:#cfeee9;border-radius:2px}.pricewarn{display:inline-block;font-size:.66rem;letter-spacing:.08em;color:var(--warn);border:1px solid rgba(255,204,51,.5);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:middle}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:1rem;color:var(--bg);background:var(--green);border:none;padding:14px 20px;cursor:pointer;width:100%;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);transition:filter .15s,transform .05s;letter-spacing:.02em}.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}.btn:disabled{background:var(--line-bright);color:var(--muted-2);cursor:not-allowed;filter:none}.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--line-bright)}.btn.ghost:disabled{color:var(--muted-2);border-color:var(--line);background:transparent}.btn.small{width:auto;padding:9px 14px;font-size:.85rem}.btn.cyan{background:var(--cyan)}.btn-row{display:flex;gap:10px}.qty{display:inline-flex;align-items:center;border:1px solid var(--line-bright);border-radius:var(--radius);overflow:hidden}.qty button{width:40px;height:40px;background:var(--panel-2);color:var(--green);border:none;font-size:1.3rem;font-weight:700;cursor:pointer;line-height:1}.qty button:disabled{color:var(--muted-2);cursor:not-allowed}.qty button:active{background:var(--line)}.qty .n{min-width:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.swatch-row{display:flex;flex-direction:column;gap:10px;margin-top:10px}.swatch{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}.swatch .dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-bright);flex:none}.swatch .cname{font-weight:700;flex:1}.swatch .hivis-tag{font-size:.62rem;color:var(--bg);background:var(--green);padding:1px 5px;border-radius:3px;font-weight:800;letter-spacing:.05em}.price{color:var(--green);font-weight:800;font-variant-numeric:tabular-nums}.price.lg{font-size:1.35rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b8;z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease}.modal{background:var(--bg-2);border:1px solid var(--line-bright);border-bottom:none;width:100%;max-width:var(--maxw);max-height:88vh;overflow-y:auto;padding:18px 16px 28px;border-radius:12px 12px 0 0;animation:slideup .25s ease}@keyframes slideup{0%{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}.modal .close{position:sticky;top:0;float:right;background:var(--panel-2);border:1px solid var(--line-bright);color:var(--text);width:34px;height:34px;border-radius:50%;font-size:1.1rem;cursor:pointer}.spec-list{list-style:none;padding:0;margin:8px 0}.spec-list li{padding:7px 0 7px 18px;border-bottom:1px dashed var(--line);position:relative;font-size:.9rem}.spec-list li:before{content:"▸";color:var(--green);position:absolute;left:0}.img-ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 12px,var(--panel-2) 12px,var(--panel-2) 24px);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--muted-2);font-size:.8rem;text-align:center;padding:10px}.helmet-ph{aspect-ratio:1/1;width:72px;border-radius:50%;border:3px solid var(--line-bright);flex:none;box-shadow:inset 0 -8px 14px #0006}.prow{display:flex;gap:12px;align-items:flex-start}.prow .body{flex:1;min-width:0}.prow h3{margin-bottom:2px}.linkbtn{background:none;border:none;color:var(--cyan);padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}.footer-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--maxw);background:linear-gradient(180deg,rgba(16,21,15,.85),var(--bg));border-top:1px solid var(--line-bright);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;gap:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.footer-bar .info{flex:1;min-width:0}.footer-bar .info .cnt{font-size:.72rem;color:var(--muted);letter-spacing:.06em}.footer-bar .info .tot{font-size:1.25rem;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}.footer-bar .btn{width:auto;flex:none;padding:13px 18px}.oline{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px dashed var(--line)}.oline .oname{flex:1;min-width:0}.oline .oname .sub{font-size:.75rem;color:var(--muted)}.oline .osub{font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}.del{background:none;border:none;color:var(--danger);cursor:pointer;font-size:1.1rem;padding:4px}.total-row{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;margin-top:4px}.total-row .lbl{letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--muted)}.field{margin-bottom:14px}.field label{display:block;font-size:.82rem;margin-bottom:6px;color:var(--muted);letter-spacing:.04em}.field label .req{color:var(--green);margin-left:3px}.field input,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line-bright);border-radius:var(--radius);color:var(--text);font:inherit;padding:12px}.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 2px #c8ff0026}.field input.err,.field textarea.err{border-color:var(--danger)}.field .msg{color:var(--danger);font-size:.78rem;margin-top:5px}.check{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line-bright);border-radius:var(--radius);background:var(--panel);cursor:pointer}.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--green);flex:none}.check span{font-size:.86rem}.success-badge{width:76px;height:76px;margin:8px auto 12px;border-radius:50%;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:2.4rem;box-shadow:0 0 24px #c8ff0040}.copybox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line-bright);border-radius:var(--radius);padding:12px 14px;margin-bottom:10px}.copybox .k{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.copybox .v{font-weight:700;word-break:break-all}.pay-card{background:var(--panel);border:1px solid var(--green);box-shadow:0 0 18px #c8ff0014;border-radius:var(--radius);padding:16px}.pay-card .row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}.pay-card .row:last-child{border-bottom:none}.pay-card .row .k{color:var(--muted)}.pay-card .row .v{font-weight:700;text-align:right;word-break:break-all}.ol{padding-left:1.1em;margin:8px 0}.ol li{margin-bottom:6px;font-size:.9rem}.hero{border:1px solid var(--line-bright);border-radius:var(--radius);background:radial-gradient(120% 80% at 50% 0%,rgba(200,255,0,.1),transparent 60%),var(--panel);padding:22px 18px;text-align:center;position:relative;overflow:hidden}.hero .team{display:inline-block;font-size:.72rem;letter-spacing:.22em;color:var(--green);border:1px solid var(--green-dim);padding:3px 10px;border-radius:20px;margin-bottom:14px;text-transform:uppercase}.hero h1{margin-bottom:6px}.hero .lede{color:var(--muted);font-size:.92rem}.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.fact{border:1px solid var(--line);background:var(--panel-2);border-radius:var(--radius);padding:10px 12px}.fact .k{font-size:.68rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.fact .v{font-weight:800;color:var(--text);font-size:1rem;margin-top:2px}.fact .v.hl{color:var(--green)}.toast{position:fixed;bottom:calc(var(--footer-h) + 20px);left:50%;transform:translate(-50%);background:var(--cyan);color:var(--bg);font-weight:700;padding:10px 18px;border-radius:20px;z-index:60;font-size:.85rem;animation:fade .2s ease;box-shadow:0 4px 20px #0006}.foot-note{text-align:center;color:var(--muted-2);font-size:.72rem;padding:24px 0 8px}.hero-img{width:100%;max-width:340px;display:block;margin:16px auto 4px;border-radius:var(--radius);background:#fff}.prod-img{width:100%;border-radius:var(--radius);background:#fff;margin-bottom:12px}.vid-label{font-size:.78rem;color:var(--muted);margin-bottom:8px;letter-spacing:.04em}.vid-wrap{position:relative;padding-top:56.25%;border-radius:var(--radius);overflow:hidden;background:#000}.vid-wrap iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0}.swatch-price{color:var(--green-dim);font-size:.82rem;font-weight:700;margin-left:8px;font-variant-numeric:tabular-nums}.acc-thumb{width:68px;height:68px;flex:none;object-fit:contain;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}.comp-strip{display:flex;align-items:stretch;gap:0;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);overflow-x:auto}.comp-cell{display:flex;align-items:center;flex:1 1 0;min-width:0}.comp-plus{color:var(--green);font-weight:800;font-size:1rem;padding:0 4px;flex:none}.comp-inner{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0}.comp-inner img{width:100%;max-width:84px;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:var(--radius);border:1px solid var(--line)}.comp-inner img.ref{opacity:.72;border-style:dashed}.comp-label{font-size:.72rem;text-align:center;color:var(--text);line-height:1.2}.comp-label.ref{color:var(--muted)}
