/* nes-glass.css — общий визуальный язык «Нескучно»: весёлый Zenly × Apple Liquid Glass.
 *
 * Подключается последним из общих стилей (base.html), поэтому переводит на стекло
 * существующие классы (.card-glass, .btn*, .chip, .seg, .stat-card, .notif-item …)
 * сразу на всех экранах. Новые экраны собираем из тех же классов + модификаторов ниже.
 *
 * Принципы:
 *  - поверхности — матовое стекло: полупрозрачный белый, светлая кромка сверху,
 *    мягкая синеватая тень снизу; на фоне — цветные пятна, чтобы стеклу было что преломлять;
 *  - всё «нажимное» — капсулы (999px), с пружинкой на нажатие (Zenly);
 *  - один главный CTA на экран — фирменный градиент с бликом, остальное — стекло
 *    или мягкий тон; красный только тихим текстом, без заливок;
 *  - backdrop-filter (--g-blur) — ТОЛЬКО на всплывающих слоях (модалки, тосты, меню).
 *    На карточках/кнопках/чипах его нет: фон под ними и так размыт, а десятки
 *    blur-слоёв подвешивают отрисовку (проверено: лента с 4 карточками зависала).
 */

:root {
  --g-surface: linear-gradient(160deg, rgba(255,255,255,.90) 0%, rgba(241,247,255,.66) 100%);
  --g-surface-flat: rgba(255,255,255,.80);
  --g-edge: rgba(255,255,255,.92);
  --g-hairline: rgba(var(--ink-rgb),.07);
  --g-blur: blur(20px) saturate(1.7);
  --g-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -12px 22px -16px rgba(80,120,190,.24),
    0 1px 2px rgba(11,18,32,.04),
    0 10px 28px -16px rgba(30,70,140,.30);
  --g-shadow-hover:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -12px 22px -16px rgba(80,120,190,.28),
    0 2px 4px rgba(11,18,32,.05),
    0 18px 36px -16px rgba(30,70,140,.40);
  --g-radius: 22px;
  --g-radius-sm: 16px;

  --cta: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 42%, var(--brand-deep) 100%);
  --cta-gloss: radial-gradient(120% 70% at 50% -20%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
  --cta-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -8px 16px -8px rgba(10,40,140,.35),
    0 10px 24px -10px rgba(var(--brand-deep-rgb),.60);
  --soft: rgba(var(--brand-rgb),.12);
  --soft-edge: rgba(var(--brand-rgb),.22);
  --soft-text: #1f5fd6;
  --quiet-danger: #d64545;

  --spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --focus-ring: 0 0 0 3px rgba(var(--brand-rgb),.35);
}

html.dark-theme {
  --g-surface: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  --g-surface-flat: rgba(30,36,54,.80);
  --g-edge: rgba(255,255,255,.12);
  --g-hairline: rgba(255,255,255,.08);
  --g-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px -16px rgba(0,0,0,.70);
  --g-shadow-hover: inset 0 1px 0 rgba(255,255,255,.18), 0 18px 38px -16px rgba(0,0,0,.80);
  --soft: rgba(var(--brand-rgb),.18);
  --soft-edge: rgba(var(--brand-rgb),.30);
  --soft-text: #8cc8ff;
  --quiet-danger: #ff7a7a;
}

/* ── Фон: цветные пятна под стеклом (Zenly) ─────────────────────── */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42vmax 42vmax at 6% -6%, rgba(var(--brand-2-rgb),.30), transparent 62%),
    radial-gradient(36vmax 36vmax at 104% 18%, rgba(167,139,250,.20), transparent 62%),
    radial-gradient(44vmax 44vmax at 50% 112%, rgba(var(--brand-rgb),.18), transparent 62%);
}
html.dark-theme body::before {
  background:
    radial-gradient(42vmax 42vmax at 6% -6%, rgba(var(--brand-rgb),.16), transparent 62%),
    radial-gradient(36vmax 36vmax at 104% 18%, rgba(139,92,246,.14), transparent 62%);
}

/* ── Поверхности ─────────────────────────────────────────────────── */
.card-glass,
.glass {
  background: var(--g-surface);
  border: 1px solid var(--g-edge);
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow);
}
html.dark-theme .card-glass,
html.dark-theme .modal-app {
  background: var(--g-surface) !important;
  border-color: var(--g-edge) !important;
}
@media (max-width: 640px) { .card-glass { border-radius: 20px; } }

.modal-app {
  background: var(--g-surface), rgba(255,255,255,.75);
  border: 1px solid var(--g-edge);
  border-radius: 26px;
  box-shadow: var(--g-shadow), 0 30px 80px -20px rgba(11,18,32,.35);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  backdrop-filter: blur(28px) saturate(1.8);
}
html.dark-theme .modal-app { background: rgba(26,32,48,.88) !important; }

.section-head { border-bottom-color: var(--g-hairline); }
.divider { background: var(--g-hairline); }

/* ── Кнопки: капсулы с пружинкой ─────────────────────────────────── */
.btn {
  border-radius: 999px;
  transition:
    transform .35s var(--spring),
    box-shadow .25s var(--ease-out),
    background-color .2s, border-color .2s, color .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); transition-duration: .12s; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn > .bi { transition: transform .35s var(--spring); }
.btn:hover > .bi { transform: scale(1.12); }

/* главный CTA — фирменный градиент с бликом */
.btn-primary {
  background: var(--cta-gloss), var(--cta);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--cta-shadow);
}
.btn-primary:hover,
.btn-primary:focus { color: #fff; filter: brightness(1.04) saturate(1.05); box-shadow: var(--cta-shadow), 0 16px 30px -12px rgba(var(--brand-deep-rgb),.55); }

/* стеклянная (вторичная) */
.btn-ghost,
.btn-glass {
  background: var(--g-surface);
  border: 1px solid var(--g-edge);
  color: var(--text-primary);
  box-shadow: var(--g-shadow);
}
.btn-ghost:hover,
.btn-glass:hover { background: var(--g-surface); border-color: var(--g-edge); color: var(--text-primary); box-shadow: var(--g-shadow-hover); }
html.dark-theme .btn-ghost { background: var(--g-surface) !important; border-color: var(--g-edge) !important; }

/* мягкий фирменный тон — «Написать», «Пригласить» и т.п. */
.btn-soft {
  background: var(--soft);
  border: 1px solid var(--soft-edge);
  color: var(--soft-text);
}
.btn-soft:hover { background: rgba(var(--brand-rgb),.18); color: var(--soft-text); box-shadow: 0 10px 22px -14px rgba(var(--brand-deep-rgb),.55); }
.btn-soft > .bi { color: var(--brand); }

/* тихая — без фона, проявляется при наведении */
.btn-quiet {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  box-shadow: none;
}
.btn-quiet:hover { background: var(--g-surface-flat); border-color: var(--g-hairline); color: var(--text-primary); }

/* опасные действия — без заливки: красный только в тексте */
.btn-danger,
.btn-quiet.is-danger {
  background: rgba(231,76,60,.08);
  border: 1px solid rgba(231,76,60,.16);
  color: var(--quiet-danger);
  box-shadow: none;
}
.btn-quiet.is-danger { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-danger:hover,
.btn-quiet.is-danger:hover { background: rgba(231,76,60,.12); border-color: rgba(231,76,60,.24); color: var(--quiet-danger); opacity: 1; }

.btn-success {
  background: rgba(45,202,115,.12);
  border: 1px solid rgba(45,202,115,.24);
  color: #18874a;
}
.btn-success:hover { background: rgba(45,202,115,.18); color: #18874a; opacity: 1; }

/* круглая иконка-кнопка (как «карандаш», «камера») */
.btn-round {
  width: 40px; height: 40px; min-height: 40px; padding: 0;
  border-radius: 50%;
}
.btn-round:hover > .bi { transform: rotate(-10deg) scale(1.1); }

/* ── Поля ввода ─────────────────────────────────────────────────── */
.input, .textarea, .select {
  border-radius: var(--g-radius-sm);
  border: 1px solid var(--g-hairline);
  background: rgba(var(--surface-rgb),.78);
  box-shadow: inset 0 1px 2px rgba(11,18,32,.04);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: rgba(var(--brand-rgb),.55);
  background: rgb(var(--surface-rgb));
  box-shadow: var(--focus-ring);
}

/* ── Чипы и сегменты ────────────────────────────────────────────── */
.chip {
  border-radius: 999px;
  background: var(--g-surface);
  border: 1px solid var(--g-edge);
  color: var(--text-secondary);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -8px rgba(30,70,140,.35);
  transition: transform .35s var(--spring), background-color .2s, color .2s, box-shadow .2s;
}
.chip:hover { transform: translateY(-1px); background: var(--g-surface); border-color: var(--g-edge); color: var(--text-primary); }
.chip:active { transform: scale(.95); }
/* активный чип — навигация, а не главное действие: мягкий фирменный тон, не градиент */
.chip.active,
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background: var(--soft);
  border-color: var(--soft-edge);
  color: var(--soft-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
html.dark-theme .chip:not(.active) { background: var(--g-surface); border-color: var(--g-edge); }

/* сегменты — как в iOS: стеклянная «дорожка» и белый ползунок */
.seg {
  background: rgba(var(--ink-rgb),.05);
  border: 1px solid var(--g-hairline);
  box-shadow: inset 0 1px 2px rgba(11,18,32,.05);
}
.seg-item { transition: color .2s, background-color .2s, box-shadow .25s, transform .35s var(--spring); }
.seg-item:active { transform: scale(.96); }
.seg-item.active {
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.88));
  color: var(--text-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 4px 12px -4px rgba(11,18,32,.18);
}
html.dark-theme .seg { background: rgba(255,255,255,.06); }
html.dark-theme .seg-item.active { background: rgba(255,255,255,.16); color: var(--text-primary); }

/* ── Плитки статистики (профиль и др.) ───────────────────────────── */
.stat-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 18px;
  border: 1px solid var(--g-edge);
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
  transition: transform .4s var(--spring), box-shadow .3s var(--ease-out);
}
.stat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 30% -10%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 60%);
}
/* световая полоса, проезжающая при наведении */
.stat-card::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--ease-out);
}
.stat-card:hover, a:focus-visible > .stat-card, .stat-card:focus-visible {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--g-shadow-hover);
}
.stat-card:hover::after, a:focus-visible > .stat-card::after, .stat-card:focus-visible::after { left: 120%; }
.stat-card:active { transform: translateY(-1px) scale(.98); transition-duration: .12s; }
.stat-card:focus-visible { outline: none; }
html.dark-theme .stat-card { background: var(--g-surface) !important; border-color: var(--g-edge) !important; }
html.dark-theme .stat-card::before { background: radial-gradient(120% 70% at 30% -10%, rgba(255,255,255,.14) 0%, transparent 60%); }
html.dark-theme .stat-card::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); }

/* золотая плитка — сдержанное шампань-стекло с тонкой золотой кромкой */
.stat-card--gold {
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(255,252,243,.96) 0%, rgba(252,243,222,.72) 60%, rgba(247,233,203,.6) 100%) padding-box,
    linear-gradient(140deg, #f3dc9c 0%, #c99a3c 35%, #f7e6b5 55%, #b07d26 100%) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -10px 18px -10px rgba(190,140,50,.25), 0 8px 22px -10px rgba(170,120,30,.38);
}
.stat-card--gold::after { background: linear-gradient(100deg, transparent, rgba(255,246,220,.9), transparent); }
.stat-card--gold:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -10px 18px -10px rgba(190,140,50,.3), 0 16px 30px -12px rgba(170,120,30,.5); }
.stat-card--gold .stat-label { color: #a07a35; }
.gold-text {
  background: linear-gradient(170deg, #c99a3c 0%, #8f611a 55%, #b5852c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.dark-theme .stat-card--gold {
  background:
    linear-gradient(160deg, rgba(60,48,24,.55) 0%, rgba(34,28,16,.4) 100%) padding-box,
    linear-gradient(140deg, #f3dc9c 0%, #a87a2c 40%, #e8cf8e 60%, #8a6220 100%) border-box !important;
  border-color: transparent !important;
}
html.dark-theme .gold-text { background-image: linear-gradient(170deg, #f6dc95 0%, #d4a640 60%, #f0d58d 100%); }
html.dark-theme .stat-card--gold .stat-label { color: #d9b765; }

/* ── Списки и уведомления ───────────────────────────────────────── */
.notif-item {
  border: 1px solid var(--g-edge);
  border-radius: 18px;
  background: var(--g-surface);
  box-shadow: var(--g-shadow);
  transition: transform .35s var(--spring), box-shadow .25s;
}
/* тип показываем цветом иконки — старую цветную полосу слева гасим */
.notif-item[class*="type-"] { border-left-color: var(--g-edge); }
.notif-item:hover { background: var(--g-surface); transform: translateY(-1px); box-shadow: var(--g-shadow-hover); }
.notif-item.unread { background: linear-gradient(160deg, rgba(232,244,255,.95), rgba(220,236,255,.7)); }
/* тип — цвет иконки, а не толстая полоса слева */
.notif-icon { border-radius: 12px; }
.notif-item.type-friend .notif-icon { background: rgba(var(--brand-2-rgb),.18); color: #0b8fb8; }
.notif-item.type-event  .notif-icon { background: rgba(255,166,64,.16);  color: #c26d00; }
.notif-item.type-chat   .notif-icon { background: rgba(107,203,119,.18); color: #2f8f3c; }
.notif-item.type-rating .notif-icon { background: rgba(255,107,157,.16); color: #c23a6c; }

.chat-list-item { border-radius: 18px; transition: background-color .2s, transform .35s var(--spring); }
.chat-list-item:hover { background: var(--g-surface-flat); }
.chat-list-item:active { transform: scale(.985); }
.chat-list-item-badge { background: var(--cta); box-shadow: 0 4px 10px -4px rgba(var(--brand-deep-rgb),.6); }

/* ── Сообщения ──────────────────────────────────────────────────── */
.msg-bubble {
  background: var(--g-surface);
  border: 1px solid var(--g-edge);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 16px -10px rgba(30,70,140,.3);
}
.msg-row.own .msg-bubble { background: var(--cta-gloss), var(--cta); box-shadow: var(--cta-shadow); }

/* ── Тосты, бейджи, пустые состояния ─────────────────────────────── */
.toast {
  border: 1px solid var(--g-edge);
  border-radius: 18px;
  background: var(--g-surface), rgba(255,255,255,.7);
  box-shadow: var(--g-shadow-hover);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
}
.badge { border: 1px solid transparent; }
.empty-state-title { letter-spacing: -.01em; }

/* ── Уменьшенное движение ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .seg-item, .stat-card, .notif-item, .chat-list-item { transition: none !important; }
  .btn:hover, .chip:hover, .stat-card:hover, .notif-item:hover { transform: none; }
}

/* ── Иконки в духе iOS (templates/includes/ios_icons.html) ─────────── */
.ios-ic { width: 22px; height: 22px; display: block; flex: none; fill: currentColor; }

/* «Значок приложения»: объёмная плитка с градиентом, бликом и белым глифом */
.ios-tile {
  --tile-a: #5BF675; --tile-b: #0CBD2A; --tile-glow: rgba(12,189,42,.45);
  position: relative; width: 40px; height: 40px; flex: none;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 12px; padding: 0; cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, var(--tile-a), var(--tile-b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.14), 0 5px 12px -4px var(--tile-glow);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.ios-tile::before {
  content: ""; position: absolute; inset: 1px 1px 50% 1px; border-radius: 11px 11px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events: none;
}
.ios-tile .ios-ic { width: 21px; height: 21px; position: relative; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.ios-tile:hover { filter: brightness(1.05); }
.ios-tile:active { transform: scale(.86); }
.ios-tile:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 5px 12px -4px var(--tile-glow); }
.ios-tile--blue { --tile-a: #5AC8FF; --tile-b: #1A7CFF; --tile-glow: rgba(26,124,255,.45); }
.ios-tile--quiet {
  --tile-a: #FFFFFF; --tile-b: #E9E9EF; --tile-glow: rgba(11,18,32,.18);
  color: #FF3B30;
}
.ios-tile--quiet .ios-ic { filter: none; }
html.dark-theme .ios-tile--quiet { --tile-a: #3A3A44; --tile-b: #2A2A33; --tile-glow: rgba(0,0,0,.5); color: #FF6961; }

/* ── Подтверждение опасных действий: iOS action sheet (static/js/confirm-sheet.js) ── */
.nes-sheet {
  position: fixed; inset: 0; z-index: 12000;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,.32);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.nes-sheet.open { opacity: 1; visibility: visible; }
.nes-sheet__panel {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px;
  transform: translateY(110%); transition: transform .38s cubic-bezier(.2,.9,.25,1);
}
.nes-sheet.open .nes-sheet__panel { transform: none; }
.nes-sheet__group, .nes-sheet__btn--cancel {
  border-radius: 14px; overflow: hidden;
  background: rgba(250,250,252,.985);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
}
.nes-sheet__head { padding: 14px 18px 12px; text-align: center; border-bottom: .5px solid rgba(60,60,67,.29); }
.nes-sheet__title { font-size: 13.5px; font-weight: 700; color: rgba(60,60,67,.75); }
.nes-sheet__text { margin-top: 3px; font-size: 13px; font-weight: 500; color: rgba(60,60,67,.6); }
.nes-sheet__btn {
  display: block; width: 100%; height: 57px; border: 0; background: transparent;
  font: 500 19px/1 var(--font, system-ui); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nes-sheet__btn:active { background: rgba(60,60,67,.12); }
.nes-sheet__btn--danger { color: #FF3B30; }
.nes-sheet__btn--cancel { color: #007AFF; font-weight: 700; }
.nes-sheet__btn:focus-visible { outline: none; background: rgba(0,122,255,.1); }
html.dark-theme .nes-sheet__group, html.dark-theme .nes-sheet__btn--cancel { background: rgba(44,44,48,.985); }
html.dark-theme .nes-sheet__head { border-color: rgba(84,84,88,.6); }
html.dark-theme .nes-sheet__title { color: rgba(235,235,245,.7); }
html.dark-theme .nes-sheet__text { color: rgba(235,235,245,.55); }
html.dark-theme .nes-sheet__btn--danger { color: #FF453A; }
html.dark-theme .nes-sheet__btn--cancel { color: #0A84FF; }
@media (min-width: 768px) {
  /* на компьютере — по центру, как iOS-алерт на iPad */
  .nes-sheet { align-items: center; }
  .nes-sheet__panel { max-width: 340px; transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) { .nes-sheet, .nes-sheet__panel { transition: none; } }
/* «Отмена» — отдельная плашка: общее .nes-sheet__btn { background: transparent } её не должно перебивать */
.nes-sheet__btn.nes-sheet__btn--cancel { background: rgba(250,250,252,.985); }
.nes-sheet__btn.nes-sheet__btn--cancel:active { background: #e5e5ea; }
html.dark-theme .nes-sheet__btn.nes-sheet__btn--cancel { background: rgba(44,44,48,.985); }

/* ══ Тёмная тема: точечные починки ═══════════════════════════════════
   поле поиска внутри капсулы — без своего фона (общее правило для input красило его в синий прямоугольник) */
html.dark-theme body .cl-search-inner input.cl-search-input,
html.dark-theme body .fl-search-row input[type],
html.dark-theme body .fl-search-row input:not([type="checkbox"]):not([type="radio"]) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* мини-карты Leaflet (страница события, лидерборд…) — тёмные тайлы вместо ярко-белых */
html.dark-theme .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.55); }
html.dark-theme .leaflet-container { background: #1a1f2b; }

/* ══ Шторка «Поделиться» и «Как прошло?» (static/js/event-share.js) ══ */
.nes-share {
  position: fixed; inset: 0; z-index: 12500; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(10,14,24,.38); opacity: 0; transition: opacity .2s;
}
.nes-share.open { opacity: 1; }
.nes-share__panel {
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0; background: var(--bg-elevated, #fff);
  box-shadow: 0 -10px 40px rgba(10,14,24,.2);
  transform: translateY(100%); transition: transform .34s cubic-bezier(.2,.9,.25,1);
}
.nes-share.open .nes-share__panel { transform: none; }
.nes-share__handle { width: 40px; height: 5px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }
.nes-share__title { font-size: 18px; font-weight: 850; text-align: center; color: var(--text-primary); margin-bottom: 12px; }
.nes-share__label { font-size: 12px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 14px 0 8px; }
.nes-share__card { border-radius: 22px; overflow: hidden; background: var(--bg-base); aspect-ratio: 4 / 5; max-height: 44vh; margin: 0 auto; display: grid; place-items: center; }
.nes-share__card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nes-share__card-ph, .nes-share__muted { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.nes-share__friends { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.nes-share__friends::-webkit-scrollbar { display: none; }
.nes-share__friend { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; padding: 0; }
.nes-share__av { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 850; font-size: 19px; background: linear-gradient(135deg, var(--brand-2), var(--brand-deep)); }
.nes-share__friend.is-sent .nes-share__av { background: #34C46A; }
.nes-share__friend.is-busy { opacity: .5; }
.nes-share__fname { font-size: 11.5px; font-weight: 750; color: var(--text-secondary); max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nes-share__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.nes-share__actions .btn { width: 100%; justify-content: center; }
.nes-after__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.nes-after__icon { width: 58px; height: 58px; flex: none; display: grid; place-items: center; border-radius: 18px; background: var(--brand-soft); font-size: 34px; }
.nes-after__icon .bl-ic { width: 1.1em; height: 1.1em; }
.nes-after__name { font-size: 13.5px; font-weight: 700; color: var(--text-secondary); }
/* ══ Оценки участникам (static/js/nes-rate.js): ряд — аватар, имя, пять глянцевых звёзд ══
   Звезда — как шарик: тёплый градиент «Огня» (#nes-star-fill), блик, пружинка при выборе. */
.nes-rate__list { display: flex; flex-direction: column; gap: 2px; }
.nes-rate__row { display: flex; align-items: center; gap: 10px; min-height: 54px; }
.nes-rate__av { width: 42px; height: 42px; flex: none; border-radius: 50%; object-fit: cover; }
.nes-rate__av--txt { display: grid; place-items: center; color: #fff; font-weight: 850; font-size: 16px; background: linear-gradient(135deg, var(--brand-2), var(--brand-deep)); }
.nes-rate__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nes-rate__who b { font-size: 15px; font-weight: 800; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nes-rate__sub { font-size: 12px; font-weight: 750; color: var(--text-muted); min-height: 14px; }
.nes-rate__sub.is-word { color: #f08a12; }
.nes-rate__sub.is-done { color: var(--success, #22a35a); }
.nes-rate__stars { display: flex; flex: none; gap: 0; }
.nes-star {
  width: 38px; height: 38px; padding: 4px; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.nes-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nes-star__b { fill: rgba(var(--ink-rgb), .10); stroke: rgba(var(--ink-rgb), .10); stroke-width: 2.4; stroke-linejoin: round; transition: fill .15s, stroke .15s; }
.nes-star__g { fill: #fff; opacity: 0; transition: opacity .15s; }
.nes-star.is-on .nes-star__b, .nes-star.is-preview .nes-star__b { fill: url(#nes-star-fill); stroke: url(#nes-star-fill); }
.nes-star.is-on .nes-star__g { opacity: .75; }
.nes-star.is-on svg { filter: drop-shadow(0 2px 3px rgba(255,120,20,.38)); }
.nes-star.is-preview:not(.is-on) .nes-star__b { opacity: .55; }
.nes-star:active { transform: scale(.86); }
.nes-star.is-pop { animation: nesStarPop .42s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes nesStarPop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.nes-rate.is-locked .nes-star { cursor: default; pointer-events: none; }
.nes-rate.is-locked .nes-star:not(.is-on) { opacity: .7; }
.nes-rate__foot { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.nes-rate__hint { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--text-muted); text-align: center; }
.nes-rate__hint.is-err { color: var(--danger, #e5484d); }
.nes-rate__foot .btn { width: 100%; justify-content: center; }
.nes-rate__foot .btn, .nes-rate__foot .btn:disabled { border-color: transparent; } /* без синей рамки Bootstrap у неактивной */
.nes-rate__foot .btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .nes-star.is-pop { animation: none; } }
.nes-after__note { padding: 12px 14px; border-radius: 16px; background: var(--bg-base); font-size: 14px; font-weight: 650; line-height: 1.45; color: var(--text-secondary); }
.nes-after__done { margin-top: 8px; font-size: 13px; font-weight: 750; color: var(--success, #22a35a); }
.nes-after__photo {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; cursor: pointer;
  border: 1.5px dashed var(--border); border-radius: 16px; font-size: 14px; font-weight: 800; color: var(--text-primary);
}
html.dark-theme .nes-share__panel { background: #1b1f2a; }
@media (min-width: 768px) { .nes-share { align-items: center; } .nes-share__panel { border-radius: 28px; } }
@media (prefers-reduced-motion: reduce) { .nes-share, .nes-share__panel { transition: none; } }