@media (max-width: 640px){
    #nav{ flex-wrap:nowrap; padding:14px 18px; position:relative; }
    .logo .flip{ font-size:19px; }
    .logo .app{ font-size:9.5px; margin-top:6px; }
    .hamburger-btn{ display:flex; }
    .nav-mobile-controls{ display:flex; }
    .lang-switch-compact{ display:block; }
    .lang-switch-desktop{ display:none; }
    /* Иконки "избранное"/"кабинет" — рядом с переключателем языка в верхней
       панели (всегда на виду), а не внутри раскрывающегося меню. Их копии
       внутри .nav-links (для десктопа) на мобильном скрываются, чтобы не
       дублировались, когда меню открыто. */
    .nav-mobile-icon{ display:flex; width:32px; height:32px; }
    .nav-desktop-icon{ display:none; }
    .nav-right{
      display:none; position:absolute; top:100%; left:0; right:0; margin-top:1px;
      background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-card);
      padding:16px 18px; flex-direction:column; align-items:stretch; gap:14px; z-index:60;
    }
    .nav-right.mobile-open{ display:flex; }
    .nav-links{ flex-direction:column; align-items:flex-start; gap:14px; width:100%; }
    .nav-link{ font-size:15px; width:100%; padding:6px 0; }
    .heart-nav{ width:32px; height:32px; }
    .support-widget-btn{ width:46px; height:46px; right:14px; bottom:14px; }
    .support-widget-btn svg{ width:21px; height:21px; }
    .lang-switch button{ padding:5px 10px; font-size:11px; }

    /* Кнопка "Выйти" — сплошная кнопка (заливка, без рамки), как явно
       описано в П1-1 ТЗ_остатки.html; более ранний вариант с одной лишь
       верхней рамкой заменён на него. */
    .nav-logout-btn{
      display:block; width:100%; padding:12px 16px; margin-top:8px;
      border:none; border-radius:12px; background:var(--coral); color:#fff;
      font-weight:700; font-size:15px; text-align:center; cursor:pointer;
    }
    /* Вкладки личного кабинета на мобильном превращаются в горизонтальный
       скроллер (кнопки не помещаются в ширину экрана). Заменяем их на
       выпадающий список — занимает одну строку, ничего не обрезается. */
    .cab-tabs{
      display:block; overflow:visible; flex-wrap:unset;
      background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px; position:static;
    }
    .cab-tab{ display:none !important; }
    /* Подсказка над выпадающим списком разделов кабинета — тот же
       предупреждающий стиль, что уже используется в кабинете для других
       подсказок (см. .cab-rkn-badge/.cab-album-unsaved-hint), плюс
       треугольник-стрелка снизу, указывающий на сам список. */
    .cab-tab-select-hint{
      display:flex;
      align-items:center;
      gap:8px;
      position:relative;
      background:#FFF3E6;
      color:#B4530A;
      border:1px solid #FFD9AD;
      border-radius:10px;
      padding:10px 12px;
      font-size:12px;
      font-weight:600;
      line-height:1.4;
      margin-bottom:14px;
    }
    .cab-tab-select-hint::after{
      content:"";
      position:absolute;
      left:24px;
      bottom:-7px;
      width:0;
      height:0;
      border-left:7px solid transparent;
      border-right:7px solid transparent;
      border-top:7px solid #FFF3E6;
    }
    /* Мобильный переключатель вкладок кабинета (.cab-tabs-select) — сам
       <select> оставлен в разметке и по-прежнему обновляется/читается
       JS (switchCabTab()/rebuildCabTabsSelect() в js/cabinet-main.js) как
       раньше, но визуально скрыт: вместо системного выпадающего списка
       браузера показываем свой (тот же стиль сворачиваемого списка, что и
       у бокового меню раздела "Возможности" — .opp-side-toggle/.opp-side-list
       в css/opportunities-tabs.css), см. .cab-tab-toggle/.cab-tab-dropdown-list
       ниже и js/cabinet-tab-dropdown.js. */
    .cab-tab-select{ display:none; }
    .cab-tab-toggle{
      display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
      padding:8px 14px 8px 8px; border:none; background:transparent;
      font-family:inherit; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; text-align:left;
    }
    .cab-tab-toggle .cur{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
    .cab-tab-toggle .cur > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cab-tab-toggle .cab-tab-dd-ic{ width:30px; height:30px; }
    .cab-tab-toggle .caret{ width:16px; height:16px; color:var(--ink-soft); flex-shrink:0; transition:transform .2s ease; }
    .cab-tab-toggle.open .caret{ transform:rotate(180deg); }
    .cab-tab-dropdown-list{
      display:none; border-top:1px solid var(--border); margin-top:6px; padding-top:6px;
    }
    .cab-tab-dropdown-list.open{ display:block; }
    /* Иконка пункта — тот же приём, что и .opp-nav-ic в css/opportunities-tabs.css:
       квадрат var(--icon-tint) со скруглением, у активного пункта фон белый. */
    .cab-tab-dd-ic{
      width:36px; height:36px; border-radius:11px; background:var(--icon-tint);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .cab-tab-dd-ic svg{ width:18px; height:18px; }
    .cab-tab-dd-item{
      display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:7px 10px 7px 8px;
      border-radius:16px; border:none; background:transparent; font-family:inherit; font-size:14px;
      font-weight:700; color:var(--ink-soft); cursor:pointer; transition:.15s ease;
    }
    .cab-tab-dd-item:hover{ background:var(--bg); color:var(--ink); }
    .cab-tab-dd-item.active{ background:var(--violet-tint); color:#5847c9; }
    .cab-tab-dd-item.active .cab-tab-dd-ic{ background:#fff; }
    /* Кнопки "Перейти в профиль"/"Сохранить изменения" над кабинетом — на
       мобильном каждая на своей строке, во всю ширину экрана (переопределяет
       .cab-head-actions .btn{flex:1} из css/cabinet.css, где кнопки стоят
       рядом друг с другом). */
    .cab-head-actions{ flex-direction:column; align-items:stretch; }
    .cab-head-actions .btn{ flex:0 0 auto; width:100%; }
    /* "+ Добавить к портфолио" (см. .cab-quick-add-btn в css/cabinet.css,
       где она display:none по умолчанию) — стоит в .cab-head-actions над
       кнопкой "Сохранить изменения" и наследует .cab-head-actions .btn
       (width:100%) выше, показываем её только на мобилке: на десктопе
       кнопки в шапке и так все видны в ряд, отдельная кнопка там не нужна. */
    .cab-quick-add-btn{ display:flex; }
  }
  /* Совсем узкие экраны (~360px и уже) — той же ширины из @media(640px) уже
     впритык хватает благодаря компактному переключателю языка выше, но тут
     оставляем небольшой запас, чтобы иконки/переключатель/гамбургер точно
     не начали сжиматься и слипаться друг с другом. */
  @media (max-width: 380px){
    #nav{ padding:12px 14px; }
    .nav-mobile-controls{ gap:6px; }
    .nav-mobile-icon{ width:30px; height:30px; }
    .heart-nav{ width:30px; height:30px; }
    .hamburger-btn{ width:34px; height:34px; }
    .lang-toggle-btn{ height:30px; padding:0 8px; }
    .logo .flip{ font-size:17px; }
    .logo .app{ font-size:8.5px; margin-top:5px; }
  }
  @media (max-width: 880px){
    /* Высота навбара на этой ширине (см. #nav в css/nav.css, десктопный
       вариант padding, ещё не переопределённый — override на <=640px ниже)
       — нужна, чтобы посчитать high hero-блока "на весь экран" через
       calc(), а не через vh, который включал бы навбар внутрь и переполнял
       бы экран на лишние ~80px. */
    :root{ --hero-nav-h: 81px; }
    .landing-split{ grid-template-columns: 1fr; min-height:auto; }
    .landing-intro{
      /* Очень светло-голубой (вместо прежнего розово-сиреневого) — тот же
         принцип градиента (3 плавных тона), контраст текста (var(--ink)/
         var(--ink-soft), тёмные на светлом) не меняется, поэтому читаемость
         сохраняется. #E5EFFF — тот же голубой оттенок, что и --blue-tint в
         css/base.css, для консистентности с общей палитрой сайта. */
      background: linear-gradient(155deg, #E5EFFF 0%, #EFF6FF 55%, #F8FBFF 100%);
      padding:40px 24px 44px; text-align:center; align-items:center; overflow-y:visible;
      /* Hero на всю высоту экрана (ТЗ от 10 сентября): вычитаем высоту
         навбара (sticky, занимает своё место в потоке над этим блоком, см.
         css/nav.css), иначе 100dvh здесь дало бы на ~80px больше экрана и
         страницу пришлось бы лишний раз доскроллить. 100dvh, а не 100vh —
         на мобильных браузерах vh не учитывает скрывающуюся адресную
         строку и даёт скачущую/заниженную высоту. */
      min-height: calc(100dvh - var(--hero-nav-h));
      justify-content:center;
    }
    /* Супрематические фигуры мобильного hero (см. разметку в index.html) —
       статичный аналог курсора десктопа (.supr-rect в css/landing.css), та
       же палитра, но приглушённая непрозрачность и без анимации: здесь это
       фоновая декорация на весь экран, а не элемент, следующий за курсором.
       overflow:hidden у .landing-intro (базовое правило в css/landing.css)
       обрезает всё, что выходит за пределы по горизонтали, поэтому фигуры
       можно свободно "вылезать" за края. z-index:1 — ниже текста хиро
       (z-index:2 у .hero-eyebrow/.hero-tagline и z-index:2 у .auth-card),
       но выше самого фона. */
    .hero-supr-mobile{
      display:block; position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none;
    }
    .hs-rect{ position:absolute; mix-blend-mode:multiply; }
    .hs-rect--a{
      width:60%; height:16%; top:6%; left:-12%;
      background:#FF4D6D; opacity:0.16; transform:rotate(-14deg);
    }
    .hs-rect--b{
      width:34%; height:34%; top:-8%; right:-10%;
      background:#2148C2; opacity:0.12; transform:rotate(12deg);
    }
    .hs-rect--c{
      width:70%; height:10%; bottom:14%; right:-16%;
      background:#17181C; opacity:0.08; transform:rotate(9deg);
    }
    .hs-rect--d{
      width:22%; height:22%; bottom:-6%; left:-6%;
      background:#F2C230; opacity:0.16; transform:rotate(-20deg);
    }
    /* Правка от 10 сентября: "Твои проекты. Твои клиенты. Твоя команда"
       раньше выглядела как обычный маленький эйбрау (12px, JetBrains Mono,
       uppercase — тот же стиль, что и "новые возможности" над заголовками
       промо-блоков) и на мобильной ширине переносилась на 2 некрасивые
       строки где попало (второе слово повисало в одиночестве на пустой
       строке). Вместо мелкого лейбла — полноценный мини-заголовок фирменным
       дисплейным шрифтом Unbounded (тот же, что у h1/h2 по всему сайту, см.
       css/base.css), крупнее и с обычным регистром, а не капсом. Перенос на
       3 строки (по одной фразе на строку) обеспечен не угадыванием ширины
       экрана, а комбинацией двух вещей: неразрывные пробелы ВНУТРИ каждой
       фразы ("Твои\u00A0проекты." и т.п., см. hero_eyebrow в
       js/data-i18n.js) не дают браузеру перенести строку посреди фразы, а
       max-width здесь — меньше ширины любых двух фраз подряд, но больше
       ширины одной — так перенос гарантированно происходит ровно после
       каждой точки, независимо от точной ширины экрана телефона. */
    .hero-eyebrow{
      display:block; font-family:'Unbounded',sans-serif; font-weight:800;
      font-size:22px; line-height:1.32; text-transform:none; letter-spacing:-0.01em;
      color:var(--ink); max-width:230px; margin:0 auto; gap:0;
    }
    .hero-eyebrow::before{ display:none; }
    .hero-tagline{ max-width:360px; margin:16px auto 0; }
    .intro-glow{ display:none; }
    .landing-visual{ display:none; }
    /* ---- Мобильный вход в форму (ТЗ от 10 сентября) ----
       .auth-card по умолчанию скрыта — вместо неё виден .hero-mobile-cta
       (кнопка "Создать портфолио" + ссылка "Войти", см. index.html).
       openMobileAuthCard() (js/nav-and-auth-entry.js) добавляет
       .mobile-auth-open на .landing-intro по клику — правила ниже меняют
       видимость местами. На десктопе этот @media не действует, там форма
       всегда видна как раньше. */
    .hero-mobile-cta{
      display:block; width:100%; max-width:320px; margin:28px auto 0;
      /* position+z-index — иначе блок как непозиционированный элемент
         красился бы ДО супрематических фигур (.hero-supr-mobile,
         z-index:1) в порядке отрисовки и оказался бы под ними, несмотря
         на то что z-index у фигур всего 1 (см. правило .hero-supr-mobile
         выше в этом файле). */
      position:relative; z-index:2;
    }
    /* .hero-cta (кнопка) скрыта отдельным правилом .hero-cta{display:none}
       в css/landing.css (задел на будущее, оставшийся неиспользованным до
       этого ТЗ) — display:block здесь на обёртке .hero-mobile-cta саму
       кнопку внутри не включает, это отдельный селектор, возвращаем явно. */
    .hero-cta{ display:block; }
    .hero-cta-login{
      /* Отступ снизу (ТЗ от 10 сентября) — раньше эта строка была
         последним элементом .hero-mobile-cta без нижнего зазора, поэтому
         на full-screen hero (см. .landing-intro выше) визуально "прилипала"
         к нижнему краю экрана. margin-bottom работает и в EN-версии — тот
         же блок и класс, меняется только текст через data-i18n. */
      margin:14px 0 6px; text-align:center; font-size:13px; color:var(--ink-soft);
    }
    .hero-cta-login .link{ color:var(--coral); font-weight:700; cursor:pointer; }
    .auth-card{
      display:none;
      text-align:left; max-width:none; margin:32px -24px 0; background:var(--surface);
      border-radius:24px 24px 0 0; padding:32px 24px 48px; box-shadow:0 -12px 30px -20px rgba(0,0,0,0.18);
    }
    .landing-intro.mobile-auth-open .auth-card{ display:block; }
    .landing-intro.mobile-auth-open .hero-mobile-cta{ display:none; }
    .swipe-zone{ grid-template-columns: 1fr; text-align:center; }
    .swipe-copy p{ margin:0 auto; }
    .swipe-copy .hint{ justify-content:center; }
    .p-header{ grid-template-columns:1fr; text-align:center; }
    .p-promo{ margin:0 auto; }
    .p-meta{ justify-content:center; }
  }
  @media (max-width: 640px){
    /* На этой ширине навбар компактнее (padding 14px вместо 20px, логотип
       мельче — см. правила #nav/.logo в первом @media(max-width:640px)
       выше в этом файле), поэтому пересчитываем высоту full-screen hero
       (--hero-nav-h задан в @media(max-width:880px) выше) — этот блок
       идёт по файлу ПОСЛЕ 880px-блока, поэтому при равной специфичности
       здесь корректно переопределяет значение для узких экранов, иначе
       на маленьких телефонах остался бы лишний зазор ~16px внизу
       hero-блока, посчитанный по десктопной высоте навбара. */
    :root{ --hero-nav-h: 65px; }
    /* Строки "инпут + кнопка" в кабинете (навыки/клиенты/теги/медиа-ссылки/
       приглашение отзыва и т.п.) на мобильном ширине не помещаются в одну
       линию — кнопка со текстом внутри сжимается и выглядит криво. Переносим
       кнопку на отдельную строку на всю ширину везде, где встречается этот
       паттерн, вместо точечных правок под каждый конкретный блок. */
    .cab-inline-add{ flex-direction:column; align-items:stretch; }
    .cab-inline-add input{ width:100%; }
    .cab-inline-add .cab-add-btn{ width:100%; }
    .cab-ask-row .cab-inline-add{ min-width:0; }
    /* Тот же паттерн "инпут + кнопка" под другими классами (галерея —
       добавление соавтора, проекты — добавление медиа) — не попадали под
       правило выше, потому что используют свои названия классов. */
    .cab-gallery-inline-add{ flex-direction:column; align-items:stretch; }
    .cab-gallery-inline-add input[type="text"]{ width:100%; min-width:0; }
    .cab-gallery-inline-add .cab-gallery-mini-btn{ width:100%; justify-content:center; padding:12px; }
    .cab-tl-media-add{ flex-direction:column; align-items:stretch; }
    .cab-tl-media-add input[type="text"]{ width:100%; min-width:0; }
    /* Кнопки загрузки в медиагалерее ("Загрузить файл…" / "Загрузить mp3")
       переполняли строку на мобильном из-за встроенного width:auto — теперь
       это управляется классом .cab-gallery-upload-btn ниже, а не инлайн-стилем. */
    .cab-gallery-add-row{ flex-direction:column; }
    .cab-gallery-upload-btn{ width:100%; }
    /* Таблица "Настройка уведомлений" (кабинет -> Настройки) — на мобильном
       колонки были жёстко фиксированы (flex:0 0 110px, без сжатия), из-за
       чего строка целиком не помещалась в ширину экрана: заголовок колонок
       обрезался по краю viewport, а название уведомления сжато переносилось
       на 2-3 строки впритык к колонкам. Заставляем название/заголовок всегда
       занимать свою строку целиком (flex-basis:100%), тогда чекбоксы (и их
       заголовки "В кабинете"/"На e-mail") сами переносятся на строку ниже.
       Ширина этих двух колонок должна СОВПАДАТЬ у заголовка и у каждой
       строки — иначе текст заголовка (широкий) и чекбокс (узкий) получают
       разную ширину колонки и съезжают друг относительно друга по
       горизонтали, как было при flex:0 0 auto. */
    .notif-settings-head, .notif-settings-row{
      flex-wrap:wrap; row-gap:8px;
    }
    .notif-settings-head-type, .notif-settings-row-label{ flex:1 1 100%; }
    .notif-settings-head-col, .notif-settings-row-col{
      flex:0 0 96px; text-align:left; justify-content:flex-start;
    }
  }

  /* На планшете/десктопе поле загрузки промо-медиа переезжает наверх, в тот
     же ряд, что и аватарка: аватарка — по левому краю, промо-медиа — по
     правому. На мобильном (см. блок max-width:640px выше) промо-медиа
     остаётся на прежнем месте — ниже полей группы/подгруппы специализации,
     как и было, — поэтому переставляем элементы не в HTML (это сдвинуло бы
     их и на мобильном), а только через flex-порядок, который действует
     исключительно при этой ширине экрана. */
  @media (min-width: 641px){
    .cab-card-main-identity{
      display:flex;
      flex-wrap:wrap;
      align-items:flex-start;
      row-gap:26px;
      column-gap:24px;
    }
    .cab-card-main-identity > .cab-avatar-row{
      order:1;
      flex:0 0 auto;
      margin-bottom:0;
    }
    .cab-card-main-identity > .cab-promo-field{
      order:2;
      flex:0 0 auto;
      margin-left:auto;
      margin-bottom:0;
    }
    .cab-card-main-identity > .field-row,
    .cab-card-main-identity > .field:not(.cab-promo-field),
    .cab-card-main-identity > .cab-subblock{
      order:3;
      flex:1 1 100%;
    }
  }