.demo-page { min-height:100vh; padding: 132px 0 90px; background: var(--ivory); }
    .demo-intro { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:end; margin-bottom:46px; }
    .demo-intro h1 { max-width:800px; margin:0; font-size:clamp(46px,6vw,78px); line-height:1.01; letter-spacing:-.05em; }
    .demo-intro p:not(.eyebrow) { max-width:720px; color:var(--graphite); font-size:18px; }
    .demo-facts { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .demo-facts div { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
    .demo-facts span { display:block; color:var(--graphite); font-size:11px; }
    .demo-facts strong { display:block; margin-top:4px; font-size:22px; }
    .demo-portal { border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--shadow); overflow:hidden; }
    .demo-portal-head { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); }
    .demo-portal-head strong { font-size:18px; letter-spacing:.04em; }
    .demo-portal-head span { color:var(--graphite); font-size:12px; }
    .demo-portal-body { padding:24px; }
    .demo-entry-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
    .demo-entry { min-height:180px; padding:24px; text-align:left; border:1px solid var(--line); border-radius:14px; background:var(--paper); transition:transform .2s,border-color .2s; }
    .demo-entry:hover { transform:translateY(-3px); border-color:var(--petrol); }
    .demo-entry h2 { margin:0; font-size:26px; }
    .demo-entry p { max-width:460px; margin:10px 0 0; color:var(--graphite); }
    .demo-entry small { display:inline-block; margin-top:20px; color:var(--petrol); font-weight:800; letter-spacing:.08em; }
    .demo-hidden { display:none !important; }
    .demo-area-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:18px; }
    .demo-area-head h2 { margin:0; font-size:26px; }
    .demo-area-head p { margin:2px 0 0; color:var(--graphite); font-size:13px; }
    .demo-back { border:1px solid var(--line); border-radius:8px; background:transparent; padding:10px 14px; color:var(--midnight); font-weight:720; }
    .demo-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:5px; margin-bottom:20px; }
    .demo-tab { flex:0 0 auto; border:1px solid var(--line); border-radius:8px; padding:10px 13px; background:var(--paper); color:var(--midnight); font-weight:720; }
    .demo-tab.is-active { color:var(--paper); border-color:var(--petrol); background:var(--petrol); }
    .demo-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .demo-kpi { padding:16px; border:1px solid var(--line); border-radius:12px; }
    .demo-kpi span { color:var(--graphite); font-size:11px; }
    .demo-kpi strong { display:block; margin-top:5px; font-size:26px; }
    .demo-kpi small { display:block; margin-top:3px; color:var(--petrol); }
    .demo-columns { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; margin-top:12px; }
    .demo-card { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
    .demo-card.soft { background:var(--ivory); }
    .demo-card h3 { margin:0 0 14px; font-size:18px; }
    .demo-progress { margin:14px 0; }
    .demo-progress-label { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
    .demo-progress-bar { height:7px; margin-top:7px; overflow:hidden; border-radius:20px; background:var(--mist); }
    .demo-progress-bar i { display:block; height:100%; border-radius:inherit; background:var(--petrol); }
    .demo-alert { margin-top:8px; padding:12px; border-radius:8px; background:var(--paper); }
    .demo-alert strong { display:block; }
    .demo-alert span { color:var(--graphite); font-size:12px; }
    .demo-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
    .demo-table { width:100%; min-width:650px; border-collapse:collapse; }
    .demo-table th,.demo-table td { padding:12px; text-align:left; border-top:1px solid var(--line); font-size:13px; }
    .demo-table th { color:var(--graphite); background:var(--ivory); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
    .demo-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .demo-list { display:grid; gap:9px; }
    .demo-list-item { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:11px; }
    .demo-list-item p { margin:0; }
    .demo-list-item small { color:var(--graphite); }
    .demo-status { color:var(--petrol); font-weight:800; font-size:12px; }
    .demo-status.warn { color:var(--copper); }
    .demo-search { display:flex; gap:9px; }
    .demo-search input { flex:1; min-width:0; padding:12px; border:1px solid var(--line); border-radius:8px; font:inherit; }
    .demo-primary { border:0; border-radius:8px; padding:12px 15px; color:var(--paper); background:var(--petrol); font-weight:800; }
    .demo-trace-result { margin-top:13px; padding:15px; border-radius:10px; background:var(--ivory); }
    .demo-trace-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
    .demo-trace-grid span { color:var(--graphite); font-size:10px; }
    .demo-trace-grid strong { display:block; margin-top:3px; }
    .demo-machines { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
    .demo-machine { padding:15px; border:1px solid var(--line); border-radius:12px; background:var(--paper); text-align:left; }
    .demo-machine.is-active { border-color:var(--petrol); background:rgba(31,90,93,.06); }
    .demo-machine strong,.demo-machine span { display:block; }
    .demo-machine span { margin-top:3px; color:var(--graphite); font-size:12px; }
    .demo-form { margin-top:12px; padding:18px; border:1px solid var(--line); border-radius:12px; }
    .demo-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .demo-form label { font-size:12px; font-weight:800; }
    .demo-form input { width:100%; margin-top:6px; padding:11px; border:1px solid var(--line); border-radius:8px; font:inherit; }
    .demo-form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:15px; }
    .demo-message { color:var(--petrol); font-size:12px; font-weight:800; }
    .demo-cta { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin-top:24px; padding:28px; border-radius:15px; color:var(--paper); background:var(--midnight); }
    .demo-cta h2 { margin:0; font-size:27px; }
    .demo-cta p { margin:6px 0 0; color:rgba(244,240,231,.7); }
    .demo-note { margin-top:22px; color:var(--graphite); font-size:11px; }
    @media(max-width:1000px){
      .demo-intro,.demo-columns{grid-template-columns:1fr}
      .demo-kpis{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:760px){
      .demo-page{padding-top:110px}
      .demo-entry-grid,.demo-stat-grid,.demo-machines,.demo-form-grid{grid-template-columns:1fr}
      .demo-kpis{grid-template-columns:1fr 1fr}
      .demo-portal-body{padding:17px}
      .demo-cta{grid-template-columns:1fr}
      .demo-trace-grid{grid-template-columns:repeat(2,1fr)}
      .demo-search{flex-direction:column}
    }
    @media(max-width:430px){
      .demo-kpis,.demo-trace-grid,.demo-facts{grid-template-columns:1fr}
    }

/* CSP-safe utility classes */
.demo-warning { color: var(--copper) !important; }
.demo-stat-value { font-size: 28px; }
.demo-m0 { margin: 0 !important; }
.demo-mt10 { margin-top: 10px !important; }
.demo-mt12 { margin-top: 12px !important; }
.demo-mt15 { margin-top: 15px !important; }
.demo-mb12 { margin-bottom: 12px !important; }
.demo-muted { color: var(--graphite); }
.demo-progress-82 { width: 82%; }
.demo-progress-64 { width: 64%; background: var(--copper) !important; }
.demo-progress-91 { width: 91%; }
.demo-trace-grid-result { margin-top: 12px; }