/* Layout: persistent navy rail + sliding secondary panel + light work canvas. Login is a split screen with a block-assembly quarter. */
:root{
  --font-display:'Sora','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --bg:#F2F5FA; --surface:#FFFFFF; --surface2:#EBF0F7; --line:#D9E1EC; --fg:#14233A; --muted:#51627A;
  --shell:#12263F; --panel:#1B3556; --shell-fg:#E8EEF7; --shell-muted:#A9BAD0; --shell-line:#2B4568;
  --accent:#2C62AD; --accent-bg:#E3EDFA; --accent-fg:#1D4F94;
  --ok:#0A7A56; --ok-bg:#DBF3E8; --warn:#865300; --warn-bg:#FCEFD0; --crit:#B0241C; --crit-bg:#FBE3E0;
  --ai:#5744C2; --ai-bg:#EEEBFB; --green:#1ACB96; --cyan:#4ADEDE; --focus:#2C62AD;
  --dx:-14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A1423; --surface:#12233A; --surface2:#182D49; --line:#28415F; --fg:#E6EDF7; --muted:#9FB1C9;
  --shell:#08121F; --panel:#122642; --shell-line:#1F3856;
  --accent:#7DB1F0; --accent-bg:#183A63; --accent-fg:#A9CCF7;
  --ok:#3FD6A3; --ok-bg:#0F3A2E; --warn:#F0B84F; --warn-bg:#40300F; --crit:#FF8D85; --crit-bg:#4A1B1A;
  --ai:#B5A9FF; --ai-bg:#2A2452; --focus:#7DB1F0; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1423; --surface:#12233A; --surface2:#182D49; --line:#28415F; --fg:#E6EDF7; --muted:#9FB1C9;
  --shell:#08121F; --panel:#122642; --shell-line:#1F3856;
  --accent:#7DB1F0; --accent-bg:#183A63; --accent-fg:#A9CCF7;
  --ok:#3FD6A3; --ok-bg:#0F3A2E; --warn:#F0B84F; --warn-bg:#40300F; --crit:#FF8D85; --crit-bg:#4A1B1A;
  --ai:#B5A9FF; --ai-bg:#2A2452; --focus:#7DB1F0; color-scheme:dark}
[dir=rtl]{--dx:14px}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.5;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;font-weight:500;min-height:36px}
.btn:hover{background:var(--surface2)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{filter:brightness(1.08);background:var(--accent)}
.btn.ai{background:var(--ai-bg);border-color:transparent;color:var(--ai)}
.btn.sm{padding:3px 9px;min-height:28px;font-size:12.5px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--surface2)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;padding:2px 9px;border-radius:99px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}.pill.warn{background:var(--warn-bg);color:var(--warn)}.pill.crit{background:var(--crit-bg);color:var(--crit)}.pill.ai{background:var(--ai-bg);color:var(--ai)}.pill.acc{background:var(--accent-bg);color:var(--accent-fg)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label,.lbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.inp{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 11px;min-height:38px}
.inp:focus{border-color:var(--accent)}
.err{color:var(--crit);font-size:12.5px;min-height:18px}

/* ---------- login ---------- */
.login{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);min-height:100%;height:100%;background:var(--surface)}
.login .l-main{display:flex;flex-direction:column;padding:20px max(24px,env(safe-area-inset-left,0px));overflow:auto;min-width:0}
.l-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.l-form-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 0}
.l-form{width:100%;max-width:430px;display:flex;flex-direction:column;gap:16px}
.l-form h1{font-size:26px}
.l-form p.sub{margin:0;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pwrap{position:relative}
.pwrap .btn{position:absolute;inset-inline-end:4px;top:4px;min-height:30px;padding:2px 8px;font-size:12px}
.l-foot{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted);align-items:center}
.l-foot a,.link{color:var(--accent);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer;font:inherit}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.l-art{background:var(--shell);display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,230px)}
.blk{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;background:#1E3C62;color:#fff;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,36px);animation:asm .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n)*90ms)}
.blk.g{background:#14A67A}
.blk.c{background:#1B3556;color:var(--cyan)}
@keyframes asm{from{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.6)}to{opacity:1;transform:none}}
.l-art .cap{position:absolute;bottom:18px;inset-inline:18px;color:var(--shell-muted);font-size:12px;text-align:center}
@media (prefers-reduced-motion:reduce){.blk{animation:none}.panel,.sheet{animation:none!important}}
@media (max-width:820px){.login{grid-template-columns:1fr;grid-template-rows:auto 1fr}.l-art{order:-1;padding:14px}.blocks{grid-template-columns:repeat(12,1fr);width:100%;max-width:440px;gap:4px}.blk{font-size:13px;border-radius:6px}.l-art .cap{display:none}.row2{grid-template-columns:1fr}}

/* ---------- app shell ---------- */
#app{display:grid;grid-template-rows:auto 1fr;height:100%}
.top{background:var(--shell);color:var(--shell-fg);display:flex;align-items:center;gap:8px;padding:8px max(12px,env(safe-area-inset-left,0px)) 8px max(12px,env(safe-area-inset-right,0px));min-height:56px;z-index:30;position:relative}
.top .btn{background:transparent;border-color:var(--shell-line);color:var(--shell-fg)}
.top .btn:hover{background:var(--panel)}
.top .btn.pri{background:var(--green);border-color:var(--green);color:#06281E}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:17px;white-space:nowrap}
.brand small{font-weight:500;color:var(--shell-muted);font-size:11px;letter-spacing:.08em;margin-inline-start:2px}
.tsel{background:var(--panel);border:1px solid var(--shell-line);color:var(--shell-fg);border-radius:8px;padding:6px 8px;min-height:36px;max-width:190px}
.sp{flex:1}
.tb-search{display:flex;align-items:center;gap:8px;min-width:0;flex:1;max-width:380px;justify-content:flex-start;text-align:start}
.tb-search span.k{margin-inline-start:auto;font-size:11px;border:1px solid var(--shell-line);border-radius:5px;padding:0 5px;color:var(--shell-muted)}
.ibtn{position:relative;width:38px;height:38px;display:grid;place-items:center;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--shell-fg)}
.ibtn:hover{background:var(--panel)}
.badge{position:absolute;top:2px;inset-inline-end:1px;background:var(--green);color:#06281E;font-size:10.5px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}
.save{font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid var(--shell-line);color:var(--shell-muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.save i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.save[data-s=saving] i{background:var(--cyan)}.save[data-s=offline] i,.save[data-s=conflict] i{background:#F0B84F}.save[data-s=failed] i{background:#FF8D85}
.mwrap{position:relative}
.menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(8,18,31,.25);padding:6px;z-index:60;max-height:70vh;overflow:auto}
.menu button,.menu .mi{display:flex;width:100%;align-items:center;gap:10px;text-align:start;border:0;background:transparent;border-radius:8px;padding:8px 10px}
.menu button:hover{background:var(--surface2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.menu .mh{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px 10px 2px}
.body{display:flex;min-height:0;position:relative}
.rail{background:var(--shell);color:var(--shell-muted);width:236px;flex:none;display:flex;flex-direction:column;overflow:auto;padding:8px 8px 12px;border-top:1px solid var(--shell-line);transition:width .18s}
.rail.min{width:64px}
.rail .ri{display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;color:inherit;padding:9px 11px;border-radius:9px;text-align:start;min-height:40px;position:relative}
.rail .ri:hover{background:var(--panel);color:var(--shell-fg)}
.rail .ri[aria-current=true]{background:var(--panel);color:#fff}
.rail .ri[aria-current=true]::before{content:"";position:absolute;inset-inline-start:-8px;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--green)}
.rail .ri[aria-expanded=true]{background:var(--panel);color:#fff}
.rail .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.rail.min .lab,.rail.min .rbadge{display:none}
.rbadge{background:var(--shell-line);color:var(--shell-fg);font-size:11px;border-radius:9px;padding:0 6px}
.rail .coll{margin-top:auto;padding-top:8px}
.panel{position:absolute;top:0;bottom:0;inset-inline-start:236px;width:288px;background:var(--panel);color:var(--shell-fg);z-index:25;overflow:auto;padding:16px 12px;box-shadow:8px 0 24px rgba(0,0,0,.22);animation:slide .22s ease-out}
.rail.min+.panel{inset-inline-start:64px}
@keyframes slide{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
.panel h2{font-size:15px;padding:0 8px 10px}
.panel .pk{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;color:inherit;padding:8px 10px;border-radius:8px;text-align:start}
.panel .pk:hover{background:var(--shell-line)}
.panel .pk.on{background:var(--shell-line);box-shadow:inset 3px 0 0 var(--green)}
.panel .kids{margin:0 0 4px;padding-inline-start:14px;border-inline-start:1px solid var(--shell-line);margin-inline-start:14px}
.panel .ph{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--shell-muted);padding:12px 10px 4px}
.chev{transition:transform .15s;margin-inline-start:auto}
[aria-expanded=true]>.chev{transform:rotate(90deg)}
[dir=rtl] .chev{transform:scaleX(-1)}[dir=rtl] [aria-expanded=true]>.chev{transform:scaleX(-1) rotate(90deg)}
main{flex:1;min-width:0;overflow:auto;padding:20px max(20px,env(safe-area-inset-right,0px)) 40px max(20px,env(safe-area-inset-left,0px))}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.crumbs button{border:0;background:none;color:var(--accent);padding:0;text-decoration:underline}
.ph1{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-bottom:18px}
.ph1 h1{font-size:24px}
.ph1 p{margin:4px 0 0;color:var(--muted);max-width:68ch}
.ph1 .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.banner{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;margin-bottom:16px}
.banner.ai{background:var(--ai-bg);color:var(--ai)}
.banner.info{background:var(--accent-bg);color:var(--accent-fg)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:9px 14px;color:var(--muted);border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}
.tabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--accent)}

/* dashboard */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.w{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0;grid-column:span 2;position:relative}
.w.s1{grid-column:span 1}.w.s4{grid-column:span 4}
.w.ai{background:var(--ai-bg);border-color:transparent}
.w header{display:flex;align-items:center;gap:6px}
.w h3{font-size:14px;flex:1;min-width:0}
.w .meta{font-size:11.5px;color:var(--muted)}
.wi{border:0;background:transparent;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.wi:hover{background:var(--surface2);color:var(--fg)}
.wi svg.i{width:16px;height:16px}
details.wm{position:relative}
details.wm>summary{list-style:none;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
details.wm>summary::-webkit-details-marker{display:none}
details.wm>summary:hover{background:var(--surface2)}
details.wm .menu{min-width:170px}
.defbox{font-size:12.5px;background:var(--surface2);border-radius:8px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.defbox b{color:var(--muted);font-weight:600}
.bar{display:grid;grid-template-columns:minmax(92px,1.1fr) 3fr 44px;gap:10px;align-items:center;font-size:13px}
.track{height:10px;background:var(--surface2);border-radius:6px;overflow:hidden}
.track i{display:block;height:100%;border-radius:6px;background:var(--accent)}
.track i.ok{background:var(--ok)}.track i.warn{background:#D9962A}.track i.crit{background:var(--crit)}
.big{font-family:var(--font-display);font-size:34px;font-weight:600;line-height:1}
.rowl{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.rowl:first-child{border-top:0}
.rowl .g{flex:1;min-width:0}
.heat{display:grid;grid-template-columns:auto repeat(5,minmax(0,1fr));gap:4px;font-size:12px;align-items:stretch}
.heat .hc{border-radius:6px;min-height:38px;display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums;border:0}
.hl{background:var(--ok-bg);color:var(--ok)}.hm{background:var(--accent-bg);color:var(--accent-fg)}.hh{background:var(--warn-bg);color:var(--warn)}.hcx{background:var(--crit-bg);color:var(--crit)}
.heat .ax{color:var(--muted);display:grid;place-items:center;padding:0 4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:start;font-size:12px;color:var(--muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr.clk{cursor:pointer}tr.clk:hover td{background:var(--surface2)}
.tw{overflow-x:auto}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 11px;font-size:12.5px}
.chip[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
@media (max-width:1100px){.cols{grid-template-columns:1fr}}
.steps{display:flex;gap:0;flex-wrap:wrap}
.stp{flex:1;min-width:110px;padding:10px 12px;border-top:3px solid var(--line);font-size:12.5px;color:var(--muted)}
.stp.done{border-color:var(--ok);color:var(--fg)}.stp.cur{border-color:var(--accent);color:var(--fg);font-weight:600}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cards .card{padding:14px 16px}
.cards h4{font-size:13.5px;margin-bottom:4px}
.cards p{margin:0;color:var(--muted);font-size:13px}

/* side sheet */
#scrim{position:fixed;inset:0;background:rgba(8,18,31,.45);z-index:70}
.sheet{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(460px,100%);background:var(--surface);z-index:80;box-shadow:-12px 0 32px rgba(0,0,0,.25);overflow:auto;padding:20px max(20px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:14px;animation:slide .2s ease-out;border-inline-start:1px solid var(--line)}
.sheet h2{font-size:19px}
.sheet .x{position:absolute;inset-inline-end:10px;top:10px}
.sheet section{border-top:1px solid var(--line);padding-top:12px}
.sheet h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}

/* docs & ai */
.editor{min-height:320px;padding:18px 20px;line-height:1.65;outline:0}
.editor h4{font-size:15px;margin:14px 0 4px}
.sec{border-inline-start:3px solid var(--line);padding-inline-start:12px;margin:12px 0}
.sec.fact{border-color:var(--ok)}.sec.int{border-color:var(--accent)}.sec.asm{border-color:#D9962A}.sec.opt{border-color:var(--ai)}.sec.nxt{border-color:var(--fg)}
.sec h4{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 3px}
.cite{font-family:var(--font-mono);font-size:11.5px;background:var(--accent-bg);color:var(--accent-fg);border-radius:5px;padding:1px 6px;white-space:nowrap}
.meter{height:8px;background:var(--surface2);border-radius:5px;overflow:hidden;width:140px}.meter i{display:block;height:100%;background:var(--ai)}
.agent{display:flex;gap:8px;flex-wrap:wrap}
.agent button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 12px;font-weight:500}
.agent button[aria-pressed=true]{background:var(--ai-bg);border-color:var(--ai);color:var(--ai)}
#palette{position:fixed;inset:0;z-index:90;background:rgba(8,18,31,.5);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 0}
#palette .pbox{width:min(560px,100%);background:var(--surface);border-radius:14px;border:1px solid var(--line);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
#palette input{border:0;border-bottom:1px solid var(--line);width:100%;padding:14px 16px;background:transparent;outline:0;font-size:15px}
#palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
#palette li button{display:flex;width:100%;border:0;background:transparent;text-align:start;padding:9px 12px;border-radius:8px;gap:10px;justify-content:space-between}
#palette li button[aria-selected=true],#palette li button:hover{background:var(--accent-bg)}
#toast{position:fixed;bottom:18px;inset-inline-start:50%;transform:translateX(-50%);background:var(--shell);color:var(--shell-fg);padding:10px 16px;border-radius:10px;z-index:100;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:min(92vw,520px)}
.swt{display:inline-flex;align-items:center;gap:8px}
.sw{appearance:none;width:38px;height:22px;border-radius:12px;background:var(--line);position:relative;border:0;cursor:pointer;flex:none}
.sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.sw:checked{background:var(--ok)}.sw:checked::after{transform:translateX(16px)}[dir=rtl] .sw:checked::after{transform:translateX(-16px)}

@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.w.s4{grid-column:span 2}}
@media (max-width:720px){
  .grid{grid-template-columns:1fr}.w,.w.s1,.w.s4{grid-column:span 1}
  .tsel,.tb-search span.t,.tb-search span.k,.hide-s,.brand small,.btn.pri .t{display:none}
  .tb-search{flex:none;width:38px;padding:0;justify-content:center}
  .rail{width:64px}.rail .lab,.rail .rbadge{display:none}.panel{inset-inline-start:64px;width:min(288px,calc(100% - 64px))}
  .coll{display:none}
  main{padding:16px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}
  .top{gap:4px}
}

/* ===================== v2 additions ===================== */
:root{--shell:#122639;--hi:#C2570C;--accent-ink:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hi:#FFA462}}
:root[data-theme="dark"]{--hi:#FFA462}
[hidden]{display:none!important}
body{overflow:hidden;margin:0}
.btn.big{font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.2;width:100%;justify-content:center;min-height:44px}
#main{flex:1;min-width:0;overflow:auto;padding:20px max(16px,env(safe-area-inset-left,0px)) 40px;outline:0}
#main>*{max-width:1400px}
.top .logo{height:34px;width:auto;display:block}
.l-top{background:#122639;margin:-20px -24px 20px;padding:14px 24px;border-radius:0}
.l-top .btn{background:transparent;border-color:#2B4568;color:#E8EEF7}
.l-top .logo{height:40px;width:auto}
.l-art .mk{width:72px;height:auto;margin-bottom:18px}
.tchip{display:flex;align-items:center;gap:10px;padding:10px;margin:2px 0 10px;border-radius:10px;background:rgba(255,255,255,.06);color:var(--shell-fg);min-width:0}
.tchip .tav{width:32px;height:32px;border-radius:8px;background:var(--green);color:#06281E;display:grid;place-items:center;font-weight:700;flex:none}
.tchip img{width:32px;height:32px;border-radius:8px;object-fit:cover}
.tchip .lab{display:flex;flex-direction:column;min-width:0}.tchip .lab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tchip small{color:var(--shell-muted)}
.mobtog{display:none}
.pad{padding:16px}
.card.pad{margin-bottom:14px}
.sch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sch h3{font-size:15px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;align-items:start}
.grid2>.card.pad{margin-bottom:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.kpis.sm{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:10px}
.kpi{display:flex;flex-direction:column;gap:2px;text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-width:0}
button.kpi:hover{border-color:var(--accent)}
.kpi .kl{font-size:12px;color:var(--muted);font-weight:600}
.kpi .kv{font-family:var(--font-display);font-size:24px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.kpi .ks{font-size:12px;color:var(--muted)}
.kpi.ok{border-inline-start:4px solid var(--ok)}.kpi.warn{border-inline-start:4px solid var(--warn)}.kpi.crit{border-inline-start:4px solid var(--crit)}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.head h1{font-size:23px}
.head .sub{margin:2px 0 0;color:var(--muted)}
.head .acts{display:flex;gap:8px;flex-wrap:wrap}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;align-items:center}
.crumbs{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.meta{font-size:12.5px;color:var(--muted)}
.cr{color:var(--crit);font-weight:600}
.banner{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:10px;background:var(--accent-bg);color:var(--accent-fg);margin:0 0 14px}
.banner.ok{background:var(--ok-bg);color:var(--ok)}.banner.warn{background:var(--warn-bg);color:var(--warn)}.banner.crit{background:var(--crit-bg);color:var(--crit)}.banner.ai{background:var(--ai-bg);color:var(--ai)}.banner.info{background:var(--accent-bg)}
.banner .link{color:inherit}
.pill.hi{background:#FDE7D3;color:var(--hi)}
:root[data-theme="dark"] .pill.hi{background:#47290f}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.fgrid.sm4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.field.full,.full{grid-column:1/-1}
.fsel{width:auto;min-height:32px;padding:4px 8px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
textarea.inp{resize:vertical;min-height:80px}
.err-in{border-color:var(--crit)!important}
.field .help{font-size:12px;color:var(--muted)}
.field .err{min-height:0}
.tbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbar .inp{width:auto;min-width:200px;flex:1;max-width:340px}
.tbar-top{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tw{overflow:auto}
.tw table{width:100%;border-collapse:collapse;font-size:13.5px}
.tw th{text-align:start;font-weight:600;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
.tw th button{background:none;border:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;padding:0}
.tw td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tw tbody tr:hover td{background:var(--surface2)}
.tw tr.clk{cursor:pointer}
.pager{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:8px 12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.bulk{display:flex;gap:8px;align-items:center;padding:8px 12px;background:var(--accent-bg);border-radius:8px;margin:8px 12px}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button{border:0;background:transparent;padding:9px 14px;border-bottom:2px solid transparent;color:var(--muted);font-weight:500}
.tabs button[aria-selected=true]{color:var(--accent);border-color:var(--accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg button{border:0;background:var(--surface);padding:6px 12px}.seg button.on{background:var(--accent);color:#fff}
.dl{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:6px 14px;margin:0}.dl dt{color:var(--muted);font-size:12.5px}.dl dd{margin:0;overflow-wrap:anywhere}
.rowl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.rowl:last-child{border-bottom:0}
.cite{display:inline-block;font-family:var(--font-mono);font-size:11.5px;padding:1px 7px;border-radius:6px;background:var(--surface2);border:1px solid var(--line);color:var(--fg)}
button.cite:hover{border-color:var(--accent);color:var(--accent)}
.chip{display:inline-flex;gap:4px;align-items:center;padding:2px 8px;border-radius:99px;border:1px solid var(--line);font-size:12px}
.bar{display:grid;grid-template-columns:minmax(80px,150px) 1fr 54px;gap:10px;align-items:center;font-size:12.5px;margin:5px 0}
.bar .track{height:9px;border-radius:5px;background:var(--surface2);overflow:hidden}.bar .track i{display:block;height:100%;background:var(--accent);border-radius:5px}
.bar .track i.ok{background:var(--ok)}.bar .track i.warn{background:var(--warn)}.bar .track i.crit{background:var(--crit)}
.bar .mono{text-align:end}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface2);margin:4px 0}.stack i{display:block;height:100%}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}.legend span{display:inline-flex;align-items:center;gap:5px}.sq{width:10px;height:10px;border-radius:2px;display:inline-block}
.ringw{display:flex;flex-direction:column;align-items:center;font-size:12px;position:relative}
.ringw .rc{position:static}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:3px;background:var(--ok)}.dot.warn{background:#F0B84F}.dot.crit{background:var(--crit)}.dot.ok{background:var(--ok)}
.widgets .wd{min-height:140px}
.dcrow label{display:flex;gap:8px;align-items:center}
/* modal */
#modal{position:fixed;inset:0;z-index:95;background:rgba(8,18,31,.55);display:flex;align-items:flex-start;justify-content:center;padding:6vh 12px;overflow:auto}
#modal[hidden],#sheet[hidden],#scrim[hidden],#palette[hidden],#toast[hidden]{display:none}
.mbox{background:var(--surface);color:var(--fg);border-radius:14px;border:1px solid var(--line);width:min(520px,100%);box-shadow:0 24px 60px rgba(0,0,0,.4);display:flex;flex-direction:column;max-height:88vh}
.mbox.wide{width:min(900px,100%)}
.mh2{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}.mh2 h2{font-size:17px}
.mb{padding:16px 18px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
#scrim{position:fixed;inset:0;background:rgba(8,18,31,.35);z-index:70}
.sheet{display:flex;flex-direction:column;gap:12px}
.sheet[hidden]{display:none}
/* steps and stepper */
.steps{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px;align-items:center}
.stp{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:99px;background:var(--surface2);font-size:12.5px;color:var(--muted)}
.stp b{width:20px;height:20px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:11px}
.stp.on{background:var(--ok-bg);color:var(--ok)}
.stepper{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.stepper button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 12px;font-size:13px}
.stepper button b{width:22px;height:22px;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:12px}
.stepper button.on{border-color:var(--accent);background:var(--accent-bg)}.stepper button.done b{background:var(--ok);color:#fff}
.mwnav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}
/* tree */
.tree,.tree ul{list-style:none;margin:0;padding-inline-start:20px;border-inline-start:1px dashed var(--line)}
.tree{padding-inline-start:0;border:0}
.tn{display:flex;gap:8px;align-items:center;padding:5px 0;flex-wrap:wrap}
.tree li{margin:2px 0}
.tree li>.meta{padding-inline-start:4px;margin-bottom:4px}
/* dims */
.dims{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.dims label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.dimgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.dimgrid>div{display:flex;flex-direction:column;gap:3px}
.dw{display:flex;gap:8px;flex-wrap:wrap}
/* heat map */
.heat{display:grid;grid-template-columns:90px repeat(5,1fr);gap:4px;max-width:520px}
.hy{font-size:11px;color:var(--muted);display:flex;align-items:center}
.hx{font-size:11px;color:var(--muted);text-align:center}
.hc{aspect-ratio:1.4;border:0;border-radius:8px;font-weight:700;font-size:15px;color:#fff;min-height:34px}
.hc-Low{background:#2F8F6B}.hc-Medium{background:#B58A12}.hc-High{background:#C2570C}.hc-Critical{background:#B0241C}
:root[data-theme="dark"] .hc-Low{background:#1d6b4f}
/* calendar */
.calh{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}.calh h2{font-size:18px;min-width:160px;text-align:center}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cdh{font-size:12px;color:var(--muted);text-align:center;font-weight:600;padding:4px}
.cd{min-height:92px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 6px;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cd.off{background:transparent;border-color:transparent}.cd.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cd b{font-size:12px;color:var(--muted)}
.ev{border:0;text-align:start;font-size:11px;padding:2px 5px;border-radius:4px;background:var(--accent-bg);color:var(--accent-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-doc{background:var(--ai-bg);color:var(--ai)}.ev-ctl{background:var(--ok-bg);color:var(--ok)}.ev-bcm{background:var(--warn-bg);color:var(--warn)}
/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.pcol{background:var(--surface2);border-radius:12px;padding:10px;min-height:120px}.pcol h4{font-size:12.5px;margin-bottom:8px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px;margin-bottom:6px;font-size:13px}
/* timeline */
.tl{display:flex;flex-direction:column;gap:6px;border-inline-start:2px solid var(--line);padding-inline-start:12px}
.tli{font-size:13px;display:flex;gap:8px;flex-wrap:wrap}
.tli .mono{color:var(--muted);font-size:12px}
/* gantt */
.gantt{display:flex;flex-direction:column;gap:6px;min-width:560px;overflow:auto}
.gh{display:grid;grid-template-columns:repeat(12,1fr);margin-inline-start:210px;font-size:11px;color:var(--muted)}
.gr{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center}
.gl{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt{position:relative;height:18px;background:var(--surface2);border-radius:5px}
.gb{position:absolute;top:2px;height:14px;border-radius:4px;background:var(--accent)}
.gb.Fieldwork{background:var(--warn)}.gb.Closed{background:var(--ok)}.gb.Reporting{background:var(--ai)}
.gtd{position:absolute;top:-2px;width:2px;height:22px;background:var(--crit)}
/* diff, drafts, docs */
.diff{font-family:var(--font-mono);font-size:12.5px;border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:50vh}
.diff div{padding:1px 10px;white-space:pre-wrap}.diff .old{background:var(--crit-bg);color:var(--crit)}.diff .new{background:var(--ok-bg);color:var(--ok)}
.docview,.draft,.repview{white-space:pre-wrap;background:var(--surface2);border-radius:8px;padding:12px;font-size:13.5px;max-height:320px;overflow:auto}
.repview{white-space:normal;max-height:none;background:var(--surface)}
.repview table{border-collapse:collapse;width:100%}.repview th,.repview td{border:1px solid var(--line);padding:5px 8px;text-align:start;font-size:13px}
.facl{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:6px;margin:8px 0}
.facr{display:flex;gap:8px;align-items:flex-start;padding:5px 6px;border-radius:6px}.facr:hover{background:var(--surface2)}
.crisis{border-inline-start:5px solid var(--crit)}
.aires .aimem{background:var(--surface2);border-radius:10px;padding:12px}.aimem ul{margin:6px 0 0;padding-inline-start:18px}.aimem li{margin-bottom:6px;font-size:13px}
.brprev{border:1px solid var(--line);border-radius:10px;overflow:hidden}.brbar{background:var(--pv);color:#fff;padding:10px 14px;font-weight:700}.brprev p,.brprev .meta{padding:6px 14px}.pvbtn{display:inline-block;margin:6px 14px;background:var(--pv);color:#fff;padding:7px 14px;border-radius:8px}
.rmx td.on{background:var(--ok-bg)}.rmx th{white-space:normal;min-width:100px}.rmx td label{font-size:12px;display:flex;gap:4px;align-items:center}
.sugbox{background:var(--ai-bg);border-radius:10px;padding:10px 12px}
.engsel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.fwb,.ed,.edcard,.about{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}
.edcard{margin-bottom:8px}
.xw{overflow:auto}
.lrow{display:flex;gap:8px;align-items:center}

.line-1st{border-top:3px solid var(--ok)}.line-2nd{border-top:3px solid var(--warn)}.line-3rd{border-top:3px solid var(--ai)}
/* RACI */
.rtw{max-height:70vh;overflow:auto}.rtab{border-collapse:separate;border-spacing:0}
.rtab th.sticky,.rtab td.sticky{position:sticky;inset-inline-start:0;background:var(--surface);z-index:2;min-width:240px;max-width:300px}
.rtab thead th{position:sticky;top:0;z-index:3}
.rtab thead th.sticky{z-index:4}
.rh{min-width:96px;white-space:normal!important;text-align:center!important;vertical-align:bottom}.rh span{display:block;font-size:11.5px;color:var(--fg);text-transform:none;letter-spacing:0}.rh small{display:block;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.rtab td{text-align:center;padding:4px}
.rc{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:13px;display:inline-grid;place-items:center}
.rc.empty{color:var(--muted);border-style:dashed;background:transparent}.rc.sm{width:22px;height:22px;font-size:11px}
.rc-R{background:#DCE9FB;color:#1D4F94;border-color:#9BBDEB}.rc-A{background:#CFEFE2;color:#0A6347;border-color:#8CD2B8}.rc-C{background:#FCEFD0;color:#7A4B00;border-color:#EBCB80}.rc-I{background:#EEF1F6;color:#51627A}.rc-S{background:#EEEBFB;color:#5744C2}.rc-V{background:#FBE3E0;color:#B0241C}
:root[data-theme="dark"] .rc-R{background:#183A63;color:#A9CCF7}:root[data-theme="dark"] .rc-A{background:#0F3A2E;color:#3FD6A3}:root[data-theme="dark"] .rc-C{background:#40300F;color:#F0B84F}:root[data-theme="dark"] .rc-I{background:#182D49;color:#9FB1C9}
.rc.ovr{outline:2px dashed var(--warn);outline-offset:1px}.rc.away{opacity:.5;text-decoration:line-through}.rc.lk{box-shadow:inset 0 0 0 2px var(--accent)}
.rlegend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;font-size:12.5px;color:var(--muted)}
.orgchart{overflow:auto;padding:10px}.orgchart ul{list-style:none;display:flex;gap:12px;justify-content:center;padding:18px 0 0;margin:0}.orgchart li{display:flex;flex-direction:column;align-items:center;padding:0}
.orgchart>ul{padding-top:0}
.onode{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px;min-width:150px;max-width:200px;display:flex;flex-direction:column;gap:1px;text-align:center}
.onode small{color:var(--muted)}.onode span{font-size:12.5px}
.onode.line-x{border-top:3px solid var(--line)}
.tbar .inp{min-width:140px}
.hide-s{}
.empty{text-align:center;color:var(--muted);padding:24px}
.ai-s{color:var(--ai)}.key{font-family:var(--font-mono)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-family:var(--font-mono)}
.quick{display:flex;flex-wrap:wrap;gap:6px}.lform{display:flex;flex-direction:column;gap:12px;max-width:420px}
@media (max-width:1000px){
  .mobtog{display:grid}
  .rail{position:absolute;z-index:40;top:0;bottom:0;transform:translateX(-100%);width:236px}
  .rail.open{transform:none}
  .rail .lab,.rail .rbadge{display:flex!important}
  .panel{inset-inline-start:0!important;width:min(300px,100%)}
  .tb-search span:not(.k){display:none}
  .row3,.codes{grid-template-columns:1fr}
  .cd{min-height:60px}.ev{font-size:10px}
  .bar{grid-template-columns:90px 1fr 44px}
}
@media (max-width:640px){
  #main{padding:14px 16px 40px}
  .head h1{font-size:20px}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .top .hide-s,.save span{display:none}
  .l-top{margin:-20px -16px 16px;padding:12px 16px}
  .dl{grid-template-columns:1fr}
  .tw td,.tw th{padding:8px}
  .gh{margin-inline-start:0}.gr{grid-template-columns:110px 1fr}
}
@media print{.top,.rail,.panel,#toast{display:none}}
[dir=rtl] .tw th,[dir=rtl] .tw td{text-align:right}
#app{grid-template-columns:minmax(0,1fr)}
.body{min-width:0;overflow:hidden}
.ph1{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ph1 h1{font-size:23px}.ph1 p{margin:2px 0 0;color:var(--muted)}
.ph1 .acts{margin-top:0}
.rtab tbody th{text-transform:none;letter-spacing:0;font-size:13px;color:var(--fg);text-align:start;font-weight:500}
.rtab tbody th .link{text-align:start;text-decoration:none;font-weight:600;color:var(--accent)}
.rtab tbody th small,.rtab tbody th .meta{display:block}
.about{margin-bottom:14px}.about summary{cursor:pointer;display:flex;gap:8px;align-items:center}.abt{padding-top:8px;color:var(--muted)}
td:first-child .mono,.tw td:first-child{white-space:nowrap}
/* assurance chain */
.chk{display:grid;gap:6px}
.chkrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.chkrow .swt{flex:1;min-width:0;align-items:center}.chkrow .swt span{overflow-wrap:anywhere;font-weight:500}
.chkrow input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);flex:none}
.chkrow .rx{display:flex;gap:6px;align-items:center;flex:none;flex-wrap:wrap;justify-content:flex-end}
.sheet.over{z-index:120}.sheet.wide{width:min(760px,100%)}
.ck{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.ck:first-of-type{border-top:0}
.ck .ci{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.ck .ci svg{width:14px;height:14px;stroke-width:2.4}
.ck .ci.ok{background:var(--ok-bg);color:var(--ok)}.ck .ci.warn{background:var(--warn-bg);color:var(--warn)}.ck .ci.crit{background:var(--crit-bg);color:var(--crit)}
.ck .ct{flex:1;min-width:0;overflow-wrap:anywhere}
.dl2{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:6px 18px}
.trail{margin-top:4px}
tr.sel td{background:var(--accent-bg)}
/* =====================================================================
   Valtrenix GRC - visual layer: module colours, curved double-edge cards,
   in-flow side panel, docked sheets, dashboards, motion.
   ===================================================================== */
:root{--grey:#7b8aa0;--mc:#1e40af;--mc2:color-mix(in srgb,var(--mc) 55%,#1ACB96);--ease:cubic-bezier(.2,.8,.2,1);--toph:56px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--grey:#8ea0b8}}
:root[data-theme="dark"]{--grey:#8ea0b8}

/* ---- shell: rail and a module-tinted panel that sits in the layout ---- */
.rail{background:linear-gradient(180deg,#0e2038,#12263F 40%,#0c1b30);transition:width .25s var(--ease)}
.rail .ri{transition:background .18s,color .18s,transform .18s}
.rail .ri:hover{transform:translateX(3px)}[dir=rtl] .rail .ri:hover{transform:translateX(-3px)}
.rail .ri[aria-current=true]::before{background:linear-gradient(var(--green),var(--cyan));box-shadow:0 0 10px var(--green)}
.panel{position:relative;inset:auto;flex:none;width:288px;max-width:100%;z-index:3;overflow-x:hidden;overflow-y:auto;box-shadow:inset -1px 0 0 rgba(255,255,255,.06),6px 0 24px rgba(0,0,0,.16);
 background:linear-gradient(165deg,color-mix(in srgb,var(--mc) 46%,#0a1a30),color-mix(in srgb,var(--mc) 20%,#0a1a30) 70%);animation:panelin .32s var(--ease) both;border-inline-end:1px solid color-mix(in srgb,var(--mc) 55%,#fff 10%)}
.rail.min+.panel{inset-inline-start:auto}
@keyframes panelin{from{width:0;opacity:0;padding-inline:0}to{width:288px;opacity:1}}
.panel h2{display:flex;align-items:center;gap:10px;font-size:15px}
.panel h2::before{content:"";width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#fff,var(--mc2));box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.panel .pk{transition:background .15s,padding .2s var(--ease),transform .15s;border-radius:10px;margin-bottom:2px}
.panel .pk:hover{background:rgba(255,255,255,.12);padding-inline-start:14px}
.panel .pk.on{background:rgba(255,255,255,.18);box-shadow:inset 3px 0 0 var(--green)}
.panel .pk:first-of-type{background:rgba(255,255,255,.1);font-weight:600;margin-bottom:6px}
.panel .pk:first-of-type::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--green);flex:none}
.panel .kids{border-inline-start:1px solid rgba(255,255,255,.18)}
.panel .ph{color:rgba(255,255,255,.55)}
@media (max-width:900px){.panel{position:absolute;inset-block:0;inset-inline-start:0;z-index:40}.rail.min+.panel{inset-inline-start:64px}}
main{transition:margin .28s var(--ease);scroll-behavior:smooth}

/* ---- docked side sheet: pushes the page; no covering of lower screens ---- */
.sheet{top:var(--toph);border-start-start-radius:18px;border-inline-start:1px solid var(--line);box-shadow:-14px 0 36px rgba(8,18,31,.18);animation:sheetin .3s var(--ease) both;background:linear-gradient(180deg,var(--surface),var(--surface2))}
@keyframes sheetin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
[dir=rtl] .sheet{animation-name:sheetinr}@keyframes sheetinr{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:1180px){#app.so main{margin-inline-end:min(460px,40vw)}#app.so.sow main{margin-inline-end:min(760px,56vw)}.sheet{box-shadow:-6px 0 18px rgba(8,18,31,.10)}}
@media (max-width:1179px){.sheet{top:0}}

/* ---- curved double-edge surfaces, hover lift ---- */
.card,.kpi,.dcard,.dtile,.cards .card{border-radius:16px;border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--mc,var(--accent)) 55%,var(--line)),var(--line) 45%,color-mix(in srgb,var(--mc,var(--accent)) 35%,var(--line))) border-box;
 box-shadow:0 1px 2px rgba(10,25,50,.05),0 6px 18px rgba(10,25,50,.06);transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.kpi,.dtile{outline:0}
button.kpi:hover,.dtile:hover,.dcard:hover,.cards .card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(10,25,50,.06),0 14px 30px rgba(10,25,50,.14)}
.kpi.ok{border-inline-start:4px solid var(--ok)}.kpi.warn{border-inline-start:4px solid var(--warn)}.kpi.crit{border-inline-start:4px solid var(--crit)}
.btn{border-radius:10px;transition:background .15s,transform .15s,box-shadow .2s}.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#1ACB96));box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.pill{transition:transform .15s}.pill:hover{transform:scale(1.04)}
table{border-collapse:separate;border-spacing:0}
thead th{background:linear-gradient(180deg,var(--surface2),var(--surface));position:sticky;top:0}
tbody tr{transition:background .12s}tbody tr:hover{background:color-mix(in srgb,var(--mc,var(--accent)) 7%,transparent)}
.card.tw{border-radius:16px;overflow:auto}
.ph1 h1{background:linear-gradient(90deg,var(--fg),color-mix(in srgb,var(--mc,var(--accent)) 70%,var(--fg)));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- dashboards ---- */
.dsh{max-width:1680px;margin-inline:auto;display:flex;flex-direction:column;gap:18px}
.dhero{border-radius:22px;padding:20px 22px 16px;color:#fff;position:relative;overflow:hidden;
 background:radial-gradient(1200px 400px at 90% -30%,color-mix(in srgb,var(--mc2) 55%,transparent),transparent 60%),linear-gradient(135deg,color-mix(in srgb,var(--mc) 78%,#07142a),color-mix(in srgb,var(--mc) 40%,#07142a));
 border:1px solid color-mix(in srgb,var(--mc) 60%,#fff 20%);box-shadow:0 0 0 4px color-mix(in srgb,var(--mc) 14%,transparent),0 18px 40px color-mix(in srgb,var(--mc) 25%,transparent);animation:rise .5s var(--ease) both}
.dhero::after{content:"";position:absolute;inset:auto -60px -80px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.14),transparent)}
.dh-top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between}
.dh-id{display:flex;gap:14px;align-items:center;min-width:0}
.dh-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);flex:none}
.dh-ic svg{width:28px;height:28px}
.dh-eb{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.dhero h1{font-size:26px;color:#fff;-webkit-text-fill-color:#fff;background:none}
.dhero p{margin:4px 0 0;opacity:.85;max-width:74ch;font-size:13.5px}
.dh-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:rgba(255,255,255,.14);border-radius:12px;padding:3px;border:1px solid rgba(255,255,255,.25)}
.seg button{border:0;background:transparent;color:#fff;padding:6px 12px;border-radius:9px;font-weight:500;transition:background .2s}
.seg button[aria-pressed=true]{background:#fff;color:color-mix(in srgb,var(--mc) 80%,#000);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.chipx{font-size:12px;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}
.btn.ghostw{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:#fff;min-height:34px;padding:6px 9px}
.dkp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px;position:relative;z-index:1}
.dk{display:flex;flex-direction:column;text-align:start;gap:2px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);backdrop-filter:blur(6px);color:#fff;border-radius:16px;padding:11px 14px;min-width:0;transition:transform .2s var(--ease),background .2s}
button.dk:hover{background:rgba(255,255,255,.2);transform:translateY(-3px)}
.dk-l{font-size:12px;opacity:.85}.dk-v{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1.1;overflow-wrap:anywhere}.dk-s{font-size:11.5px;opacity:.75}
.dk.ok{box-shadow:inset 0 -3px 0 var(--green)}.dk.warn{box-shadow:inset 0 -3px 0 #F0B84F}.dk.crit{box-shadow:inset 0 -3px 0 #FF8D85;background:rgba(255,120,110,.16)}
.dh-lens{display:flex;gap:8px;align-items:center;font-size:12.5px;opacity:.9;margin-top:12px;position:relative;z-index:1}
.dgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.dcard{padding:14px 16px;min-width:0;animation:rise .5s var(--ease) both;grid-column:span 4}
.dcard:nth-child(2){animation-delay:.05s}.dcard:nth-child(3){animation-delay:.1s}.dcard:nth-child(4){animation-delay:.15s}.dcard:nth-child(5){animation-delay:.2s}
.dcard.c3{grid-column:span 3}.dcard.c4{grid-column:span 4}.dcard.c6{grid-column:span 6}.dcard.c8{grid-column:span 8}.dcard.c12{grid-column:span 12}
@media (max-width:1100px){.dcard,.dcard.c3,.dcard.c4,.dcard.c6,.dcard.c8{grid-column:span 6}.dcard.c12{grid-column:span 12}}
@media (max-width:640px){.dcard,.dcard.c3,.dcard.c4,.dcard.c6,.dcard.c8,.dcard.c12{grid-column:span 12}.dhero{padding:16px}.dhero h1{font-size:21px}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dct{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dct h3{font-size:14px;position:relative;padding-inline-start:12px}
.dct h3::before{content:"";position:absolute;inset-inline-start:0;top:3px;bottom:3px;width:4px;border-radius:3px;background:linear-gradient(var(--mc),var(--mc2))}
.dnt{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.dn-v{font:700 22px var(--font-display);fill:var(--fg)}.dn-s{font-size:9px;fill:var(--muted)}
.lgd{list-style:none;margin:0;padding:0;display:grid;gap:5px;flex:1;min-width:130px;font-size:12.5px}
.lgd li{display:flex;align-items:center;gap:7px}.lgd li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lgd i{width:10px;height:10px;border-radius:3px;flex:none}
.lgd.inline{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}.lgd.inline li{flex:none}
.hb{display:grid;gap:8px}.hbr{display:grid;grid-template-columns:minmax(80px,34%) 1fr auto;gap:8px;align-items:center;font-size:12.5px}
.hbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hbt{height:12px;border-radius:99px;background:var(--surface2);overflow:hidden}
.hbt i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mc),var(--mc2));animation:grow .8s var(--ease) both}
@keyframes grow{from{width:0}}
.vb{width:100%;max-height:190px}.vb-v{font-size:10px;fill:var(--fg);font-weight:600}.vb-l{font-size:9px;fill:var(--muted)}
.vb rect{transition:opacity .15s}.vb rect:hover{opacity:.8}
.stk{display:flex;height:22px;border-radius:99px;overflow:hidden;gap:2px;background:var(--surface2)}.stk i{display:block;min-width:6px;transition:flex .4s}
.gg{display:grid;place-items:center;text-align:center}.gg-v{font:700 26px var(--font-display);fill:var(--fg)}.gg-l{font-weight:600}
.h5{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:4px 6px;align-items:center}
.h5y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:var(--muted);text-align:center}.h5x{grid-column:2;text-align:center;font-size:11px;color:var(--muted)}
.h5g{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.h5c{aspect-ratio:1.3;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;transition:transform .15s}
.h5c:hover{transform:scale(1.08)}.h5c.ok{background:#0A7A56}.h5c.mid{background:#4f8fd6}.h5c.warn{background:#d9941c}.h5c.crit{background:#b0241c}
.tl{display:grid;gap:4px}.tlr2{display:grid;grid-template-columns:12px auto 1fr auto;gap:10px;align-items:center;text-align:start;border:0;background:transparent;border-radius:10px;padding:6px 8px;transition:background .15s}
.tlr2:hover{background:var(--surface2)}.tld2{width:10px;height:10px;border-radius:50%;background:var(--ok)}.tld2.warn{background:var(--warn)}.tld2.crit{background:var(--crit)}.tlt2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{color:var(--muted);font-size:13px;padding:10px 4px}
.alist,.appq{display:grid;gap:6px}.appq{margin-bottom:8px}
.arow{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;text-align:start;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 12px;transition:transform .15s,border-color .15s}
.arow:hover{transform:translateX(4px);border-color:var(--mc)}[dir=rtl] .arow:hover{transform:translateX(-4px)}.arow .at{flex:1;min-width:140px;font-weight:500}
.lnk{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px}.lnk li{display:grid;gap:1px;padding-inline-start:12px;border-inline-start:3px solid var(--mc)}.lnk span{color:var(--muted)}
.dsec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:6px}.dsec h2{font-size:17px}
.dtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.dtile{display:flex;flex-direction:column;gap:3px;text-align:start;padding:14px 16px;position:relative;overflow:hidden;animation:rise .5s var(--ease) both}
.dtile::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--mc),var(--mc2))}
.dtile.warn::before{background:linear-gradient(var(--warn),#F0B84F)}.dtile.crit::before{background:linear-gradient(var(--crit),#FF8D85)}
.dt-t{font-weight:600;font-size:13.5px;padding-inline-start:6px}.dt-n{font:700 26px var(--font-display);padding-inline-start:6px;color:color-mix(in srgb,var(--mc) 75%,var(--fg))}.dt-n.sm svg{width:22px;height:22px}.dt-s{font-size:12px;color:var(--muted);padding-inline-start:6px}.dt-sec{position:absolute;inset-inline-end:10px;top:8px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dmods{margin-bottom:18px}.dmods .dtiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.regc{padding:14px 16px}.regc.on{box-shadow:0 0 0 2px var(--ok)}.regc .meta{margin-top:4px}
.swt{display:inline-flex;align-items:center;gap:8px}.code{background:var(--surface2);border-radius:12px;padding:12px;overflow:auto;font:12px var(--font-mono);max-height:50vh}
.tlr{display:grid;grid-template-columns:12px auto 1fr auto auto;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line)}.tld{width:10px;height:10px;border-radius:50%;background:var(--ok)}.tld.warn{background:var(--warn)}.tld.crit{background:var(--crit)}.tlt{overflow:hidden;text-overflow:ellipsis}

/* ---- Arabic and RTL ---- */
[dir=rtl] body{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4{font-family:'IBM Plex Sans Arabic','Sora',system-ui,sans-serif;letter-spacing:0}
[dir=rtl] .mono,[dir=rtl] .dk-v,[dir=rtl] .dt-n{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .h5y{transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* evidence viewer */
.sheet .cite{display:inline-block;align-self:flex-start;max-width:calc(100% - 52px)}
.sheet h2{padding-inline-end:44px}
.evdoc{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
.evdoc .evnote{background:#fff7e0;color:#7a5200;border-bottom:1px solid #f0d58a;padding:10px 14px;font-size:12.5px;font-weight:600}
.evdoc dl{display:grid;grid-template-columns:minmax(120px,170px) 1fr;margin:0;border-bottom:1px solid var(--line)}
.evdoc dl:last-child{border-bottom:0}
.evdoc dt,.evdoc dd{padding:8px 14px;margin:0;border-top:1px solid var(--line);font-size:13px;overflow-wrap:anywhere}
.evdoc dl dt:first-of-type,.evdoc dl dt:first-of-type+dd{border-top:0}
.evdoc dt{color:var(--muted);font-weight:600;background:var(--surface2)}
.evdoc dd{font-weight:500}
.evdoc p{margin:0;padding:8px 14px;font-size:13px}
.sheet .tl .tli{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13px}
@media (max-width:600px){.evdoc dl{grid-template-columns:1fr}}
/* control-based register, checklists, import, conformance */
.rrb{display:inline-block;padding:2px 9px;border-radius:999px;border:1px solid;font-size:12px;font-weight:600;white-space:nowrap}
.rrt{width:100%;border-collapse:collapse;font-size:13px}
.rrt th{position:sticky;top:0;background:var(--surface2);text-align:left;font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.rrt td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.rrtw{overflow:auto;max-height:70vh}
.rrdesc{min-width:260px;max-width:420px}
.rrbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:10px 0}
.rrbar .grow{flex:1;min-width:220px}
.rrf{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.rrf .inp{min-width:130px}
.rrflag{margin-top:4px;padding:3px 8px;border-radius:6px;background:color-mix(in srgb,var(--crit) 12%,transparent);color:var(--crit);font-size:12px}
.rrresp{margin-top:6px;white-space:pre-wrap;padding:8px;border-radius:6px;background:var(--surface2)}
.rrcl{padding:6px 0}
.rrscore{display:grid;gap:8px}
.rrscore>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.rrscore>div>.meta{min-width:64px}
.rrscore b{font-weight:600}
.rrmx{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed}
.rrmx td,.rrmx th{padding:6px 4px;text-align:center;border-radius:6px;font-size:12px}
.rract{white-space:nowrap}
.rract .btn{margin:0 3px 3px 0}
.rrkv{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:0}
.rrkv dt{color:var(--muted);font-size:12px}.rrkv dd{margin:0}
.card .seg{display:flex;flex-wrap:wrap;gap:4px}
.card .seg button{padding:6px 12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;cursor:pointer;color:inherit;font:inherit;font-size:13px}
.card .seg button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.rrcf .rrcfh{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.rrcfl{display:flex;flex-wrap:wrap;gap:6px}
.rrcfi{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.rrcfi.ok{color:var(--ok)}.rrcfi.bad{color:var(--crit);border-color:var(--crit)}
.rrcfi svg{width:13px;height:13px}
.rrcf+.rrcf{margin-top:10px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
@media(max-width:700px){.rrdesc{min-width:200px}.rrkv{grid-template-columns:1fr}}
.xwtop{align-items:start}.xwfw{display:grid;gap:6px;max-height:230px;overflow:auto;margin-bottom:8px}.xwck{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px}.xwck b{font-variant-numeric:tabular-nums}.xwcount{margin:8px 2px}
.bpl{margin:0;padding-inline-start:18px;display:grid;gap:4px;font-size:13px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.wbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:12px 0}.wtray{display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-basis:100%}
.wi{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--bd,#9aa4b2);background:transparent;color:inherit;font:600 12px/1 serif;font-style:italic;cursor:pointer;margin-inline-start:6px;padding:0}.dk{position:relative}.dk .wi{position:absolute;top:8px;inset-inline-end:8px}
.wi:focus-visible,.wb:focus-visible{outline:2px solid var(--mc,#1e40af);outline-offset:2px}
.wediting .dcard{outline:2px dashed color-mix(in srgb,var(--mc,#1e40af) 55%,transparent);outline-offset:2px;position:relative}.wediting .dcard.whid{opacity:.45}.wpin{box-shadow:0 0 0 2px var(--mc,#1e40af)}
.wtb{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:8px}.wb{min-width:30px;height:30px;border-radius:6px;border:1px solid var(--bd,#cbd5e1);background:var(--card,#fff);color:inherit;cursor:pointer}.wb:disabled{opacity:.4;cursor:not-allowed}.wreq{font-size:12px;opacity:.8}
/* Enterprise risk workflow */
.ermpath{list-style:none;margin:0 0 14px;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}
.ermpath li{flex:0 0 auto}
.ermpath button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.ermpath button.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent);font-weight:600}
.ermpath button.done::before{content:"\2713";color:var(--ok)}
.ermpath button:disabled{opacity:.5;cursor:not-allowed}
.ermhd{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.ermhd h2{margin:2px 0 4px;font-size:20px}
.ermct{min-width:200px;font-size:12px}
.ermchk{display:flex;flex-wrap:wrap;gap:6px 14px}
.ermchk label{display:flex;gap:6px;align-items:center;font-size:13px}
.ermq summary{cursor:pointer;font-weight:600}
.ermq{margin-bottom:12px}
.ermnav{margin-top:16px;justify-content:space-between}
.ermmat{border-collapse:collapse;font-size:12px}
.ermmat th,.ermmat td{padding:3px;border:1px solid var(--line)}
.ermmat .inp.sm,.tbl .inp.sm{min-width:84px;padding:4px 6px;font-size:12px}
.tscroll{overflow-x:auto}
.lnk{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0;text-align:start}
@media (max-width:640px){.ermhd{display:block}.ermpath button{padding:5px 9px}}
/* Add a framework and Programmes */
.fwdrop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;border:2px dashed var(--line);border-radius:14px;background:var(--surface2);color:var(--fg);text-align:center;padding:18px;cursor:pointer;transition:border-color .15s,background .15s}
.fwdrop:hover,.fwdrop.over{border-color:var(--accent);background:var(--accent-bg)}
.fwdrop span{color:var(--muted);font-size:13px}.fwdrop u{color:var(--accent-fg);font-size:13px}
.fwtips{margin:10px 0 0;padding-left:18px}.fwtips li{margin:4px 0}
.fwrev td{vertical-align:top}.fwrev .inp{min-width:80px;padding:6px 8px}.fwrev td:nth-child(3) .inp{min-width:220px}.fwrev tr.fwflag td{background:var(--warn-bg)}
.fwwarn{color:var(--warn);margin-top:4px}
button.kpi.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.fwb .rowl,.rowl.ed{flex-wrap:wrap}
/* VTX GRC One: liquid glass. Translucent surfaces, blur, teal and mint accents from the Valtrenix palette. */
@property --na{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--glass:rgba(10,26,38,.52);--glass2:rgba(255,255,255,.06);--glass-hi:rgba(255,255,255,.10);--glass-line:rgba(150,235,220,.16);--blur:blur(24px) saturate(170%);--neon:#2fd3c6;--mint:#4ff9c3;--rad:18px;--fx:cubic-bezier(.2,.8,.2,1)}
:root:not([data-theme="light"]),:root[data-theme="dark"]{
 --bg:#040b12;--surface:rgba(11,27,39,.56);--surface2:rgba(255,255,255,.065);--line:rgba(150,235,220,.15);--fg:#e8f3f5;--muted:#9eb0bd;
 --shell:rgba(5,14,22,.58);--panel:rgba(12,30,42,.62);--shell-fg:#e8f3f5;--shell-muted:#9eb0bd;--shell-line:rgba(150,235,220,.16);
 --accent:#2fd3c6;--accent-bg:rgba(47,211,198,.14);--accent-fg:#86f2e6;--green:#4ff9c3;--cyan:#4adede;--focus:#4ff9c3;
 --ok:#4ff9c3;--ok-bg:rgba(79,249,195,.13);--warn:#f5c15b;--warn-bg:rgba(245,193,91,.14);--crit:#ff8d85;--crit-bg:rgba(255,141,133,.15);--ai:#b5a9ff;--ai-bg:rgba(181,169,255,.14);--accent-ink:#04201c;color-scheme:dark}
:root[data-theme="light"]{
 --bg:#e9f4f3;--surface:rgba(255,255,255,.66);--surface2:rgba(8,60,56,.06);--line:rgba(8,70,64,.14);--fg:#0b2326;--muted:#4a6468;
 --shell:rgba(6,22,30,.78);--panel:rgba(10,34,44,.80);--shell-fg:#e8f3f5;--shell-muted:#a8bcc4;--shell-line:rgba(150,235,220,.18);
 --accent:#0a8c82;--accent-bg:rgba(10,140,130,.12);--accent-fg:#06675f;--green:#12b886;--focus:#0a8c82;--accent-ink:#fff;
 --glass:rgba(255,255,255,.62);--glass2:rgba(255,255,255,.5);--glass-hi:rgba(255,255,255,.8);--glass-line:rgba(8,70,64,.14)}
html,body{background:var(--bg)}
body{background:radial-gradient(1000px 640px at 0% -5%,rgba(12,64,60,.95),transparent 62%),radial-gradient(820px 520px at 100% 0%,rgba(13,42,62,.9),transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(10,52,50,.55),transparent 65%),#040b12 fixed;background-attachment:fixed}
:root[data-theme="light"] body{background:radial-gradient(900px 600px at 0% 0%,#bfe9e2,transparent 60%),radial-gradient(800px 500px at 100% 5%,#cfe3f3,transparent 60%),#eef6f5 fixed}
#app{background:transparent}

/* glass surfaces */
.card,.kpi,.dcard,.dtile,.banner,.about,.tw,.dk,.sheet,.mbox,.menu,#palette .pbox,.cards .card,.w,.kpis .kpi,.dk{background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 34px rgba(0,0,0,.28)}
:root[data-theme="light"] .card,:root[data-theme="light"] .kpi,:root[data-theme="light"] .dcard,:root[data-theme="light"] .tw{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 28px rgba(12,60,60,.12)}
.card,.dcard,.tw,.about,.banner,.dtile,.kpi{border-radius:var(--rad)}
.dk{border-radius:16px}
.top{background:var(--shell);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--shell-line);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.rail{background:var(--shell);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:0;border-inline-end:1px solid var(--shell-line);margin:0}
.rail .ri{border-radius:14px;transition:background .25s var(--fx),transform .25s var(--fx),box-shadow .25s}
.rail .ri:hover{background:var(--glass-hi);transform:translateX(2px);box-shadow:inset 0 0 0 1px var(--glass-line)}
.rail .ri[aria-current=true],.rail .ri[aria-expanded=true]{background:linear-gradient(135deg,rgba(47,211,198,.22),rgba(79,249,195,.08));box-shadow:inset 0 0 0 1px rgba(79,249,195,.28),0 0 22px rgba(47,211,198,.18);color:#fff}
.rail .ri[aria-current=true]::before{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.panel{background:var(--panel);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);border:1px solid var(--glass-line);border-radius:22px;margin:10px 0 10px 8px;top:0;bottom:0;box-shadow:inset 0 1px 0 var(--glass-hi),0 24px 60px rgba(0,0,0,.45);animation:gl-in .28s var(--fx)}
[dir=rtl] .panel{margin:10px 8px 10px 0}
.pk{border-radius:12px;transition:background .2s,transform .2s var(--fx)}
.pk:hover{background:var(--glass-hi);transform:translateX(3px)}
[dir=rtl] .pk:hover{transform:translateX(-3px)}
.pk.on{background:linear-gradient(135deg,rgba(47,211,198,.24),rgba(79,249,195,.08));box-shadow:inset 0 0 0 1px rgba(79,249,195,.3)}
.ptag{display:flex;align-items:center;gap:8px;width:100%;margin:12px 0 4px;padding:6px 10px;border:1px solid var(--glass-line);background:var(--glass2);border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--shell-muted);cursor:pointer}
.ptag b{margin-inline-start:auto;font-weight:600;color:var(--mint)}
.ptag:hover{border-color:rgba(79,249,195,.4);color:#fff}
@keyframes gl-in{from{opacity:0;transform:translateX(-10px) scale(.98)}to{opacity:1;transform:none}}
[dir=rtl] .panel{animation-name:gl-in-r}@keyframes gl-in-r{from{opacity:0;transform:translateX(10px) scale(.98)}to{opacity:1;transform:none}}
main{background:transparent}
.menu{border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);color:var(--shell-fg)}
.menu button:hover,.menu .mi:hover{background:var(--glass-hi)}
#scrim{background:rgba(2,8,12,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#modal{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mbox{border-radius:24px;background:var(--panel);-webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);animation:gl-pop .3s var(--fx)}
@keyframes gl-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.sheet{border-radius:24px 0 0 24px;background:var(--panel)}
[dir=rtl] .sheet{border-radius:0 24px 24px 0}
#toast{background:var(--panel);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--glass-line);border-radius:16px;color:var(--shell-fg)}
.inp,select.inp,textarea.inp{background:var(--glass2);border:1px solid var(--glass-line);border-radius:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.inp:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(79,249,195,.18)}
.btn{background:var(--glass2);border:1px solid var(--glass-line);border-radius:12px;transition:background .2s,box-shadow .25s,transform .2s var(--fx)}
.btn:hover{background:var(--glass-hi);transform:translateY(-1px)}
.btn.pri{background:linear-gradient(135deg,#2fd3c6,#4ff9c3);color:#032421;border-color:transparent;font-weight:600;box-shadow:0 6px 22px rgba(47,211,198,.35)}
.btn.pri:hover{filter:brightness(1.06);box-shadow:0 8px 28px rgba(79,249,195,.45)}
.top .btn.pri{color:#032421}
.pill,.chip,.cite{border-radius:999px}
th{background:var(--glass2)}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--glass-hi)}
.dhero{background:linear-gradient(135deg,rgba(14,74,68,.96),rgba(8,26,40,.96) 60%,rgba(10,40,58,.94));-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid rgba(79,249,195,.22);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px rgba(0,0,0,.35),0 0 60px rgba(47,211,198,.10);border-radius:26px}
.dk{background:rgba(255,255,255,.07)}
.dtile:hover,.dcard:hover,.kpi:hover{border-color:rgba(79,249,195,.38);box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 40px rgba(0,0,0,.34),0 0 26px rgba(47,211,198,.14)}
.dtile,.dcard,.kpi{transition:border-color .25s,box-shadow .3s,transform .3s var(--fx)}
.dtile:hover{transform:translateY(-3px)}
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.backbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-line);background:var(--glass2);border-radius:999px;padding:5px 12px 5px 8px;min-height:32px;font-size:13px;cursor:pointer;color:var(--fg)}
.backbtn:hover{background:var(--glass-hi);border-color:rgba(79,249,195,.4)}
.backbtn:disabled{opacity:.4;cursor:default}
[dir=rtl] .backbtn svg{transform:scaleX(-1)}
.logo{height:34px;width:auto}

/* login always uses the dark glass look */
.login{background:transparent;color:#e8f3f5;--fg:#e8f3f5;--muted:#9eb0bd;--surface:rgba(11,27,39,.56);--line:rgba(150,235,220,.15)}
.l-top{margin:0!important;padding:0!important;background:transparent!important}
.login .l-main{background:rgba(5,14,22,.45);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.l-art{background:transparent}
.blk{background:rgba(255,255,255,.08);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.blk.g{background:linear-gradient(135deg,#2fd3c6,#4ff9c3);color:#032421}
.blk.c{color:#4ff9c3}

/* search: neon light on hover, circling while searching */
.tb-search{position:relative;border-radius:999px;border:1px solid var(--glass-line);background:rgba(255,255,255,.07);min-width:280px;white-space:nowrap;transition:transform .2s,background .2s}
.tb-search::before,.tb-search::after,#palette .pbox::before,#palette .pbox::after{content:"";position:absolute;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:2}
.tb-search::before,#palette .pbox::before{inset:-8px;padding:8px;background:conic-gradient(from var(--na),transparent 0 55%,#2fd3c6 72%,#4ff9c3 86%,transparent 100%);filter:blur(5px);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tb-search::after,#palette .pbox::after{inset:-2px;padding:2px;background:conic-gradient(from var(--na),transparent 0 55%,#2fd3c6 72%,#4ff9c3 86%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.tb-search.busy::before,.tb-search.busy::after,#palette .pbox.busy::before,#palette .pbox.busy::after{opacity:1;animation:na-spin 1.05s linear infinite}
@keyframes na-spin{to{--na:360deg}}
#palette .pbox{position:relative;border-radius:22px;background:var(--panel);-webkit-backdrop-filter:blur(34px) saturate(190%);backdrop-filter:blur(34px) saturate(190%);overflow:visible;animation:gl-pop .28s var(--fx)}
#palette ul{border-radius:0 0 22px 22px}
#palette input{border-radius:22px 22px 0 0}
#palette{background:rgba(2,8,12,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* glass roll-over window */
#gtip{position:fixed;z-index:120;max-width:300px;padding:10px 14px;border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 44px rgba(0,0,0,.45);color:var(--shell-fg);font-size:12.5px;line-height:1.45;pointer-events:none;opacity:0;transform:translateY(4px) scale(.98);transition:opacity .18s,transform .22s var(--fx)}
#gtip.on{opacity:1;transform:none}
#gtip b{display:block;color:var(--mint);margin-bottom:3px;font-size:13px}
#gtip .tg{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
#gtip .tg span{border:1px solid var(--glass-line);background:var(--glass2);border-radius:999px;padding:1px 8px;font-size:11px}

/* dynamic effects when a screen opens */
#main.fx .dhero{animation:fx-up .6s var(--fx) both}
#main.fx .dkp>*,#main.fx .kpis>*{animation:fx-up .55s var(--fx) both}
#main.fx .dgrid>*,#main.fx .dtiles>*,#main.fx .cards>*,#main.fx .grid>*,#main.fx .grid3>*{animation:fx-up .6s var(--fx) both}
#main.fx tbody tr{animation:fx-row .5s var(--fx) both}
#main.fx .hbt i,#main.fx .meter i,#main.fx .rrbar i{transform-origin:left center;animation:fx-grow .9s var(--fx) both}
[dir=rtl] #main.fx .hbt i,[dir=rtl] #main.fx .meter i{transform-origin:right center}
#main.fx svg circle[stroke-dasharray]{animation:fx-dash 1.2s var(--fx) both}
#main.fx .hm>*,#main.fx [class*=hc-]{animation:fx-pop .5s var(--fx) both}
#main.fx .dkp>*:nth-child(2),#main.fx .kpis>*:nth-child(2),#main.fx .dgrid>*:nth-child(2){animation-delay:.06s}
#main.fx .dkp>*:nth-child(3),#main.fx .kpis>*:nth-child(3),#main.fx .dgrid>*:nth-child(3){animation-delay:.12s}
#main.fx .dkp>*:nth-child(4),#main.fx .kpis>*:nth-child(4),#main.fx .dgrid>*:nth-child(4){animation-delay:.18s}
#main.fx .dkp>*:nth-child(5),#main.fx .kpis>*:nth-child(5),#main.fx .dgrid>*:nth-child(5){animation-delay:.24s}
#main.fx .dkp>*:nth-child(n+6),#main.fx .kpis>*:nth-child(n+6),#main.fx .dgrid>*:nth-child(n+6){animation-delay:.3s}
#main.fx .dtiles>*:nth-child(3n+2){animation-delay:.05s}#main.fx .dtiles>*:nth-child(3n){animation-delay:.1s}
#main.fx tbody tr:nth-child(2){animation-delay:.04s}#main.fx tbody tr:nth-child(3){animation-delay:.08s}#main.fx tbody tr:nth-child(4){animation-delay:.12s}#main.fx tbody tr:nth-child(5){animation-delay:.16s}#main.fx tbody tr:nth-child(6){animation-delay:.2s}#main.fx tbody tr:nth-child(7){animation-delay:.24s}#main.fx tbody tr:nth-child(8){animation-delay:.28s}#main.fx tbody tr:nth-child(n+9){animation-delay:.32s}
@keyframes fx-up{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-row{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
[dir=rtl] #main.fx tbody tr{animation-name:fx-row-r}@keyframes fx-row-r{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes fx-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fx-dash{from{stroke-dasharray:0 600}}
@keyframes fx-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.dk-v,.dt-n,.kv{font-variant-numeric:tabular-nums}

/* widget gallery */
.wg{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0;min-height:60vh;max-height:70vh}
.wg-nav{border-inline-end:1px solid var(--glass-line);padding:6px 10px 6px 0;display:flex;flex-direction:column;gap:2px;overflow:auto}
.wg-nav button{display:flex;justify-content:space-between;align-items:center;gap:8px;border:0;background:transparent;color:inherit;padding:9px 12px;border-radius:12px;text-align:start;cursor:pointer}
.wg-nav button.on{background:var(--accent-bg);color:var(--accent-fg)}
.wg-nav button:hover{background:var(--glass-hi)}
.wg-nav small{color:var(--muted)}
.wg-main{overflow:auto;padding:0 4px 6px 16px}
.wg-sec{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.wg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.wg-card{display:flex;gap:10px;align-items:center;text-align:start;border:1px solid var(--glass-line);background:var(--glass2);border-radius:14px;padding:10px;cursor:pointer;color:inherit;transition:transform .2s var(--fx),border-color .2s,box-shadow .25s}
.wg-card:hover,.wg-card:focus-visible{transform:translateY(-2px);border-color:rgba(79,249,195,.45);box-shadow:0 0 22px rgba(47,211,198,.18)}
.wg-th{flex:none;width:44px;height:44px;border-radius:12px;background:var(--accent-bg);display:grid;place-items:center;color:var(--accent-fg)}
.wg-th svg{width:26px;height:26px}
.wg-card b{display:flex;align-items:center;gap:6px;font-size:13px}
.wg-card b em{font-style:normal;font-weight:500;font-size:10.5px;border:1px solid var(--glass-line);border-radius:999px;padding:0 7px;color:var(--muted)}
.wg-card span.d{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.wg-top{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.wg-top .inp{flex:1}
.wcustom .wc-body{min-height:120px}
.wc-line{width:100%;height:120px}
.wc-line path.a{fill:none;stroke:var(--neon);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:0}
#main.fx .wc-line path.a{animation:fx-line 1.4s var(--fx) both}
.wc-line path.f{fill:url(#wcg);opacity:.7}
@keyframes fx-line{from{stroke-dashoffset:1000}}

/* devices and screen sizes */
@media (hover:none),(pointer:coarse){.btn,.ibtn,.pk,.rail .ri,.wb,.backbtn{min-height:44px}.ibtn{min-width:44px}.tb-search::before,.tb-search::after{display:none}}
@media (min-width:1600px){main{padding-inline:max(28px,calc((100vw - 1700px)/2))}}
@media (max-width:1199px) and (min-width:1001px){
 .rail{width:72px}.rail .lab,.rail .rbadge,.rail .tchip .lab{display:none}.rail .tchip{justify-content:center}.rail .ri{justify-content:center}
 .panel{inset-inline-start:72px;width:min(300px,calc(100% - 90px));position:absolute}
}
@media (max-width:1000px){
 .tb-search{min-width:0;flex:1;max-width:340px}.tsel{max-width:140px}
 .rail{top:8px;bottom:8px;inset-inline-start:8px;width:264px;border:1px solid var(--shell-line);border-radius:24px;background:var(--panel);box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateX(-115%)}
 [dir=rtl] .rail{transform:translateX(115%)}
 .rail.open{transform:none}
 .panel{position:fixed!important;inset:8px 8px 8px 8px!important;width:auto!important;margin:0;z-index:60}
 .wg{grid-template-columns:150px minmax(0,1fr)}
}
@media (max-width:720px){
 body{overflow:hidden}
 .top{padding:6px 10px;gap:6px}.top .logo{height:28px}
 .tb-search{min-width:0;width:40px;flex:none;border-radius:50%}
 .sheet{width:100%;border-radius:24px 24px 0 0;top:auto;bottom:0;max-height:88vh;inset-inline:0}
 .mbox{width:calc(100vw - 20px);max-height:92vh;border-radius:22px}
 .dgrid>*{grid-column:span 12!important}
 .dkp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .dhero{border-radius:20px}
 .wg{grid-template-columns:1fr;max-height:76vh}.wg-nav{flex-direction:row;overflow-x:auto;border-inline-end:0;border-bottom:1px solid var(--glass-line);padding:0 0 8px}.wg-nav button{flex:none}.wg-main{padding:0}
 .tw{overflow-x:auto}.tw table{min-width:560px}
 #toast{bottom:78px}
 .ph1{flex-direction:column;align-items:flex-start;gap:10px}
}
@media (max-width:420px){.dkp{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}h1{font-size:21px}}
@media (prefers-reduced-motion:reduce){.tb-search.busy::before,.tb-search.busy::after,#palette .pbox.busy::before,#palette .pbox.busy::after{animation:none}#main.fx *{animation:none!important}}
@media print{body{background:#fff!important}.card,.dcard,.tw{background:#fff!important;backdrop-filter:none!important}}
body.navopen::after{content:"";position:fixed;inset:0;background:rgba(2,8,12,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:35}
@media (max-width:1000px){.rail{z-index:50}.panel{z-index:60!important}}

/* drawer width fix */
@media (max-width:1000px){.rail,.rail.min{width:264px}.rail.min .lab,.rail.min .rbadge{display:flex!important}}

/* widget gallery, closer to the reference */
.wg-top{justify-content:space-between;flex-wrap:wrap}.wg-top .inp{flex:0 1 280px}
.wg-nav button .wn{display:flex;align-items:center;gap:9px}.wg-nav button .wn svg{width:17px;height:17px;flex:none;opacity:.85}
.wg-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.wg-th.k-bar{background:rgba(90,169,255,.16);color:#5aa9ff}.wg-th.k-donut{background:rgba(47,211,198,.16);color:#2fd3c6}.wg-th.k-line{background:rgba(126,224,168,.16);color:#7ee0a8}.wg-th.k-stack{background:rgba(245,193,91,.16);color:#f5c15b}.wg-th.k-table{background:rgba(181,169,255,.16);color:#b5a9ff}.wg-th.k-kpi{background:rgba(255,141,133,.16);color:#ff8d85}
.wsc{position:relative}.wsc-t{position:absolute;top:8px;inset-inline-end:8px;z-index:3;display:flex;gap:2px;opacity:0;transition:opacity .2s;background:var(--glass2);backdrop-filter:blur(14px);border:1px solid var(--glass-line);border-radius:12px;padding:2px}
.wsc:hover .wsc-t,.wsc:focus-within .wsc-t{opacity:1}@media (pointer:coarse){.wsc-t{opacity:1}}
.wsc .wd .sch{padding-inline-end:104px}
.wg-top{flex-wrap:nowrap}.wg-top p{flex:1 1 auto}@media (max-width:720px){.wg-top{flex-wrap:wrap}.wg-top .inp{flex:1 1 100%}}

/* readable floating menus: blur lives on a pseudo layer so menus inside the top bar can blur the page behind them */
.top{-webkit-backdrop-filter:none;backdrop-filter:none;isolation:isolate}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--shell);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);pointer-events:none}
.menu{background:rgba(7,18,28,.94);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);box-shadow:0 18px 50px rgba(0,0,0,.5),inset 0 1px 0 var(--glass-hi)}
:root[data-theme=light] .menu{background:rgba(250,253,253,.9);color:#0b2530}
#gtip,.pk,.pop{background:rgba(7,18,28,.88)}

/* light theme: menus stay dark blurred glass, denser so the white page never shows through */
:root[data-theme=light]{--shell:rgba(6,20,28,.93);--panel:rgba(8,26,36,.95);--shell-fg:#eef7f8;--shell-muted:#c3d5db}
:root[data-theme=light] .rail,:root[data-theme=light] .panel,:root[data-theme=light] .top::before{-webkit-backdrop-filter:blur(36px) saturate(180%);backdrop-filter:blur(36px) saturate(180%)}
:root[data-theme=light] .ptag{background:rgba(255,255,255,.08);border-color:rgba(150,235,220,.28);color:#d9e8ec}
:root[data-theme=light] .ptag:hover{background:rgba(255,255,255,.14);color:#fff}
:root[data-theme=light] .panel .pi,:root[data-theme=light] .panel a,:root[data-theme=light] .panel button{color:inherit}
:root[data-theme=light] .rail,:root[data-theme=light] .panel{color:var(--shell-fg)}
:root[data-theme=light] .menu,:root[data-theme=light] #gtip,:root[data-theme=light] #palette .pbox{background:rgba(8,26,36,.95);color:var(--shell-fg)}

/* hover states on dark chrome must stay dark in every theme */
.rail .ri:hover,.panel .pi:hover,.panel a:hover,.panel button:hover,.menu button:hover,.menu .mi:hover,.top .ibtn:hover,.top .btn:hover,.top .tsel:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
.rail .ri:hover *,.panel .pi:hover *{color:inherit}
:root[data-theme=light] .ptag:hover{background:rgba(255,255,255,.16)}

/* dark chrome always uses light-on-dark text tokens, whatever the page theme */
.menu,.panel,.rail,#gtip,#palette .pbox,.top,#toast,.mbox{--muted:var(--shell-muted);--fg:var(--shell-fg)}
:root[data-theme=light]{--muted:#3a5155}
:root[data-theme=light] .pill.warn{color:#8a3f05}
.hc-Medium{color:#2a1a00!important}

/* every dark glass surface carries its own dark token set, so nothing inside it inherits light-page colours */
.menu,.panel,.rail,#gtip,#palette .pbox,#toast,.mbox,.sheet,.top{--fg:#e8f3f5;--muted:#b4c6cc;--surface:rgba(255,255,255,.07);--surface2:rgba(255,255,255,.09);--line:rgba(150,235,220,.2);--glass2:rgba(255,255,255,.07);--glass-hi:rgba(255,255,255,.13);--glass-line:rgba(150,235,220,.2);--accent-fg:#4ff9c3;--accent-bg:rgba(47,211,198,.16);color:var(--fg)}
:root[data-theme=light] .mbox,:root[data-theme=light] .sheet{background:rgba(8,26,36,.95)}
:root[data-theme=light] .mbox .inp,:root[data-theme=light] .sheet .inp,:root[data-theme=light] #palette .inp{background:rgba(255,255,255,.08);color:#e8f3f5;border-color:rgba(150,235,220,.25)}
:root[data-theme=light] .pill.hi{color:#8f3a02}
:root[data-theme=light] .pill.ok,:root[data-theme=light] .rrcfi.ok{color:#075e43}
.h5c.warn,.h5c.mid,.hc-Medium,.hc.warn{color:#1d1400!important}
.hc-Low{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.seg button.on,.card .seg button.on{color:var(--accent-ink,#04201c)!important}
:root[data-theme=light] .pill:not(.ok):not(.warn):not(.hi):not(.crit):not(.ai){color:#33484c}

/* logo with the "by valtrenix" line needs more height to stay legible */
.top .logo{height:46px;width:auto}.l-top .logo{height:64px}
@media (max-width:720px){.top .logo{height:36px}.l-top .logo{height:48px}}
/* top bar fits every width */
.top{min-width:0;max-width:100vw;overflow:visible}
.top .logo{flex:none}
.top .tb-search{min-width:0}
@media (max-width:1560px){.top .tsel{width:140px;max-width:140px}.top .tb-search{flex:1 1 130px;max-width:280px;overflow:hidden}.top .tb-search .k{display:none}.top .save span{display:none}}
@media (max-width:1000px){.top .mwrap.hide-s{display:none}.top .tsel{width:116px;max-width:116px}}
@media (max-width:720px){.top .logo{height:28px}.top{padding-inline:8px}.top .ibtn,.top .mwrap>.ibtn{width:32px;min-width:32px}}
@media (max-width:900px){.top .btn.pri .t{display:none}}
.dtile .dt-sec{position:static;order:-1;align-self:flex-start;margin-bottom:2px;padding-inline-start:6px}
.pcard{display:flex;flex-direction:column;gap:2px;width:100%;text-align:start;color:var(--fg);cursor:pointer}
.rrgl{display:flex;gap:10px;align-items:flex-start;margin:6px 0}.rrgl .rrb{flex:none;min-width:70px;text-align:center}.rrgl>span:last-child{flex:1;min-width:0}
/* primary buttons stay bright on hover and focus (v1 reset the gradient to a dull green) */
.btn.pri:hover,.btn.pri:focus-visible,.btn.pri:active{background:linear-gradient(135deg,#5ae8dc,#8bffd9)!important;color:#032421!important;border-color:transparent!important;filter:none;box-shadow:0 8px 28px rgba(79,249,195,.5),0 0 0 1px rgba(255,255,255,.25) inset}
/* native dropdown lists are always dark text on a white list */
select option,select optgroup{background:#fff;color:#14233A}
select option:disabled{color:#6b7c8f}
/* tags and chips on dark glass surfaces (sheets, dialogs, menus, panels) stay readable in both themes */
:is(.sheet,.mbox,.menu,.panel,#palette,#toast) :is(.pill,.chip,.tag,.cite,.link-chip):not(.ok):not(.warn):not(.hi):not(.crit):not(.ai){color:#e6f2f4!important;background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.2)}
:is(.sheet,.mbox,.menu,.panel,#palette) .pill.ok{color:#8bf5c8!important;background:rgba(40,200,140,.2)!important}
:is(.sheet,.mbox,.menu,.panel,#palette) .pill.warn{color:#ffd98a!important;background:rgba(255,190,70,.2)!important}
:is(.sheet,.mbox,.menu,.panel,#palette) .pill.hi{color:#ffbb8a!important;background:rgba(255,140,60,.2)!important}
:is(.sheet,.mbox,.menu,.panel,#palette) .pill.crit{color:#ffaaa3!important;background:rgba(255,90,80,.22)!important}
:is(.sheet,.mbox,.menu,.panel,#palette) .pill.ai{color:#d6c4ff!important;background:rgba(160,120,255,.22)!important}
/* segmented controls outside the hero: readable on the page background in both themes */
#main .seg button{color:var(--fg)}
#main .seg:not(.dhero .seg){background:var(--surface);border-color:var(--line)}
#main .seg button.on,#main .card .seg button.on{background:var(--accent)!important;color:#04201c!important}
:root[data-theme=light] #main .seg button.on,:root[data-theme=light] #main .card .seg button.on{color:#fff!important}
#main .dhero .seg button{color:#fff}
#main .dhero .seg button[aria-pressed=true]{color:#0b2f33}
/* scale the interface up on large and high-resolution screens so text stays readable */
html{-webkit-text-size-adjust:100%}
@media (min-width:1360px){html{zoom:1.12}}
@media (min-width:1600px){html{zoom:1.22}}
@media (min-width:1900px){html{zoom:1.38}}
@media (min-width:2300px){html{zoom:1.6}}
@media (min-width:3000px){html{zoom:2}}
/* never let small captions fall below a readable size */
.meta,.ks,.kl,.pill,.btn.sm,.field label,.lbl,.chip,.th,th{font-size:max(12.5px,1em)}
#main>*{max-width:min(1400px,100%)}
@media (min-width:1360px){#main>*{max-width:1560px}.dsh{max-width:1800px}}
.panel .phd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline-end:4px}
.panel .phd h2{flex:1;min-width:0}
.panel .pclose{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--glass-line,rgba(255,255,255,.2));background:rgba(255,255,255,.08);color:inherit;display:grid;place-items:center;cursor:pointer;margin-bottom:8px}
.panel .pclose:hover{background:rgba(255,255,255,.2)}
.panel .pclose svg{width:16px;height:16px}
/* =====================================================================
   Layout hygiene layer. Loaded last. It changes spacing and sizing rules
   only, never colours or effects, so the look stays exactly as designed.
   Rules: boxes may shrink and grow with their content, nothing touches a
   neighbour, long text wraps instead of overflowing, wide content scrolls
   instead of being cut off.
   ===================================================================== */
:root{--gap:14px;--gap-s:8px}
/* 1. every box can shrink inside grids and flex rows, and long words wrap */
.card,.kpi,.field,.fwb,.ed,.edcard,.about,.dtile,.dcard,.pcard,.banner,.ck .ct,.rowl>*,.sch>*,.grid2>*,.grid3>*,.kpis>*{min-width:0}
.card h3,.card h4,.kpi .kl,.kpi .ks,.kpi .kv,.rowl>span,.meta,.banner span,.ck .ct,.sch h3,.pill{overflow-wrap:anywhere}
.pill{max-width:100%}
/* 2. rows with several items wrap onto a new line with a clear gap, never collide */
.rowl{flex-wrap:wrap;row-gap:6px;column-gap:12px}
.rowl>span:first-child{flex:1 1 220px}
.acts,.sch,.chips,.tags{row-gap:var(--gap-s)}
.pill+.pill,.pill+.btn,.btn+.pill,.pill+button.link,.meta+.pill{margin-inline-start:6px}
.btn+.btn:not(:is(.acts,.sch,.chips,.tags,.tabs,.seg)>*){margin-inline-start:6px}
/* 3. consistent vertical rhythm between stacked boxes (margins collapse, so no double spacing) */
:is(.card,.grid2,.grid3,.kpis,.tw,.banner,.tabs,.steps)+:is(.card,.grid2,.grid3,.kpis,.tw,.banner):not(:is(.grid2,.grid3,.kpis,.cards,.row3,.fgrid,.acts,.chips)>*){margin-top:var(--gap)}
.fwb+.fwb,.ed+.ed,.edcard+.edcard,.about+.about,.diff+.diff{margin-top:10px}
.ev+.ev{margin-top:4px}
/* 4. tables keep readable columns and scroll sideways instead of crushing or clipping */
.tw td{min-width:96px}.tw th{min-width:72px}
.tw td{overflow-wrap:break-word}
.tw{max-width:100%}
.tw table{width:100%}
/* 5. wide diagrams (organogram) scroll from their left edge instead of being cut off by centring */
.orgchart{max-width:100%}
.orgchart>ul{width:max-content;min-width:100%}
.orgchart li{flex:0 0 auto}
.onode{flex:0 0 auto}
/* 6. kpi tiles and grids adapt to the space they get */
.kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
/* matrix tables: cells wrap instead of overlapping neighbours */
.rrmx{table-layout:auto;min-width:420px}
.rrmx td,.rrmx th{overflow-wrap:anywhere;word-break:normal;white-space:normal;min-width:56px;vertical-align:middle}
.card.tw:has(.rrmx){overflow-x:auto}
/* edition rows: link and meta never share a line unless there is room */
.rowl.ed{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.rowl.ed>*{min-width:0;max-width:100%}
.rowl.ed>.link{flex:1 1 200px;text-align:start;white-space:normal}
.rowl.ed>.meta{flex:0 1 auto}
.rowl.ed>span:first-child{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.rowl.ed>span:first-child>.link{text-align:start;white-space:normal;max-width:100%}
.fwdrop span.mono,.fwrev span.mono,.fwb span.mono{display:inline-block;margin:1px 2px;vertical-align:baseline}
.fwtips li{line-height:1.9}.fwtips .mono{padding:0 4px}

/* ---- v25 ---- */
/* dropdown lists follow the theme (never white) */
select{color-scheme:dark}
select option,select optgroup{background:#0c1c27;color:#e8f4f4}
:root[data-theme=light] select{color-scheme:light}
:root[data-theme=light] select option,:root[data-theme=light] select optgroup{background:#fff;color:#0b2530}
:root[data-theme=light] :is(.sheet,.mbox,.rail,.panel) select{color-scheme:dark}
:root[data-theme=light] :is(.sheet,.mbox,.rail,.panel) select option{background:#0c1c27;color:#e8f4f4}
@media (prefers-color-scheme: light){:root:not([data-theme]) select option{background:#0c1c27;color:#e8f4f4}}

/* panel close button never sits on top of header pills or titles */
.sheet>.x+*,.sheet>.x+*+h2,.mbox>.x+*{padding-inline-end:48px}
.sheet h2{overflow-wrap:anywhere;line-height:1.3}

/* scoring and number values fit their boxes */
.kpi .kv{font-size:clamp(18px,1.9vw,24px)}
.kpis.sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr))}
.kpis.sm .kv{font-size:clamp(17px,1.6vw,20px)}
.kpi .kv .pill{font-size:12.5px;font-weight:600;padding:3px 10px;white-space:normal;line-height:1.25;max-width:100%;text-align:center;justify-content:center;vertical-align:middle}
.kpi{justify-content:flex-start}
button.kpi{font:inherit;color:inherit;cursor:pointer;width:100%}
button.kpi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pill{line-height:1.3}

/* evidence items: clear card rows, status pill beside the title, not on it */
.evi{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.evi+.evi{margin-top:12px}
.evi-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:6px 12px;margin-bottom:6px}
.evi-h>b{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;line-height:1.35}
.evi-h>.pill{flex:0 0 auto}
.evi .meta{line-height:1.5;margin-top:3px}
.evi .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* page header: title block and controls align on one grid */
.ph1{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 20px;margin-bottom:var(--gap)}
.ph1>div:first-child{flex:1 1 280px;min-width:0}
.ph1>.acts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:0}
.ph1 .engsel{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex-wrap:nowrap}
.ph1 .engsel select{min-width:min(280px,100%);max-width:100%}
.engsel{margin-bottom:var(--gap)}
/* form rows and selectors keep a gap to whatever follows */
.fgrid{margin-bottom:var(--gap)}
.fgrid+*{margin-top:0}
.tbar{margin-bottom:10px}
.banner+.banner{margin-top:10px}
.seg+.meta,.seg+p{margin-top:10px}
.dtile,.dcard{min-width:0}
.dgrid,.dkp{align-items:stretch}
.dgrid>*{min-height:0}
.hbt i{min-width:6px}
.hbt{background:color-mix(in srgb,var(--fg,#fff) 14%,transparent)}
/* cards in one row share one height, so rows stay level with no loose gaps */
.grid2,.grid3,.widgets{align-items:stretch}
.grid2>.card,.grid3>.card,.widgets>.card,.grid2>section,.grid3>section{height:100%}