/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Manufacturing AI · modules 2–10
   planning · digital twin · OEE · quality · analytics · docs · automation
   vision · strategy
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PLANNING ─────────────────────────────────────────────── */
.mps th.wk{text-align:right}
.mps th.wk small{display:block;font-weight:500;color:var(--tx-4);margin-top:2px}
.mps tfoot td,.mps tfoot th{border-top:1.5px solid var(--line);font-weight:800;padding-top:12px}
.mps .edit{color:var(--blue-hi);font-weight:700}

.reco{display:flex;gap:12px;padding:13px;border-radius:12px;border:1px solid var(--line-soft);
  background:var(--bg-tile);transition:border-color .22s}
.reco + .reco{margin-top:10px}
.reco:hover{border-color:var(--line-hot)}
.reco__tx{flex:1;min-width:0}
.reco__t{font-size:12.5px;font-weight:700;line-height:1.4}
.reco__s{font-size:11px;color:var(--tx-3);margin-top:4px;line-height:1.45}
.reco__g{display:block;font-size:11px;font-weight:700;color:var(--up);margin-top:6px}
.reco__b{flex-shrink:0;align-self:center;padding:6px 13px;border-radius:9px;font-size:11.5px;font-weight:700;
  color:var(--blue-hi);border:1px solid var(--line);background:var(--bg-card);transition:all .2s}
.reco__b:hover{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent}

.calx{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.calx b{font-size:10.5px;font-weight:600;color:var(--tx-4);padding:5px 0}
.calx a{position:relative;padding:8px 0;border-radius:8px;font-size:12px;color:var(--tx-2);transition:all .2s}
.calx a:hover{background:var(--bg-hover)}
.calx a.dim{color:var(--tx-4)}
.calx a.wk{color:#FB7185}
.calx a.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);font-weight:800}
.calx a i{position:absolute;left:50%;bottom:3px;transform:translateX(-50%);width:4px;height:4px;
  border-radius:50%;background:var(--c,#3B8CFF)}
.calhd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12.5px}
.calhd b{font-weight:700}
.calhd button{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--tx-3)}
.calhd button:hover{color:var(--tx);background:var(--bg-hover)}
.callgd{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line-soft);font-size:11px;color:var(--tx-3)}
.callgd span{display:flex;align-items:center;gap:7px}
.callgd i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* ── 2. DIGITAL TWIN ─────────────────────────────────────────── */
.twin{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#0A1526,#050B16)}
.twin svg{width:100%;height:auto;display:block}
.twin__panel{position:absolute;left:12px;top:12px;z-index:3;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:rgba(7,14,30,.88);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.twin__panel h4{font-size:11px;font-weight:700;color:var(--tx-2);margin-bottom:8px}
.twin__panel li{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--tx-3);padding:2.5px 0}
.twin__panel i{width:8px;height:8px;border-radius:2px;background:var(--c);flex-shrink:0}
.twin__panel b{flex:1;font-weight:500;color:var(--tx-2)}
.twin__panel span{font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.twin__side{position:absolute;right:12px;top:12px;z-index:3;display:grid;gap:5px}
.twin__side button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--tx-2);border:1px solid var(--line);background:rgba(8,16,34,.82);transition:all .2s}
.twin__side button:hover{color:#fff;border-color:var(--line-hot);background:rgba(46,139,255,.22)}
.twin__bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:rgba(7,14,30,.9);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.twin__mode{display:flex;gap:3px}
.twin__mode button{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;
  font-size:11.5px;font-weight:600;color:var(--tx-3);transition:all .2s}
.twin__mode button:hover{color:var(--tx);background:var(--bg-hover)}
.twin__mode button.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6)}
.twin__auto{display:flex;align-items:center;gap:9px;margin-left:auto;font-size:11.5px;color:var(--tx-2)}
.tzone{position:absolute;transform:translate(-50%,-50%);z-index:2;padding:6px 11px;border-radius:9px;
  white-space:nowrap;text-align:center;border:1.5px solid color-mix(in srgb,var(--c,#3B8CFF) 60%,transparent);
  background:rgba(6,13,28,.92);box-shadow:0 5px 16px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
.tzone:hover{transform:translate(-50%,-50%) scale(1.07)}
.tzone__n{font-size:10.5px;font-weight:700;color:#E6EFFB}
.tzone__v{font-size:11px;font-weight:800;color:var(--c,#3B8CFF);margin-top:1px}
/* label positions — viewBox 1000×560, left = x/1000, top = y/560 */
.tzone[data-t="asm-a"] {left:29.0%;top:39.5%}
.tzone[data-t="asm-b"] {left:52.5%;top:32.5%}
.tzone[data-t="wh"]    {left:78.0%;top:33.0%}
.tzone[data-t="cnc"]   {left:60.0%;top:60.0%}
.tzone[data-t="pack"]  {left:44.0%;top:71.0%}
.tzone[data-t="people"]{left:26.0%;top:75.5%}
.tzone[data-t="raw"]   {left:15.5%;top:53.5%}
.tzone[data-t="agv"]   {left:69.5%;top:76.5%}
.tzone[data-t="office"]{left:87.5%;top:79.0%}

.flow3{display:flex;align-items:center;justify-content:space-between;gap:6px}
.flow3__i{flex:1;text-align:center}
.flow3__ic{width:44px;height:44px;margin:0 auto 9px;border-radius:12px;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.flow3__n{font-size:11.5px;font-weight:700}
.flow3__s{font-size:10px;color:var(--tx-3);margin-top:3px}
.flow3__v{font-size:14px;font-weight:800;margin-top:6px}
.flow3__a{flex:0 0 22px;color:var(--tx-4);display:grid;place-items:center}

/* ── 3. MACHINE & OEE ────────────────────────────────────────── */
.sig{display:inline-flex;align-items:flex-end;gap:2px;height:13px}
.sig i{width:3px;border-radius:1px;background:var(--c,#2ED47A)}
.sig i:nth-child(1){height:4px} .sig i:nth-child(2){height:7px}
.sig i:nth-child(3){height:10px} .sig i:nth-child(4){height:13px}
.sig--w i:nth-child(4){background:rgba(126,151,188,.3)}
.sig--l i:nth-child(3),.sig--l i:nth-child(4){background:rgba(126,151,188,.3)}
.sig--off i{background:rgba(251,113,133,.6);height:5px}

.oeebars{display:grid;gap:14px;margin-top:16px}
.oeebar__r{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.oeebar__k{font-size:12.5px;color:var(--tx-2)}
.oeebar__v{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.oeebar__b{height:8px;border-radius:99px;background:var(--bg-tile);overflow:hidden}
.oeebar__f{height:100%;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--c,#3B8CFF),color-mix(in srgb,var(--c,#3B8CFF) 55%,#0A1830))}
.oeelgd{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--line-soft)}
.oeelgd div{display:flex;align-items:flex-start;gap:9px}
.oeelgd b{display:block;font-size:12px;font-weight:700}
.oeelgd span{display:block;font-size:10.5px;color:var(--tx-3);margin-top:2px}

/* ── 4. QUALITY ──────────────────────────────────────────────── */
.qflow{display:flex;align-items:center;justify-content:space-between;gap:4px}
.qstep{flex:1;text-align:center}
.qstep__ic{width:48px;height:48px;margin:0 auto 10px;border-radius:13px;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.qstep__n{font-size:12px;font-weight:700}
.qstep__s{font-size:10.5px;color:var(--tx-3);margin-top:4px}
.qstep__v{font-size:13px;font-weight:800;color:var(--up);margin-top:5px}
.qarrow{flex:0 0 24px;display:grid;place-items:center;color:var(--tx-4);padding-bottom:36px}

.vision{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);
  background:linear-gradient(160deg,#1A2434,#0C1420);aspect-ratio:4/3}
.vision svg{width:100%;height:100%;display:block}
.vbox{position:absolute;border:2px solid var(--c,#2ED47A);border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.vbox::before{content:attr(data-l);position:absolute;left:-2px;top:-19px;padding:1px 7px;border-radius:4px 4px 0 0;
  font-size:9.5px;font-weight:800;color:#08131F;background:var(--c,#2ED47A);white-space:nowrap}
/* sample detection overlays on CAM 01 */
.vbox--a{left:11%;top:36%;width:24%;height:30%}
.vbox--b{left:39%;top:39%;width:24%;height:30%}
.vbox--c{left:67%;top:35%;width:24%;height:30%}

.vlist{display:grid;gap:9px}
.vlist li{display:flex;align-items:center;gap:9px;font-size:12px}
.vlist i{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.vlist b{flex:1;font-weight:500;color:var(--tx-2)}
.vlist span{font-weight:700;font-variant-numeric:tabular-nums}
.vtot{display:grid;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:11.5px}
.vtot div{display:flex;justify-content:space-between;gap:12px}
.vtot span{color:var(--tx-3)} .vtot b{font-weight:800}

.cpk{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.cpk div{text-align:center;padding:9px 6px;border-radius:9px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.cpk b{display:block;font-size:10px;color:var(--tx-4)}
.cpk span{display:block;font-size:14px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}

.ncrbox{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.ncrbox article{padding:13px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.ncrbox__k{font-size:11.5px;color:var(--tx-3)}
.ncrbox__v{font-size:24px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.ncrbox__r{display:flex;gap:12px;margin-top:10px;font-size:10.5px;color:var(--tx-3)}
.ncrbox__r b{display:block;font-size:12.5px;font-weight:800;color:var(--tx);margin-top:2px}

/* ── 5. CAMERA GRID (AI Vision) ──────────────────────────────── */
.cams{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.cam{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft);
  background:linear-gradient(165deg,#1C2736,#0A1220);aspect-ratio:4/3}
.cam svg{width:100%;height:100%;display:block}
.cam__hd{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:8px 10px;
  background:linear-gradient(180deg,rgba(4,10,22,.9),transparent);font-size:11px;font-weight:700;color:#DCE8F8}
.cam__hd button{color:var(--tx-3)}
.cam__hd button:hover{color:#fff}

/* ── 6. AUTOMATION 10-STEP ───────────────────────────────────── */
.wflgd--top{margin-top:0;padding-top:0;border-top:0;margin-bottom:14px}
.astrip{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
.acol{flex:0 0 148px;display:grid;gap:9px}
.anode{position:relative;padding:13px 11px;border-radius:12px;text-align:center;
  border:1.5px solid color-mix(in srgb,var(--c,#3B8CFF) 40%,transparent);
  background:color-mix(in srgb,var(--c,#3B8CFF) 9%,transparent)}
.anode__i{position:absolute;top:-9px;left:9px;padding:1.5px 8px;border-radius:6px;
  font-size:10px;font-weight:800;color:#fff;background:var(--c,#3B8CFF)}
.anode__ic{width:32px;height:32px;margin:6px auto 8px;border-radius:10px;display:grid;place-items:center;
  color:var(--c,var(--blue-hi));background:color-mix(in srgb,var(--c,#3B8CFF) 18%,transparent)}
.anode__t{font-size:11.5px;font-weight:700;line-height:1.3}
.anode__s{font-size:9.5px;color:var(--tx-3);margin-top:3px}
.anode__st{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:10px;font-weight:700}
.anode__st i{width:6px;height:6px;border-radius:50%;background:var(--c)}
.anode__w{font-size:9.5px;color:var(--tx-4);margin-top:4px}

.adet{padding:11px;border-radius:11px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.adet__t{font-size:10.5px;font-weight:700;color:var(--c,var(--blue-hi));margin-bottom:7px}
.adet li{display:flex;align-items:flex-start;gap:6px;font-size:9.5px;color:var(--tx-3);line-height:1.4;padding:2px 0}
.adet li svg{flex-shrink:0;margin-top:1px;color:var(--up)}
.adet__b{height:5px;border-radius:99px;background:var(--bg-card);overflow:hidden;margin-top:9px}
.adet__f{height:100%;border-radius:99px;width:0;transition:width 1s var(--ease);background:var(--c,#3B8CFF)}
.adet__p{font-size:9.5px;font-weight:700;text-align:right;margin-top:4px;color:var(--tx-3)}

.intg{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.intg article{padding:12px;border-radius:11px;border:1px solid var(--line-soft);background:var(--bg-tile)}
.intg__t{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700}
.intg__s{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:10.5px}
.intg__s b{color:var(--up);font-weight:700}

/* ── 7. STRATEGY ─────────────────────────────────────────────── */
.road{overflow-x:auto}
.road table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0 9px}
.road th{font-size:10.5px;font-weight:600;color:var(--tx-4);padding:0 4px 6px;text-align:center}
.road th.lane{text-align:left;width:132px}
.road td.lane{font-size:11.5px;font-weight:600;color:var(--tx-2);white-space:nowrap;padding-right:12px}
.road td.lane span{display:flex;align-items:center;gap:8px}
.road td.bar{padding:0 2px}
.rbar{display:block;height:26px;border-radius:7px;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;
  background:linear-gradient(120deg,var(--c),color-mix(in srgb,var(--c) 58%,#0A1830))}
.roadlgd{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line-soft);font-size:11px;color:var(--tx-3)}
.roadlgd span{display:flex;align-items:center;gap:7px}
.roadlgd i{width:8px;height:8px;border-radius:50%;background:var(--c)}

.riskgrid{width:100%;border-collapse:separate;border-spacing:3px;font-size:11px}
.riskgrid th{font-size:10px;font-weight:600;color:var(--tx-4);padding:4px 6px}
.riskgrid thead th{text-align:center}
.riskgrid tbody th{text-align:left;color:var(--tx-2)}
.riskgrid td{text-align:center;padding:8px 4px;border-radius:5px;font-weight:800;font-size:11.5px;color:#08131F}
.rk1{background:#22C77A} .rk2{background:#8BD44E} .rk3{background:#E8D046}
.rk4{background:#F0A93C} .rk5{background:#E0524C}
.risklgd{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:10.5px;color:var(--tx-3)}
.risklgd span{display:flex;align-items:center;gap:7px}
.risklgd i{width:9px;height:9px;border-radius:3px;background:var(--c)}

.initv{display:grid;gap:12px}
.initv li{display:grid;grid-template-columns:22px 1fr 118px 44px;align-items:center;gap:10px;font-size:12px}
.initv em{font-style:normal;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8B7CFF,#5B4BD6)}
.initv b{font-weight:500;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.initv span{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.initv i{display:block;height:7px;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--c,#3B8CFF),color-mix(in srgb,var(--c,#3B8CFF) 55%,#0A1830))}

/* ── 8. DOC TOOLS ────────────────────────────────────────────── */
.dtool{display:flex;align-items:center;gap:12px;padding:13px;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .22s var(--ease)}
.dtool + .dtool{margin-top:10px}
.dtool:hover{border-color:var(--line-hot);transform:translateX(3px)}
.dtool__t{font-size:12.5px;font-weight:700}
.dtool__s{font-size:10.5px;color:var(--tx-3);margin-top:3px}

/* ── 8c. SPEND ANALYTICS ─────────────────────────────────────── */
/* ป้ายเตือน — ใช้กับตัวเลขที่ "ดูดี" แต่ตีความผิดได้ เช่น Budget Utilization */
.warn{color:#FBBF24;font-weight:700}
/* แถบเวลาอัปเดตบน plantbar */
.upd{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx-4);white-space:nowrap}
.upd svg{flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7}
/* ไอคอนนำหน้าหัวข้อการ์ด AI */
.pnl__ic{flex-shrink:0;margin-right:7px;vertical-align:-3px;stroke:var(--violet);fill:none;stroke-width:1.8}

/* AI insight card — หัวข้อ + คำอธิบาย + มูลค่า + ป้ายความสำคัญ */
.insc{display:grid;grid-template-columns:34px 1fr;gap:11px;padding:11px 12px;border-radius:12px;
  border:1px solid var(--line-soft);background:var(--bg-tile);margin-bottom:9px;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.insc:hover{border-color:var(--line-hot);transform:translateX(2px)}
.insc:last-of-type{margin-bottom:0}
.insc__t{font-size:12.5px;font-weight:700;color:var(--c,var(--tx-2));margin-bottom:3px}
.insc__d{font-size:11px;color:var(--tx-3);line-height:1.5}
.insc__f{display:flex;align-items:center;gap:8px;margin-top:6px}
.insc__v{flex:1;font-size:11.5px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}

/* ABC pyramid — ความกว้างสัมพัทธ์ตามสัดส่วนมูลค่า */
.pyr{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 2px}
.pyr__r{display:flex;align-items:center;gap:14px;width:100%}
.pyr__s{flex:0 0 auto;display:grid;place-items:center;height:56px;color:#08131F;
  font-size:26px;font-weight:800;letter-spacing:.02em;
  clip-path:polygon(var(--l) 0,var(--r) 0,100% 100%,0 100%);background:var(--c)}
.pyr__r:first-child .pyr__s{clip-path:polygon(50% 0,100% 100%,0 100%)}
.pyr__tx{flex:1;min-width:0}
.pyr__v{font-size:13px;font-weight:800;color:var(--tx);font-variant-numeric:tabular-nums}
.pyr__k{font-size:11px;color:var(--tx-3);margin-top:3px;font-variant-numeric:tabular-nums}
.pyr--a{--c:#EE5D52;--l:50%;--r:50%;width:96px}
.pyr--b{--c:#E8942E;--l:24%;--r:76%;width:150px}
.pyr--c{--c:#2FA85B;--l:16%;--r:84%;width:204px}

/* แถบซ้อนสำหรับ Budget vs Actual (แกนสองข้าง) */
.axlbl--r{fill:var(--tx-4)}

/* ── 8b. PROCUREMENT ─────────────────────────────────────────── */
/* เส้นแบ่ง "วันนี้" บนกราฟ — ทุกอย่างทางขวาคือค่าพยากรณ์ ไม่ใช่ยอดจริง */
.nowline{stroke:var(--line-hot);stroke-width:1;stroke-dasharray:3 3}
.fmark{fill:var(--tx-4);font-size:8.5px;letter-spacing:.02em}

/* stacked status bar + legend columns */
.sbar2{display:flex;height:11px;border-radius:99px;overflow:hidden;gap:2px;margin-bottom:16px}
.sbar2 i{display:block;height:100%;background:var(--c)}
.stat4{display:grid;grid-template-columns:repeat(5,1fr);gap:0;text-align:center}
.stat4 div{padding:0 6px;border-right:1px solid var(--line-soft)}
.stat4 div:last-child{border-right:0}
.stat4 b{display:block;font-size:11px;color:var(--tx-3);font-weight:500}
.stat4 span{display:block;font-size:19px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--c,var(--tx))}
.stat4 em{display:block;font-style:normal;font-size:10.5px;color:var(--tx-4);margin-top:2px}

/* supplier grade badge */
.grade{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:6px;
  font-size:11px;font-weight:800;color:#08131F;background:var(--c,#2ED47A)}
.gr-a{--c:#22C77A} .gr-bp{--c:#8BD44E} .gr-b{--c:#E8D046} .gr-cp{--c:#F0A93C} .gr-c{--c:#EE6D4A}

/* contract expiry row */
.expr{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-soft)}
.expr:last-of-type{border-bottom:0}
.expr b{flex:1;font-size:12.5px;font-weight:600;color:var(--tx-2)}
.expr span{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--c,var(--tx-2));font-variant-numeric:tabular-nums}

/* automation / portal tiles */
.autot{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;text-align:center}
.autot--2{grid-template-columns:repeat(2,1fr)}
.autot article{padding:15px 9px;border-radius:12px;border:1px solid var(--line-soft);background:var(--bg-tile);
  transition:all .22s var(--ease)}
.autot article:hover{border-color:var(--line-hot);transform:translateY(-3px)}
.autot .tile{margin:0 auto 10px}
.autot__k{font-size:11px;color:var(--tx-3);line-height:1.35}
.autot__v{font-size:22px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums}
.autot__s{font-size:10.5px;color:var(--tx-4);margin-top:3px}

/* ── 9. GRID ─────────────────────────────────────────────────── */
.g-p1{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.g-p2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
.g-q1{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.g-tw{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:16px}
.g-5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}

@media (max-width:1660px){
  .cams{grid-template-columns:repeat(3,1fr)}
  .g-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1480px){
  .g-p1,.g-q1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .g-p1 > *:first-child,.g-q1 > *:first-child{grid-column:1/-1}
  .g-tw,.g-p2{grid-template-columns:minmax(0,1fr)}
  .cams{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
  .g-p1,.g-q1,.g-5{grid-template-columns:minmax(0,1fr)}
  .g-p1 > *:first-child,.g-q1 > *:first-child{grid-column:auto}
  .qflow,.flow3{flex-wrap:wrap;gap:14px}
  .qarrow,.flow3__a{display:none}
  .qstep,.flow3__i{flex:0 0 45%}
  .ncrbox,.intg,.oeelgd{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:680px){
  .cams{grid-template-columns:minmax(0,1fr)}
  .cpk{grid-template-columns:repeat(2,1fr)}
  .initv li{grid-template-columns:20px 1fr 70px 40px}
  .calx a{padding:6px 0;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .oeebar__f,.adet__f,.initv i{transition:none!important}
}