/* ============================================================================
   MITU HR PORTAL — DESIGN SYSTEM  "Pumpkin / Ink"
   Palette: Pumpkin Orange · Black · Grey · White   ·   Font: Montserrat
   ============================================================================ */
:root{
  /* brand */
  --pk:#FF7518;        /* pumpkin orange (primary) */
  --pk2:#E45F0C;       /* darker pumpkin (hover/active) */
  --pk3:#C24E05;       /* deepest */
  --pk-soft:#FFF1E6;   /* tint background */
  --pk-100:#FFE2CC;    /* pale */
  --pk-line:#FFD0AC;

  /* ink / greys / white */
  --black:#0E0F12;     /* near-true black (sidebar, topbar) */
  --ink:#16181D;       /* headings */
  --ink2:#23262D;
  --tx:#22262C;        /* body text */
  --mu:#6B7280;        /* muted */
  --su:#98A0AC;        /* subtle */
  --white:#ffffff;
  --bg:#F5F6F8;        /* app background (light grey) */
  --sf:#ffffff;        /* surfaces */
  --s2:#F7F8FA;
  --bd:#E6E8EC;        /* borders */
  --bds:#D6DAE0;       /* strong border */
  --g700:#2D3138;

  /* semantic (harmonised with pumpkin) */
  --gn:#15803D;  --gbg:#E4F4EA;
  --am:#B45309;  --abg:#FBEFD8;  --abd:#EBCF93;
  --rd:#C2300C;  --rbg:#FBE5DC;
  --bl:#2563EB;  --bbg:#E6EDFD;
  --tl:#0E7490;  --tbg:#DBF0F2;
  --pu:#7C3AED;  --pbg:#EFE7FD;

  --shd:0 1px 2px rgba(14,15,18,.05), 0 6px 20px rgba(14,15,18,.06);
  --shd2:0 18px 50px rgba(14,15,18,.18);
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;
  --r:14px;--rs:10px;--rl:18px;--sw:256px;--th:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-size:14px}
body{font-family:var(--sans);line-height:1.5;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3{font-family:var(--sans);font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-.02em}
table{border-collapse:collapse;width:100%}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--bds);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--su)}

/* ── AUTH ─────────────────────────────────────────────────────────────── */
.aw{position:fixed;inset:0;z-index:9999;background:
   radial-gradient(1200px 600px at 80% -10%,rgba(255,117,24,.18),transparent),
   linear-gradient(160deg,#0E0F12,#1b1d22 60%,#23262d);display:grid;place-items:center;padding:20px}
.ac{width:min(430px,94vw);background:#fff;border-radius:var(--rl);box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.at{padding:30px 28px 22px;text-align:center;border-bottom:1px solid var(--bd)}
.alo{width:62px;height:62px;margin:0 auto 14px;border-radius:16px;background:linear-gradient(135deg,var(--pk),var(--pk2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:17px;box-shadow:0 10px 24px rgba(255,117,24,.4)}
.at h2{font-size:23px;margin-bottom:4px;font-weight:800}
.aco{font-size:11px;color:var(--mu);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.ab{padding:24px 28px 22px;display:flex;flex-direction:column;gap:15px}
.afd{display:flex;flex-direction:column;gap:6px}
.afd label{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.06em}
.afd input{padding:12px 14px;border:1.5px solid var(--bds);border-radius:var(--rs);font-size:14px;outline:none;transition:.15s}
.afd input:focus{border-color:var(--pk);box-shadow:0 0 0 4px rgba(255,117,24,.13)}
.aerr{font-size:12.5px;color:var(--rd);background:var(--rbg);padding:9px 13px;border-radius:var(--rs);display:none}
.ahint{background:var(--s2);border:1px solid var(--bd);border-radius:var(--rs);padding:13px 15px;font-size:12px;color:var(--mu);line-height:1.9}
.ahint strong{color:var(--ink)}
.ahint code{font-family:var(--mono);font-size:11px;background:var(--pk-soft);color:var(--pk3);padding:1px 5px;border-radius:4px}

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.topbar{height:var(--th);background:var(--black);display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0;z-index:100}
.brand{display:flex;align-items:center;gap:11px;min-width:226px}
.bmark{width:36px;height:36px;background:linear-gradient(135deg,var(--pk),var(--pk2));border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(255,117,24,.4)}
.bname{font-size:15px;font-weight:800;color:#fff;letter-spacing:-.02em}
.bsub{font-size:9.5px;color:#8b909a;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.tsr{flex:1;max-width:380px;position:relative}
.tsr input{width:100%;height:36px;padding:0 12px 0 34px;border:1px solid #2a2d34;border-radius:var(--rs);font-size:13px;background:#1a1c21;color:#fff;outline:none;transition:.15s}
.tsr input::placeholder{color:#7a7f8a}
.tsr input:focus{background:#23262d;border-color:var(--pk)}
.tsr::before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#7a7f8a;font-size:16px;pointer-events:none}
.trgt{display:flex;align-items:center;gap:9px;margin-left:auto}
.pulse{width:8px;height:8px;border-radius:50%;background:#34d36a;box-shadow:0 0 0 0 rgba(52,211,106,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,106,.5)}70%{box-shadow:0 0 0 6px rgba(52,211,106,0)}100%{box-shadow:0 0 0 0 rgba(52,211,106,0)}}
.nbtn{position:relative;width:36px;height:36px;border-radius:var(--rs);border:1px solid #2a2d34;display:flex;align-items:center;justify-content:center;font-size:15px;color:#c5c9d1;background:#1a1c21}
.nbtn:hover{background:#23262d}
.nbd{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--pk);border:2px solid var(--black)}
.uchip{display:flex;align-items:center;gap:8px;padding:4px 11px 4px 5px;border:1px solid #2a2d34;border-radius:999px;background:#1a1c21;cursor:pointer;font-size:13px;color:#e6e8ec}
.uchip:hover{background:#23262d}
.av{width:29px;height:29px;border-radius:50%;background:linear-gradient(135deg,var(--pk),var(--pk2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.av.sm{width:25px;height:25px;font-size:10px}.av.md{width:38px;height:38px;font-size:13px}
.av.gn{background:linear-gradient(135deg,#15803D,#22a35a)}.av.am{background:linear-gradient(135deg,#B45309,#d98324)}
.av.tl{background:linear-gradient(135deg,#0E7490,#18a0bf)}.av.pu{background:linear-gradient(135deg,#7C3AED,#9b63f5)}
.av.rd{background:linear-gradient(135deg,#C2300C,#e0511f)}

/* ── SIDEBAR ──────────────────────────────────────────────────────────── */
.layout{display:flex;flex:1;overflow:hidden}
.sidebar{width:var(--sw);background:var(--black);overflow-y:auto;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #1f2126}
.sbinn{flex:1;padding:12px 0}
.ng{margin-bottom:6px}
.ngh{padding:11px 16px 6px;font-size:9.5px;font-weight:700;color:#6c7280;text-transform:uppercase;letter-spacing:.13em;display:flex;align-items:center;gap:7px}
.nd{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.ni{display:flex;align-items:center;gap:10px;padding:8px 16px;margin:1px 9px;font-size:13px;font-weight:500;color:#aeb3bd;cursor:pointer;border-radius:var(--rs);transition:.12s}
.ni:hover{background:#1c1e24;color:#fff}
.ni.active{background:linear-gradient(135deg,var(--pk),var(--pk2));color:#fff;font-weight:600;box-shadow:0 6px 16px rgba(255,117,24,.3)}
.nic{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.nbg{margin-left:auto;font-family:var(--mono);font-size:10px;background:#23262d;color:#ffb27a;padding:1px 7px;border-radius:9px;font-weight:700}
.ni.active .nbg{background:rgba(0,0,0,.25);color:#fff}
.sbft{padding:12px 14px;border-top:1px solid #1f2126;margin-top:auto;background:#0b0c0f}
.sbft .av{width:32px;height:32px}
.rb{display:inline-block;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;border-radius:6px;background:var(--pk-soft);color:var(--pk3);margin-top:2px}
.sbnm{font-size:12.5px;font-weight:700;color:#fff}

/* ── CONTENT ──────────────────────────────────────────────────────────── */
.content{flex:1;overflow-y:auto;background:var(--bg)}
.page{display:none;padding:24px 28px 60px;max-width:1320px;margin:0 auto}.page.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bc{font-size:11.5px;color:var(--su);margin-bottom:9px;font-weight:600}
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.ph h1{font-size:25px;font-weight:800}
.ph h1::after{content:"";display:block;width:42px;height:3px;background:var(--pk);border-radius:2px;margin-top:8px}
.ph .sub{font-size:13px;color:var(--mu);margin-top:10px;max-width:640px;line-height:1.55}
.pha{display:flex;gap:9px;flex-wrap:wrap}

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--rs);font-size:13px;font-weight:600;border:1.5px solid var(--bds);background:#fff;color:var(--ink);transition:.14s;line-height:1;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--pk);background:var(--pk-soft);color:var(--pk3)}
.btn.prim{background:linear-gradient(135deg,var(--pk),var(--pk2));color:#fff;border-color:var(--pk2)}
.btn.prim:hover{background:linear-gradient(135deg,var(--pk2),var(--pk3));color:#fff}
.btn.sm{padding:5px 11px;font-size:12px}
.btn.dark{background:var(--ink);color:#fff;border-color:var(--ink)}.btn.dark:hover{background:var(--ink2);color:#fff}
.btn.tl{background:var(--tl);color:#fff;border-color:var(--tl)}.btn.tl:hover{color:#fff;background:#0b5e76}
.btn.gn{background:var(--gn);color:#fff;border-color:var(--gn)}.btn.gn:hover{color:#fff;background:#136c34}
.btn.rd{background:var(--rd);color:#fff;border-color:var(--rd)}.btn.rd:hover{color:#fff;background:#a5280a}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ── CARDS ────────────────────────────────────────────────────────────── */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--shd)}
.ch{padding:14px 18px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff}
.ch h3{font-size:15px;font-weight:700}
.cb{padding:16px 18px}
.card.cn{border-top:3px solid var(--ink)}.card.cb2{border-top:3px solid var(--bl)}.card.ct{border-top:3px solid var(--tl)}
.card.cp{border-top:3px solid var(--pu)}.card.ca{border-top:3px solid var(--pk)}.card.cg{border-top:3px solid var(--gn)}.card.cr{border-top:3px solid var(--rd)}

/* ── KPIs ─────────────────────────────────────────────────────────────── */
.kg{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;margin-bottom:22px}
.kg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--shd);transition:.16s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(14,15,18,.1)}
.kpi::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--pk)}
.kpi.g::before{background:var(--gn)}.kpi.a::before{background:var(--am)}.kpi.r::before{background:var(--rd)}.kpi.p::before{background:var(--pu)}.kpi.t::before{background:var(--tl)}.kpi.b::before{background:var(--bl)}
.kpi .lbl{font-size:10.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:6px}
.kpi .val{font-size:27px;font-weight:800;color:var(--ink);font-family:var(--mono);line-height:1.05;letter-spacing:-.03em}
.kpi .dl{font-size:11.5px;margin-top:6px;font-weight:600}.kpi .dl.up{color:var(--gn)}.kpi .dl.dn{color:var(--rd)}.kpi .dl.w{color:var(--am)}

/* ── TABLES ───────────────────────────────────────────────────────────── */
.dt{font-size:13px}
.dt thead th{text-align:left;padding:10px 14px;background:var(--s2);font-weight:700;color:var(--g700);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--bd);white-space:nowrap}
.dt tbody td{padding:11px 14px;border-bottom:1px solid var(--bd);vertical-align:middle}
.dt tbody tr:last-child td{border-bottom:none}
.dt tbody tr:hover td{background:var(--pk-soft)}
.dt .num{text-align:right;font-family:var(--mono)}.dt .act{text-align:right;white-space:nowrap}
.twrap{overflow-x:auto}

/* ── BADGES ───────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:7px;white-space:nowrap;letter-spacing:.02em}
.badge.g{background:var(--gbg);color:var(--gn)}.badge.a{background:var(--abg);color:var(--am)}.badge.r{background:var(--rbg);color:var(--rd)}
.badge.b{background:var(--bbg);color:var(--bl)}.badge.t{background:var(--tbg);color:var(--tl)}.badge.p{background:var(--pbg);color:var(--pu)}
.badge.n{background:var(--pk-soft);color:var(--pk3)}.badge.k{background:var(--ink);color:#fff}
.idc{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--pk3);background:var(--pk-soft);padding:2px 8px;border-radius:6px;display:inline-block}

/* ── UTILS ────────────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.mb{margin-bottom:16px}.mb2{margin-bottom:24px}
.fx{display:flex;align-items:center;gap:8px}

/* ── ALERTS ───────────────────────────────────────────────────────────── */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 15px;border-radius:var(--rs);margin-bottom:18px;font-size:13px;line-height:1.55;font-weight:500}
.alert.warn{background:var(--pk-soft);border:1px solid var(--pk-line);color:var(--pk3)}
.alert.info{background:var(--bbg);border:1px solid #c3d4fb;color:var(--bl)}
.alert.danger{background:var(--rbg);border:1px solid #f0bba8;color:var(--rd)}
.alert.success{background:var(--gbg);border:1px solid #a8d8b8;color:var(--gn)}
.alert.teal{background:var(--tbg);border:1px solid #a3d6df;color:var(--tl)}

/* ── PROGRESS BARS ────────────────────────────────────────────────────── */
.pr{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px}
.pr .pl{width:156px;color:var(--tx);flex-shrink:0;font-size:12px;font-weight:500}
.pr .pb{flex:1;height:7px;background:var(--g100);border-radius:4px;overflow:hidden}
.pr .pf{height:7px;border-radius:4px}.pr .pv{width:36px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--mu);flex-shrink:0;font-weight:600}

/* ── STAGE TRACKER ────────────────────────────────────────────────────── */
.stg{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 10px;background:#fff;border-radius:var(--r);border:1px solid var(--bd);margin-bottom:20px;box-shadow:var(--shd)}
.ss{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:80px}
.sc{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border:2px solid var(--bds);background:#fff;color:var(--su)}
.ss.done .sc{background:var(--gn);border-color:var(--gn);color:#fff}
.ss.cur .sc{background:var(--pk);border-color:var(--pk);color:#fff;box-shadow:0 0 0 4px var(--pk-soft)}
.sl{margin-top:7px;font-size:11px;font-weight:600;color:var(--mu)}.ss.done .sl{color:var(--gn)}.ss.cur .sl{color:var(--pk3)}
.scon{flex:1;height:2px;background:var(--bd);margin:18px 3px 0;border-radius:1px}.scon.done{background:var(--gn)}

/* ── SCORE BARS ───────────────────────────────────────────────────────── */
.sbar{margin-bottom:13px}.sbl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;font-weight:500}
.sbg{height:9px;background:var(--g100);border-radius:5px;overflow:hidden}.sbf{height:100%;border-radius:5px;transition:.4s}

/* ── ROW ITEMS ────────────────────────────────────────────────────────── */
.ri{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bd);gap:8px}
.ri:last-child{border-bottom:none}.ril{display:flex;align-items:center;gap:9px;min-width:0;flex:1}.rir{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ci{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--bd)}.ci:last-child{border-bottom:none}

/* ── TABS ─────────────────────────────────────────────────────────────── */
.tabs{display:flex;border-bottom:2px solid var(--bd);margin-bottom:20px;overflow-x:auto;gap:2px}
.tab{padding:9px 17px;font-size:13px;font-weight:600;color:var(--mu);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:.12s;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--pk3);border-bottom-color:var(--pk)}

/* ── FORMS ────────────────────────────────────────────────────────────── */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:14px}.fg.w1{grid-template-columns:1fr}
.ff{display:flex;flex-direction:column;gap:5px}
.ff label{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.05em}
.ff input,.ff select,.ff textarea{padding:9px 11px;border:1.5px solid var(--bds);border-radius:var(--rs);font-size:13px;outline:none;transition:.12s;background:#fff;width:100%}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--pk);box-shadow:0 0 0 3px rgba(255,117,24,.12)}
.ff input[readonly]{background:var(--s2);color:var(--mu)}
.ff.s2{grid-column:span 2}

/* ── MODAL ────────────────────────────────────────────────────────────── */
.mbg{display:none;position:fixed;inset:0;background:rgba(14,15,18,.55);z-index:500;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(2px)}
.mbg.open{display:flex;animation:fade .18s ease}
.modal{background:#fff;border-radius:var(--rl);width:min(700px,96vw);max-height:90vh;overflow-y:auto;box-shadow:var(--shd2);display:flex;flex-direction:column}
.mh{padding:18px 22px 15px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.mh h2{font-size:18px;font-weight:800}
.mb3{padding:20px 22px;flex:1}.mf{padding:14px 22px;border-top:1px solid var(--bd);display:flex;justify-content:flex-end;gap:9px;flex-shrink:0;background:var(--s2)}
.xbtn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:17px}
.xbtn:hover{background:var(--rbg);color:var(--rd)}

/* ── TOAST ────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 18px;border-radius:var(--rs);font-size:13px;font-weight:600;z-index:9999;opacity:0;transform:translateY(12px);transition:.28s;pointer-events:none;max-width:360px;box-shadow:var(--shd2);border-left:4px solid var(--pk)}
.toast.show{opacity:1;transform:none}
.toast.err{border-left-color:var(--rd)}.toast.ok{border-left-color:var(--gn)}.toast.info{border-left-color:var(--bl)}

/* ── SEARCH DROPDOWN ──────────────────────────────────────────────────── */
.sres{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--bds);border-radius:var(--rs);box-shadow:var(--shd2);z-index:200;max-height:340px;overflow-y:auto;display:none;margin-top:6px}
.sres.show{display:block}
.sri{padding:11px 15px;cursor:pointer;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:11px;font-size:13px}
.sri:last-child{border-bottom:none}.sri:hover{background:var(--pk-soft)}
.srt{font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--ink);color:#fff;flex-shrink:0;text-transform:uppercase;letter-spacing:.03em}

/* ── CAS / ESS / ORG ──────────────────────────────────────────────────── */
.casc{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;position:relative;overflow:hidden;margin-bottom:11px}
.casc::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--pu)}
.casc.el::before{background:var(--gn)}.casc.ov::before{background:var(--rd)}
.casn{font-size:14px;font-weight:700;color:var(--ink)}.casm{font-size:12px;color:var(--mu);margin-top:3px}
.etile{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:16px;cursor:pointer;transition:.16s;text-align:left;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shd)}
.etile:hover{border-color:var(--pk);transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,117,24,.14)}
.on{background:#fff;border:1.5px solid var(--bd);border-radius:var(--rs);padding:11px 15px;text-align:center;display:inline-block;min-width:118px}
.on.root{background:var(--ink);border-color:var(--ink)}.oname{font-size:12px;font-weight:700;color:var(--ink)}.on.root .oname{color:#fff}
.ot{font-size:10.5px;color:var(--mu);margin-top:2px}.on.root .ot{color:rgba(255,255,255,.65)}
.ovl{width:2px;height:16px;background:var(--bds);margin:0 auto}
.or{display:flex;justify-content:center;gap:18px;margin-top:6px}.ob{display:flex;flex-direction:column;align-items:center}

@media print{body *{visibility:hidden}.payslip,.payslip *{visibility:visible}.payslip{position:absolute;left:0;top:0;width:100%}}
@media(max-width:920px){.g2,.g3,.g4,.kg4{grid-template-columns:1fr}.sidebar{display:none}.fg{grid-template-columns:1fr}.ff.s2{grid-column:span 1}.brand{min-width:auto}}