/* LAYOUT: sticky Security Control Panel above a two-column console (sidebar + views).
   Amber means shielded or redacted. Emerald means verified. One committed dark look. */
:root{
  color-scheme:dark;
  --bg:#0a0d10; --panel:#10151a; --panel-2:#161d23; --line:#212b32; --line-2:#2e3a43;
  --fg:#e8eef1; --fg-2:#a6b5bd; --fg-3:#7a8c95;
  --ok:#34d391; --ok-bg:rgba(52,211,145,.11); --ok-line:rgba(52,211,145,.38);
  --amber:#f5b240; --amber-bg:rgba(245,178,64,.10); --amber-line:rgba(245,178,64,.45);
  --crit:#f0645b; --crit-bg:rgba(240,100,91,.12);
  --warn:#ec835a; --warn-bg:rgba(236,131,90,.12);
  --info:#6da7ec; --info-bg:rgba(109,167,236,.12);
  --vio:#a69cf0; --vio-bg:rgba(166,156,240,.12);
  --s1:#3987e5; --s2:#199e70;
  --sc1:#86b6ef; --sc2:#3987e5; --sc3:#1c5cab;
  --liab-1:#8697a1; --liab-2:#5b6c76; --ok-2:#22a874; --ok-3:#187a56;
  --f-display:"IBM Plex Sans Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5;margin:0}
button{font-family:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.wrap{max-width:1500px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono)} .num{font-variant-numeric:tabular-nums}
.label{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;font-weight:600;color:var(--fg-3)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px}
.card-h{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;padding:14px 16px 0}
.card-h h2{font-family:var(--f-display);font-size:17px;font-weight:600;letter-spacing:.01em;margin:0}
.card-b{padding:12px 16px 16px}
.muted{color:var(--fg-3)} .sec{color:var(--fg-2)}

/* control panel */
.cp{background:linear-gradient(180deg,#11171c,#0c1014);border-bottom:1px solid var(--line);z-index:40}
@media(min-width:1100px){.cp{position:sticky;top:env(safe-area-inset-top,0px)}}
.cp-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-block:12px 10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .mk{width:34px;height:34px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;border-radius:6px}
.brand b{font-family:var(--f-display);font-size:19px;letter-spacing:.06em;text-transform:uppercase;display:block;line-height:1.1}
.brand i{font-style:normal;font-size:11.5px;color:var(--fg-3);letter-spacing:.04em}
.seg{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 560px;min-width:0}
.pbtn{--pa:var(--ok);flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:10px;text-align:left;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;padding:8px 12px;transition:background .15s,border-color .15s}
.pbtn[data-p=dev]{--pa:var(--amber)} .pbtn[data-p=admin]{--pa:var(--info)}
.pbtn:hover{background:var(--panel-2)}
.pbtn[aria-pressed=true]{border-color:var(--pa);background:color-mix(in srgb,var(--pa) 10%,var(--panel));box-shadow:0 0 0 1px var(--pa) inset}
.pbtn svg{color:var(--fg-3);flex:none} .pbtn[aria-pressed=true] svg{color:var(--pa)}
.pbtn .pt{display:block;min-width:0;flex:1}
.pbtn .pt b{display:block;font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.pbtn .pt i{display:block;font-style:normal;font-size:11.5px;color:var(--fg-3)}
.pbtn .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;color:var(--fg-3)}
.pbtn[aria-pressed=true] .tag{color:var(--pa);border-color:var(--pa)}
.sess{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12px;color:var(--fg-2)}
.sess .who{display:block;line-height:1.3} .sess .who b{font-weight:500;color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--panel);border-radius:5px;padding:6px 11px;font-size:12.5px;font-weight:500}
.btn:hover{background:var(--panel-2);border-color:var(--fg-3)}
.btn.primary{background:var(--ok);border-color:var(--ok);color:#04150d;font-weight:600}
.btn.primary:hover{background:#4be0a2}
.btn[disabled]{opacity:.65;cursor:default}
.matrix{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:0 12px}
.matrix .label{margin-right:4px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:4px;padding:3px 8px;font-size:12px;color:var(--fg-2);background:var(--panel)}
.chip em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.chip.ok{border-color:var(--ok-line);background:var(--ok-bg);color:var(--fg)} .chip.ok em{color:var(--ok)}
.chip.amb{border-color:var(--amber-line);background:var(--amber-bg);color:var(--fg)} .chip.amb em{color:var(--amber)}
.chip.amb svg{color:var(--amber)} .chip.ok svg{color:var(--ok)}
.chip.den{border-style:dashed} .chip.den em{color:var(--fg-3)}
.scoperow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-block:0 10px}
.scbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--panel);border-radius:4px;padding:3px 10px;font-size:12px;color:var(--fg-2)}
.scbtn:hover{background:var(--panel-2)}
.scbtn[aria-pressed=true]{border-color:var(--ok);background:var(--ok-bg);color:var(--fg)}
.scbtn[aria-pressed=true] svg{color:var(--ok)}
.exitdemo{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--fg-3);font-size:11px;opacity:.35;padding:4px 6px}
.exitdemo:hover,.exitdemo:focus-visible{opacity:1;color:var(--fg)}

/* admin strip */
.astrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:16px;padding:9px 14px;border:1px solid rgba(109,167,236,.35);background:var(--info-bg);border-radius:6px;font-size:12.5px;color:var(--fg-2)}
.astrip b{color:var(--fg);font-weight:500} .astrip .k{font-family:var(--f-mono);color:var(--info)}
.lnk{background:none;border:0;padding:0;color:var(--info);font-size:inherit;text-decoration:underline;text-underline-offset:3px}

/* shell */
.shell{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-block:18px 28px}
@media(min-width:960px){.shell{grid-template-columns:236px minmax(0,1fr);gap:24px}}
.side{min-width:0}
.nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
@media(min-width:960px){.nav{flex-direction:column;overflow:visible}}
.navbtn{flex:none;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;background:transparent;border-radius:6px;padding:9px 11px;color:var(--fg-2)}
.navbtn:hover{background:var(--panel)}
.navbtn[aria-current=page]{background:var(--panel);border-color:var(--line-2);color:var(--fg)}
.navbtn[aria-current=page] svg{color:var(--ok)}
.navbtn .nt{display:block;font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.navbtn .ns{display:none;font-size:11.5px;color:var(--fg-3)}
@media(min-width:960px){.navbtn .ns{display:block}}
.navbtn.locked{opacity:.55}
.sidenote{display:none;margin-top:18px;font-size:12px;color:var(--fg-3);line-height:1.55;border-top:1px solid var(--line);padding-top:14px}
@media(min-width:960px){.sidenote{display:block}}
.sidenote .row{display:flex;gap:7px;align-items:center;color:var(--fg-2);margin-top:5px}
.sidenote .row svg{color:var(--ok)}
.navsep{display:none;margin:12px 11px 4px}
@media(min-width:960px){.navsep{display:block}}

main.view{min-width:0;display:flex;flex-direction:column;gap:16px;animation:rekey .35s ease-out}
@keyframes rekey{from{opacity:.4}to{opacity:1}}
.vhead{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:flex-start}
.vhead h1{font-family:var(--f-display);font-size:28px;font-weight:600;letter-spacing:.005em;line-height:1.15;margin:0;text-wrap:balance}
.vhead p{margin:3px 0 0;color:var(--fg-3);font-size:13px;max-width:62ch}
.vicon{flex:none;width:38px;height:38px;border:1px solid var(--line-2);background:var(--panel);border-radius:6px;display:grid;place-items:center;color:var(--ok);margin-top:2px}
.vright{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.g2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:1180px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g2.wide-l{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.g3{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:1280px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{padding:14px 16px;border-left:1px solid var(--line)} .stat:first-child{border-left:0}
@media(max-width:640px){.stat{border-left:0;border-top:1px solid var(--line)} .stat:first-child{border-top:0}}
.stat .v{font-family:var(--f-display);font-size:30px;font-weight:600;line-height:1.1;margin-top:3px;font-variant-numeric:tabular-nums}
.stat .v small{font-family:var(--f-body);font-size:12px;font-weight:400;color:var(--fg-3);margin-left:5px}
.stat .d{font-size:12px;color:var(--fg-3);margin-top:3px}

/* pills */
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);border-radius:3px;padding:1px 7px;font-size:11.5px;font-weight:500;white-space:nowrap;color:var(--fg-2)}
.pill.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.pill.info{color:var(--info);border-color:rgba(109,167,236,.4);background:var(--info-bg)}
.pill.vio{color:var(--vio);border-color:rgba(166,156,240,.4);background:var(--vio-bg)}
.pill.warn{color:var(--warn);border-color:rgba(236,131,90,.45);background:var(--warn-bg)}
.pill.crit{color:var(--crit);border-color:rgba(240,100,91,.45);background:var(--crit-bg)}

/* redaction */
.redact{display:inline-flex;align-items:flex-start;gap:6px;max-width:100%;padding:3px 7px;border:1px dashed var(--amber-line);border-radius:3px;color:var(--amber);font:600 10.5px/1.35 var(--f-mono);letter-spacing:.03em;background:repeating-linear-gradient(135deg,rgba(245,178,64,.15) 0 6px,rgba(245,178,64,.05) 6px 12px);animation:flash .9s ease-out}
.redact svg{flex:none;margin-top:1px}
@keyframes flash{0%{box-shadow:0 0 0 3px rgba(245,178,64,.45)}100%{box-shadow:0 0 0 0 rgba(245,178,64,0)}}
.masked{display:inline-flex;align-items:center;gap:6px;color:var(--amber);font-family:var(--f-mono);font-size:12.5px;border-bottom:1px dotted var(--amber-line);animation:flash .9s ease-out}
.blockredact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px 18px;border:1px dashed var(--amber-line);border-radius:6px;color:var(--amber);background:repeating-linear-gradient(135deg,rgba(245,178,64,.12) 0 10px,rgba(245,178,64,.04) 10px 20px)}
.blockredact .t{font-weight:600;font-size:13px;letter-spacing:.05em;max-width:34ch}
.blockredact .s{font-size:12px;color:var(--fg-2);max-width:46ch}
.notice{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border:1px solid var(--amber-line);background:var(--amber-bg);border-radius:6px;font-size:13px;color:var(--fg-2)}
.notice svg{color:var(--amber);flex:none;margin-top:2px} .notice b{color:var(--amber);font-weight:600}

/* tables */
.sx{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.tbl th{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.09em;font-size:11px;font-weight:600;color:var(--fg-3);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(255,255,255,.02)}
.tbl tr.sel td{background:var(--ok-bg)}
.tbl .r{text-align:right} .tbl th.r{text-align:right}
.tbl .sub{display:block;font-size:11.5px;color:var(--fg-3);margin-top:1px}
.tbl tr.grp td{padding:14px 12px 6px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--fg-3);border-bottom:1px solid var(--line-2)}
.tbl tr.tot td{font-weight:600;border-top:1px solid var(--line-2);background:var(--panel-2)}
.tbl tr.click{cursor:pointer}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;vertical-align:-1px}

/* charts */
.ax{fill:var(--fg-3);font:10.5px var(--f-mono)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--fg-2);margin-bottom:8px}
.legend .it{display:inline-flex;align-items:center;gap:6px} .legend .it b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums}
.tip{position:fixed;z-index:80;pointer-events:none;max-width:260px;background:#06090b;border:1px solid var(--line-2);border-radius:5px;padding:7px 10px;font-size:12px;color:var(--fg);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.ctip{position:absolute;z-index:5;pointer-events:none;min-width:150px;background:#06090b;border:1px solid var(--line-2);border-radius:5px;padding:7px 10px;font-size:12px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.ctip .h{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);margin-bottom:3px}
.ctip .l{display:flex;justify-content:space-between;gap:14px;align-items:center}
.brows{display:flex;flex-direction:column;gap:10px}
.brow{display:grid;grid-template-columns:minmax(120px,36%) minmax(0,1fr) 62px;gap:12px;align-items:center}
.brow .bl{font-size:12.5px;line-height:1.3;min-width:0}
.brow .bt{display:flex;gap:2px;height:14px}
.brow .bs{display:block;height:100%} .brow .bs:last-child{border-radius:0 4px 4px 0}
.brow .bv{text-align:right;font-family:var(--f-mono);font-size:12px;color:var(--fg-2)}
.xbar{display:flex;gap:2px;height:36px}
.xbar .xs{display:flex;flex-direction:column;justify-content:center;padding:0 8px;min-width:0;overflow:hidden;font-size:11px;line-height:1.2;color:#05100b;white-space:nowrap}
.xbar .xs:last-child{border-radius:0 4px 4px 0} .xbar .xs.dk{color:var(--fg)}
.xbar .xs b{font-weight:600;font-variant-numeric:tabular-nums}
.fp{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.fp .b{display:grid;place-items:center;background:var(--sc3);border:1px solid var(--sc2);border-radius:2px;font:500 10.5px var(--f-mono);color:#dbe9fb}

/* splash */
.splash{position:relative;display:grid;place-items:center;min-height:540px;padding:28px 16px;border:1px solid var(--line);border-radius:6px;background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 44px,var(--panel);overflow:hidden}
.splash::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(16,21,26,.55) 0,var(--panel) 72%);pointer-events:none}
.sp-card{position:relative;z-index:1;width:100%;max-width:500px;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;padding:26px 24px}
.sp-ring{position:relative;width:86px;height:86px;margin:0 auto 14px;display:grid;place-items:center;color:var(--ok)}
.sp-ring::before,.sp-ring::after{content:"";position:absolute;inset:0;border:1px solid var(--ok-line);border-radius:50%}
.sp-ring.run::before{animation:ring 1.6s ease-out infinite} .sp-ring.run::after{animation:ring 1.6s ease-out .6s infinite}
@keyframes ring{from{transform:scale(.7);opacity:.9}to{transform:scale(1.35);opacity:0}}
.sp-steps{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sp-steps li{display:flex;gap:10px;align-items:flex-start;color:var(--fg-3);font-size:13px}
.sp-steps li b{display:block;font-weight:500}
.sp-steps li small{display:block;font-size:11.5px;font-family:var(--f-mono);color:var(--fg-3)}
.sp-steps li.on{color:var(--fg)} .sp-steps li.done{color:var(--fg-2)} .sp-steps li.done svg{color:var(--ok)}
.spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}

/* hero / audit */
.hero{display:grid;gap:22px;padding:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1180px){.hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);align-items:center}}
.hero .big{font-family:var(--f-display);font-size:60px;font-weight:600;line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:6px 0 4px}
.hero .big small{font-size:18px;font-weight:500;color:var(--fg-3);margin-left:8px;letter-spacing:0}
.logbox{max-height:340px;overflow:auto;font:12px/1.5 var(--f-mono)}
.ev{display:grid;grid-template-columns:70px 64px 168px minmax(0,1fr);gap:10px;padding:5px 0;border-bottom:1px solid var(--line);align-items:baseline}
@media(max-width:700px){.ev{grid-template-columns:62px 58px minmax(0,1fr)} .ev .c{display:none}}
.ev .t{color:var(--fg-3)} .ev .c{color:var(--fg-2)} .ev .m{color:var(--fg);font-family:var(--f-body);font-size:12.5px}
.ttl{height:5px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:5px} .ttl i{display:block;height:100%;background:var(--ok)}
.toast{position:fixed;z-index:90;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:340px;background:#06090b;border:1px solid var(--line-2);border-radius:6px;padding:10px 14px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.55);display:flex;gap:10px;align-items:flex-start;animation:rekey .25s}
.foot{padding-block:6px 28px;font-size:12px;color:var(--fg-3);border-top:1px solid var(--line);margin-top:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* standalone-page additions */
html{background:var(--bg)}
.loginwrap{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:16px;padding:24px max(16px,env(safe-area-inset-left,0px))}
.login{width:100%;max-width:400px;padding:24px}
.login h1{font-family:var(--f-display);font-size:26px;font-weight:600;margin:16px 0 4px}
.field{display:flex;flex-direction:column;gap:5px;margin-top:14px;font-size:12.5px;color:var(--fg-2)}
.inp{background:var(--bg);border:1px solid var(--line-2);border-radius:5px;padding:9px 11px;color:var(--fg);font:inherit;font-size:14px}
.inp:focus-visible{outline:2px solid var(--ok);outline-offset:1px}
.demoacc{width:100%;max-width:400px;padding:14px 16px}
.accbtn{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:8px 10px;border:1px solid var(--line-2);border-radius:5px;background:var(--panel-2);margin-top:8px;font-size:13px}
.accbtn:hover{border-color:var(--fg-3)}
.accbtn .tag{font-size:10.5px;letter-spacing:.08em;border:1px solid var(--line-2);border-radius:3px;padding:1px 5px;color:var(--fg-3)}
.raw{margin-top:4px}
.raw summary{cursor:pointer;padding:10px 14px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;list-style:none}
.raw summary::-webkit-details-marker{display:none}
.raw pre{margin:0;padding:12px 14px;max-height:380px;overflow:auto;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5;color:var(--fg-2);white-space:pre}