/* Equal outer columns center the Kyiv clock within the whole header. */
.app-shell .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;height:auto;min-height:85px;padding-block:14px}
.app-shell .topbar .topbar-nav-slot{grid-column:1;grid-row:1;justify-self:start;min-width:0}
.app-shell .topbar .topbar-controls{grid-column:3;grid-row:1;display:flex!important;align-items:center;justify-content:flex-end;justify-self:end;flex-wrap:wrap;gap:12px!important;min-width:0;max-width:100%}
.app-shell .topbar .theme-toggle{margin-left:0;flex-shrink:0}
.app-shell .topbar .secure-label{display:flex;flex-shrink:0;gap:8px;white-space:nowrap}
.app-shell .topbar #topbar-date{grid-column:2;grid-row:1;justify-self:center;display:grid;gap:5px;min-width:0;max-width:100%;text-align:center;font-size:13px;line-height:1.4;white-space:normal}
.app-shell .topbar [data-clock-date]{display:block}
.topbar-clock{display:flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.topbar-clock [data-clock-time]{font-size:17px;font-weight:600;letter-spacing:.035em}
.topbar-clock small{font-size:11px;font-weight:400}
.app-shell .topbar .notifications-panel{right:0;left:auto;max-height:calc(100vh - 145px);max-height:calc(100dvh - 145px);overflow-y:auto}

@media(max-width:1440px){
  .app-shell .topbar{grid-template-columns:auto minmax(0,1fr);gap:12px;min-height:108px;padding-block:14px}
  .app-shell .topbar #topbar-date{grid-column:1/-1;grid-row:1;justify-self:center}
  .app-shell .topbar .topbar-nav-slot{grid-column:1;grid-row:2;align-self:start}
  .app-shell .topbar .topbar-controls{grid-column:2;grid-row:2}
}

@media(max-width:1179px){
  .app-shell .topbar #topbar-date{font-size:12px}
}
@media(max-width:760px){
  .app-shell .topbar #topbar-date{gap:4px}
  .app-shell .topbar .topbar-controls{gap:10px!important}
  .app-shell .topbar .message-notifications{position:static}
  .app-shell .topbar .notifications-panel{position:absolute;top:calc(100% + 12px);left:18px;right:18px;width:auto;max-width:none;max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px)}
}
@media(max-width:520px){
  .app-shell .topbar{gap:10px;padding-block:10px}
  .app-shell .topbar .topbar-controls{gap:9px!important}
  .app-shell .topbar .secure-label{font-size:11px;padding:8px 10px}
  .app-shell .topbar #topbar-date{font-size:12px;line-height:1.45}
  .topbar-clock [data-clock-time]{font-size:16px}
  .topbar-clock small{font-size:10px}
}