:root{
  --bg:#0c0e12; --s1:#14171d; --s2:#181c24; --s3:#1f2531;
  --bd:#2a3140; --bd2:#1b2030;
  --tx:#f3f5fa; --t2:#aab2c2; --t3:#707a8c;
  --red:#e63950; --reds:#ff5d72; --blu:#2f55d4; --blus:#5b7af0;
  --ok:#2fd07a; --wn:#f5b73d; --dg:#ff4d62; --muted:#8a93a6;
  --r:10px; --r-sm:7px;
  --fd:'Sora',system-ui,sans-serif; --fb:'IBM Plex Sans',system-ui,sans-serif; --fm:'IBM Plex Mono',monospace;
  --sh:0 8px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--fb); color:var(--tx); background:var(--bg);
  background-image:
    radial-gradient(1100px 560px at 100% -8%, rgba(230,57,80,.10), transparent 58%),
    radial-gradient(1000px 620px at -10% 108%, rgba(47,85,212,.13), transparent 60%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; font-size:14px;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 12px);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 72%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 72%);
}
.wrap{position:relative; z-index:1; max-width:1560px; margin:0 auto; padding:0 30px 64px}

/* Topbar */
.topbar{display:flex; align-items:center; gap:16px; padding:16px 0 14px; border-bottom:1px solid var(--bd2)}
.brand{display:flex; align-items:center; gap:11px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--red),var(--reds));display:grid;place-items:center;font-family:var(--fd);font-weight:800;color:#fff;font-size:17px;box-shadow:0 4px 14px rgba(230,57,80,.4)}
.brand b{font-family:var(--fd);font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand b span{color:var(--red)}
.brand small{display:block;font-size:9px;letter-spacing:.22em;color:var(--t3);text-transform:uppercase;margin-top:1px}
.spacer{flex:1}
.topnote{color:var(--t3); font-size:12px}

/* Module nav */
.nav{display:flex; gap:7px; flex-wrap:wrap; padding:16px 0 18px}
.navtab{display:inline-flex; align-items:center; gap:8px; background:var(--s2); border:1px solid var(--bd); color:var(--t2); border-radius:10px; padding:9px 15px; font-size:13.5px; font-family:var(--fb); cursor:pointer}
.navtab:hover{border-color:var(--blus); color:var(--tx)}
.navtab.active{background:rgba(230,57,80,.13); border-color:var(--red); color:#fff}
.navico{font-size:14px}
.navdot{width:8px; height:8px; border-radius:50%; background:var(--muted)}
.navdot.online{background:var(--ok); box-shadow:0 0 7px var(--ok)}
.navdot.offline{background:var(--wn)}
.navdot.error{background:var(--dg)}

/* Module head */
.modhead{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap}
.eyebrow{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); font-weight:600}
h1{font-family:var(--fd); font-weight:700; font-size:25px; margin:5px 0 0; letter-spacing:-.02em}
.sub{color:var(--t3); font-size:13px; margin-top:4px}
.headright{display:flex; align-items:center; gap:10px}
.conn{display:flex;align-items:center;gap:9px;background:var(--s2);border:1px solid var(--bd);border-radius:9px;padding:6px 12px;font-size:12.5px;cursor:pointer}
.conn .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.conn.online .dot{background:var(--ok);box-shadow:0 0 0 0 rgba(47,208,122,.6);animation:pulse 2s infinite}
.conn.offline .dot{background:var(--wn)}
.conn b{font-weight:600}
.upd{color:var(--t3); font-size:11.5px; margin-left:8px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,208,122,.5)}70%{box-shadow:0 0 0 7px rgba(47,208,122,0)}100%{box-shadow:0 0 0 0 rgba(47,208,122,0)}}
.health{display:flex; align-items:center; gap:12px; background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:10px 16px}
.health .score{font-family:var(--fd); font-weight:800; font-size:26px; line-height:1}
.health .lab{font-size:11px; color:var(--t3); text-transform:uppercase; letter-spacing:.06em}
.health .hdesc{margin-top:4px; text-transform:none; letter-spacing:0; max-width:230px; white-space:normal; line-height:1.35; color:var(--t2)}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}
@media(max-width:1080px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:13px 15px}
.kpi .l{font-size:12px; color:var(--t2); display:flex; align-items:center; justify-content:space-between}
.kpi .chip{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:13px}
.kpi .v{font-family:var(--fd); font-weight:700; font-size:27px; margin-top:6px; color:#fff; line-height:1}
.kpi .f{font-size:11px; color:var(--t3); margin-top:5px}
.kpi.clickable{cursor:pointer; transition:border-color .15s, transform .05s}
.kpi.clickable:hover{border-color:var(--blus)}
.kpi.clickable:active{transform:scale(.995)}

/* Views + filters */
.views{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px}
.chip-btn{background:var(--s2); border:1px solid var(--bd); color:var(--t2); border-radius:999px; padding:6px 13px; font-size:12.5px; cursor:pointer; font-family:var(--fb)}
.chip-btn:hover{border-color:var(--blus); color:var(--tx)}
.chip-btn.on{background:rgba(230,57,80,.14); border-color:var(--red); color:#fff}
.filters{display:flex; flex-wrap:wrap; gap:9px; align-items:center; background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:11px 13px; margin-bottom:14px}
input[type=text],select{background:var(--s3); border:1px solid var(--bd); color:var(--tx); border-radius:var(--r-sm); padding:8px 10px; font-size:13px; font-family:var(--fb); outline:none}
input[type=text]{min-width:240px; flex:1}
input::placeholder{color:var(--t3)}
select:focus,input:focus{border-color:var(--blus)}
.filters .right{margin-left:auto; color:var(--t3); font-size:12px; display:flex; align-items:center; gap:10px}
.tl{display:inline-flex; gap:4px; align-items:center}
.tl i{width:10px; height:10px; border-radius:50%; background:var(--s3); display:inline-block; border:1px solid var(--bd)}
.tl i.on-g{background:var(--ok); box-shadow:0 0 8px var(--ok); border-color:var(--ok)}
.tl i.on-a{background:var(--wn); box-shadow:0 0 8px var(--wn); border-color:var(--wn)}
.tl i.on-r{background:var(--dg); box-shadow:0 0 8px var(--dg); border-color:var(--dg)}

/* Table + pager */
.tablecard{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); overflow:hidden}
.tw{overflow:auto; max-height:64vh}
table{width:100%; border-collapse:collapse; font-size:13px; min-width:960px}
thead th{position:sticky; top:0; background:#11141a; z-index:2}
th{text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--t3); font-weight:600; padding:11px 14px; border-bottom:1px solid var(--bd); white-space:nowrap; cursor:pointer; user-select:none}
th:hover{color:var(--t2)}
td{padding:11px 14px; border-bottom:1px solid var(--bd2); vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:nth-child(even){background:rgba(255,255,255,.012)}
tbody tr:hover{background:var(--s2)}
tbody tr:last-child td{border-bottom:none}
.tnum{font-family:var(--fm); font-weight:600; color:var(--blus); white-space:nowrap}
.ttitle{max-width:360px; line-height:1.35}
.nowrap{white-space:nowrap}
.muted{color:var(--t3)}
.empty{padding:40px; text-align:center; color:var(--t3)}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; border:1px solid transparent; white-space:nowrap}
.b-red{background:rgba(255,77,98,.13); color:#ff8694; border-color:rgba(255,77,98,.25)}
.b-amber{background:rgba(245,183,61,.13); color:#f7cd76; border-color:rgba(245,183,61,.25)}
.b-green{background:rgba(47,208,122,.13); color:#73e0a6; border-color:rgba(47,208,122,.25)}
.b-blue{background:rgba(91,122,240,.14); color:#9fb1f7; border-color:rgba(91,122,240,.26)}
.b-muted{background:rgba(138,147,166,.13); color:#b3bacb; border-color:rgba(138,147,166,.22)}
.pcode{font-family:var(--fm); font-size:10.5px; color:var(--t3); margin-left:5px}
.pager{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-top:1px solid var(--bd); font-size:12.5px; color:var(--t3); flex-wrap:wrap}
.pg-ctrl{display:flex; align-items:center; gap:10px}
.pg-pos{color:var(--t2)}
.pg-btn{background:var(--s3); border:1px solid var(--bd); color:var(--tx); border-radius:7px; padding:6px 12px; font-size:12.5px; cursor:pointer; font-family:var(--fb)}
.pg-btn:hover:not(:disabled){border-color:var(--blus)}
.pg-btn:disabled{opacity:.4; cursor:default}

/* Loader + error */
.loader{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:90px 20px 80px; text-align:center}
.spinner{width:48px; height:48px; border-radius:50%; border:3px solid rgba(255,255,255,.10); border-top-color:var(--red); border-right-color:var(--red); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader .lt{font-family:var(--fd); font-weight:700; font-size:18px}
.loader .ls{color:var(--t3); font-size:13px; max-width:380px; line-height:1.5}
.dots::after{display:inline-block; width:1.1em; text-align:left; content:''; animation:dots 1.4s steps(1,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.errbox{display:flex; flex-direction:column; align-items:center; gap:12px; padding:70px 20px; text-align:center}
.errbox .ei{font-size:34px}
.errbox .et{font-family:var(--fd); font-weight:700; font-size:18px}
.errbox .es{color:var(--t3); font-size:13px; max-width:430px; line-height:1.5}
.btn{background:var(--red); color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--fb)}
.btn:hover{background:var(--reds)}
.btn.ghost{background:transparent; border:1px solid var(--bd); color:var(--t2)}
.btn.ghost:hover{background:var(--s2); border-color:var(--blus); color:var(--tx)}
.linkbtn{background:none; border:none; color:var(--blus); font-size:12.5px; cursor:pointer; text-decoration:underline; font-family:var(--fb)}

/* Placeholder tiles (scaffolded modules) */
.placard{background:var(--s1); border:1px dashed var(--bd); border-radius:var(--r); padding:28px; text-align:center; color:var(--t3)}
.placard .pt{font-family:var(--fd); font-weight:700; font-size:18px; color:var(--tx); margin-bottom:6px}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
@media(max-width:1080px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:14px 15px; opacity:.55}
.tile .l{font-size:12px; color:var(--t2)} .tile .v{font-family:var(--fd); font-weight:700; font-size:24px; margin-top:6px}

/* Drilldown */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:60; display:none}
.panel{position:fixed; top:0; right:0; height:100vh; width:min(440px,92vw); background:var(--s1); border-left:1px solid var(--bd); box-shadow:var(--sh); z-index:61; transform:translateX(100%); transition:transform .22s ease; overflow-y:auto; padding:22px}
.panel.open{transform:none}
.panel h2{font-family:var(--fd); font-size:18px; margin:6px 0 12px; line-height:1.3}
.xbtn{background:var(--s3); border:1px solid var(--bd); color:var(--tx); width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:16px}
.drow{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--bd2); font-size:13px}
.drow .k{color:var(--t3)} .drow .vv{font-weight:600; text-align:right}
.drow .vv.breach,.drow .vv.over{color:var(--reds)}
.drow .vv.ok{color:var(--ok)}
.sugg{background:var(--s2); border:1px solid var(--bd); border-radius:9px; padding:13px; margin-top:14px}
.sugg .e{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--red); font-weight:600; margin-bottom:5px}

.foot{margin-top:30px; color:var(--t3); font-size:11.5px; text-align:center}

/* ===== Executive report (Health + Demand) ===== */
.ex-tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ipt{background:var(--s2); border:1px solid var(--bd); color:var(--tx); border-radius:8px; padding:8px 11px; font-size:13px; font-family:var(--fb); cursor:pointer}
.ipt:hover{border-color:var(--blus)}
.kpi-sub{font-size:11px; color:var(--t3); margin-top:3px}
.kpi.pos .v{color:var(--ok)} .kpi.neg .v{color:var(--dg)}
.b-muted{background:#2a313f; color:var(--t2); border:1px solid var(--bd)}

.card{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:16px; margin-bottom:14px}
.card-t{font-family:var(--fd); font-weight:600; font-size:13px; color:var(--tx); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.src{font-family:var(--fb); font-weight:400; font-size:11px; color:var(--t3); text-transform:none; letter-spacing:0}
.chart-empty{color:var(--t3); font-size:13px; padding:26px; text-align:center}

.rptbanner{border:1px solid var(--bd); border-left:3px solid var(--ok); background:var(--s1); border-radius:var(--r); padding:12px 16px; margin-bottom:16px}
.rptbanner.demo{border-left-color:var(--wn)}
.rb-1{font-size:14px; color:var(--tx); display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rb-client{font-family:var(--fd); font-weight:700}
.rb-period{color:var(--t2)} .rb-dates{color:var(--t3); font-size:12.5px}
.rb-sep{color:var(--t3)} .rb-2{font-size:12px; color:var(--t3); margin-top:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.rb-tag{background:var(--wn); color:#1a1305; border-radius:5px; padding:1px 7px; font-size:11px; font-weight:600}
.rb-src{color:var(--ok); font-weight:600} .rptbanner.demo .rb-src{color:var(--wn)}

.rsec{margin-bottom:26px}
.rsec-h{display:flex; align-items:baseline; gap:12px; margin:6px 0 14px; border-bottom:1px solid var(--bd2); padding-bottom:8px}
.rsec-h h2{font-family:var(--fd); font-size:20px; font-weight:700; color:var(--tx); margin:0}
.rsec-q{color:var(--t3); font-size:13px}

.health-top{display:grid; grid-template-columns:230px 1.1fr 1fr; gap:14px; margin-bottom:14px}
.score-card{display:flex; flex-direction:column; align-items:center}
.gauge{width:150px; height:150px; margin:6px 0}
.gauge-num{font-family:var(--fd); font-weight:800; font-size:38px; fill:var(--tx)}
.gauge-sub{font-size:11px; fill:var(--t3)}
.score-label{border-radius:999px; padding:5px 16px; font-family:var(--fd); font-weight:700; font-size:14px; margin-top:4px}
.facs{display:flex; flex-direction:column; gap:9px}
.fac{display:grid; grid-template-columns:1fr 90px 30px; gap:10px; align-items:center}
.fac-l{font-size:12px; color:var(--t2)} .fac-w{color:var(--t3); font-size:11px}
.fac-bar{height:7px; background:var(--s3); border-radius:4px; overflow:hidden}
.fac-fill{display:block; height:100%; border-radius:4px}
.fac-v{font-size:12px; color:var(--tx); text-align:right; font-variant-numeric:tabular-nums}
.narrs{display:flex; flex-direction:column; gap:10px}
.narr-h{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px}
.narr-h.g{color:var(--ok)} .narr-h.b{color:var(--blus)} .narr-h.a{color:var(--wn)}
.narr-i{font-size:12.5px; color:var(--t2); line-height:1.4; margin-bottom:2px}

.ex-kpis{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:14px}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px}
.mini-v{font-family:var(--fd); font-weight:800; font-size:26px; color:var(--tx); margin:2px 0 6px}
.mini-vs{font-size:13px; color:var(--t3); font-weight:400}
.mini-s{font-size:11px; color:var(--t3); margin-top:6px}
.spark{width:100%; height:42px; display:block}
.mini-dual{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--t3); margin-top:4px}
.mini-dual span{display:flex; align-items:center; gap:5px; white-space:nowrap}
.d-b,.d-g{width:9px; height:9px; border-radius:2px; display:inline-block} .d-b{background:#2f55d4} .d-g{background:#2fd07a}

.insights{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-bottom:14px}
.insight{background:var(--s1); border:1px solid var(--bd); border-left:3px solid var(--blu); border-radius:var(--r-sm); padding:11px 13px}
.ins-t{font-size:13px; color:var(--tx); font-weight:600; line-height:1.3}
.ins-s{font-size:11.5px; color:var(--t3); margin-top:3px}

.chart{width:100%; height:auto; display:block} .chart .ax{fill:var(--t3); font-size:10px}
.lgrow{display:flex; gap:16px; margin-bottom:6px; flex-wrap:wrap}
.lg{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t2)} .lg i{width:11px; height:11px; border-radius:3px; display:inline-block}
.cgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}

.hbars{display:flex; flex-direction:column; gap:7px}
.hbar{display:grid; grid-template-columns:130px 1fr 34px; gap:10px; align-items:center; border-radius:6px; padding:2px 4px}
.hbar.drillable{cursor:pointer} .hbar.drillable:hover{background:var(--s2)}
.hb-l{font-size:12px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hb-track{height:9px; background:var(--s3); border-radius:5px; overflow:hidden}
.hb-fill{display:block; height:100%; border-radius:5px}
.hb-v{font-size:12px; color:var(--tx); text-align:right; font-variant-numeric:tabular-nums}

.donutwrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.donut{width:130px; height:130px; flex:0 0 auto}
.donut-num{font-family:var(--fd); font-weight:800; font-size:22px; fill:var(--tx)} .donut-sub{font-size:10px; fill:var(--t3)}
.legend{display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-width:160px}
.lgi{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--t2); border-radius:6px; padding:2px 4px}
.lgi.drillable{cursor:pointer} .lgi.drillable:hover{background:var(--s2)}
.lgi i{width:11px; height:11px; border-radius:3px; flex:0 0 auto} .lgi-k{flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .lgi-v{color:var(--t3)}

.heatmap{display:flex; flex-direction:column; gap:4px; overflow-x:auto}
.hm-row{display:grid; grid-template-columns:44px repeat(7,1fr); gap:4px}
.hm-day{font-size:11px; color:var(--t3); display:flex; align-items:center}
.hm-cell{height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--tx); background:var(--s3); border:1px solid var(--bd2)}
.hm-hcell{background:transparent; border:none; color:var(--t3); font-size:10px; height:18px}

.attn-i{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:7px 4px; border-bottom:1px solid var(--bd2)}
.attn-i:last-child{border-bottom:none}
.attn-num{font-family:var(--fm); font-size:12px; color:var(--blus); white-space:nowrap} .attn-t{font-size:12.5px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0} .attn-r{white-space:nowrap}

.drill .drill-x{padding:5px 12px; font-size:12px}
.tbl-wrap{overflow-x:auto}
.dtbl{width:100%; border-collapse:collapse; font-size:12.5px}
.dtbl th{text-align:left; color:var(--t3); font-weight:600; padding:7px 9px; border-bottom:1px solid var(--bd); white-space:nowrap}
.dtbl td{padding:7px 9px; border-bottom:1px solid var(--bd2); color:var(--t2)}
.dtbl tr:hover td{background:var(--s2)}

@media (max-width:1100px){ .health-top{grid-template-columns:1fr} .trio{grid-template-columns:1fr} .cgrid{grid-template-columns:1fr} }

/* ===== Risk + Patterns ===== */
.trafficlight{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.tl-card{background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-sm); padding:14px; text-align:center}
.tl-card.clickable{cursor:pointer} .tl-card.clickable:hover{border-color:var(--blus)}
.tl-v{font-family:var(--fd); font-weight:800; font-size:30px} .tl-l{font-size:12px; color:var(--t2); margin-top:4px}

.cov{display:flex; flex-direction:column; gap:4px}
.cov-row{display:flex; justify-content:space-between; font-size:13px; color:var(--tx)} .cov-row b{font-weight:600}
.cov-row span{color:var(--t2)} .cov-s{font-size:11.5px; color:var(--t3); margin-bottom:6px}

.stacked{display:flex; flex-direction:column; gap:8px}
.st-row{display:grid; grid-template-columns:110px 1fr 34px; gap:10px; align-items:center; border-radius:6px; padding:2px 4px}
.st-row.drillable{cursor:pointer} .st-row.drillable:hover{background:var(--s2)}
.st-l{font-size:12px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-track{display:flex; height:14px; background:var(--s3); border-radius:4px; overflow:hidden}
.st-seg{display:block; height:100%} .st-v{font-size:12px; color:var(--tx); text-align:right; font-variant-numeric:tabular-nums}

.matrix{display:flex; flex-direction:column; gap:4px; overflow-x:auto}
.mx-row{display:grid; grid-template-columns:96px repeat(var(--mxcols),minmax(40px,1fr)); gap:4px}
.mx-rh{font-size:11px; color:var(--t3); display:flex; align-items:center; white-space:nowrap}
.mx-cell{height:30px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--tx); background:var(--s3); border:1px solid var(--bd2)}
.mx-ch{background:transparent; border:none; color:var(--t3); font-size:10px; height:auto; white-space:nowrap}

.reccards{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px}
.reccard{background:var(--s2); border:1px solid var(--bd); border-radius:var(--r-sm); padding:13px}
.rc-h{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px}
.rc-t{font-family:var(--fd); font-weight:600; font-size:13.5px; color:var(--tx)}
.rc-sum{font-size:12.5px; color:var(--t2); margin-bottom:8px; line-height:1.4}
.rc-row{font-size:12px; color:var(--t2); margin-bottom:4px; line-height:1.4} .rc-row b{color:var(--t3); font-weight:600; margin-right:4px}
.rc-foot{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; padding-top:8px; border-top:1px solid var(--bd2)}
.rc-cnt{font-size:11px; color:var(--t3); margin-left:auto}

/* ===== Executive Action Rhythm ===== */
.reccards-1{grid-template-columns:1fr}
.rc-meta{display:flex; gap:6px; flex-wrap:wrap; margin:-2px 0 8px}
.rc-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; padding-top:9px; border-top:1px solid var(--bd2)}
.rc-actions .rc-cnt{margin-left:0}
.ns-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.ns-col{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:11px 12px}
.ns-h{font-family:var(--fd); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--t3); padding-bottom:6px; margin-bottom:7px; border-bottom:1px solid var(--bd)}
.ns-i{font-size:12px; color:var(--t2); padding:5px 0; line-height:1.4; border-bottom:1px solid var(--bd2)} .ns-i:last-child{border-bottom:none}
.ns-empty{font-size:12px; color:var(--ok); line-height:1.4; padding:4px 0}
.agenda-actions{display:flex; gap:10px; align-items:center; margin:4px 0 10px}
.agenda-text{width:100%; min-height:280px; box-sizing:border-box; background:var(--bg); color:var(--tx); border:1px solid var(--bd); border-radius:var(--r-sm); padding:11px; font-family:var(--fm); font-size:12px; line-height:1.5; resize:vertical}
.aptbl td{vertical-align:top}

/* ===== Popup modal (animated, blurred backdrop) ===== */
.ex-modal-scrim{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(6,8,12,.5); -webkit-backdrop-filter:blur(7px) saturate(.9); backdrop-filter:blur(7px) saturate(.9); opacity:0; transition:opacity .2s ease}
.ex-modal-scrim.show{opacity:1}
.ex-modal-scrim[hidden]{display:none}
.ex-modal{width:min(940px,100%); max-height:86vh; display:flex; flex-direction:column; background:var(--s2); border:1px solid var(--bd); border-radius:var(--r); box-shadow:0 26px 80px rgba(0,0,0,.62), 0 2px 0 rgba(255,255,255,.02) inset; transform:translateY(14px) scale(.965); opacity:0; transition:transform .24s cubic-bezier(.18,.9,.24,1), opacity .2s ease; overflow:hidden}
.ex-modal-scrim.show .ex-modal{transform:none; opacity:1}
.ex-modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--bd); flex:0 0 auto; background:var(--s3)}
.ex-modal-title{font-family:var(--fd); font-weight:600; font-size:14px; color:var(--tx); line-height:1.3}
.ex-modal-x{flex:0 0 auto; white-space:nowrap}
.ex-modal-body{padding:14px 16px; overflow:auto; flex:1 1 auto}
.ex-modal-body .tbl-wrap{border:none; max-height:none}
.ex-modal-body .agenda-text{min-height:340px}
.modal-caption{font-size:12.5px; color:var(--t2); margin:-2px 0 12px} .modal-caption b{color:var(--tx); font-weight:600}
.modal-tbl{overflow-x:hidden}
.modal-tbl table{table-layout:fixed; width:100%}
.modal-tbl thead th{position:sticky; top:-15px; background:var(--s2); z-index:1; box-shadow:0 1px 0 var(--bd)}
.modal-tbl td{white-space:normal; word-break:break-word; vertical-align:top}
.modal-tbl .c-tk{white-space:nowrap; color:var(--t3); font-family:var(--fm); font-size:11.5px; width:118px}
.modal-tbl .c-ttl{color:var(--tx)}
.modal-tbl .c-num{white-space:nowrap; width:54px}
.modal-tbl th:nth-child(3),.modal-tbl td:nth-child(3){width:96px}
.modal-tbl th:nth-child(4),.modal-tbl td:nth-child(4){width:104px}
.modal-tbl th:nth-child(6),.modal-tbl td:nth-child(6){width:150px}
@media (prefers-reduced-motion:reduce){ .ex-modal-scrim,.ex-modal{transition:none} }

.attn-tbl .ttl{max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.attn-tbl .act{color:var(--t3); min-width:200px}

@media (max-width:1100px){ .trafficlight{grid-template-columns:repeat(2,1fr)} }

/* ===== Action plan + Data quality + Appendix ===== */
.ap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px}
.ap-col{background:var(--s1); border:1px solid var(--bd); border-radius:var(--r); padding:12px}
.ap-h{font-family:var(--fd); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; padding-bottom:7px; margin-bottom:9px; border-bottom:2px solid var(--bd)}
.ap-securiton{color:var(--blus); border-bottom-color:var(--blu)} .ap-client{color:var(--ok); border-bottom-color:var(--ok)}
.ap-joint{color:var(--wn); border-bottom-color:var(--wn)} .ap-vendor{color:var(--reds); border-bottom-color:var(--red)}
.ap-i{margin-bottom:10px} .ap-t{font-size:12.5px; color:var(--tx); font-weight:600; line-height:1.3} .ap-a{font-size:11.5px; color:var(--t3); margin-top:2px; line-height:1.35}
.watch-i{font-size:12.5px; color:var(--t2); padding:5px 0; border-bottom:1px solid var(--bd2)} .watch-i:last-child{border-bottom:none}

.dq-row{display:flex; justify-content:space-between; gap:12px; font-size:12.5px; padding:5px 0; border-bottom:1px solid var(--bd2)}
.dq-row:last-child{border-bottom:none} .dq-row span{color:var(--t2)} .dq-row b{color:var(--tx); font-variant-numeric:tabular-nums; text-align:right}
.defs{padding:0} .defs summary{cursor:pointer; padding:14px 16px; font-family:var(--fd); font-weight:600; font-size:13px; color:var(--tx); list-style:none}
.defs summary::-webkit-details-marker{display:none} .defs summary::before{content:'\25b8 '; color:var(--t3)} .defs[open] summary::before{content:'\25be '}
.defs-body{padding:0 16px 14px} .def-i{font-size:12px; color:var(--t2); line-height:1.45; padding:6px 0; border-top:1px solid var(--bd2)} .def-i b{color:var(--tx); display:block; margin-bottom:1px}

.appx{padding:0} .appx summary{cursor:pointer; padding:13px 16px; font-family:var(--fd); font-weight:600; font-size:13px; color:var(--tx); list-style:none; display:flex; align-items:center; gap:8px}
.appx summary::-webkit-details-marker{display:none} .appx summary::before{content:'\25b8'; color:var(--t3)} .appx[open] summary::before{content:'\25be'}
.appx-n{background:var(--s3); color:var(--t2); border-radius:999px; padding:1px 9px; font-size:11px; font-family:var(--fb)}
.appx .tbl-wrap{padding:0 16px 14px}

@media (max-width:1100px){ .ap-grid{grid-template-columns:repeat(2,1fr)} .ns-grid{grid-template-columns:repeat(2,1fr)} }

/* ===== Microsoft 365 setup / consent ===== */
.placard-actions{margin-top:14px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.perm-list{margin-top:10px; font-size:12px; color:var(--t3)}
.setup-steps{text-align:left; max-width:560px; margin:12px auto 0; padding-left:20px; color:var(--t2); font-size:13px; line-height:1.7}
.setup-steps li{margin-bottom:5px}
.setup-steps code, .placard code{background:var(--s3); border:1px solid var(--bd); border-radius:5px; padding:1px 6px; font-family:var(--fm); font-size:12px; color:var(--blus)}