/* ===========================================
   TOP BAR
=========================================== */

.topbar{

height:80px;

background:var(--surface);

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

display:flex;

align-items:center;

justify-content:space-between;

padding:0 32px;

}

/* LEFT */

.topbar-left{

display:flex;

flex-direction:column;

gap:4px;

}

.topbar-left h2{

font-size:28px;

font-weight:700;

color:var(--text);

}

.topbar-left p{

font-size:13px;

color:var(--text-light);

}

/* RIGHT */

.topbar-right{

display:flex;

align-items:center;

gap:20px;

}

/* Clock */

.clock{

text-align:right;

}

.clock h3{

font-size:14px;

font-weight:600;

color:var(--text);

}

.clock span{

font-size:12px;

color:var(--text-light);

}

/* Notification */

.notification{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

background:var(--card);

border-radius:14px;

cursor:pointer;

transition:.25s;

}

.notification:hover{

background:var(--card-hover);

transform:translateY(-2px);

}

/* User */

.user{

display:flex;

align-items:center;

gap:14px;

padding:10px 16px;

background:var(--card);

border-radius:16px;

}

.avatar{

width:46px;

height:46px;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#60A5FA);

display:flex;

align-items:center;

justify-content:center;

font-size:18px;

font-weight:700;

color:white;

}

.user-info{

display:flex;

flex-direction:column;

}

.user-info strong{

font-size:14px;

font-weight:600;

}

.user-info span{

font-size:12px;

color:var(--text-light);

display:flex;

align-items:center;

gap:6px;

}

.online{

width:8px;

height:8px;

border-radius:50%;

background:#22C55E;

box-shadow:0 0 10px #22C55E;

}