:root{--bg:#fff;--surface:#f5f5f7;--surface-dark:#06070d;--text:#06070d;--text-muted:#6e6e73;--text-inverse:#f5f5f7;--accent:#0071e3;--accent-hover:#2997ff;--sale:#d70015;--success:#248a3d;--hairline:#06070d14;--hairline-dark:#ffffff24;--radius-card:18px;--radius-tile:12px;--radius-pill:980px;--shadow-rest:0 1px 2px #06070d0a;--shadow-hover:0 8px 24px #06070d14;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px}.app{grid-template-rows:auto 1fr;height:100vh;display:grid}header.topbar{align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--hairline);background:var(--bg);display:flex}.logo{letter-spacing:.12em;font-size:17px;font-weight:700}.logo b{color:var(--accent)}.topbar .sub{color:var(--text-muted);font-size:13px}.badge-proto{letter-spacing:.08em;color:var(--accent);border-radius:var(--radius-pill);border:1px solid;margin-left:auto;padding:3px 10px;font-size:11px;font-weight:600}main.layout{grid-template-columns:1fr 420px;min-height:0;display:grid}.stage-wrap{background:radial-gradient(1100px 700px at 35% 30%, #141a2e 0%, #0a0d18 55%, var(--surface-dark) 100%);min-height:0;position:relative}#stage{position:absolute;inset:0}#stage canvas{display:block}.stage-controls{left:50%;bottom:var(--sp-4);gap:var(--sp-2);z-index:2;display:flex;position:absolute;transform:translate(-50%)}.stage-controls button{font:inherit;color:var(--text-inverse);border:1px solid var(--hairline-dark);border-radius:var(--radius-pill);cursor:pointer;backdrop-filter:blur(6px);background:#ffffff14;padding:8px 16px;font-size:13px;font-weight:600;transition:background .15s}.stage-controls button:hover{background:#ffffff29}.stage-controls button.active{background:var(--accent);border-color:var(--accent)}.stage-hint{top:var(--sp-4);color:#f5f5f78c;letter-spacing:.04em;z-index:2;pointer-events:none;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}aside.panel{border-left:1px solid var(--hairline);background:var(--bg);flex-direction:column;display:flex;overflow-y:auto}.panel-inner{padding:var(--sp-5);gap:var(--sp-6);flex-direction:column;display:flex}section.step h2{letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-3);align-items:baseline;gap:var(--sp-2);font-size:12px;font-weight:700;display:flex}section.step h2 .n{color:var(--accent);font-variant-numeric:tabular-nums}#colorway-label{text-transform:none;letter-spacing:0;color:var(--text);margin-left:auto;font-weight:600}.chips{gap:var(--sp-2);flex-wrap:wrap;display:flex}.group-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:var(--sp-3) 0 var(--sp-2);font-size:11px;font-weight:700}#phone-options .group-label:first-child{margin-top:0}.chip{font:inherit;border:1px solid var(--hairline);background:var(--bg);border-radius:var(--radius-tile);cursor:pointer;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px;transition:border-color .15s,box-shadow .15s;display:flex}.chip span{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12px}.chip:hover{border-color:var(--accent-hover)}.chip.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.lens-chip{align-items:center;gap:var(--sp-2);flex-direction:row}.lens-dot{border:1px solid var(--hairline);border-radius:50%;width:14px;height:14px;display:inline-block}.swatches{gap:var(--sp-2);margin-top:var(--sp-3);flex-wrap:wrap;display:flex}.swatch{border:1px solid var(--hairline);cursor:pointer;border-radius:50%;width:30px;height:30px;transition:transform .15s,box-shadow .15s}.swatch:hover{transform:scale(1.1)}.swatch.active{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--accent)}.cards{gap:var(--sp-2);grid-template-columns:1fr 1fr;display:grid}.card{font:inherit;text-align:left;border:1px solid var(--hairline);background:var(--bg);border-radius:var(--radius-tile);cursor:pointer;flex-direction:column;gap:2px;padding:10px 12px;transition:border-color .15s,box-shadow .15s;display:flex}.card:hover{border-color:var(--accent-hover);box-shadow:var(--shadow-hover)}.card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.card-brand{letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:700}.card-note{color:var(--text-muted);font-size:11.5px;line-height:1.35}.card-price{font-variant-numeric:tabular-nums;margin-top:2px;font-size:13px;font-weight:600}.rows{gap:var(--sp-2);flex-direction:column;display:flex}.row{font:inherit;text-align:left;gap:0 var(--sp-3);border:1px solid var(--hairline);background:var(--bg);border-radius:var(--radius-tile);cursor:pointer;grid-template-columns:1fr auto;align-items:center;padding:9px 12px;transition:border-color .15s;display:grid}.row:hover{border-color:var(--accent-hover)}.row.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.row-note{color:var(--text-muted);grid-column:1;font-size:11.5px}.row-price{font-variant-numeric:tabular-nums;grid-area:1/2/span 2;font-weight:600}.summary{border-top:1px solid var(--hairline);background:var(--surface);padding:var(--sp-5);margin-top:auto}.summary ul{gap:var(--sp-2);margin-bottom:var(--sp-4);flex-direction:column;list-style:none;display:flex}.summary li{justify-content:space-between;gap:var(--sp-3);font-size:13.5px;display:flex}.summary li span{flex-direction:column;display:flex}.summary li em{color:var(--text-muted);font-size:11.5px;font-style:normal}.summary li strong{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.total-row{padding-top:var(--sp-3);border-top:1px solid var(--hairline);margin-bottom:var(--sp-3);justify-content:space-between;align-items:baseline;display:flex}.total-row .lbl{color:var(--text-muted);font-size:13px}#summary-total{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}.hint{color:var(--text-muted);margin-bottom:var(--sp-3);min-height:16px;font-size:12px}.hint.ok{color:var(--success);font-weight:600}.hint.error{color:var(--sale);font-weight:600}.cta{width:100%;font:inherit;color:#fff;background:var(--accent);border-radius:var(--radius-pill);cursor:pointer;border:none;padding:13px 20px;font-size:15px;font-weight:600;transition:background .15s}.cta:hover{background:var(--accent-hover)}@media (width<=920px){main.layout{grid-template-rows:minmax(300px,46vh) 1fr;grid-template-columns:1fr}aside.panel{border-left:none;border-top:1px solid var(--hairline)}.cards{grid-template-columns:1fr}.chip{min-height:44px;padding:11px 14px}.swatch{width:36px;height:36px}.row{min-height:44px;padding:12px 14px}.card{padding:12px 14px}.stage-controls button{min-height:42px;padding:10px 16px}.panel-inner{padding:var(--sp-4);gap:var(--sp-5)}.summary{z-index:3;padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));position:sticky;bottom:0;box-shadow:0 -8px 24px #06070d14}.summary ul{display:none}.hint{margin-bottom:var(--sp-2)}.total-row{margin-bottom:var(--sp-2);border-top:none;padding-top:0}}
