/* CHASH-E platform — "Signal" design system (app edition) */
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:Sora;src:url(fonts/sora.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Noto Sans Bengali";src:url(fonts/bn.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:JB;src:url(fonts/mono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#05131A;--side:#071B23;--side2:#0B2731;--paper:#F4F7F6;--card:#fff;--ink:#0A1A20;--ink2:#3E555D;--mute:#6B8088;
  --line:#E3EAEC;--line2:#D3DEE1;--cy:#12B5F0;--gr:#2ECC8B;--am:#F2B13E;--vi:#8F7DF7;--rd:#E5534F;
  --g:linear-gradient(120deg,#12B5F0,#2ECC8B);--r:14px;--r2:10px;
  --fd:Sora,"Noto Sans Bengali",system-ui,sans-serif;--fb:Inter,"Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",sans-serif;--fm:JB,ui-monospace,Menlo,monospace;
  --sh:0 1px 2px rgba(10,26,32,.05),0 8px 24px -12px rgba(10,26,32,.12)
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 15px/1.55 var(--fb);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:#0B7FAD;text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--fd);letter-spacing:-.02em;margin:0 0 .4em;line-height:1.2}
h1{font-size:clamp(22px,2.4vw,28px);font-weight:650}h2{font-size:18px;font-weight:650}h3{font-size:15.5px;font-weight:650}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}

/* shell */
.app{display:flex;min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:260px;background:var(--side);color:#CFE0E4;display:flex;flex-direction:column;z-index:40;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.side .brand{display:flex;align-items:center;gap:10px;padding:20px 20px 14px}
.side .brand img{height:26px;width:auto}
.side .env{font:600 10px var(--fm);letter-spacing:.14em;color:#06222b;background:var(--am);padding:3px 7px;border-radius:99px}
.side nav{flex:1;overflow-y:auto;padding:6px 10px 20px}
.side .sec{font:600 10.5px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:#6F8D96;margin:18px 12px 6px}
.side a.ni{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:9px;color:#CFE0E4;font-size:14px}
.side a.ni:hover{background:rgba(255,255,255,.05);text-decoration:none}
.side a.ni.on{background:linear-gradient(90deg,rgba(18,181,240,.18),rgba(46,204,139,.08));color:#fff;box-shadow:inset 2px 0 0 var(--gr)}
.side a.ni i{width:6px;height:6px;border-radius:50%;background:#2F4C55;flex:none}.side a.ni.on i{background:var(--gr)}
.side .me{border-top:1px solid rgba(255,255,255,.07);padding:14px 18px;font-size:13px}
.side .me b{display:block;color:#fff;font-weight:600}.side .me small{color:#7E9AA2}
.main{flex:1;margin-left:260px;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;height:58px;padding:0 28px;background:rgba(244,247,246,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .burger{display:none;width:40px;height:40px;border:1px solid var(--line2);border-radius:10px;background:#fff;align-items:center;justify-content:center}
.top .burger span{display:block;width:16px;height:2px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink);border-radius:2px}
.top .tt{font:600 14px var(--fd);color:var(--ink2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .tl{display:flex;gap:8px;align-items:center}
.content{padding:26px 28px 80px;max-width:1280px;width:100%}
.scrim{display:none}
@media(max-width:960px){
  .side{transform:translateX(-100%)}.side.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.35)}
  .main{margin-left:0}.top{padding:0 14px}.top .burger{display:flex}
  .content{padding:18px 14px 90px}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(5,19,26,.45);z-index:35}
}

/* page head */
.ph{margin-bottom:20px}.ph-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ph p{margin:2px 0 0;color:var(--mute)}.ph-act{display:flex;gap:8px;flex-wrap:wrap}
.crumbs{font-size:12.5px;color:var(--mute);margin-bottom:6px;display:flex;gap:6px;flex-wrap:wrap}.crumbs span{opacity:.5}

/* cards, grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.card+.card{margin-top:16px}.card h2{margin-bottom:12px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.stat{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh);color:var(--ink);position:relative;overflow:hidden}
.stat:hover{text-decoration:none;border-color:var(--line2)}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,var(--cy))}
.stat small{display:block;font:600 10.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.stat b{display:block;font:650 26px/1.15 var(--fd);letter-spacing:-.03em;margin:6px 0 2px}
.stat span{font-size:12.5px;color:var(--mute)}
.secttl{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font:600 11px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.secttl::after{content:"";flex:1;height:1px;background:var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:0;background:var(--g);color:#05222B;font:600 14px var(--fb);cursor:pointer;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(18,181,240,.6)}
.btn:hover{text-decoration:none;filter:brightness(1.04)}
.btn.o{background:#fff;color:var(--ink);border:1px solid var(--line2);box-shadow:none}
.btn.d{background:#fff;color:var(--rd);border:1px solid #F3C9C7;box-shadow:none}
.btn.s{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn.dk{background:var(--ink);color:#fff;box-shadow:none}
form.inline{display:inline}

/* forms */
.form{display:grid;gap:14px}.form .row{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form .row.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.form .row,.form .row.r3{grid-template-columns:minmax(0,1fr)}}
.fld label{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.fld .req{color:var(--rd);font-style:normal}
.fld input,.fld select,.fld textarea{width:100%;height:42px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:#fff;font:400 15px var(--fb);color:var(--ink)}
.fld textarea{height:auto;padding:10px 12px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid rgba(18,181,240,.45);border-color:var(--cy)}
.fld small{display:block;color:var(--mute);font-size:12px;margin-top:4px}
.fld.chk label{display:flex;gap:8px;align-items:center;font-weight:500}.fld.chk input{width:18px;height:18px}
.ferr{color:var(--rd);font-size:12.5px;margin:5px 0 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}

/* tables */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font:600 11px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);background:#FAFCFB;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid #EEF3F4;vertical-align:top}
tr:last-child td{border-bottom:0}tbody tr:hover{background:#FAFDFC}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td:first-child{white-space:nowrap}
td .sub{display:block;color:var(--mute);font-size:12.5px}
tfoot td{font-weight:650;background:#FAFCFB}
.mono{font-family:var(--fm);font-size:12.5px}

/* badges, notes */
.badge{display:inline-block;font:600 10.5px var(--fm);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;white-space:nowrap;border:1px solid}
.b-ok{color:#11815A;background:#E8F8F1;border-color:#BFEBD8}.b-info{color:#0D7BA6;background:#E7F6FD;border-color:#BCE6F8}
.b-warn{color:#9A6608;background:#FDF4E2;border-color:#F4DEA8}.b-bad{color:#B4322E;background:#FDECEB;border-color:#F4C5C3}
.b-mute{color:#5C7178;background:#F1F4F5;border-color:#DFE6E8}
.flash{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash.ok{background:#E8F8F1;border-color:#BFEBD8;color:#0E6B4A}.flash.bad{background:#FDECEB;border-color:#F4C5C3;color:#9B2A27}
.note{font-size:12.5px;color:var(--mute);margin:10px 0 0}
.empty{text-align:center;padding:40px 16px;color:var(--mute)}.empty svg{width:34px;height:34px;color:#B8C7CB}.empty p{margin:8px 0 14px}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 20px;margin:0}
.kv dt{font:600 10.5px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.kv dd{margin:3px 0 0;font-weight:500}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.filters a{padding:6px 12px;border-radius:99px;border:1px solid var(--line2);background:#fff;color:var(--ink2);font-size:13px}
.filters a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.timeline{list-style:none;margin:0;padding:0}.timeline li{position:relative;padding:0 0 14px 22px;font-size:13.5px}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--gr)}
.timeline li::after{content:"";position:absolute;left:8.5px;top:16px;bottom:0;width:1px;background:var(--line2)}.timeline li:last-child::after{display:none}
.money{font-variant-numeric:tabular-nums}
.big{font:650 30px var(--fd);letter-spacing:-.03em}

/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--bg)}
.auth .art{position:relative;overflow:hidden;color:#E8F2F3;padding:48px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(800px 500px at 20% 20%,rgba(18,181,240,.22),transparent 60%),radial-gradient(700px 500px at 80% 90%,rgba(46,204,139,.18),transparent 60%),var(--bg)}
.auth .art img{height:32px;width:auto}.auth .art h1{font-size:clamp(28px,3.4vw,44px);color:#fff;max-width:520px}
.auth .art h1 em{font-style:normal;background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth .art p{color:#9FB9C0;max-width:460px}
.auth .panel{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:32px 20px}
.auth .box{width:100%;max-width:380px}
@media(max-width:860px){.auth{grid-template-columns:1fr}.auth .art{padding:28px 22px;min-height:auto}.auth .art .ft{display:none}}

/* payslip / print */
.slip{max-width:760px}.slip .hd{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:14px}
@media print{.side,.top,.ph-act,.noprint{display:none!important}.main{margin:0}.content{padding:0}.card{box-shadow:none;border:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

[hidden]{display:none!important}
/* password eye */
.pw{position:relative}.pw input{padding-right:48px}
.pw-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:40px;height:38px;border:0;border-radius:8px;background:transparent;color:var(--mute);display:grid;place-items:center;cursor:pointer}
.pw-eye:hover{color:var(--ink)}.pw-eye:focus-visible{outline:2px solid rgba(18,181,240,.45)}
/* robot check */
.robot{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line2);border-radius:12px;padding:11px 12px;background:#fff;margin:4px 0 12px}
.robot-btn{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;font:500 14px var(--fb);color:var(--ink);cursor:pointer;text-align:left}
.robot-btn small{display:block;color:var(--mute);font-size:12px;font-weight:400}
.robot-box{width:26px;height:26px;flex:none;border:2px solid var(--line2);border-radius:7px;background:#fff;display:grid;place-items:center;transition:background .2s,border-color .2s}
.robot.busy .robot-box{border-color:var(--cy);border-top-color:transparent;border-radius:50%;animation:robotspin .8s linear infinite}
.robot.done .robot-box{background:#2ECC8B;border-color:#2ECC8B}
.robot.done .robot-box::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:translateY(-1px) rotate(45deg)}
.robot-st{font-size:12px;color:var(--mute);text-align:right}.robot.done .robot-st{color:#0E6B4A;font-weight:600}
@keyframes robotspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.robot.busy .robot-box{animation:none;border-top-color:var(--cy)}}
.or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px;margin:12px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line2)}
.btn.pk svg{flex:none}
.pk-list{margin:8px 0 14px}.pk-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line2)}.pk-row:first-child{border-top:0}.pk-row .sub{display:block}.pk-row form{flex:none}
/* language switch + bell */
.top-act{display:flex;align-items:center;gap:10px;flex:none}
.lang{display:inline-flex;border:1px solid var(--line2);border-radius:999px;background:#fff;padding:2px;font:600 12.5px var(--fb)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:30px;padding:0 10px;border-radius:999px;color:var(--ink2);text-decoration:none}
.lang a.on{background:var(--ink);color:#fff}
.lang a:focus-visible{outline:2px solid rgba(18,181,240,.6)}
.lang-float{position:fixed;top:12px;right:12px;z-index:50;box-shadow:0 6px 20px -10px rgba(0,0,0,.5)}
.bell{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--ink2);border:1px solid var(--line2);background:#fff}
.bell:hover{color:var(--ink)}
.bell .dot{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--rd);color:#fff;font:700 11px/20px var(--fb);text-align:center}
body.lang-bn{--fb:"Noto Sans Bengali",Inter,system-ui,sans-serif;--fd:"Noto Sans Bengali",Sora,system-ui,sans-serif}
body.lang-bn .badge,body.lang-bn .sec,body.lang-bn .kv dt{letter-spacing:0;text-transform:none}
/* notifications list */
.nlist{display:flex;flex-direction:column;gap:8px}
.nitem{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;text-decoration:none}
.nitem.unread{border-color:#BFE6F5;background:#F2FAFE}
.nitem b{display:block}.nitem p{margin:4px 0 0;color:var(--ink2);font-size:13.5px;white-space:pre-line}.nitem small{color:var(--mute);font-size:12px}
.nudge{display:flex;flex-direction:column;gap:4px;border-color:#BFE6F5;background:linear-gradient(120deg,#F0FAFE,#EFFBF5);color:inherit;text-decoration:none;margin-bottom:16px}.nudge span{color:var(--ink2);font-size:13.5px}