body{min-width:320px}*{box-sizing:border-box}html,body,#root{width:100%;min-height:100%;margin:0;padding:0}body{color:#1f2937;background:#eef4f8;min-width:320px;font-family:Arial,Helvetica,sans-serif}button,input,select{font-family:inherit}button{-webkit-tap-highlight-color:transparent}.app,.app-shell,.login-page{background:linear-gradient(#f8fbff 0%,#f5f9fc 55%,#eef6fb 100%);flex-direction:column;width:100%;max-width:520px;min-height:100vh;margin:0 auto;display:flex}.app-hero,.header,.login-hero{color:#fff;background:linear-gradient(135deg,#17375e 0%,#1d69aa 100%);border-radius:0 0 26px 26px;box-shadow:0 8px 24px #1f3a5f24}.login-hero{align-items:center;gap:18px;min-height:175px;padding:30px 28px;display:flex}.login-brand-icon{background:#ffffff24;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:62px;height:62px;display:flex}.login-brand-text h1{letter-spacing:-.4px;margin:0;font-size:29px;font-weight:750}.login-brand-text p{color:#dbeafe;margin:5px 0 7px;font-size:15px}.login-brand-text span{color:#bfdbfe;text-transform:uppercase;letter-spacing:1.3px;font-size:10px}.login-main{flex:1;padding:34px 20px 24px}.login-card{background:#fffffffa;border:1px solid #e2e8f0f2;border-radius:22px;padding:30px 24px 28px;box-shadow:0 10px 32px #0f172a14}.login-user-icon{color:#1f5f9f;background:linear-gradient(135deg,#eaf3ff,#dbeafe);border-radius:50%;justify-content:center;align-items:center;width:76px;height:76px;margin:0 auto 22px;display:flex}.login-card h2{text-align:center;color:#102a4c;margin:0;font-size:26px}.login-subtitle{text-align:center;color:#64748b;margin:9px 0 28px;font-size:14px;line-height:1.5}.login-card form{flex-direction:column;display:flex}.login-card label{color:#334155;margin-bottom:7px;font-size:13px;font-weight:700}.login-input-wrap{color:#64748b;background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;align-items:center;gap:10px;min-height:50px;margin-bottom:18px;padding:0 14px;transition:border-color .15s,box-shadow .15s,background .15s;display:flex}.login-input-wrap:focus-within{background:#fff;border-color:#2563a6;box-shadow:0 0 0 3px #2563a61a}.login-input-wrap input{color:#111827;background:0 0;border:none;outline:none;flex:1;min-width:0;padding:14px 0;font-size:15px}.password-toggle{color:#64748b;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.login-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;margin:0 0 16px;padding:10px 12px;font-size:13px}.login-button{color:#fff;cursor:pointer;background:linear-gradient(90deg,#18558f,#1769b4);border:none;border-radius:12px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:50px;margin-top:4px;font-size:16px;font-weight:700;display:flex;box-shadow:0 6px 16px #1769b438}.login-button:hover{box-shadow:0 8px 20px #1769b447}.login-button:active{transform:scale(.99)}.login-button:disabled{opacity:.65;cursor:not-allowed}.login-divider{color:#64748b;align-items:center;gap:12px;margin:28px 0 10px;font-size:12px;font-weight:700;display:flex}.login-divider:before,.login-divider:after{content:"";background:#dbe3ec;flex:1;height:1px}.login-tagline{text-align:center;color:#64748b;margin:0;font-size:13px}.login-footer{color:#64748b;justify-content:center;gap:7px;padding:20px 16px 24px;font-size:12px;display:flex}.dashboard-hero{padding:25px 22px 22px}.brand-row{align-items:center;gap:13px;display:flex}.brand-icon{background:#ffffff24;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;display:flex}.brand-copy{flex:1}.brand-row h1{margin:0;font-size:24px;font-weight:750}.brand-row p{color:#dbeafe;margin:3px 0 0;font-size:13px}.brand-tagline{color:#bfdbfe;text-transform:uppercase;letter-spacing:1.4px;margin-top:14px;font-size:10px}.logout-button{color:#fff;cursor:pointer;background:#ffffff24;border:none;border-radius:11px;align-items:center;gap:6px;margin-left:auto;padding:9px 11px;font-size:12px;font-weight:700;display:flex}.page-content,.dashboard{flex:1;padding:24px 20px}.dashboard-welcome{margin-bottom:22px}.dashboard-welcome h2{color:#102a4c;margin:0 0 5px;font-size:22px}.dashboard-welcome p{color:#64748b;margin:0;font-size:14px}.feature-card{text-align:left;cursor:pointer;border:none;border-radius:18px;grid-template-columns:52px 1fr 22px;align-items:center;gap:14px;width:100%;min-height:108px;margin-bottom:16px;padding:18px;transition:transform .15s,box-shadow .15s;display:grid;box-shadow:0 5px 16px #0f172a12}.feature-card:hover{transform:translateY(-1px);box-shadow:0 7px 18px #0f172a17}.feature-card:active{transform:scale(.99)}.feature-patrol{color:#4230a7;background:linear-gradient(135deg,#f2efff,#ebe9ff)}.feature-attendance{color:#047857;background:linear-gradient(135deg,#eafff1,#ddfbea)}.feature-manage{color:#155ea8;background:linear-gradient(135deg,#eef6ff,#e5f0ff)}.feature-icon{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.feature-icon-purple{background:#6652cc}.feature-icon-green{background:#1ba86a}.feature-icon-blue{background:#2876bd}.feature-text h3{margin:0 0 5px;font-size:17px}.feature-text p{opacity:.82;margin:0;font-size:12px;line-height:1.4}.compact-hero{padding:20px 20px 22px}.screen-header-row{align-items:center;gap:12px;display:flex}.screen-header-row h1{margin:0;font-size:22px}.screen-header-row p{color:#dbeafe;margin:3px 0 0;font-size:12px}.screen-title-row{justify-content:space-between;align-items:center;margin-top:20px;display:flex}.screen-title-row h2{margin:0;font-size:20px}.screen-title-row span{color:#dbeafe;margin-top:4px;font-size:12px;display:block}.back-icon-button,.header-action-button,.manage-staff-button,.back-button{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.section-heading{color:#102a4c;align-items:center;gap:10px;margin-bottom:16px;display:flex}.section-heading h2{margin:0;font-size:20px}.section-heading p{color:#64748b;margin:3px 0 0;font-size:12px}.attendance-table{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px #0f172a0f}.attendance-row{background:#fff;border-bottom:1px solid #e8eef4;grid-template-columns:48px 1.15fr 1.25fr 48px;align-items:center;min-height:58px;padding:7px 8px;font-size:14px;display:grid}.attendance-row:last-child{border-bottom:none}.attendance-table-header{color:#475569;background:#edf2f7;min-height:42px;font-size:12px;font-weight:700}.employee-icon-wrap{color:#23527c;background:#eef5fb;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;margin:0 auto;display:flex}.employee-name{color:#111827;font-size:14px;font-weight:700}.employee-profession{color:#64748b;font-size:13px}.attendance-toggle{cursor:pointer;background:0 0;border:none;border-radius:10px;width:40px;height:40px;font-size:20px}.is-present{background:#dcfce7}.is-absent{background:#fee2e2}.attendance-summary{background:#fff;border-radius:14px;justify-content:space-between;align-items:center;margin:16px 0;padding:14px 16px;font-size:14px;font-weight:700;display:flex;box-shadow:0 3px 12px #0f172a0f}.external-staff-card{background:#fff;border-radius:14px;justify-content:space-between;align-items:center;margin-top:16px;padding:15px 16px;display:flex;box-shadow:0 3px 12px #0f172a0f}.external-staff-card h3{color:#102a4c;margin:0 0 4px;font-size:15px}.external-staff-card p{color:#64748b;margin:0;font-size:12px}.counter-control{align-items:center;gap:12px;display:flex}.counter-control button{color:#163a5f;cursor:pointer;background:#e9eef4;border:none;border-radius:9px;width:34px;height:34px;font-size:21px;font-weight:700}.counter-control span{text-align:center;color:#111827;min-width:24px;font-size:18px;font-weight:700}.save-attendance-button,.whatsapp-button{cursor:pointer;border:none;border-radius:13px;width:100%;margin-top:10px;padding:15px;font-size:15px;font-weight:700}.save-attendance-button{color:#fff;background:linear-gradient(90deg,#195c9b,#1f76bd);box-shadow:0 5px 14px #1f76bd33}.save-attendance-button:disabled{opacity:.65;cursor:not-allowed}.whatsapp-button{color:#05723c;background:#dcfce7}.whatsapp-button:disabled{opacity:.48;cursor:not-allowed}.manage-title{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.manage-title .section-heading{margin-bottom:0}.add-staff-button{color:#14619b;cursor:pointer;background:#e5f4ff;border:none;border-radius:10px;align-items:center;gap:5px;padding:10px 12px;font-size:13px;font-weight:700;display:flex}.staff-profile-list{gap:11px;display:grid}.staff-profile-card{background:#fff;border:1px solid #edf2f7;border-radius:14px;justify-content:space-between;align-items:center;padding:14px 15px;transition:transform .12s,box-shadow .12s;display:flex;box-shadow:0 3px 10px #0f172a0d}.staff-profile-card:hover{transform:translateY(-1px);box-shadow:0 5px 14px #0f172a14}.staff-profile-card h3{color:#102a4c;margin:0 0 4px;font-size:15px}.staff-profile-card p{color:#64748b;margin:0;font-size:12px}.edit-staff-button{color:#23527c;cursor:pointer;background:#eef5fb;border:none;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.edit-staff-card{background:#fff;border:1px solid #edf2f7;border-radius:16px;padding:20px;box-shadow:0 4px 14px #0f172a0f}.edit-staff-card h2{color:#102a4c;margin:0 0 18px}.edit-staff-card label{color:#475569;margin:15px 0 6px;font-size:13px;font-weight:700;display:block}.edit-staff-card input,.edit-staff-card select{color:#111827;background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:12px;font-size:15px}.edit-staff-card input:focus,.edit-staff-card select:focus{background:#fff;border-color:#2563a6;box-shadow:0 0 0 3px #2563a61a}.save-profile-button,.cancel-profile-button{cursor:pointer;border:none;border-radius:11px;width:100%;margin-top:14px;padding:13px;font-size:15px;font-weight:700}.save-profile-button{color:#fff;background:linear-gradient(90deg,#195c9b,#1f76bd)}.cancel-profile-button{color:#374151;background:#e9eef4}.app-footer,footer{text-align:center;color:#64748b;justify-content:center;gap:6px;padding:21px 16px 24px;font-size:11px;display:flex}@media (width<=420px){.login-hero{padding:26px 20px}.login-brand-text h1{font-size:25px}.page-content,.dashboard{padding:22px 16px}.feature-card{grid-template-columns:48px 1fr 20px;padding:16px}.feature-icon{width:44px;height:44px}.attendance-row{grid-template-columns:44px 1.15fr 1.25fr 44px;padding:7px 6px;font-size:13px}.employee-profession{font-size:12px}.employee-name{font-size:13px}}