:root{

--primary:#2563EB;
--primary2:#0EA5E9;

--success:#10B981;
--warning:#F59E0B;
--danger:#EF4444;

--bg:#F5F7FC;
--card:#FFFFFF;

--text:#111827;
--sub:#6B7280;

--border:#E5E7EB;

--radius:22px;

--shadow:
0 10px 30px rgba(0,0,0,.08);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:
"Segoe UI",
sans-serif;

-webkit-tap-highlight-color:transparent;

}

body{

background:var(--bg);

color:var(--text);

}

.page{

max-width:480px;

margin:auto;

padding:18px 18px 100px;

}

.card{

background:var(--card);

border-radius:var(--radius);

box-shadow:var(--shadow);

padding:18px;

margin-bottom:18px;

}

.header{

background:
linear-gradient(
135deg,
#2563EB,
#0EA5E9
);

border-radius:26px;

padding:22px;

color:#fff;

box-shadow:
0 15px 35px rgba(37,99,235,.30);

}

.header-top{

display:flex;

justify-content:space-between;

align-items:center;

}

.circle{

width:46px;
height:46px;

border-radius:50%;

background:rgba(255,255,255,.18);

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

}

.big-title{

font-size:28px;

font-weight:700;

margin-top:12px;

}

.sub{

opacity:.9;

margin-top:5px;

font-size:15px;

}

.check-button{

margin-top:18px;

height:72px;

width:100%;

border:none;

border-radius:20px;

background:
linear-gradient(
135deg,
#2563EB,
#1D4ED8
);

color:#fff;

font-size:22px;

font-weight:700;

cursor:pointer;

transition:.2s;

box-shadow:
0 15px 30px rgba(37,99,235,.35);

}

.check-button:active{

transform:scale(.97);

}

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.stat{

background:#fff;

border-radius:18px;

padding:18px;

box-shadow:var(--shadow);

}

.stat-label{

font-size:14px;

color:var(--sub);

}

.stat-value{

font-size:30px;

font-weight:700;

margin-top:8px;

}

.section{

font-size:20px;

font-weight:700;

margin-bottom:15px;

}

.quick{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.quick button{

height:90px;

border:none;

border-radius:20px;

background:#fff;

box-shadow:var(--shadow);

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.2s;

}

.quick button:active{

transform:scale(.97);

}

.bottom{

position:fixed;

left:50%;

bottom:0;

transform:translateX(-50%);

width:100%;

max-width:480px;

height:74px;

background:#fff;

display:flex;

justify-content:space-around;

align-items:center;

box-shadow:
0 -5px 20px rgba(0,0,0,.08);

}

.nav{

display:flex;

flex-direction:column;

align-items:center;

font-size:12px;

color:#6B7280;

}

.nav-icon{

font-size:24px;

margin-bottom:4px;

}

.kpi{

display:flex;

align-items:center;

gap:15px;

}

.kpi-icon{

width:56px;
height:56px;

border-radius:16px;

display:flex;

justify-content:center;

align-items:center;

font-size:26px;

background:#EEF4FF;

}

.kpi.green .kpi-icon{

background:#ECFDF5;

}

.kpi.orange .kpi-icon{

background:#FFF7ED;

}

.kpi.red .kpi-icon{

background:#FEF2F2;

}

.kpi-text{

flex:1;

}

.kpi-title{

font-size:13px;

color:#6B7280;

}

.kpi-value{

font-size:28px;

font-weight:700;

margin-top:6px;

}


.material-symbols-rounded{

font-variation-settings:
'FILL' 1,
'wght' 500,
'GRAD' 0,
'opsz' 24;

font-size:26px;

}

.icon-box{

width:56px;

height:56px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

background:#EEF4FF;

color:#2563EB;

}

.green{

background:#ECFDF5!important;

color:#10B981!important;

}

.orange{

background:#FFF7ED!important;

color:#F59E0B!important;

}

.red{

background:#FEF2F2!important;

color:#EF4444!important;

}

.search-box{

display:flex;

align-items:center;

gap:12px;

}

.search-box input{

flex:1;

border:none;

outline:none;

background:none;

font-size:17px;

}

.employee-card{

background:#fff;

border-radius:22px;

padding:18px;

box-shadow:var(--shadow);

margin-bottom:16px;

display:flex;

align-items:center;

gap:16px;

}

.employee-avatar{

width:58px;

height:58px;

border-radius:18px;

background:#EEF4FF;

display:flex;

justify-content:center;

align-items:center;

color:#2563EB;

}

.employee-info{

flex:1;

}

.employee-name{

font-size:20px;

font-weight:700;

}

.employee-role{

margin-top:5px;

color:#6B7280;

}

.employee-mobile{

margin-top:5px;

font-size:14px;

color:#9CA3AF;

}

.employee-status{

padding:6px 12px;

border-radius:20px;

background:#ECFDF5;

color:#10B981;

font-size:13px;

font-weight:600;

}

.fab{

position:fixed;

right:24px;

bottom:90px;

width:64px;

height:64px;

border:none;

border-radius:50%;

background:#2563EB;

color:#fff;

cursor:pointer;

box-shadow:

0 15px 30px rgba(37,99,235,.35);

}

.fab span{

font-size:34px;

}