:root{
  --bg:#f4f6f8; --surface:#fff; --ink:#17212b; --muted:#5b6b7a; --line:#dfe5ea;
  --brand:#0f4c5c; --brand-ink:#fff; --brand-soft:#e3eff2; --accent:#e36414;
  --ssc:#1d5fd1; --ssc-soft:#e6eefc; --jntt:#b45f06; --jntt-soft:#fdf0dc;
  --ok:#1b7f4b; --ok-soft:#e2f4ea; --warn:#9a6700; --warn-soft:#fff4d6; --bad:#b42318; --bad-soft:#fde8e6;
  --radius:10px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0f1519; --surface:#172027; --ink:#e8eef2; --muted:#9bb0bf; --line:#2a3944; --brand:#58b6c9; --brand-ink:#08262d; --brand-soft:#17323a;
    --ssc:#7aa7ff; --ssc-soft:#1a2a4a; --jntt:#f0a24a; --jntt-soft:#3a2a12; --ok:#58c98a; --ok-soft:#14301f; --warn:#f0c14a; --warn-soft:#352b0e; --bad:#ff8a80; --bad-soft:#3b1815;}
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Bengali",sans-serif;background:var(--bg);color:var(--ink)}
h1{font-size:1.45rem;margin:0 0 .25rem} h2{font-size:1.1rem;margin:0 0 .75rem} h3{font-size:.95rem;margin:0 0 .5rem}
a{color:var(--brand)} .muted{color:var(--muted)} .small{font-size:.85rem} .right{text-align:right} .nowrap{white-space:nowrap}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* shell */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--brand);color:var(--brand-ink);padding:1rem .75rem;position:sticky;top:0;height:100vh;overflow:auto}
@media (prefers-color-scheme:dark){.side{background:#10242b;color:#e8eef2}}
.brand{display:flex;gap:.6rem;align-items:center;padding:.25rem .5rem 1rem;font-weight:700;line-height:1.2}
.brand .logo{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800}
.nav a{display:flex;gap:.6rem;align-items:center;padding:.6rem .75rem;border-radius:8px;color:inherit;text-decoration:none;margin-bottom:2px;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.12)} .nav a.active{background:rgba(255,255,255,.22);font-weight:600;opacity:1}
.main{min-width:0}
.top{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .who{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.menu-btn{display:none}
.content{padding:1.25rem;max-width:1280px;margin:0 auto}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:260px;z-index:20;transform:translateX(-105%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .menu-btn{display:inline-flex}
  .content{padding:.85rem}
  .top{padding:.6rem .85rem}
}

/* components */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;margin-bottom:1rem}
.grid{display:grid;gap:1rem} .g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.kpi{padding:.85rem 1rem;border-radius:var(--radius);background:var(--brand-soft)} .kpi b{display:block;font-size:1.6rem;line-height:1.1}
.kpi.warn{background:var(--warn-soft)} .kpi.bad{background:var(--bad-soft)} .kpi.ok{background:var(--ok-soft)}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .between{justify-content:space-between}
.btn{display:inline-flex;gap:.4rem;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);padding:.5rem .85rem;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink);min-height:38px}
.btn:hover{border-color:var(--brand)} .btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff} .btn.ghost{background:transparent} .btn.small{min-height:30px;padding:.25rem .6rem;font-size:.85rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.badge{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.76rem;font-weight:600;background:var(--brand-soft);color:var(--brand);white-space:nowrap}
.badge.ssc{background:var(--ssc-soft);color:var(--ssc)} .badge.jntt{background:var(--jntt-soft);color:var(--jntt)} .badge.both{background:linear-gradient(90deg,var(--ssc-soft),var(--jntt-soft));color:var(--ink)}
.badge.ok{background:var(--ok-soft);color:var(--ok)} .badge.warn{background:var(--warn-soft);color:var(--warn)} .badge.bad{background:var(--bad-soft);color:var(--bad)} .badge.gray{background:var(--line);color:var(--muted)}
table{width:100%;border-collapse:collapse} th,td{padding:.55rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--bg);position:sticky;top:0}
tbody tr.click{cursor:pointer} tbody tr.click:hover{background:var(--brand-soft)}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.8rem} .filters>*{min-width:140px}
input,select,textarea{width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);min-height:38px}
input:focus,select:focus,textarea:focus,.btn:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:.2rem;font-weight:600}
.field{margin-bottom:.8rem} .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 1rem}
.hint{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.alert{padding:.7rem .9rem;border-radius:8px;margin-bottom:.8rem;border:1px solid transparent}
.alert.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad)} .alert.ok{background:var(--ok-soft);color:var(--ok)} .alert.warn{background:var(--warn-soft);color:var(--warn)} .alert.info{background:var(--brand-soft);color:var(--brand)}
dl.kv{display:grid;grid-template-columns:150px 1fr;gap:.35rem .8rem;margin:0} dl.kv dt{color:var(--muted)} dl.kv dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){dl.kv{grid-template-columns:1fr} dl.kv dt{margin-top:.4rem}}
.pager{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;margin-top:.6rem}
.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1rem;overflow:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:.55rem .85rem;cursor:pointer;color:var(--muted);font-weight:600;white-space:nowrap}
.tabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.secret{font:600 1.15rem ui-monospace,Menlo,monospace;letter-spacing:.08em;padding:.6rem .8rem;background:var(--bg);border:1px dashed var(--muted);border-radius:8px;overflow-wrap:anywhere;user-select:all}
.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.4rem;font-family:ui-monospace,Menlo,monospace}
.codes span{background:var(--bg);padding:.35rem .5rem;border-radius:6px;text-align:center;user-select:all}

/* login */
.auth{min-height:100vh;display:grid;place-items:center;padding:1rem;background:linear-gradient(135deg,var(--brand) 0,#0a2f38 100%)}
.auth .box{background:var(--surface);width:min(440px,100%);border-radius:14px;padding:1.6rem;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.auth .brand{padding:0 0 1rem;color:var(--ink)}

/* modal / toast */
.overlay{position:fixed;inset:0;background:rgba(10,20,30,.55);display:grid;place-items:center;padding:1rem;z-index:50;overflow:auto}
.modal{background:var(--surface);border-radius:12px;padding:1.2rem;width:min(640px,100%);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal.wide{width:min(900px,100%)}
#toasts{position:fixed;right:1rem;bottom:1rem;display:grid;gap:.5rem;z-index:60;max-width:min(420px,calc(100vw - 2rem))}
.toast{padding:.7rem .9rem;border-radius:8px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow)} .toast.bad{background:var(--bad);color:#fff} .toast.ok{background:var(--ok);color:#fff}
.timeout-bar{position:fixed;left:0;right:0;top:0;background:var(--warn);color:#fff;text-align:center;padding:.4rem;z-index:70;font-weight:600}

/* permission matrix */
.matrix{font-size:.85rem} .matrix th,.matrix td{padding:.3rem .4rem;text-align:center;min-width:92px} .matrix td:first-child,.matrix th:first-child{text-align:left;position:sticky;left:0;background:var(--surface);min-width:240px;z-index:1}
.matrix select{min-height:30px;padding:.15rem .3rem;font-size:.82rem} .matrix .res td{background:var(--bg);font-weight:700;text-align:left}
.matrix select.s-own{border-color:var(--ok)} .matrix select.s-team{border-color:var(--ssc)} .matrix select.s-company{border-color:var(--jntt)} .matrix select.s-all{border-color:var(--bad);font-weight:700}
.matrix select.changed{background:var(--warn-soft)}
pre.json{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;background:var(--bg);padding:.5rem;border-radius:6px;max-height:240px;overflow:auto}

/* utility classes (no inline styles allowed by CSP) */
.row.end{justify-content:flex-end} .mt1{margin-top:.8rem} .mt2{margin-top:1.2rem} .dim{opacity:.8}
.btn.full{width:100%} select.auto{width:auto} input.chk{width:auto;min-height:0}
.btn.menu-btn{display:none}
@media (max-width:860px){.btn.menu-btn{display:inline-flex}}
.matrix select{min-width:84px}

/* Part 2 */
.navbadge{display:inline-block;margin-left:.4rem;background:var(--bad);color:#fff;border-radius:999px;padding:0 .45rem;font-size:.72rem;font-weight:700}
.sect{margin:1rem 0 .4rem;font-size:1rem;color:var(--brand);border-bottom:1px solid var(--line);padding-bottom:.2rem}
.ro{padding:.5rem .6rem;background:var(--brand-soft);border-radius:8px;min-height:2.2rem}
.chkl{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem}
.card-bad{border-color:var(--bad)} .overdue-row{background:var(--bad-soft)}
.stepper{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0}
.stepper li{display:flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--muted,#667)}
.stepper li span{display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--line);font-size:.75rem}
.stepper li.done{background:var(--ok-soft);color:var(--ok)} .stepper li.cur{background:var(--brand);color:#fff;border-color:var(--brand)} .stepper li.cur span{background:#fff;color:var(--brand)}

/* Part 3 */
.neg{color:var(--bad);font-weight:700}

/* Part 4 */
.tabs.flat{margin:0;border:0}
.hr{display:inline-block;width:3rem}
.bar{display:inline-block;height:.7rem}
.bar.used{background:var(--ok,#1b7f4b)}
.bar.idle{background:var(--line,#ccd)}
.bar.w0{width:0px}
.bar.w1{width:10px}
.bar.w2{width:20px}
.bar.w3{width:30px}
.bar.w4{width:40px}
.bar.w5{width:50px}
.bar.w6{width:60px}
.bar.w7{width:70px}
.bar.w8{width:80px}
.bar.w9{width:90px}
.bar.w10{width:100px}
.bar.w11{width:110px}
.bar.w12{width:120px}
.bar.w13{width:130px}
.bar.w14{width:140px}
.bar.w15{width:150px}
.bar.w16{width:160px}
.bar.w17{width:170px}
.bar.w18{width:180px}
.bar.w19{width:190px}
.bar.w20{width:200px}
.bar.w21{width:210px}
.bar.w22{width:220px}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:.8rem 0}