/* =========================================================
   CSS БЛОКА: TOPBAR / ОСНОВНАЯ ЧАСТЬ
   ========================================================= */
.main{min-width:0}
.topbar{
  min-height:94px;padding:24px clamp(20px,3vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  position:sticky;top:0;z-index:15;
  background:linear-gradient(to bottom,rgba(9,10,14,.95),rgba(9,10,14,.73),transparent);
  backdrop-filter:blur(10px)
}
.topbar h1{margin:4px 0 0;font:700 clamp(20px,2.2vw,30px)/1.1 "Manrope",sans-serif}
.topbar-current-time{display:inline-block;margin-left:8px;font-variant-numeric:tabular-nums}
#currentDate{display:inline-block}
.eyebrow{color:#777f8f;font-size:14px;letter-spacing:.16em;text-transform:uppercase}
.topbar__actions{display:flex;gap:10px;align-items:center}
.avatar{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#222737,#11141b);border:1px solid var(--line-strong);font-weight:700
}
.menu-btn{display:none;border:1px solid var(--line);background:var(--panel);border-radius:12px;width:40px;height:40px}

.pages{padding:6px clamp(20px,3vw,44px) 60px}
.page{display:none}
.page.active{display:block;animation:fade .24s ease both}
.page.page-leaving{animation:pageLeave .12s ease both;pointer-events:none}
@keyframes fade{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pageLeave{to{opacity:0;transform:translateY(-3px)}}