/* Original packing algorithms and controls remain unchanged. */
:root{--surface:#fff;--muted:#faf8fc;--ink:#2e2435;--subtle:#75627f;--line:#e5dbea;--accent:#5f4474;--danger:#b13e50;--good:#367664}
body{background:#fff;font-family:"Inter","Arial","Microsoft YaHei",sans-serif;font-size:13px;line-height:1.65}
button{border:1px solid #ded0e8;border-radius:24px;min-height:42px;padding:0 16px;font-size:12px;background:#fff;color:#735681}
button:hover{background:#faf6fd;border-color:#b798cc;color:#50305f}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ab88c8;outline-offset:3px}
input,select{border:1px solid #d7c6e2;border-radius:9px;min-height:42px;padding:9px 10px;font-size:12px;color:#3a2547;min-width:0}
label{color:#795d8a;font-size:11px;gap:7px}
.app-shell,.workspace,.input-panel,.visual-panel,.result-panel,.field-grid,.preset-heading,.preset-actions{min-width:0}
.topbar{padding:23px 26px 20px;border-color:#ede4f3;gap:18px;align-items:center;background:#fff}
.topbar h1{font-size:25px;letter-spacing:-.8px;line-height:1.4}.folio{font-size:10px;color:#8e72a0;font-weight:500;margin-bottom:5px}.container-switch{grid-template-columns:34px 185px;gap:9px}
.mode-tabs{display:flex;gap:5px;padding:5px;border:1px solid #e8ddee;border-radius:30px;background:#fbf8fd;margin:18px 25px 0;width:max-content;max-width:calc(100% - 50px);overflow:auto}
.tab{height:39px;min-height:39px;border:0;border-radius:24px;min-width:100px;background:transparent;color:#856394;font-size:12px;padding:0 20px;font-weight:500;white-space:nowrap}.tab.is-active{background:#2d2334;color:#fff}
.workspace{gap:20px;padding:22px 25px;grid-template-columns:minmax(340px,.85fr) minmax(0,1.25fr)}
.input-panel{background:#fff;border:1px solid #e8dcef;border-radius:16px;padding:19px;overflow:hidden}
.panel-heading{border-color:#eee2f5;padding-bottom:15px}.panel-heading h2,.result-panel h2{font-size:17px;font-weight:650;color:#473151}.field-grid{gap:14px}.preset-section{border:1px solid #e8daef;border-radius:13px;background:#fcfafe;padding:15px}.preset-heading h3{font-size:13px;line-height:1.6}.preset-heading{gap:10px}.preset-heading>label{min-width:0}
.preset-table-wrap,.product-table-wrap{min-width:0;max-width:100%;overflow-x:auto;border:1px solid #e5d5ef;border-radius:10px;background:#fff}.preset-table{min-width:385px}.preset-table th,.preset-table td{font-size:10px;padding:9px 8px;border-color:#eadef2}.preset-table th{background:#f9f4fd;color:#815f94}.preset-table tr:hover,.preset-table tr.is-selected{background:#f0e5fa}.preset-table tr.is-selected td:first-child{color:#76518d}.preset-actions{gap:12px}.preset-actions button{font-size:11px;padding:0 12px;border-radius:12px}.orientation-row{gap:11px}.orientation-row label{border-color:#dfcce9;border-radius:10px;padding:10px;font-size:11px;background:#fff}.orientation-row input{accent-color:#8d69a9}
.primary-action{border-radius:25px;background:#2d2334;border-color:#2d2334;color:#fff;min-height:45px;font-size:12px}.primary-action:hover{background:#483154;color:#fff;border-color:#483154}
.visual-panel{gap:17px}.metrics{border:1px solid #e6d7ef;border-radius:15px;overflow:hidden;background:#fff}.metric{padding:15px;border-color:#ece0f3}.metric span{font-size:10px;color:#826491}.metric strong{font-size:24px;font-weight:650;color:#4b305d}.viewer-frame{border:1px solid #e5d6ee;border-radius:16px;background:#fcfafe;overflow:hidden}
.distance-panel{background:#fff;border:1px solid #e7d9ef;border-radius:12px;padding:15px}.distance-panel strong{font-size:12px;color:#705083}.distance-grid{gap:10px;font-size:11px;color:#795c8b}.load-progress-panel{background:#fcf9ff;border:1px solid #e7d8ef;border-radius:12px;padding:15px}.progress-meta{font-size:11px}.progress-meta strong{color:#6b4980}.progress-meta span{color:#856695}.view-toolbar{gap:7px}.view-toolbar button{border-radius:23px;font-size:11px;min-height:39px}.view-toolbar button.is-active{background:#ede2f7;color:#68467f;border-color:#d8bde8}
.result-panel{background:#fff;border:1px solid #e6d6ef;border-radius:15px;padding:19px;overflow-x:auto}.result-text{font-size:12px;color:#72537f;line-height:1.8;min-width:0}.result-text table{min-width:480px}.result-text th,.result-text td{border-color:#e7d9ef;padding:9px;font-size:11px}.result-text th{background:#faf5fd}.table-toolbar{gap:8px;flex-wrap:wrap}.table-toolbar select{min-width:120px}.product-table{min-width:620px}.product-table th,.product-table td{border-color:#e8d9f0;font-size:11px;padding:9px}.product-table th{background:#faf5fd}.product-table input,.product-table select{font-size:11px;min-height:38px}.remove-row{border-radius:9px;min-height:35px;background:#fff4f6;color:#a54458;border-color:#efdae1}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr)}.input-panel{padding:20px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.topbar{padding:18px;flex-wrap:wrap;align-items:start;gap:14px}.topbar h1{font-size:23px}.container-switch{width:100%;grid-template-columns:33px minmax(0,1fr)}.mode-tabs{margin:15px 17px 0;max-width:calc(100% - 34px);width:calc(100% - 34px);gap:2px;padding:4px}.tab{min-width:0;flex:1;padding:0 13px;font-size:11px}.workspace{padding:17px;gap:17px}.input-panel{padding:15px;border-radius:13px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.preset-section{padding:12px}.preset-heading{flex-wrap:wrap}.preset-heading label{width:100%}.preset-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-actions button{font-size:10px;white-space:normal;padding:7px;min-height:42px}.preset-table{min-width:370px}.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{padding:12px 9px}.metric strong{font-size:21px}.metric span{font-size:9px}.viewer-frame{min-height:320px}.distance-grid{grid-template-columns:repeat(2,minmax(0,1fr));font-size:10px}.result-panel{padding:16px}.orientation-row{flex-wrap:wrap}.orientation-row label{font-size:10px}.view-toolbar button{font-size:10px;padding:0 12px}.topbar .folio{font-size:9px}.panel-heading{gap:9px}.panel-heading h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* V5: a wide working surface, no nested narrow card. */
.app-shell{width:100%;max-width:none}.workspace{padding:16px;gap:22px;grid-template-columns:minmax(360px,.8fr) minmax(0,1.3fr)}.input-panel{padding:0;border:0;border-radius:0;overflow:visible}.topbar{padding:18px 20px}.topbar a{font-size:12px;color:#604d81}.container-switch{grid-template-columns:75px 155px;max-width:290px}.preset-table-wrap{max-height:210px}.viewer-frame{min-height:460px}.plan-selector{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.plan-selector select{width:180px}.plan-selector strong{font-size:12px;font-weight:500;flex-basis:100%}.sku-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px}.sku-legend span{display:flex;align-items:center;gap:6px}.sku-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}.view-toolbar{align-items:end;flex-wrap:wrap}.view-toolbar label{display:flex;align-items:center}.view-toolbar select{width:110px}.visual-panel{align-content:start}button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1000px){.workspace{grid-template-columns:1fr}.viewer-frame{min-height:420px}}@media(max-width:640px){.workspace{padding:12px}.viewer-frame{min-height:320px}.container-switch{max-width:none}.topbar{gap:12px}.plan-selector button{padding:0 12px}.plan-selector select{width:155px}}

.cylinder-rule{padding:16px 20px;border:1px solid #e7e1ed;border-radius:14px;background:#fcfbff;margin-bottom:18px;font-size:13px}.cylinder-rule p{font-size:12px;color:#71657d;margin:8px 0;line-height:1.6}.cylinder-rule label{display:flex;gap:8px;align-items:center}.cylinder-rule input[type=checkbox]{width:16px;min-width:16px;height:16px;accent-color:#705495}