:root{--ink:#1a2332;--ink-soft:#3d4a5c;--ink-muted:#7a8699;--paper:#eef1f6;--paper-elevated:#fff;--line:#e2e7ef;--line-strong:#cfd7e3;--brand:#1a2744;--brand-deep:#121b30;--brand-mid:#243356;--copper:#e8913a;--copper-bright:#f5a04a;--copper-soft:#e8913a24;--accent-blue:#3d7dd6;--accent-blue-soft:#3d7dd61f;--teal:#2f9e8f;--green:#2f9e6a;--carton-length:#e8913a;--carton-width:#4ec4a8;--carton-height:#3d7dd6;--carton-top:#1a2744;--carton-side-l:#e8913a;--carton-side-r:#7eb8e8;--radius-sm:10px;--radius:14px;--radius-lg:18px;--shadow-sm:0 1px 2px #121b300a;--shadow:0 4px 16px #121b300f;--shadow-lg:0 12px 32px #121b301a;--font-display:"Sora", system-ui, sans-serif;--font-body:"Sora", system-ui, sans-serif;--font-mono:"Space Grotesk", ui-monospace, monospace;--sidebar-w:240px;--ease:cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth}body{min-height:100vh;font-family:var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;margin:0}#root{min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.app-shell{grid-template-columns:var(--sidebar-w) 1fr;background:var(--paper);min-height:100vh;display:grid}.sidebar{background:linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);color:#fff;flex-direction:column;height:100vh;min-height:100vh;padding:1.35rem 1rem 1.25rem;display:flex;position:sticky;top:0}.brand{color:inherit;border-bottom:1px solid #ffffff14;align-items:center;gap:.75rem;margin-bottom:1.25rem;padding:.25rem .35rem 1.35rem;text-decoration:none;display:flex}.brand-mark{flex-shrink:0;width:36px;height:36px}.brand-text{flex-direction:column;gap:.1rem;min-width:0;display:flex}.brand-name{letter-spacing:-.02em;font-size:.95rem;font-weight:700}.brand-tag{letter-spacing:.08em;text-transform:uppercase;color:#ffffff73;font-size:.62rem;font-weight:600}.side-nav-label{letter-spacing:.1em;text-transform:uppercase;color:#ffffff59;margin:0 0 .55rem .35rem;font-size:.65rem;font-weight:600}.side-nav{flex-direction:column;flex:1;gap:.35rem;display:flex}.side-link{color:#ffffffa6;text-align:left;border-radius:var(--radius-sm);width:100%;transition:background .2s var(--ease), color .2s var(--ease);background:0 0;border:0;align-items:center;gap:.7rem;padding:.7rem .65rem;display:flex}.side-link:hover{color:#fff;background:#ffffff0f}.side-link.active{color:#fff;box-shadow:inset 3px 0 0 var(--copper);background:#ffffff1a}.side-link-step{color:#ffffff8c;background:#ffffff14;border-radius:7px;flex-shrink:0;place-items:center;width:26px;height:26px;font-size:.72rem;font-weight:700;display:grid}.side-link.active .side-link-step{background:var(--copper);color:#fff}.side-link-icon{display:none}.side-link-copy{flex-direction:column;gap:.1rem;min-width:0;display:flex}.side-link-title{font-size:.88rem;font-weight:600}.side-link-hint{color:#fff6;font-size:.7rem}.side-link.active .side-link-hint{color:#ffffff8c}.side-footer{border-top:1px solid #ffffff14;margin-top:auto;padding:1rem .65rem .25rem}.side-footer-title{color:#ffffffd9;word-break:break-all;margin:0 0 .2rem;font-size:.78rem;font-weight:600}.side-footer-text{color:#fff6;margin:0 0 .65rem;font-size:.7rem}.side-footer .auth-switch{color:#ffffff8c;font-size:.78rem}.side-footer .auth-switch:hover{color:#fff}.billing-card{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:12px;margin-bottom:.85rem;padding:.75rem .8rem}.billing-card-row{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.35rem;display:flex}.plan-pill{letter-spacing:.04em;text-transform:uppercase;border-radius:999px;align-items:center;padding:.15rem .55rem;font-size:.68rem;font-weight:700;display:inline-flex}.plan-free{color:#ffffffd9;background:#ffffff1f}.plan-pro{color:#f5a04a;background:#e8913a40}.billing-price{color:#ffffff73;font-size:.72rem}.billing-usage{color:#ffffff8c;margin:0 0 .55rem;font-size:.72rem}.billing-upgrade{border-radius:10px;width:100%}.billing-note{color:#f5a04a;margin:.45rem 0 0;font-size:.68rem;line-height:1.35}.quota-banner{border-radius:var(--radius);background:#fff8ef;border:1px solid #f0d2a8;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.85rem 1rem;display:flex}.quota-banner p{color:var(--ink-soft);margin:0;font-size:.88rem}.workspace{flex-direction:column;min-width:0;min-height:100vh;display:flex}.workspace-bar{flex-shrink:0;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.35rem 1.75rem .85rem;display:flex}.workspace-kicker{letter-spacing:.1em;text-transform:uppercase;color:var(--copper);margin:0 0 .25rem;font-size:.68rem;font-weight:700}.workspace-title{font-family:var(--font-display);letter-spacing:-.03em;color:var(--ink);margin:0;font-size:1.75rem;font-weight:800}.workspace-desc{color:var(--ink-muted);margin:.35rem 0 0;font-size:.9rem}.workspace-badge{letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:#2f9e6a1f;border:1px solid #2f9e6a40;border-radius:999px;flex-shrink:0;padding:.35rem .7rem;font-size:.68rem;font-weight:700}.main{flex:1;min-height:0;padding:.5rem 1.75rem 1.75rem}.tab-panel{height:100%;min-height:0}.tab-panel[hidden]{display:none!important}.panel-card{background:var(--paper-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.15rem 1.25rem}.panel-title{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .85rem;font-size:.78rem;font-weight:700}.field{flex-direction:column;gap:.35rem;display:flex}.field label{color:var(--ink-muted);align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;display:inline-flex}.field label .field-icon{width:14px;height:14px;color:var(--ink-muted)}.field input{border:1px solid var(--line-strong);border-radius:var(--radius-sm);width:100%;color:var(--ink);transition:border-color .15s var(--ease), box-shadow .15s var(--ease);background:#fff;outline:none;padding:.65rem .75rem}.field input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--accent-blue-soft)}.field input[type=number]{appearance:textfield}.field input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.field-stepper{position:relative}.field-stepper input{padding-right:2rem}.field-stepper-btns{flex-direction:column;gap:0;display:flex;position:absolute;top:50%;right:.35rem;transform:translateY(-50%)}.field-stepper-btns button{color:var(--ink-muted);background:0 0;border:0;place-items:center;width:18px;height:14px;padding:0;line-height:0;display:grid}.field-stepper-btns button:hover{color:var(--ink)}.input-screen{height:100%}.input-layout{grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr);align-items:start;gap:1.15rem;display:grid}.input-form{flex-direction:column;gap:1rem;display:flex}.dims-row{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.pallet-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem;display:grid}.pallet-chip{border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);text-align:left;color:var(--ink);transition:border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);background:#fff;padding:.7rem .55rem;position:relative}.pallet-chip:hover{border-color:#a8b6c9}.pallet-chip.selected{border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue);background:#f5f9ff}.pallet-chip-check{background:var(--accent-blue);color:#fff;border-radius:50%;place-items:center;width:16px;height:16px;display:grid;position:absolute;top:.35rem;right:.35rem}.pallet-chip-name{margin-bottom:.2rem;padding-right:1rem;font-size:.72rem;font-weight:700;display:block}.pallet-chip-size{font-family:var(--font-mono);color:var(--ink-muted);font-size:.62rem;display:block}.pallet-custom-dims{grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.85rem;display:grid}.constraints-grid{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.constraints-grid .span-2{grid-column:1/-1}.actions-bar{flex-wrap:wrap;align-items:center;gap:.65rem;padding-top:.25rem;display:flex}.btn{transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);border:none;border-radius:999px;justify-content:center;align-items:center;gap:.45rem;padding:.75rem 1.35rem;font-size:.88rem;font-weight:700;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg, var(--copper-bright), var(--copper));color:#fff;box-shadow:0 6px 16px #e8913a59}.btn-primary:hover{box-shadow:0 8px 20px #e8913a73}.btn-primary:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.btn-secondary{color:var(--brand);border:1.5px solid var(--line-strong);background:#fff}.btn-secondary:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.btn-sm{padding:.45rem .9rem;font-size:.8rem}.btn-icon{border:1px solid var(--line-strong);width:36px;height:36px;color:var(--ink-soft);background:#fff;border-radius:10px;padding:0}.btn-icon:hover{border-color:var(--accent-blue);color:var(--accent-blue)}.btn-icon:disabled{opacity:.4;cursor:not-allowed}.form-error{color:#c45c4a;margin:0;font-size:.85rem}.guide-panel{flex-direction:column;gap:1rem;padding:1.25rem;display:flex;position:sticky;top:1rem}.guide-title{color:var(--ink);margin:0;font-size:.95rem;font-weight:700}.guide-diagram{place-items:center;padding:.5rem 0;display:grid}.guide-diagram img{object-fit:contain;width:100%;max-width:280px;height:auto}.guide-diagram svg{width:100%;max-width:280px;height:auto}.guide-legend{flex-direction:column;gap:.55rem;margin:0;padding:0;list-style:none;display:flex}.guide-legend li{color:var(--ink-soft);align-items:center;gap:.55rem;font-size:.85rem;display:flex}.guide-dot{border-radius:50%;flex-shrink:0;width:10px;height:10px}.guide-legend strong{font-family:var(--font-mono);color:var(--ink);margin-left:auto;font-weight:600}.guide-tip{border-radius:var(--radius-sm);color:var(--ink-soft);background:#eef6ff;border:1px solid #d6e8ff;align-items:flex-start;gap:.55rem;padding:.75rem .85rem;font-size:.78rem;line-height:1.45;display:flex}.guide-tip svg{color:var(--accent-blue);flex-shrink:0;margin-top:.1rem}.choice-screen,.output-screen{height:100%}.choice-list{flex-direction:column;gap:.55rem;max-height:calc(100vh - 10rem);padding-right:.25rem;display:flex;overflow:auto}.choice-row{border:1.5px solid var(--line);border-radius:var(--radius);text-align:left;color:inherit;box-shadow:var(--shadow-sm);background:#fff;grid-template-columns:1.2fr auto 1fr;align-items:center;gap:.75rem 1rem;padding:.85rem 1rem;display:grid}.choice-row:hover{border-color:#b8c4d6}.choice-row.selected{border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue);background:#f5f9ff}.choice-pattern{font-family:var(--font-mono);font-size:.95rem;font-weight:700}.choice-qty{color:var(--ink-muted);font-size:.85rem}.choice-util-bar{align-items:center;gap:.55rem;display:flex}.choice-util{font-family:var(--font-mono);min-width:2.5rem;font-size:.85rem;font-weight:700}.util-track{background:var(--line);border-radius:999px;flex:1;height:6px;overflow:hidden}.util-fill{border-radius:inherit;background:linear-gradient(90deg, var(--copper), var(--copper-bright));height:100%}.output-layout{grid-template-columns:minmax(280px,.95fr) minmax(0,1.25fr);align-items:start;gap:1rem;height:100%;min-height:0;display:grid}.output-side{flex-direction:column;gap:.75rem;min-width:0;display:flex}.output-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem .9rem;display:flex}.output-controls-card{flex-direction:column;gap:.85rem;display:flex}.pattern-select-wrap{flex-direction:column;gap:.35rem;width:100%;display:flex}.field-label{color:var(--ink-muted);font-size:.72rem;font-weight:600}.pattern-select{appearance:none;border:1.5px solid var(--line-strong);width:100%;font-family:var(--font-mono);color:var(--ink);cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%237a8699' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right .75rem center no-repeat;border-radius:12px;padding:.55rem 2rem .55rem .85rem;font-size:.88rem;font-weight:700}.pattern-select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--accent-blue-soft);outline:none}.layers-inline{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:.75rem;padding-top:.85rem;display:flex}.output-nav{align-items:center;gap:.45rem;display:flex}.btn-export{border-radius:14px;width:100%;margin-top:.15rem}.output-metric-card{padding:.95rem 1.1rem}.output-metric-title{letter-spacing:.02em;color:var(--ink-soft);margin:0 0 .7rem;font-size:.78rem;font-weight:700}.layers-card{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.layers-card .output-metric-title,.layers-inline .output-metric-title{margin:0}.layers-card-head{align-items:center;gap:.5rem;display:flex}.layers-card-icon{background:var(--copper-soft);width:32px;height:32px;color:var(--copper);border-radius:10px;place-items:center;display:grid}.layer-controls-row{align-items:center;gap:.45rem;display:flex}.layer-count{text-align:center;min-width:3.75rem;font-family:var(--font-mono);font-size:1rem}.layer-count-max{color:var(--ink-muted);font-size:.85rem;font-weight:500}.dim-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;display:grid}.dim-metric{background:#f7f9fc;border-left:3px solid #0000;border-radius:12px;flex-direction:column;gap:.2rem;padding:.55rem .65rem .55rem .75rem;display:flex}.dim-metric-label{color:var(--ink-muted);font-size:.68rem;font-weight:600}.dim-metric-value{font-family:var(--font-mono);color:var(--ink);font-size:1.15rem;font-weight:700;line-height:1.2}.dim-length{border-left-color:var(--carton-length)}.dim-width{border-left-color:var(--carton-width)}.dim-height{border-left-color:var(--carton-height)}.dim-max{background:#eef1f6;border-left-color:#0000}.dim-max .dim-metric-value{color:var(--ink-muted);font-size:1rem}.weight-metrics,.ratio-metrics{gap:.75rem 1.25rem;display:grid}.weight-metrics{grid-template-columns:1fr 1fr}.ratio-metrics{grid-template-columns:1fr 1fr 1.2fr}.stat-block{flex-direction:column;gap:.2rem;display:flex}.stat-label{color:var(--ink-muted);font-size:.72rem;font-weight:600}.stat-value{font-family:var(--font-mono);color:var(--ink);font-size:1.2rem;font-weight:700;line-height:1.2}.util-block .stat-value{margin-bottom:.35rem}.util-track-lg{height:8px}.util-fill-green{background:linear-gradient(90deg,#2f9e6a,#4ec4a8)}.viz-stage{flex-direction:column;height:100%;min-height:420px;padding:1rem 1.15rem 1.1rem;display:flex}.viz-stage-head{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.65rem;display:flex}.viz-stage-title{color:var(--ink);margin:0;font-size:.9rem;font-weight:700}.view-mode-toggle{border:1px solid var(--line);background:#eef1f6;border-radius:999px;padding:3px;display:inline-flex}.view-mode-toggle button{color:var(--ink-muted);transition:background .15s var(--ease), color .15s var(--ease);background:0 0;border:0;border-radius:999px;padding:.35rem .85rem;font-size:.75rem;font-weight:700}.view-mode-toggle button.active{background:var(--accent-blue);color:#fff;box-shadow:0 2px 8px #3d7dd659}.viz-canvas{border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(60% 50% at 50% 55%,#3d7dd60f,#0000),#fafbfd;flex:1;justify-content:center;align-items:center;min-height:280px;display:flex;overflow:hidden}.viz-canvas svg{width:100%;height:100%;min-height:280px}.viz-legend{border-top:1px solid var(--line);flex-wrap:wrap;gap:.65rem 1.25rem;margin-top:.85rem;padding-top:.75rem;display:flex}.viz-legend-item{color:var(--ink-soft);align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;display:inline-flex}.swatch{border-radius:50%;width:8px;height:8px;display:inline-block}.swatch-l{background:var(--carton-length)}.swatch-w{background:var(--carton-width)}.swatch-h{background:var(--carton-height)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.empty-state{text-align:center;color:var(--ink-muted);margin:2rem auto}.auth-screen{background:radial-gradient(ellipse 70% 50% at 20% 0%, #e8913a29, transparent), var(--paper);place-items:center;min-height:100dvh;padding:1.5rem;display:grid}.auth-card{border:1px solid var(--line);border-radius:var(--radius-lg);width:min(100%,400px);box-shadow:var(--shadow);background:#fff;flex-direction:column;gap:.75rem;padding:1.75rem 1.5rem;display:flex}.auth-title{color:var(--brand);margin:0;font-size:1.5rem;font-weight:800}.auth-subtitle{color:var(--ink-muted);margin:0 0 .35rem;font-size:.9rem}.auth-error{color:#c45c4a;margin:0;font-size:.85rem}.auth-switch{color:var(--ink-muted);cursor:pointer;text-align:left;background:0 0;border:0;padding:.35rem 0;font-size:.82rem;text-decoration:underline}.mobile-nav{display:none}.view-enter{animation:viewIn .35s var(--ease) both}@keyframes viewIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.screen-fit{min-height:0}.panel-scroll{overflow:auto}@media (width<=1100px){.pallet-chips{grid-template-columns:repeat(3,minmax(0,1fr))}.input-layout{grid-template-columns:1fr}.guide-panel{position:static}}@media (width<=900px){.app-shell{grid-template-columns:1fr;padding-bottom:4.5rem}.sidebar{display:none}.mobile-nav{z-index:40;border-top:1px solid var(--line);background:#fff;gap:.25rem;padding:.35rem;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav-item{color:var(--ink-muted);background:0 0;border:0;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:.15rem;padding:.45rem .25rem;font-size:.65rem;font-weight:600;display:flex}.mobile-nav-item.active{color:var(--copper);background:var(--copper-soft)}.output-layout{grid-template-columns:1fr}.dim-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ratio-metrics{grid-template-columns:1fr 1fr}.ratio-metrics .util-block{grid-column:1/-1}.dims-row{grid-template-columns:1fr}.workspace-bar,.main{padding-left:1rem;padding-right:1rem}}@media (width<=640px){.pallet-chips{grid-template-columns:1fr 1fr}.choice-row{grid-template-columns:1fr auto}.workspace-desc{display:none}}