:root {
  --gf-max-width: 1300px;

  --gf-pad-x-desktop: 24px;
  --gf-pad-x-tablet: 20px;
  --gf-pad-x-mobile: 14px;
  --gf-gap-y: 24px;
  --gf-font: "Inter", system-ui, -apple-system, sans-serif;

  --gf-brand-blue: #2563eb;
  --gf-brand-violet: #4f46e5;
  --gf-brand-soft: #8b5cf6;

  --gf-brand: var(--gf-brand-violet);

  --gf-text-main: #111827;
  --gf-text-muted: #6b7280;

  --gf-radius-xl: 16px;
  --gf-radius-lg: 14px;

  --gf-shadow-soft: 0 10px 15px -3px rgb(0 0 0 / 0.08),
                    0 4px 6px -4px rgb(0 0 0 / 0.06);
  --gf-shadow-strong: 0 16px 30px -6px rgb(15 23 42 / 0.18);

  --gf-border-glass: 1px solid rgba(255, 255, 255, 0.32);

  --gf-bg-top-1: rgba(37, 99, 235, 0.12);
  --gf-bg-top-2: rgba(139, 92, 246, 0.14);
  --gf-bg-base: #ffffff;
  --gf-page-bg: #f4f5ff;
  --gf-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gf-transition-fast: 0.18s ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gf-font);
  color: var(--gf-text-main);
  background: linear-gradient(
    to bottom,
    #d8e3ff 0%,
    #e3ddff 40%,
    #dde4ff 100%
  );
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100vh;          /* фоллбек для старых браузеров */
  display: flex;
  flex-direction: column;
}

@supports (min-height: 100dvh) {
  .page {
    min-height: 100dvh;       /* тут уже учитываются панели Safari/Chrome */
  }
}

.container {
  width: 100%;
  max-width: var(--gf-max-width);
  margin: 0 auto;
  padding: 0 var(--gf-pad-x-desktop);
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;  
  min-height: 0; 
}

.main > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 990px) and (min-width: 768px) {
  .container {
    padding: 0 var(--gf-pad-x-tablet);
  }

  :root {
    --gf-gap-y: 20px;
  }
}

@media (max-width: 767px) and (min-width: 480px) {
  .container {
    padding: 0 var(--gf-pad-x-mobile);
  }

  :root {
    --gf-gap-y: 14px;
  }
}

@media (max-width: 479px) {
  .container {
    padding: 0 10px;
  }

  :root {
    --gf-gap-y: 10px;
  }
}