:root{
  --bg:#0e1626; 
  --panel:#0c1424; 
  --card:#0f1b2e; 
  --text:#e5e7eb; 
  --muted:#94a3b8;

  --nav:#101a2c; 
  --nav-border:#22314d; 
  --link:#cdeafe; 
  --link-hover:#15223a;

  --topbar-h: 56px;

  /* ширины сайдбара */
  --sidebar-open: 260px;
  --sidebar-collapsed: 58px;

  /* актуальная ширина сайдбара (меняется классом body.sidebar-collapsed) */
  --sidebar: var(--sidebar-open);

  /* правый отступ страницы */
  --right-gap: 10px;
}

/* базовый фон/шрифт */
html,body{
  margin:0; 
  padding:0; 
  background:var(--bg); 
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
}

/* ========= ТОП-БАР ========= */
.topbar{
  position: sticky; 
  top:0; 
  z-index:1000;
  height: var(--topbar-h);
  background:var(--nav);
  border-bottom:1px solid var(--nav-border);
}

/* ЛЕВЫЙ БРЕНД-БЛОК (над сайдбаром), БРЕНД ПО ЦЕНТРУ */
.topbar .brandbox{
  position: fixed;
  top:0; left:0;
  width: var(--sidebar);
  height: var(--topbar-h);
  background: var(--nav);
  border-right: 1px solid var(--nav-border);
  display:flex; align-items:center; justify-content:center;
  z-index:1001;
}
.brand{
  font-weight:800; letter-spacing:.5px; color:#eaf3ff; user-select:none;
}

/* ПРАВАЯ ЧАСТЬ ШАПКИ: гамбургер + нав-ссылки */
.topbar .inner{
  height:100%;
  display:flex; align-items:center; gap:12px;
  /* начинаем сразу после левого бренд-блока */
  margin-left: var(--sidebar);
  margin-right: var(--right-gap);
  padding: 0 12px;
}
/* гамбургер */
.hamburger{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--nav-border); border-radius:8px; cursor:pointer;
  background:transparent; color:#cdeafe;
}
.hamburger:hover{ background:var(--link-hover); }
.hamburger span{ display:block; width:18px; height:2px; background:#cdeafe; position:relative; }
.hamburger span::before,
.hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#cdeafe; }
.hamburger span::before{ top:-6px; }
.hamburger span::after{ top:6px; }

/* нав.ссылки справа от гамбургера */
.navlinks{ display:flex; gap:10px; align-items:center; }
.navlinks a{
  color:var(--link); text-decoration:none;
  background:transparent; border:1px solid var(--nav-border);
  padding:8px 12px; border-radius:10px;
}
.navlinks a:hover{ background:var(--link-hover); }

/* ========= САЙДБАР ========= */
.sidebar{
  position: fixed; z-index: 900;
  top: var(--topbar-h); left: 0;
  width: var(--sidebar); height: calc(100vh - var(--topbar-h));
  background: #0d1526;
  border-right:1px solid var(--nav-border);
  box-shadow: 6px 0 18px rgba(0,0,0,.35);
  transition: width .18s ease;
  overflow: hidden;
}
.sidebar .menu{ padding:12px; display:flex; flex-direction:column; gap:6px; }
.sidebar .menu .group{ margin:10px 6px 6px; color:var(--muted); font-size:12px; text-transform:uppercase; }
.sidebar .menu a{
  display:flex; align-items:center; gap:10px;
  color:#e5e7eb; text-decoration:none;
  background:transparent; border:1px solid rgba(255,255,255,.06);
  padding:8px 10px; border-radius:10px;
}
.sidebar .menu a:hover{ background:#111d33; border-color:#1f2e4c; }
.sidebar .menu .icon{ width:18px; text-align:center; opacity:.85; }

/* подписи в свёрнутом виде прячем */
body.sidebar-collapsed{ --sidebar: var(--sidebar-collapsed); }
body.sidebar-collapsed .sidebar .menu .label{ display:none; }
/* и бренд-блок тоже сужается */
body.sidebar-collapsed .topbar .brandbox{ width: var(--sidebar); }

/* ========= КОНТЕНТ ========= */
.wrap{
  width: calc(100vw - var(--sidebar) - var(--right-gap));
  margin-left: var(--sidebar);
  margin-right: var(--right-gap);
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 0 18px;
  transition: margin-left .18s ease, width .18s ease;
}

/* адаптив */
@media (max-width: 1200px){
  body:not(.sidebar-collapsed){ --sidebar: var(--sidebar-collapsed); }
  .topbar .brandbox{ width: var(--sidebar); }
  .topbar .inner{ margin-left: var(--sidebar); margin-right: var(--right-gap); }
  .wrap{ width: calc(100vw - var(--sidebar) - var(--right-gap)); margin-left: var(--sidebar); }
}

/* ========= ДОБАВЛЕНО ========= */
.clock{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
  opacity:.9;
}



html, body { height:100%; margin:0; }
body {  }
.wrap{
  height: calc(100vh - var(--topbar-h) - 10px);
  overflow:auto;
  margin-top: 10px;
  margin-left: var(--sidebar);
  margin-right: var(--right-gap);
  width: calc(100vw - var(--sidebar) - var(--right-gap));
}
body.sidebar-collapsed .wrap{
  margin-left: var(--sidebar-collapsed);
  width: calc(100vw - var(--sidebar-collapsed) - var(--right-gap));
}


/* === CANONICAL CENTER (.wrap) === */
html, body{ height:100%; }
.wrap{
  margin-left: var(--sidebar);
  margin-right: var(--right-gap);
  margin-top: 10px;
  width: calc(100vw - var(--sidebar) - var(--right-gap));
  height: calc(100vh - var(--topbar-h) - 10px);
  overflow: auto;
}
body.sidebar-collapsed .wrap{
  margin-left: var(--sidebar-collapsed);
  width: calc(100vw - var(--sidebar-collapsed) - var(--right-gap));
}


/* ONE-SCROLL LAYOUT */
html, body{ height:100%; margin:0; overflow:hidden; }
.wrap{
  margin-left: var(--sidebar);
  margin-right: var(--right-gap);
  margin-top: 10px;
  width: calc(100vw - var(--sidebar) - var(--right-gap));
  height: calc(100vh - var(--topbar-h) - 10px);
  overflow:auto;
}
body.sidebar-collapsed .wrap{
  margin-left: var(--sidebar-collapsed);
  width: calc(100vw - var(--sidebar-collapsed) - var(--right-gap));
}
/* Scrollbar style (match site) */
.wrap{ scrollbar-width:thin; scrollbar-color: rgba(148,163,184,.35) transparent; }
.wrap::-webkit-scrollbar{ width:10px; height:10px; }
.wrap::-webkit-scrollbar-track{ background:transparent; }
.wrap::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:8px; }
.wrap::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.55); }


/* === Unify sidebar logout button look & position === */
.sidebar .menu{ display:flex; flex-direction:column; }
.sidebar .menu form{ margin:0; padding:0; width:100%; }
.sidebar .menu .logout-btn{
  display:flex !important; align-items:center; gap:10px;
  justify-content:flex-start !important;
  width:100% !important; text-align:left;
  background:transparent !important;
  border:1px solid rgba(255,255,255,.06) !important;
  padding:8px 10px !important; border-radius:10px !important;
  color:#e5e7eb !important;
}
.sidebar .menu .logout-btn:hover{ background:#111d33 !important; border-color:#1f2e4c !important; }
.sidebar .menu .logout-btn .icon{ width:18px; text-align:center; opacity:.85; }