.demo-page{--demo-ok:#16a34a;--demo-ok-bg:#16a34a1f;--demo-warn:#d97706;--demo-warn-bg:#d9770624;--demo-high:#ea580c;--demo-high-bg:#ea580c24;--demo-danger:#dc2626;--demo-danger-bg:#dc26261f;--demo-info:#2563eb;--demo-info-bg:#2563eb1f;--demo-single:#0d9488;--demo-set:#7c3aed;color:var(--text)}html[data-theme=dark] .demo-page{--demo-ok:#4ade80;--demo-ok-bg:#4ade8029;--demo-warn:#fbbf24;--demo-warn-bg:#fbbf2429;--demo-high:#fb923c;--demo-high-bg:#fb923c29;--demo-danger:#f87171;--demo-danger-bg:#f871712e;--demo-info:#60a5fa;--demo-info-bg:#60a5fa29;--demo-single:#2dd4bf;--demo-set:#a78bfa}.demo-card{background:var(--bg-surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:13px;padding:18px 20px}.demo-card--fill{flex-direction:column;flex:1;min-height:0;display:flex}.demo-card--link{text-decoration:none;transition:transform .16s,border-color .16s;display:block}.demo-card--link:hover{border-color:var(--border-strong);transform:translateY(-2px)}.demo-h1{letter-spacing:-.02em;color:var(--text);margin:0;font-size:20px;font-weight:800}.demo-lead{color:var(--text-2);margin:4px 0 0;font-size:13px;line-height:1.55}.demo-card-title{color:var(--text);margin:0 0 4px;font-size:15px;font-weight:700}.demo-card-sub{color:var(--text-3);margin:0 0 12px;font-size:12px;line-height:1.45}.demo-section-title{color:var(--text);margin:0 0 10px;font-size:14px;font-weight:700}.demo-toolbar,.demo-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.demo-spacer{flex:1}.demo-stack{flex-direction:column;gap:16px;display:flex}.demo-grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;display:grid}.demo-grid-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}@media (max-width:1100px){.demo-grid-2{grid-template-columns:minmax(0,1fr)}.demo-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}.demo-btn{border:1px solid var(--border);background:var(--bg-surface);height:32px;color:var(--text-2);cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:6px;padding:0 12px;font-family:inherit;font-size:12.5px;font-weight:600;display:inline-flex}.demo-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--border-strong)}.demo-btn:disabled{opacity:.45;cursor:default}.demo-btn--primary{background:var(--demo);border-color:var(--demo);color:#fff}.demo-btn--primary:hover{filter:brightness(1.08);color:#fff;background:var(--demo)}.demo-btn--danger{color:var(--demo-danger);border-color:color-mix(in srgb, var(--demo-danger) 45%, transparent)}.demo-btn--sm{height:26px;padding:0 9px;font-size:11.5px}.demo-input,.demo-select{border:1px solid var(--border);background:var(--bg-surface-2);height:32px;color:var(--text);border-radius:8px;padding:0 10px;font-family:inherit;font-size:13px}.demo-input:focus,.demo-select:focus{border-color:var(--brand);background:var(--bg-surface);outline:none}.demo-field{color:var(--text-3);flex-direction:column;gap:4px;font-size:11.5px;font-weight:600;display:flex}.demo-field-hint{color:var(--text-3);font-size:11px;font-weight:500}.demo-range{width:100%;accent-color:var(--demo)}.demo-tabs{background:var(--bg-surface-2);border-radius:10px;gap:4px;width:fit-content;padding:4px;display:flex}.demo-tab{height:30px;color:var(--text-2);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:0 14px;font-family:inherit;font-size:13px;font-weight:600}.demo-tab:hover{color:var(--text)}.demo-tab.is-active{background:var(--bg-surface);color:var(--text);box-shadow:var(--shadow)}.demo-filter-chip{border:1px solid var(--border);background:var(--bg-surface);height:28px;color:var(--text-2);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:0 12px;font-family:inherit;font-size:12px;font-weight:600;display:inline-flex}.demo-filter-chip.is-active{border-color:var(--demo);color:var(--demo);background:color-mix(in srgb, var(--demo) 10%, transparent)}.demo-filter-chip .count{background:var(--bg-surface-2);border-radius:8px;padding:0 6px;font-size:10.5px}.demo-badge{white-space:nowrap;border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:11px;font-weight:700;line-height:1.2;display:inline-flex}.demo-badge--sample{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-badge--upload{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-badge--keyin{background:var(--demo-info-bg);color:var(--demo-info)}.demo-badge--mixed{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-badge--empty{background:var(--bg-surface-2);color:var(--text-3)}.demo-status--ok{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-status--below{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-status--stockout,.demo-sev--critical{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-sev--high{background:var(--demo-high-bg);color:var(--demo-high)}.demo-sev--warn{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-sev--ok{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-type--stockout{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-type--below_ss{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-type--expiry_risk{background:var(--demo-high-bg);color:var(--demo-high)}.demo-type--set_short{background:color-mix(in srgb, var(--demo-set) 16%, transparent);color:var(--demo-set)}.demo-type--recon_diff{background:var(--demo-info-bg);color:var(--demo-info)}.demo-type--settle_diff{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-type--return_pending{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-type--tpl_diff{background:var(--demo-info-bg);color:var(--demo-info)}.demo-act--assemble{background:color-mix(in srgb, var(--demo-set) 16%, transparent);color:var(--demo-set)}.demo-act--purchase{background:var(--demo-info-bg);color:var(--demo-info)}.demo-act--promote{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-act--scrap{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-act--recheck{background:var(--demo-high-bg);color:var(--demo-high)}.demo-act--none{background:var(--bg-surface-2);color:var(--text-3)}.demo-act--noopt{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-unit--single{background:color-mix(in srgb, var(--demo-single) 14%, transparent);color:var(--demo-single)}.demo-unit--set{background:color-mix(in srgb, var(--demo-set) 14%, transparent);color:var(--demo-set)}.demo-wh--stock{background:color-mix(in srgb, var(--demo-single) 12%, transparent);color:var(--demo-single)}.demo-wh--set{background:color-mix(in srgb, var(--demo-set) 12%, transparent);color:var(--demo-set)}.demo-wh--return{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-wh--inspect{background:var(--demo-info-bg);color:var(--demo-info)}.demo-wh--tpl{background:var(--bg-surface-2);color:var(--text-2)}.demo-wh--scrap{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-ch--online{background:var(--demo-info-bg);color:var(--demo-info)}.demo-ch--direct_buy{background:color-mix(in srgb, var(--demo-set) 14%, transparent);color:var(--demo-set)}.demo-ch--homeshopping{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-ch--retail{background:color-mix(in srgb, var(--demo-single) 14%, transparent);color:var(--demo-single)}.demo-ch--exception{background:var(--bg-surface-2);color:var(--text-2)}.demo-cause--match{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-cause--timing{background:var(--bg-surface-2);color:var(--text-2)}.demo-cause--short_ship{background:var(--demo-high-bg);color:var(--demo-high)}.demo-cause--return_pending{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-cause--tpl_lag{background:var(--demo-info-bg);color:var(--demo-info)}.demo-cause--set_unit{background:color-mix(in srgb, var(--demo-set) 14%, transparent);color:var(--demo-set)}.demo-cause--unknown{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-issue--ok{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-issue--warn{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-issue--danger{background:var(--demo-danger-bg);color:var(--demo-danger)}.demo-stage{background:var(--bg-surface-2);color:var(--text-2)}.demo-stage--closed{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-stage--stale{background:var(--demo-warn-bg);color:var(--demo-warn)}.demo-cell{text-align:right;font-variant-numeric:tabular-nums;border-radius:5px;min-width:56px;padding:2px 6px;display:inline-block}.demo-cell--ok{background:var(--demo-ok-bg);color:var(--demo-ok)}.demo-cell--below{background:var(--demo-warn-bg);color:var(--demo-warn);font-weight:600}.demo-cell--stockout{background:var(--demo-danger-bg);color:var(--demo-danger);font-weight:700}.demo-cell--neg{color:var(--demo-danger);font-weight:600}.demo-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;display:grid}@media (max-width:1280px){.demo-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.demo-kpi{background:var(--bg-surface);border:1px solid var(--border);border-top:3px solid var(--border-strong);border-radius:12px;padding:12px 14px}.demo-kpi--good{border-top-color:var(--demo-ok)}.demo-kpi--good .demo-kpi-value{color:var(--demo-ok)}.demo-kpi--warn{border-top-color:var(--demo-warn)}.demo-kpi--warn .demo-kpi-value{color:var(--demo-warn)}.demo-kpi--danger{border-top-color:var(--demo-danger)}.demo-kpi--danger .demo-kpi-value{color:var(--demo-danger)}.demo-kpi-label{color:var(--text-3);font-size:11px;font-weight:600}.demo-kpi-value{letter-spacing:-.02em;color:var(--text);margin-top:2px;font-size:22px;font-weight:800}.demo-kpi-sub{color:var(--text-3);margin-top:2px;font-size:11px}.demo-bar{background:var(--bg-surface-2);border-radius:4px;height:8px;display:flex;overflow:hidden}.demo-bar>span{height:100%}.demo-bar .ok{background:var(--demo-ok)}.demo-bar .below{background:var(--demo-warn)}.demo-bar .stockout{background:var(--demo-danger)}.demo-table{border-collapse:collapse;width:100%;font-size:12.5px}.demo-table th{text-align:left;color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap;padding:6px 8px;font-size:11px;font-weight:700}.demo-table td{border-bottom:1px solid var(--border);color:var(--text);padding:6px 8px}.demo-table .num{text-align:right;font-variant-numeric:tabular-nums}.demo-table tr.is-hit td{background:var(--demo-danger-bg)}.demo-table tr.is-clickable{cursor:pointer}.demo-table tr.is-clickable:hover td{background:var(--bg-hover)}.demo-notice{border:1px solid;border-radius:10px;padding:10px 14px;font-size:12.5px;line-height:1.5}.demo-notice--warn{background:var(--demo-warn-bg);border-color:color-mix(in srgb, var(--demo-warn) 35%, transparent);color:var(--text)}.demo-notice--danger{background:var(--demo-danger-bg);border-color:color-mix(in srgb, var(--demo-danger) 35%, transparent);color:var(--text)}.demo-notice--info{background:var(--demo-info-bg);border-color:color-mix(in srgb, var(--demo-info) 35%, transparent);color:var(--text)}.demo-empty{color:var(--text-3);border:1px dashed var(--border-strong);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:40px 16px;font-size:13px;display:flex}.demo-modal-backdrop{z-index:50;background:#00000061;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.demo-modal{background:var(--bg-surface);border:1px solid var(--border);width:100%;max-width:560px;max-height:90vh;box-shadow:var(--shadow);color:var(--text);border-radius:14px;padding:22px;overflow:auto}.demo-modal--wide{max-width:940px}.demo-modal-title{margin:0 0 14px;font-size:16px;font-weight:800}.demo-modal-actions{justify-content:space-between;align-items:center;gap:8px;margin-top:18px;display:flex}.demo-matrix{border:1px solid var(--border);background:var(--bg-surface);border-radius:10px;flex:1;min-height:0;overflow:auto}.demo-matrix table{border-collapse:separate;border-spacing:0;min-width:max-content;font-size:12.5px}.demo-matrix th{z-index:2;background:var(--bg-surface-2);color:var(--text-2);border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;padding:6px 8px;font-size:11.5px;font-weight:700;position:sticky;top:0}.demo-matrix th .sub{color:var(--text-3);font-size:10px;font-weight:500;display:block}.demo-matrix td{border-bottom:1px solid var(--border);white-space:nowrap;padding:3px 6px}.demo-matrix .sticky-1,.demo-matrix .sticky-2{background:var(--bg-surface);z-index:1;text-align:left;position:sticky}.demo-matrix .sticky-1{left:0}.demo-matrix .sticky-2{left:130px}.demo-matrix th.sticky-1,.demo-matrix th.sticky-2{z-index:3;background:var(--bg-surface-2)}.demo-matrix input{text-align:right;width:76px;height:26px;color:var(--text);font-variant-numeric:tabular-nums;background:0 0;border:1px solid #0000;border-radius:5px;padding:0 6px;font-family:inherit;font-size:12.5px}.demo-matrix input:hover{border-color:var(--border-strong)}.demo-matrix input:focus{border-color:var(--brand);background:var(--bg-surface-2);outline:none}.demo-matrix td.is-dirty input{background:var(--demo-info-bg);border-color:color-mix(in srgb, var(--demo-info) 40%, transparent)}.demo-matrix td.is-invalid input{border-color:var(--demo-danger);background:var(--demo-danger-bg)}.demo-matrix td.is-forecast input{color:var(--text-3);font-style:italic}.demo-matrix .total{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:700}.demo-matrix tfoot td{background:var(--bg-surface-2);text-align:right;font-variant-numeric:tabular-nums;font-weight:700;position:sticky;bottom:0}.demo-flow{width:100%;overflow-x:auto}.demo-flow svg{width:100%;min-width:760px;height:auto;display:block}.demo-flow .box{fill:var(--bg-surface);stroke:var(--border-strong)}.demo-flow .box--accent{fill:color-mix(in srgb, var(--demo) 10%, transparent);stroke:var(--demo)}.demo-flow .box--wms{fill:color-mix(in srgb, var(--demo-single) 10%, transparent);stroke:var(--demo-single)}.demo-flow .box--oms{fill:color-mix(in srgb, var(--demo-set) 10%, transparent);stroke:var(--demo-set)}.demo-flow .box--ext{fill:var(--bg-surface-2);stroke:var(--border-strong);stroke-dasharray:5 3}.demo-flow .lane{fill:none;stroke:var(--border);stroke-dasharray:4 4}.demo-flow .t{fill:var(--text);font-size:12px;font-weight:700}.demo-flow .s{fill:var(--text-3);font-size:10px}.demo-flow .lane-t{fill:var(--text-2);font-size:11px;font-weight:700}.demo-flow .edge-label-bg{fill:var(--bg-surface);opacity:.9}.demo-flow .edge{stroke:var(--text-3);stroke-width:1.6px;fill:none;marker-end:url(#demoArrow)}.demo-flow .edge--alt{stroke:var(--demo-warn);stroke-dasharray:5 3}.demo-flow a.node{cursor:pointer}.demo-flow a.node:hover .box{stroke-width:2.2px}.demo-flow-lane{grid-template-columns:104px 1fr;align-items:start;gap:12px;display:grid}.demo-flow-lane+.demo-flow-lane{margin-top:12px}.demo-flow-role{color:var(--text-2);background:var(--bg-surface-2);text-align:center;border-radius:8px;padding:10px 8px;font-size:12px;font-weight:800}.demo-flow-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}@media (max-width:1100px){.demo-flow-steps{grid-template-columns:repeat(2,1fr)}}.demo-flow-step{border:1px solid var(--border);background:var(--bg-surface);border-radius:10px;padding:9px 11px;text-decoration:none;display:block}.demo-flow-step:hover{border-color:var(--demo);background:var(--bg-hover)}.demo-flow-step .t{color:var(--text);font-size:12.5px;font-weight:700}.demo-flow-step .d{color:var(--text-3);margin-top:3px;font-size:11px;line-height:1.4}.demo-flow-step .m{color:var(--text-2);flex-wrap:wrap;gap:5px;margin-top:5px;font-size:10.5px;display:flex}.demo-board{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}@media (max-width:1200px){.demo-board{grid-template-columns:repeat(3,minmax(0,1fr))}}.demo-board-col{background:var(--bg-surface-2);border:1px solid var(--border);border-radius:10px;min-height:120px;padding:10px}.demo-board-col h4{color:var(--text-2);justify-content:space-between;margin:0 0 8px;font-size:11.5px;font-weight:800;display:flex}.demo-board-card{background:var(--bg-surface);border:1px solid var(--border);cursor:pointer;border-radius:8px;margin-bottom:7px;padding:8px 10px}.demo-board-card:hover{border-color:var(--demo)}.demo-board-card.is-active{border-color:var(--demo);box-shadow:0 0 0 2px color-mix(in srgb, var(--demo) 25%, transparent)}.demo-board-card .no{color:var(--text);font-size:12px;font-weight:700}.demo-board-card .meta{color:var(--text-3);margin-top:3px;font-size:10.5px}.demo-bom{font-size:12.5px}.demo-bom-row{border-bottom:1px solid var(--border);grid-template-columns:1fr 90px 90px 90px;align-items:center;gap:8px;padding:5px 8px;display:grid}.demo-bom-row.is-short{background:var(--demo-danger-bg)}.demo-bom-row .num{text-align:right;font-variant-numeric:tabular-nums}.demo-bom-head{color:var(--text-3);font-size:11px;font-weight:700}.demo-page .dx-datagrid{color:var(--text);background:0 0}.demo-page .dx-datagrid-headers{color:var(--text-2);background:var(--bg-surface-2)}.demo-page .dx-datagrid .dx-header-row>td{color:var(--text-2);font-weight:700}.demo-page .dx-datagrid .dx-row>td{color:var(--text);border-color:var(--border)!important}.demo-page .dx-datagrid-rowsview,.demo-page .dx-datagrid-borders>.dx-datagrid-headers,.demo-page .dx-datagrid-borders>.dx-datagrid-rowsview,.demo-page .dx-datagrid-borders>.dx-datagrid-total-footer{border-color:var(--border)!important}.demo-page .dx-datagrid .dx-row-alt>td{background:color-mix(in srgb, var(--bg-surface-2) 45%, transparent)}.demo-page .dx-datagrid-rowsview .dx-data-row.dx-state-hover>td:not(.dx-focused){background:var(--bg-hover)!important}.demo-page .dx-datagrid .dx-selection.dx-row>td,.demo-page .dx-datagrid .dx-selection.dx-row.dx-state-hover>td{background:var(--brand-weak)!important;color:var(--text)!important}.demo-page .dx-datagrid .dx-datagrid-filter-row{background:var(--bg-surface-2)}.demo-page .dx-datagrid .dx-datagrid-filter-row>td{border-color:var(--border)!important}.demo-page .dx-datagrid-search-panel.dx-texteditor.dx-editor-outlined{box-shadow:inset 0 0 0 1px var(--border);background:var(--bg-surface-2);border-radius:8px}.demo-form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;display:grid}@media (max-width:700px){.demo-form-grid{grid-template-columns:1fr}}.demo-form-grid .demo-field.is-full{grid-column:1/-1}.demo-field--check{justify-content:center}.demo-field--check input[type=checkbox]{accent-color:var(--demo);width:15px;height:15px}.demo-field-static{color:var(--text);padding:6px 0;font-size:13px;font-weight:500}.demo-textarea{resize:vertical;height:66px;padding:7px 10px;line-height:1.45}.demo-helper{border:1px solid var(--border);background:var(--bg-surface-2);border-radius:10px;margin-bottom:14px;padding:12px 14px}.demo-helper .demo-table td,.demo-helper .demo-table th{border-bottom-color:color-mix(in srgb, var(--border) 60%, transparent)}.demo-matrix .cellw{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.demo-matrix td.is-readonly{text-align:right}.demo-matrix td.is-readonly .ro{min-width:76px;color:var(--text-3);font-variant-numeric:tabular-nums;padding:0 6px;display:inline-block}.demo-matrix tfoot td.sticky-1,.demo-matrix tfoot td.sticky-2{z-index:2;text-align:left}.demo-split{flex:1;grid-template-columns:minmax(0,1fr) 320px;gap:16px;min-height:0;display:grid}.demo-split>*{min-width:0;min-height:0}.demo-side{overflow:auto}@media (max-width:1200px){.demo-split{grid-template-columns:1fr}}.demo-cell-actions{gap:5px;display:flex}.demo-cell-actions .demo-btn{height:22px;padding:0 8px;font-size:11px}.demo-matrix th.sticky-1,.demo-matrix td.sticky-1,.demo-matrix th.sticky-2,.demo-matrix td.sticky-2{padding-left:8px;padding-right:8px}.demo-abc--a{background:color-mix(in srgb, var(--demo-danger) 14%, transparent);color:var(--demo-danger);font-weight:700}.demo-abc--b{background:color-mix(in srgb, var(--demo-warn) 14%, transparent);color:var(--demo-warn);font-weight:700}.demo-abc--c{background:var(--bg-surface-2);color:var(--text-3);font-weight:600}
