@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root { --ink:#151813; --muted:#70766b; --line:#d9ddd3; --paper:#f2f3ed; --white:#fbfcf8; --acid:#d9ff43; --acid-dark:#bdda2f; --danger:#cf4c3d; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,Arial,sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.topbar { height:72px; padding:0 clamp(22px,4vw,64px); background:var(--ink); color:white; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #383d33; }
.brand { color:white; text-decoration:none; display:flex; gap:13px; align-items:center; font:800 23px 'Barlow Condensed',sans-serif; letter-spacing:1.5px; }
.brand>span:last-child span { color:var(--acid); }
.brand-mark { width:31px; height:31px; display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:3px; transform:skew(-10deg); }
.brand-mark i { background:var(--acid); display:block; height:72%; }.brand-mark i:nth-child(2){height:100%}.brand-mark i:nth-child(3){height:50%}
.top-actions { display:flex; align-items:center; gap:17px; }.local-badge { font-size:11px; letter-spacing:1.4px; color:#bac0b3; }.local-badge span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid);margin-right:7px;box-shadow:0 0 9px var(--acid)}
.icon-button { border:1px solid #464b41; background:#292d27; color:white; width:36px;height:36px;border-radius:2px; }
main { max-width:1500px; margin:auto; padding:0 clamp(22px,4vw,64px) 60px; }
.hero { display:flex; justify-content:space-between; gap:50px; align-items:flex-end; padding:50px 0 38px; }
.eyebrow { margin:0 0 11px; color:#596052; font:700 11px Inter,sans-serif; letter-spacing:2.2px; }
h1 { margin:0; text-transform:uppercase; font:800 clamp(44px,5.2vw,76px)/.9 'Barlow Condensed',sans-serif; letter-spacing:-1.5px; }
h1 em { color:#6b7166; font-weight:600; }.hero-copy { max-width:420px; margin:0 0 5px; color:#676d62; line-height:1.6; font-size:14px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(340px,.75fr); border:1px solid var(--line); background:var(--white); min-height:660px; box-shadow:0 14px 40px #2225180b; }
.viewer-card { padding:22px; border-right:1px solid var(--line); min-width:0; }
.drop-zone { min-height:614px; height:100%; border:1px dashed #b9beb3; background-color:#f8f9f4; background-image:linear-gradient(#e9ece5 1px,transparent 1px),linear-gradient(90deg,#e9ece5 1px,transparent 1px); background-size:30px 30px; position:relative; outline:none; transition:.2s; }
.drop-zone.dragging { border:2px solid var(--acid-dark); background-color:#f5fadf; }
.empty-state { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; background:radial-gradient(circle,#f8f9f4d8 0,#f8f9f4cc 22%,transparent 65%); }
.upload-icon { width:68px;height:68px;border:1px solid #cfd4c8;background:var(--white);display:grid;place-items:center;font-size:32px;margin-bottom:22px;box-shadow:8px 8px 0 #e4e7df; }
.empty-state h2 { font:700 25px 'Barlow Condensed'; text-transform:uppercase; letter-spacing:.5px; margin:0 0 9px; }.empty-state p{margin:0 0 14px;color:var(--muted);font-size:13px}.empty-state button{border:0;background:none;color:#384014;text-decoration:underline;font-weight:700}.empty-state small{color:#999f94;font-size:10px;letter-spacing:1px;text-transform:uppercase}
.drawing-state { height:100%; display:grid; grid-template-rows:auto 1fr auto; }.viewer-toolbar { min-height:58px;background:var(--white);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:9px 13px}.file-meta{display:flex;gap:10px;align-items:center}.file-meta div{display:flex;flex-direction:column;gap:3px}.file-meta strong{font-size:12px}.file-meta small{font-size:10px;color:var(--muted)}.file-chip{font:700 10px Inter;background:var(--ink);color:var(--acid);padding:6px 5px}.viewer-actions{display:flex;gap:6px}.viewer-actions button{width:30px;height:30px;background:white;border:1px solid var(--line);font-size:17px}
.canvas-wrap { min-height:470px; position:relative; overflow:hidden; }.canvas-wrap svg{display:block;width:100%;height:100%;min-height:470px;touch-action:none}.canvas-wrap path,.canvas-wrap line,.canvas-wrap circle{fill:none;stroke:#181b16;vector-effect:non-scaling-stroke;stroke-width:1.5}.axis-label{position:absolute;font:700 9px Inter;color:#a4aa9f}.axis-label.x{right:10px;bottom:8px}.axis-label.y{left:9px;top:8px}
.dimension-bar{background:var(--white);border-top:1px solid var(--line);min-height:53px;display:flex;align-items:center;gap:24px;padding:0 14px;font-size:11px}.dimension-bar b{font-size:13px}.dim-icon{color:#747b70;margin-right:5px}.dim-icon.vertical{display:inline-block;transform:rotate(90deg)}.scale-note{margin-left:auto;color:#989e92;font-size:9px;letter-spacing:1.3px}
.quote-panel { padding:34px clamp(24px,3vw,42px); background:#fcfdf9; }
.panel-heading{display:flex;gap:13px;align-items:center;margin-bottom:27px}.panel-heading>span{width:35px;height:35px;border:1px solid #c9cec3;display:grid;place-items:center;font:700 11px Inter;color:#666d61}.panel-heading p{margin:0 0 2px;font-size:9px;letter-spacing:1.8px;color:#91978c}.panel-heading h2{margin:0;text-transform:uppercase;font:700 22px 'Barlow Condensed'}.field-label{display:block;margin:20px 0 8px;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#6f756b}
.select-wrap{position:relative;flex:1}.select-wrap:after{content:'⌄';position:absolute;right:13px;top:50%;transform:translateY(-55%);pointer-events:none}.select-wrap select{appearance:none;width:100%;height:47px;border:1px solid #ced3c8;background:white;padding:0 38px 0 14px;font-weight:600;font-size:13px;color:var(--ink)}.thickness-row{display:flex;align-items:center;gap:11px}.thickness-row>span{font-size:12px;font-weight:700;color:#6f756b}
.stepper{height:47px;border:1px solid #ced3c8;background:white;display:grid;grid-template-columns:45px 1fr 45px}.stepper button{border:0;background:white;font-size:20px}.stepper input{border:0;border-left:1px solid #e6e8e1;border-right:1px solid #e6e8e1;text-align:center;font-weight:700;width:100%;-moz-appearance:textfield}.stepper input::-webkit-inner-spin-button{appearance:none}.quote-heading{margin-top:35px;margin-bottom:18px;padding-top:28px;border-top:1px solid #e0e3da}
.waiting-quote{text-align:center;padding:22px;color:#858b80;font-size:12px}.mini-drawing{font-size:37px;color:#b6bcb0}.quote-details{animation:rise .35s ease-out}.metric-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dfe2da}.metric-grid>div{padding:12px}.metric-grid>div:nth-child(odd){border-right:1px solid #dfe2da}.metric-grid>div:nth-child(-n+2){border-bottom:1px solid #dfe2da}.metric-grid small{display:block;font-size:7.5px;letter-spacing:1px;color:#8b9186;margin-bottom:5px}.metric-grid strong{font:700 15px 'Barlow Condensed'}.cost-lines{padding:14px 0;border-bottom:1px solid #dfe2da}.cost-lines div{display:flex;justify-content:space-between;font-size:11px;padding:4px 0}.cost-lines span{color:#747a70}.total-line{display:flex;justify-content:space-between;align-items:end;padding-top:15px}.total-line span{font:700 11px Inter;letter-spacing:1px}.total-line strong{font:800 32px 'Barlow Condensed'}.unit-price{text-align:right;font-size:9px;color:#81877c;margin:2px 0 16px}.primary-button{width:100%;height:47px;border:1px solid #9bad2a;background:var(--acid);font:700 10px Inter;letter-spacing:1px;display:flex;justify-content:space-between;align-items:center;padding:0 17px;box-shadow:3px 3px 0 var(--ink);transition:.15s}.primary-button:hover{background:#e3ff73;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}.primary-button span{font-size:18px}.disclaimer{text-align:center;color:#9ca196;font-size:8px;line-height:1.4;margin:13px 0 0}
dialog{padding:0;border:0;background:transparent;max-width:560px;width:calc(100% - 32px)}dialog::backdrop{background:#11140fd9;backdrop-filter:blur(3px)}.settings-card{background:var(--white);padding:28px;border-top:4px solid var(--acid)}.dialog-head{display:flex;justify-content:space-between;align-items:start}.dialog-head h2{margin:0;font:700 28px 'Barlow Condensed';text-transform:uppercase}.dialog-head button{border:0;background:none;font-size:26px}.dialog-copy{color:var(--muted);font-size:12px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:23px 0}.settings-grid label{font-size:10px;color:#646a60;font-weight:700}.settings-grid input{display:block;width:100%;height:42px;border:1px solid var(--line);margin-top:6px;padding:0 10px}.dialog-actions{display:flex;justify-content:space-between;gap:12px}.dialog-actions>button:first-child{border:0;background:none;text-decoration:underline;font-size:11px}.dialog-actions .primary-button{width:165px;justify-content:center}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:var(--ink);color:white;padding:12px 18px;font-size:12px;opacity:0;pointer-events:none;transition:.25s;z-index:5;border-left:3px solid var(--acid)}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.hole-warning{display:flex;gap:11px;align-items:flex-start;margin:13px 0;padding:11px 12px;background:#fff1e7;border:1px solid #ed9e6d;color:#792d16}.hole-warning[hidden]{display:none}.hole-warning>span{flex:0 0 23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#d9562f;color:white;font-weight:800;font-size:12px}.hole-warning strong{font-size:9px;letter-spacing:1px}.hole-warning p{font-size:9px;line-height:1.45;margin:3px 0 0}.canvas-wrap path.warning-hole{stroke:#e34e2a;stroke-width:3;filter:drop-shadow(0 0 2px #ff8b6c)}
.hole-warning-content{flex:1;min-width:0}.drilling-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin-top:10px;padding:9px;background:white;border:1px solid #edc4aa;color:var(--ink);cursor:pointer}.drilling-option input{width:16px;height:16px;accent-color:#d9562f}.drilling-option span{display:flex;flex-direction:column;gap:2px}.drilling-option span b{font-size:9px}.drilling-option small{font-size:8px;color:#7f756e}.drilling-option>strong{white-space:nowrap;font-size:11px;letter-spacing:0}
.client-price-card{margin:14px 0 19px;padding:17px 18px;background:var(--ink);color:white;border-left:4px solid var(--acid);display:grid;grid-template-columns:1fr auto;align-items:end}.client-price-card>span{font-size:9px;letter-spacing:1.4px;color:#c8cec1}.client-price-card>strong{grid-row:span 2;font:800 34px 'Barlow Condensed'}.client-price-card>small{margin-top:5px;color:#aeb5a7;font-size:9px}.customer-form{border-top:1px solid var(--line);padding-top:17px}.customer-form>p{font-size:9px;font-weight:800;letter-spacing:1.5px;margin:0 0 12px}.customer-form label{display:block;color:#73796f;font-size:9px;font-weight:700;margin-bottom:10px}.customer-form label>span{font-weight:400;color:#9aa095}.customer-form input:not([type=checkbox]),.customer-form textarea{display:block;width:100%;border:1px solid #ced3c8;background:white;margin-top:5px;padding:10px 11px;color:var(--ink);font-size:11px;outline:none}.customer-form input:not([type=checkbox]){height:39px}.customer-form textarea{resize:vertical}.customer-form input:focus,.customer-form textarea:focus{border-color:#96a52b;box-shadow:0 0 0 2px #d9ff4330}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.customer-form .consent{display:flex;align-items:flex-start;gap:7px;font-weight:400;line-height:1.35}.consent input{accent-color:#a9c522;margin:1px 0 0}.secondary-button{width:100%;margin-top:11px;border:0;background:none;color:#656c61;text-decoration:underline;font-size:10px}.success-card{padding:36px;text-align:center;background:var(--white);border-top:4px solid var(--acid)}.success-icon{margin:0 auto 17px;width:52px;height:52px;border-radius:50%;background:var(--acid);display:grid;place-items:center;font-size:24px}.success-card h2{font:700 28px 'Barlow Condensed';text-transform:uppercase;margin:0 0 10px}.success-card>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 22px}.success-card .primary-button{justify-content:center}.quote-panel{min-width:0}
.empty-state .shape-library-button{margin:4px 0 17px;padding:10px 14px;border:1px solid #a9ba37;background:#efffc2;color:#26300f;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:1px}.settings-grid select{display:block;width:100%;height:42px;border:1px solid var(--line);margin-top:6px;padding:0 10px;background:white;font-size:11px}.shape-preview-row{display:flex;justify-content:space-between;align-items:center;margin:4px 0 19px;padding:12px;background:#f0f2eb;border-left:3px solid var(--acid)}.shape-preview-row span{font-size:8px;letter-spacing:1px;color:#747b70}.shape-preview-row strong{font-size:11px}
@media(max-width:900px){.hero{align-items:start;flex-direction:column;padding:35px 0 28px;gap:22px}.workspace{grid-template-columns:1fr}.viewer-card{border-right:0;border-bottom:1px solid var(--line)}.drop-zone{min-height:520px}.quote-panel{padding:30px}.topbar{height:64px}}
@media(max-width:520px){main{padding:0 12px 30px}.topbar{padding:0 15px}.local-badge{display:none}.hero{padding-top:28px}.viewer-card{padding:8px}.drop-zone{min-height:440px}.canvas-wrap,.canvas-wrap svg{min-height:350px}.dimension-bar{gap:12px}.scale-note{display:none}.settings-grid,.form-row{grid-template-columns:1fr}.quote-panel{padding:25px 20px}}
@media print{.topbar,.hero,.viewer-card,.panel-heading:first-child,.field-label,.select-wrap,.thickness-row,.stepper,.quote-heading,.primary-button,.disclaimer{display:none!important}body,main,.workspace,.quote-panel{background:white;padding:0;margin:0;box-shadow:none;border:0}.workspace{display:block}.quote-panel{max-width:600px}.quote-details{display:block!important}}