:root{--bg:#f4f5f7;--fg:#1c2330;--card:#fff;--line:#dde1e8;--pri:#2457d6;--mut:#6a7384}
@media(prefers-color-scheme:dark){:root{--bg:#14171d;--fg:#e6e9ef;--card:#1d222b;--line:#2f3642;--pri:#6b93ff;--mut:#9aa3b2}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,Segoe UI,sans-serif}
.nav{display:flex;gap:16px;align-items:center;padding:10px 20px;background:var(--card);border-bottom:1px solid var(--line);flex-wrap:wrap}
.nav a{color:var(--fg);text-decoration:none}.nav a:hover{color:var(--pri)}.sp{flex:1}
main{max-width:1100px;margin:0 auto;padding:20px 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 16px;overflow-x:auto}
.narrow{max-width:420px;margin:40px auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.stats .card{margin:0}.stats b{font-size:26px;display:block}
h2,h3{margin:0 0 12px}label{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;color:var(--mut);font-size:13px}
input,select,button,.btn{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg)}
button,.btn{cursor:pointer;text-decoration:none}button.pri{background:var(--pri);color:#fff;border-color:var(--pri)}.big{font-size:20px;padding:14px 36px}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.row label{margin:0}.inline{display:flex;gap:6px}
table{border-collapse:collapse;width:100%}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--mut);font-weight:600;font-size:13px}
.flash{background:#e3f1e6;color:#1d5a2c;padding:10px 14px;border-radius:8px;margin-bottom:16px}.flash.err{background:#fbe4e4;color:#8a1f1f}
.b{padding:2px 9px;border-radius:99px;font-size:12px;background:var(--line)}
.Present,.approved{background:#d7f0dd;color:#1d5a2c}.Late,.pending,.Pending{background:#fdecc8;color:#7a5200}.Absent,.rejected{background:#f8d6d6;color:#8a1f1f}
.Leave{background:#d9e6fb;color:#1a3f86}.Holiday,.Weekly{background:#e6dcf5;color:#4a2a80}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 12px}.chk{display:inline-flex;flex-direction:row;gap:6px;margin-right:14px}
code{background:var(--line);padding:1px 5px;border-radius:4px}small{color:var(--mut)}
@media print{.nav,.noprint{display:none}body{background:#fff;color:#000}.card{border:0}}
.cal td{height:76px;vertical-align:top;white-space:normal;border:1px solid var(--line);width:14.28%}.cal td.today{outline:2px solid var(--pri);outline-offset:-2px}.cal th{text-align:center}
main{max-width:1240px}
.emphead,.emp{display:grid;grid-template-columns:minmax(150px,2fr) minmax(90px,1.1fr) 112px 92px 64px 138px 28px 270px;gap:8px 12px;align-items:center}
.emplist.pay .emphead,.emplist.pay .emp{grid-template-columns:minmax(150px,2fr) minmax(90px,1.1fr) 112px 92px 64px 138px 104px 28px 270px}
.emphead{color:var(--mut);font-size:13px;font-weight:600;padding:0 0 8px;border-bottom:1px solid var(--line)}
.emp{padding:9px 0;border-bottom:1px solid var(--line)}.emp:last-child{border-bottom:0}
.emp label{margin:0;display:block}.emp input,.emp select{width:100%}.emp .lb{display:none}
.emp .ro{font-size:15px;overflow:hidden;text-overflow:ellipsis}
.emp .chk{display:flex;justify-content:center}.emp .chk input{width:auto}
.emp .acts{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}.emp .acts>*{white-space:nowrap}
.emp details.pw{position:relative}.emp details.pw summary{list-style:none}.emp details.pw summary::-webkit-details-marker{display:none}
.emp details.pw input{position:absolute;right:0;top:38px;width:240px;z-index:5;box-shadow:0 4px 14px rgba(0,0,0,.35)}
input,select{max-width:100%}
.row>*{min-width:0}
@media(max-width:1100px){
 .emphead{display:none}
 .emp,.emplist.pay .emp{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;padding:14px 0}
 .emp .lb{display:block;color:var(--mut);font-size:13px;margin-bottom:4px}
 .emp label{display:flex;flex-direction:column}
 .emp .ro{display:flex;flex-direction:column}
 .emp .chk{flex-direction:row;justify-content:flex-start;align-items:center;gap:8px}.emp .chk .lb{margin:0}
 .emp .acts{flex-wrap:wrap}.emp details.pw{width:100%}.emp details.pw input{position:static;width:100%;box-shadow:none;margin-top:6px}
}
@media(max-width:700px){main{padding:14px 12px}.nav{gap:10px 14px}.big{width:100%}}
.cal td.d-present,.legend .d-present{background:rgba(46,160,67,.24)}
.cal td.d-late,.legend .d-late{background:rgba(210,153,34,.28)}
.cal td.d-absent,.legend .d-absent{background:rgba(248,81,73,.24)}
.cal td.d-leave,.legend .d-leave{background:rgba(56,139,253,.24)}
.cal td.d-holiday,.legend .d-holiday{background:rgba(163,113,247,.28)}
.cal td.d-weekly-off,.legend .d-weekly-off{background:rgba(139,148,158,.22)}
.cal td.d-pending,.legend .d-pending{background:rgba(210,153,34,.12)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;font-size:13px}
.legend span{padding:3px 10px;border-radius:6px;border:1px solid var(--line)}
.cal td[class*="d-"]{border-left:3px solid var(--line)}
.cal td.d-present{border-left-color:#2ea043}.cal td.d-late{border-left-color:#d29922}.cal td.d-absent{border-left-color:#f85149}
.cal td.d-leave{border-left-color:#388bfd}.cal td.d-holiday{border-left-color:#a371f7}.cal td.d-weekly-off{border-left-color:#8b949e}
.cnote{color:var(--fg);opacity:.8;font-size:11px;line-height:1.2;display:inline-block;margin-top:2px}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.avatar.none{display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--line);color:var(--mut)}
textarea{font:inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--fg);width:100%;resize:vertical}
.kv th{width:170px;font-weight:600}.kv td{white-space:normal}
.masked{-webkit-text-security:disc;text-security:disc}.sec{letter-spacing:1px}@media print{.noprint,[data-reveal]{display:none}}
.reveal-narrow{display:none;margin-left:12px}.emphead .revealcell{text-align:right}.emphead .revealcell .btn{font-weight:400}
@media(max-width:1100px){.reveal-narrow{display:inline-block}}
.nbadge{background:#f85149;color:#fff;border-radius:99px;padding:0 7px;font-size:12px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;line-height:1.2}.chips .btn{display:inline-block;padding:7px 12px}
.gridwrap{overflow-x:auto;padding:8px}
.mgrid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13px}
.mgrid th,.mgrid td{padding:4px 5px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
.mgrid th small{color:var(--mut);font-weight:400}
.mgrid th.off{background:rgba(139,148,158,.18)}.mgrid th.now{outline:2px solid var(--pri);outline-offset:-2px}
.mgrid .nm{text-align:left;position:sticky;left:0;background:var(--card);min-width:150px;z-index:2;border-right:1px solid var(--line)}
.mgrid td.c{min-width:28px;border-left:1px solid var(--line);font-weight:600}
.mgrid td.c a{display:block;color:inherit;text-decoration:none;padding:2px 0}
.mgrid tr.tot td{color:var(--mut);font-size:12px;border-top:2px solid var(--line)}
.mgrid td.d-present{background:rgba(46,160,67,.28)}.mgrid td.d-late{background:rgba(210,153,34,.32)}.mgrid td.d-absent{background:rgba(248,81,73,.28)}
.mgrid td.d-leave{background:rgba(56,139,253,.28)}.mgrid td.d-holiday{background:rgba(163,113,247,.32)}.mgrid td.d-weekly-off{background:rgba(139,148,158,.22)}.mgrid td.d-pending{background:rgba(210,153,34,.14)}
@media print{@page{size:landscape;margin:8mm}.mgrid{font-size:10px}.mgrid .nm{position:static}.gridwrap{overflow:visible}}
.pf{max-width:1000px;margin:0 auto}
.pf-hero{display:flex;gap:22px;align-items:center;padding:26px;border-radius:14px;border:1px solid var(--line);
 background:linear-gradient(120deg,rgba(107,147,255,.16),rgba(163,113,247,.10) 55%,transparent),var(--card);margin-bottom:18px;flex-wrap:wrap}
.pf-av{position:relative;width:104px;height:104px;flex:none}
.pf-av .avatar{width:104px;height:104px;font-size:42px}
.pf-cam{margin:0;position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid var(--card);cursor:pointer}
.pf-cam svg{width:16px;height:16px}
.pf-id h1{margin:0 0 4px;font-size:24px}.pf-id .sub{color:var(--mut);margin:0 0 10px}
.pf-tags{display:flex;gap:8px;flex-wrap:wrap}.pf-tags span{font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.pf-meter{margin-left:auto;min-width:210px}.pf-meter b{font-size:13px}.pf-bar{height:8px;border-radius:99px;background:var(--line);margin:8px 0 6px;overflow:hidden}.pf-bar i{display:block;height:100%;background:var(--pri);border-radius:99px}
.pf-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.pf-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}
.pf-card h3{margin:0 0 4px;font-size:16px;display:flex;align-items:center;gap:8px}.pf-card h3 svg{width:18px;height:18px;color:var(--pri)}
.pf-card .hint{color:var(--mut);font-size:13px;margin:0 0 16px}
.pf-info{display:grid;gap:14px}.pf-info div{display:flex;flex-direction:column;gap:2px}.pf-info span{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.pf-info b{font-weight:500}.pf-info em{color:var(--mut);font-style:normal}
.pf-lock{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--mut);margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.pf-lock svg{width:15px;height:15px;flex:none;margin-top:1px}
.pf-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.pf-fields .full{grid-column:1/-1}
.pf-fields label{margin:0}
.pf-drop{display:flex;align-items:center;gap:14px;border:1.5px dashed var(--line);border-radius:10px;padding:14px;background:rgba(255,255,255,.02)}
.pf-bar2{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 18px;margin-top:6px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 -6px 18px rgba(0,0,0,.25)}
.pf-bar2 small{color:var(--mut)}
@media(max-width:860px){.pf-grid{grid-template-columns:1fr}.pf-meter{margin-left:0;width:100%}.pf-fields{grid-template-columns:1fr}}
.pf-bar2 svg{width:14px;height:14px;vertical-align:-2px;flex:none}
.st{max-width:1100px;margin:0 auto}
.st-head h2{margin:0 0 4px}.st-head p{margin:0 0 20px;color:var(--mut)}
.st-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;align-items:start}
.st-f3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.st-f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st-f3 label,.st-f2 label{margin:0}.st-f3 small,.st-f2 small{color:var(--mut);font-size:12px}
.st-sub{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:18px 0 8px}
.st-sum{margin:14px 0 0;padding:10px 12px;border-radius:8px;background:rgba(107,147,255,.10);font-size:14px;min-height:20px}
.st-chips{display:flex;gap:8px;flex-wrap:wrap}.chip{margin:0;cursor:pointer}.chip input{display:none}
.chip span{display:inline-block;padding:6px 12px;border-radius:99px;border:1px solid var(--line);font-size:13px;color:var(--fg)}
.chip input:checked+span{background:var(--pri);border-color:var(--pri);color:#fff}
.st-switch{flex-direction:row;align-items:center;gap:12px;margin:0 0 14px;color:var(--fg);font-size:14px;cursor:pointer}
.sw{appearance:none;-webkit-appearance:none;width:44px;height:24px;flex:none;padding:0;border-radius:99px;border:0;background:var(--line);position:relative;cursor:pointer}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.sw:checked{background:var(--pri)}.sw:checked::after{left:23px}
.pill{font-size:11px;font-weight:600;padding:2px 9px;border-radius:99px;margin-left:6px;vertical-align:2px}
.pill.on{background:rgba(46,160,67,.25);color:#3fb950}.pill.off{background:var(--line);color:var(--mut)}
.st-row{display:flex;gap:10px;flex-wrap:wrap}.st-row form{margin:0}
.st-note{color:var(--mut);font-size:12px;margin:10px 0 0}
.st-grid .pf-bar2{margin-top:0}
@media(max-width:900px){.st-grid{grid-template-columns:1fr}.st-f3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.st-f3,.st-f2{grid-template-columns:1fr}}
.wfh{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;color:var(--fg);font-size:14px;margin:0}.wfh input{width:auto}.wfh small{color:var(--mut)}
.jobform{margin-bottom:18px}.jobform .row{margin-bottom:14px}
.wfhbox{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 16px;background:var(--bg)}
.wfhgrid{display:grid;grid-template-columns:1fr 190px;gap:12px 18px;align-items:end;margin-top:14px}.wfhgrid label{margin:0}
.wfhgrid .lbl{display:block;color:var(--mut);font-size:13px;margin-bottom:4px}.wfhloc{min-height:36px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wfhgrid .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.wfhgrid .mapwrap{grid-column:1/-1}
.wfhgrid iframe{width:100%;max-width:560px;height:260px;border:1px solid var(--line);border-radius:8px;margin:0 0 8px}.wfhbox a{color:var(--pri)}
.menu-btn{display:none}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}.pv-grid .card{margin:0 0 16px}.pv-side .card:last-child{margin-bottom:0}.pv-grid h3{margin-top:0}
@media(max-width:900px){.pv-grid{grid-template-columns:1fr}}