/* ═══════════════════════════════════════════════════════════════
   LIST (my_profiles)
   ═══════════════════════════════════════════════════════════════ */
.profile-list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;gap:12px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 2px 8px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.03);
  border-radius:var(--radius-xl);
  margin:4px 12px;
  position:relative;overflow:hidden;
  transition:transform 0.45s cubic-bezier(0.23,1,0.32,1),box-shadow 0.45s cubic-bezier(0.23,1,0.32,1),background var(--t);
}
.profile-list-item:hover{
  background:rgba(255,255,255,0.85);
  transform:translateY(-4px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.05),
    0 8px 24px rgba(0,0,0,0.08),
    0 16px 40px rgba(0,0,0,0.05);
}
.profile-list-info{display:flex;align-items:center;gap:12px;}
.profile-list-avatar{
  width:40px;height:40px;border-radius:var(--radius-full);
  background:var(--bg-input);flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
}
.profile-list-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-list-title{font-weight:600;font-size:0.9375rem;}
.profile-list-slug{font-size:0.75rem;color:var(--text-muted);margin-top:1px;}
.profile-list-views{font-size:0.75rem;color:var(--text-muted);}
.profile-list-actions{display:flex;gap:2px;align-items:center;}
.profile-list-actions a,.profile-list-actions span{
  font-size:0.8125rem;color:var(--text-gray);padding:6px 10px;
  border-radius:var(--radius-full);transition:background var(--t);text-decoration:none;
}
.profile-list-actions a:hover{background:var(--bg-hover);}

/* ═══════════════════════════════════════════════════════════════
   OWN-CLUB CARDS (/my/) — same shell as the home cards, plus a
   vertical column of icon-only management actions on the right.
   ═══════════════════════════════════════════════════════════════ */
.card-manage{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:0 10px;flex:0 0 auto;position:relative;z-index:2;
}
.card-manage a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--radius-full);
  color:var(--text-gray);transition:background var(--t),color var(--t);
}
.card-manage a:hover{background:var(--bg-hover-light);color:var(--text);text-decoration:none;}
.card-manage a.danger{color:var(--danger);}
.card-manage a.danger:hover{background:var(--danger-bg);color:var(--danger);}
.card-manage svg{width:16px;height:16px;}
.profile-card-tags .status-badge{margin-left:0;flex:0 0 auto;}

/* ═══════════════════════════════════════════════════════════════
   MANAGE LISTS — vertical icon + label actions on the owner pages.
   ═══════════════════════════════════════════════════════════════ */
.manage-panel{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:6px;margin-top:8px;
}
.manage-list{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;}
.manage-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:var(--radius-sm);
  background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:0.875rem;font-weight:600;
  color:var(--text);text-decoration:none;
  transition:background var(--t),color var(--t);
}
.manage-item svg{width:18px;height:18px;flex:0 0 18px;color:var(--text-gray);transition:color var(--t);}
.manage-item:hover{background:var(--bg-hover-light);color:var(--text);text-decoration:none;}
.manage-item:hover svg{color:var(--text);}
.manage-item.danger{color:var(--danger);}
.manage-item.danger svg{color:var(--danger);}
.manage-item.danger:hover{background:var(--danger-bg);color:var(--danger);}
.manage-form{display:block;margin:0;}
/* Owner event list: every event is a block whose actions are listed below it */
.event-list.event-list--manage li{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:12px 0;border-bottom:1px solid var(--border);
}
.event-list--manage .event-item-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-left:12px;}
.event-list--manage .manage-list{padding-left:12px;}
.event-list--manage .manage-list{margin-top:4px;}
.event-list--manage .manage-item{padding:7px 10px;font-size:0.8125rem;}
.event-list--manage .manage-form{margin:0;}

/* ═══════════════════════════════════════════════════════════════
   RIGHT SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar-right{
  width:32%;max-width:350px;flex-shrink:0;padding:0 16px 8px 24px;
}
.sidebar-right-inner{
  position:sticky;top:0;display:flex;flex-direction:column;gap:16px;
}

/* Search input */
.search-box{
  position:relative;margin:0;height:54px;display:flex;align-items:center;
}
.search-box input{
  width:100%;padding:12px 16px 12px 44px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--radius-full);font-size:0.875rem;
  color:var(--text);outline:none;
  transition:background var(--t),border-color var(--t);
}
.search-box input:focus{background:var(--bg);border-color:var(--accent);}
.search-box input::placeholder{color:var(--text-muted);}

/* Search icon */
.search-box-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-muted);pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */
.form{display:flex;flex-direction:column;gap:20px;max-width:680px;padding:16px 20px 28px;font-size:1rem;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{
  font-size:0.8rem;font-weight:600;color:var(--text-gray);
  text-transform:uppercase;letter-spacing:0.03em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="search"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="datetime-local"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
.form-group textarea{
  width:100%;padding:12px 16px;font-size:1rem;font-family:var(--font);
  background:var(--bg);border:1px solid var(--border-gray);
  border-radius:var(--radius-sm);color:var(--text);
  transition:border-color var(--t);outline:none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{border-color:var(--accent);}
.form-group textarea{min-height:120px;resize:vertical;line-height:1.5;}
.form-group select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23536471' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{border-color:var(--danger);}
.helptext{font-size:0.8rem;color:var(--text-muted);}
/* Checkboxes (e.g. allauth “Запомнить меня”) — the native control looked
   broken next to the rounded inputs, so it is drawn from scratch. */
.form-group-check{flex-direction:row;align-items:center;gap:10px;}
.form-group-check label{margin:0;order:2;cursor:pointer;font-size:0.9375rem;color:var(--text);}
.form-group-check input[type="checkbox"]{
  order:1;appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 20px;margin:0;
  border:1.5px solid var(--border-gray);border-radius:6px;
  background:var(--bg);cursor:pointer;
  transition:background var(--t),border-color var(--t);
}
.form-group-check input[type="checkbox"]:hover{border-color:var(--text-gray);}
.form-group-check input[type="checkbox"]:checked{
  background:var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--text);
}
.form-group-check input[type="checkbox"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
/* Consent line: small, single-line on desktop, links as quiet underlines. */
.form-group-check.form-group-consent{align-items:center;gap:8px;}
.form-group-check.form-group-consent label{
  font-size:0.75rem;line-height:1.35;font-weight:400;color:var(--text-gray);
  white-space:nowrap;
}
.form-group-check.form-group-consent label a{
  color:var(--text);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--border-gray);padding-bottom:1px;
}
.form-group-check.form-group-consent label a:hover{
  border-bottom-color:var(--text);text-decoration:none;
}
@media(max-width:640px){
  .form-group-check.form-group-consent label{white-space:normal;}
}
.errorlist{list-style:none;font-size:0.8rem;color:var(--danger);margin-top:4px;}

/* Profile page: separate block for the email change steps */
.profile-email{
  border-top:1px solid var(--border);padding-top:16px;
  display:flex;flex-direction:column;gap:10px;
}
.profile-email h2{font-size:1.0625rem;font-weight:700;}
.profile-email p{font-size:0.9375rem;color:var(--text-gray);}
.profile-email .actions{margin-top:0;}
.profile-email form{display:flex;flex-direction:column;gap:14px;}

/* Buttons */
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 20px;height:40px;border-radius:var(--radius-full);
  font-size:0.9375rem;font-weight:700;text-decoration:none;
  cursor:pointer;border:none;transition:all var(--t);
  font-family:var(--font);
}
.btn-primary{background:var(--text);color:var(--surface);}
/* Doubled class beats the global ``a:visited{color:inherit}`` rule: without
   it a *visited* button fell back to the body colour and the label became
   black-on-black (404/500 “На главную”). */
.btn.btn-primary{background:var(--text);color:var(--surface);border:1px solid var(--text);}
.btn.btn-primary:hover{
  background:var(--surface);color:var(--text);border-color:var(--text);text-decoration:none;
}
.btn-outline{background:transparent;color:var(--text);border:1px solid var(--border-gray);}
.btn-outline:hover{background:var(--bg-hover-light);text-decoration:none;color:var(--text);}
.btn-ghost{background:transparent;color:var(--text-gray);}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text);}
.btn-danger{
  background:var(--surface);border:1px solid var(--danger);color:var(--danger);
}
/* Опасное действие: белая кнопка с красной рамкой, при наведении — красная
   с белым текстом. Нажатие цвет не меняет, подчёркивания нет. */
.btn-danger:hover,
.btn-danger:focus-visible,
.btn-danger:active{
  background:var(--danger);border-color:var(--danger);color:var(--surface);
  text-decoration:none;opacity:1;
}
a.btn-danger:visited{color:var(--danger);}
a.btn-danger:hover:visited{color:var(--surface);}
/* Опасная зона профиля: удаление учётной записи и отзыв согласия. */
.account-danger{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
.account-danger h2{color:var(--danger);margin-top:0;}
.account-danger p{color:var(--text-gray);font-size:0.875rem;}

/* Статус клуба на странице владельца: скрыт или заблокирован. */
.club-notice{
  margin:16px 0 4px;padding:16px 18px;border-radius:var(--radius-xl);
  border:1px solid var(--border);background:var(--bg-input);
}
.club-notice__title{font-weight:800;font-size:1.0625rem;margin:0 0 6px;}
.club-notice p{margin:0 0 12px;color:var(--text-gray);font-size:0.9375rem;line-height:1.5;}
.club-notice--hidden{background:var(--warning-bg);border-color:var(--warning);}
.club-notice--hidden .club-notice__title{color:#8b4500;}
.club-notice--blocked{background:rgba(220,38,38,0.08);border-color:var(--danger);}
.club-notice--blocked .club-notice__title{color:var(--danger);}

/* Инструкции на странице поддержки: шаги и примечание под ними. */
.support-steps li{margin-bottom:10px;line-height:1.5;}
.support-note{color:var(--text-gray);font-size:0.875rem;margin:0 0 16px;}
.support-actions{margin:0 0 18px;}
.danger{color:var(--danger);}

/* ═══════════════════════════════════════════════════════════════
   STAT CARDS — dashboard, admin
   ═══════════════════════════════════════════════════════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 16px 16px;}
.stat-card{
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-radius:var(--radius-xl);padding:16px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 2px 8px rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.03);
  text-align:center;position:relative;overflow:hidden;
  transition:transform 0.45s cubic-bezier(0.23,1,0.32,1),box-shadow 0.45s cubic-bezier(0.23,1,0.32,1);
}
.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.05),
    0 8px 24px rgba(0,0,0,0.08),
    0 16px 40px rgba(0,0,0,0.05);
}
.stat-value{font-size:2rem;font-weight:800;color:var(--text);}
.stat-label{font-size:0.75rem;color:var(--text-gray);margin-top:4px;}

/* ═══════════════════════════════════════════════════════════════
   CHARTS — dashboard charts
   ═══════════════════════════════════════════════════════════════ */
.chart-container{
  background:var(--bg-card);border-radius:var(--radius-xl);padding:16px;
  border:1px solid var(--border);margin:0 16px 16px;
}

.chart-error{
  margin-top:8px;font-size:0.8125rem;color:var(--danger);
}

/* ═══════════════════════════════════════════════════════════════
   CONFIRM BOX — delete confirmation
   ═══════════════════════════════════════════════════════════════ */
.confirm-box{
  background:var(--bg-card);border-radius:var(--radius-xl);padding:20px;
  border:1px solid var(--border);margin:16px;
}
.confirm-box h2{font-size:1.1rem;margin-bottom:8px;}
.confirm-box p{color:var(--text-gray);margin-bottom:4px;}
.warning{color:var(--danger);font-weight:600;}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */
.empty-state{
  text-align:center;padding:48px 16px;color:var(--text-gray);font-size:0.9375rem;
}
.empty-state p{margin:0 0 8px;}
.empty-state p:last-of-type{margin-bottom:0;}
.empty-state-actions{justify-content:center;margin-top:18px;}
.empty-state a{color:var(--text);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.empty-state a.btn,.empty-state a.btn:hover,.empty-state a.btn:focus-visible{text-decoration:none;}

/* Info box */
.info-box{
  background:var(--accent-bg);border-radius:var(--radius-xl);padding:16px;
  margin:16px;font-size:0.875rem;color:var(--text);
}

/* ═══════════════════════════════════════════════════════════════
   HTMX SPINNER
   ═══════════════════════════════════════════════════════════════ */
.spinner{
  width:32px;height:32px;border:3px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.htmx-indicator{opacity:0;transition:opacity 0.2s;}
.htmx-request .htmx-indicator{opacity:1;}
.htmx-request.htmx-indicator{opacity:1;}

/* Back link */
/* Back links: black, and the underline is continuous on hover (the link is
   inline flow, not inline-flex, so the decoration also covers the space
   between the arrow and the label). */
.back-link{
  display:inline-block;color:var(--text);
  font-size:0.875rem;padding:8px 16px 0;text-decoration:none;
}
.back-link svg{vertical-align:-3px;margin-right:2px;}
.back-link:hover{color:var(--text);text-decoration:underline;text-underline-offset:2px;}

/* ═══════════════════════════════════════════════════════════════
   CARD ANIMATIONS — staggered entrance
   ═══════════════════════════════════════════════════════════════ */
@keyframes cardIn{
  from{opacity:0}
  to{opacity:1}
}
.profile-card,.profile-list-item,.stat-card{animation:cardIn 0.35s ease-out backwards;}
.profile-card:nth-child(1),.profile-list-item:nth-child(1),.stat-card:nth-child(1){animation-delay:0.04s}
.profile-card:nth-child(2),.profile-list-item:nth-child(2),.stat-card:nth-child(2){animation-delay:0.08s}
.profile-card:nth-child(3),.profile-list-item:nth-child(3),.stat-card:nth-child(3){animation-delay:0.12s}
.profile-card:nth-child(4),.profile-list-item:nth-child(4),.stat-card:nth-child(4){animation-delay:0.16s}
.profile-card:nth-child(5),.profile-list-item:nth-child(5),.stat-card:nth-child(5){animation-delay:0.20s}
.profile-card:nth-child(6),.profile-list-item:nth-child(6),.stat-card:nth-child(6){animation-delay:0.24s}
.profile-card:nth-child(7),.profile-list-item:nth-child(7),.stat-card:nth-child(7){animation-delay:0.28s}
.profile-card:nth-child(8),.profile-list-item:nth-child(8),.stat-card:nth-child(8){animation-delay:0.32s}
.profile-card:nth-child(9),.profile-list-item:nth-child(9),.stat-card:nth-child(9){animation-delay:0.36s}
.profile-card:nth-child(10),.profile-list-item:nth-child(10),.stat-card:nth-child(10){animation-delay:0.40s}

/* ═══════════════════════════════════════════════════════════════
   АДАПТИВ — одна граница: 1000px.
   Шире — три колонки с подписями. Уже — мобильная оболочка: шапка
   с логотипом и гамбургером, поиск под ней, одна колонка ленты и
   никаких сайдбаров.

   Промежуточного состояния «сайдбар без подписей» больше нет: именно
   оно ломало вид на планшетах и в узком окне ноутбука, а на 768px
   сайдбар исчезал целиком — вместе с «Профилем» и «Выйти», так что
   выйти с телефона было нечем.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:999px){
  .sidebar-left,
  .sidebar-right{display:none;}

  /* Шапка вынута из потока — контент начинается под ней. */
  .app-layout{display:flex;flex-direction:column;padding-top:var(--mobile-header-h, 61px);}
  .feed{max-width:100%;border-left:none;border-right:none;}
  /* perspective на .feed создаёт containing block для position:fixed —
     меню уезжало вместе со страницей. На телефоне 3D-наклона нет. */
  .feed{perspective:none;}
  body.menu-open{overflow:hidden;}

  .toast-stack{top:calc(var(--mobile-header-h, 60px) + 8px);left:8px;right:8px;}
  .feed-header-cta{
    display:inline-flex;align-items:center;justify-content:center;
    height:34px;padding:0 14px;border-radius:var(--radius-full);
    border:1px solid var(--text);background:var(--text);color:var(--surface);
    font-size:0.8125rem;font-weight:700;text-decoration:none;white-space:nowrap;
  }
  .feed-header-cta:visited{color:var(--surface);}
  .feed-header-cta:hover{
    background:var(--surface);color:var(--text);text-decoration:none;
  }

  /* На телефоне заголовок раздела не нужен: его заменяет мобильная шапка. */
  .feed-header{display:none;}

  .profile-list-item{flex-direction:column;align-items:flex-start;gap:8px;}
  .stats-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:480px){
  .btn,.sidebar-cta{width:100%;justify-content:center;}
  .stats-grid{grid-template-columns:1fr;}
  .stat-value{font-size:1.5rem;}
}

/* ── Анкета клуба до 700px ──────────────────────────────────────
   Ровно 300px: круглый логотип слева, справа название, ниже описание
   в две строки, две строки тегов и отдельная строка с лайком. */
@media(max-width:700px){
  /* Карточка вертикальная и на телефоне: та же форма, чуть плотнее отступы. */
  .profile-card{margin:6px 8px;}
  .profile-card .profile-card-body{padding:12px 14px 14px;}
  .profile-card .profile-card-title{font-size:1rem;}
}

/* ── Мобильная оболочка ────────────────────────────────────────
   Видна только до 1000px. Пункты, которые жили в левом сайдбаре,
   переехали в меню гамбургера: в одной колонке им места нет, а
   терять их нельзя. */
.mobile-shell{display:none;}

@media(max-width:999px){
  .mobile-shell{display:block;}

  .mobile-header{
    position:fixed;top:0;left:0;right:0;z-index:210;
    height:var(--mobile-header-h, 61px);
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 12px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
  }
  .mobile-header-actions{display:flex;align-items:center;gap:8px;}
  .mobile-header-create{
    display:inline-flex;align-items:center;justify-content:center;
    height:44px;padding:0 12px;border-radius:var(--radius-full);
    border:1px solid var(--text);background:var(--text);color:var(--surface);
    font-size:0.8125rem;font-weight:700;text-decoration:none;white-space:nowrap;
  }
  .mobile-header-create:visited{color:var(--surface);}
  .mobile-header-create:hover{background:var(--surface);color:var(--text);text-decoration:none;}
  .mobile-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);}
  .mobile-logo .logo-mark{width:32px;height:32px;flex:0 0 32px;}
  .mobile-logo-word{
    font-family:'KroogWordmark',var(--font);
    font-size:1.25rem;font-weight:600;letter-spacing:-0.03em;line-height:1;
  }
  .mobile-menu-toggle{
    width:44px;height:44px;flex:0 0 44px;
    display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-full);border:1px solid var(--border);
    background:none;color:var(--text);cursor:pointer;
    transition:background var(--t),border-color var(--t);
  }
  .mobile-menu-toggle svg{width:24px;height:24px;}
  .mobile-menu-toggle:hover{background:var(--bg-hover-light);border-color:var(--border-gray);}

  /* Меню — панель во всю ширину экрана, прижатная к шапке: так она
     читается как часть шапки, а не как всплывающая карточка. */
  .mobile-menu{
    display:none;
    position:fixed;top:var(--mobile-header-h,61px);
    left:0;right:0;z-index:209;
    max-height:calc(100vh - var(--mobile-header-h,61px));
    overflow-y:auto;
    background:var(--bg);
    border-bottom:1px solid var(--border);
    border-radius:0 0 var(--radius-2xl) var(--radius-2xl);
    box-shadow:0 18px 40px rgba(0,0,0,0.16);
  }
  /* Нижний отступ больше боковых: после последней кнопки должно оставаться
     место, иначе панель выглядит обрезанной. */
  .mobile-menu.is-open{
    display:flex;flex-direction:column;gap:14px;
    padding:12px 12px 22px;
    animation:mobileMenuIn 0.2s ease-out;
  }
  .mobile-menu-group{display:flex;flex-direction:column;gap:8px;}
  /* Действия отделены чертой: «Создать клуб» и «Выйти» — не навигация. */
  .mobile-menu-group--actions{
    border-top:1px solid var(--border);
    padding-top:14px;
  }

  /* Пункты — скруглённые плашки, а не строки во всю ширину: так они читаются
     как кнопки, и палец не промахивается по краю. */
  .mobile-menu .mobile-menu-item{
    display:flex;align-items:flex-end;width:100%;min-height:48px;padding:0 18px 8px;
    font-family:var(--font);font-size:1rem;font-weight:600;
    color:var(--text);text-decoration:none;text-align:left;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-full);cursor:pointer;
    transition:background var(--t),border-color var(--t);
  }
  .mobile-menu .mobile-menu-item:hover{
    background:var(--bg-hover-light);border-color:var(--border-gray);
  }

  /* «Создать клуб» — чёрный овал, как CTA в десктопном сайдбаре. Цвет задан
     и для :visited: браузер иначе перекрашивает посещённую ссылку, и белая
     надпись пропадает на светлом фоне — такую ошибку легко не заметить. */
  .mobile-menu a.mobile-menu-cta,
  .mobile-menu a.mobile-menu-cta:link,
  .mobile-menu a.mobile-menu-cta:visited{color:var(--surface);}
  .mobile-menu a.mobile-menu-cta{
    display:flex;align-items:center;justify-content:center;
    width:100%;min-height:48px;padding:0 18px;
    font-family:var(--font);font-size:1rem;font-weight:700;
    background:var(--text);border:1px solid var(--text);
    border-radius:var(--radius-full);text-decoration:none;
    transition:background var(--t),color var(--t),border-color var(--t);
  }
  .mobile-menu a.mobile-menu-cta:hover{
    background:var(--surface);color:var(--text);border-color:var(--text);
  }
  .mobile-menu-logout{display:block;margin:0;}
  /* Выход — тихая строка, а не ещё одна кнопка: действие редкое, и
     выделять его наравне с навигацией незачем. */
  .mobile-menu .mobile-menu-item--quiet{
    justify-content:center;background:transparent;border-color:transparent;
    color:var(--text-gray);font-weight:600;
  }
  .mobile-menu .mobile-menu-item--quiet:hover{
    background:var(--bg-hover-light);border-color:var(--border);color:var(--text);
  }

  /* Город в меню: тот же блок, что в правой колонке, но по высоте
     остальных пунктов — чтобы палец попадал так же уверенно. */
  .mobile-menu-group--city .city-picker__summary{min-height:48px;padding:0 16px;}
  .mobile-menu-group--city .city-picker__menu-inner{padding:0 6px 6px;}

  /* Гамбургер складывается в крестик. Состояние берётся из aria-expanded,
     поэтому анимация и то, что видит скринридер, не расходятся. */
  .burger{position:relative;display:block;width:22px;height:16px;}
  .burger i{
    position:absolute;left:0;width:100%;height:2px;border-radius:2px;
    background:currentColor;
    transition:top 0.22s ease,transform 0.22s ease,opacity 0.16s ease;
  }
  .burger i:nth-child(1){top:0;}
  .burger i:nth-child(2){top:7px;}
  .burger i:nth-child(3){top:14px;}
  .mobile-menu-toggle[aria-expanded="true"] .burger i:nth-child(1){top:7px;transform:rotate(45deg);}
  .mobile-menu-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0;}
  .mobile-menu-toggle[aria-expanded="true"] .burger i:nth-child(3){top:7px;transform:rotate(-45deg);}

  .mobile-search{margin:12px 12px 4px;}
  .mobile-search input{width:100%;}
}

@keyframes mobileMenuIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══════════════════════════════════════════════════════════════
    PAGE TRANSITION — canonical HTMX pattern (htmx.org/examples/animations)
    .feed is the boosted navigation target (sidebar remains static)
    swap:0.3s — extend swap phase so fade-out animation completes
    settle:0.3s — extend settle phase so new content fades in
    ═══════════════════════════════════════════════════════════════ */
@keyframes feedIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes feedOut{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-2px)}
}

/* Native cross-fade of the centre column where View Transitions are supported */
#main-feed{view-transition-name:main-feed;}
::view-transition-old(main-feed){animation:feedOut 0.14s ease-out both;}
::view-transition-new(main-feed){animation:feedIn 0.16s ease-out both;}
/* Rails must not cross-fade: only the centre column changes */
::view-transition-old(root),
::view-transition-new(root){animation:none;}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(main-feed),
  ::view-transition-new(main-feed),
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none!important;}
}

/* Fallback for browsers without View Transitions */
@supports not (view-transition-name: main-feed){
  .feed.htmx-swapping {
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  }
  .feed.htmx-settling {
    opacity: 1;
    animation: feedIn 0.22s ease-out both;
  }
}

/* ═══════════════════════════════════════════════════════════════
    REDUCED MOTION
    ═══════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    transition-duration:0.01ms!important;
  }
  .profile-card:hover,
  .profile-list-item:hover,
  .stat-card:hover{
    transform:none!important;
  }
  .noise-overlay{display:none}
  body::before{display:none}
}
@media(prefers-reduced-motion:no-preference){
  body::before{animation:meshDrift 40s ease-in-out infinite}
}

/* Form/dashboard helpers extracted from inline styles */
.form-spinner{text-align:center;padding:2rem;}
.confirm-form{margin-top:16px;}
.dashboard-page{padding:16px;}