@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap";:root{font-family:DM Sans,sans-serif;color:#162c4b;background:#eef4fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:radial-gradient(circle at 8% 0%,#f9fcff 0,#eef4fb 43%,#e8f0f9)}.topbar{height:76px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9e5f2;background:#ffffffc7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand-lockup{display:flex;align-items:center;gap:12px}.brand-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#1769e0;color:#fff;font:700 12px Space Grotesk;letter-spacing:-.04em;box-shadow:0 7px 16px #1769e033}.brand-lockup strong,.brand-lockup span{display:block}.brand-lockup strong{font:600 15px Space Grotesk;color:#12325a}.brand-lockup span{font-size:11px;color:#7890ac;margin-top:2px}.local-badge{color:#6e86a4;font-size:12px;display:flex;align-items:center;gap:8px}.topbar-status{display:flex;align-items:center;gap:16px}.status-dot{width:7px;height:7px;background:#31bf86;border-radius:50%;display:inline-block;box-shadow:0 0 0 3px #31bf861f}.workspace{max-width:1480px;margin:0 auto;padding:42px 5vw 54px;display:grid;grid-template-columns:minmax(360px,460px) minmax(0,1fr);gap:42px}.control-panel,.results-panel{min-width:0}.panel-heading,.results-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.eyebrow{margin:0 0 8px;color:#4e81be;font:700 10px Space Grotesk;letter-spacing:.16em}h1,h2,h3,p{margin-top:0}h1{margin-bottom:8px;font:600 clamp(26px,3vw,35px) "Space Grotesk";letter-spacing:-.04em;color:#112b4d}.panel-subtitle{color:#7890ac;font-size:13px;line-height:1.6}.step-count{color:#5481b5;background:#e0edfc;border-radius:999px;font-size:11px;font-weight:600;padding:7px 11px;white-space:nowrap}.steps{margin-top:4px}.step-block{border-top:1px solid #d8e5f3;padding:22px 0}.step-block:first-child{border-top:0;padding-top:0}.step-title{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}.step-number{color:#78a1cf;font:700 11px Space Grotesk;letter-spacing:.08em;padding-top:4px}.step-title h2{margin-bottom:3px;color:#17375e;font:600 15px Space Grotesk}.step-title p{margin:0;color:#8aa0b9;font-size:11px}.segmented{background:#e7f0fa;border-radius:10px;padding:4px;display:flex;gap:4px}.segmented button{flex:1;border:0;border-radius:7px;padding:10px 12px;color:#6a86a6;background:transparent;font-size:12px;font-weight:600}.segmented button.active{color:#165ec2;background:#fff;box-shadow:0 2px 8px #3460971f}.size-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.size-chips span{border:1px solid #d5e3f2;color:#6684a7;background:#f8fbff;border-radius:6px;padding:6px 8px;font:600 10px Space Grotesk}.custom-chips{min-height:29px}.custom-chips span{display:inline-flex;align-items:center;gap:4px}.custom-chips button{border:0;padding:0 1px;color:#7f9cbb;background:transparent;font-size:13px;line-height:1}.add-size-button{border:0;border-radius:8px;padding:10px 13px;color:#fff;background:#2f7dde;font-size:11px;font-weight:600}.custom-size{display:flex;align-items:end;gap:9px;color:#8399b2;font-size:11px}.custom-size label{display:grid;gap:6px;flex:1}.custom-size input{width:100%;border:1px solid #d4e2f0;border-radius:8px;padding:10px;color:#19395e;background:#fff;outline:none}.custom-size input:focus,.fixed-select:focus{border-color:#4b8ee7;box-shadow:0 0 0 3px #4b8ee71f}.unit{padding-bottom:11px}.mode-options{display:grid;gap:9px}.mode-options label{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid #d9e6f3;border-radius:10px;background:#ffffff8c;transition:.2s}.mode-options label.selected{border-color:#68a2ea;background:#f5f9ff;box-shadow:0 4px 12px #2970cf14}.mode-options input{position:absolute;opacity:0}.radio-mark{width:16px;height:16px;border:1px solid #afc4dc;border-radius:50%;display:grid;place-items:center}.selected .radio-mark{border-color:#2d7be0;box-shadow:inset 0 0 0 4px #f5f9ff;background:#2d7be0}.mode-options b,.mode-options small{display:block}.mode-options b{color:#254b76;font-size:12px}.mode-options small{color:#91a5bc;font-size:10px;margin-top:3px}.fixed-select{width:100%;margin-top:11px;border:1px solid #d4e2f0;border-radius:8px;padding:10px;color:#19395e;background:#fff}.hint{margin:10px 0 0 34px;color:#8ca2ba;font-size:10px}.dropzone{border:1.5px dashed #a8c5e5;border-radius:11px;padding:22px 16px;display:grid;place-items:center;gap:4px;color:#7190b1;background:#f7fbffbf;transition:.2s}.dropzone:hover,.dropzone.dragging{border-color:#3886e5;background:#f0f7ff}.dropzone:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid rgba(47,125,222,.28);outline-offset:2px}.dropzone input{display:none}.dropzone b{color:#3f6590;font-size:12px;margin-top:3px}.dropzone span{font-size:10px;color:#95a9bf}.upload-icon{width:30px;height:30px;border:1px solid #bed5ec;border-radius:9px;display:grid;place-items:center;color:#3988e5;font-size:17px}.file-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.file-thumb{position:relative;width:60px;height:60px;border-radius:6px;overflow:hidden;border:1px solid #d8e5f3;flex-shrink:0}.file-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#f4f8fc}.file-thumb .remove-button{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;border:0;background:#14325a8c;color:#fff;font-size:11px;line-height:1;padding:0;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}.file-thumb:hover .remove-button{opacity:1}.error-message{margin:9px 0 0;color:#d05a6a;font-size:11px}.action-block{padding-bottom:0}.primary-button{width:100%;border:0;border-radius:10px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;color:#fff;background:#1769e0;box-shadow:0 9px 19px #1769e03d;font-weight:600;font-size:13px;transition:.2s}.primary-button:hover:not(:disabled){background:#1158c1;transform:translateY(-1px)}.primary-button:disabled,.download-button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}.button-arrow{font-size:18px;font-weight:400}.results-panel{border-left:1px solid #d9e5f2;padding-left:42px;min-height:630px}.results-heading h2{margin-bottom:0;color:#17375e;font:600 22px Space Grotesk}.download-button{border:1px solid #c6d9ee;border-radius:8px;background:#fff;color:#3874b5;padding:10px 13px;font-size:11px;font-weight:600}.download-button span{margin-right:5px;font-size:16px;vertical-align:-1px}.empty-state{min-height:520px;display:grid;place-content:center;justify-items:center;text-align:center}.empty-visual{position:relative;width:170px;height:110px;margin-bottom:23px}.empty-card{position:absolute;border:1px solid #b9d0e9;border-radius:9px;background:#f7fbff}.card-back{width:105px;height:72px;left:26px;top:13px;transform:rotate(-9deg)}.card-front{width:115px;height:78px;left:39px;top:24px;transform:rotate(7deg);background:#e4f0fd;padding:18px 13px;display:grid;gap:6px}.card-front i{display:block;height:5px;border-radius:4px;background:#a8c7e8}.card-front i:first-child{width:58%;background:#71a6df}.empty-state h3{margin-bottom:8px;color:#4d7098;font:600 14px Space Grotesk}.empty-state p{color:#91a7bd;font-size:12px;line-height:1.7}.supported-sizes{display:flex;align-items:center;gap:6px;margin-top:20px;color:#91a7bd;font-size:10px}.supported-sizes b{border:1px solid #d1e0ef;border-radius:5px;padding:4px 6px;color:#7394b6;font:600 9px Space Grotesk}.result-grid{display:grid;grid-template-columns:repeat(auto-fill,100px);gap:10px;margin-top:27px}.result-card{width:100px;border:1px solid #d9e5f2;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 4px 10px #204b7c0f}.preview-frame{position:relative;width:100px;height:100px;background:#f4f8fc}.preview-frame img{display:block;width:100%;height:100%;object-fit:contain}.result-info{display:flex;gap:8px;justify-content:space-between;align-items:baseline;padding:12px;border-top:1px solid #e4edf6}.result-info b,.result-info span{display:block}.result-info b{color:#3f6185;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.result-info span{color:#99adc1;font-size:9px;white-space:nowrap}.icon-download{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:44px;height:44px;border:0;border-radius:50%;display:grid;place-items:center;text-decoration:none;color:#fff;font-size:20px;background:#1769e0;box-shadow:0 8px 20px #1769e059;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}.result-card:hover .icon-download,.result-card:focus-within .icon-download{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.results-footer{margin-top:22px;display:flex;justify-content:space-between;color:#8ca2b9;font-size:10px}.results-footer span:first-child{display:flex;align-items:center;gap:7px;color:#5f82a7}.footer{max-width:1480px;margin:0 auto;padding:0 5vw 24px;display:flex;justify-content:space-between;color:#9aacc0;font-size:10px}@media(max-width:900px){.workspace{grid-template-columns:1fr;gap:32px;padding-top:30px}.results-panel{border-left:0;border-top:1px solid #d9e5f2;padding:30px 0 0;min-height:480px}.empty-state{min-height:400px}}@media(max-width:520px){.topbar{height:68px;padding:0 20px}.local-badge{font-size:0}.local-badge .status-dot{width:8px;height:8px}.workspace{padding:25px 20px 38px}.panel-heading{display:block}.step-count{display:inline-block;margin-top:14px}.results-heading{align-items:center}.results-heading h2{font-size:20px}.download-button{padding:9px 10px}.footer{padding:0 20px 20px;gap:10px;flex-wrap:wrap}.footer span:last-child{margin-left:auto}}