body.institutional-demo { --demo-green:#237d74; --demo-soft:#edf7f4; font-size:15px; }
.demo-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:22px; padding:12px 24px; background:#1d2d3d; color:#fff; box-shadow:0 4px 15px #1d2d3d20; }
.demo-brand { background:white; border-radius:10px; padding:7px 12px; flex-shrink:0; }
.demo-brand img { display:block; width:100px; height:34px; object-fit:contain; }
.demo-nav { display:flex; gap:4px; overflow:auto; scrollbar-width:thin; min-width:0; flex:1; }
.demo-nav button { border:0; background:transparent; color:#d7e2ec; padding:10px 13px; border-radius:20px; font:600 15px/1.2 var(--dx-font-h); text-transform:uppercase; letter-spacing:.035em; white-space:nowrap; cursor:pointer; }
.demo-nav button[aria-current="page"] { background:#fff; color:#1d2d3d; }
.demo-back-link { white-space:nowrap; font-size:13px; color:#d7e2ec; text-decoration:underline; text-underline-offset:4px; }
.demo-banner { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding:11px 28px; background:#fff8df; border-bottom:1px solid #e9dfb7; color:#584616; font-size:13px; }
.demo-banner strong { font-size:11px; letter-spacing:.08em; }
.demo-banner button { margin-left:auto; padding:4px; background:transparent; color:inherit; border:0; text-decoration:underline; cursor:pointer; }
.demo-shell { display:grid; grid-template-columns:minmax(0,1fr) 326px; max-width:1840px; margin:auto; gap:24px; padding:28px; align-items:start; }
.demo-main { min-width:0; }
.demo-page-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin:0 0 22px; }
.demo-page-head h1 { font-size:36px; margin:6px 0 8px; }
.demo-page-head p { color:var(--ink-2); font-size:14px; margin:0; max-width:680px; }
.demo-primary,.demo-secondary { border:1px solid var(--line-strong); border-radius:9px; padding:10px 14px; font:600 14px/1.3 var(--dx-font-b); cursor:pointer; white-space:nowrap; }
.demo-primary { background:#2c455d; color:#fff; border-color:#2c455d; }
.demo-secondary { background:#fff; color:#2c455d; }
.demo-primary:hover { background:#1d2d3d; }
.demo-secondary:hover { background:#edf4fa; }
.demo-secondary:disabled { opacity:.45; cursor:default; }
.demo-main .institutional-scope-card { margin-bottom:20px; min-height:105px; }
.demo-main .institutional-scope-card small { display:block; opacity:.8; margin-top:5px; font-size:12px; }
.demo-unit { display:grid; gap:5px; min-width:200px; font-size:12px; }
.demo-unit select { background:#fff; color:#163b3a; border:0; border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; width:100%; }
.demo-coach { position:sticky; top:102px; border:1px solid #c8d8e6; border-radius:14px; background:#fff; padding:22px; box-shadow:0 8px 28px #1d2d3d09; }
.demo-coach-heading { display:flex; justify-content:space-between; gap:8px; font-size:11px; font-weight:600; color:#526c80; }
.demo-progress { margin:14px 0 22px; height:4px; border-radius:4px; background:#e6edf4; }
.demo-progress span { display:block; height:100%; background:var(--demo-green); border-radius:4px; width:10%; }
.demo-coach h2 { font-size:27px; margin:0 0 16px; }
.demo-coach p { color:#455965; font-size:14px; line-height:1.65; margin:0 0 18px; }
.demo-practice { border-left:3px solid var(--demo-green); padding:12px 14px; background:var(--demo-soft); border-radius:0 8px 8px 0; }
.demo-practice strong { color:#17564f; display:block; margin-bottom:6px; }
.demo-coach .demo-step-done { color:#17634b; padding:10px 0; font-size:13px; font-weight:600; }
.demo-coach-controls { display:flex; gap:8px; justify-content:space-between; margin-top:22px; flex-wrap:wrap; }
.demo-step-buttons { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:3px; margin-top:20px; }
.demo-step-buttons button { padding:5px 0; border:1px solid #d6e0e9; background:white; border-radius:4px; color:#3b546a; cursor:pointer; font-size:12px; }
.demo-step-buttons button[aria-current="step"] { background:#2c455d; color:#fff; border-color:#2c455d; }
.demo-coach .demo-coach-foot { font-size:12px; color:#687d8e; margin:18px 0 0; }
.demo-focus { outline:3px solid #237d74; outline-offset:5px; border-radius:12px; scroll-margin-top:115px; }
.demo-main .institutional-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:20px 0; }
.demo-main .institutional-kpis button { display:block; border:1px solid var(--line); border-radius:14px; background:white; text-align:left; cursor:pointer; min-width:0; box-shadow:var(--dx-sh-card); }
.demo-main .institutional-kpis .kpi-card { min-height:130px; padding:15px; }
.demo-main .institutional-kpis .kpi-card>span { min-height:32px; font-size:12px; }
.demo-main .institutional-kpis .kpi-card>strong { font-size:30px; }
.demo-main .institutional-kpis .kpi-card>small { display:block; font-size:11px; }
.demo-card { border:1px solid var(--line); background:white; border-radius:14px; padding:22px; box-shadow:var(--dx-sh-card); margin:20px 0; min-width:0; }
.demo-card-head { display:flex; justify-content:space-between; align-items:start; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.demo-card h2 { font-size:25px; margin:0 0 7px; }
.demo-card h3 { font-size:21px; margin:0 0 8px; }
.demo-card-head p,.demo-small { font-size:13px; color:#5a6d79; margin:0; line-height:1.55; }
.demo-switch { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.demo-switch button { padding:7px 11px; border:1px solid #d4e3dd; border-radius:7px; background:white; color:#385a57; font:500 13px/1.4 var(--dx-font-b); cursor:pointer; }
.demo-switch button[aria-pressed="true"] { background:#237d74; color:white; border-color:#237d74; }
.demo-chart { display:grid; gap:20px; margin:24px 0; }
.demo-bar-row { display:grid; grid-template-columns:110px minmax(0,1fr) 150px; align-items:center; gap:16px; font-size:14px; }
.demo-bar-track { background:#f1f6f4; height:27px; border-radius:7px; overflow:hidden; }
.demo-bar-fill { height:100%; background:#237d74; border-radius:7px; min-width:0; }
.demo-bar-row:nth-child(even) .demo-bar-fill { background:#375c76; }
.demo-bar-row strong { font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }
.demo-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px; }
.demo-grid .demo-card { margin:0; }
.demo-row { border-top:1px solid #e7eeeb; padding:15px 0; }
.demo-row:first-child { border-top:0; }
.demo-row-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }
.demo-row h3 { font-size:20px; margin:0 0 7px; }
.demo-row p { font-size:13px; color:#5a6d79; margin:6px 0; }
.demo-link-button { border:0; background:transparent; color:#176b61; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; font:600 14px/1.4 var(--dx-font-b); text-align:left; }
.demo-badge { border-radius:6px; padding:4px 8px; font-size:11px; white-space:nowrap; display:inline-block; background:#edf4fa; color:#2c455d; }
.demo-badge.high,.demo-badge.risk { color:#89352b; background:#fbeeea; }
.demo-badge.medium { color:#79530c; background:#fff5dc; }
.demo-badge.info,.demo-badge.ok { color:#17634b; background:#e9f5ed; }
.demo-filter { display:flex; gap:14px; align-items:end; flex-wrap:wrap; margin:18px 0; }
.demo-filter label { display:grid; gap:6px; min-width:0; font-size:12px; color:#516974; }
.demo-filter select,.demo-filter input { padding:10px 12px; border:1px solid #cfddd8; border-radius:8px; background:white; font:400 14px/1.4 var(--dx-font-b); color:#183c3a; max-width:100%; }
.demo-table-wrap { overflow:auto; }
.demo-table { width:100%; border-collapse:collapse; font-size:13px; }
.demo-table th { text-align:left; font-weight:600; color:#516974; background:#f5f9f7; padding:12px; white-space:nowrap; }
.demo-table td { padding:14px 12px; border-bottom:1px solid #e4ede8; vertical-align:top; }
.demo-table td:last-child { white-space:nowrap; }
.demo-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.demo-summary>div { background:#f2f7f5; padding:15px; border-radius:10px; }
.demo-summary span { display:block; color:#516974; font-size:12px; }
.demo-summary strong { display:block; font:600 28px/1.3 var(--dx-font-h); margin-top:7px; }
.demo-empty { border:1px dashed #bdcfc7; background:#f8fbfa; border-radius:10px; padding:25px; text-align:center; color:#516974; }
.demo-alert { border:1px solid #d6e3dd; border-left:4px solid #d6a338; padding:18px; border-radius:10px; margin:12px 0; }
.demo-alert.is-read { border-left-color:#a5b9af; background:#f8faf9; }
.demo-alert .demo-row-head { flex-wrap:wrap; }
.demo-alert h3 { font-size:22px; }
.demo-alert p { color:#526570; font-size:14px; margin:10px 0; }
.demo-alert-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.demo-dialog { border:1px solid #d4e0d9; border-radius:16px; padding:26px; width:min(680px,calc(100% - 32px)); max-height:85dvh; overflow:auto; color:#183c3a; background:white; box-shadow:0 25px 80px #1d2d3d33; }
.demo-dialog::backdrop { background:#14243480; }
.demo-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:15px; color:#667e88; font-size:12px; margin-bottom:18px; }
.demo-dialog h2 { font-size:30px; margin:10px 0 18px; }
.demo-dialog p { font-size:15px; line-height:1.65; }
.demo-dialog dl { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.demo-dialog dt { color:#647b84; font-size:12px; }
.demo-dialog dd { margin:5px 0 0; }
.demo-notice { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:300; background:#1d2d3d; color:#fff; padding:12px 20px; border-radius:10px; box-shadow:0 5px 20px #1d2d3d25; font-size:14px; max-width:calc(100% - 32px); }
.demo-notice:empty { display:none; }
.demo-skip { position:absolute; left:10px; top:-100px; padding:10px 20px; background:white; z-index:500; }
.demo-skip:focus { top:10px; }
@media (max-width:1200px) { .demo-shell { grid-template-columns:minmax(0,1fr) 290px; padding:20px; gap:18px; } .demo-main .institutional-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .demo-grid { grid-template-columns:1fr; } .demo-coach { padding:18px; } .demo-nav button { padding:10px; font-size:14px; } }
@media (max-width:900px) { .demo-shell { grid-template-columns:1fr; } .demo-coach { position:static; grid-row:1; } .demo-coach #demo-instruction { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; } .demo-coach h2 { grid-column:1/-1; } .demo-coach-controls { margin-top:10px; } .demo-coach-foot { display:none; } .demo-header { flex-wrap:wrap; gap:10px; padding:10px 16px; } .demo-nav { order:3; flex:1 0 100%; } .demo-back-link { margin-left:auto; } .demo-step-buttons { max-width:400px; } .demo-focus { scroll-margin-top:150px; } }
@media (max-width:560px) { .demo-shell { padding:16px; } .demo-banner { padding:10px 16px; } .demo-banner button { margin-left:0; } .demo-main .institutional-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .demo-main .institutional-scope-card { flex-direction:column; align-items:start; gap:15px; } .demo-unit { width:100%; } .demo-page-head { align-items:start; flex-direction:column; } .demo-coach #demo-instruction { display:block; } .demo-coach h2 { font-size:25px; } .demo-coach p { font-size:13px; margin-bottom:12px; } .demo-card { padding:16px; } .demo-bar-row { grid-template-columns:66px minmax(0,1fr) 95px; gap:10px; font-size:12px; } .demo-bar-track { height:22px; } .demo-summary { grid-template-columns:1fr; } .demo-filter label { flex:1 1 100%; } .demo-filter input,.demo-filter select { width:100%; } .demo-dialog dl { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .institutional-demo *, .institutional-demo *::before, .institutional-demo *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media (max-width:900px) {
  body.institutional-demo { padding-bottom:76px; }
  .demo-coach-controls { position:fixed; left:0; right:0; bottom:0; z-index:200; margin:0; padding:12px 20px; background:#fff; border-top:1px solid #d6e0e9; box-shadow:0 -4px 20px #1d2d3d0a; }
  .demo-notice { bottom:84px; }
}
/* Keep the portal's global form rules from stretching demonstration controls. */
body.institutional-demo button { width:auto; min-width:0; margin:0; box-shadow:none; }
body.institutional-demo .demo-coach-controls button { flex:1 1 auto; }
body.institutional-demo .demo-step-buttons button { width:100%; }
body.institutional-demo .demo-page-head > button { flex-shrink:0; }
body.institutional-demo .demo-unit > span { color:#e8f1ef; }
body.institutional-demo .demo-switch { justify-content:flex-start; }

body.institutional-demo .demo-nav button { flex-shrink:0; }