:root{

--primary:#2962ff;
--primary2:#4f46e5;
--green:#22c55e;
--green2:#16a34a;
--danger:#ef4444;
--text:#1e293b;
--muted:#64748b;
--bg:#eef4ff;
--card:#ffffff;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
}

a{
    text-decoration: none;
}

body{

background:
linear-gradient(180deg,#dbeafe 0%,#eef4ff 35%,#f8fbff 100%);

color:var(--text);

}

.container{

max-width:700px;
margin:auto;
padding:18px;

}

/* HEADER */

.header{

background:
linear-gradient(135deg,#3b82f6,#4f46e5);

border-radius:28px;

padding:28px;

color:white;

box-shadow:
0 25px 50px rgba(59,130,246,.30);

position:relative;

overflow:hidden;

margin-bottom:22px;

}

.header:after{

content:'';

position:absolute;

width:220px;
height:220px;

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

border-radius:50%;

top:-90px;
right:-70px;

}

.top{

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:2;

}

.school{

display:flex;

gap:15px;

align-items:center;

}

.logo{

width:58px;
height:58px;

background:white;

color:#2563eb;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

}

.school h2{

font-size:22px;

margin-bottom:5px;

}

.school p{

opacity:.9;

font-size:14px;

}

.stats{

display:flex;

gap:12px;

margin-top:22px;

position:relative;

z-index:2;

}

.stat{

flex:1;

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

backdrop-filter:blur(10px);

padding:15px;

border-radius:18px;

text-align:center;

}

.stat h3{

font-size:22px;

}

.stat span{

font-size:13px;

opacity:.9;

}

/* BOTÕES */

.actions{

display:flex;

gap:14px;

margin-bottom:16px;

}

.action{

flex:1;

height:72px;

border:none;

border-radius:22px;

color:white;

font-size:17px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

cursor:pointer;

transition:.25s;

box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.action:hover{

transform:translateY(-3px);

}

.presenca{

background:
linear-gradient(135deg,#2563eb,#4f46e5);
 
}

.saidas{

background: #666;
}

.start{

width:100%;

height:66px;

border:none;

border-radius:22px;

background:
linear-gradient(135deg,#22c55e,#16a34a);

color:white;

font-size:20px;

font-weight:800;

cursor:pointer;

margin-bottom:25px;

box-shadow:
0 15px 30px rgba(34,197,94,.28);

transition:.25s;

}

.start:hover{

transform:translateY(-3px);

}

/* TÍTULO */

.section{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.section h3{

font-size:22px;

}

.section small{

color:var(--muted);

}

/* CARDS */

.student{

background:white;

border-radius:22px;

padding:18px;

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:14px;

box-shadow:
0 8px 25px rgba(15,23,42,.06);

transition:.25s;

cursor:pointer;

}

.student:hover{

transform:translateY(-3px);

}

.left{

display:flex;

align-items:center;

gap:15px;

}

.avatar{

width:55px;
height:55px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

font-weight:700;

color:white;

}

.c1{background:#2563eb;}
.c2{background:#9333ea;}
.c3{background:#10b981;}
.c4{background:#ec4899;}
.c5{background:#f59e0b;}

.info h4{

margin-bottom:6px;

font-size:17px;

}

.info p{

color:var(--muted);

font-size:14px;

display:flex;

gap:8px;

align-items:center;

}

.arrow{

width:42px;
height:42px;

border-radius:50%;

background:#f1f5f9;

display:flex;

align-items:center;

justify-content:center;

color:#64748b;

}

/* BOTÃO FLUTUANTE */

.fab{

position:fixed;

bottom:25px;

right:20px;

width:65px;
height:65px;

border-radius:22px;

background:
linear-gradient(135deg,#2563eb,#4f46e5);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:28px;

cursor:pointer;

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

transition:.25s;

}

.fab:hover{

transform:scale(1.08);

}

@media(max-width:500px){

.header{

padding:22px;

}

.school h2{

font-size:18px;

}

.action{

height:65px;

font-size:15px;

}

.start{

font-size:18px;

height:60px;

}

}