:root{--ink:#142338;--muted:#67778a;--line:#dce3e9;--bg:#f1f4f7;--green:#0d8068;--accent:#37ddb0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 'Segoe UI','Microsoft YaHei',sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:white;color:var(--ink);border-radius:7px;padding:8px 13px;font-size:14px}button:hover{border-color:var(--green);background:#effaf6}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1ea990;outline-offset:2px}header{height:83px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 3vw;background:#fff}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;margin-right:auto}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:600;color:var(--muted)}.brand-icon{display:grid;place-items:center;background:var(--ink);color:var(--accent);width:42px;height:42px;border-radius:8px;font-size:29px}.local-tag{font-size:13px;color:var(--muted);margin-right:10px}main{max-width:1800px;margin:auto;padding:30px 3vw}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.eyebrow{font-size:13px;color:var(--green);font-weight:700;letter-spacing:2px}h1{font-size:28px;letter-spacing:-1px;margin:6px 0}p{margin:4px 0;color:var(--muted)}.intro p{font-size:14px}.primary{background:var(--ink);color:#fff;padding:15px 22px;font-weight:600;border:none}.primary span{margin-left:24px;color:var(--accent)}.primary:hover{background:#263f5b}.workspace{display:grid;grid-template-columns:390px minmax(0,1fr);gap:22px;align-items:start}.panel,.viewer-panel{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel{padding:20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.panel-head h2{font-size:13px;color:var(--green);font-weight:700;margin:0;letter-spacing:1px}.panel-head h2 span{font-size:16px;color:var(--ink);letter-spacing:0;margin-left:8px}.panel-head>span{font-size:12px;color:var(--muted)}.modes{display:flex;background:var(--bg);padding:9px;border-radius:7px;gap:15px;font-size:14px;flex-wrap:wrap}.modes label{white-space:nowrap}.hint{font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0}input[type=radio],input[type=checkbox]{accent-color:var(--green)}.product{border:1px solid var(--line);border-left:4px solid var(--product-color);border-radius:8px;margin-top:12px;padding:12px}.product-top{display:flex;gap:8px;margin-bottom:9px}.product-top input{font-weight:600;min-width:0;width:100%}.product-top button{padding:3px 9px;color:#ab5260}.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fields label,.settings label,.container-fields label{font-size:12px;color:var(--muted)}input:not([type=radio]):not([type=checkbox]):not([type=range]),select{width:100%;min-width:0;background:#fff;border:1px solid #cbd5df;border-radius:5px;padding:6px 7px;color:var(--ink);font-size:14px}.fields select{padding:7px 2px}.product-opacity{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12px;color:var(--muted)}.product-opacity label{display:flex;align-items:center;gap:8px;flex:1}.product-opacity input{min-width:60px;flex:1}.product-opacity output{min-width:35px;text-align:right}.product details{margin-top:8px;border:0;padding:0}.product summary{font-size:12px}.product .advanced{margin-top:8px}.add{width:100%;border-style:dashed;color:var(--green);margin:14px 0}.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}details{border-top:1px solid var(--line);padding:13px 0}summary{cursor:pointer;font-weight:600;font-size:14px}.text-btn{border:0;color:var(--green);padding-left:0}.container-fields{border-bottom:1px solid var(--line);padding:10px 0}.container-fields .fields{margin-top:5px}.results{min-width:0}#status{font-size:14px;margin-bottom:12px;color:var(--muted);min-height:23px}#status.error{color:#aa3348}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.result-card{border:1px solid var(--line);background:white;border-radius:10px;padding:17px;text-align:left;position:relative}.result-card.selected{border:2px solid var(--green);padding:16px;background:#f4fcf9}.card-title{display:flex;justify-content:space-between;font-weight:700;font-size:18px}.card-sub{font-size:12px;color:var(--muted)}.card-value{font-size:32px;line-height:1.3;font-weight:700;margin:12px 0 4px;font-variant-numeric:tabular-nums}.card-value small{font-size:13px;font-weight:400;color:var(--muted)}.bar{height:4px;background:#e4e9ed;border-radius:3px;margin:10px 0}.bar i{display:block;height:100%;background:var(--green);border-radius:3px}.viewer-panel .panel-head{padding:17px 20px;margin:0}.toolbar{display:flex;gap:6px;align-items:center;padding:0 20px 14px;flex-wrap:wrap}.toolbar button{font-size:12px;padding:5px 10px}.toolbar label{font-size:12px;color:var(--muted);margin-left:auto}.toolbar .active{background:var(--ink);color:white}.opacity-toolbar{display:flex;align-items:center;gap:10px;padding:0 20px 14px;font-size:13px;color:var(--muted);flex-wrap:wrap}.opacity-toolbar input{width:130px}.opacity-toolbar output{min-width:36px;color:var(--ink);font-weight:600}.opacity-toolbar span{font-size:12px}.canvas-wrap{height:430px;background:#142338;position:relative;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.canvas-label{position:absolute;top:17px;left:20px;color:#96a9bc;font-size:12px;pointer-events:none}#selectedBox{position:absolute;bottom:14px;left:20px;color:#c0cedb;font-size:12px;pointer-events:none;right:20px}.playback{display:flex;align-items:center;gap:12px;padding:15px 20px;font-size:12px;flex-wrap:wrap}.playback>input{flex:1;min-width:60px}.playback label{display:flex;align-items:center;gap:5px}.playback label input{width:85px}input[type=range]{accent-color:var(--green)}.legend{display:flex;flex-wrap:wrap;gap:8px 15px;padding:0 20px 15px;font-size:12px;color:var(--muted)}.legend span:before{content:'';display:inline-block;background:var(--c);width:9px;height:9px;border-radius:2px;margin-right:6px}.breakdown{margin-top:18px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap}th{text-align:left;color:var(--muted);font-weight:500;font-size:12px;background:#f6f8fa}th,td{padding:10px 9px;border-bottom:1px solid var(--line)}.empty{padding:25px 0;color:var(--muted);font-size:14px}#metrics{display:flex;gap:25px;font-size:13px;margin-bottom:12px;flex-wrap:wrap}#metrics strong{font-size:18px;margin-right:6px}.notice{background:#fff6df;color:#806321;padding:10px;border-radius:6px;font-size:12px;margin:8px 0}footer{padding:10px 3vw 25px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between}.busy{opacity:.6}.stale .result-card{opacity:.55}@media(min-width:1500px){.workspace{grid-template-columns:430px minmax(0,1fr)}.canvas-wrap{height:520px}}@media(max-width:1050px){.workspace{grid-template-columns:335px minmax(0,1fr)}.card-title{font-size:16px}.result-card{padding:10px}.result-card.selected{padding:9px}.card-value{font-size:26px}}@media(max-width:780px){header{height:auto;min-height:75px;flex-wrap:wrap;padding:14px 5vw;gap:8px}.local-tag{display:none}.brand{font-size:18px}.brand small{font-size:9px}header button{font-size:12px;padding:6px 9px}main{padding:20px 4vw}.intro{align-items:flex-start;gap:15px;flex-direction:column}h1{font-size:24px}.primary{width:100%}.workspace{grid-template-columns:1fr}.canvas-wrap{height:350px}.cards{gap:8px}.card-value{font-size:25px}.toolbar label{margin-left:0}.panel{padding:16px}.playback{padding:12px;gap:8px}.playback button{font-size:12px}.card-sub{font-size:12px}footer span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.calculate-actions{display:flex;gap:10px;align-items:center}.calculate-actions>button{white-space:nowrap}@media(max-width:780px){.calculate-actions{width:100%}.calculate-actions>button{flex:1}.calculate-actions .primary{width:auto}}
.brand-icon{width:52px;height:52px;flex:none;background:linear-gradient(145deg,#1e3c4d,#0c1b2d);border:1px solid #355768;border-radius:10px;box-shadow:inset 0 1px 1px #ffffff38,0 3px 8px #14233824}.brand-icon svg{display:block;width:48px;height:48px;filter:drop-shadow(0 2px 2px #03142080)}
.bound-panel{margin:4px 0 12px;padding:10px 13px;border-radius:7px;background:#eef7f4;color:#215b50;font-size:13px}.bound-panel strong{font-size:17px;font-variant-numeric:tabular-nums}.balance-panel{margin:0 0 17px;padding:14px 16px;border:1px solid #dce9e5;border-radius:8px;background:#f8fbfa;color:var(--ink);font-size:13px}.balance-title{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-weight:700;margin-bottom:8px}.balance-title small{font-weight:400;color:var(--muted)}.balance-center{margin-bottom:10px}.balance-row{display:grid;grid-template-columns:78px minmax(70px,1fr) 78px;gap:9px;align-items:center;margin:7px 0;font-size:12px}.balance-row span:last-child{text-align:right}.balance-bar{height:10px;background:#d9e3e6;border-radius:8px;overflow:hidden}.balance-bar i{display:block;height:100%;background:linear-gradient(90deg,#137b6d,#45c49d)}.balance-panel p{font-size:11px;line-height:1.55;margin:10px 0 0}@media(max-width:780px){.balance-title{display:block}.balance-title small{display:block}.balance-row{grid-template-columns:70px minmax(60px,1fr) 70px;gap:6px}}

/* v1.6: give multi-product entry and its counts more room on desktop. */
@media (min-width:1051px){.workspace{grid-template-columns:minmax(430px,31%) minmax(0,1fr)}.canvas-wrap{height:390px}}
@media (min-width:1500px){.workspace{grid-template-columns:minmax(500px,32%) minmax(0,1fr)}.canvas-wrap{height:420px}}
.product-result{margin-top:10px;border-radius:6px;background:#f3f7f9;padding:8px 10px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.product-result.has-result{background:#e8f8f2;color:#066956;font-weight:700}
.card-counts{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:3px 10px;color:#285347;font-size:11px;line-height:1.5}
.card-counts span{display:inline-flex;align-items:center;gap:4px;max-width:100%;white-space:nowrap}
.card-counts i,.sku-count i{display:inline-block;width:8px;height:8px;flex:none;background:var(--c);border-radius:2px}
.card-counts b{overflow:hidden;text-overflow:ellipsis;max-width:94px;font-weight:500}
.sku-summary{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 17px;margin:-4px 0 18px}
.sku-summary[hidden]{display:none}
.sku-summary-title{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:14px}
.sku-summary-title span{color:var(--muted);font-size:12px;white-space:nowrap}
.sku-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:7px;margin-top:10px;max-height:160px;overflow:auto}
.sku-count{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #e4ece9;border-radius:6px;background:#f7fbfa;min-width:0;font-size:13px}
.sku-count span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sku-count strong{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:#066956}
.sku-summary-note{font-size:11px;margin:9px 0 0;line-height:1.45}

.objective-choice{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--muted)}
.objective-choice select{width:auto;min-width:160px;font-weight:700;color:var(--green)}
.objective-choice[hidden]{display:none}

/* v1.8: compact planning workspace with the product counts as the main result. */
header{height:66px;padding:0 clamp(16px,2vw,40px);gap:10px}
.brand{margin-right:0;font-size:18px;white-space:nowrap}
.brand-icon{width:43px;height:43px}
.brand-icon svg{width:40px;height:40px}
header #status{flex:1;min-width:0;min-height:0;margin:0 10px;padding:0 8px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.local-tag{font-size:11px;margin-right:2px;white-space:nowrap}
main{max-width:none;padding:16px clamp(16px,2vw,40px) 28px}
.intro{gap:16px;margin-bottom:12px;min-height:52px}
.intro-title{display:flex;align-items:baseline;gap:12px}
.intro h1{font-size:24px;margin:0}
.intro .eyebrow{font-size:11px;white-space:nowrap}
.intro p{margin:1px 0 0;font-size:13px}
.intro .primary{padding:9px 15px}
.intro .primary span{margin-left:8px}
.workspace{gap:14px}
@media (min-width:1051px){.workspace{grid-template-columns:minmax(0,42%) minmax(0,1fr)}}
@media (min-width:1500px){.workspace{grid-template-columns:minmax(0,46%) minmax(0,1fr)}}
aside.panel{padding:16px;container-type:inline-size}
aside.panel .panel-head{margin-bottom:11px}
#products{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#products .product{margin-top:0;min-width:0}
@container (min-width:720px){#products{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards{gap:9px;margin-bottom:12px}
.result-card,.result-card.selected{padding:11px 12px;min-width:0;min-height:132px}
.card-title{font-size:15px}
.card-value{font-size:26px;line-height:1.12;margin:5px 0 2px}
.card-value small{font-size:11px}
.bar{height:3px;margin:6px 0}
.card-counts{display:none}
.card-sub{line-height:1.35}
.sku-summary{margin:0 0 12px;padding:14px 16px;border:1px solid #91d5be;border-left:5px solid var(--green);background:linear-gradient(110deg,#effbf6,#f8fdfb 65%,#fff);box-shadow:0 2px 8px #14745e12}
.sku-summary-title{align-items:center;font-size:15px}
.sku-summary-title strong{font-size:16px}
.sku-summary-title span{background:#fff;border:1px solid #cde8dc;border-radius:6px;padding:3px 9px;color:#065f4e;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.sku-summary-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-height:220px;gap:8px;margin-top:9px}
.sku-count{padding:12px 13px;background:#fff;border-color:#d3e9df;font-size:14px}
.sku-count i{width:10px;height:10px}
.sku-count strong{font-size:23px}
.sku-summary-note{font-size:12px;line-height:1.5}
@media (max-width:780px){
  header{height:auto;min-height:64px;padding:10px 4vw}
  header #status{order:5;flex:1 0 100%;text-align:left;margin:2px 0 0;padding:0;white-space:normal}
  main{padding:14px 4vw 24px}
  .intro{align-items:stretch;gap:10px}
  .intro-title{flex-wrap:wrap;gap:4px 10px}
  .intro h1{font-size:22px}
  .workspace{gap:12px}
  .sku-summary-title span{font-size:14px}
}
@media (max-width:540px){
  header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 7px}
  header .brand{grid-column:1;grid-row:1;min-width:0;font-size:16px;gap:7px}
  header .brand small{font-size:8px;letter-spacing:1px}
  header .brand-icon{width:39px;height:39px}
  header .brand-icon svg{width:37px;height:37px}
  header #save{grid-column:2;grid-row:1}
  header #load{grid-column:3;grid-row:1}
  header #status{grid-column:1/-1;grid-row:2;margin:0}
  .modes{font-size:12px;gap:8px;padding:7px}
  .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:3px}
  .result-card,.result-card.selected{flex:0 0 165px;scroll-snap-align:start}
  .sku-summary-grid{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
  .sku-count{padding:8px;font-size:12px}
  .sku-count strong{font-size:16px}
}