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

  --topbar-outer-top: 0px;
  --topbar-inner-top: 6px;    /* p-1.5 */
  --topbar-inner-bottom: 6px; /* p-1.5 */
  --topbar-row-min-h: 44px;

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

  --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-visual-gap)
  );
}

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

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