@media (max-width: 900px) {

  /* -------------------------
     Mobile typography tokens
  ------------------------- */
  :root{
    --m-fw-regular: 400;
    --m-fw-medium: 500;
    --m-fw-semibold: 600;

    --m-fs-h1: 20px;
    --m-lh-h1: 24px;

    --m-fs-h2: 16px;
    --m-lh-h2: 22px;

    --m-fs-body: 14px;
    --m-lh-body: 20px;

    --m-fs-meta: 13px;
    --m-lh-meta: 18px;

    --m-fs-caption: 12px;
    --m-lh-caption: 16px;

    --m-fs-nav: 11px;
    --m-lh-nav: 14px;

    --m-fs-button: 14px;
    --m-lh-button: 20px;

    --m-text-primary: #111827;
    --m-text-secondary: #4B5563;

    /* you wanted same color + opacity */
    --m-muted-color: #4B5563;
    --m-muted-opacity: 0.72;

        /* tile label (under icon) - tighter than body */
    --m-fs-tile: 13px;
    --m-lh-tile: 16px;

    /* Squircle mask (Corner Smoothing ~60) */
    --m-icon-radius: 15px;
    --m-squircle-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M100.000%2050.000%20L99.879%2065.654%20L99.517%2072.085%20L98.912%2076.939%20L98.059%2080.931%20L96.955%2084.329%20L95.592%2087.268%20L93.961%2089.824%20L92.050%2092.040%20L89.824%2093.961%20L87.268%2095.592%20L84.329%2096.955%20L80.931%2098.059%20L76.939%2098.912%20L72.085%2099.517%20L65.654%2099.879%20L50.000%20100.000%20L34.346%2099.879%20L27.915%2099.517%20L23.061%2098.912%20L19.069%2098.059%20L15.671%2096.955%20L12.732%2095.592%20L10.176%2093.961%20L7.960%2092.050%20L6.039%2089.824%20L4.408%2087.268%20L3.045%2084.329%20L1.941%2080.931%20L1.088%2076.939%20L0.483%2072.085%20L0.121%2065.654%20L0.000%2050.000%20L0.121%2034.346%20L0.483%2027.915%20L1.088%2023.061%20L1.941%2019.069%20L3.045%2015.671%20L4.408%2012.732%20L6.039%2010.176%20L7.960%207.960%20L10.176%206.039%20L12.732%204.408%20L15.671%203.045%20L19.069%201.941%20L23.061%201.088%20L27.915%200.483%20L34.346%200.121%20L50.000%200.000%20L65.654%200.121%20L72.085%200.483%20L76.939%201.088%20L80.931%201.941%20L84.329%203.045%20L87.268%204.408%20L89.824%206.039%20L92.050%207.960%20L93.961%2010.176%20L95.592%2012.732%20L96.955%2015.671%20L98.059%2019.069%20L98.912%2023.061%20L99.517%2027.915%20L99.879%2034.346%20Z%27%2F%3E%3C%2Fsvg%3E");

        /* Profile (mobile) */
    --m-profile-ava: 100px;
    --m-profile-ava-radius: 999px;

    --m-card-radius: 18px;
    --m-gap-1: 10px;
    --m-gap-2: 12px;
    --m-gap-3: 16px;
  }

    /* Mobile: override desktop home constraints that break body scroll + sticky */
  body.app-home{
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

    /* Mobile: keep sticky working on profile as well */
  body.app-profile{
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

html{
  background: var(--bg);
}

  body.app{
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    margin: 0 !important;
  }

/* Make the scroll root truly fill the viewport on mobile */
/* Home uses an internal scroll container (SPA). Keep it in-flow. */
.home-scroll{
  position: relative;
  min-height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
  height: auto;
  overflow: visible;
  background: transparent;
}

html, body{
  height: auto;
  min-height: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto !important; /* Override desktop overflow: hidden */
  touch-action: pan-y; /* Enable vertical touch scrolling on Android */
  background: transparent;
}

  /* -------------------------
     Mobile: kill desktop body grid (SPA top white block fix)
  ------------------------- */
  html, body{
    height: 100%;
    height: 100dvh;
    overflow-y: auto !important; /* Override desktop overflow: hidden */
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
    background: var(--bg);
  }

  /* body is a desktop grid in style.css, it centers SPA root vertically */
  body{
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

/* SPA root must fill viewport (override inline 100vh in index.html) */
#spaRoot{
  min-height: var(--vvh, 100svh) !important;
}

/* index.html sets .spa-root { min-height:100vh } after css links, so override it */
.spa-root{
  min-height: var(--vvh, 100svh) !important;
}

  /* -------------------------
     Base layout
  ------------------------- */
.app-shell{
  max-width: none;

  padding-left: max(4.85vw, env(safe-area-inset-left));
  padding-right: max(4.85vw, env(safe-area-inset-right));
  /* IMPORTANT: do not pad the scroll-root itself on iOS, иначе появляются "белые полосы" сверху/снизу
     когда контент прокручен и под fixed/sticky элементами видно фон. Safe-area учитываем точечно
     (topbar/nav/fab) */
  padding-top: 0;
  padding-bottom: 0;

  /* IMPORTANT: iOS sticky fix (overflow-x on ancestor can break position: sticky) */
  overflow-x: visible;

  /* IMPORTANT: anchor absolute Home topbar */
  position: relative;
}

/* keep horizontal clipping on the scroll container instead (safe) */
body.app-home .home-scroll{
  overflow-x: visible;
}

/* Home uses a scroll container. Leave space for bottom nav */
.home-scroll{
  /* minimal space so last card isn't hidden behind bottom nav + FAB */
  padding-bottom: calc(140px + env(safe-area-inset-bottom));

  /* iOS sticky fix: sticky inside scroll container */
  -webkit-overflow-scrolling: touch;
  position: relative;
  padding-top: 0;
}

/* Home: do not push whole screen down */
body.app-home .home-scroll{
  padding-top: 0 !important;
  background: var(--bg);
}

    /* Post page needs extra bottom space (nav + fab + comment input) */
  body.app-post-details .home-scroll{
    padding-bottom: calc(280px + env(safe-area-inset-bottom));
  }

  /* Some desktop pages force min-width and fixed height */
  .app.app-home{
    min-width: 0 !important;
    height: auto !important;
  }

    body.app-post-details .post-comments{
    padding-bottom: 140px;
  }

  /* -------------------------
     Topbar (match Figma: only logo)
  ------------------------- */

  /* HARD: iOS notch must not create a blank top band on Home */
body.app-home .home-topbar{ padding-top: 0 !important; }

  .home-topbar{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    height: auto;
    flex: 0 0 auto;

    /* IMPORTANT: do NOT stick topbar on mobile (breaks Post/Event details) */
    position: relative;
    top: auto;

   /* keep logo below iOS status bar, without extra blank band */
   padding-top: 0;
  }
  

  .topbar-left{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .brand{
    margin: 0 auto;
    font-size: 40px;
    letter-spacing: -0.06em;
    text-align: center;
  }

  /* hide desktop blocks on mobile */
  .topbar-right{
    display: none !important;
  }
  .topbar-center{
    display: none !important;
  }

  /* -------------------------
     Grid (one column)
  ------------------------- */
.home-grid{
  grid-template-columns: 1fr;
  gap: 18px;

  /* mobile: remove desktop top spacing that creates the "white block" */
  padding-top: 0 !important;
}

  .home-sidebar,
  .home-right{
    display: none !important;
  }

    /* -------------------------
     Post page mobile (sticky creator + correct media)
  ------------------------- */
  body.app-post-details .home-grid{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* show right column (creator) on post page */
body.app-post-details .home-right.post-details-right{
  display: block !important;
  width: 100%;
  order: 1;

  /* IMPORTANT: do NOT stick creator block on mobile */
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

  body.app-post-details .page-center{
    order: 2;
  }

    /* Post page: media should NOT use Home card fixed heights */
  body.app-post-details .post-media{
    height: auto !important;
    overflow: hidden;
    border-radius: 22px;
  }

  body.app-post-details .post-media-img{
    width: 100%;
    height: auto !important;
    display: block;
    object-fit: cover;
  }

  /* arrows are controlled by post.js (flex/none) */
  body.app-post-details .post-media-arrow{
    display: flex;
  }

  body.app-post-details .post-dots{
    width: 100% !important;
  }

  /* Remove desktop centering of feed */
  .home-feed{
    justify-content: stretch !important;
  }
  .home-center{
    max-width: none !important;
  }
  .feed-grid{
    max-width: none !important;
  }

/* Featured Creators (mobile) */
.creators-list{
  display: flex;
  flex-wrap: nowrap;

  /* На экранах <360px 5 аватарок + border должны помещаться */
  gap: clamp(8px, 3vw, 12px);

  width: 100%;
  overflow: hidden;          /* no scroll */
  padding-bottom: 0;

  /* Когда места больше - распределяем красиво */
  justify-content: space-between;
}

  /* show maximum 5 avatars */
  .creators-list .creator-chip:nth-child(n+6){
    display: none !important;
  }

  /* tighter spacing: remove the old "slot" under the switcher */
body.app-home .creators-row{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.app-home #feedGrid.feed-grid{
  margin-top: 0 !important;
}

/* Home feed switcher (glass + sticky) */
body.app-home .home-tabs{
  width: min(250px, 100%);
  height: 45px;

  padding: 2px;
  gap: 2px;

  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 2px !important; /* перебиваем desktop padding-bottom: 8px */

  border-radius: 999px;

  background: rgba(246, 247, 248, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);

  box-shadow:
    0 10px 24px rgba(17, 24, 39, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* sticky behavior */
  position: sticky;
  top: 2px;
  z-index: 50;

  /* Center it */
  margin-left: auto;
  margin-right: auto;

  /* IMPORTANT: overlay on first post, remove “slot” under switcher */
  margin-top: 28px;          /* опускаем свитчер на пост без transform (iOS sticky safe) */
  margin-bottom: -58px;      /* чтобы пост “подъехал” под свитчер и не оставался слот */
  transform: none;
}

/* kill desktop underline logic on mobile */
body.app-home .home-tabs .home-tab::after{
  display: none !important;
  content: none !important;
}

body.app-home .home-tabs .home-tab{
  flex: 0 0 calc((100% - 2px) / 2); /* 2px это gap между пилюлями */
  height: 41px; /* 45 - 2px(top) - 2px(bottom) */
  border: 0;
  background: transparent;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);

  color: rgba(75, 85, 99, 0.70);

    -webkit-tap-highlight-color: transparent;
  outline: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  -webkit-appearance: none;
  appearance: none;

  touch-action: manipulation;
}

body.app-home .home-tabs .home-tab:focus,
body.app-home .home-tabs .home-tab:focus-visible{
  outline: none;
}

body.app-home .home-tabs .home-tab:active{
  background: transparent;
}

body.app-home .home-tabs .home-tab.is-active{
  background: rgba(30, 86, 250, 0.18);
  color: #1E56FA;
}

/* Featured Creators */
.creators-title{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
}

.creator-chip{
  /* Адаптивный размер, чтобы 5 штук никогда не вылезали за экран */
  width: clamp(48px, 16vw, 60px);
  height: clamp(48px, 16vw, 60px);
  flex: 0 0 clamp(48px, 16vw, 60px);

  /* Важно: border должен учитываться в ширине */
  box-sizing: border-box;
}

  .creator-chip img {
    width: 100%;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
    object-fit: cover;
    border-radius: 9999px;
    display: block;
    margin: 0 !important;
  }

  /* -------------------------
     Post card fixed sizes (mobile)
     Preview: 295px
     Meta:    73px
     Total:   368px
  ------------------------- */
.post-card{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
}

.post-media{
  width: 100%;
  height: auto;

  /* держим композицию как в дизайне 363px, но адаптивно */
  aspect-ratio: 363 / 295;

  overflow: hidden;
}

  .post-media img,
  .post-media video{
    width: 100%;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
    object-fit: cover;
    display: block;
  }

  .post-meta{
    height: auto;
    box-sizing: border-box;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

    .post-author{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .post-title{
    margin-bottom: 0;
  }

    /* Post meta typography (mobile) */
  .post-meta,
  .post-meta *{
    color: #4B5563;
  }

.post-meta .post-title{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  margin: 0;
}

.post-meta .post-author,
.post-meta .post-author *{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-medium);
}

  .post-author-ava{
    width: 27px !important;
    height: 27px !important;
    border-radius: 999px;
    flex: 0 0 27px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: block;
  }

    /* -------------------------
     Post page (mobile layout like Figma)
  ------------------------- */

  /* On post page we need right column (Creator) visible and above media */
  body.app-post-details .home-grid{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body.app-post-details .home-right.post-details-right{
    display: block !important;
    width: 100%;
    order: 1;
  }

  body.app-post-details .page-center{
    order: 2;
  }

  /* Hide "Back to Home" on mobile */
  body.app-post-details .post-back{
    display: none !important;
  }

  /* Make the right card look like a plain section (not a sidebar card) */
  body.app-post-details .post-side{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  /* Hide "More" section on mobile (not in Figma) */
  body.app-post-details .post-side-divider{
    display: none !important;
  }
  body.app-post-details .post-side-divider + .post-side-title{
    display: none !important;
  }
  body.app-post-details #postMoreGrid{
    display: none !important;
  }

  /* Creator block spacing + sizes */
body.app-post-details .post-side-title{
  margin: 0 0 18px 0;
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  letter-spacing: -0.02em;
}

body.app-post-details .post-creator-name{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  letter-spacing: -0.02em;
}

body.app-post-details .post-creator-handle{
  margin-top: 2px;
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,var(--m-muted-opacity));
}

body.app-post-details .post-creator-bio{
  margin-top: 12px;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,var(--m-muted-opacity));
}

  body.app-post-details .post-creator-actions{
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

body.app-post-details .post-follow-btn{
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  padding: var(--btn-blue-pad);
  border-radius: var(--radius);
  font-size: var(--m-fs-button);
  line-height: var(--m-lh-button);
  font-weight: var(--btn-blue-weight);
}

body.app-post-details .post-view-profile{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
}

  /* Center column should become full width */
  body.app-post-details .post-details-center{
    width: 100% !important;
  }

    body.app-post-details .page-center{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-post-details .post-details-center{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Media block */
  body.app-post-details .post-media{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;

    height: 270px !important;
    overflow: hidden;
    border-radius: 22px;
  }

  body.app-post-details .post-media-arrow{
  display: flex;
  }

  body.app-post-details .post-media-img{
    width: 100%;
    height: 100% !important;
    display: block;
    object-fit: cover;
  }

  body.app-post-details .post-dots{
    width: 100% !important;
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 12px;
  }

  /* -------------------------
   Post Details Skeleton (mobile)
   remove "state 1" creator placeholders, keep "state 2"
------------------------- */

/* fix the long skeleton line under dots that was desktop sized (560px) */
body.app-post-details.is-skeleton .post-below-skel{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* remove creator skeleton placeholders while fields are empty (this is the ugly "state 1") */
body.app-post-details.is-skeleton .post-creator::before{
  display: none !important;
}

/* show simplified mobile lines for name + handle + short bio */
body.app-post-details.is-skeleton .post-creator-name:empty,
body.app-post-details.is-skeleton .post-creator-handle:empty,
body.app-post-details.is-skeleton .post-creator-bio:empty{
  display: block !important;
  background: var(--skel-bar, #E7EAEE);
  border-radius: 999px;
}

/* name line */
body.app-post-details.is-skeleton .post-creator-name:empty{
  height: 14px !important;
  width: 160px !important;
  margin-top: 6px !important;
}

/* handle line */
body.app-post-details.is-skeleton .post-creator-handle:empty{
  height: 12px !important;
  width: 110px !important;
  margin-top: 8px !important;
}

/* bio line (1 short line only) */
body.app-post-details.is-skeleton .post-creator-bio:empty{
  height: 12px !important;
  width: 240px !important;
  margin-top: 12px !important;
}

  /* Title + desc */
body.app-post-details .post-title{
  width: 100% !important;
  margin: 18px 0 10px;
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
}

body.app-post-details .post-desc{
  width: 100% !important;
  margin: 0 0 22px;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,var(--m-muted-opacity));
}

  /* Actions + divider + comments should not be fixed 1126px on mobile */
body.app-post-details .post-actions{
  width: 100% !important;
  font-size: var(--m-fs-meta) !important;
  line-height: var(--m-lh-meta);
}

body.app-post-details .post-comment-input{
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: var(--m-fw-regular) !important;
}

/* Fix: comment input overflows to the right on mobile */
body.app-post-details .post-comment-form{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  gap: 10px;
}

/* allow input to shrink inside flex row */
body.app-post-details .post-comment-input{
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  width: auto; /* important: don't force 100% inside flex */
}

/* keep send button fixed */
body.app-post-details .post-comment-send{
  flex: 0 0 auto;
}

body.app-post-details .post-comment-input::placeholder{
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: var(--m-fw-regular);
}

body.app-post-details .post-comment{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body);
}

body.app-post-details .post-comment-text{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body);
}

body.app-post-details .post-comment-author{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
}

body.app-post-details .post-comment-handle{
  font-size: var(--m-fs-caption) !important;
  line-height: var(--m-lh-caption);
}

  /* -------------------------
     Bottom nav (Figma 1:1)
     Bar: W374 H65
     Icons: 18px
     Active pill: W80 H59
  ------------------------- */

.mobile-bottom-nav {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(5px + env(safe-area-inset-bottom));
  z-index: 2000;

  width: auto;
  max-width: 420px;
  margin: 0 auto;

  height: 65px;
  box-sizing: border-box;
  border-radius: 100px;

  background: rgba(246, 247, 248, 0.55);

  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(200%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  display: flex;
  align-items: center;
  justify-content: space-around;

  padding: 2px;
}

/* Animated active pill (single indicator) */
.mobile-bottom-nav{
  position: fixed;
  --mnav-x: 0px; /* updated by JS */
}

.mobile-bottom-nav .mnav-indicator{
  position: absolute;
  top: 3px;
  bottom: 3px;              /* 65 - 6 = 59px */
  width: 80px;              /* Figma active pill width */
  left: 2px;                /* start anchor */
  border-radius: 999px;
  background: rgba(77, 123, 255, 0.25);
  transform: translate3d(var(--mnav-x), 0, 0);
  transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
              opacity 160ms ease;
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}

.mobile-bottom-nav .mnav-indicator.is-hidden{
  opacity: 0;
}

  .mobile-bottom-nav .mnav-item{
    position: relative;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    text-decoration: none;
    color: #4b5563;
   font-weight: var(--m-fw-medium);
   font-size: var(--m-fs-nav);
   line-height: var(--m-lh-nav);
   flex: 1;

   -webkit-tap-highlight-color: transparent;
   outline: none;
   user-select: none;
   -webkit-user-select: none;
  }

  .mobile-bottom-nav .mnav-item:focus,
.mobile-bottom-nav .mnav-item:focus-visible{
  outline: none;
}

.mobile-bottom-nav .mnav-item:active{
  background: transparent;
}

.mobile-bottom-nav .mnav-item .nav-ico{
  width: 18px;
  height: 18px;

  /* for mask-icon approach */
  background-color: currentColor;

  /* common for mask icons */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

  .mobile-bottom-nav .mnav-item.is-active{
    color: #1e56fa;
  }

  .mobile-bottom-nav .mnav-item.is-active .nav-ico{
  background-color: #1e56fa;
  filter: none;
}

 /*.mobile-bottom-nav .mnav-item.is-active::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  border-radius: 999px;
  background: rgba(77, 123, 255, 0.25);
}*/

  .mobile-bottom-nav .mnav-item .nav-ico,
  .mobile-bottom-nav .mnav-item span{
    position: relative;
    z-index: 2;
  }

  .mobile-bottom-nav .mnav-item.has-unread .nav-ico{
    filter: none;
  }
#postModal .cp-submit{
  width: 100%;
  font-weight: var(--m-fw-regular);
  font-size: var(--m-fs-button);
  line-height: var(--m-lh-button);
}

  /* -------------------------
     Create Post modal (mobile)
  ------------------------- */

  /* Hide bottom nav + FAB + left sidebar POST while modal open */
  body.modal-open .mobile-bottom-nav,
  body.modal-open .mobile-fab,
  body.modal-open #postBtn{
    display: none !important;
  }

  /* Make modal scrollable on mobile */
  #postModal.modal.is-open{
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;

    padding: 24px max(4.85vw, env(safe-area-inset-left)) calc(140px + env(safe-area-inset-bottom)) max(4.85vw, env(safe-area-inset-right));
    box-sizing: border-box;
  }

  /* Narrow panel */
  #postModal .modal-panel{
    width: 100%;
    max-width: 420px;
    height: auto;
    max-height: none;
  }

  /* Modal box */
  #postModal .cp-modal{
    width: 100%;
    height: auto;
    padding: 56px 20px 20px;
    box-sizing: border-box;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  }

  /* Close button: own space above header row */
#postModal .cp-close{
  top: 16px;
  right: 20px;

  width: 25px;
  height: 25px;

  border-radius: 999px;
  background: #F8FAFC;
}

  /* Hide "Back to Home" */
  #postModal .cp-back{
    display: none !important;
  }

  /* Stack layout */
  #postModal .cp-content{
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  #postModal .cp-left,
  #postModal .cp-right{
    width: 100%;
  }

  /* Head row: "Media Assets" + counter */
#postModal .cp-left-title,
#postModal .cp-empty-title,
#postModal .cp-label{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
}

#postModal .cp-count,
#postModal .cp-empty-sub{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
}

  /* Keep upload area square and responsive */
#postModal .cp-media{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  background: #F8FAFC;
  border-radius: 24px;
  box-shadow: var(--tile-shadow);
  overflow: hidden;
}

#postModal .cp-media.has-files{
  background: transparent;
  box-shadow: none;
  overflow: visible;
  aspect-ratio: auto;
}

#postModal .cp-left-head{
  padding-right: 56px;
  box-sizing: border-box;
}

  #postModal .cp-dropzone{
    width: 100%;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
  }

  /* Keep 3x3 grid, make tiles responsive */
  #postModal .cp-grid{
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

    /* Add tile (brand color) */
#postModal .cp-add{
  background: #F8FAFC;
  border-radius: 20px;

  color: #1E56FA;
  font-weight: var(--m-fw-medium);
}

#postModal .cp-add-plus{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-regular);
  color: #1E56FA;
}

#postModal .cp-add div:last-child{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-regular);
  margin-top: 1px;
  color: #1E56FA;
}

  #postModal .cp-tile{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Recommended text */
  #postModal .cp-help{
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    padding: 0 6px;
    box-sizing: border-box;

    font-size: var(--m-fs-caption);
    font-weight: var(--m-fw-medium);
    line-height: var(--m-lh-caption);
    text-align: center;

    white-space: normal;
    word-break: break-word;
  }

#postModal .cp-input,
#postModal .cp-textarea{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
}

  /* Button full width + correct weight */
#postModal .cp-post{
  width: 100%;
  font-size: var(--m-fs-button);
  line-height: var(--m-lh-button);
  font-weight: var(--m-fw-regular);
}

/* iOS: prevent zoom on focus (font-size must be >= 16px) */
@media (max-width: 520px){
  #postModal .cp-input,
  #postModal .cp-textarea{
    font-size: 16px !important;
    line-height: 22px !important;
  }

  #postModal .cp-input::placeholder,
  #postModal .cp-textarea::placeholder{
    font-size: 16px !important;
    line-height: 22px !important;
  }
}

  /* -------------------------
     Floating + button
  ------------------------- */
  .mobile-fab{
  position: fixed;

  /* вместо привязки к 363px через margin-left, якорим к правой границе коридора */
  left: auto;
  transform: none;
  margin-left: 0;

  right: max(4.85vw, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom));

    width: 58px;
    height: 58px;

    border-radius: 999px;
    border: 0;
    background: #1e56fa;
    color: #fff;

    display: grid;
    place-items: center;

    z-index: 3100;
    box-shadow: none;
  }

  .mobile-fab svg{
    width: 26px;
    height: 26px;
    display: block;
  }

    /* -------------------------
     Community (mobile) - RESET (Figma hi-res)
  ------------------------- */

  /* layout wrap */
body.app-community .community-wrap{
  max-width: 100% !important;
  padding-top: 6px;

  /* space for bottom nav */
  padding-bottom: 110px;

  gap: 14px;
}

  /* Title + subtitle */
body.app-community .community-title{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.02em;
  color: var(--m-text-secondary);
  margin: 0;
}

body.app-community .community-subtitle{
  margin: 6px 0 0 0;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  letter-spacing: -0.01em;
  color: rgba(75,85,99,var(--m-muted-opacity));
}

  /* -----------------
     Hero card (event)
     Figma ratio: 363x155
  ----------------- */
  body.app-community .community-hero{
    width: 100% !important;
    aspect-ratio: 363 / 155; /* keeps the exact proportion without hard px */
    height: auto;
    border-radius: 18px;
    overflow: hidden;
  }

    /* Fix hero layout: media must fill card, overlay must sit on top */
  body.app-community .community-hero{
    position: relative;
  }

body.app-community .community-hero-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
  display: block;
  object-fit: cover;
  z-index: 0;
}

/* hero gradient overlay (same as desktop) */
body.app-community .community-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 22, 1) 0%,
    rgba(10, 10, 22, 0.49) 34%,
    rgba(10, 10, 22, 0) 63%
  );
}
/* overlay becomes a positioning layer, not flex-bottom */
  body.app-community .community-hero-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
    padding: 14px;
    box-sizing: border-box;

    display: block;
  }

/* place pill + title at top-left like Figma */
body.app-community .community-hero-copy{
  position: absolute;
  left: 14px;
  top: 14px;

  width: auto;
  max-width: 230px; /* so title wraps nicely */
  margin: 0;
}

  body.app-community .community-pill{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: var(--m-fs-nav);
    line-height: var(--m-lh-nav);
    font-weight: var(--m-fw-medium);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }

  body.app-community .community-hero-title{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
    letter-spacing: -0.02em;
    margin: 0;
  }

  /* On mobile hi-res no description */
  body.app-community .community-hero-desc{
    display: none;
  }

  /* JOIN button - ratio like Figma, text rules like desktop (15px Medium) */
  body.app-community .community-hero-join{
    left: auto;
    right: 14px;
    bottom: 14px;

    height: var(--btn-blue-h);
    min-width: var(--btn-blue-min);
    padding: var(--btn-blue-pad);

    border-radius: var(--radius);

    font-size: var(--m-fs-button);
    font-weight: var(--btn-blue-weight);
    line-height: var(--m-lh-button);
  }

    body.app-community .community-hero-join{
    max-width: calc(100% - 28px);
  }
  /* -----------------
     Tiles row (4 slots, last empty)
     Icon: 65x65, radius: 15
  ----------------- */
  body.app-community .community-tiles{
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* reserve 4th empty slot */
    gap: 14px;
    margin-top: 8px;
    align-items: start;
  }

  /* creates the 4th empty slot even if HTML has only 3 tiles */
  body.app-community .community-tiles::after{
    content: "";
    display: block;
  }

  body.app-community .community-tile,
  body.app-community .community-tile.is-disabled{
    background: transparent;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    gap: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    transform: none;
  }

  body.app-community .community-tile:hover{
    transform: none;
  }

body.app-community .community-tile-icon{
  width: 65px;
  height: 65px;

  border-radius: var(--m-icon-radius);
  overflow: hidden;

  -webkit-mask-image: var(--m-squircle-mask);
  mask-image: var(--m-squircle-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  background: rgba(30, 86, 250, 0.30); /* #1E56FA 30% */
  display: flex;
  align-items: center;
  justify-content: center;
}

body.app-community .community-tile-icon img{
  width: 22px;
  height: 22px;
  display: block;
}

  /* label under icon */
body.app-community .community-tile-title{
  font-size: var(--m-fs-tile);
  line-height: var(--m-lh-tile);
  font-weight: var(--m-fw-medium);
  letter-spacing: -0.01em;
  color: var(--m-text-secondary);
  margin: 0;
}

  /* force Collab Projects to 2 lines */
  body.app-community .community-tile-title .ctp{
    display: block;
  }

  /* hide desktop-only parts inside tiles */
  body.app-community .community-tile-desc,
  body.app-community .community-tile-link,
  body.app-community .community-tile-soon{
    display: none;
  }

  /* disabled tile */
  body.app-community .community-tile.is-disabled{
    opacity: 1;
  }

  body.app-community .community-tile.is-disabled .community-tile-icon{
    background: rgba(75,85,99,0.14);
  }

  body.app-community .community-tile.is-disabled img{
    opacity: 0.45;
  }

  body.app-community .community-tile.is-disabled .community-tile-title{
    color: rgba(75,85,99,0.55);
  }

  /* -----------------
     What's happening
  ----------------- */
  body.app-community .community-activity{
    margin-top: 18px;
  }

body.app-community .community-activity-title{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
  color: var(--m-text-secondary);
}

  body.app-community .community-activity-row{
    gap: 12px;
    padding: 10px 0;
  }

  body.app-community .community-activity-avatar{
    width: 40px;
    height: 40px;
  }

body.app-community .community-activity-text{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  letter-spacing: -0.01em;
  color: var(--m-text-secondary);
}

  /* control bold parts inside activity text */
body.app-community .community-activity-text strong{
  font-weight: 500;
}

body.app-community .community-activity-text a{
  font-weight: 500;
}

body.app-community .community-activity-time{
  margin-top: 4px;
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,0.62);
}

    /* -------------------------
     Events (mobile) - RESET (Figma hi-res)
     Desktop stays untouched because it's inside media query + body scope
  ------------------------- */

  body.app-events .events-wrap{
    max-width: 100% !important;
    padding-top: 6px;
    padding-bottom: calc(200px + env(safe-area-inset-bottom)); /* чтобы bottom nav не перекрывал */
    gap: 14px;
  }

body.app-events .events-title{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.02em;
  color: var(--m-text-secondary);
  margin: 0;
}

body.app-events .events-subtitle{
  margin: 6px 0 0 0;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  letter-spacing: -0.01em;
  color: rgba(75,85,99,var(--m-muted-opacity));
}

  /* Tabs are desktop only */
  body.app-events .events-tabs{
    display: none !important;
  }

  body.app-events .events-list{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* Mobile preview card (same ratio as Community hero on mobile) */
  body.app-events .m-event{
    width: 100%;
    aspect-ratio: 363 / 155;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  }

  body.app-events .m-event-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
    object-fit: cover;
    display: block;
  }

  /* gradient like desktop Community hero */
  body.app-events .m-event::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(10, 10, 22, 1) 0%,
      rgba(10, 10, 22, 0.49) 34%,
      rgba(10, 10, 22, 0) 63%
    );
    pointer-events: none;
  }

  body.app-events .m-event-overlay{
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  body.app-events .m-event-title{
    font-size: var(--m-fs-h1);
    line-height: var(--m-lh-h1);
    font-weight: var(--m-fw-semibold);
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.98);
    max-width: 72%;
  }

  body.app-events .m-event-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  body.app-events .m-event-date{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.92);
    font-size: var(--m-fs-body);
    line-height: var(--m-lh-body);
    font-weight: var(--m-fw-medium);
    letter-spacing: -0.02em;
    min-width: 0;
  }

  body.app-events .m-event-date span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-events .m-event-cal{
    width: 22px;
    height: 22px;
    display: inline-flex;
    color: rgba(255,255,255,0.92);
    flex: 0 0 22px;
  }

  body.app-events .m-event-cal svg{
    width: 22px;
    height: 22px;
    display: block;
  }

body.app-events .m-event-join{
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  padding: var(--btn-blue-pad);
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;

  background: #1E56FA;
  color: #fff;

  font-size: var(--m-fs-button);
  line-height: var(--m-lh-button);
  font-weight: var(--btn-blue-weight);
}

  /* -------------------------
   Tools (mobile) - like Community tiles
------------------------- */

body.app-tools .tools-wrap{
  max-width: 100% !important;
  padding-top: 6px;
  padding-bottom: 110px; /* чтобы bottom nav не перекрывал */
  gap: 14px;
}

/* Title */
body.app-tools .tools-title{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.02em;
  color: #4B5563;
  margin: 0;
}

body.app-tools .tools-subtitle{
  margin: 6px 0 0 0;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  letter-spacing: -0.01em;
  color: rgba(75,85,99,0.72);
}

/* Grid becomes 4 columns */
body.app-tools .tools-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 12px;
}

/* Remove card styling */
body.app-tools .tool-card{
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* Icon */
body.app-tools .tool-ico{
  width: 65px;
  height: 65px;

  border-radius: var(--m-icon-radius);
  overflow: hidden;

  -webkit-mask-image: var(--m-squircle-mask);
  mask-image: var(--m-squircle-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  background: rgba(30, 86, 250, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Disabled tools */
body.app-tools .tool-card.is-soon .tool-ico{
  background: rgba(75,85,99,0.14);
}

body.app-tools .tool-card.is-soon .tool-ico img{
  opacity: 0.45;
}

/* Icon image */
body.app-tools .tool-ico img{
  width: 22px;
  height: 22px;
  display: block;
}

/* Title under icon */
body.app-tools .tool-title{
  font-size: var(--m-fs-tile);
  line-height: var(--m-lh-tile);
  font-weight: var(--m-fw-medium);
  letter-spacing: -0.01em;
  color: var(--m-text-secondary);
  margin: 0;
}

/* Hide description + button on mobile */
body.app-tools .tool-desc,
body.app-tools .tool-btn{
  display: none !important;
}

  /* -------------------------
     Event Details page (mobile like Figma)
     Reuse Post Details pattern: right column becomes top block
  ------------------------- */

  body.app-event-details .home-grid{
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 110px;
  }

  /* show right column (Event Details + JOIN) on mobile */
body.app-event-details .home-right.event-details-right{
  display: block !important;
  width: 100% !important;
  order: 1;

  /* IMPORTANT: do NOT stick Event Details block on mobile */
  position: static !important;
  top: auto !important;
  z-index: auto !important;

  /* kill sticky leftovers from desktop rules */
  align-self: stretch !important;
  height: auto !important;
}

/* Fallback: never allow sticky right column on Event Details mobile */
body.app-event-details .home-right{
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  align-self: stretch !important;
  height: auto !important;
}

  body.app-event-details .page-center{
    order: 2;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Hide desktop back link on mobile (Figma has no back row) */
  body.app-event-details .event-back{
    display: none !important;
  }

  /* Right column: on mobile we only keep "Event Details" block and join row.
     Agenda/Speakers should render in center (event-mobile-sections). */
  body.app-event-details .event-details-right .event-side-divider,
  body.app-event-details .event-details-right .event-side-subtitle,
  body.app-event-details .event-details-right .event-agenda,
  body.app-event-details .event-details-right .event-speakers{
    display: none !important;
  }

  /* Ensure center content uses full width */
  body.app-event-details .event-details-center{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero */
body.app-event-details .event-hero{
  width: 100% !important;
  height: 270px;
  border-radius: 22px;
  overflow: hidden;
}

  body.app-event-details .event-hero img{
    width: 100%;
    height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
    object-fit: cover;
    display: block;
  }

  /* Title + text */
body.app-event-details .event-title{
  margin: 18px 0 10px;
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.03em;
  color: var(--m-text-secondary);
}

body.app-event-details .event-about-title{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  margin: 0 0 10px 0;
}

body.app-event-details .event-about-text{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,var(--m-muted-opacity));
  margin: 0 0 14px 0;
}

  /* Event Details block typography (top block) */
  body.app-event-details .event-side{
    width: 100%;
    box-sizing: border-box;
  }

body.app-event-details .event-side-title{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  margin: 0 0 12px 0;
}

body.app-event-details .event-side-label{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  color: rgba(75,85,99,0.70);
}

body.app-event-details .event-side-value{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  color: var(--m-text-secondary);
}

  /* Join row */
  body.app-event-details .event-side-joinRow{
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 0 !important;
  }

body.app-event-details .event-join-btn{
  width: 120px;
  height: 37px;
  padding: var(--btn-blue-pad);
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;

  background: #1E56FA;
  color: #fff;

  font-size: var(--m-fs-button);
  line-height: var(--m-lh-button);
  font-weight: var(--btn-blue-weight);
}

body.app-event-details .event-join-meta{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-medium);
  color: rgba(75,85,99,var(--m-muted-opacity));
  white-space: nowrap;
}

  /* Mobile sections (Agenda/Speakers) spacing */
body.app-event-details .event-mobile-sections{
  display: block;
  margin-top: 18px;
}

body.app-event-details .event-mobile-sections .event-side-subtitle{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary);
  margin: 18px 0 12px 0;
}

  body.app-event-details .event-mobile-sections .event-side-divider{
    height: 1px;
    background: rgba(0,0,0,0.10);
    margin: 18px 0;
  }
  
    /* -------------------------
     FINAL OVERRIDES (mobile tiles consistency)
     Fix: different icon->label spacing + force squircle
  ------------------------- */

  /* Same spacing under icon everywhere */
  body.app-community .community-tile,
  body.app-tools .tool-card{
    gap: 10px !important;
  }

  /* Kill desktop spacing that leaks into mobile (Tools had margin-bottom:16px on .tool-ico) */
  body.app-tools .tool-ico{
    margin: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Also ensure Community icon wrapper has no margins */
  body.app-community .community-tile-icon{
    margin: 0 !important;
  }

  /* Force same shape for both icon tiles (stable, not circular) */
body.app-community .community-tile-icon,
body.app-tools .tool-ico{
  border-radius: var(--m-icon-radius) !important;
  overflow: hidden !important;

  -webkit-mask-image: var(--m-squircle-mask) !important;
  mask-image: var(--m-squircle-mask) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

  /* -------------------------
     AI Agent (mobile)
  ------------------------- */

  /* AI page must NOT have bottom nav */
  body.app-ai .mobile-bottom-nav{
    display: none !important;
  }

/* AI scroll area must start below the fixed topbar */
body.app-ai .home-scroll{
  padding-bottom: 0 !important;
  padding-top: calc(62px + 16px + env(safe-area-inset-top)) !important; /* topbar height approx */
}

/* EMPTY: center content truly in viewport (balance top padding) */
body.app-ai.is-empty .home-scroll{
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* make container at least viewport height */
  min-height: 100dvh;
  box-sizing: border-box;

  /* balance the big padding-top from body.app-ai .home-scroll */
  padding-bottom: calc(62px + 16px + env(safe-area-inset-top)) !important;
}

/* TOPBAR on AI: fixed like composer (always visible) */
body.app-ai .home-topbar{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;

  z-index: 70;
  background: transparent;

  /* keep same corridor padding as app-shell */
  padding-left: max(4.85vw, env(safe-area-inset-left));
  padding-right: max(4.85vw, env(safe-area-inset-right));
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: 10px;

  grid-template-columns: auto 1fr auto;
  justify-items: stretch;
  gap: 0;
}

  body.app-ai .topbar-left{
    width: auto;
    justify-content: flex-start;
    gap: 10px;
  }

body.app-ai .brand{
  display: none !important;
}

  body.app-ai .topbar-right{
    display: flex !important;
    justify-content: flex-end;
    align-items: center;
  }

  body.app-ai .ai-topbar-btn{
    display: inline-flex !important;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,0.04);
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
  }

  body.app-ai .ai-topbar-btn:active{
    background: rgba(0,0,0,0.08);
  }

  body.app-ai .ai-topbar-ico{
    width: 18px;
    height: 18px;
    display: block;
    background: #4B5563;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  /* left button icon: chats (reuse existing icon file) */
  body.app-ai .ai-topbar-ico--chats{
    -webkit-mask-image: url("../assets/icons/new-chat-icon.svg");
    mask-image: url("../assets/icons/new-chat-icon.svg");
  }

  /* right button icon: mode/settings (reuse existing icon file) */
  body.app-ai .ai-topbar-ico--tone{
    -webkit-mask-image: url("../assets/icons/settings.svg");
    mask-image: url("../assets/icons/settings.svg");
  }

  /* center must follow app-shell corridor (do not add extra padding) */
  body.app-ai .ai-center{
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

body.app-ai .ai-composer .ai-input{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  box-sizing: border-box;
  min-height: 52px;
  border-radius: 25px;
  overflow: hidden;
}

/* AI attachments preview must follow the same 363px corridor as input/messages */
body.app-ai .ai-attachments{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* remove desktop padding that shifts chips outside the corridor */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ChatGPT-like input field on mobile (fix overlap with icons) */
body.app-ai .ai-input-field{
  box-sizing: border-box;

  height: 52px;
  min-height: 52px;
  max-height: 156px;

  /* reserve space for attach + send buttons */
  padding: 15px 112px 15px 18px;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);

  overflow-y: hidden;
  resize: none;

  /* IMPORTANT: allow user text to wrap (do not use nowrap here) */
  white-space: normal;
}

body.app-ai .ai-input-field::placeholder{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,0.50);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ensure textarea behaves like single-line when empty */
body.app-ai .ai-input-field{
  text-overflow: ellipsis;
}

  body.app-ai .ai-messages,
  body.app-ai .ai-empty{
    width: 100% !important;
    max-width: 363px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* messages need space for fixed composer */
  body.app-ai .ai-messages{
    padding-bottom: 220px !important;
  }

/* FIX: composer aligned to the same corridor as app-shell */
body.app-ai:not(.is-empty) .ai-composer{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;

  margin: 0 !important; /* перебиваем desktop empty-state */

  /* NO own horizontal padding */
  padding-left: 0;
  padding-right: 0;

  padding-top: 10px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));

  background: transparent !important;

  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: border-box;
  z-index: 60;
}

/* EMPTY: input must be part of centered block (title + input together) */
body.app-ai.is-empty .ai-composer{
  position: static !important;
  left: auto;
  right: auto;
  bottom: auto;

  padding-top: 18px;
  padding-bottom: 0;

  margin: 0 !important;
}

/* EMPTY on mobile must match desktop:
   title + input centered as one group */
body.app-ai.is-empty .ai-composer{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  margin-top: 18px !important;
  margin-bottom: 0 !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  z-index: auto !important;
}

body.app-ai.is-empty .ai-center{
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

body.app-ai.is-empty .ai-empty{
  margin: 0 !important;
  text-align: center !important;
}

body.app-ai.is-empty .ai-empty-title{
  text-align: center !important;
}

  /* hide desktop AI sidebar + right tone column on mobile */
  body.app-ai .ai-sidebar,
  body.app-ai .ai-right{
    display: none !important;
  }

/* AI: remove side padding so center is true screen-center (not inside app-shell corridor) */
body.app-ai .app-shell{
  padding-top: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

  /* -------------------------
     AI sheets must slide from sides (not bottom)
  ------------------------- */

/* base overlay + backdrop */
.ai-sheet.modal{
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;

  align-items: stretch;
}

.ai-sheet.modal.is-open{
  opacity: 1;
  pointer-events: auto;
}

  /* AI sheets: no header, no close icon (close by tapping backdrop) */
body.app-ai .ai-sheet-head{
  display: none !important;
}
body.app-ai .ai-sheet-close{
  display: none !important;
}

  /* LEFT drawer: Chats */
  #aiChatsSheet.modal.is-open{
    justify-content: flex-start;
  }

  #aiChatsSheet .ai-sheet-card{
    width: min(75vw, 360px);
    height: 100vh;
    max-height: 100vh;

    border-radius: 0;
    background: #ffffff;

    transform: translateX(0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* RIGHT drawer: Mode */
  #aiToneSheet.modal.is-open{
    justify-content: flex-end;
  }

  #aiToneSheet .ai-sheet-card{
    width: min(75vw, 360px);
    height: 100vh;
    max-height: 100vh;

    border-radius: 0;
    background: #ffffff;

    transform: translateX(0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* drawer inner paddings */
  .ai-sheet-card{
    padding: 18px 16px;
    box-sizing: border-box;
  }

  .ai-sheet-body{
    flex: 1 1 auto;
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  /* AI Empty: no scroll at all (keep current centering intact) */
body.app-ai.is-empty .home-scroll{
  overflow-y: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* AI sheets: no header titles on mobile */
.ai-sheet-title{
  display: none !important;
}

/* AI mobile: Back to Tools uses mobile typography tokens */
body.app-ai #aiChatsSheet .ai-sheet-back.ai-back{
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 10px 0;

  text-decoration: none;
  font-family: inherit;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);

  color: var(--m-text-secondary);
}

body.app-ai #aiChatsSheet .ai-sheet-back .ai-back-ico{
  width: 16px;
  height: 16px;
  background: var(--m-text-secondary);
}

/* -------------------------
   Profile mobile
------------------------- */
body.app-profile .profile-wrap{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 0 !important;
}

/* Header centered */
body.app-profile .profile-header{
  margin-top: 18px;
  margin-bottom: 0px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;

  text-align: center;
}

body.app-profile .profile-head-left{
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

body.app-profile .profile-head-meta{
  width: 100%;
  min-width: 0;
}

/* Avatar 100px via existing root */
body.app-profile .profile-avatar{
  width: var(--m-profile-ava) !important;
  height: var(--m-profile-ava) !important;
  border-radius: var(--m-profile-ava-radius) !important;
  flex: 0 0 var(--m-profile-ava);
}

/* Name, handle, bio use existing mobile tokens */
body.app-profile .profile-display{
  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  color: var(--m-text-secondary) !important;
  letter-spacing: -0.02em;
}

body.app-profile .profile-username{
  margin-top: 6px;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  color: var(--m-text-secondary) !important;
}

body.app-profile .profile-bio{
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  max-width: 320px;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);
  color: var(--m-text-secondary);
}

/* Followers + Following row */
body.app-profile .profile-counts{
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 320px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

body.app-profile .profile-count{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.app-profile .profile-count-num{
  font-size: var(--m-fs-h2);
  line-height: var(--m-lh-h2);
  font-weight: var(--m-fw-medium);
  color: var(--m-text-secondary);
}

body.app-profile .profile-count-label{
  margin-top: 6px;
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  color: rgba(75,85,99,var(--m-muted-opacity));
}

/* CTA button uses existing button tokens */
body.app-profile .profile-head-actions{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 12px;
  margin-bottom: 12px;
}

body.app-profile .profile-btn:active{
  transform: translateY(1px);
}

/* Tabs: COPY 1:1 FROM HOME SWITCHER (same sizes, glass, sticky, overlay) */
body.app-profile .profile-tabs{
  width: 250px;
  height: 45px;

  padding: 2px;
  gap: 2px;

  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 2px !important;

  border-radius: 999px;

  background: rgba(246, 247, 248, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

  position: sticky;
  top: 2px;
  z-index: 50;

  margin-left: auto;
  margin-right: auto;

  margin-top: 25px;
  margin-bottom: -58px;
  transform: none;
}

/* Projects empty card must sit UNDER the sticky switcher (do not move posts) */
body.app-profile .profile-list .profile-empty{
  margin-top: 70px !important;
}

/* kill underline logic */
body.app-profile .profile-tabs .profile-tab::after{
  display: none !important;
  content: none !important;
}

body.app-profile .profile-tabs .profile-tab{
  flex: 0 0 calc((100% - 2px) / 2);
  height: 41px;
  border: 0;
  background: transparent;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-medium);

  color: rgba(75, 85, 99, 0.70);

  -webkit-tap-highlight-color: transparent;
  outline: none;

  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  -webkit-appearance: none;
  appearance: none;

  touch-action: manipulation;
  cursor: pointer;
}

body.app-profile .profile-tabs .profile-tab:focus,
body.app-profile .profile-tabs .profile-tab:focus-visible{
  outline: none;
}

body.app-profile .profile-tabs .profile-tab.is-active{
  background: rgba(30, 86, 250, 0.18);
  color: #1E56FA;
}

/* -------------------------
   Profile Skeleton (mobile)
   center avatar + lines (match new mobile profile layout)
------------------------- */

body.app-profile .profile-header.is-skeleton .profile-head-left{
  position: relative; /* якорь для ::before */
}

/* avatar skeleton: center it + match 100px avatar */
body.app-profile .profile-header.is-skeleton .profile-head-left::before{
  width: var(--m-profile-ava) !important;
  height: var(--m-profile-ava) !important;
  border-radius: var(--m-profile-ava-radius) !important;

  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 0 !important;
}

/* skeleton lines: center under avatar */
body.app-profile .profile-header.is-skeleton .skel-line{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* tune widths to look like your screenshot */
body.app-profile .profile-header.is-skeleton .skel-line--name{
  height: 16px !important;
  width: 100% !important;
  max-width: 180px !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--user{
  height: 12px !important;
  width: 100% !important;
  max-width: 120px !important;
  margin-top: 8px !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--bio1{
  height: 12px !important;
  width: 100% !important;
  max-width: 280px !important;
  margin-top: 12px !important;
}

body.app-profile .profile-header.is-skeleton .skel-line--bio2{
  height: 12px !important;
  width: 100% !important;
  max-width: 230px !important;
  margin-top: 8px !important;
}

/* -------------------------
   Notifications (mobile)
------------------------- */

body.app-notifications .notif-wrap{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* чтобы контент не упирался в нижнюю навигацию */
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

/* force notifications list + items to stay inside 363 corridor */
body.app-notifications .notif-list{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.app-notifications .notif-item{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Title: посадить на mobile root типографику */
body.app-notifications .notif-title{
  margin: 0 0 18px 0 !important;

  font-size: var(--m-fs-h1) !important;
  line-height: var(--m-lh-h1) !important;
  font-weight: var(--m-fw-semibold) !important;
  letter-spacing: -0.02em !important;

  color: var(--m-text-secondary) !important;
}

/* Notification text: mobile root */
body.app-notifications .notif-text{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body) !important;
  font-weight: var(--m-fw-regular) !important;
  letter-spacing: -0.01em !important;
  color: var(--m-text-secondary) !important;
}

body.app-notifications .notif-text strong{
  font-weight: 500 !important;
}

body.app-notifications .notif-text a,
body.app-notifications .notif-user{
  font-weight: 500 !important;
}

/* Username link stays blue but uses mobile weights */
body.app-notifications .notif-user{
  font-weight: var(--m-fw-medium) !important;
}

/* Time uses mobile meta */
body.app-notifications .notif-time{
  font-size: var(--m-fs-meta) !important;
  line-height: var(--m-lh-meta) !important;
  font-weight: var(--m-fw-regular) !important;
  color: rgba(75,85,99,0.62) !important;
}

/* Bigger avatars in notifications (mobile) */
body.app-notifications .notif-item{
  grid-template-columns: 44px 1fr auto !important;
}

body.app-notifications .notif-left{
  width: 44px !important;
  height: 44px !important;
}

/* Notifications: align avatar closer to left edge of 363 corridor */
body.app-notifications .notif-item{
  padding-left: 1px !important;
}

/* -------------------------
   Settings (mobile)
------------------------- */

body.app-settings .settings-wrap{
  width: 100% !important;
  max-width: 363px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* чтобы низ не залезал под bottom nav */
  padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
}

/* Page title: 1в1 как на других моб. страницах */
body.app-settings .settings-title{
  margin: 0 0 18px 0 !important;

  font-size: var(--m-fs-h1) !important;
  line-height: var(--m-lh-h1) !important;
  font-weight: var(--m-fw-semibold) !important;
  letter-spacing: -0.02em !important;

  color: var(--m-text-secondary) !important;
}

/* Section title (Account / Notifications / About / Security) */
body.app-settings .settings-section-title{
  margin: 0 0 10px 0 !important;

  font-size: var(--m-fs-h2) !important;
  line-height: var(--m-lh-h2) !important;
  font-weight: var(--m-fw-semibold) !important;
  letter-spacing: -0.02em !important;

  color: var(--m-text-secondary) !important;
}

/* EMAIL ADDRESS label */
body.app-settings .settings-field-label{
  font-size: var(--m-fs-meta) !important;
  line-height: var(--m-lh-meta) !important;
  font-weight: var(--m-fw-medium) !important;
  letter-spacing: -0.01em !important;
  color: rgba(75,85,99,var(--m-muted-opacity)) !important;
}

/* rows text (Likes / Comments / X / Website etc) */
body.app-settings .settings-row-title,
body.app-settings .settings-row-k{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body) !important;
  font-weight: var(--m-fw-regular) !important;
  letter-spacing: -0.01em !important;
  color: var(--m-text-secondary) !important;
}

/* 2col rows: desktop 180px слишком жирно для 363 */
body.app-settings .settings-row--2col{
  grid-template-columns: 110px 1fr !important;
  gap: 12px !important;
}

/* inline links */
body.app-settings .settings-link-inline,
body.app-settings .settings-link{
  font-size: var(--m-fs-body) !important;
  line-height: var(--m-lh-body) !important;
  font-weight: var(--m-fw-medium) !important;
}

/* -------------------------
   AUTH (onboarding) mobile
   corridor 363 + typography from mobile root
------------------------- */

body.auth .auth-shell{
  min-height: var(--vvh, 100vh);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* same corridor logic as app-shell */
  padding-left: max(4.85vw, env(safe-area-inset-left));
  padding-right: max(4.85vw, env(safe-area-inset-right));
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));

  box-sizing: border-box;
}

body.auth .auth-center{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.auth .auth-block{
  width: 100%;
  max-width: 363px;

  /* keep “air” inside the card on mobile */
  padding: 42px 22px;
  border-radius: 20px;
  box-sizing: border-box;
}

/* Logo + title: mobile tokens */
body.auth .auth-logo{
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.06em;
  margin: 0 0 10px;
}

body.auth .auth-title{
  margin: 0 0 26px;

  font-size: var(--m-fs-h1);
  line-height: var(--m-lh-h1);
  font-weight: var(--m-fw-semibold);
  letter-spacing: -0.02em;
}

/* Form elements use corridor width */
body.auth .auth-form{
  width: 100%;
  justify-items: stretch;
}

body.auth .auth-label,
body.auth .auth-input,
body.auth .auth-help,
body.auth .auth-error{
  width: 100% !important;
  max-width: 100% !important;
}

body.auth .auth-label{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
  font-weight: var(--m-fw-medium);
}

body.auth .auth-input{
  height: 44px;
  font-size: 16px !important; /* важно: иначе iOS Safari будет зумить */
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
}

body.auth .auth-help,
body.auth .auth-footnote{
  font-size: var(--m-fs-body);
  line-height: var(--m-lh-body);
  font-weight: var(--m-fw-regular);
  margin: 6px 0 8px !important; /* убрали десктопный огромный отступ */
}

body.auth .auth-error{
  font-size: var(--m-fs-meta);
  line-height: var(--m-lh-meta);
}

/* CTA button keeps desktop rules, but make it full width in the corridor */
body.auth .auth-cta{
  width: 100%;
  font-weight: var(--m-fw-bold);
  font-size: var(--m-fs-body);
}

/* -------------------------
   Loader mobile: hide progress bar, keep only logo
------------------------- */
body.auth-loader .loader-bottom{
  display: none !important;
}

/* make logo nicely centered with safe areas */
body.auth-loader .loader-shell{
  min-height: 100vh;
  padding-left: max(4.85vw, env(safe-area-inset-left));
  padding-right: max(4.85vw, env(safe-area-inset-right));
  padding-top: calc(16px + env(safe-area-inset-top));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

body.auth-loader .loader-logo{
  font-size: 70px !important;
  line-height: 1;
  letter-spacing: -0.06em;
}

/* -------------------------
   Auth (mobile) spacing fix
------------------------- */
body.auth .auth-form{
  gap: 27px !important; /* было 10px в style.css */
}

/* help не должен раздувать вертикальный ритм */
body.auth .auth-help{
  margin-top: -22px !important;
  margin-bottom: 2px !important;
}

/* ключевое: пустая ошибка не должна занимать место */
body.auth .auth-error{
  min-height: 0 !important;
  margin: 0 !important;
}

body.auth .auth-error:empty{
  display: none !important;
}

/* вес текста на Continue */
body.auth .auth-cta{
  font-weight: 500 !important; /* как в style.css */
}

/* -------------------------
   Profile Edit modal (mobile)
------------------------- */
@media (max-width: 520px){
  /* гарантируем центрирование именно этой модалки */
  body.app-profile #profileEditModal.modal{
    align-items: center !important;
    justify-content: center !important;
    padding-top: calc(16px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }

  /* панель должна влезать в экран */
  body.app-profile #profileEditModal .modal-panel.profile-edit-panel{
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    margin: 0 auto !important;
  }

  /* контейнер модалки */
  body.app-profile #profileEditModal .pe-modal{
    height: auto !important;
    overflow: auto !important;
    border-radius: 24px !important;

    /* чуть больше воздуха по бокам чем было */
    padding: 28px 18px 28px !important;
  }

  /* фикс: на мобилке нельзя держать 547px */
  body.app-profile #profileEditModal .pe-inner{
    width: 100% !important;
    margin: 22px auto 0 !important;
  }

  /* аватар чуть меньше, чтобы не давило контент */
  body.app-profile #profileEditModal .pe-avatar.pe-avatar-lg{
    width: 112px !important;
    height: 112px !important;
  }

  /* textarea чуть ниже, чтобы кнопка оставалась в зоне видимости */
  body.app-profile #profileEditModal .pe-textarea{
    height: 140px !important;
  }

  /* отступ снизу под кнопку как сверху под аватар, чтобы было визуально balanced */
  body.app-profile #profileEditModal .pe-footer{
    margin-top: 22px !important;
    padding-bottom: 22px !important;
  }

  /* на мобилке кнопка строго по ширине контейнера */
  body.app-profile #profileEditModal .pe-save{
    width: 100% !important;
    min-width: 0 !important;
  }

    /* Profile Edit: typography must come from mobile root tokens */
  body.app-profile #profileEditModal .pe-change-link{
    font-size: var(--m-fs-body) !important;
    line-height: var(--m-lh-body) !important;
    font-weight: var(--m-fw-semibold) !important;
  }

  body.app-profile #profileEditModal .pe-label{
    font-size: var(--m-fs-h2) !important;
    line-height: var(--m-lh-h2) !important;
    font-weight: var(--m-fw-semibold) !important;
    color: var(--m-text-secondary) !important;
  }

body.app-profile #profileEditModal .pe-input,
body.app-profile #profileEditModal .pe-textarea{
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: var(--m-fw-regular) !important;
  color: var(--m-text-secondary) !important;
}

body.app-profile #profileEditModal .pe-input::placeholder,
body.app-profile #profileEditModal .pe-textarea::placeholder{
  font-size: 16px !important;
  line-height: 22px !important;
  font-weight: var(--m-fw-regular) !important;
  color: rgba(75,85,99,0.55) !important;
}

  body.app-profile #profileEditModal .pe-save{
    font-size: var(--m-fs-button) !important;
    line-height: var(--m-lh-button) !important;
    font-weight: var(--btn-blue-weight) !important;
  }
}
}

@media (max-width: 900px){
  .clickable, [data-click], .post-card{
    -webkit-tap-highlight-color: transparent;
  }

  /* SPA: make the active view chain fill the viewport on mobile */
html, body{
  height: auto;
  min-height: 100dvh;
  background: var(--bg);
  touch-action: pan-y; /* Enable vertical touch scrolling on Android */
}

#spaRoot,
.spa-root,
.spa-view.is-active{
  height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
  min-height: 100%;
    height: 100dvh;
    touch-action: pan-y; /* Enable vertical touch scrolling on Android */
}

html.is-kbd .home-scroll{
  height: var(--vvh) !important;
}
}