:root{
  --ex402smc-bg:#f4f5f3;--ex402smc-panel:#fff;--ex402smc-panel-alt:#f8f9f7;--ex402smc-text:#1e2420;--ex402smc-muted:#626b65;--ex402smc-border:#d8ded9;--ex402smc-border-strong:#bac4bc;--ex402smc-accent:#9d4d29;--ex402smc-accent-dark:#76381d;--ex402smc-green:#526d3d;--ex402smc-green-soft:#edf3e8;--ex402smc-yellow:#9a690b;--ex402smc-yellow-soft:#fff7df;--ex402smc-red:#a42f2f;--ex402smc-red-soft:#fff0ef;--ex402smc-shadow:0 14px 38px rgba(24,36,28,.08);--ex402smc-radius:14px
}
[data-ex402smc-app],[data-ex402smc-app] *{box-sizing:border-box}
[data-ex402smc-app]{color:var(--ex402smc-text);font-family:inherit;line-height:1.45}
.ex402smc-shell{width:min(1540px,calc(100vw - 40px));max-width:none;margin:24px 0 40px 50%;transform:translateX(-50%);background:var(--ex402smc-bg);border:1px solid var(--ex402smc-border);border-radius:20px;overflow:hidden;box-shadow:var(--ex402smc-shadow)}
.ex402smc-shell h1,.ex402smc-shell h2,.ex402smc-shell h3,.ex402smc-shell p{margin-top:0}
.ex402smc-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:30px 34px;color:#fff;background:radial-gradient(circle at 85% 10%,rgba(151,190,113,.28),transparent 32%),linear-gradient(125deg,#171d18 0%,#273128 58%,#49311f 100%)}
.ex402smc-hero h1{margin:4px 0 8px;color:#fff;font-size:clamp(28px,2.4vw,42px);line-height:1.08;letter-spacing:-.025em}.ex402smc-hero p{max-width:900px;margin:0;color:rgba(255,255,255,.82);font-size:16px}.ex402smc-eyebrow{display:block;color:#d7b191;font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.ex402smc-main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(340px,.75fr);gap:18px;padding:18px}.ex402smc-left{min-width:0}.ex402smc-summary{position:sticky;top:20px;align-self:start;display:grid;gap:14px}
.ex402smc-card{background:#fff;border:1px solid var(--ex402smc-border);border-radius:var(--ex402smc-radius);padding:18px;margin-bottom:16px}.ex402smc-card h2{font-size:19px;margin-bottom:4px}.ex402smc-card-sub{color:var(--ex402smc-muted);font-size:12px;margin-bottom:14px}
.ex402smc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ex402smc-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ex402smc-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ex402smc-field{display:flex;flex-direction:column;gap:5px;min-width:0}.ex402smc-field>span{color:#3f4942;font-size:12px;font-weight:750}.ex402smc-field small,.ex402smc-muted{color:var(--ex402smc-muted);font-size:11px}
.ex402smc-field input,.ex402smc-field select,.ex402smc-row input,.ex402smc-row select{width:100%;min-height:40px;margin:0;padding:8px 10px;color:var(--ex402smc-text);background:#fff;border:1px solid var(--ex402smc-border-strong);border-radius:8px;box-shadow:none;font:inherit;font-size:13px}.ex402smc-field input:focus,.ex402smc-field select:focus,.ex402smc-row input:focus,.ex402smc-row select:focus{outline:3px solid rgba(157,77,41,.16);border-color:var(--ex402smc-accent)}
.ex402smc-check{display:flex;align-items:center;gap:8px;min-height:40px}.ex402smc-check input{width:18px;height:18px;margin:0}.ex402smc-check label{font-size:13px;font-weight:650}
.ex402smc-templatebar{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:10px;align-items:end;margin-bottom:14px}.ex402smc-btn{min-height:40px;padding:8px 13px;border:1px solid var(--ex402smc-border-strong);border-radius:8px;background:#fff;color:var(--ex402smc-text);font:inherit;font-size:12px;font-weight:750;cursor:pointer}.ex402smc-btn:hover{border-color:var(--ex402smc-accent);color:var(--ex402smc-accent-dark)}.ex402smc-btn-primary{background:var(--ex402smc-accent);border-color:var(--ex402smc-accent);color:#fff}.ex402smc-btn-danger{color:var(--ex402smc-red)}
.ex402smc-mixhead,.ex402smc-row{display:grid;grid-template-columns:minmax(140px,1.5fr) 90px 100px 110px 100px 44px;gap:8px;align-items:center}.ex402smc-mixhead{padding:0 4px 6px;color:var(--ex402smc-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.ex402smc-row{padding:8px 0;border-top:1px solid #edf0ed}.ex402smc-remove{width:38px;height:38px;border:1px solid var(--ex402smc-border);border-radius:8px;background:#fff;color:var(--ex402smc-red);cursor:pointer;font-size:18px}.ex402smc-addrow{margin-top:10px}.ex402smc-pct{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;margin-top:12px;border-radius:9px;background:var(--ex402smc-panel-alt);font-size:12px}.ex402smc-pct.ok{background:var(--ex402smc-green-soft);color:var(--ex402smc-green)}.ex402smc-pct.bad{background:var(--ex402smc-red-soft);color:var(--ex402smc-red)}
.ex402smc-statgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ex402smc-stat{padding:13px;border:1px solid var(--ex402smc-border);border-radius:11px;background:#fff}.ex402smc-stat b{display:block;font-size:21px;line-height:1.1}.ex402smc-stat span{display:block;margin-top:5px;color:var(--ex402smc-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.ex402smc-stat.accent{background:var(--ex402smc-green-soft);border-color:#cad8c0}
.ex402smc-resultlist{display:grid;gap:8px}.ex402smc-resultrow{display:grid;grid-template-columns:minmax(120px,1.5fr) repeat(4,minmax(90px,1fr));gap:8px;align-items:center;padding:10px 0;border-top:1px solid #edf0ed;font-size:12px}.ex402smc-resultrow:first-child{border-top:0}.ex402smc-resultrow b{font-size:13px}.ex402smc-resulthead{color:var(--ex402smc-muted);font-size:10px;font-weight:800;text-transform:uppercase}.ex402smc-warning{padding:11px 12px;border-radius:9px;background:var(--ex402smc-yellow-soft);color:#76520a;font-size:11px}.ex402smc-error{background:var(--ex402smc-red-soft);color:var(--ex402smc-red)}.ex402smc-note{margin-top:12px;color:var(--ex402smc-muted);font-size:11px}
@media(max-width:1000px){.ex402smc-main{grid-template-columns:1fr}.ex402smc-summary{position:static;grid-row:1}.ex402smc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ex402smc-mixhead{display:none}.ex402smc-row{grid-template-columns:1fr 80px 90px 100px 90px 40px}.ex402smc-resultrow{grid-template-columns:1.4fr repeat(2,1fr)}.ex402smc-resultrow span:nth-child(4),.ex402smc-resultrow span:nth-child(5){display:none}}
@media(max-width:640px){.ex402smc-shell{width:calc(100vw - 16px);margin-top:8px;border-radius:14px}.ex402smc-hero{padding:22px 18px}.ex402smc-main{padding:10px}.ex402smc-card{padding:14px}.ex402smc-grid,.ex402smc-grid-2,.ex402smc-grid-3{grid-template-columns:1fr 1fr}.ex402smc-templatebar{grid-template-columns:1fr}.ex402smc-templatebar .ex402smc-btn{width:100%}.ex402smc-row{grid-template-columns:1fr 76px}.ex402smc-row input[data-key="bagSize"],.ex402smc-row select[data-key="bagUnit"],.ex402smc-row input[data-key="price"]{grid-column:auto}.ex402smc-row .ex402smc-remove{grid-column:2;grid-row:3}.ex402smc-row::before{content:"Component / % / bag details";grid-column:1/-1;color:var(--ex402smc-muted);font-size:9px;text-transform:uppercase}.ex402smc-statgrid{grid-template-columns:1fr 1fr}.ex402smc-resultrow{grid-template-columns:1fr 1fr}.ex402smc-resultrow span:nth-child(3){display:none}}