:root{
--primary:#2563EB;
--primary-dark:#1D4ED8;
--success:#16A34A;
--warning:#F59E0B;
--danger:#DC2626;
--bg:#F8FAFC;
--card:#FFFFFF;
--border:#E2E8F0;
--text:#64748B;
--dark:#0F172A;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
background:var(--bg);
color:var(--dark);
}

.tm_container{
max-width:1750px;
margin:auto;
padding:32px;
}

.hero{

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

color:white;

padding:48px;

border-radius:32px;

display:flex;

justify-content:space-between;

gap:30px;

flex-wrap:wrap;

margin-bottom:24px;

}

.hero h1{
font-size:46px;
margin-bottom:10px;
}

.hero small{
    color:white;
}


.hero p{
max-width:700px;
line-height:1.8;
}

.hero-stats{
display:flex;
gap:30px;
margin-top:20px;
flex-wrap:wrap;
}

.hero-stat strong{
display:block;
font-size:28px;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
align-self:flex-start;
}

.hero-btn{

background:white;

color:#2563EB;

padding:14px 20px;

border-radius:14px;

font-weight:700;

text-decoration:none;

}

.filters{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(170px,1fr)
);

gap:15px;

margin-bottom:18px;

}

.filter{

background:white;

border-radius:18px;

padding:18px;

border:1px solid var(--border);

cursor:pointer;

}

.filter.active{

background:#2563EB;

color:white;

}

.filter strong{

display:block;

font-size:22px;

}

.kpi-grid{

display:grid;

grid-template-columns:
repeat(
6,
1fr
);

gap:20px;

margin:28px 0;

}

.kpi{

background:white;

padding:26px;

border-radius:24px;

}

.kpi strong{

display:block;

font-size:34px;

color:#2563EB;

margin-bottom:8px;

}

.card{

background:white;

padding:30px;

border-radius:28px;

margin-bottom:24px;

box-shadow:
0 10px 30px
rgba(15,23,42,.05);

}

.card h2{

margin-bottom:22px;

}

#teamMap{

height:520px;

border-radius:20px;

overflow:hidden;

border:1px solid var(--border);

}

.map-controls{

display:flex;

gap:12px;

margin-bottom:20px;

flex-wrap:wrap;

}

.map-btn{

padding:10px 16px;

border-radius:12px;

background:#F8FAFC;

border:none;

}

.team-grid{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(340px,1fr)
);

gap:20px;

}

.team-card{

border:1px solid var(--border);

border-radius:22px;

padding:24px;

}

.team-top{

display:flex;

gap:18px;

align-items:center;

margin-bottom:18px;

}

.tm_avatar{

width:90px;

height:90px;

border-radius:20px;

overflow:hidden;

}

.tm_avatar img{

width:100%;
height:100%;
object-fit:cover;

}

.tm_status{

display:inline-block;

padding:8px 14px;

border-radius:999px;

font-size:13px;

font-weight:700;

}

.available{

background:#DCFCE7;

color:#166534;

}

.busy{

background:#FEF3C7;

color:#92400E;

}

.hours{

margin-top:20px;

padding:18px;

background:#F8FAFC;

border-radius:16px;

}

.timeline{

display:flex;

height:10px;

border-radius:999px;

overflow:hidden;

margin-top:12px;

}

.timeline div{

flex:1;

background:#DBEAFE;

}

.tm_actions{

display:flex;

gap:10px;

margin-top:20px;

flex-wrap:wrap;

}

.tm_action{

padding:10px 14px;

border-radius:12px;

background:#2563EB;

color:white;

text-decoration:none;

}

.invite-grid{

display:grid;

grid-template-columns:
repeat(
2,
1fr
);

gap:20px;

}

.invite{

padding:22px;

border:1px solid var(--border);

border-radius:20px;

}

.sidebar-grid{

display:grid;

grid-template-columns:
repeat(
3,
1fr
);

gap:20px;

}

.sidebar-card{

background:white;

padding:26px;

border-radius:24px;

}

@media(max-width:1400px){

.kpi-grid{

grid-template-columns:
repeat(
3,
1fr
);

}

.invite-grid{

grid-template-columns:1fr;

}

.sidebar-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.tm_container{
    padding-top: 0px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;

}

.kpi-grid{

grid-template-columns:1fr;

}

}