.approval-page { display:grid; gap:14px; }
    .approval-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
    .approval-title { display:flex; align-items:center; gap:10px; }
    .approval-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .approval-summary { display:grid; grid-template-columns:repeat(4, minmax(150px, 1fr)); gap:10px; }
    .approval-summary-item { display:flex; align-items:center; gap:10px; min-height:76px; border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:12px 14px; background:rgba(var(--ag-fg-rgb),0.025); }
    .approval-summary-icon { width:36px; height:36px; border-radius:8px; display:grid; place-items:center; color:var(--mud-palette-primary); background:rgba(var(--mud-palette-primary-rgb), .10); flex:0 0 auto; }
    .approval-section { border:1px solid var(--mud-palette-lines-default); border-radius:8px; background:rgba(var(--ag-fg-rgb),0.02); }
    .approval-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--mud-palette-lines-default); background:rgba(var(--mud-palette-primary-rgb), .035); }
    .approval-section-body { padding:14px; }
    .approval-section-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
    .approval-workspace { display:grid; grid-template-columns:minmax(260px, 320px) minmax(0, 1fr); gap:14px; align-items:start; }
    .approval-workspace.is-focused { grid-template-columns:minmax(0, 1fr); }
    .approval-primary-flow { display:grid; gap:14px; }
    .approval-support-shell { display:grid; gap:14px; margin-top:14px; }
    .approval-support-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 14px; border:1px solid var(--mud-palette-lines-default); border-radius:8px; background:rgba(var(--mud-palette-primary-rgb), .025); }
    .approval-sidebar { display:grid; gap:12px; position:sticky; top:12px; }
    /* (overlay nền dùng rgba(var(--ag-fg-rgb), a) để tự lật theo Light/Dark) */
    .approval-sidebar-panel { border:1px solid var(--mud-palette-lines-default); border-radius:8px; background:rgba(var(--ag-fg-rgb),0.018); overflow:hidden; }
    .approval-sidebar-head { padding:10px 12px; border-bottom:1px solid var(--mud-palette-lines-default); }
    .approval-sidebar-body { display:grid; gap:8px; padding:10px; max-height:360px; overflow:auto; }
    .approval-type-item { border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:10px; cursor:pointer; background:rgba(var(--ag-fg-rgb),0.012); transition:border-color .15s, background .15s; }
    .approval-type-item:hover, .approval-type-item.is-selected { border-color:var(--mud-palette-primary); background:rgba(var(--mud-palette-primary-rgb),.08); }
    .approval-flow-item { border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:10px; cursor:pointer; background:rgba(var(--ag-fg-rgb),0.012); }
    .approval-flow-item.is-selected { border-color:var(--mud-palette-primary); background:rgba(var(--mud-palette-primary-rgb),.08); }
    .approval-two-col { display:grid; grid-template-columns:minmax(320px, 0.9fr) minmax(0, 1.1fr); gap:14px; }
    .approval-list { display:grid; gap:8px; max-height:460px; overflow:auto; padding-right:4px; }
    .approval-list.compact { max-height:320px; }
    .approval-list-item { border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:10px 12px; cursor:pointer; background:rgba(var(--ag-fg-rgb),0.015); }
    .approval-list-item:hover { border-color:var(--mud-palette-primary); background:rgba(var(--mud-palette-primary-rgb),.05); }
    .approval-flow-designer { display:grid; gap:12px; }
    .approval-focus-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .approval-focus-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .approval-context-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--mud-palette-text-secondary); font-size:.82rem; }
    .approval-flow-health { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin-top:12px; }
    .approval-health-item { border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:10px 12px; background:rgba(var(--ag-fg-rgb),0.018); }
    .approval-palette { display:grid; grid-template-columns:minmax(0, 1fr) minmax(220px, 320px); gap:12px; }
    .approval-palette-block { border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:12px; background:rgba(var(--ag-fg-rgb),0.018); }
    .approval-palette-list { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
    .approval-palette-person { flex:0 0 220px; }
    .approval-role-tools { display:grid; gap:8px; }
    .approval-role-list { display:flex; flex-wrap:wrap; gap:6px; max-height:220px; overflow:auto; padding:2px 2px 8px; align-content:flex-start; }
    .approval-role-list .mud-chip { max-width:100%; }
    .approval-role-list .mud-chip-content { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .approval-palette-caption { display:flex; justify-content:space-between; gap:8px; align-items:center; margin:10px 0 6px; }
    .approval-designer-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(280px, 340px); gap:12px; align-items:stretch; }
    .approval-canvas { position:relative; overflow-x:auto; border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:16px; min-height:292px; background-image:radial-gradient(rgba(var(--ag-fg-rgb),.10) 1px, transparent 1px); background-size:18px 18px; background-color:rgba(var(--ag-fg-rgb),0.012); }
    .approval-node-track { display:flex; align-items:center; min-width:max-content; }
    .approval-node-wrap { display:flex; align-items:center; }
    .approval-node { position:relative; width:380px; border:1px solid var(--mud-palette-lines-default); border-radius:8px; background:var(--mud-palette-surface); box-shadow:0 14px 34px rgba(0,0,0,.22); transition:border-color .15s, transform .15s, box-shadow .15s; overflow:visible; }
    .approval-system-node { width:220px; min-height:84px; border:1px solid rgba(var(--mud-palette-success-rgb), .45); border-radius:8px; padding:12px; display:flex; align-items:center; gap:10px; background:rgba(var(--mud-palette-success-rgb), .08); box-shadow:0 12px 28px rgba(0,0,0,.18); }
    .approval-system-node.is-materialize { border-color:rgba(var(--mud-palette-primary-rgb), .50); background:rgba(var(--mud-palette-primary-rgb), .08); }
    .approval-system-node.is-end { border-color:rgba(var(--mud-palette-success-rgb), .55); background:rgba(var(--mud-palette-success-rgb), .10); }
    .approval-node:hover { border-color:var(--mud-palette-primary); transform:translateY(-1px); box-shadow:0 18px 42px rgba(0,0,0,.28); }
    .approval-node.is-selected { border-color:var(--mud-palette-primary); box-shadow:0 0 0 2px rgba(var(--mud-palette-primary-rgb), .22), 0 18px 42px rgba(0,0,0,.32); }
    .approval-node.is-invalid { border-color:var(--mud-palette-warning); }
    .approval-node-head { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; padding:12px; border-bottom:1px solid var(--mud-palette-lines-default); }
    .approval-node-index { width:38px; height:38px; border-radius:999px; display:grid; place-items:center; font-weight:800; background:var(--mud-palette-primary); color:var(--mud-palette-primary-text); }
    .approval-node-port { position:absolute; top:50%; width:12px; height:12px; border-radius:999px; background:var(--mud-palette-primary); border:2px solid var(--mud-palette-surface); transform:translateY(-50%); z-index:2; }
    .approval-node-port.in { left:-7px; }
    .approval-node-port.out { right:-7px; }
    .approval-node-body { display:grid; gap:12px; padding:12px; }
    .approval-node-config { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:10px; }
    .approval-drop-zone { border:1px dashed var(--mud-palette-primary); border-radius:8px; padding:10px; min-height:104px; background:rgba(var(--mud-palette-primary-rgb),.035); }
    .approval-empty-drop { min-height:48px; display:flex; align-items:center; color:var(--mud-palette-text-secondary); font-size:.82rem; }
    .approval-connector { position:relative; width:82px; height:2px; background:var(--mud-palette-primary); opacity:.8; margin:0 10px; }
    .approval-connector::after { content:""; position:absolute; right:-2px; top:50%; width:9px; height:9px; border-right:2px solid var(--mud-palette-primary); border-top:2px solid var(--mud-palette-primary); transform:translateY(-50%) rotate(45deg); background:transparent; }
    .approval-flow-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .approval-user-card.is-bound { border-color:var(--mud-palette-success); }
    .approval-command { font-family:Consolas, monospace; font-weight:700; color:var(--mud-palette-primary); }
    .approval-empty-state { min-height:132px; display:grid; place-items:center; text-align:center; border:1px dashed var(--mud-palette-lines-default); border-radius:8px; padding:18px; color:var(--mud-palette-text-secondary); }
    .approval-inspector { border:1px solid var(--mud-palette-lines-default); border-radius:8px; padding:12px; background:rgba(var(--ag-fg-rgb),0.018); display:grid; gap:10px; align-content:start; }
    .approval-inspector-section { border:1px solid var(--ag-border); border-radius:8px; padding:10px; display:grid; gap:8px; background:var(--ag-surface-sunken); }
    .approval-inspector-list { display:grid; gap:6px; max-height:176px; overflow:auto; padding-right:2px; }
    .approval-picker-item { border:1px solid var(--ag-border); border-radius:8px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; background:rgba(var(--ag-fg-rgb),.018); transition:border-color .15s, background .15s, transform .15s; }
    .approval-picker-item:hover { border-color:var(--mud-palette-primary); background:rgba(var(--mud-palette-primary-rgb), .08); transform:translateY(-1px); }
    .approval-picker-item.is-picked { border-color:var(--mud-palette-success); background:rgba(var(--mud-palette-success-rgb), .08); cursor:default; }
    .approval-picker-main { min-width:0; }
    .approval-picker-main strong,
    .approval-picker-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .approval-inspector-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--ag-border); }
    .approval-inspector-row:last-child { border-bottom:0; }
    .approval-inspector-value { font-weight:800; color:var(--mud-palette-text-primary); }
    @media (max-width: 960px) {
        .approval-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
        .approval-two-col { grid-template-columns:1fr; }
        .approval-workspace { grid-template-columns:1fr; }
        .approval-sidebar { position:static; }
        .approval-palette { grid-template-columns:1fr; }
        .approval-designer-grid { grid-template-columns:1fr; }
        .approval-flow-health { grid-template-columns:1fr; }
        .approval-node { width:320px; }
        .approval-node-config { grid-template-columns:1fr; }
    }
    @media (max-width: 600px) {
        .approval-summary { grid-template-columns:1fr; }
    }