/* ============================================================================
   MENTAL TICKET — таблица стилей проекта (Feed / Profile / Post / Explorer / Create)
   ----------------------------------------------------------------------------
   Назначение файла: единый источник стилей и документация изменений
   относительно ИСХОДНЫХ html ("плохая имплементация"). Здесь описано ЧТО
   поменялось в стилях и ГДЕ/КАК изменилась разметка, чтобы перенести правки
   в боевую вёрстку (Bootstrap+Vue).

   ── ГЛАВНЫЕ СТИЛЕВЫЕ РЕШЕНИЯ (отличия от исходника) ─────────────────────────
   1. ДИЗАЙН-ТОКЕНЫ. Введён полный набор CSS-переменных из palette.json
      (neutral / accent / accentcard / semantic / card-collection). Раньше
      цвета были захардкожены — теперь всё через var(--…). Менять палитру
      нужно в :root, а не по месту.
   2. ИНПУТЫ — БЕЗ РАМОК. Состояния различаются только заливкой:
      default = bg-secondary (#F5F5F5), hover/focus = bg-tertiary (#EBEBE6).
      Никаких border. (В исходнике были рамки.)
   3. КНОПКИ — БЕЗ РАМОК. primary = accent заливка; secondary = bg-secondary
      заливка, тёмный текст, без border, hover = neutral-200.
   4. КАРТОЧКИ КОЛЛЕКЦИЙ. Заголовок — НАЧЕРТАНИЕ REGULAR (400), не bold.
      Цвет заголовка: белый (text-inverse) на тёмной/фото-карточке, тёмный на
      accent-карточке. Подписи (tour/festival/city·year) — серые #D8D8D8
      (новый токен text.inverse-300). На accent-карточке всё тёмное.
   5. БРЕЙКПОИНТЫ сетки карточек:
        ≥1025px        → 3 колонки
        601–1024px     → 2 колонки (сюда попадает iPad mini в обеих ориентациях)
        ≤600px         → 1 колонка + мобильная шапка/саммари, gutter 16px
      Десктоп-gutter = 34px, мобильный = 16px (переменная --gutter).
   6. FULL-BLEED. Слайдер и широкие ряды карточек выходят на всю ширину экрана
      через .full-bleed (см. секцию UTILITIES). Колонки контента 468px
      (.post-col/.exp-col/.cr-col) БЕЗ собственного горизонтального паддинга —
      боковой отступ даёт только .main (иначе был двойной паддинг).
   7. РЕЙТИНГ. Плашка фикс. ширины 96px, цифра 55px, цветовая шкала:
        Mental→accent.500, 9→accent.400, 8→accent.300,
        7→accentcard.7, 6→.6, 5→.5, 4→.4, 3→.3, 2→.2, 1→accentcard.1.
   8. ЧИПСЫ-ФИЛЬТРЫ: default #F5F5F5 / hover #EBEBE6 / pressed прозрачный /
      focus — accent-обводка. Выбранный = значение + крестик (сброс по крестику,
      открытие настройки по клику на тело чипса).
   9. SHEET/MODAL. Один компонент: на мобайле — bottom-sheet снизу, на десктопе
      (≥601px) — центрированная модалка (стиль логина). Заголовок 70px.
      Радио-выбор помечается текстом "Selected"; мультивыбор — чекбоксом с ✓
      и кнопкой Apply (.sheet.multi). Клик по оверлею / Esc — закрытие.
   10. ДУБЛЬ ТАЙТЛА. Крупный заголовок страницы (.exp-title/.cr-title) скрыт на
       мобайле (≤600), т.к. название уже есть в шапке (.mfeedtitle). На десктопе
       показан.

   ── КЛЮЧЕВЫЕ ИЗМЕНЕНИЯ РАЗМЕТКИ (что переименовать/перестроить) ─────────────
   • Контейнер страницы: <div class="main"> (max-width:1440; padding:0 var(--gutter)).
   • Шапка: в DOM две версии — десктоп <div class="htop mnone">…глобальное меню…,
     мобайл <div class="mmobi"> ← back/лого + <div class="mfeedtitle">Название</div>
     + Menu. Переключаются медиазапросом, обе должны присутствовать в разметке.
   • КАРТОЧКА:
       <div class="mt-feed-post">
         <div class="mt-feed-post-header"><span class="mt-feed-post-user">…</span>
              <span class="mt-feed-post-time">…</span></div>          (опц., нет в своём профиле)
         <div class="mt-feed-card [feed-card-yelow|feed-card-img]">
           <div class="mt-feed-card-overlay">
             <div class="mt-feed-card-top"><span class="mt-feed-card-title">…</span>
                  <span class="mt-feed-card-badge">9</span></div>
             <div class="mt-feed-wrapper-1">
               <div class="mt-feed-card-info"> 3×<div class="mt-feed-card-info-line">…</div></div>
               <div class="mt-feed-card-actions"> ♥ / 💬 </div>
       …  (вариант фон: feed-card-yelow = accent, feed-card-img = фото+градиент, по умолч. тёмная)
   • Узкая колонка контента (Post/Explorer/Create): <div class="post-col|exp-col|cr-col">
     max-width:468px; БЕЗ padding (gutter берётся у .main).
   • Полноширинный ряд: <div class="full-bleed"><div class="main"><div class="mt-feed-feed">…карточки…</div></div></div>
   • ЧИПС: <span class="chip [on]"><button class="chip__main">label/▾ или значение</button>
                                  [<button class="chip__x">✕</button>]</span>
   • SHEET/MODAL: <div class="ov"></div>
                  <div class="sheet [multi] [open]"><div class="sheet__handle"></div>
                    <h3 class="sheet__title">…70px…</h3>
                    <input class="sheet__search">
                    <div class="sheet__list"> N×<button class="sheet__row [sel]">
                        текст + (<span class="sheet__ind">Selected</span> | <span class="sheet__box">✓</span>)
                      </button></div>
                    <button class="sheet__apply">Apply</button></div>
   • ФОРМА СОЗДАНИЯ: .cr-tabs/.cr-tab (segmented) · .cr-field (инпут) ·
     .cr-stepper (год +/−) · .cr-rate>button[data-v="1..9|Mental"] (выбор оценки) ·
     .cr-spoiler(.open)>.cr-spoiler__head + .cr-spoiler__body (Additional info) ·
     .cr-photos>.cr-photo(draggable, .cover, .rm) (загрузка+DnD, порядок=порядок в слайдере) ·
     .cr-city-wrap>input.cr-city + .cr-suggest (автоподсказка городов от 2 букв) ·
     .cr-swatches>.cr-swatch(.sel) (цвет карточки, тёмный по умолчанию) ·
     .cr-actions>.cr-btn--primary/.cr-btn--secondary · .toast.

   ── СЕГМЕНТЕД-ТАБЫ ─────────────────────────────────────────────────────────
   .mt-tabs (профиль) и .cr-tabs (создание): общий контейнер-трек с заливкой
   bg-secondary, внутри равные сегменты; активный = neutral-900 + белый текст.
   ============================================================================ */

/* ============================================================================
   ШРИФТЫ
   В демо-HTML шрифты были вшиты как base64 (TRIAL-версии). В проде замените
   на лицензированные .woff2 и положите рядом (например, /fonts/...).
   - ABC Asfalt Compressed  — дисплейный/акцидентный (заголовки, цифры рейтинга,
     слово "Mental", крупные слова в футере). Очень узкий (condensed).
   - ABC Monument Grotesk   — основной текст (body, инпуты, подписи).
   ============================================================================ */
@font-face{font-family:'ABC Asfalt Compressed';
  src:url('font/ABCAsfalt-CompressedLight-Trial.woff') format('woff');
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:'ABC Monument Grotesk';
  src:url('fonts/ABCMonumentGroteskCyrillic-Regular-Trial.woff') format('woff');
  font-weight:400 600;font-style:normal;font-display:swap}

/* ===== TOKENS (palette.json) =============================================== */
:root{
  --neutral-0:#FFFFFF;--neutral-50:#F5F5F5;--neutral-100:#EBEBE6;--neutral-200:#DDDDD8;
  --neutral-300:#D8D8D8;--neutral-400:#BFBFBF;--neutral-500:#8E8E8E;--neutral-600:#6B6B6B;
  --neutral-700:#3C3C3C;--neutral-800:#2A2A2A;--neutral-900:#1E1E1E;
  --accent-300:#F0FF7A;--accent-400:#E8FF4D;--accent-500:#E2FD34;--accent-600:#CDE52E;--accent-700:#A8BA25;
  --accentcard-1:#FCFEEE;--accentcard-2:#F8FDE0;--accentcard-3:#F3FBD0;--accentcard-4:#EDF9BE;--accentcard-5:#E6F7A8;
  --accentcard-6:#DCF58C;--accentcard-7:#D1F16D;

  --text-primary:var(--neutral-900);--text-secondary:var(--neutral-700);
  --text-tertiary:var(--neutral-500);--text-inverse:var(--neutral-0);--text-inverse-300:var(--neutral-300);--text-accent:var(--accent-700);
  /* card-collection (palette.json) */
  --card-title:var(--text-inverse);--card-label:var(--text-inverse-300);
  --card-rate-accent:var(--accent-500);--card-rate-primary:var(--text-primary);
  --card-bg-accent:var(--accent-500);--card-bg-dark:var(--neutral-900);
  --bg-primary:var(--neutral-0);--bg-secondary:var(--neutral-50);--bg-tertiary:var(--neutral-100);
  --border-default:var(--neutral-300);--border-subtle:var(--neutral-100);
  --accent-bg:var(--accent-500);--accent-fg:var(--neutral-900);--accent-hover:var(--accent-600);--accent-active:var(--accent-700);

  --font-display:"ABC Asfalt Compressed","Arial Narrow","Roboto Condensed","Helvetica Neue",sans-serif;
  --font-body:"ABC Monument Grotesk","Helvetica Neue","Inter",Arial,sans-serif;

  --container:1440px;--gutter:34px;--grid-gap:16px;--header-h:88px;
}

/* ===== RESET ============================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-primary);
  line-height:1.4;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img,video,svg{display:block;max-width:100%}

/* ===== HEADER ============================================================= */
.head{position:sticky;top:0;z-index:40;background:var(--bg-primary);
  border-bottom:1px solid transparent;transition:border-color .2s ease}
.head.scrolled{border-bottom-color:var(--border-subtle)}
.hblock{display:contents}

.htop{height:var(--header-h);display:flex;align-items:center;padding:0 var(--gutter)}
.hwrapper{width:100%;max-width:var(--container);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px}

.htop .menu ul{display:flex;align-items:center;gap:28px}
.htop .menu a{font-size:16px;line-height:16px;white-space:nowrap}
.htop .menu a:hover{color:var(--text-accent)}
/* первый пункт — декоративный бренд */
.htop>.hwrapper>.menu ul li:first-child a{font-family:var(--font-display);font-style:italic;font-size:22px}

.hleft{display:flex;align-items:center;gap:24px}
.hss .menu ul{display:flex;gap:14px}
.hss .menu a{font-size:16px;line-height:16px}
.hlogo{display:flex;align-items:center}

/* mobile bar */
.mmobi{height:var(--header-h);display:none;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);gap:12px}
.mmobi .hlogo{width:62px;height:30px;background:var(--accent-500);color:var(--accent-fg);
  font-family:var(--font-display);font-size:12px;letter-spacing:.5px;line-height:1;
  display:flex;align-items:center;justify-content:center;text-align:center}
.mmenu{font-size:16px}
.mfeedtitle{font-family:var(--font-display);font-size:30px;line-height:1}

/* ===== MAIN / PAGE ======================================================== */
.main{max-width:var(--container);margin:0 auto;}
.main .main{
  padding:0px;
}
.main .full-bleed .main{
  padding:16px;
}


/* ----- feed header (Feed title + stats + Login) -------------------------- */
.mt-feed-header{text-align:center;padding:56px 0 40px}
.mt-feed-title{font-family:var(--font-display);font-size:64px;line-height:1;letter-spacing:1px}
.mt-feed-meta{margin:28px auto 0;display:flex;align-items:center;justify-content:space-between;
  gap:16px;width:calc((100% - 2*var(--grid-gap))/3)}
.mt-feed-stats{display:flex;flex-direction:column;gap:6px;text-align:left}
.mt-feed-stats span{font-size:14px;line-height:20px;color:var(--text-tertiary)}
.mt-feed-stats b{color:var(--text-primary);font-weight:600;margin-left:6px}

.mt-feed-btn-profile{display:inline-flex;align-items:center;justify-content:center;height:40px;
  padding:0 22px;border-radius:8px;font-size:14px;line-height:14px;font-weight:600;white-space:nowrap;
  background:var(--accent-bg);color:var(--accent-fg);transition:background-color .15s ease}
.mt-feed-btn-profile:hover{background:var(--accent-hover)}
.mt-feed-btn-profile:active{background:var(--accent-active)}
/* secondary variant (mobile "My profile") */
.mt-feed-btn-profile-secondary{background:var(--bg-secondary);color:var(--text-primary)}
.mt-feed-btn-profile-secondary:hover{background:var(--neutral-200)}

/* mobile summary row */
.mt-feed-summary{display:none;align-items:center;justify-content:space-between;
  padding:16px 0 20px;gap:16px}

/* ----- feed grid --------------------------------------------------------- */
.mt-feed-feed{display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--grid-gap);row-gap:32px;padding-bottom:64px}

.mt-feed-post-header{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px}
.mt-feed-post-user{font-size:16px;line-height:16px;font-weight:600}
.mt-feed-post-user:hover{color:var(--text-accent);cursor:pointer}
.mt-feed-post-time{font-size:14px;line-height:20px;color:var(--text-tertiary);white-space:nowrap}

/* ----- card -------------------------------------------------------------- */
.mt-feed-card{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:pointer;border-radius:8px;
  background:var(--card-bg-dark);color:var(--card-title);background-size:cover;background-position:center}
.mt-feed-card.feed-card-yelow{background:var(--card-bg-accent);color:var(--neutral-900)}
/* legibility gradient on photo cards only */
.mt-feed-card.feed-card-img::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(30,30,30,0) 45%,rgba(30,30,30,.85) 100%)}

.mt-feed-card-overlay{position:absolute;inset:0;z-index:2;padding:16px;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.mt-feed-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.mt-feed-card-title{font-size:20px;line-height:24px;font-weight:400;max-width:52%}
.mt-feed-card-badge{font-family:var(--font-display);font-size:80px;line-height:.78;
  color:var(--card-rate-accent);white-space:nowrap;text-align:right;flex:none}
.feed-card-yelow .mt-feed-card-badge{color:var(--card-rate-primary)}
.mt-feed-card-badge:empty{display:none}

/* bottom block: info + actions */
.mt-feed-wrapper-1{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mt-feed-card-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.mt-feed-card-info-line{font-size:16px;line-height:22px;color:var(--card-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-feed-card-info-line:empty{display:none}
.feed-card-yelow .mt-feed-card-info-line{color:var(--neutral-900)}

.mt-feed-card-actions{display:flex;align-items:center;gap:14px;flex:none}
.mt-feed-card-actions .act{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:20px}
.mt-feed-card-actions svg{width:18px;height:18px}
.mt-feed-card-actions .act:hover{opacity:.7}

/* ===== BOTTOM NAV (fixed pill) =========================================== */
.bottom-nav{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;
  height:56px;border-radius:8px;background:var(--neutral-0);padding:4px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 24px rgba(30,30,30,.14),0 1px 2px rgba(30,30,30,.10)}
.bottom-nav .nav-item{width: stretch;height:48px;border-radius:8px;background:var(--neutral-50);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .15s ease}
.bottom-nav .nav-item:hover{background:var(--neutral-200)}
.bottom-nav .nav-item.active{background:var(--accent-500)}
.bottom-nav .nav-item.active:hover{background:var(--accent-600)}
.bottom-nav .nav-item svg{width:24px;height:24px}
.bottom-nav .nav-item svg path,.bottom-nav .nav-item svg circle{stroke:var(--neutral-900);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
/* selected page → filled icon */
.bottom-nav .nav-item.is-active svg path,.bottom-nav .nav-item.is-active svg circle{fill:var(--neutral-900)}

/* ===== FOOTER ============================================================= */
.footer{background:#e2fd34;color:var(--neutral-900);
  padding:28px var(--gutter) 64px;overflow:hidden}
.fcontainer{max-width:var(--container);margin:0 auto}
.ftop{display:flex;align-items:center;justify-content:space-between;font-size:14px;line-height:20px}
.ftop .fmail{display:flex;gap:18px}
.ftop a:hover{opacity:.6}
.fmenu .menu ul{display:flex;gap:22px}

.fpmenu{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.fpblock a{font-family:var(--font-display);font-weight:700;line-height:.86;
  font-size:clamp(56px,9vw,128px);display:inline-block}
.fpblock a:hover{opacity:.6}
.fplogo{text-align:center;font-family:var(--font-display);font-size:32px;letter-spacing:1px;margin:14px 0}

/* ===== RESPONSIVE ========================================================= */
@media (max-width:1024px){.mt-feed-feed{grid-template-columns:repeat(2,1fr)}
  .mt-feed-meta{width:calc((100% - var(--grid-gap))/2)}}

@media (max-width:600px){
  :root{--gutter:16px}
  .htop.mnone{display:none}
  .mmobi{display:flex}
  .mt-feed-header{display:none}
  .mt-feed-summary{display:flex}
  .mt-feed-feed{grid-template-columns:1fr;row-gap:24px}
  .fpblock a{font-size:clamp(40px,13vw,96px)}
}
@media (min-width:601px){.mt-feed-summary{display:none}.mmobi{display:none}}

:focus-visible{outline:2px solid var(--accent-700);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============================================================================
   UTILITIES
   ----------------------------------------------------------------------------
   .full-bleed — растянуть блок на всю ширину экрана из колонки с паддингами.
   ВАЖНО (это была главная ошибка в исходнике): элемент с .full-bleed должен
   быть ПРЯМЫМ потомком .main (или другого центрированного контейнера) и НЕ
   должен получать свойство `margin` шорткатом — он сбросит margin-left и блок
   снова "уедет" под паддинг. Менять только margin-bottom/top по отдельности.
   Применяется к: слайдеру на странице поста и к рядам карточек "Other user
   review" / результатов Explorer (обёртка <div class="full-bleed"><div class="main">…).
   ============================================================================ */
.full-bleed{width:100vw;margin-left:calc(50% - 50vw)}

/* ===== PROFILE =========================================================== */
.mback{display:flex;align-items:center;color:var(--text-primary)}
.mback svg{width:26px;height:26px}
.mt-prof-name{display:none}
.mmobi .mfeedtitle{flex:1;text-align:center}

.mt-prof-info{display:flex;flex-direction:column;gap:8px;padding:20px 0}
.mt-prof-row{display:flex;gap:8px;font-size:16px;line-height:22px}
.mt-prof-row .lbl{color:var(--text-tertiary); cursor:pointer;}
.mt-prof-row .val{color:var(--text-primary); cursor:pointer; font-weight: 600;}

.mt-prof-actions{display:flex;gap:12px;padding-bottom:20px}
.mt-prof-actions .mt-feed-btn-profile{height:48px;flex:1}
.mt-prof-actions .mt-btn-icon{flex:none;width:48px;padding:0;letter-spacing:2px}

.mt-divider{border:none;border-top:1px solid var(--border-subtle);margin:0 0 20px}

.mt-tabs{display:flex;gap:4px;padding:4px;background:var(--bg-secondary);border-radius:8px;margin-bottom:16px}
.mt-tab{flex:1;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;font-size:14px;line-height:14px;font-weight:600;white-space:nowrap;
  background:transparent;color:var(--text-primary);
  transition:background-color .15s ease,color .15s ease}
.mt-tab:hover:not(.active){background:var(--neutral-200)}
.mt-tab.active{background:var(--neutral-900);color:var(--text-inverse)}

/* input — состояния из palette.json -> component.input (default/hover/focus) */
.mt-search{position:relative;margin-bottom:24px}
.mt-input{width:100%;height:48px;padding:0 44px 0 16px;border-radius:8px;font-size:16px;
  background:var(--bg-secondary);border:none;color:var(--text-tertiary);
  font-family:var(--font-body);transition:background-color .15s ease,color .15s ease}
.mt-input::placeholder{color:var(--text-tertiary)}
.mt-input:hover{background:var(--bg-tertiary);color:var(--text-secondary)}
.mt-input:focus{outline:none;background:var(--bg-tertiary);color:var(--text-primary)}
.mt-search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;display:none;align-items:center;justify-content:center;color:var(--text-tertiary)}
.mt-search-clear svg{width:18px;height:18px}
.mt-search.has-text .mt-search-clear{display:flex}

/* empty states (mockups 15 и 22) — снять display:none чтобы показать */
.mt-empty{display:none;background:var(--bg-secondary);border-radius:8px;padding:36px 24px;text-align:center;margin-bottom:24px}
.mt-empty-title{font-size:25px;line-height:1.15;font-weight:600;margin-bottom:10px}
.mt-empty-text{font-size:16px;line-height:24px;color:var(--text-tertiary);max-width:340px;margin:0 auto 22px}
.mt-empty .mt-feed-btn-profile{display:inline-flex}
.mt-empty-search{background:var(--bg-secondary);border-radius:8px;
  padding:64px 24px;text-align:center;font-size:20px;color:var(--text-secondary)}

@media (min-width:601px){
  .mt-prof-top{max-width:360px;margin:0 auto}
  .mt-prof-name{display:block;font-family:var(--font-display);font-size:70px;line-height:1;
    text-align:center;padding:40px 0 8px}
}

/* ===== POST (COLLECTION) PAGE ============================================= */
.post-col{max-width:468px;margin:0 auto;padding:0}
/* .full-bleed → см. секцию UTILITIES */

.post-meta{display:flex;align-items:center;justify-content:space-between;
  font-size:14px;line-height:20px;color:var(--text-tertiary);padding-top:24px}
.post-meta .posted{color:var(--text-primary)}
.post-title{font-size:28px;line-height:1.15;text-align:center;font-weight:400;margin:14px 0 18px}

/* ----- slider (full-bleed auto marquee) ----- */
.slider{overflow:hidden;cursor:grab;user-select:none;margin-bottom:18px}
.slider:active{cursor:grabbing}
.slider__track{display:flex;gap:24px;width:max-content;will-change:transform}
.slider__slide{height:60vh;aspect-ratio:340/572;flex:none;border-radius:8px;overflow:hidden;
  background-size:cover;background-position:center}

/* ----- chips ----- */
.mt-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.mt-tag{height:32px;padding:0 12px;display:inline-flex;align-items:center;border-radius:8px;
  font-size:14px;line-height:14px;background:var(--bg-secondary);color:var(--text-primary);
  cursor:pointer;transition:background-color .12s ease}
.mt-tag:hover{background:var(--bg-tertiary)}
.mt-tag:active{background:transparent}

/* ----- user rate ----- */
.mt-user-rate-section{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 0 4px}
.mt-user-rate-title{font-size:25px;line-height:1.15;font-weight:400}
.rate{display:inline-flex;align-items:center;justify-content:center;width:96px;height:60px;
  border-radius:8px;font-family:var(--font-display);font-size:55px;line-height:.9;letter-spacing:.5px;
  color:var(--neutral-900);flex:none;overflow:hidden}
.rate.r10{background:var(--accent-500)} .rate.r9{background:var(--accent-400)} .rate.r8{background:var(--accent-300)}
.rate.r7{background:var(--accentcard-7)} .rate.r6{background:var(--accentcard-6)} .rate.r5{background:var(--accentcard-5)}
.rate.r4{background:var(--accentcard-4)} .rate.r3{background:var(--accentcard-3)} .rate.r2{background:var(--accentcard-2)}
.rate.r1{background:var(--accentcard-1)}

/* ----- review ----- */
.mt-review-section{padding:18px 0 8px}
.mt-review-title{font-size:25px;line-height:1.15;font-weight:400;margin-bottom:12px}
.mt-review-text p{font-size:16px;line-height:24px;color:var(--text-primary);margin-bottom:14px}

/* ----- comments ----- */
.cmt-section{padding:24px 0 8px}
.cmt-head{display:flex;align-items:baseline;justify-content:space-between;
  border-bottom:1px solid var(--border-subtle);padding-bottom:14px}
.cmt-head h2{font-size:25px;line-height:1.15;font-weight:400}
.cmt-count{font-size:25px;color:var(--text-tertiary)}

.cmt-input-wrap{margin:16px 0 24px;border:1px solid var(--border-default);border-radius:12px;
  padding:12px 14px;background:var(--bg-primary);
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s ease,padding .26s ease,border-color .2s ease,background-color .2s ease}
.cmt-input-wrap .who{font-size:14px;line-height:18px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.cmt-field{display:flex;align-items:flex-end;gap:10px}
.cmt-textarea{flex:1;border:none;outline:none;resize:none;background:transparent;
  font-family:var(--font-body);font-size:16px;line-height:24px;color:var(--text-primary);
  max-height:168px;min-height:24px;overflow-y:hidden}
.cmt-textarea::placeholder{color:var(--text-tertiary)}
.cmt-send{display:none;width:36px;height:36px;border-radius:8px;background:var(--accent-500);
  flex:none;align-items:center;justify-content:center}
.cmt-send svg{width:20px;height:20px}
.cmt-input-wrap.has-text .cmt-send{display:flex}
.cmt-input-wrap.has-text .cmt-textarea{overflow-y:auto}

.cmt-list{display:flex;flex-direction:column}
.cmt{padding:14px 0;border-bottom:1px solid var(--border-subtle)}
.cmt-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.cmt-user{font-size:14px;line-height:18px;font-weight:600}
.cmt-date{font-size:14px;line-height:18px;color:var(--text-tertiary);white-space:nowrap}
.cmt-text{font-size:16px;line-height:24px;color:var(--text-primary)}
.cmt-more{margin:20px auto 0;display:flex}

/* other user review */
.other-head{font-size:25px;line-height:1.15;font-weight:400;text-align:left;margin:8px 0 20px}

/* ----- bottom sticky nav (collection) ----- */
.bottom-nav .nav-item.wide{width:auto;padding:0 14px;gap:8px;font-size:14px;color:var(--neutral-900)}
.bottom-nav .nav-item.wide svg{width:22px;height:22px}
.bottom-nav .nav-item .like-path{fill:none;stroke:var(--neutral-900);stroke-width:1.8}
.bottom-nav .nav-item.liked .like-path{fill:var(--accent-500);stroke:var(--accent-700)}

@media (max-width:600px){
  .post-title{font-size:24px}
  /* sticky comment input above keyboard — smooth slide-up */
  .cmt-input-wrap.focused{position:fixed;left:8px;right:8px;bottom:8px;z-index:90;
    border-color:transparent;background:var(--bg-secondary);padding:14px 16px;
    box-shadow:0 -6px 24px rgba(30,30,30,.14);animation:cmtUp .28s cubic-bezier(.4,0,.2,1)}
  @keyframes cmtUp{from{transform:translateY(24px)}to{transform:translateY(0)}}
  .cmt-input-wrap.collapsed{border-color:transparent;background:var(--bg-secondary)}
  .cmt-input-wrap.collapsed .cmt-textarea{max-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}

/* ===== EXPLORER ========================================================== */
.exp-col{max-width:468px;margin:0 auto}
/* .full-bleed → см. секцию UTILITIES */
.exp-title{font-family:var(--font-display);font-size:70px;line-height:1;text-align:center;padding:48px 0 28px}
@media (max-width:600px){.exp-title{display:none}.exp-col{padding-top:8px}}
.exp-search{position:relative;margin-bottom:12px}
.exp-search input{width:100%;height:48px;padding:0 44px 0 16px;border:none;border-radius:8px;
  background:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-body);font-size:16px;transition:background-color .15s ease}
.exp-search input::placeholder{color:var(--text-tertiary)}
.exp-search input:hover{background:var(--bg-tertiary)}
.exp-search input:focus{outline:none;background:var(--bg-tertiary)}
.exp-search .clr{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  display:none;align-items:center;justify-content:center;color:var(--text-tertiary)}
.exp-search.has-text .clr{display:flex}
.exp-search .clr svg{width:18px;height:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{display:inline-flex;align-items:center;height:36px;border-radius:8px;background:var(--bg-secondary);overflow:hidden;transition:background-color .12s ease}
.chip:hover{background:var(--bg-tertiary)}
.chip__main{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:14px;line-height:14px;color:var(--text-primary);background:transparent;white-space:nowrap}
.chip__main:focus-visible{outline:2px solid var(--accent-700);outline-offset:-2px;border-radius:8px}
.chip__main svg{width:14px;height:14px}
.chip.on .chip__main{padding-right:4px}
.chip__x{display:flex;align-items:center;justify-content:center;width:30px;height:100%;padding-right:6px;color:var(--text-primary)}
.chip__x:hover{color:var(--text-secondary)}
.chip__x svg{width:14px;height:14px}
.exp-results{display:flex;align-items:center;justify-content:space-between;padding:4px 0 18px;border-top:1px solid var(--border-subtle);margin-top:2px;font-size:14px;line-height:20px;color:var(--text-tertiary)}
.exp-results .cnt b{color:var(--text-primary);font-weight:400;margin-left:6px}
.exp-sort{display:inline-flex;align-items:center;gap:6px;color:var(--text-tertiary);cursor:pointer}
.exp-sort b{color:var(--text-primary);font-weight:600}
.exp-sort svg{width:16px;height:16px}
.ov{position:fixed;inset:0;background:rgba(30,30,30,.45);z-index:100;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}
.ov.open{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:101;display:flex;flex-direction:column;background:var(--bg-primary);max-height:85vh;border-radius:16px 16px 0 0;padding:8px 16px 20px;transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sheet.open{transform:translateY(0)}
.sheet__handle{width:40px;height:4px;border-radius:2px;background:var(--neutral-300);margin:6px auto 14px;flex:none}
.sheet__title{font-family:var(--font-display);font-size:70px;line-height:1;text-align:center;margin-bottom:18px;flex:none}
.sheet__search{height:48px;padding:0 16px;border:none;border-radius:8px;background:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-body);font-size:16px;margin-bottom:6px;flex:none}
.sheet__search::placeholder{color:var(--text-tertiary)}
.sheet__search:focus{outline:none;background:var(--bg-tertiary)}
.sheet__search.hide{display:none}
.sheet__list{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.sheet__row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px 2px;border-bottom:1px solid var(--border-subtle);background:transparent;cursor:pointer;font-size:16px;line-height:22px;color:var(--text-primary);text-align:left}
.sheet__row:hover{color:var(--text-secondary)}
.sheet__ind{font-size:14px;font-weight:600;color:var(--text-primary);flex:none}
.sheet__box{width:22px;height:22px;border-radius:6px;border:2px solid var(--border-default);flex:none;display:flex;align-items:center;justify-content:center}
.sheet__row.sel .sheet__box{background:var(--accent-500);border-color:var(--accent-500)}
.sheet__box svg{width:14px;height:14px;display:none}
.sheet__row.sel .sheet__box svg{display:block}
.sheet__apply{display:none;flex:none;margin-top:14px;height:48px;border-radius:8px;background:var(--accent-500);color:var(--neutral-900);font-size:14px;font-weight:600}
.sheet.multi .sheet__apply{display:flex;align-items:center;justify-content:center}
@media (min-width:601px){
  .sheet{left:50%;top:50%;right:auto;bottom:auto;width:512px;max-height:80vh;border-radius:16px;padding:24px;transform:translate(-50%,-50%) scale(.96);opacity:0}
  .sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .sheet__handle{display:none}
}

/* ===== CREATE COLLECTION ================================================= */
.cr-col{max-width:468px;margin:0 auto;padding-bottom:8px}
.cr-title{font-family:var(--font-display);font-size:70px;line-height:1;text-align:center;padding:40px 0 24px}
@media (max-width:600px){.cr-title{display:none}.cr-col{padding-top:8px}}
.cr-tabs{display:flex;gap:4px;padding:4px;background:var(--bg-secondary);border-radius:8px;margin-bottom:16px}
.cr-tab{flex:1;height:44px;border-radius:8px;font-size:14px;line-height:14px;font-weight:600;background:transparent;
  color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}
.cr-tab.active{background:var(--neutral-900);color:var(--text-inverse)}

.cr-field{width:100%;height:56px;padding:0 16px;border:none;border-radius:8px;background:var(--bg-secondary);
  font-family:var(--font-body);font-size:16px;color:var(--text-primary);margin-bottom:12px;transition:background-color .15s}
.cr-field::placeholder{color:var(--text-tertiary)}
.cr-field:hover{background:var(--bg-tertiary)}
.cr-field:focus{outline:none;background:var(--bg-tertiary)}
textarea.cr-field{height:auto;min-height:104px;padding:16px;resize:vertical;line-height:24px}
.cr-city-wrap{position:relative;margin-bottom:12px}
.cr-city-wrap .cr-field{margin-bottom:0}
.cr-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:50;background:var(--bg-primary);border-radius:8px;box-shadow:0 8px 28px rgba(30,30,30,.14);overflow:hidden;max-height:248px;overflow-y:auto;display:none}
.cr-suggest.show{display:block}
.cr-suggest button{display:block;width:100%;text-align:left;padding:13px 16px;font-size:16px;background:transparent;color:var(--text-primary);border-bottom:1px solid var(--border-subtle)}
.cr-suggest button:last-child{border-bottom:none}
.cr-suggest button:hover{background:var(--bg-secondary)}

.cr-stepper{display:flex;align-items:center;height:56px;padding:0 6px 0 16px;background:var(--bg-secondary);border-radius:8px;margin-bottom:12px}
.cr-stepper input{flex:1;border:none;background:transparent;font-family:var(--font-body);font-size:16px;color:var(--text-primary);outline:none;width:100%}
.cr-stepper button{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--text-primary)}
.cr-stepper button:hover{background:var(--bg-tertiary)}
.cr-stepper svg{width:20px;height:20px}

.cr-rate-label{font-size:14px;line-height:20px;color:var(--text-tertiary);margin:6px 0 10px}
.cr-rate-label b{color:var(--text-primary);font-weight:600}
.cr-rate{display:flex;gap:4px;margin-bottom:18px}
.cr-rate button{flex:1 1 0;min-width:0;height:58px;border-radius:8px;background:var(--bg-secondary);
  font-family:var(--font-display);font-size:55px;line-height:1;color:var(--text-primary);
  display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;transition:background-color .12s,color .12s}
.cr-rate button[data-v="Mental"]{flex:0 0 auto;padding:0 10px}
.cr-rate button:not(.sel):hover{background:var(--bg-tertiary)}
.cr-rate button.sel{color:var(--neutral-900)}
.cr-rate button.sel[data-v="1"]{background:var(--accentcard-1)}
.cr-rate button.sel[data-v="2"]{background:var(--accentcard-2)}
.cr-rate button.sel[data-v="3"]{background:var(--accentcard-3)}
.cr-rate button.sel[data-v="4"]{background:var(--accentcard-4)}
.cr-rate button.sel[data-v="5"]{background:var(--accentcard-5)}
.cr-rate button.sel[data-v="6"]{background:var(--accentcard-6)}
.cr-rate button.sel[data-v="7"]{background:var(--accentcard-7)}
.cr-rate button.sel[data-v="8"]{background:var(--accent-300)}
.cr-rate button.sel[data-v="9"]{background:var(--accent-400)}
.cr-rate button.sel[data-v="Mental"]{background:var(--accent-500)}

.cr-spoiler{border-top:1px solid var(--border-subtle)}
.cr-spoiler__head{display:flex;align-items:center;justify-content:space-between;padding:16px 0;cursor:pointer;
  font-size:16px;line-height:20px;color:var(--text-primary);width:100%;background:transparent;text-align:left}
.cr-spoiler__head svg{width:22px;height:22px;color:var(--text-primary)}
.cr-spoiler__head .pm-v{transition:opacity .25s ease}
.cr-spoiler.open .cr-spoiler__head .pm-v{opacity:0}
.cr-spoiler__body{overflow:hidden;max-height:0;transition:max-height .3s ease-out}
.cr-spoiler.open .cr-spoiler__body{max-height:1400px}
.cr-spoiler__inner{padding-bottom:4px}
.cr-help{font-size:14px;line-height:20px;color:var(--text-tertiary);margin:-4px 0 14px}

.cr-uplabel{font-size:16px;line-height:20px;font-weight:600;margin:4px 0 10px}
.cr-photos{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px}
.cr-photo{position:relative;width:84px;height:84px;border-radius:8px;background:var(--bg-secondary);flex:none;
  display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;color:var(--text-tertiary)}
.cr-photo.add{cursor:pointer}
.cr-photo.add:hover{background:var(--bg-tertiary)}
.cr-photo .ph{width:28px;height:28px}
.cr-photo[draggable="true"]{cursor:grab}
.cr-photo.dragging{opacity:.4}
.cr-photo.over{outline:2px solid var(--accent-500);outline-offset:-2px}
.cr-photo .cover{position:absolute;left:5px;bottom:5px;background:var(--accent-500);color:var(--neutral-900);font-size:10px;line-height:1;font-weight:600;padding:3px 6px;border-radius:4px}
.cr-photo .rm{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--neutral-0);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.cr-photo .rm svg{width:12px;height:12px;color:var(--neutral-900)}
.cr-notes{font-size:14px;line-height:22px;color:var(--text-tertiary);margin-bottom:16px}

.cr-color-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--border-subtle);margin-bottom:16px}
.cr-color-row .lbl{font-size:16px;color:var(--text-tertiary)}
.cr-swatches{display:flex;gap:14px}
.cr-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer}
.cr-swatch.sel{box-shadow:0 0 0 2px var(--neutral-0),0 0 0 4px var(--neutral-900)}

.cr-actions{display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.cr-btn{height:52px;border-radius:8px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center}
.cr-btn--primary{background:var(--accent-500);color:var(--neutral-900)}
.cr-btn--primary:hover{background:var(--accent-600)}
.cr-btn--secondary{background:var(--bg-secondary);color:var(--text-primary)}
.cr-btn--secondary:hover{background:var(--neutral-200)}

.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);z-index:120;
  background:var(--neutral-900);color:var(--neutral-0);padding:13px 22px;border-radius:8px;font-size:14px;line-height:18px;
  opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.modalAuthTitle {
  font-family: var(--font-display)!important;
}

 a,
 a:hover,
 a:active,
 a:visited,
 a:focus {
    color: inherit; 
}