:root {
  --safe-top: env(safe-area-inset-top, 0px);

  --topbar-outer-top: 0px;
  --topbar-inner-top: 8px;
  --topbar-inner-bottom: 8px;
  --topbar-row-min-h: 44px;

  /* нижний воздух под топбаром */
  --topbar-visual-gap: 10px;

  --topbar-padding-constant: calc(
    var(--safe-top)
    + var(--topbar-outer-top)
    + var(--topbar-inner-top)
    + var(--topbar-row-min-h)
    + var(--topbar-inner-bottom)
    + var(--topbar-outer-top)
    + var(--topbar-visual-gap)
  );
}

@media (min-width: 768px) {
  :root {
    --topbar-outer-top: 16px;   /* md:pt-4 */
    --topbar-inner-top: 8px;    /* p-2 */
    --topbar-inner-bottom: 8px; /* p-2 */
    --topbar-row-min-h: 44px;   /* min-h-[44px] */
    --topbar-visual-gap: 6px;
  }
}

.topbar-padding-constant {
  padding-top: var(--topbar-padding-constant);
}