:root {
  --bg: #0b1020;
  --card: #0f1630;
  --line: #1b2445;
  --text: #e6ecff;
  --muted: #a7b0d4;
  --primary: #6258ff;
  --accent: #22C55E;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

    --link:          #9AA7FF; /* светлее var(--primary), контрастно и спокойно */
  --link-hover:    #C1B7FF; /* чуть ярче при ховере */
  --link-active:   #E2DEFF; /* актив/фокус – максимально читаемо */
  --link-visited:  #B3A6FF; /* мягкая лаванда для visited */
  --link-underline:#22C55E; /* тон неон-лайма в подчеркивании */
}

/* ========== Base ========== */
* { box-sizing: border-box }
html, body { height:100% }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Ubuntu, Arial;
  background: var(--bg);
  color: var(--text);
}
a{
  color: var(--link);
  text-decoration: none;
}

/* Hover/Focus/Active */
a:hover{
  color: var(--link-hover);
    text-decoration: none;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--link-underline), transparent 75%));
}
a:active{ color: var(--link-active); }
a:visited{ color: var(--link-visited); }

/* Доступность: чёткий фокус-контур на тёмном фоне */
a:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--primary), white 20%);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Навигация у вас отдельная — оставим ваш muted,
   но можно слегка подсветить hover в навбаре: */
.nav-link{ color: var(--muted); }
.nav-link:hover{
  color: var(--link-hover);
  text-decoration: none; /* в меню без подчёркивания */
}

/* Кнопки — ссылки с классом .btn не трогаем */
a.btn{ text-decoration: none !important; color:#fff !important; }

.container { padding: 22px; max-width: 1200px; margin: 0 auto }

.h1 { font-size: 28px; margin: 8px 0 12px; }
.h2 { font-size: 24px; margin: 4px 0 10px; }
.h3 { font-size: 18px; margin: 0 0 8px; }
.muted { color: var(--muted) }

.row { display:flex; align-items:center }
.wrap { flex-wrap:wrap }
.gap { gap:12px }

/* ========== Header ========== */
.header{
    position: relative;
  display:flex; align-items:center; gap:16px;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  flex-wrap: nowrap;
  min-width: 0;
    top: 0;
  z-index: 1000;
}
.glass { background: rgba(16,22,50,.5) }

.brand {
  color: var(--text); text-decoration:none; display:flex; align-items:center; gap:10px;
  font-weight: 800; flex:0 0 auto; white-space:nowrap;
}
.brand-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--accent) }

.nav{
  flex:1 1 auto; min-width:0;
  display:flex; gap:12px; margin-left:12px; flex-wrap:nowrap;
  overflow:hidden;
}
.nav-link { color: var(--muted); text-decoration:none; font-weight:600 }
.nav-link:hover { color: var(--text) }
.auth{ flex:0 0 auto; display:flex; align-items:center; gap:10px }
.profile-link{ display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }

.menu-toggle{
  display:none;
  width:36px; height:36px; padding:0; line-height:0;
  border-radius:10px; border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: var(--text);
}
.menu-toggle svg{ width:22px; height:22px; display:block; margin:auto; }
.menu-toggle:focus-visible { outline: 2px solid var(--primary); }
.menu-toggle, .menu-toggle * { -webkit-tap-highlight-color: transparent; }

.only-desktop { display: inline-flex; }
.only-mobile  { display: none; }

/* ========== Cards & UI ========== */
.card {
  background: rgba(16, 22, 50, 0.85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  backdrop-filter: blur(6px);
}
.card.hover { transition: transform .15s ease, border-color .2s ease; }
.card.hover:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.card.empty { text-align:center; padding:32px 16px }

.thumb { height: 140px; border-radius: 12px; background-size: cover; background-position: center; margin-bottom:12px; border:1px solid rgba(255,255,255,.08) }
.card-head { display:flex; gap:12px; align-items:center; justify-content:space-between }
.card-body { display:flex; flex-direction:column; gap:12px }
.card-date {
  margin-top: 4px;
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.badge, .chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 600;
  font-size: small;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 12px;


  background: var(--primary); /* однотонный цвет */
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;

  box-shadow: 0 6px 18px rgba(79,70,229,.25);
  transition: 0.2s ease;
}


.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn i {
  font-size: 1rem;
}

/* Прозрачная версия (ghost) */
.btn.ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--text);
  box-shadow: none;
}

.btn.ghost:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}


.grid.cards { display:grid; gap:16px; grid-template-columns: repeat(3, 1fr) }
.grid.two { display:grid; gap:16px; grid-template-columns: 1.2fr .8fr }

.avatar { width: 40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2) }
.avatar.sm { width: 32px; height:32px }

.meta-palette { margin-top:10px; display:flex; gap:8px; align-items:center }
.dot { width:16px; height:16px; border-radius:50% }
.list { padding-left: 16px }

.people-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.person-card .name { letter-spacing: .2px }

.person-card.winner {
  position: relative;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px rgba(34,197,94,.25), 0 8px 30px rgba(0,0,0,.35);
}
.person-card.winner::after {
  content: "🏆 Победитель";
  position: absolute;
  top: -10px; left: -10px;
  background: linear-gradient(135deg, var(--accent), var(--primary));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.person-card.finisher {
  position: relative;
  border: 2px dashed rgba(255,255,255,.25);
}
.person-card.finisher::after {
  content: "🎖️ Финишёр";
  position: absolute;
  top: -10px; right: -10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

.person .person__meta { margin-top: 6px; }

.card__footer{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  justify-content:space-between; /* или flex-start + auto-margin у меты */
}

/* мета слева, кнопка уходит вправо за счёт авто-отступа */
.card__footer-meta{
  margin-right:auto;
  color: var(--muted);
  font-weight:600;
}

.btn.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, var(--primary), #3b35b6);
  color:#fff; font-weight:700;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(79,70,229,.25);
}
.btn.pill svg{ width:14px; height:14px; }
.btn.pill:hover{ filter:brightness(1.07); transform:translateY(-1px); transition:.15s ease; }

.person.card.hover .card__footer .btn{ opacity:.0; transform: translateY(2px); transition:.2s ease; }
.person.card.hover:hover .card__footer .btn{ opacity:1; transform: translateY(0); }

/* ========== Map / Graph area ========== */
.map-wrap { position: relative; overflow: hidden; border-radius: 16px; }
.map-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.map-viewport{
  position: relative; width: 100%; height: 70vh; overflow: hidden;
  border-radius: 12px; background: rgba(0,0,0,.08);
  touch-action: none; cursor: grab;
  overscroll-behavior: contain;
}
.map-viewport.dragging { cursor: grabbing; }

.map-content { position: absolute; top:0; left:0; transform-origin:0 0; will-change: transform; user-select: none; }
.map-img     { position:absolute; inset:0; z-index: 1; pointer-events:none; object-fit: fill; user-select: none; }
.map-canvas  { position:absolute; inset:0; z-index: 2; }
.progress-path { position: absolute; inset: 0; pointer-events: none; }
.map-wrap svg.progress-path {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.node-wrap, .node { z-index: 6; }
.handle-wrap { z-index: 7; pointer-events: auto; }
.marker      { z-index: 8; }

svg path:not(.__hit) { pointer-events: none; }

.node{
  position: absolute; transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  color: #fff; display: grid; place-items: center; font: 600 12px/1 Inter, system-ui;
  z-index: 6; pointer-events: auto; touch-action: none; cursor: grab;
}
.node .tt {
  position: absolute; top: -28px; white-space: nowrap;
  background: rgba(0,0,0,.7); color:#fff; padding: 2px 6px; border-radius: 6px; font-weight: 500;
}

.handle-dot { pointer-events: none; }


.map-wrap, .map-viewport, .map-content, .node, .handle-wrap {
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}

.map-wrap[data-edit="1"] .marker { display: none !important; }

/* ========== Modal ========== */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6,10,24,.55);
  backdrop-filter: blur(6px) saturate(110%);
  opacity: 0; transition: opacity .18s ease;
}
.modal__dialog {
  position: relative;
  width: min(560px, 92vw);
  background: rgba(16,22,50,.9);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  padding: 16px;
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: translateY(0) scale(1); }

.modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__title-wrap { display: flex; align-items: center; gap: 10px; }
.modal__icon {
  width: 28px; height: 28px; display:grid; place-items:center; border-radius:8px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.modal__title { margin: 0; font-size: 18px; }
.modal__subtitle { margin: 8px 0 14px; color: var(--muted); }
.modal__footer { display:flex; gap:10px; justify-content:flex-end; margin-top: 8px; }

.icon-btn {
  width:36px; height:36px; border-radius:10px; line-height:0;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: var(--text); cursor: pointer;
}
.icon-btn:hover { filter: brightness(1.08); }

.smart-form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.label { font-weight: 700; }
.input {
  padding: 10px 12px; border-radius: 12px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04); color: var(--text); outline: none;
}
.input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.25); }
.input-with-suffix { position: relative; }
.input-with-suffix .suffix {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}


@keyframes spin { to { transform: rotate(360deg); } }

.form-msg { margin-top: 6px; color: var(--muted); min-height: 1em; }
.form-msg.is-error { color: #ff9aa2; }
.form-msg.is-ok    { color: #a7f3d0; }

.scroll-area{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.02);
  padding: 0;
  margin-top: 10px;
}

.table-ui { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 560px; }
.table-ui thead th {
  position: sticky; top: 0; z-index: 1;
  background: rgba(16,22,50,.95);
  backdrop-filter: blur(4px);
  text-align: left;
  font-weight: 800;
}
.table-ui th, .table-ui td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.table-ui tbody tr:hover { background: rgba(255,255,255,.03); }
.t-right { text-align: right; }
.subtle { color: var(--muted); }

.rule {
  display:flex; gap:8px; align-items:center;
  padding:6px 0; border-bottom:1px dashed rgba(255,255,255,.08);
}
.rule:last-child { border-bottom: none; }

.kbd { font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding:3px 6px; border-radius:6px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color: var(--text);
}

.empty-state { padding: 16px; color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight: 700; font-size: 12px;
}

/* ========== Lists / Leaderboard ========== */
.leader-list { display:flex; flex-direction:column }
.leader {
  display:flex; align-items:center; gap:10px; padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.07);
}
.leader .rank { width:40px; text-align:center; font-weight:800 }
.leader .who { display:flex; flex-direction:column }
.leader .name { font-weight:800 }
.leader .points { margin-left:auto }

/* ========== Profile Layout ========== */
.profile-page {}
.profile-header{
  display:grid; gap:16px;
  grid-template-columns: 1fr auto;
}
.profile-header__left{ display:flex; gap:12px; align-items:center; min-width:0 }
.profile-title .meta{ margin-top:6px; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.profile-header__right{ display:flex; align-items:center; gap:10px; justify-self:end }
.quick-stats{ margin-top:8px; display:flex; flex-wrap:wrap; gap:10px; grid-column: 1 / -1 }

.layout{
  display: grid;
  gap: 16px;
  margin-top: 16px;
  grid-template-columns: 1fr !important;
}

.left-col{ display:grid; gap:16px }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.filter-select{ min-width:220px; max-width:100% }

.awards-grid{ display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.award-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px;
  display:flex; flex-direction:column; gap:8px;
  background: rgba(255,255,255,.03);
}
.award-card__head{ display:flex; align-items:center; gap:8px; justify-content:space-between }
.award-card__foot{ display:flex; justify-content:space-between; align-items:center }
.award-card.winner{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(34,197,94,.25) }
.award-card.finisher{ border-style:dashed }

.journey{ max-height: 60vh; overflow:auto; padding-right:4px }
.journey__row{ display:grid; grid-template-columns:22px 1fr; gap:10px; padding:8px 0; border-bottom:1px dashed rgba(255,255,255,.08) }
.journey__row:last-child{ border-bottom:none }
.journey__dot{
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  margin-left: 5px;
}
.journey__body{}
.journey__title{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.journey__time{ margin-top:4px }

/* ========== Responsive ========== */
@media (max-width: 1100px) {
  .grid.cards { grid-template-columns: repeat(2, 1fr) }
  .awards-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) }
}
@media (max-width: 900px) {
  .people-grid { grid-template-columns: 1fr; }
  .layout{
    display:grid;
    gap:16px;
    margin-top:16px;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px)  {
  .grid.cards { grid-template-columns: 1fr }
  .badge{ display:none; }
  .auth-btn{ display:none; }
  .menu-toggle{ display:grid; place-items:center; margin-left:8px; }

  .nav{
    display:none;
    position:absolute; top:56px; left:0; right:0;
    flex-direction:column; gap:8px; margin-left:0; padding:12px 16px;
    background: rgba(16,22,50,.95);
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow: var(--shadow);
  }
  .nav.open{ display:flex; }

  .nav-link{ padding:10px 6px; font-weight:700; }
  .nav .btn.pill{ width:100%; justify-content: center; }

  .only-desktop{ display:none !important; }
  .only-mobile { display:inline-flex !important; }


  .card__footer{
    justify-content:space-between;   /* вместо flex-end */
    flex-wrap:wrap;                  /* чтобы аккуратно переносилось при узкой ширине */
  }
  .card__footer-meta{
    flex:1 1 auto;                   /* текст займёт строку, кнопка прилипнет вправо */
  }
}

/* === Красивый профиль === */
.pretty-profile {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pretty-profile .avatar.xl {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.15);
}

.profile-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.display-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}

.username {
  font-size: 16px;
  color: var(--muted);
}

.org {
  font-weight: 600;
  color: var(--primary);
}

.bio {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}

/* Мобильная адаптация */
@media (max-width:700px){
  .pretty-profile{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .profile-info{ align-items: center; }
}
.avatar.xl {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255,255,255,.25);
  box-shadow: 0 0 0 4px rgba(255,255,255,.05),
              0 8px 30px rgba(0,0,0,.35);
}

/* ===== MOBILE FIX PATCH ===== */

/* Никто не растягивает страницу по горизонтали */
html, body { overflow-x: hidden; }
img, video { max-width: 100%; height: auto; }

/* В flex/grid-рядках разрешаем дочерним схлопываться */
.profile-header__left,
.section-head,
.filters,
.profile-name,
.layout,
.right-col,
.left-col {
  min-width: 0;
}

/* Длинные строки (имена, названия кампаний, био) не рвут макет */
.display-name,
.username,
.bio,
.table-ui td,
.table-ui th,
.award-card__head,
.h2, .h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Фильтр – не держим жёсткий min-width на узких экранах */
@media (max-width: 700px) {
  .filter-select {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
  }
}

/* Таблица: пусть сама остаётся широкой, но не тянет body — прокрутка внутри контейнера */
.scroll-area {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  contain: content; /* изоляция размеров, чтобы min-width таблицы не раздувал body */
}

/* Если хотите, чтобы таблица «резиново» ужималась — уберите минимальную ширину: */
/* .table-ui { min-width: 0 !important; width: 100% !important; } */

/* Бейджи и чипы: позволяем перенос текста на словах */
.badge,
.chip {
  white-space: normal;
}

/* Быстрые статусы: более дружелюбное поведение на очень узких экранах */
@media (max-width: 480px) {
  .quick-stats { gap: 8px; }
  .badge, .chip { padding: 8px 10px; font-size: 12px; }
}

/* Правый сайдбар не должен иметь скрытых минимальных ширин */
.right-col { width: 100%; }

/* Аватар безопасен по ширине контейнера (если вдруг где-то окажется не XL) */
.avatar { max-width: 100%; }



/* Карточки наград: на мобиле больше колонок не держим */
@media (max-width: 700px) {
  .awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 430px) {
  .awards-grid { grid-template-columns: 1fr; }
}

/* Таймлайн: защищаем от горизонтальной прокрутки из-за «пиллов» */
.journey { overflow-x: hidden; }
.journey__title > .pill { max-width: 100%; }
.table-ui td.t-wrap { overflow-wrap: anywhere; }

/* ===== Awards: responsive ===== */
.awards-grid{
  display:grid;
  gap:12px;
  /* авто-колонки от 220px до 1fr — одинаково хорошо на мобиле и десктопе */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (min-width: 1100px){
  .awards-grid{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.award-card{
  position:relative;
  display:grid;
  grid-template-rows: auto 1fr auto;
  gap:10px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
.award-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.2);
}

/* Шапка с иконкой */
.award-card__head{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.award-card__icon{
  flex:0 0 auto;
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  font-size:18px; line-height:1;
}
.award-card__title{
  min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.award-card__title .name{
  font-weight:800; font-size:clamp(14px, 2vw, 16px);
  overflow-wrap:anywhere;
}
.award-card__title .meta{
  display:flex; flex-wrap:wrap; gap:6px;
}

/* «Пилюля» кампании аккуратно переносится и не рвёт строку */
.award-card .pill{
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Подвал с датой */
.award-card__foot{
  display:flex; align-items:center; justify-content:flex-start;
  color: var(--muted);
  font-size:12px;
}

/* Варианты статуса */
.award-card.winner{
  border-color: color-mix(in oklab, var(--accent), transparent 60%);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 75%);
}
.award-card.finisher{
  border-style:dashed;
}

/* Декоративная ленточка (для победителя) */
.award-card.winner::after{
  content: "";
  position:absolute; top:0; right:0;
  width:0; height:0;
  border-left: 20px solid transparent;
  border-top: 20px solid color-mix(in oklab, var(--accent), transparent 30%);
  border-top-right-radius:12px;
}

/* Скелетон на время загрузки (опционально) */
.award-skeleton{
  height:92px; border-radius:14px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size:200% 100%;
  animation: shimmer 1.2s infinite;
  border:1px solid rgba(255,255,255,.1);
}
@keyframes shimmer{
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
/* Заголовки дат в ленте */
.journey__date{
  position: sticky; top: -1px;
  z-index: 1;
  display: flex; align-items: center;
  margin: 16px 0 8px;
  font-weight: 800; font-size: 13px; letter-spacing: .02em;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(0,0,0,.08), transparent);
  padding: 4px 2px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.journey__date span{ background: transparent; }

/* Кнопка дозагрузки */
.load-more-wrap { display:flex; justify-content:center; margin-top: 8px; }
.sentinel { height: 1px; }

/* Скелетоны для “пока грузится” (опционально) */
.skeleton-row{
  display:grid; grid-template-columns: 20px 1fr; gap:12px;
  align-items: center; padding:10px 0;
}
.skeleton-dot{
  width:12px; height:12px; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.skeleton-line{
  height:14px; border-radius:6px;
  background: linear-gradient(90deg, rgba(255,255,255,.06),
                                      rgba(255,255,255,.12),
                                      rgba(255,255,255,.06));
  background-size: 200% 100%; animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 0%{background-position:0 0} 100%{background-position:200% 0} }


/* чтобы элемент .span-2 занимал обе колонки сетки .grid.two */
.grid.two { display:grid; gap:16px; grid-template-columns: 1.2fr .8fr; }
.span-2 { grid-column: 1 / -1; }

/* универсальный вертикальный стек секций */
.stack { display:grid; gap:16px; }

/* внутренняя двухколоночная раскладка для объединённого блока */
.split-2 {
  display:grid;
  gap:12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .split-2 { grid-template-columns: 1fr; } /* на мобиле – в одну колонку */
}

/* чуть красивее правила в списке условий */
.rule { display:flex; gap:8px; align-items:center; padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,.08); }
.rule:last-child { border-bottom:none; }
/* ===== Award Terms (новый объединённый блок) ===== */
.award-terms{
  position: relative;
  overflow: hidden;
  padding: 0;
}

.award-terms__badge{
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  font-weight: 800;
  font-size: 12px;
}
.award-terms__title{
  margin: 0;
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 900;
  letter-spacing: .2px;
}
.award-terms__subtitle{
  font-size: 13px;
  color: var(--muted);
}

/* Сетка содержимого: 2 колонки на десктопе, 1 — на мобиле */
.award-terms__grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
  padding: 14px 14px 16px;
}
@media (max-width: 900px){
  .award-terms__grid{ grid-template-columns: 1fr; }
}

/* Левая колонка — чек-лист условий */
.award-terms__col-title{
  margin: 0 0 8px;
  font-size: 16px; font-weight: 800;
}
.checklist{
  display: grid; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.checklist__item{
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
}
.checklist__item::before{
  content: "✓";
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  margin-right: 6px;
  background: color-mix(in oklab, var(--accent), transparent 75%);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px; font-weight: 900;
  color: #fff;
}
.checklist__main{ font-weight: 300; }

/* Правая колонка — «герой» приза */
.award-hero{
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    radial-gradient(600px 200px at 80% -10%,
      color-mix(in oklab, var(--primary), transparent 60%), transparent 70%),
    radial-gradient(600px 200px at -20% 120%,
      color-mix(in oklab, var(--accent), transparent 60%), transparent 70%);
  backdrop-filter: blur(6px);
  display: grid;

  gap: 12px;
  padding: 14px;
  overflow: hidden;
}
.award-hero__ribbon{
  position: absolute; inset: 0 auto 0 -40%;
  width: 80%;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--primary), transparent 20%),
    color-mix(in oklab, var(--accent), transparent 20%));
  opacity: .1;
  transform: rotate(-15deg);
  pointer-events: none;
}
.award-hero__icon{
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.award-hero__body{ display: grid; gap: 10px; }
.award-hero__title{
  font-weight: 900; letter-spacing: .2px;
  font-size: clamp(16px, 1.4vw, 18px);
}
.award-hero__chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.award-hero__foot{
  display: flex; flex-wrap: wrap; gap: 6px;
  color: var(--muted); font-size: 12px;
}

/* Лёгкая анимация наведения */
.award-hero:hover{
  transform: translateY(-1px);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.18);
}

.flow-24 > * + * { margin-block-start: 24px; }

  .award-hero__winners ol{ margin:0px; padding-left:20px; }
  .award-hero__winners li{ display:flex; align-items:center; gap:8px; margin:4px 0; }
  .award-hero__winners img{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
.person-card.finisher:not(.winner) {
  position: relative;
  border: 2px dashed rgba(255,255,255,.25);
}
.person-card.finisher:not(.winner)::after {
  position: absolute;
  top: -10px; right: -10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
}


/* Карточка */
.award-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 18px 18px 12px 18px;
  background: linear-gradient(180deg, rgba(99,102,241,.10), rgba(99,102,241,0)) var(--bg,#fff);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.award-hero__ribbon {
  position:absolute; inset:-40px auto auto -40px; width:200px; height:200px;
  background: radial-gradient(90px 90px at 60% 40%, rgba(99,102,241,.35), transparent 60%),
              radial-gradient(120px 120px at 20% 70%, rgba(34,197,94,.25), transparent 60%);
  filter: blur(12px); pointer-events:none;
}
.award-hero__icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font-size:24px;background:rgba(0,0,0,.06); margin-bottom:10px;
}
.award-hero__title{ font-size:1.25rem; font-weight:800; margin:0 0 6px 0; }

/* Чипсы */
.chip { display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(0,0,0,.06); margin:4px 6px 0 0; font-weight:500; }
.chip.muted{opacity:.65}

/* Легенда призов */
.prize-list{margin:8px 0 0 0; padding:0; list-style:none; display:grid; gap:6px}
.prize-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px;
  background:rgba(0,0,0,.04) }
.prize-medal{ width:28px; text-align:center; font-weight:700 }

/* Победители */
.award-hero__winners{ display:grid; gap:8px }
.winner-row{ display:grid; grid-template-columns: 40px 36px 1fr; align-items:center; gap:10px;
  padding:8px 10px; border-radius:12px; background: rgba(0,0,0,.02); }
.winner-place{ font-weight:800; text-align:center }
.winner-ava .ava{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.winner-ava .ava--ph{ width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.08) }
.winner-name{ font-weight:700 }
.muted{ opacity:.7; font-size:.93em }

/* Скелет-лоадер */
.skeleton{ position:relative; overflow:hidden; background:rgba(0,0,0,.06); border-radius:12px; }
.skeleton::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%); animation: ske 1.2s infinite;
}
@keyframes ske { to { transform: translateX(100%); } }

/* Тёмная тема */
@media (prefers-color-scheme: dark){
  .award-hero{ --bg:#0b0b0f; box-shadow: 0 8px 24px rgba(0,0,0,.5) }
  .chip, .prize-item, .winner-row{ background: rgba(255,255,255,.06) }
  .award-hero__icon{ background: rgba(255,255,255,.08) }
}
/* === Campaign card polish === */
.campaign-card { padding: 18px; }
.campaign-head { display:grid; gap:8px; }
.campaign-head .h2 { letter-spacing:.2px; font-weight:900; }

.eyebrow{
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  font: 800 11px/1 ui-sans-serif, system-ui;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
}

/* Компактная мета-сеточка */
.meta-grid{
  display:grid; gap:10px; margin-top:8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.meta{
  display:grid; grid-template-columns: 28px 1fr; gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.meta .i{
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:14px;
}
.meta .label{ color:var(--muted); font-weight:700; font-size:12px; display:block; }
.meta b{ font-weight:600; letter-spacing:.2px; font-size:11px; }

.meta.cta{
  display:flex; align-items:center; justify-content:flex-end;
  background: transparent; border: none; padding: 0;
}

/* Аккуратный зелёный статус «уже участвуете» */
.chip-success{
  background: color-mix(in oklab, var(--accent), transparent 82%);
  border-color: color-mix(in oklab, var(--accent), transparent 60%);
  color: color-mix(in oklab, var(--accent), white 25%);
}

/* Слегка выделим заголовок секции с призом (используются ваши классы award-terms/hero) */
.award-terms{ margin-top: 12px; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; }
.award-terms__head{ padding:16px; }
.award-terms__grid{ padding:14px; }

/* Небольшая тень/подсветка у героя приза на ховер (ваш стиль сохранён) */
.award-hero{ transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.award-hero:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); box-shadow: 0 10px 28px rgba(0,0,0,.28); }

/* На очень узких — кнопка не ломает сетку */
@media (max-width: 430px){
  .meta.cta { justify-content: stretch; }
  .meta.cta .btn, .meta.cta .pill { width: 100%; justify-content: center; }
}
/* === Participants toolbar === */
.toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; min-width:0;
}
.toolbar__title{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.toolbar__count{ white-space:nowrap; }

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

.toolbar__actions .input{ min-width:260px; }

/* --- ≤900px: поиск растягиваем, кнопка остаётся справа --- */
@media (max-width: 900px){
  .toolbar__actions{
    flex:1 1 100%;
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
  }
  .toolbar__actions .input{ min-width:0; width:100%; }
}

/* --- ≤700px: заголовок со счётчиком остаётся сверху,
   ниже строкой – поиск и кнопка; всё безопасно переносится --- */
@media (max-width: 700px){
  .toolbar{ gap:10px; }
  .toolbar__title{
    width:100%; justify-content:space-between;
  }
  .toolbar__count{
    font-size:12px; padding:6px 10px;
  }
  .toolbar__actions{
    width:100%;
    grid-template-columns: 1fr auto;
  }
}

/* --- ≤430px: кнопка под поиск и на всю ширину --- */
@media (max-width: 430px){
  .toolbar__actions{
    grid-template-columns: 1fr;
  }
}
.award-hero__section-title{
  margin-top: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: .3px;
}

.award-hero__winners{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 10px;
}
/* Тело карточки с общим внутренним отступом */
.award-terms__body{
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;            /* на случай, если уберёте .stack */
}

/* Шапка секции: заголовок слева, стрелка справа */
.award-terms__head{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  flex-wrap:nowrap;
  min-width:0;
}

.award-terms__title{
  margin:0;
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight:900;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Кнопка-стрелка */
.collapse-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  color:inherit;
  -webkit-tap-highlight-color: transparent;
}
.collapse-toggle:hover{
  filter:brightness(1.08);
}

.collapse-toggle .chev{
  font-size:14px;
  transition: transform .2s ease;
}
.collapse-toggle[aria-expanded="false"] .chev{
  transform: rotate(-90deg);
}

/* Контейнер содержимого */
.collapsible{
  overflow:hidden;
  height:auto;
}
.award-terms__head.is-collapsed {
  border-bottom-color: transparent !important;
}

.icon-btn svg{
  width:20px; height:20px;
  display:block;             /* ← чтобы не «плясал» по baseline */
  flex:0 0 auto;
}
.btn.edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #007bff;
    color: white;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}

.btn.edit-btn:hover {
    background: #0069d9;
}

.btn.edit-btn i {
    font-size: 1rem;
}
/* базовая кнопка для обоих типов */
a.btn, button.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 12px;
  border-radius:6px;
  background:var(--primary);
  color:#fff; font-weight:600;
  text-decoration:none; cursor:pointer;
  box-shadow:0 6px 18px rgba(79,70,229,.25);
  transition:.2s ease;
}

/* сброс браузерных стилей у <button> */
button.btn {
  border:0;
  background:var(--primary);
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  line-height:1;          /* чтобы высота совпала с <a> */
}

/* ховеры/фокусы одинаковые */
a.btn:hover, button.btn:hover {
  filter:brightness(1.05);
  transform:translateY(-1px);
}
a.btn:focus-visible, button.btn:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:2px;
}
/* Тёмный select под ваш стиль */
select.input.filter-select{
  -webkit-appearance: none; /* Safari/Chrome */
  -moz-appearance: none;    /* Firefox */
  appearance: none;

  background: rgba(255,255,255,.06);        /* темнее */
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);

  padding-right: 34px;                      /* место под стрелку */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e6ecff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 12px;

  color-scheme: dark; /* подсказка браузеру для выпадающего списка */
}

/* Hover/Focus — как у ваших инпутов */
select.input.filter-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79,70,229,.25);
  outline: none;
}

/* Цвета пунктов (работает в большинстве браузеров) */
select.input.filter-select option,
select.input.filter-select optgroup{
  background: var(--card);
  color: var(--text);
}

/* Убрать старую стрелку в IE/Edge Legacy (если вдруг) */
select.input.filter-select::-ms-expand{
  display: none;
}
.person-card.winner { /* яркая лента/трофей */ }
.person-card.myuser { outline: 2px dashed rgba(255,255,255,.25); }

/* ===== PROFILE HEADER: дельта к твоим стилям ===== */

/* Компактный «воздушный» контейнер */
.pretty-profile.card.profile-header {
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Левая часть: аватар + инфо */
.profile-header__left{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Блок с текстами */
.profile-info { display: grid; gap: 8px; min-width: 0; }

/* Верхняя строка: имя/ники + кнопка справа */
.profile-name{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

/* Левая внутренняя полоса — гибкий ряд */
.name-line{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  min-width: 0;
}

.display-name{
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--text), color-mix(in oklab, var(--primary), white 10%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.sep{ color: color-mix(in oklab, var(--muted), white 10%); }

.username.chip{
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.username.chip i{ font-size:.9em; opacity:.85; }
.username.chip:hover{
  border-color: rgba(255,255,255,.28);
  filter: brightness(1.08);
  transform: translateY(-1px);
  transition: .15s ease;
}

.full-name{ color: var(--muted); font-weight: 600; }

/* Кнопка действий не прыгает при переносах */
.profile-actions{ justify-self: end; }
.profile-actions .btn{ white-space: nowrap; }

/* Организация и био */
.org{ font-weight: 700; color: var(--primary); }
.bio{
  margin: 2px 0 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 70ch;
}

/* Быстрые статусы — уже были, но чутка уплотним отступ сверху */
.quick-stats{ margin-top: 4px; }

/* Мобилка */
@media (max-width: 700px){
  .profile-header__left{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .profile-name{ grid-template-columns: 1fr; }
  .profile-actions{ justify-self: center; }
  .bio{ margin-top: 4px; }
}

.auth-card .field { margin-top: 7px; }

/* высота хэдера как переменная (совпадает с твоими 56px) */
:root { --header-h: 56px; }



/* мобильное меню поверх всего остального */
@media (max-width: 700px){
  .nav{
    position: fixed;      /* вместо absolute — чтобы не «утопало» */
    top: var(--header-h);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow: auto;
    z-index: 2000;        /* выше любых .card:hover с transform и карт */
  }
  .nav.open{ display:flex; }
}

/* на всякий: модалки — самый верхний слой */
.modal{ z-index: 10000; }


/* Шапка должна быть позиционированной, чтобы z-index реально работал */
.header{
  top: 0;
  z-index: 3000;    /* выше любых карт/карточек */
}

/* Мобильное меню — всегда поверх контента */
@media (max-width: 700px){
  .nav{
    position: fixed;                 /* обязательно fixed, не absolute */
    top: var(--header-h, 56px);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--header-h, 56px));
    overflow: auto;
    z-index: 4000;                   /* выше шапки и карточек */
    isolation: isolate;              /* собственный стэкинг-контекст (подстраховка) */
  }
  .nav.open{ display:flex; }
}
.site-bg{
  position: fixed;
  inset: 0;
  z-index: -1;            /* под контентом */
  pointer-events: none;   /* клики проходят сквозь */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.45)),
    var(--bg-image) center / cover no-repeat;
  backface-visibility: hidden;  /* снижаем «тряску» слоёв на iOS */
  transform: translateZ(0);     /* аккуратный promotion без will-change */
}

/* Фуллскрин-модалка */
.modal--fullscreen .modal__dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  margin: 0;
  border-radius: 0;
}

.modal__dialog--fullscreen {
  padding: 12px; /* компактные поля */
}

/* Чтобы хедер «прилипал» и контент карты заполнял остальное */
.modal--fullscreen .modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Внутри модалки скролл нам не нужен — карта сама управляет панорамой */
.modal--fullscreen .scroll-area {
  overflow: hidden;
}

/* Когда viewport в модалке — растягиваем его на всю высоту окна минус хедер */
.map-viewport.is-fullscreen {
  inline-size: 100%;
  block-size: calc(100vh - 80px);
}

/* Базовая высота карты на странице (не в модалке) — как было/по желанию */
.map-viewport {
  width: 100%;
  /* оставьте свою высоту, или, например: */
  /* height: min(70vh, 640px); */
}

/* Мягкая адаптация для мобильных */
@media (max-width: 768px) {
  .map-viewport {
    /* height: 56vh;  — если нужно */
  }
}

.map-content { position: relative; }

.map-img, .map-canvas, .progress-path {
  position: absolute;
  inset: 0;
}

.map-img       { z-index: 0; }
.map-canvas    { z-index: 1; }
.progress-path { z-index: 2; pointer-events: none; }

/* где-нибудь в {% block head %} */
.award-hero__winners .winner-sub {
  font-size: 12px;
  line-height: 1.2;
}
.map-content .marker,
.map-content .node-wrap,
.map-content .handle-wrap {
  transform: translate(-50%, -50%) scale(calc(1 / var(--map-scale, 1)));
  transform-origin: center;
  will-change: transform;
}
.map-content .tt,
.map-content .avatar-tip {
  transform: translate(-50%, -100%);   /* без scale() */
  transform-origin: center bottom;
}

/* === Auth Page Specifics === */

/* 1. Эффект свечения за карточкой */
.auth-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh; /* Чтобы центрировать вертикально */
  padding: 20px;
}

.auth-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(98, 88, 255, 0.15) 0%, rgba(34, 197, 94, 0.05) 50%, transparent 70%);
  z-index: -1;
  pointer-events: none;
  filter: blur(60px);
}

/* 2. Улучшенная карточка */
.auth-card {
  width: 100%;
  max-width: 500px; /* Чуть уже для эстетики */
  background: rgba(16, 22, 50, 0.75); /* Более прозрачная */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5); /* Глубокая тень */
  backdrop-filter: blur(12px);
  border-radius: 24px; /* Более круглые углы */
  padding: 32px;
  animation: floatIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 3. Кастомный загрузчик аватара */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.avatar-preview {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px dashed rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: .2s;
  flex-shrink: 0;
}
.avatar-preview:hover {
  border-color: var(--primary);
  background: rgba(98, 88, 255, 0.1);
}
.avatar-preview img {
  width: 100%; height: 100%; object-fit: cover;
}
.avatar-preview i { font-size: 24px; color: var(--muted); }

/* Скрытие реального инпута */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* 4. Поля ввода с иконками (опционально) */
.input-group { position: relative; }
.input-group .input { padding-left: 40px; transition: all 0.2s; }
.input-group .input:focus {
  background: rgba(255,255,255,0.07);
  transform: translateY(-1px);
}
.input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; transition: .2s;
}
.input:focus + .input-icon { color: var(--primary); }

/* Заголовки */
.auth-header { text-align: center; margin-bottom: 24px; }
.auth-header h1 { font-size: 28px; font-weight: 800; margin: 0; background: linear-gradient(135deg, #fff, var(--muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.auth-header p { margin-top: 8px; font-size: 14px; }

/* Кнопка на всю ширину */
.btn-block { width: 100%; justify-content: center; padding: 12px; font-size: 16px; margin-top: 10px; }