:root{--ink:#11213a;--navy:#102446;--blue:#2256e7;--muted:#6d7b91;--line:#e8edf4;--bg:#f6f8fc}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Arial,sans-serif}.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--navy);color:#fff;padding:28px 18px}.brand{font-size:20px;font-weight:800;margin-bottom:40px}.brand small{display:block;margin-top:3px;color:#91a8ce;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.nav a{display:block;margin:6px 0;padding:12px;border-radius:8px;color:#c9d4e5;text-decoration:none}.nav a.active,.nav a:hover{background:#23477d;color:#fff}.mobile-nav{display:none}.page{width:100%;max-width:1600px;margin:auto;padding:30px}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}.top h1{margin:3px 0;font-size:29px}.eyebrow{color:var(--blue);font-size:11px;font-weight:bold;letter-spacing:.1em}.actions{display:flex;flex-wrap:wrap;gap:8px}.button{display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:10px 15px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:700 13px Arial;text-decoration:none;cursor:pointer}.button.primary{border-color:var(--blue);background:var(--blue);color:#fff}.card{overflow:hidden;margin-bottom:20px;border:1px solid var(--line);border-radius:14px;background:#fff}.filters{padding:19px}.filter-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr .8fr auto;gap:12px;align-items:end}.field label,.employee-form label,.login-card label{display:block;margin:0 0 6px;color:#607089;font-size:11px;font-weight:bold}.field input,.field select,.employee-form input,.employee-form select,.login-card input{width:100%;min-height:42px;padding:10px 11px;border:1px solid #dce3ed;border-radius:8px;background:#fff;font:inherit}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat{padding:18px}.stat-label{color:var(--muted);font-size:12px}.stat-value{margin-top:8px;font-size:26px;font-weight:800}.stat-note,.sub{margin-top:4px;color:#8996a9;font-size:11px}.card-head{padding:19px 21px 14px}.card-head h2{margin:0;font-size:16px}.card-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;min-width:850px;border-collapse:collapse}th{padding:11px 21px;background:#f8faff;color:#738197;font-size:10px;letter-spacing:.06em;text-align:left;text-transform:uppercase}td{padding:14px 21px;border-top:1px solid var(--line)}.person{font-weight:bold}.badge{display:inline-block;padding:4px 8px;border-radius:20px;font-size:10px;font-weight:bold}.s{background:#e5f3ff;color:#145b95}.sr{background:#eeeaff;color:#614bb6}.present{background:#e5f8ef;color:#157a50}.total-bar{display:flex;justify-content:flex-end;gap:55px;padding:16px 21px;background:#fbfcff}.total-bar div{color:#637188;font-size:12px}.total-bar strong{display:block;margin-top:3px;color:var(--ink);font-size:16px}.employee-layout{display:grid;grid-template-columns:370px minmax(0,1fr);gap:20px}.add-card{padding-bottom:20px}.employee-form{padding:0 21px}.employee-form label{margin-top:17px}.employee-form .button{margin-top:20px}.attendance-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.attendance-form .button{grid-column:1/-1}.login-page{display:grid;min-height:100vh;place-items:center;background:linear-gradient(135deg,#102446,#2256e7)}.login-card{width:min(420px,calc(100% - 32px));padding:38px;border-radius:18px;background:#fff;box-shadow:0 25px 70px #07152e77}.login-card h1{margin:8px 0}.login-card p{color:var(--muted)}.login-card label{margin-top:17px}.login-logo{display:grid;width:48px;height:48px;margin-bottom:22px;place-items:center;border-radius:14px;background:#f0b323;font-size:24px}.login-button{width:100%;margin-top:22px}.demo-note,.success,.alert{margin-top:16px;padding:11px;border-radius:8px;font-size:12px}.demo-note{background:#f4f7fc;color:#607089}.success{background:#e5f8ef;color:#157a50}.alert{background:#fff4df;color:#a66311}@media(max-width:900px){.shell{display:block}.sidebar{display:none}.mobile-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--navy);color:#fff}.mobile-menu{position:relative}.mobile-menu summary{display:grid;width:40px;height:38px;place-items:center;border:1px solid #49648e;border-radius:8px;list-style:none;font-size:22px;cursor:pointer}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu-links{position:absolute;z-index:10;top:46px;right:0;width:210px;overflow:hidden;border:1px solid #2b4f84;border-radius:10px;background:#102446;box-shadow:0 12px 30px #07152e66}.mobile-menu-links a{display:block;padding:12px 14px;color:#dbe6f6;font-size:13px;text-decoration:none}.mobile-menu-links a:hover,.mobile-menu-links a.active{background:#23477d;color:#fff}.mobile-menu-links .sign-out{border-top:1px solid #2b4f84;color:#ffccb9}.page{padding:22px 16px}.filter-grid,.stats{grid-template-columns:1fr 1fr}.employee-layout{display:block}.attendance-form{grid-template-columns:1fr}}@media(max-width:560px){.page{padding:16px 12px}.top{align-items:flex-start;flex-direction:column}.top h1{font-size:25px}.actions{width:100%}.actions .button{flex:1}.filter-grid,.stats{grid-template-columns:1fr}.filters{padding:15px}.filter-grid .button{width:100%}.stat{padding:16px}.card-head{padding:16px}.employee-form{padding:0 16px}.total-bar{justify-content:space-between;gap:10px;padding:14px 16px}.login-page{align-items:start;padding-top:36px}.login-card{padding:26px 22px}table{min-width:720px}th,td{padding:11px 14px}}@media print{.sidebar,.mobile-nav,.filters,.top .actions{display:none!important}.shell{display:block}.page{padding:0}.card{border:0}}