:root{--p:#4F35C8;--pd:#2E1F7A;--tint:#F3F0FE;--ink:#1B1740;--muted:#6B6890;--line:#E6E3F4;--bg:#F6F5FB;--navy:#15113A;--green:#1F9D6B;--amber:#C77A0B;--red:#C93B4B}
*{box-sizing:border-box}
body{margin:0;font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--bg);line-height:1.45}
a{color:inherit;text-decoration:none}
h1{font-size:28px;font-weight:800;margin:0}
h2{font-size:18px;font-weight:800;margin:0 0 16px}
h3{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:20px 0 8px}
.muted{color:var(--muted)}.small{font-size:12px;opacity:.85}
.ics{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ics-sm{width:16px;height:16px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
button,input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink)}
:focus-visible{outline:3px solid #9C8CF0;outline-offset:2px}

/* brand */
.brand{display:flex;align-items:center;gap:12px}.logo{width:40px;height:40px;border-radius:12px;background:#fff;color:var(--pd);font-weight:800;display:flex;align-items:center;justify-content:center}
.brand-light{color:#fff}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--p);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.avatar-white{background:#fff;color:var(--p)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--p);color:#fff}.btn-primary:hover{background:#4329b3}
.btn-ghost{background:#fff;border-color:#D9D5EE;color:var(--ink)}.btn-ghost:hover{background:var(--tint)}
.btn-outline{background:#fff;border-color:var(--p);color:var(--p)}
.btn-glass{background:rgba(255,255,255,.16);color:#fff;height:40px}
.btn-danger{background:#fff;border-color:#E7B4BB;color:#9C2233}
.btn-lg{height:52px;font-size:16px;border-radius:12px;width:100%}
.btn-sm{height:38px;padding:0 16px;border-radius:10px;font-size:13px}
.linkbtn{background:none;border:none;padding:0;color:#C9C3F0;font-size:12px;font-weight:700;cursor:pointer;display:block}
.link{color:var(--p);font-weight:700;font-size:13px}

/* forms */
.stack{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.label{font-size:14px;font-weight:700}
.field input,.field select,.field textarea{height:48px;padding:0 16px;border:1.5px solid #D9D5EE;border-radius:12px;background:#fff;width:100%}
.field textarea{height:auto;padding:12px 16px;resize:vertical}
.field .hint{font-size:12px;color:var(--muted)}
.grid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.check{display:flex;align-items:flex-start;gap:12px;font-size:14px}.check input{width:20px;height:20px;accent-color:var(--p);margin:2px 0 0;flex:none}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.right{justify-content:flex-end}.between{justify-content:space-between}

/* flash + notes */
.flash{padding:14px 18px;border-radius:14px;font-size:14px;margin-bottom:20px}
.flash-ok{background:#E3F6EE;color:#0F6B47}.flash-err{background:#FDE8EB;color:#9C2233}
.note-warn{margin-top:24px;padding:14px 16px;border-radius:12px;background:#FFF4DE;color:#6B4300;font-size:13px}

/* chips */
.chip{display:inline-block;padding:5px 12px;border-radius:14px;font-size:12px;font-weight:700;white-space:nowrap}
.chip-amber{background:#FFF4DE;color:#8A5200}.chip-green{background:#E3F6EE;color:#0F6B47}.chip-red{background:#FDE8EB;color:#9C2233}
.chip-grey{background:#EEEDF5;color:#55526F}.chip-purple{background:#EEEAFD;color:var(--p)}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:24px}
.card>h2:first-child{margin-top:0}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.cols>.c3{flex:3 1 420px;min-width:0}.cols>.c2{flex:2 1 320px;min-width:0}.cols>.c1{flex:1 1 280px;min-width:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.kpi .l{font-size:14px;font-weight:600;color:var(--muted)}.kpi .v{font-size:34px;font-weight:800;line-height:1;margin-top:10px}.kpi .n{font-size:13px;color:var(--muted);margin-top:8px}
.kv{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:14px 0;border-top:1px solid #EEEAF8}.kv:first-of-type{border-top:0}
.kv dt{color:var(--muted);font-weight:600;font-size:14px}.kv dd{margin:0;font-weight:700}
dl.plain{margin:0}
.progress{height:8px;border-radius:4px;background:#EEEAFD;flex:1}.progress>i{display:block;height:8px;border-radius:4px;background:var(--p)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.tabs a{height:40px;padding:0 18px;border-radius:20px;border:1.5px solid #D9D5EE;background:#fff;font-size:13px;font-weight:700;display:inline-flex;align-items:center}.tabs a.on{background:var(--p);border-color:var(--p);color:#fff}

/* tables */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:20px;overflow-x:auto;margin-bottom:24px}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px;text-align:left}
th{color:var(--muted);font-size:13px;font-weight:700;padding:16px 12px 12px}td{padding:14px 12px;border-top:1px solid #EEEAF8;vertical-align:middle}
th:first-child,td:first-child{padding-left:24px}th:last-child,td:last-child{padding-right:24px}
.num{text-align:right}
.person{display:flex;align-items:center;gap:12px}.person .avatar{width:40px;height:40px;background:var(--tint);color:var(--p);font-size:13px}.person small{display:block;color:var(--muted);font-size:12px}
.empty{padding:32px;text-align:center;color:var(--muted)}

/* employee area */
.emp-head{background:linear-gradient(135deg,var(--pd),var(--p));color:#fff}
.emp-head-hero{padding-bottom:72px}
.emp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px;padding:20px 0}
.emp-nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:600;font-size:14px}.emp-nav a{opacity:.85;padding-bottom:4px;border-bottom:2px solid transparent}.emp-nav a.on{opacity:1;border-color:#fff}
.emp-out{margin-left:auto;display:flex;align-items:center;gap:12px}
.emp-main{padding-top:32px;padding-bottom:48px}.emp-main.pull-up{margin-top:-40px;padding-top:0}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:16px}
.hero-id{display:flex;align-items:center;gap:20px}.hero-id .avatar{width:76px;height:76px;font-size:26px}.hero-id h1{font-size:30px}
.clock-card{background:#fff;color:var(--ink);border-radius:20px;padding:20px 24px;display:flex;align-items:center;gap:28px;box-shadow:0 12px 32px rgba(20,10,80,.25)}
.clock-card .big{font-size:24px;font-weight:800;margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:20px 12px}
.tile{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;font-weight:600;text-align:center}
.tile-ic{width:60px;height:60px;border-radius:18px;background:var(--tint);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--p)}.tile-ic .ics{width:26px;height:26px}
.bal{margin-bottom:18px}.bal .top{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-bottom:8px}

/* HR area */
.hr-layout{display:flex;flex-wrap:wrap;min-height:100vh}
.hr-side{flex:1 1 248px;max-width:100%;background:var(--navy);color:#fff;padding:24px 16px;display:flex;flex-direction:column;gap:28px}
@media(min-width:900px){.hr-side{flex:0 0 260px;position:sticky;top:0;height:100vh;overflow-y:auto}}
.hr-nav{display:flex;flex-direction:column;gap:4px}
.hr-nav a{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:12px;font-size:14px;font-weight:600;color:#C9C3F0}
.hr-nav a.on{background:var(--p);color:#fff}.hr-nav a:hover:not(.on){background:rgba(255,255,255,.08)}
.hr-nav em{margin-left:auto;font-style:normal;background:#fff;color:var(--pd);border-radius:11px;min-width:22px;height:22px;padding:0 7px;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hr-user{margin-top:auto;display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.08)}
.hr-main{flex:999 1 640px;min-width:0;padding:32px}
.page-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.head-actions{display:flex;flex-wrap:wrap;gap:12px}

/* checklist */
.tasks form{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #EEEAF8}
.tick{width:26px;height:26px;border-radius:50%;border:1.5px solid #C9C3E6;background:#fff;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.tick.on{background:var(--p);border-color:var(--p)}.tick .ics{width:14px;height:14px}
.tasks span.t{flex:1;font-size:14px;font-weight:600}

/* login */
.login-card{width:100%;max-width:420px}.login-card h1{margin:20px 0 8px;font-size:30px}.login-card .muted{margin:0 0 28px;line-height:1.5}
.url-pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:16px;background:var(--tint);color:var(--p);font-size:13px;font-weight:700}.url-dark{background:var(--ink);color:#fff}
.emp-login{min-height:100vh;display:flex;flex-wrap:wrap;background:#fff}
.emp-login-hero{flex:1 1 480px;min-height:360px;background:linear-gradient(150deg,var(--pd),var(--p));color:#fff;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.emp-login-hero h2{font-size:42px;line-height:1.15;max-width:460px;margin:0}.emp-login-hero p{font-size:16px;line-height:1.6;opacity:.9;max-width:440px}
.emp-login-form{flex:1 1 480px;padding:48px 56px;display:flex;align-items:center;justify-content:center}
.hr-login{min-height:100vh;background:#15113A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:40px 24px}
.hr-login .login-card{background:#fff;border-radius:24px;padding:40px;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.center-msg{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:22px;font-weight:700;background:var(--tint);padding:14px 18px;border-radius:12px;display:inline-block;letter-spacing:.04em;user-select:all}
.proof{max-width:100%;border-radius:14px;border:1px solid var(--line)}
@media print{.emp-head,.no-print{display:none!important}.card{border:0}}
@media(max-width:640px){.wrap{padding:0 16px}.hr-main{padding:20px 16px}.emp-login-hero,.emp-login-form{padding:32px 24px}.clock-card{flex-wrap:wrap}}