:root{--navy:#092b45;--navy2:#123f5f;--gold:#d49a25;--ink:#182838;--muted:#71808d;--line:#dfe6eb;--paper:#eef2f5;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}
button,input,select,textarea{font:inherit}.topbar{height:70px;background:var(--navy);color:#fff;padding:0 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 3px 14px #092b451c}
.brand{text-decoration:none;color:white;display:flex;flex-direction:column;line-height:1}.brand-name{font-size:27px;font-weight:900;letter-spacing:.13em}.brand-sub{font-size:9px;letter-spacing:.18em;margin-top:6px;color:#d5e1e9}.topbar-title{font-size:14px;font-weight:700;color:#edf3f7}.topbar-actions{display:flex;gap:8px;align-items:center;font-size:11px;color:#dbe5ec}.live-dot,.badge-dot{width:8px;height:8px;background:#64c391;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #64c39122}
.workspace{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px;max-width:1600px;margin:0 auto;padding:18px;align-items:start}
.controls,.preview-area{background:var(--white);border:1px solid var(--line);border-radius:15px;box-shadow:0 5px 22px #1732480a}
.controls{padding:18px;max-height:calc(100vh - 95px);overflow-y:auto;position:sticky;top:12px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.panel-heading h1{font-size:23px;letter-spacing:-.035em;margin:3px 0 0}.eyebrow{font-size:9px;font-weight:850;letter-spacing:.17em;color:#7890a0}.text-button{background:none;border:0;color:#607687;font-size:11px;font-weight:750;cursor:pointer}
.control-group{border-top:1px solid var(--line);padding:15px 0}.group-title{display:flex;align-items:center;gap:9px;margin-bottom:10px}.group-title h2{font-size:14px;margin:0}.step{background:#eaf0f4;color:var(--navy);font-size:10px;font-weight:850;border-radius:6px;padding:4px 6px}
.segmented,.choice-grid,.two-fields{display:grid;gap:7px}.segmented.two{grid-template-columns:1fr 1fr}.choice-grid.three{grid-template-columns:repeat(3,1fr)}.segment,.choice{border:1px solid var(--line);background:#fff;color:#34495a;border-radius:8px;padding:9px 7px;font-weight:700;font-size:11px;cursor:pointer;transition:.15s}.segment.active,.choice.active{background:#eaf1f6;border:2px solid var(--gold);padding:8px 6px;color:var(--navy)}.choice{min-height:41px}
.two-fields{grid-template-columns:1fr 1fr;margin-top:11px}.field-label{display:block;font-size:11px;font-weight:750;color:#536777;margin-top:10px}.field-label select,.field-label input,.field-label textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:9px 10px;font-size:12px;outline-color:#90b0c6}
.color-heading{display:flex;justify-content:space-between;align-items:center;margin:14px 0 7px;font-size:11px;font-weight:800}.color-heading strong{font-size:10px;color:#6e8090}.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.swatch{border:2px solid transparent;background:#fff;border-radius:7px;padding:2px;cursor:pointer;min-width:0}.swatch.active{border-color:var(--gold)}.swatch i{display:block;height:24px;border-radius:4px;border:1px solid #0001}.swatch:focus-visible,.choice:focus-visible,.segment:focus-visible{outline:2px solid #5e8eae;outline-offset:2px}
.upload-box{display:flex;align-items:center;gap:10px;border:1px dashed #b6c6d1;background:#f8fafb;border-radius:9px;padding:10px;cursor:pointer}.upload-box b{display:block;font-size:11px}.upload-box small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.upload-icon{height:28px;width:28px;border-radius:7px;background:#e8eff4;color:var(--navy);display:grid;place-items:center;font-size:20px}.upload-box input{display:none}
.primary-button{width:100%;border:0;border-radius:9px;background:var(--gold);color:#182838;font-size:12px;font-weight:850;padding:12px 14px;cursor:pointer;margin-top:13px;display:flex;align-items:center;justify-content:space-between}.primary-button span{font-size:17px}.primary-button:disabled{opacity:.55;cursor:wait}.privacy-note{font-size:10px;line-height:1.4;color:#788692;margin:9px 2px 1px}
.preview-area{padding:17px;min-width:0}.preview-header{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:13px}.preview-header h2{font-size:23px;letter-spacing:-.035em;margin:3px 0}.preview-header p{font-size:11px;color:var(--muted);margin:0}.view-switch{display:flex;gap:6px;flex-wrap:wrap}.view-button{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:#41586a;font-size:11px;font-weight:750;cursor:pointer}.view-button.active{background:var(--navy2);border-color:var(--navy2);color:white}
.photo-stage{position:relative;min-height:610px;background:linear-gradient(145deg,#f5f7f9,#e8edf1);border:1px solid #e2e8ed;border-radius:12px;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;overflow:hidden}.model-view{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;background:#f9fafb;border-radius:9px;overflow:hidden}.model-view canvas{width:100%;height:auto;max-height:630px;object-fit:contain;display:block}.view-caption{width:100%;text-align:center;background:var(--navy);color:#fff;padding:8px;font-size:10px;font-weight:850;letter-spacing:.14em}.reference-badge{position:absolute;bottom:24px;left:24px;border:1px solid #dce4e9;background:#ffffffeb;border-radius:999px;padding:7px 10px;color:#536a7b;font-size:10px;display:flex;gap:8px;align-items:center}
.photo-stage[data-view="front"] #backView,.photo-stage[data-view="back"] #frontView{display:none}.photo-stage[data-view="front"],.photo-stage[data-view="back"]{grid-template-columns:minmax(0,1fr)}.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 2px 5px}.selected-colors{display:flex;gap:18px;flex-wrap:wrap}.selected-colors>div{display:flex;align-items:center;gap:7px;font-size:11px;color:#687987}.selected-colors b{color:var(--ink)}.color-dot{width:17px;height:17px;border:1px solid #0002;border-radius:50%;display:inline-block}.outline-button{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--navy);font-weight:750;font-size:11px;cursor:pointer}.saved-combos{display:flex;gap:7px;flex-wrap:wrap}.saved-chip{background:#f4f7f9;border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:10px;color:#4d6374}
.simulation-note{background:#fff8e9;border:1px solid #f0dfb9;color:#6c572b;border-radius:9px;padding:10px 12px;font-size:10px;line-height:1.5;margin-top:12px}
.quote-dialog{border:0;border-radius:15px;padding:0;width:min(620px,calc(100% - 28px));box-shadow:0 20px 70px #0c203355}.quote-dialog::backdrop{background:#0d2234a8;backdrop-filter:blur(3px)}.quote-dialog form{padding:21px}.dialog-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.dialog-heading h2{font-size:23px;margin:3px 0}.dialog-heading p{font-size:11px;color:var(--muted);margin:0}.close-button{border:1px solid var(--line);background:white;border-radius:7px;font-size:21px;line-height:1;padding:4px 9px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.form-grid label{font-size:11px;font-weight:750;color:#506576}.form-grid input,.form-grid textarea{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px}.form-grid .full{grid-column:1/-1}.dialog-summary{background:#f5f8fa;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:11px;margin-top:14px}.quote-status{font-size:11px;color:#60788a;min-height:16px}.quote-status.error{color:#b33c43}.quote-status.success{color:#24764d}
@media(max-width:1050px){.workspace{grid-template-columns:330px minmax(0,1fr);padding:12px;gap:12px}.photo-stage{min-height:530px}.preview-header{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.topbar{height:auto;padding:13px 15px;flex-wrap:wrap}.topbar-title{display:none}.topbar-actions{margin-left:auto}.workspace{display:flex;flex-direction:column;padding:10px;width:100%}.controls{position:static;max-height:none;width:100%;overflow:visible}.preview-area{width:100%;padding:12px}.photo-stage{min-height:420px;gap:7px;padding:7px}.model-view canvas{max-height:470px}.preview-header h2{font-size:21px}.reference-badge{left:14px;bottom:18px}}
@media(max-width:480px){.topbar-actions{font-size:10px}.controls{padding:13px}.preview-footer{align-items:flex-start;flex-direction:column}.photo-stage{min-height:350px}.model-view canvas{max-height:390px}.swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.quote-dialog form{padding:16px}}