/* CosmoMatch design system v2 - CSS вынесен из index.html (C1/C2 Phase 1).
Файл в корне /, поэтому абсолютные url(/assets/...) resolving не меняют.
При правке деплоить вместе с index.html: SW кэширует их в lockstep (SHELL_CACHE_NAME). */
/* === COSMOMATCH DESIGN SYSTEM v2 === */
/* Шрифт Manrope подключён тегом в ; дублирующий
@import удалён — он блокировал рендер и делал повторный запрос. */
:root {
--bg-primary: #0f0d1a;
--bg-secondary: #1a1533;
--bg-tertiary: #251f42;
--bg-card: rgba(255, 255, 255, 0.04);
--bg-elevated: rgba(255, 255, 255, 0.06);
--bg-card-hover: rgba(255, 255, 255, 0.07);
--bg-input: rgba(255, 255, 255, 0.06);
--text-primary: rgba(255, 255, 255, 0.87);
--text-secondary: rgba(255, 255, 255, 0.60);
--text-disabled: rgba(255, 255, 255, 0.38);
--text-muted: #6b5f85;
--text-on-accent: #1a1533;
--accent-gold: #e8d5a3;
--accent-gold-hover: #d4c08e;
--accent-lavender: #c4b5e0;
--accent-coral: #d4756b;
--accent-teal: #6ba8a0;
--border-subtle: rgba(196, 181, 224, 0.1);
--border-card: rgba(196, 181, 224, 0.12);
--border-gold: rgba(232, 213, 163, 0.25);
--shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35);
--shadow-button: 0 4px 16px rgba(0, 0, 0, 0.2);
--shadow-glow-gold: 0 0 20px rgba(232, 213, 163, 0.15);
--card-title: var(--text-primary);
--card-copy: var(--text-secondary);
--banner-text: var(--text-primary);
--banner-bg: var(--bg-elevated);
--insight-title: var(--text-primary);
--insight-copy: var(--text-secondary);
--mode-card-bg: rgba(255, 255, 255, 0.06);
--mode-card-border: rgba(196, 181, 224, 0.12);
--chat-insight-bg: rgba(255, 255, 255, 0.06);
--chat-insight-border: rgba(196, 181, 224, 0.12);
--profile-card-bg: linear-gradient(180deg, rgba(16, 23, 43, 0.82), rgba(20, 27, 49, 0.9));
--profile-card-text: var(--text-primary);
--profile-card-copy: var(--text-secondary);
--ios-spring: cubic-bezier(0.32, 0.72, 0, 1);
--glass-surface: rgba(15, 13, 26, 0.72);
--glass-surface-light: rgba(255, 255, 255, 0.72);
/* Непрозрачная поверхность для модальных карточек профиля (bg-card слишком прозрачный) */
--interface-modal-surface: linear-gradient(180deg, rgba(12, 17, 34, 0.98), rgba(17, 26, 47, 0.98));
--swipe-action-border: var(--border-subtle);
--radius-card: 16px;
--radius-button: 14px;
--radius-modal: 24px;
--radius-input: 12px;
--gradient-bg: linear-gradient(180deg, #0f0d1a 0%, #1a1533 50%, #251f42 100%);
}
body[data-theme="light"],
body.light-theme {
--bg-primary: #faf6f0;
--bg-secondary: #f0ecf5;
--bg-tertiary: #e8e2f0;
--bg-card: rgba(255, 255, 255, 0.85);
--bg-elevated: rgba(255, 255, 255, 0.96);
--bg-card-hover: rgba(255, 255, 255, 0.95);
--bg-input: rgba(0, 0, 0, 0.04);
--text-primary: #212121;
--text-secondary: rgba(33, 33, 33, 0.60);
--text-disabled: rgba(33, 33, 33, 0.38);
--text-muted: #a99ec4;
--text-on-accent: #2a2340;
--border-subtle: rgba(107, 95, 133, 0.1);
--border-card: rgba(107, 95, 133, 0.15);
--border-gold: rgba(200, 155, 94, 0.3);
--shadow-card: 0 4px 20px rgba(107, 95, 133, 0.1);
--gradient-bg: linear-gradient(180deg, #faf6f0 0%, #f0ecf5 50%, #e8e2f0 100%);
--mode-card-bg: rgba(0, 0, 0, 0.04);
--mode-card-border: rgba(0, 0, 0, 0.08);
--chat-insight-bg: rgba(0, 0, 0, 0.04);
--chat-insight-border: rgba(0, 0, 0, 0.06);
--profile-card-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 239, 230, 0.96));
--profile-card-text: #1d2844;
--profile-card-copy: rgba(33, 33, 33, 0.60);
--glass-surface: rgba(255, 255, 255, 0.74);
/* Алиасы переопределяются именно здесь: на :root они уже разрешены
в тёмные значения и вниз по дереву не обновятся (системный фикс
невидимых текстов светлой темы — «Звёздные связи» и др.). */
--card-title: var(--text-primary);
--card-copy: var(--text-secondary);
--banner-text: var(--text-primary);
--banner-bg: var(--bg-elevated);
--insight-title: var(--text-primary);
--insight-copy: var(--text-secondary);
--interface-modal-surface: linear-gradient(180deg, rgba(250, 246, 240, 0.99), rgba(240, 236, 245, 0.99));
}
/* Фон подложки документа: чтобы при оттяжке скролла не всплывала белая полоса
над островком iPhone и экран ощущался статичным на любых устройствах. */
html {
background-color: #0f0d1a;
overflow-x: hidden;
overscroll-behavior-y: none;
}
html:has(body.light-theme),
html:has(body[data-theme="light"]) {
background-color: #faf6f0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--gradient-bg);
min-height: 100vh;
color: var(--text-primary);
position: relative;
overflow-x: hidden;
}
.btn-primary {
background: var(--accent-gold);
color: var(--text-on-accent);
border: none;
border-radius: var(--radius-button);
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
font-family: 'Manrope', sans-serif;
cursor: pointer;
box-shadow: var(--shadow-button);
transition: background 0.2s, transform 0.12s ease-out, box-shadow 0.2s;
}
.btn-primary:hover { background: var(--accent-gold-hover); }
.btn-primary:active { transform: scale(0.96); }
.btn-secondary {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border-card);
border-radius: var(--radius-button);
padding: 14px 24px;
font-size: 15px;
font-weight: 500;
font-family: 'Manrope', sans-serif;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, transform 0.12s ease-out;
}
.btn-secondary:hover {
background: var(--bg-card-hover);
border-color: var(--border-gold);
}
.btn-secondary:disabled { opacity: 0.4; cursor: default; }
.btn-secondary:active { transform: scale(0.96); }
.onboarding-start-note {
margin-top: 10px;
text-align: center;
font-size: 12px;
line-height: 1.45;
color: var(--text-secondary);
}
/* Онбординг: ненавязчивая подпись про автосохранение черновика —
снимает тревогу «а вдруг закрою и всё пропадёт». */
.onboarding-draft-note {
margin-top: 4px;
text-align: center;
font-size: 11px;
line-height: 1.4;
color: var(--text-secondary);
opacity: 0.72;
}
/* Онбординг: сводная панель «что осталось заполнить».
Заменяет одиночные тосты — они исчезали за 3 сек и создавали
ощущение «кнопка не работает». Панель живёт в DOM, пока есть пропуски,
каждый пункт кликабелен и скроллит к полю. */
.onboarding-missing-panel {
margin-top: 12px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(212, 117, 107, 0.12);
border: 1px solid rgba(212, 117, 107, 0.36);
color: var(--text-primary);
font-size: 13px;
line-height: 1.5;
}
.onboarding-missing-panel[hidden] { display: none; }
.onboarding-missing-title {
font-weight: 600;
margin-bottom: 6px;
color: var(--accent-coral);
}
.onboarding-missing-list {
margin: 0;
padding-left: 18px;
list-style: disc;
}
.onboarding-missing-list li {
margin-bottom: 2px;
cursor: pointer;
}
.onboarding-missing-list li:hover,
.onboarding-missing-list li:focus-visible {
text-decoration: underline;
}
/* Кратковременная подсветка поля, к которому проскроллили из панели пропусков. */
.form-group--error input,
.form-group--error select,
.form-group--error textarea,
.form-group--error .date-select-row select,
.form-group--error .seeking-choice {
box-shadow: 0 0 0 2px rgba(212, 117, 107, 0.55);
transition: box-shadow 0.3s var(--ios-spring);
}
/* Прогресс творческого теста: «Отвечено N из 3».
Показываем только когда есть пропуски — иначе мозолит глаза. */
.spark-progress-hint {
margin-top: 6px;
font-size: 12px;
color: var(--accent-coral);
line-height: 1.4;
}
.spark-progress-hint[hidden] { display: none; }
.btn-dislike {
background: var(--accent-coral);
color: white;
border: none;
border-radius: var(--radius-button);
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
}
.btn-like {
background: var(--accent-teal);
color: white;
border: none;
border-radius: var(--radius-button);
padding: 14px 24px;
font-size: 15px;
font-weight: 600;
}
/* === END DESIGN SYSTEM === */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--gradient-bg);
min-height: 100vh;
color: var(--text-primary);
position: relative;
overflow-x: hidden;
}
body.standalone-app {
overscroll-behavior: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0.7;
background-image:
linear-gradient(rgba(255,255,255,0.28) 0 0),
linear-gradient(rgba(255,255,255,0.18) 0 0),
linear-gradient(rgba(255,255,255,0.24) 0 0),
linear-gradient(rgba(255,255,255,0.16) 0 0),
linear-gradient(rgba(133, 170, 255, 0.28) 0 0),
linear-gradient(rgba(255,255,255,0.22) 0 0),
linear-gradient(rgba(255,255,255,0.18) 0 0),
linear-gradient(rgba(255,255,255,0.26) 0 0),
linear-gradient(rgba(255,255,255,0.16) 0 0),
linear-gradient(rgba(133, 170, 255, 0.24) 0 0);
background-repeat: no-repeat;
background-size: 3px 3px, 2px 2px, 4px 4px, 2px 2px, 3px 3px, 3px 3px, 2px 2px, 3px 3px, 2px 2px, 4px 4px;
background-position: 8% 14%, 18% 64%, 27% 26%, 42% 74%, 56% 12%, 64% 58%, 73% 21%, 82% 69%, 91% 36%, 48% 42%;
animation: pixel-twinkle 7s steps(2, end) infinite;
}
@keyframes pixel-twinkle {
0%, 100% { opacity: 0.45; }
50% { opacity: 0.85; }
}
.screen {
display: none;
min-height: 100vh;
padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
position: relative;
z-index: 1;
}
.screen.active { display: block; }
/* polish-59: app-shell — документ и body больше не скроллятся и не
«резинят» ни по горизонтали, ни по вертикали; каждый экран листается
внутри себя, чат управляет лентой сообщений сам. */
html {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
}
body {
height: 100vh;
height: 100dvh;
min-height: 0;
overflow: hidden;
overscroll-behavior: none;
}
.screen {
height: 100%;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* polish-61: микроанимация появления экрана - мягкий фейд и небольшой
сдвиг снизу. Только opacity/transform, чтобы анимация шла на
композиторе и не трогала скролл. */
.screen.active { animation: screen-enter 220ms ease-out; }
@keyframes screen-enter {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.screen.active { animation: none; }
}
.app-splash {
position: fixed;
inset: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
/* Резервный фон совпадает по тону с splash-bg.png (#261b3c avg),
чтобы сплэш был полностью непрозрачным ещё до декодирования
картинки. Без этого на PWA-холодном старте меню мелькает под
прозрачным фоном миллисекундами — смотрится крипово. */
background-color: #1a1230;
background-image: url('/assets/ui/splash-bg.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: opacity 0.36s ease, visibility 0.36s ease;
}
.app-splash.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.app-splash-inner {
position: relative;
width: min(460px, calc(100vw - 32px));
padding: 36px 24px 32px;
border-radius: 32px;
text-align: center;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(13, 19, 40, 0.48);
backdrop-filter: blur(18px);
box-shadow: 0 24px 70px rgba(0,0,0,0.34);
overflow: hidden;
}
.app-splash-sky {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.95;
}
.app-splash-star,
.app-splash-star::after {
position: absolute;
width: 6px;
height: 6px;
border-radius: 999px;
background: rgba(255,255,255,0.88);
box-shadow: 0 0 16px rgba(255,255,255,0.26);
animation: splash-twinkle 3.2s ease-in-out infinite;
content: '';
}
.app-splash-star::after {
width: 2px;
height: 14px;
left: 2px;
top: -4px;
background: rgba(244, 228, 193, 0.46);
box-shadow: none;
}
.app-splash-star:nth-child(1) { left: 16%; top: 24%; animation-delay: 0s; }
.app-splash-star:nth-child(2) { left: 72%; top: 20%; animation-delay: 0.8s; }
.app-splash-star:nth-child(3) { left: 26%; top: 68%; animation-delay: 1.2s; }
.app-splash-star:nth-child(4) { left: 82%; top: 58%; animation-delay: 1.9s; }
.app-splash-star:nth-child(5) { left: 50%; top: 16%; animation-delay: 2.4s; }
/* Кометы сплэша переиспользуют визуал и траекторию комет натальной
карты (.astro-comet + @keyframes astro-comet-fly ниже): та же
голова-искра с хвостом и тот же угол — тело повёрнуто на 16° и летит
вниз-вправо под ~21°, поэтому направление и ориентация совпадают и
комета падает ровно. Прежняя .app-splash-comet была плашкой под -18°,
но летела под +7° — тело и курс расходились на ~25° (кривая траектория).
На сплэше кометы летят сразу (без 30-секундного гейта .astro-enhanced,
который включает кометы натальной карты лишь на «дожившей» заставке)
и проходят за лисой — слой неба ниже логотипа по z-index. */
.app-splash-sky .astro-comet-a { animation: astro-comet-fly 3.6s ease-in 0s infinite; }
.app-splash-sky .astro-comet-b { animation: astro-comet-fly 4.8s ease-in 1.2s infinite; top: 16%; }
.app-splash-logo {
position: relative;
z-index: 1;
width: min(64vw, 44vh, 340px);
height: min(64vw, 44vh, 340px);
margin: 0 auto 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.app-splash-logo .mascot-img {
width: 100%;
height: 100%;
border-radius: 0;
/* screen вливает лиса в общее звёздное небо сплэша:
тело просвечивает, линии светятся, без «окна»-подложки */
mix-blend-mode: screen;
filter: drop-shadow(0 0 26px rgba(244,196,122,0.16));
animation: splash-fox-in 0.55s ease-out both;
}
@keyframes splash-fox-in {
from { transform: scale(0.9); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.app-splash-title {
position: relative;
font-size: 28px;
font-weight: 800;
letter-spacing: 0.02em;
color: #f7f1dd;
}
.app-splash-copy {
position: relative;
margin-top: 10px;
color: #c2c8dc;
font-size: 14px;
line-height: 1.5;
}
@keyframes splash-twinkle {
0%, 100% { transform: scale(0.8); opacity: 0.42; }
50% { transform: scale(1.16); opacity: 1; }
}
/* === AUTH === */
.auth-shell {
max-width: 420px;
margin: 0 auto;
padding-top: 60px;
}
.auth-card {
background: rgba(16, 23, 43, 0.68);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 24px;
backdrop-filter: blur(18px);
box-shadow: 0 20px 60px rgba(0,0,0,0.24);
}
.auth-actions {
display: flex;
gap: 12px;
margin-top: 20px;
}
.auth-oauth { margin-bottom: 14px; }
.btn-google {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid rgba(36, 50, 82, 0.18);
background: #fff;
color: #243252;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.auth-divider {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
color: rgba(160, 160, 176, 0.8);
font-size: 12px;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(160, 160, 176, 0.35); }
.auth-secondary-links {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 14px;
flex-wrap: wrap;
}
.auth-actions .btn-primary {
margin-top: 0;
}
.btn-secondary {
width: 100%;
padding: 16px;
border: 1px solid rgba(244, 228, 193, 0.18);
border-radius: 50px;
background: rgba(255,255,255,0.05);
color: #f4eedf;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
button,
.text-button,
.header-action,
.tab-button {
min-height: 44px;
touch-action: manipulation;
}
.auth-status {
display: none;
margin-top: 16px;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.5;
background: rgba(255,255,255,0.08);
color: #dbe4ff;
}
.auth-status.active {
display: block;
}
.auth-status.error {
background: rgba(255, 107, 107, 0.14);
color: #ffd3d3;
}
.auth-resend {
display: none;
margin-top: 12px;
}
.auth-resend.active {
display: block;
}
.auth-resend-meta {
display: none;
margin-top: 12px;
font-size: 13px;
line-height: 1.55;
color: #c7d0e8;
}
.auth-resend-meta.active {
display: block;
}
.auth-tip {
margin-top: 14px;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 6px;
border: none;
background: transparent;
padding: 0;
color: #d7ddf2;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.text-link:hover {
color: #f4e4c1;
}
.auth-tip-body {
display: none;
margin-top: 10px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.auth-tip-body.active {
display: block;
}
.auth-tip-title {
margin-bottom: 6px;
font-size: 14px;
font-weight: 700;
color: #f7f1dd;
}
.auth-tip-copy {
font-size: 13px;
line-height: 1.6;
color: #c7d0e8;
}
.auth-recovery-group,
.auth-recovery-copy {
display: none;
}
.auth-recovery-group.active {
display: block;
}
.auth-recovery-copy.active {
display: block;
margin-top: 12px;
font-size: 13px;
line-height: 1.6;
color: #c7d0e8;
}
/* === ОНБОРДИНГ === */
.onboarding {
max-width: 400px;
margin: 0 auto;
padding-top: 60px;
}
.logo {
display: flex;
justify-content: center;
margin-bottom: 14px;
}
.logo-art {
width: 86px;
height: 86px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.mascot-img {
width: 82px;
height: 82px;
border-radius: 24px;
object-fit: contain;
filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
.mascot-img--small {
width: 48px;
height: 48px;
border-radius: 14px;
}
.brand-heading {
font-size: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.brand-inline-icon {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pixel-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.pixel-icon svg {
width: 100%;
height: 100%;
display: block;
shape-rendering: crispEdges;
}
.pixel-icon svg[data-render="smooth"] {
shape-rendering: geometricPrecision;
}
.pixel-badge-icon {
width: 14px;
height: 14px;
}
.pixel-meta-icon {
width: 14px;
height: 14px;
}
.pixel-action-icon {
width: 18px;
height: 18px;
}
.pixel-mode-icon {
width: 36px;
height: 36px;
}
.ui-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: currentColor;
}
.ui-icon svg {
width: 100%;
height: 100%;
display: block;
shape-rendering: geometricPrecision;
}
.ui-badge-icon {
width: 14px;
height: 14px;
}
.ui-action-icon {
width: 18px;
height: 18px;
}
.ui-mode-icon {
width: 36px;
height: 36px;
color: var(--card-title);
}
.swipe-photo-fallback .ui-icon {
width: 84px;
height: 84px;
}
.match-avatar-fallback .ui-icon {
width: 28px;
height: 28px;
}
.profile-main-photo-fallback .ui-icon,
.profile-preview-photo-fallback .ui-icon {
width: 64px;
height: 64px;
}
.title {
font-size: 28px;
text-align: center;
margin-bottom: 10px;
font-weight: bold;
}
.subtitle {
text-align: center;
color: #b4bdd4;
margin-bottom: 30px;
font-size: 16px;
line-height: 1.5;
}
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #c0c0d0;
}
.form-group input, .form-group select, .form-group textarea {
width: 100%;
padding: 12px 14px;
border: none;
border-radius: 12px;
background: rgba(255,255,255,0.08);
color: #f7f1dd;
font-size: 16px;
outline: none;
resize: vertical;
min-height: 48px;
}
.form-group textarea {
min-height: 104px;
font-family: inherit;
line-height: 1.55;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #808090;
}
/* Дата рождения как три выпадающих списка: в нативном календаре
год приходится листать по месяцам, а ручной ввод с клавиатуры
игнорируется — на телефоне это ловушка. */
.date-select-row {
display: grid;
grid-template-columns: minmax(76px, 0.8fr) minmax(0, 1.4fr) minmax(88px, 1fr);
gap: 8px;
}
.date-select-row select {
appearance: none;
-webkit-appearance: none;
}
.date-select-row.time-select-row {
grid-template-columns: 1fr 1fr;
}
/* Дата рождения зафиксирована (миграция 111): селекты заблокированы.
Подпись .birth-date-lock-note наследует стиль .helper-text (все темы). */
.date-select-row.date-locked select:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.birth-date-lock-link {
color: inherit;
text-decoration: underline;
font-weight: 600;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
background: rgba(255,255,255,0.15);
}
.btn-primary {
width: 100%;
padding: 16px;
border: none;
border-radius: 50px;
background: linear-gradient(135deg, #f4e4c1 0%, #e6c782 100%);
color: #2a2740;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 18px;
transition: transform 0.2s;
box-shadow: 0 12px 30px rgba(230, 199, 130, 0.22);
}
.btn-primary:hover { transform: scale(1.02); }
.skip-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
padding: 10px 12px;
text-align: center;
margin-top: 20px;
color: #808090;
font-size: 14px;
cursor: pointer;
}
.skip-link:hover { color: #a0a0b0; }
/* === СВАЙПЫ === */
.swipe-container {
max-width: 400px;
margin: 0 auto;
position: relative;
min-height: calc(100vh - 188px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-bottom: 8px;
}
.header {
text-align: center;
padding: 16px;
background: var(--glass-surface);
border: 1px solid var(--border-card);
border-radius: 24px;
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 12px 32px rgba(0,0,0,0.16);
}
.header h1 { font-size: 24px; }
.header--swipe {
padding: 8px 10px;
border-radius: 18px;
}
.header--swipe .brand-heading,
.header--swipe p {
display: none;
}
.header--swipe .header-top {
display: grid;
grid-template-columns: minmax(44px, auto) minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
margin-bottom: 0;
}
.header--swipe .account-chip {
padding: 0;
font-size: 13px;
border-radius: 0;
background: transparent;
color: var(--text-secondary);
white-space: nowrap;
}
.header--swipe .header-action {
padding: 0;
font-size: 12px;
border: none;
border-radius: 0;
background: transparent;
color: var(--text-primary);
min-height: auto;
}
.header--swipe .header-tabs {
gap: 0;
padding: 2px;
height: 32px;
margin-top: 0;
border-radius: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid var(--border-card);
justify-self: center;
width: min(196px, 100%);
}
.header--swipe .tab-button {
background: transparent;
border-radius: 8px;
padding: 4px 10px;
min-height: 28px;
width: 100%;
font-size: 13px;
}
.header--swipe .tab-button.active {
background: rgba(255,255,255,0.14);
}
.header--swipe .header-actions {
justify-self: end;
}
.header-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.account-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #d7dcf7;
font-size: 13px;
}
.ghost-chip {
background: rgba(255,255,255,0.05);
color: #aeb7d7;
}
.header-action {
border: 1px solid rgba(255,255,255,0.12);
background: transparent;
color: white;
border-radius: 999px;
padding: 10px 14px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease-out, background 0.2s, border-color 0.2s;
}
.header-action:active { transform: scale(0.96); }
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.header-tabs {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 14px;
}
.tab-button {
border: none;
border-radius: 999px;
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
color: white;
background: rgba(255,255,255,0.08);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 0.12s ease-out, background 0.25s var(--ios-spring), color 0.25s var(--ios-spring);
}
.tab-button:active { transform: scale(0.96); }
.tab-button.active {
background: linear-gradient(135deg, rgba(244, 228, 193, 0.2), rgba(192, 163, 255, 0.18));
}
.card {
background:
radial-gradient(circle at top right, rgba(244, 228, 193, 0.24), transparent 28%),
linear-gradient(180deg, #f5f0e6 0%, #ece4d7 100%);
border-radius: 20px;
padding: 28px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
color: #1a1a2e;
transition: transform 0.4s var(--ios-spring), opacity 0.3s ease;
animation: surface-pop 0.4s var(--ios-spring);
position: relative;
background-image:
linear-gradient(rgba(102, 126, 234, 0.22) 0 0),
linear-gradient(rgba(102, 126, 234, 0.22) 0 0),
linear-gradient(rgba(102, 126, 234, 0.22) 0 0),
linear-gradient(rgba(102, 126, 234, 0.22) 0 0);
background-repeat: no-repeat;
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px;
background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
}
.card.swipe-left {
transform: translateX(-150%) rotate(-30deg);
opacity: 0;
}
.card.swipe-right {
transform: translateX(150%) rotate(30deg);
opacity: 0;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, #6f77d8 0%, #7b59b2 100%);
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.16), 0 0 0 8px rgba(15, 52, 96, 0.06);
}
.name {
font-size: 28px;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.birth-info {
text-align: center;
color: #5f6071;
margin-bottom: 20px;
font-size: 14px;
}
.chart-preview {
background: rgba(255,255,255,0.22);
border-radius: 12px;
padding: 15px;
margin-bottom: 20px;
font-size: 13px;
color: #565566;
}
.buttons {
display: flex;
justify-content: space-between;
gap: 15px;
}
.btn {
flex: 1;
padding: 15px;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-dislike { background: linear-gradient(135deg, #f19595 0%, #de6b7f 100%); color: #fff8f5; }
.btn-dislike:hover { background: linear-gradient(135deg, #e88989 0%, #d45f74 100%); transform: scale(1.05); }
.btn-like { background: linear-gradient(135deg, #7fcbbf 0%, #4bb0aa 100%); color: #f7fffb; }
.btn-like:hover { background: linear-gradient(135deg, #72c2b6 0%, #44a5a0 100%); transform: scale(1.05); }
.loading {
text-align: center;
padding: 40px;
font-size: 18px;
}
/* === perf-207: СКЕЛЕТОНЫ ПЕРВОЙ ЗАГРУЗКИ ===
Вместо текстовых «Подбираем людей...» / «Собираем твои мэтчи...» -
силуэты будущего контента: они занимают столько же места, сколько
реальный список и карточка, поэтому экран не прыгает. Рисуются ТОЛЬКО
когда данных нет ни в памяти, ни в localStorage; иначе контент
появляется мгновенно (см. openMatchesScreen / selectMode в src/app.js).
Цвета взяты из переменных темы, поэтому светлая тема работает сама. */
.skeleton {
background-color: var(--bg-elevated);
background-image: linear-gradient(
100deg,
transparent 22%,
rgba(255, 255, 255, 0.10) 42%,
rgba(255, 255, 255, 0.10) 54%,
transparent 74%
);
background-size: 220% 100%;
background-repeat: no-repeat;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 10px;
}
body.light-theme .skeleton,
body[data-theme="light"] .skeleton {
background-color: rgba(29, 40, 68, 0.08);
background-image: linear-gradient(
100deg,
transparent 22%,
rgba(255, 255, 255, 0.70) 42%,
rgba(255, 255, 255, 0.70) 54%,
transparent 74%
);
}
@keyframes skeleton-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: none;
background-image: none;
}
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex: none;
}
.skeleton-photo {
width: 100%;
aspect-ratio: 3 / 4;
max-height: 52vh;
border-radius: 18px;
}
.skeleton-line { height: 12px; }
.skeleton-line--title { width: 52%; height: 14px; }
.skeleton-line--text { width: 84%; }
.skeleton-line--short { width: 38%; }
.skeleton-caption {
margin-top: 14px;
text-align: center;
font-size: 14px;
color: var(--text-secondary);
}
/* Чаты: gap как у .match-list, чтобы скелетон выглядел тем же списком. */
.skeleton-stack {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Строки скелетона переиспользуют .match-item и .match-main, поэтому
сетка и отступы совпадают с настоящими; кликать по ним нечего. */
.match-item.skeleton-item { pointer-events: none; }
.match-item.skeleton-item .match-main { gap: 6px; }
/* Знакомства: силуэт карточки в #cardContainer. */
.skeleton-card {
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
border: 1px solid var(--border-card);
border-radius: 22px;
background: var(--bg-card);
box-shadow: var(--shadow-card);
}
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-state .emoji { font-size: 64px; margin-bottom: 20px; }
.empty-state .ui-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
color: var(--accent-gold);
}
.empty-state h2 { font-size: 24px; margin-bottom: 10px; }
.empty-state p { color: #a0a0b0; margin-bottom: 30px; }
/* === МОДАЛКА === */
.modal-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1200;
justify-content: center;
align-items: center;
padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
animation: overlay-fade 0.25s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.modal-overlay.active {
display: flex;
}
/* Модальные пояснения артефактов и сезонных тем открываются поверх
* открытой анкеты: при одинаковом z-index порядок в DOM оставлял бы
* их под profilePreviewModal, который объявлен позже. */
#artifactModal,
#seasonThemePreviewModal,
#photoRejectNoticeModal {
z-index: 1300;
}
.modal-overlay > * {
margin: auto;
}
.modal-content,
.card-modal-card {
position: relative;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(36, 50, 82, 0.08);
color: #243252;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
}
.modal-close .ui-icon {
width: 16px;
height: 16px;
}
/* === АКЦИЯ «1 МЕСЯЦ ОБСЕРВАТОРИИ В ПОДАРОК» + ПОЗДРАВЛЕНИЕ === */
.modal-content.welcome-promo-content,
.modal-content.welcome-premium-content {
position: relative;
width: min(400px, 100%);
max-height: 88vh;
overflow: hidden;
border-radius: 22px;
padding: 30px 22px 24px;
background:
radial-gradient(130% 90% at 50% -10%, rgba(196, 181, 224, 0.20), transparent 55%),
linear-gradient(180deg, #1b1735 0%, #12101f 100%);
border: 1px solid rgba(232, 213, 163, 0.55);
box-shadow: 0 0 34px rgba(196, 181, 224, 0.18), 0 20px 60px rgba(0, 0, 0, 0.5);
color: #f2eefb;
text-align: center;
animation: welcome-modal-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes welcome-modal-in {
from { opacity: 0; transform: translateY(14px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.wpromo-gift,
.wcongrats-medal {
position: relative;
z-index: 1;
font-size: 54px;
line-height: 1;
filter: drop-shadow(0 4px 18px rgba(232, 213, 163, 0.45));
animation: welcome-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcome-pop {
0% { transform: scale(0.4); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.wpromo-kicker,
.wcongrats-kicker {
position: relative;
z-index: 1;
margin-top: 10px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold);
}
.wpromo-title,
.wcongrats-title {
position: relative;
z-index: 1;
margin-top: 8px;
font-size: 23px;
font-weight: 700;
line-height: 1.2;
}
.wcongrats-title {
background: linear-gradient(100deg, #f4e6bd, #e8d5a3 45%, #cdb478);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.wpromo-sub,
.wcongrats-sub {
position: relative;
z-index: 1;
margin-top: 10px;
font-size: 13.5px;
line-height: 1.5;
color: rgba(242, 238, 251, 0.78);
}
.wpromo-perks,
.wcongrats-perks {
position: relative;
z-index: 1;
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
.wpromo-perks li,
.wcongrats-perks li {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
line-height: 1.35;
color: rgba(242, 238, 251, 0.9);
padding: 10px 12px;
border-radius: 14px;
background: rgba(232, 213, 163, 0.07);
border: 1px solid rgba(232, 213, 163, 0.16);
}
.wpromo-perks li span,
.wcongrats-perks li span {
font-size: 18px;
line-height: 1;
}
.wpromo-actions,
.wcongrats-actions {
position: relative;
z-index: 1;
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
}
.wpromo-actions .btn-primary,
.wcongrats-actions .btn-primary {
width: 100%;
}
.welcome-premium-content .wcongrats-glow {
position: absolute;
top: -40%;
left: 50%;
width: 320px;
height: 320px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(232, 213, 163, 0.34), transparent 62%);
filter: blur(6px);
z-index: 0;
animation: welcome-glow 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes welcome-glow {
0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.94); }
50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
/* === КОСМИЧЕСКИЙ ПАСПОРТ === */
.modal-content.cosmic-passport-content {
width: min(420px, 100%);
max-height: 88vh;
overflow-y: auto;
border-radius: 22px;
padding: 30px 22px 24px;
background:
radial-gradient(130% 90% at 50% -10%, rgba(196, 181, 224, 0.20), transparent 55%),
linear-gradient(180deg, #1b1735 0%, #12101f 100%);
border: 1px solid rgba(232, 213, 163, 0.55);
box-shadow: 0 0 34px rgba(196, 181, 224, 0.18), 0 20px 60px rgba(0, 0, 0, 0.5);
color: #f2eefb;
text-align: center;
}
.cp-kicker {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold);
}
.cp-court {
margin-top: 14px;
font-size: 12px;
letter-spacing: 0.06em;
color: rgba(242, 238, 251, 0.72);
}
.cp-glyph {
margin-top: 8px;
font-size: 56px;
line-height: 1;
filter: drop-shadow(0 4px 16px rgba(232, 213, 163, 0.35));
}
.cp-name {
margin: 10px 0 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: 30px;
line-height: 1.1;
font-weight: 700;
color: #fff;
}
.cp-sub {
margin-top: 8px;
font-size: 13px;
color: rgba(242, 238, 251, 0.85);
}
.cp-quality {
margin-top: 2px;
font-size: 12px;
letter-spacing: 0.04em;
color: var(--accent-lavender);
}
/* Кликабельные термины паспорта (двор / роль / качество): сбрасываем хром
кнопки, но НЕ трогаем font-size/color — их задают классы-компаньоны
(.cp-court, .cp-quality). Пунктир снизу подсказывает, что можно нажать. */
.cp-term {
background: none;
border: none;
border-bottom: 1px dashed rgba(232, 213, 163, 0.55);
padding: 0 0 2px;
cursor: pointer;
font-family: inherit;
transition: border-color 0.15s ease, filter 0.15s ease;
}
.cp-term:hover {
border-bottom-color: var(--accent-gold);
filter: brightness(1.18);
}
/* Роль в .cp-sub — единственный .cp-term без класса-компаньона: наследуем
размер/цвет у родителя, иначе кнопка возьмёт браузерные дефолты. */
.cp-sub .cp-term {
font-size: inherit;
color: inherit;
}
.cp-action {
margin: 16px auto 0;
max-width: 34ch;
font-size: 13.5px;
line-height: 1.55;
color: rgba(242, 238, 251, 0.9);
}
.cp-section-label {
margin-top: 22px;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(242, 238, 251, 0.5);
}
.cp-badges {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
}
.cp-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid rgba(196, 181, 224, 0.22);
background: rgba(255, 255, 255, 0.05);
color: #f2eefb;
font: inherit;
cursor: pointer;
}
.cp-badge-glyph {
font-size: 15px;
color: var(--accent-gold);
}
.cp-badge-text {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 13px;
line-height: 1.25;
}
.cp-badge-text small {
font-size: 9.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(242, 238, 251, 0.5);
}
.cp-badge-text em {
font-style: normal;
font-size: 9.5px;
color: var(--accent-lavender);
}
.cp-badge-soft {
border-style: dashed;
opacity: 0.9;
}
.cp-nudge {
margin-top: 10px;
width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(232, 213, 163, 0.4);
background: rgba(232, 213, 163, 0.1);
color: var(--accent-gold);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.cp-rare {
margin-top: 22px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(232, 213, 163, 0.45);
background: linear-gradient(180deg, rgba(232, 213, 163, 0.12), rgba(232, 213, 163, 0.04));
}
.cp-rare-name {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 8px;
font-size: 18px;
font-weight: 700;
color: #fff;
}
.cp-rare-glyph {
font-size: 20px;
}
.cp-rare-caption {
margin-top: 6px;
font-size: 12px;
line-height: 1.5;
color: rgba(242, 238, 251, 0.78);
}
.cp-forces {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.cp-force {
padding: 9px 14px;
border-radius: 14px;
border: 1px solid rgba(196, 181, 224, 0.22);
background: rgba(196, 181, 224, 0.08);
text-align: center;
}
.cp-force-name {
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(242, 238, 251, 0.95);
}
.cp-force-gloss {
display: block;
margin-top: 3px;
font-size: 11.5px;
line-height: 1.4;
color: rgba(242, 238, 251, 0.62);
}
.cp-actions {
display: flex;
gap: 10px;
margin-top: 24px;
}
.cp-actions .btn-primary,
.cp-actions .btn-secondary {
flex: 1;
}
.cp-empty {
padding: 20px 0;
font-size: 13.5px;
color: rgba(242, 238, 251, 0.75);
}
/* Тёмные «космические» карточки (паспорт + модалки акции) обязаны оставаться
тёмными в ОБЕИХ темах. Базовое .modal-content (светлый пергаментный фон,
ниже по файлу) и body.light-theme .modal-content (тёмный текст) при равной
или большей специфичности перебивали тёмный фон и светлый текст — карточка
становилась нечитаемой (инцидент v236: «космический паспорт не читается ни
в светлой, ни в тёмной теме»). Специфичность .modal-content. (0,2,0)
уже перекрывает базовое .modal-content (0,1,0); этот guard добивает
light-theme-переопределения цвета контейнера (0,2,1) и внутренних кнопок. */
body.light-theme .modal-content.cosmic-passport-content,
body[data-theme="light"] .modal-content.cosmic-passport-content,
body.light-theme .modal-content.welcome-promo-content,
body[data-theme="light"] .modal-content.welcome-promo-content,
body.light-theme .modal-content.welcome-premium-content,
body[data-theme="light"] .modal-content.welcome-premium-content {
color: #f2eefb;
}
/* Кнопки на тёмной поверхности: .modal-content .btn-secondary (тёмно-синий
текст на почти прозрачном фоне) и light-theme .text-button (тёмный текст)
на тёмной карточке нечитаемы — задаём светлый текст и лёгкую подсветку. */
.modal-content.cosmic-passport-content .btn-secondary {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(244, 228, 193, 0.22);
color: #f4eedf;
}
.modal-content.welcome-promo-content .text-button,
.modal-content.welcome-premium-content .text-button {
color: rgba(242, 238, 251, 0.72);
}
/* Живой вход «Мой космический паспорт» в анкете: лёгкое космическое
свечение поверх обычной карточки раздела. */
.cosmic-passport-entry {
border: 1px solid rgba(196, 181, 224, 0.45);
box-shadow: 0 0 0 1px rgba(232, 213, 163, 0.10), 0 8px 30px rgba(124, 92, 255, 0.10);
}
/* Момент «карта уточнилась» внутри модалки паспорта. */
.cp-refined {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 14px;
padding: 12px 14px;
border-radius: 14px;
text-align: center;
border: 1px solid rgba(232, 213, 163, 0.5);
background: linear-gradient(135deg, rgba(232, 213, 163, 0.16), rgba(196, 181, 224, 0.10));
}
.cp-refined strong {
font-size: 13.5px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--accent-gold);
}
.cp-refined span {
font-size: 12.5px;
color: rgba(242, 238, 251, 0.82);
}
/* CTA «Показать новый паспорт» в шаге 'done' модалки уточнения времени. */
.bt-passport-refined {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(196, 181, 224, 0.4);
background: rgba(196, 181, 224, 0.08);
}
.match-celebration-overlay {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.match-celebration-card {
width: min(320px, 92vw);
border-radius: 24px;
padding: 28px;
background:
radial-gradient(circle at top, rgba(232, 213, 163, 0.16), transparent 34%),
var(--bg-card);
border: 1px solid var(--border-card);
box-shadow: 0 22px 56px rgba(0,0,0,0.34);
color: var(--text-primary);
text-align: center;
animation: modal-rise 0.35s var(--ios-spring);
}
.match-celebration-icon {
width: 56px;
height: 56px;
margin: 0 auto 14px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(232, 213, 163, 0.12);
border: 1px solid rgba(232, 213, 163, 0.24);
color: var(--accent-gold);
}
.match-celebration-icon span {
width: 28px;
height: 28px;
}
.match-celebration-title {
font-size: 22px;
font-weight: 800;
margin-bottom: 6px;
}
.match-celebration-subtitle {
font-size: 14px;
line-height: 1.45;
color: var(--text-secondary);
margin-bottom: 16px;
}
.match-celebration-avatars {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.match-celebration-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
background: rgba(0,0,0,0.12);
border: 2px solid rgba(255,255,255,0.14);
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.match-celebration-avatars .match-celebration-avatar + .match-celebration-avatar {
margin-left: -10px;
}
.match-celebration-actions {
display: grid;
gap: 10px;
margin-top: 8px;
}
.modal-content {
background:
radial-gradient(circle at top right, rgba(244, 228, 193, 0.24), transparent 28%),
linear-gradient(180deg, #f6f1e8 0%, #ece5da 100%);
background-color: #f4efe6;
border-radius: 24px;
padding: 26px;
max-width: 460px;
width: 100%;
max-height: 92vh;
color: #1a1a2e;
display: flex;
flex-direction: column;
gap: 2px;
border: 1px solid rgba(117, 94, 58, 0.1);
box-shadow: 0 28px 72px rgba(0,0,0,0.28);
animation: modal-rise 0.35s var(--ios-spring);
}
/* Проверка устойчивости: два портрета + кнопки бывают выше экрана.
Без скролла белая карта (.modal-content, max-height:92vh) обрывалась,
а текст вылезал на тёмный оверлей. Скроллим только тело - заголовок и
крестик (position:absolute) остаются на месте. */
#birthTimeModalBody {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.modal-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.modal-title .ui-icon {
width: 20px;
height: 20px;
}
.modal-text {
font-size: 16px;
line-height: 1.6;
color: #444;
margin-bottom: 20px;
white-space: pre-line;
overflow-wrap: anywhere;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-right: 6px;
flex: 1 1 auto;
min-height: 0;
}
.modal-stack {
display: grid;
gap: 12px;
}
.modal-note {
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
}
.spinner {
display: none;
text-align: center;
padding: 20px;
}
.spinner.active { display: block; }
.spinner-circle {
width: 10px;
height: 10px;
background: #7f8dff;
box-shadow: 14px 0 0 #4ecdc4, 0 14px 0 #ffd166, 14px 14px 0 #ff6b8a;
transform-origin: 12px 12px;
image-rendering: pixelated;
animation: spin 1s linear infinite;
margin: 0 auto 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: bold;
margin-right: 5px;
}
.badge-sun { background: #e7c96b; color: #39343b; }
.badge-moon { background: #c9c4cb; color: #39343b; }
.compatibility-preview {
margin: 4px 0 18px;
padding: 14px 16px;
background: var(--profile-theme-chip-bg, rgba(255, 255, 255, 0.05));
border: 1px solid var(--profile-theme-chip-border, rgba(255, 255, 255, 0.08));
border-radius: 18px;
}
.preview-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--profile-theme-label, rgba(240, 235, 248, 0.56));
margin-bottom: 8px;
font-weight: 700;
}
.preview-item {
font-size: 13px;
line-height: 1.5;
color: var(--profile-theme-chip-text, rgba(240, 235, 248, 0.86));
padding: 7px 0;
border-bottom: 1px solid var(--profile-theme-chip-border, rgba(255, 255, 255, 0.08));
}
.preview-item:last-child {
border-bottom: none;
}
.preview-note {
margin-top: 10px;
font-size: 12px;
color: #6b6b7b;
line-height: 1.4;
}
.helper-text {
margin-top: 8px;
font-size: 12px;
color: #9ca3af;
line-height: 1.4;
}
.status-box {
display: none;
background: rgba(236, 240, 252, 0.84);
border-radius: 12px;
padding: 12px;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.5;
color: #4b5563;
border: 1px solid rgba(145, 132, 163, 0.12);
}
.status-box.active {
display: block;
}
.research-note {
margin-top: 14px;
text-align: center;
font-size: 12px;
color: #a0a0b0;
line-height: 1.5;
}
.toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(20px);
background: rgba(12, 18, 37, 0.94);
color: white;
padding: 12px 16px;
border-radius: 14px;
font-size: 14px;
line-height: 1.4;
width: min(360px, calc(100% - 32px));
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s var(--ios-spring);
z-index: 1200;
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.toast.active {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* polish-67: prompt обновления PWA. Появляется внизу, не блокирует
интерфейс, исчезает через таймаут или по тапу "Обновить". */
.update-prompt {
position: fixed;
left: 50%;
bottom: calc(24px + env(safe-area-inset-bottom));
transform: translateX(-50%) translateY(120%);
display: flex;
align-items: center;
gap: 12px;
background: rgba(12, 18, 37, 0.96);
color: white;
padding: 10px 12px 10px 18px;
border-radius: 16px;
font-size: 14px;
line-height: 1.35;
width: min(400px, calc(100% - 32px));
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.35s var(--ios-spring);
z-index: 1201;
box-shadow: 0 12px 40px rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.08);
}
.update-prompt.active {
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.update-prompt-button {
flex: none;
background: linear-gradient(135deg, #7c5cff 0%, #4f3bd8 100%);
color: white;
border: none;
border-radius: 12px;
padding: 8px 14px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.update-prompt-button:active {
transform: scale(0.96);
}
.matches-shell,
.chat-shell {
max-width: 420px;
margin: 0 auto;
min-height: calc(100vh - 40px);
display: flex;
flex-direction: column;
}
.panel-card {
background: rgba(16, 23, 43, 0.7);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 18px;
backdrop-filter: blur(18px);
box-shadow: 0 20px 60px rgba(0,0,0,0.24);
animation: surface-pop 0.35s var(--ios-spring);
}
/* Звёзды в полный рост (2026-08-31): единый визуал карточки для
библиотеки, «гостя дня» и анкеты звезды — как у свайп-карточек
в «Знакомствах». Портретные PNG кадрируются сверху, чтобы голова
никогда не обрезалась. */
.star-full-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.star-full-emoji {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 84px;
background: radial-gradient(circle at 50% 32%, rgba(124, 92, 255, 0.35), rgba(10, 13, 36, 0.92));
}
.star-full-scrim {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 56%;
background: linear-gradient(180deg, rgba(7, 10, 18, 0) 0%, rgba(10, 14, 26, 0.55) 42%, rgba(12, 17, 34, 0.94) 100%);
pointer-events: none;
}
.star-card {
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 26px;
overflow: hidden;
background: linear-gradient(180deg, rgba(12, 17, 34, 0.98), rgba(18, 28, 50, 0.98));
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24);
margin-bottom: 16px;
animation: surface-pop 0.35s var(--ios-spring);
}
.star-card-stage {
position: relative;
height: min(44vh, 380px);
overflow: hidden;
cursor: pointer;
background: #0e1322;
}
.star-card-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 18px 18px 14px;
pointer-events: none;
}
.star-card-name {
font-size: 24px;
line-height: 1.1;
font-weight: 800;
color: #fff9ef;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.star-card-category {
margin-top: 5px;
font-size: 13px;
color: rgba(255, 247, 232, 0.82);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.star-card-region {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 4px 10px;
border-radius: 999px;
background: rgba(9, 13, 26, 0.5);
border: 1px solid rgba(232, 213, 163, 0.35);
color: #ffe0a8;
font-size: 12px;
font-weight: 600;
backdrop-filter: blur(6px);
}
/* Панель фильтров звёзд (пол / регион): чипы в два ряда, переключение мгновенное, без рефетча. */
.stars-filter-bar {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 16px;
}
.stars-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.stars-filter-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(160, 160, 176, 0.9);
}
.stars-filter-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.stars-filter-chip {
display: inline-flex;
align-items: center;
padding: 6px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #d9d4ea;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.stars-filter-chip.active {
background: linear-gradient(135deg, #ffd68c, #e8d5a3);
border-color: transparent;
color: #241a05;
font-weight: 700;
}
.star-card-today {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
padding: 6px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #ffd68c, #e8d5a3);
color: #241a05;
font-weight: 700;
font-size: 12px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.star-card-vibe {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
padding: 6px 12px;
border-radius: 999px;
background: rgba(9, 13, 26, 0.55);
border: 1px solid rgba(232, 213, 163, 0.5);
color: #ffd68c;
font-size: 12px;
font-weight: 700;
backdrop-filter: blur(8px);
}
.star-card-group {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
padding: 6px 12px;
border-radius: 999px;
background: rgba(9, 13, 26, 0.6);
border: 1px solid rgba(232, 213, 163, 0.5);
color: #ffd68c;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
backdrop-filter: blur(8px);
}
.star-card-body {
padding: 14px 18px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.star-card-fact {
font-size: 14px;
line-height: 1.5;
color: rgba(240, 235, 248, 0.85);
}
/* Запасные фоны под арты звёзд (с v173 арты - .webp): показываются, пока картинка грузится.
melstroy: до 2026-09-01 в его PNG была «шахматка» прозрачности;
теперь фон вписан в сам файл, градиент ниже — просто фолбэк. */
[src*="/assets/stars/Eva.webp"] { background: linear-gradient(135deg, #2a1a4a 0%, #1a1a3e 100%); }
[src*="/assets/stars/Sweetie.webp"] { background: linear-gradient(135deg, #ff7ab6 0%, #ffc6e0 100%); }
[src*="/assets/stars/dora.webp"] { background: linear-gradient(135deg, #ffb27a 0%, #ff7ab0 100%); }
[src*="/assets/stars/evgeniy.webp"] { background: linear-gradient(135deg, #3a3a4a 0%, #1e1e2a 100%); }
[src*="/assets/stars/guf.webp"] { background: linear-gradient(135deg, #1a2a4a 0%, #0e1a2e 100%); }
[src*="/assets/stars/zolo.webp"] { background: linear-gradient(135deg, #ff6a2a 0%, #b42a1a 100%); }
[src*="/assets/stars/melstroy.webp"] { background: linear-gradient(135deg, #ffb347 0%, #b45309 100%); }
/* Анкета звезды (модалка): та же тёмная карточка, фото в полный рост. */
.star-profile-card {
position: relative;
width: min(430px, calc(100vw - 32px));
max-height: min(92dvh, 780px);
overflow-y: auto;
overflow-x: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 28px;
background: linear-gradient(180deg, rgba(12, 17, 34, 0.99), rgba(18, 28, 50, 0.99));
color: #f0ebf8;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
animation: surface-pop 0.35s var(--ios-spring);
}
.star-profile-close {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background: rgba(9, 13, 26, 0.55);
backdrop-filter: blur(10px);
color: #f0ebf8;
cursor: pointer;
}
/* Без явного размера .ui-icon svg растягивался на всю кнопку —
в анкете звезды был «огромный крест» (багрепорт 2026-09-01). */
.star-profile-close .ui-icon {
width: 16px;
height: 16px;
}
.star-profile-stage {
position: relative;
height: min(46vh, 400px);
overflow: hidden;
background: #0e1322;
}
.star-vibe-block {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(232, 213, 163, 0.22);
border-radius: 18px;
padding: 16px;
text-align: center;
}
.star-vibe-name { font-size: 18px; font-weight: 700; margin-top: 4px; color: #fff9ef; }
.star-vibe-tagline { color: rgba(240, 235, 248, 0.65); font-size: 13px; margin-top: 4px; }
.star-vibe-strength { font-size: 18px; font-weight: 700; color: #ffd68c; margin-top: 8px; }
.star-vibe-scenario { color: rgba(240, 235, 248, 0.75); font-size: 13px; margin-top: 8px; line-height: 1.5; }
/* Действия в анкете звезды: ссылка на Instagram и «Скрыть из профиля».
Модалка тёмная в обеих темах — стили рисуем сразу под тёмный фон. */
.star-instagram-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
border-radius: var(--radius-button);
background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: transform 0.12s ease-out, filter 0.2s;
}
.star-instagram-link:hover { filter: brightness(1.07); }
.star-instagram-link:active { transform: scale(0.97); }
.star-hide-button {
background: transparent;
color: rgba(240, 235, 248, 0.68);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--radius-button);
padding: 11px 18px;
font-size: 13.5px;
font-weight: 600;
font-family: 'Manrope', sans-serif;
cursor: pointer;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s ease-out;
}
.star-hide-button:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 122, 122, 0.5);
color: #ffb4b4;
}
.star-hide-button:active { transform: scale(0.97); }
/* «Звёздные связи» в профиле: горизонтальная лента мини-карточек
в полный рост — плотная витрина уже проверенных вайбов. */
.star-links-strip {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 6px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.star-link-tile {
position: relative;
flex: 0 0 122px;
height: 172px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 18px;
overflow: hidden;
background: #0e1322;
padding: 0;
cursor: pointer;
text-align: left;
transition: transform 0.18s var(--ios-spring);
}
.star-link-tile:active { transform: scale(0.965); }
.star-link-rank {
position: absolute;
top: 8px;
left: 8px;
z-index: 3;
font-size: 15px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.star-link-caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 8px 10px;
pointer-events: none;
}
.star-link-name {
font-size: 12px;
font-weight: 700;
color: #fff9ef;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.star-link-vibe {
margin-top: 2px;
font-size: 11px;
color: #ffd68c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.star-aspects {
margin-top: 12px;
font-size: 13px;
color: var(--card-copy);
line-height: 1.7;
}
.star-moon-note {
margin-top: 10px;
font-size: 12px;
color: var(--card-copy);
opacity: 0.85;
}
.star-place-note {
margin-top: 12px;
padding: 10px 12px;
font-size: 12px;
line-height: 1.5;
color: var(--card-copy);
background: var(--glass-surface);
border: 1px solid var(--border-card);
border-radius: 14px;
}
.star-place-note-link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
}
.star-group-top {
margin: 16px 0 6px;
padding: 14px 16px;
text-align: center;
border: 1px solid rgba(232, 213, 163, 0.45);
background: linear-gradient(135deg, rgba(255, 214, 140, 0.12), rgba(124, 92, 255, 0.1));
border-radius: 18px;
}
.star-group-top-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffd68c;
}
.star-group-top-name {
margin-top: 4px;
font-size: 22px;
font-weight: 800;
color: rgba(255, 255, 255, 0.95);
}
.star-group-top-vibe {
margin-top: 2px;
font-size: 13px;
color: var(--card-copy);
}
.star-group-ranking {
margin-top: 14px;
padding: 12px 14px;
background: var(--glass-surface);
border: 1px solid var(--border-card);
border-radius: 16px;
}
.star-group-ranking-title {
margin-bottom: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--card-copy);
}
.star-group-ranking-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: 10px;
font-size: 13px;
}
.star-group-ranking-row.top {
background: rgba(255, 214, 140, 0.12);
border: 1px solid rgba(232, 213, 163, 0.4);
}
.star-group-ranking-pos {
flex: 0 0 auto;
width: 18px;
text-align: center;
font-weight: 700;
color: var(--card-copy);
}
.star-group-ranking-name {
flex: 1 1 auto;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.star-group-ranking-vibe {
flex: 0 1 auto;
max-width: 45%;
font-size: 12px;
color: var(--card-copy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.star-group-ranking-strength {
flex: 0 0 auto;
font-weight: 700;
color: #ffd68c;
}
.star-group-members {
font-size: 13px;
line-height: 1.6;
color: var(--card-copy);
}
.star-group-members-label {
font-weight: 700;
color: rgba(255, 255, 255, 0.9);
}
.star-group-member {
display: inline-block;
margin: 4px 4px 0 0;
padding: 3px 10px;
border-radius: 999px;
background: var(--glass-surface);
border: 1px solid var(--border-card);
font-size: 12px;
color: rgba(255, 255, 255, 0.88);
}
.star-strength {
margin: 16px 0 6px;
padding: 14px 16px;
border: 1px solid var(--border-card);
background: var(--glass-surface);
border-radius: 18px;
}
.star-strength-row {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 8px;
}
.star-strength-label { font-size: 13px; color: var(--card-copy); }
.star-strength-value { font-size: 22px; font-weight: 700; color: var(--card-title); }
.star-strength-max { font-size: 13px; font-weight: 500; color: var(--card-copy); }
.star-strength-bar {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.star-strength-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #7c5cff, #ff6ec7);
}
.star-strength-note { margin-top: 6px; font-size: 12px; color: var(--card-copy); }
.star-facets {
display: flex;
gap: 10px;
margin: 12px 0 2px;
}
.star-facet {
flex: 1;
min-width: 0;
padding: 12px 10px;
border: 1px solid var(--border-card);
background: var(--glass-surface);
border-radius: 16px;
text-align: center;
}
.star-facet-label { font-size: 14px; font-weight: 700; color: var(--card-title); }
.star-facet-level { margin-top: 4px; font-size: 13px; font-weight: 600; color: #ffd68c; }
.star-facet-gloss { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--card-copy); }
.star-scenario {
margin: 12px 0 2px;
font-size: 14px;
line-height: 1.55;
color: var(--card-title);
}
.star-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.star-badge {
font-size: 12px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 110, 199, 0.4);
background: rgba(255, 110, 199, 0.12);
color: #ffb1dd;
}
.screen-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 2px;
gap: 12px;
margin-bottom: 16px;
padding: 12px 14px;
border-radius: 22px;
background: var(--glass-surface);
border: 1px solid var(--border-card);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.screen-header-actions {
flex-wrap: wrap;
justify-content: flex-end;
gap: 2px;
min-width: 0;
}
.matches-header {
padding: 10px 14px;
margin-bottom: 12px;
}
.screen-header .text-button {
padding: 10px 8px;
white-space: nowrap;
}
.chat-head-id {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
margin-left: 2px;
cursor: pointer;
}
.chat-header-compact {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 40px;
align-items: center;
padding: 8px 14px;
}
.chat-header-compact .chat-head-id {
justify-self: center;
max-width: 100%;
}
.icon-button {
width: 36px;
height: 36px;
flex: none;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.09);
color: var(--text-primary);
font-size: 17px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.12s ease-out, background 0.2s;
}
.icon-button:active { transform: scale(0.94); }
body.light-theme .icon-button {
background: rgba(29, 40, 68, 0.08);
}
.chat-vibe-tagline {
margin: 0 0 10px;
color: var(--insight-copy);
}
.chat-vibe-note {
margin: 0;
padding: 8px 12px;
border-left: 2px solid var(--accent-gold, #e8c47a);
background: rgba(255, 255, 255, 0.04);
border-radius: 0 12px 12px 0;
color: var(--insight-copy);
font-style: italic;
}
.chat-vibe-note--pending {
font-style: normal;
opacity: 0.7;
}
body.light-theme .chat-vibe-note {
background: rgba(29, 40, 68, 0.04);
}
.chat-head-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex: none;
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.chat-head-avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.chat-head-avatar-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #f0ebf8;
font-size: 18px;
background: linear-gradient(160deg, rgba(46, 40, 78, 0.96), rgba(17, 24, 44, 0.98));
}
.chat-head-stack {
display: grid;
gap: 3px;
min-width: 0;
justify-items: start;
}
.chat-head-name {
font-size: 18px;
line-height: 1.15;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-head-artifacts {
display: flex;
align-items: center;
gap: 4px;
}
.chat-head-artifacts .match-artifact {
width: 22px;
height: 22px;
border-radius: 7px;
}
.chat-head-artifacts .match-artifact .artifact-icon {
width: 13px;
height: 13px;
}
.screen-title {
font-size: 24px;
font-weight: 700;
}
.text-button {
border: none;
background: transparent;
color: #c9d2ff;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
line-height: 1.25;
transition: transform 0.12s ease-out, color 0.2s;
}
.text-button:active { transform: scale(0.96); }
.match-list {
display: flex;
flex-direction: column;
gap: 0;
}
/* Компактная строка мэтча: сверху аватарка -> превью сообщения ->
артефакты -> имя, снизу тонкая полоска со статусом и временем. */
.match-item {
width: 100%;
border: none;
background: transparent;
color: #f5efdf;
border-radius: 0;
padding: 8px;
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto auto;
grid-template-rows: 40px auto;
column-gap: 8px;
row-gap: 2px;
align-items: center;
cursor: pointer;
text-align: left;
transition: transform 0.12s ease-out, background 0.25s var(--ios-spring);
will-change: transform;
}
.match-item + .match-item {
border-top: 1px solid rgba(255,255,255,0.07);
}
.match-item:active { transform: scale(0.99); background: rgba(255,255,255,0.03); }
.match-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* ── «Тебя лайкнули»: рейл входящих лайков над списком мэтчей ──────────
Токены темы (bg/border/text/radius) — светлая и тёмная adapting
автоматически, отдельных light-переопределений не нужно. */
.liked-you-rail {
margin: 0 0 14px;
padding: 14px 16px 16px;
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
}
.liked-you-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.liked-you-title {
font-size: 16px;
font-weight: 800;
color: var(--text-primary);
}
.liked-you-subtitle {
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
}
.liked-you-count {
flex: none;
font-size: 12px;
font-weight: 800;
color: var(--accent-coral);
}
.liked-you-list {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.liked-you-list::-webkit-scrollbar { height: 0; }
.liked-you-card {
position: relative;
flex: none;
width: 92px;
scroll-snap-align: start;
}
.liked-you-open {
display: grid;
justify-items: center;
gap: 6px;
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
}
.liked-you-avatar {
position: relative;
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--accent-coral);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 0 0 3px rgba(212, 117, 107, 0.12);
}
.liked-you-avatar-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.liked-you-avatar-fallback {
width: 100%;
height: 100%;
}
.liked-you-name {
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.liked-you-like {
position: absolute;
top: 52px;
right: 2px;
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
cursor: pointer;
display: grid;
place-items: center;
background: var(--accent-coral);
color: #fff;
box-shadow: var(--shadow-button);
transition: transform 0.12s ease-out;
}
.liked-you-like:active { transform: scale(0.9); }
.liked-you-like svg { width: 16px; height: 16px; }
/* Бейдж входящих лайков на табе «Чаты» (считается в updateLikesNavBadge). */
.bottom-nav-button { position: relative; }
.nav-badge {
position: absolute;
top: 3px;
right: 12px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: #ff6b8a;
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 16px;
text-align: center;
box-shadow: 0 0 0 2px var(--bg-primary);
pointer-events: none;
}
.match-meta {
min-width: 0;
}
.match-name {
font-size: 16px;
font-weight: 700;
margin-bottom: 4px;
color: #f7f1dd;
}
.match-preview {
font-size: 14px;
color: #e3e7f5;
line-height: 1.45;
}
.match-preview-stack {
display: grid;
gap: 8px;
}
.match-artifact-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.match-artifact {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(22, 33, 62, 0.95), rgba(15, 52, 96, 0.95));
border: 1px solid rgba(255, 209, 102, 0.22);
box-shadow: 0 0 10px rgba(102, 126, 234, 0.14);
}
.match-artifact .artifact-icon {
width: 17px;
height: 17px;
}
.match-badge {
font-size: 12px;
color: #dbe4ff;
background: rgba(255,255,255,0.08);
border-radius: 999px;
padding: 6px 10px;
white-space: nowrap;
}
.chat-card {
display: flex;
flex-direction: column;
gap: 14px;
min-height: calc(100vh - 220px);
padding-bottom: 14px;
}
/* Мессенджер-стандарт: экран чата статичен (не тянется резиной
и не листает страницу), прокручивается только лента сообщений. */
body:has(#chatScreen.active) {
overflow: hidden;
overscroll-behavior: none;
}
#chatScreen {
height: 100vh;
height: 100dvh;
min-height: 0;
/* Меню в диалоге скрыто -> чат до упора вниз, но с зазором 6px и
safe-area (env + Telegram --tg-safe-area-inset-bottom), чтобы
поле ввода не залезало под home-индикатор. */
padding-bottom: calc(6px + max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)));
overflow: hidden;
overscroll-behavior: none;
}
#chatScreen .chat-shell {
height: 100%;
min-height: 0;
}
#chatScreen .chat-header-compact {
flex: none;
margin-bottom: 10px;
}
#chatScreen .chat-card {
flex: 1;
min-height: 0;
overflow: hidden;
}
#chatScreen .chat-messages {
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#chatScreen .chat-compose,
#chatScreen .moment-status-note {
flex: none;
}
.chat-info {
background: var(--bg-elevated);
border-radius: 18px;
padding: 14px;
color: var(--insight-copy);
font-size: 14px;
line-height: 1.5;
white-space: pre-line;
overflow-wrap: anywhere;
border: 1px solid rgba(255,255,255,0.06);
}
.icebreaker-buttons {
display: grid;
gap: 10px;
margin-top: 14px;
}
.pair-icebreaker-title {
margin-top: 12px;
font-weight: 700;
}
.pair-icebreaker-text {
margin-top: 6px;
font-size: 14.5px;
line-height: 1.5;
}
.icebreaker-button {
border: 1px solid rgba(255,255,255,0.12);
border-radius: 14px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.87);
padding: 12px 14px;
font-size: 14px;
line-height: 1.45;
text-align: left;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.icebreaker-button .ui-icon {
width: 16px;
height: 16px;
color: var(--accent-gold);
}
.chat-messages {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 4px;
padding-bottom: 6px;
}
.chat-bubble {
max-width: 82%;
padding: 12px 14px;
border-radius: 18px;
font-size: 14px;
line-height: 1.45;
overflow-wrap: anywhere;
box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.chat-bubble.me {
align-self: flex-end;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.chat-bubble.them {
align-self: flex-start;
background: rgba(255,255,255,0.08);
color: #edf1ff;
}
.chat-meta-line {
font-size: 11px;
color: #aeb7d7;
margin-top: 6px;
}
.chat-compose {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 4px;
}
.chat-compose input {
flex: 1;
min-width: 0;
border: none;
border-radius: 16px;
padding: 14px 16px;
background: rgba(255,255,255,0.08);
color: white;
font-size: 15px;
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(12px);
}
.chat-compose button {
border: none;
border-radius: 16px;
padding: 12px 14px;
flex-shrink: 0;
white-space: nowrap;
background: linear-gradient(135deg, #4ecdc4 0%, #3aa8c0 100%);
color: white;
cursor: pointer;
font-weight: 700;
transition: transform 0.12s ease-out, box-shadow 0.2s;
box-shadow: 0 12px 24px rgba(58, 168, 192, 0.22);
}
.moment-button {
border-radius: 14px;
padding: 0 14px;
font-size: 18px;
flex-shrink: 0;
background: rgba(255,255,255,0.10);
color: white;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.12);
}
.moment-button.gated {
opacity: 0.45;
filter: grayscale(0.6);
}
.moment-status-note {
font-size: 12px;
color: #aeb7d7;
padding: 6px 2px 0;
}
/* polish-53: элегантный чат в духе Apple Messages — тонкий шапочный
ряд, пузыри с «хвостиком», капсульный инпут и круглые кнопки. */
#chatScreen .chat-header-compact {
padding: 6px 10px;
}
#chatScreen .icon-button {
width: 34px;
height: 34px;
min-height: 0;
background: rgba(255, 255, 255, 0.06);
font-size: 16px;
}
#chatScreen .chat-head-avatar {
width: 38px;
height: 38px;
}
#chatScreen .chat-head-name {
font-size: 17px;
font-weight: 600;
}
#chatScreen .chat-head-stack {
justify-items: center;
gap: 2px;
}
#chatScreen .chat-head-artifacts .match-artifact {
width: 20px;
height: 20px;
min-height: 0;
border-radius: 6px;
}
#chatScreen .chat-head-artifacts .match-artifact .artifact-icon {
width: 12px;
height: 12px;
}
/* Пузыри: асимметричное скругление со стороны «хвостика», ритм
плотнее; подряд идущие сообщения одного автора — ближе друг к другу. */
.chat-bubble {
padding: 10px 14px;
font-size: 14.5px;
}
.chat-bubble.me { border-radius: 18px 18px 6px 18px; }
.chat-bubble.them { border-radius: 18px 18px 18px 6px; }
.chat-bubble.me + .chat-bubble.me,
.chat-bubble.them + .chat-bubble.them {
margin-top: -4px;
}
.chat-meta-line {
margin-top: 4px;
font-size: 10px;
text-align: right;
opacity: 0.75;
}
.chat-messages { gap: 8px; }
/* Пустой диалог: мягкая подсказка по центру вместо пустоты. */
.chat-empty-state {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 28px 20px;
text-align: center;
}
.chat-empty-icon { font-size: 26px; }
.chat-empty-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.chat-empty-copy {
font-size: 13px;
line-height: 1.45;
max-width: 240px;
color: var(--text-secondary, #a0a0b0);
}
/* Композер: одна ось, капсульный инпут, круглые кнопки 44px. */
.chat-compose {
gap: 8px;
padding-top: 6px;
}
.chat-compose input {
border-radius: 999px;
padding: 12px 18px;
background: rgba(255, 255, 255, 0.06);
}
.chat-compose .moment-button {
position: relative;
width: 44px;
height: 44px;
min-height: 0;
border-radius: 50%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 17px;
background: rgba(255, 255, 255, 0.06);
}
.moment-count {
position: absolute;
top: -6px;
right: -10px;
padding: 2px 6px;
border-radius: 999px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
font-size: 9px;
font-weight: 700;
}
.chat-compose .chat-send-button {
width: 44px;
height: 44px;
min-height: 0;
border-radius: 50%;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4ecdc4 0%, #3aa8c0 100%);
box-shadow: 0 10px 22px rgba(58, 168, 192, 0.28);
}
.chat-compose .chat-send-button:active { transform: scale(0.94); }
.moment-card-title {
font-weight: 700;
}
.moment-card-note {
font-size: 12px;
opacity: 0.85;
margin-top: 4px;
}
.moment-open-button {
margin-top: 8px;
border: none;
border-radius: 12px;
padding: 8px 14px;
background: linear-gradient(135deg, #4ecdc4 0%, #3aa8c0 100%);
color: white;
font-weight: 700;
cursor: pointer;
}
.moment-viewer-overlay {
position: fixed;
inset: 0;
background: rgba(4, 6, 16, 0.96);
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
z-index: 120;
padding: 20px;
}
.moment-viewer-overlay.active {
display: flex;
}
.moment-viewer-hud {
display: flex;
align-items: center;
gap: 12px;
}
.moment-viewer-countdown {
font-size: 20px;
font-weight: 800;
color: #ffd166;
}
.moment-close-button,
.moment-report-button {
border: none;
border-radius: 12px;
padding: 8px 14px;
cursor: pointer;
font-weight: 700;
}
.moment-close-button {
background: rgba(255,255,255,0.16);
color: white;
}
.moment-report-button {
background: rgba(255, 107, 107, 0.22);
color: #ffb4b4;
}
.moment-viewer-image {
max-width: 100%;
max-height: 70vh;
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.moment-viewer-note {
font-size: 12px;
color: #8a93b5;
}
.chat-compose button:active { transform: scale(0.96); }
.unlock-card {
background: rgba(102, 126, 234, 0.14);
border: 1px solid rgba(148, 163, 255, 0.2);
border-radius: 18px;
padding: 14px;
}
.unlock-card h3 {
font-size: 15px;
margin-bottom: 8px;
}
.unlock-card p {
font-size: 13px;
line-height: 1.45;
color: #dbe4ff;
}
.unlock-card .btn-primary {
margin-top: 14px;
}
.mode-shell {
max-width: 420px;
margin: 0 auto;
padding-top: 32px;
}
/* v184: стили подростковой плашки mode-teen-note удалены вместе с самой
плашкой - знакомства у подростка просто отсутствуют в интерфейсе. */
.mode-grid {
display: grid;
gap: 14px;
margin-top: 24px;
}
.mode-card {
width: 100%;
border: none;
border-radius: 24px;
background: var(--mode-card-bg);
color: var(--card-title);
padding: 22px;
text-align: left;
cursor: pointer;
box-shadow: var(--shadow-card);
border: 1px solid var(--mode-card-border);
transition: transform 0.18s var(--ios-spring), border-color 0.22s, background 0.22s;
}
.mode-card:active { transform: scale(0.985); }
.mode-emoji {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}
.mode-card h3 {
font-size: 20px;
margin-bottom: 8px;
color: var(--card-title);
}
.mode-card p {
font-size: 14px;
line-height: 1.5;
color: var(--card-copy);
}
.mode-card .helper-text {
color: var(--card-copy);
margin-top: 10px;
}
.mode-context-banner {
display: grid;
gap: 8px;
}
.mode-greeting {
font-size: 24px;
font-weight: 800;
color: var(--card-title);
line-height: 1.2;
margin-bottom: 6px;
}
.mode-greeting-copy {
font-size: 14px;
line-height: 1.55;
color: var(--card-copy);
margin-bottom: 18px;
}
.mode-shell .screen-header .screen-title {
color: var(--text-primary);
}
.mode-context-banner strong {
font-size: 17px;
color: var(--banner-text);
}
.mode-context-banner p {
font-size: 14px;
line-height: 1.55;
color: var(--card-copy);
}
#modeChoiceResearchBanner {
background: var(--banner-bg);
border-color: var(--border-card);
position: relative;
cursor: pointer;
padding-right: 44px;
transition: transform 0.18s var(--ios-spring), border-color 0.22s, background 0.22s;
}
#modeChoiceResearchBanner:active { transform: scale(0.985); }
/* v212: карточка «Сегодня для тебя» тапается целиком — шеврон как
iOS-аффорданс перехода, кнопка внутри больше не нужна. */
.today-block-chevron {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
line-height: 1;
color: var(--text-secondary);
opacity: 0.65;
pointer-events: none;
}
.today-block-label {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
}
.today-block-title {
font-size: 20px;
font-weight: 700;
color: var(--banner-text);
}
.today-block-subtitle {
margin-top: 4px;
font-size: 14px;
line-height: 1.55;
color: var(--card-copy);
}
.today-block-meta {
margin-top: 10px;
font-size: 13px;
color: var(--text-secondary);
}
.founder-micro-banner {
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
margin-top: 14px;
border-radius: 18px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-card);
color: var(--text-secondary);
font-size: 13px;
}
.founder-micro-banner strong {
color: var(--text-primary);
font-size: 13px;
}
.founder-micro-button {
border: none;
background: transparent;
color: var(--banner-text);
font: inherit;
cursor: pointer;
padding: 0;
}
#modeChoiceResearchBanner .btn-secondary {
background: transparent;
color: var(--banner-text);
border-color: var(--border-card);
}
.result-card {
background: var(--bg-elevated);
border: 1px solid var(--border-card);
border-radius: 24px;
padding: 22px;
color: var(--text-primary);
box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}
.result-card + .result-card {
margin-top: 16px;
}
.result-text {
font-size: 15px;
line-height: 1.7;
color: var(--text-primary);
white-space: pre-line;
overflow-wrap: anywhere;
}
/* «Сначала вывод»: контейнер кнопки «Подробный разбор» под коротким
заключением разбора пары. Кнопка переиспользует .btn-secondary. */
.compat-result-toggle {
margin-top: 14px;
text-align: center;
}
/* CTA «Хочешь разбор с огоньком?» в конце основного разбора пары: ненавязчивая
плашка с крошечным крестиком «больше не показывать». Тон влияет только на
разбор пары, поэтому подсказка живёт лишь здесь и в читателе «Глубже о вас». */
.compat-tone-cta {
position: relative;
margin-top: 16px;
padding: 12px 34px 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: 14px;
background: var(--mode-card-bg);
}
.compat-tone-cta-main {
display: grid;
gap: 3px;
width: 100%;
padding: 0;
border: none;
background: none;
text-align: left;
cursor: pointer;
}
.compat-tone-cta-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
}
.compat-tone-cta-hint {
font-size: 12px;
line-height: 1.45;
color: var(--text-secondary);
}
.compat-tone-cta-close {
position: absolute;
top: 6px;
right: 6px;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: var(--text-secondary);
font-size: 15px;
line-height: 1;
cursor: pointer;
opacity: 0.55;
}
.compat-tone-cta-close:hover { opacity: 1; }
.result-actions {
display: grid;
gap: 10px;
margin-top: 18px;
}
.result-intro {
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.result-intro strong {
font-size: 16px;
color: var(--text-primary);
}
.result-intro span {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
/* Словарь ведической оптики перед текстом разбора: свёрнутый ,
чтобы термины джьотиша были под рукой, но не перетягивали внимание с
самого разбора. Показывается и в ридере чата, и в карточке пары. */
.vedic-glossary {
margin: 0 0 14px;
border: 1px solid var(--border-subtle);
border-radius: 14px;
background: var(--mode-card-bg);
overflow: hidden;
}
.vedic-glossary summary {
cursor: pointer;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px;
padding: 11px 14px;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.vedic-glossary summary::-webkit-details-marker { display: none; }
.vedic-glossary summary::before {
content: '🕉';
font-size: 13px;
}
.vedic-glossary[open] summary { border-bottom: 1px solid var(--border-subtle); }
.vedic-glossary-hint {
font-weight: 400;
font-size: 12px;
color: var(--text-secondary);
}
.vedic-glossary-body { padding: 10px 14px 12px; }
.vedic-glossary-body p {
margin: 0 0 8px;
font-size: 12.5px;
line-height: 1.55;
color: var(--insight-copy);
overflow-wrap: anywhere;
}
.vedic-glossary-body p:last-child { margin-bottom: 0; }
.vedic-glossary-body strong {
color: var(--text-primary);
font-weight: 600;
}
/* Ступенька «Продолжить исследование»: оба дополнительных слоя лежат
рядом и выглядят одинаково, чтобы выбор оптики был выбором, а не
поиском спрятанной кнопки. Ведический слой платный сразу, химия даёт
один бесплатный разбор - это объясняет подпись под кнопкой, а не цвет. */
.compat-next-steps { display: grid; gap: 10px; }
.compat-next-step {
display: grid;
gap: 4px;
width: 100%;
padding: 14px 16px;
text-align: left;
border: 1px solid var(--border-card);
border-radius: 18px;
background: var(--bg-elevated);
cursor: pointer;
font-family: inherit;
}
.compat-next-step:hover { border-color: var(--accent-lavender); }
.compat-next-step:disabled { opacity: 0.55; cursor: progress; }
.compat-next-step-title { font-size: 15px; font-weight: 700; color: var(--card-title); }
.compat-next-step-note { font-size: 12px; line-height: 1.5; color: var(--card-copy); }
/* Карточка выбора тона «Разбора пары» (✨ Легко / 🔥 Без прикрас):
показывается до первого AI-разбора, пока стиль не выбран. Две
равноправные кнопки без бейджа «рекомендуем» - это выбор подачи, а не
типа правды (тон не меняет анализ, только как он звучит). Токены те же,
что у .compat-next-step, чтобы карточка не выбивалась из секции. */
.tone-chooser { margin-bottom: 16px; }
.tone-chooser-options { display: grid; gap: 10px; }
.tone-option {
display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: 12px;
width: 100%;
padding: 14px 16px;
text-align: left;
border: 1px solid var(--border-card);
border-radius: 18px;
background: var(--bg-elevated);
cursor: pointer;
font-family: inherit;
transition: border-color .18s var(--ios-spring), transform .12s var(--ios-spring);
}
.tone-option:hover { border-color: var(--accent-lavender); }
.tone-option:active { transform: scale(0.99); }
.tone-option-emoji { font-size: 20px; line-height: 1.4; }
.tone-option-body { display: grid; gap: 3px; }
.tone-option-title { font-size: 15px; font-weight: 700; color: var(--card-title); }
.tone-option-text { font-size: 12.5px; line-height: 1.5; color: var(--card-copy); }
/* Переключатель слоёв разбора пары (аккордеон): открыт ровно один из
трёх - основной / ведический / химия. Компактные вкладки в три
колонки вместо больших кнопок-строк, чтобы переключатель всегда был
под рукой и не утяжелял секцию. */
.compat-layer-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.compat-layer-tab {
padding: 10px 6px;
border: 1px solid var(--border-card);
border-radius: 14px;
background: var(--bg-elevated);
color: var(--card-copy);
font-family: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition: border-color .18s var(--ios-spring), background .18s var(--ios-spring), color .18s var(--ios-spring), transform .12s var(--ios-spring);
}
.compat-layer-tab:hover { border-color: var(--accent-lavender); }
.compat-layer-tab:active { transform: scale(0.97); }
.compat-layer-tab.is-active {
border-color: var(--accent-lavender);
background: var(--glass-surface);
color: var(--card-title);
font-weight: 700;
}
.compat-layer-hint { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--card-copy); }
/* Скролл к началу открываемого разбора: небольшой отступ сверху, чтобы
переключатель и заголовок слоя не прилипали к кромке вьюпорта. */
#compatNextStepCard,
#compatibilityResult,
#vedicCompatibilityCard,
#chemistryCompatibilityCard { scroll-margin-top: 12px; }
/* Химия пары. Тип и тэглайн - главные, балл и оси читаются полосами.
Цифр на осях сознательно нет: число рядом с полоской заставляет
спорить с арифметикой вместо того, чтобы читать про себя и партнёра. */
.chem-hero { display: grid; gap: 4px; margin: 2px 0 14px; }
.chem-type { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--card-title); }
.chem-hero-approx .chem-type { color: var(--card-copy); font-size: 22px; }
.chem-tagline { font-size: 14px; line-height: 1.5; color: var(--card-copy); }
.chem-score { display: grid; gap: 6px; margin-bottom: 14px; }
.chem-score-bar {
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.chem-score-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #7c5cff, #ff6ec7);
}
.chem-score-note { font-size: 12px; color: var(--card-copy); }
.chem-axes { display: grid; gap: 8px; margin-bottom: 6px; }
.chem-axis {
display: grid;
grid-template-columns: 106px 1fr;
align-items: center;
gap: 10px;
}
.chem-axis-label { font-size: 13px; color: var(--card-copy); }
.chem-axis-bar {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.chem-axis-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent-lavender), var(--accent-coral));
}
.chem-contrast {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-card);
font-size: 13px;
line-height: 1.5;
color: var(--card-copy);
}
.chem-block { margin-top: 14px; }
.chem-block-title { font-size: 14px; font-weight: 700; color: var(--card-title); margin-bottom: 6px; }
.chem-block-text {
font-size: 15px;
line-height: 1.7;
color: var(--text-primary);
overflow-wrap: anywhere;
}
.chem-note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--card-copy); }
.chem-note-cta { margin-top: 10px; }
/* Birth Time Quality Card: единый inline-статус времени рождения (шаг 3) */
.bt-chip {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
line-height: 1.4;
color: var(--text-secondary);
}
.bt-chip .bt-dot { font-size: 12px; line-height: 1; }
.bt-chip-cta { padding: 4px 6px; font-size: 13px; }
.bt-quality-card { margin-bottom: 14px; }
.bt-quality-head { display: flex; align-items: center; gap: 8px; }
.bt-quality-label { font-size: 14px; line-height: 1.4; color: var(--text-primary); }
/* Жирный дисклеймер: почему время рождения важно (асцендент + 12 домов).
Рендерится в баннере birthTimeQualityCardHtml (тема-зависимый фон) и в
intro модалки проверки (всегда светлый фон .modal-content). */
.bt-impact-note {
margin-top: 8px;
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
}
.bt-impact-note strong { font-weight: 700; }
/* В модалке проверки фон всегда кремовый - фиксируем тёмный текст, иначе
в тёмной теме var(--text-primary) дал бы белое по белому. */
#birthTimeModalBody .bt-impact-note { color: #444; }
body.light-theme .chem-score-bar,
body.light-theme .chem-axis-bar { background: rgba(20, 16, 40, 0.10); }
.saved-checks {
display: grid;
gap: 12px;
margin-top: 16px;
}
.saved-check-item {
background: var(--bg-card);
border: 1px solid var(--border-card);
border-radius: 18px;
padding: 14px;
}
.saved-check-item h4 {
font-size: 15px;
margin-bottom: 6px;
}
.saved-check-meta {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 8px;
}
.saved-check-item p {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
white-space: pre-line;
overflow-wrap: anywhere;
}
.saved-check-item .text-button {
margin-top: 10px;
}
.saved-check-actions {
display: flex;
gap: 14px;
margin-top: 10px;
}
.saved-check-actions .text-button {
margin-top: 0;
}
.saved-check-delete {
color: #ff8f8f;
}
.collection-panel {
margin-top: 18px;
}
.collection-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.collection-copy {
color: #aeb7d7;
font-size: 13px;
line-height: 1.45;
}
.artifact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.artifact-empty-state {
grid-column: 1 / -1;
font-size: 13px;
font-weight: 400;
color: var(--text-secondary);
line-height: 1.45;
padding: 6px 2px;
}
.artifact-icon {
width: 48px;
height: 48px;
display: block;
flex: 0 0 auto;
color: #f5dfaa;
filter: drop-shadow(0 0 10px rgba(232, 213, 163, 0.18));
line-height: 0;
overflow: visible;
stroke: currentColor;
fill: none;
vector-effect: non-scaling-stroke;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.artifact-icon use {
transform-box: fill-box;
transform-origin: center;
}
/* Первозвёзд — самый элитный артефакт (5000 звёзд): единственный
переливающийся значок в приложении. */
.artifact-icon--founder {
animation: first-star-shimmer 4s linear infinite;
}
@keyframes first-star-shimmer {
0%, 100% {
color: #f8dd8f;
filter: drop-shadow(0 0 16px rgba(246, 212, 124, 0.8));
}
33% {
color: #cfa6ff;
filter: drop-shadow(0 0 18px rgba(179, 107, 255, 0.8));
}
66% {
color: #9fd8ff;
filter: drop-shadow(0 0 18px rgba(120, 190, 255, 0.8));
}
}
/* Донат-статусы (миграция 069): Солнце — тёплое золото, значок
мягко пульсирует светом, вторя переливам Первозвёзда (миграция 071). */
.artifact-icon--sun {
animation: sun-artifact-glow 5s ease-in-out infinite;
}
@keyframes sun-artifact-glow {
0%, 100% {
color: #efe3c8;
filter: drop-shadow(0 0 12px rgba(236, 226, 204, 0.55));
}
40% {
color: #fff8e6;
filter: drop-shadow(0 0 20px rgba(255, 248, 230, 0.8));
}
70% {
color: #d9cdb2;
filter: drop-shadow(0 0 15px rgba(222, 211, 188, 0.6));
}
}
/* Созвездие: реферальный артефакт сезона 01 (миграция 098) —
тёплое розовое свечение в тон сезону «Приведи друга». */
.artifact-icon--constellation {
color: #f7c1d6;
filter: drop-shadow(0 0 12px rgba(247, 172, 205, 0.45));
}
.supporter-badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.03em;
white-space: nowrap;
vertical-align: middle;
}
.profile-name .supporter-badge {
margin-left: 8px;
}
.supporter-badge--first-star {
background: linear-gradient(135deg, #f8dd8f, #d19a2f);
color: #2b1d04;
box-shadow: 0 2px 12px rgba(246, 212, 124, 0.45);
}
.supporter-badge--sun {
background: linear-gradient(135deg, #f3ead6, #c9bda2);
color: #3a342a;
box-shadow: 0 2px 12px rgba(226, 217, 199, 0.45);
}
/* Переливающийся оверлей статусной темы «Первозвёзд» (миграция 071):
тема заменяет прежние рамки фото — свет медленно течёт по карточке. */
.first-star-theme-shimmer::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg, transparent 32%, rgba(246, 212, 124, 0.09) 45%, rgba(179, 107, 255, 0.11) 52%, rgba(120, 190, 255, 0.09) 59%, transparent 72%);
background-size: 260% 100%;
animation: first-star-theme-flow 9s linear infinite;
pointer-events: none;
}
@keyframes first-star-theme-flow {
0% { background-position: 0% 0; }
100% { background-position: 260% 0; }
}
/* Лёгкий блик статусной темы «Солнце»: атласный свет белого золота,
медленнее и сдержаннее, чем у Первозвёзда. */
.sun-theme-shimmer::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(115deg, transparent 30%, rgba(250, 245, 234, 0.11) 45%, rgba(216, 205, 184, 0.09) 52%, rgba(255, 252, 245, 0.11) 59%, transparent 74%);
background-size: 260% 100%;
animation: first-star-theme-flow 11s linear infinite;
pointer-events: none;
}
/* Строки мэтчей владельцев донат-статусов: золото у Солнца,
переливы у Первозвёзда. Тон полупрозрачный, чтобы имена
и текст сообщений оставались читаемыми в обеих темах. */
.match-item--sun {
background-image: linear-gradient(115deg, rgba(226, 217, 199, 0.17), rgba(226, 217, 199, 0.05));
box-shadow: inset 0 0 0 1px rgba(240, 234, 221, 0.3);
}
.match-item--first-star {
background-image: linear-gradient(115deg, rgba(246, 212, 124, 0.13), rgba(179, 107, 255, 0.13), rgba(120, 190, 255, 0.13), rgba(246, 212, 124, 0.13));
background-size: 300% 100%;
animation: first-star-theme-flow 9s linear infinite;
box-shadow: inset 0 0 0 1px rgba(230, 210, 255, 0.26);
}
body.light-theme .match-item--sun {
background-image: linear-gradient(115deg, rgba(163, 152, 132, 0.16), rgba(250, 245, 234, 0.55));
}
body.light-theme .match-item--first-star {
background-image: linear-gradient(115deg, rgba(246, 212, 124, 0.2), rgba(179, 107, 255, 0.12), rgba(120, 190, 255, 0.14), rgba(246, 212, 124, 0.2));
}
.artifact-tile {
position: relative;
width: 64px;
height: 64px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
background: var(--bg-card);
border: 1px solid var(--border-subtle);
cursor: pointer;
transition: transform 0.16s var(--ios-spring), box-shadow 0.22s, border-color 0.22s, background 0.22s;
}
.artifact-tile:active { transform: scale(0.96); }
/* polish-79: верификация «Живая звезда» (фазы 0/1, миграция 084) */
.verification-status-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.verification-chip {
padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
border: 1px solid rgba(120, 140, 200, 0.35); background: rgba(120, 140, 200, 0.10);
}
.verification-chip.done { border-color: rgba(90, 200, 140, 0.45); background: rgba(90, 200, 140, 0.12); }
/* Карточка «Доверие» стоит на кремовом фоне в обеих темах:
фиксируем тёмные цвета текста, чтобы в тёмной теме переменные типа
--text-secondary не давали белый текст на светлом фоне. */
#verificationModal .modal-note { color: rgba(33, 33, 33, 0.62); }
#verificationModal .verification-chip { color: #33334d; }
#verificationModal .verification-chip.done { color: #1f6b45; }
/* Опрос о точности совместимости в чате (миграция 089) */
.compat-survey-card {
margin: 0 0 10px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(133, 170, 255, 0.10);
border: 1px solid rgba(133, 170, 255, 0.28);
}
.compat-survey-title { font-weight: 700; margin-bottom: 6px; }
.compat-survey-copy { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 10px; }
.compat-survey-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.compat-survey-actions .btn-primary,
.compat-survey-actions .btn-secondary { padding: 8px 14px; font-size: 14px; }
#compatSurveyModal .modal-note { color: rgba(33, 33, 33, 0.62); }
#compatSurveyModal label { color: #23283d; }
.compat-survey-scale { display: flex; gap: 8px; margin-top: 8px; }
.compat-survey-scale button {
flex: 1; min-width: 40px; padding: 10px 0; border-radius: 12px;
border: 1px solid rgba(120, 140, 200, 0.35); background: rgba(120, 140, 200, 0.10);
font-weight: 700; color: #33334d; cursor: pointer;
}
.compat-survey-scale button.active { background: rgba(90, 200, 140, 0.18); border-color: rgba(90, 200, 140, 0.55); color: #1f6b45; }
.compat-survey-scale-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-secondary); margin-top: 6px; }
#compatSurveyModal .verification-chip { cursor: pointer; }
/* Строка «Доверие» в карточке «Моя анкета»: по тапу открывается
окно с пояснением и действиями верификации. */
.profile-trust-row {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
margin-top: 8px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-primary);
font: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.profile-trust-row-status { margin-left: auto; font-size: 13px; color: var(--text-secondary); }
.profile-trust-row-status.done { color: rgba(90, 200, 140, 0.9); }
.profile-trust-row-chevron { color: var(--text-secondary); }
.artifact-tile.locked {
opacity: 0.3;
filter: grayscale(0.6);
}
.artifact-tile.locked::after {
content: '';
position: absolute;
bottom: 4px;
right: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--text-muted);
}
.artifact-tile.unlocked {
border-color: var(--border-gold);
box-shadow: var(--shadow-glow-gold);
}
.artifact-tile.newly-unlocked {
animation: artifact-glow 2s ease-out;
}
@keyframes artifact-glow {
0% { box-shadow: 0 0 0 rgba(232,213,163,0); transform: scale(1); }
30% { box-shadow: 0 0 28px rgba(232,213,163,0.5); transform: scale(1.08); }
100% { box-shadow: var(--shadow-glow-gold); transform: scale(1); }
}
.artifact-modal-card {
background: linear-gradient(180deg, rgba(10, 18, 35, 0.98), rgba(11, 38, 72, 0.98));
color: white;
border-radius: 24px;
width: min(420px, 100%);
padding: 24px;
position: relative;
box-shadow: 0 24px 60px rgba(0,0,0,0.36);
}
.artifact-modal-icon {
width: 92px;
height: 92px;
margin: 0 auto 18px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(26, 26, 46, 0.95), rgba(15, 52, 96, 0.95));
border: 2px solid rgba(255, 209, 102, 0.3);
box-shadow: 0 0 22px rgba(102, 126, 234, 0.26);
}
.artifact-modal-icon span {
font-size: 52px;
line-height: 1;
}
.artifact-modal-icon .artifact-icon {
width: 54px;
height: 54px;
}
.artifact-modal-title {
font-size: 26px;
text-align: center;
font-weight: 800;
margin-bottom: 10px;
}
.artifact-modal-text {
color: #dbe4ff;
font-size: 15px;
line-height: 1.65;
text-align: center;
}
.artifact-meta {
margin-top: 18px;
display: grid;
gap: 8px;
color: #aeb7d7;
font-size: 13px;
line-height: 1.5;
}
.form-card {
background: rgba(8, 13, 30, 0.58);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 20px;
backdrop-filter: blur(18px);
box-shadow: 0 20px 60px rgba(0,0,0,0.24);
background-image:
linear-gradient(rgba(133, 170, 255, 0.22) 0 0),
linear-gradient(rgba(133, 170, 255, 0.22) 0 0),
linear-gradient(rgba(133, 170, 255, 0.22) 0 0),
linear-gradient(rgba(133, 170, 255, 0.22) 0 0);
background-repeat: no-repeat;
background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px;
background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
}
.auth-card,
.mode-card,
.panel-card,
.modal-content {
background-image:
linear-gradient(rgba(133, 170, 255, 0.18) 0 0),
linear-gradient(rgba(133, 170, 255, 0.18) 0 0),
linear-gradient(rgba(133, 170, 255, 0.18) 0 0),
linear-gradient(rgba(133, 170, 255, 0.18) 0 0);
background-repeat: no-repeat;
background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px;
background-position: 14px 14px, calc(100% - 14px) 14px, 14px calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
}
.app-shell {
padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
/* Нижняя навигация — полноэкранный таб-бар как в привычных
приложениях: тянется от края до края, без «островка». */
.bottom-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1100;
padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
display: none;
background: rgba(13, 18, 34, 0.92);
border-top: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
}
/* TMA R2: внутри Telegram нижний отступ берём из максимума env() и
переменной Telegram (--tg-safe-area-inset-bottom, Bot API 8.0):
в webview env() может быть 0, а home-индикатор iOS всё равно перекрывает нав. */
body.tma-mode .bottom-nav {
padding-bottom: calc(6px + max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)));
}
/* TMA: карточка Telegram теперь сама показывает «Открыть на сайте»
(cross-nav), поэтому в tma-mode её больше не прячем. */
.bottom-nav.visible {
display: block;
}
.bottom-nav-inner {
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 4px;
}
.bottom-nav-button {
border: none;
background: transparent;
color: #b9c4e8;
border-radius: 14px;
min-height: 52px;
padding: 8px 6px;
display: grid;
justify-items: center;
gap: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 700;
transition: transform 0.12s ease-out, background 0.22s var(--ios-spring), color 0.22s var(--ios-spring);
}
.bottom-nav-button:active { transform: scale(0.96); }
.bottom-nav-button .ui-icon,
.bottom-nav-button .pixel-icon {
width: 20px;
height: 20px;
}
.bottom-nav-button.active {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.22), rgba(118, 75, 162, 0.24));
color: white;
}
.profile-shell {
max-width: 420px;
margin: 0 auto;
padding-top: 6px;
}
.profile-card {
background: var(--profile-card-bg);
border: 1px solid var(--border-card);
border-radius: 24px;
padding: 22px;
color: var(--profile-card-text);
box-shadow: var(--shadow-card);
margin-bottom: 16px;
}
/* «Анкета + Био» одной поверхностью: сезонный арт растянут на весь
срощенный блок, его пропорции близки к формату артов 2:3, поэтому
арт не обрезается снизу и не оставляет пустот (багрепорт 2026-09-01). */
.profile-surface {
position: relative;
z-index: 0;
overflow: hidden;
border-radius: 24px;
border: 1px solid var(--profile-theme-border, var(--border-card));
background: var(--profile-theme-surface, var(--profile-card-bg));
box-shadow: var(--shadow-card);
margin-bottom: 16px;
color: var(--profile-theme-text, var(--profile-card-text));
/* Био поверх сезонной подложки читается цветами темы, а не
интерфейса: переменные всегда заданы JS на этом узле. */
--profile-card-text: var(--profile-theme-text);
--profile-card-copy: var(--profile-theme-muted);
}
.profile-surface .profile-card {
margin-bottom: 0;
box-shadow: none;
background: transparent;
border: 0;
border-radius: 0;
}
/* Зона под фото: здесь живёт сезонный арт, чтобы фото анкеты никогда не закрывало лицо персонажа. */
.profile-lower {
position: relative;
z-index: 0;
}
.profile-lower .profile-info-zone {
padding: 0 22px 22px;
}
.profile-teaser-card {
display: none;
gap: 12px;
}
.profile-teaser-card.active {
display: grid;
}
.profile-teaser-note {
font-size: 13px;
line-height: 1.55;
color: var(--profile-card-copy);
}
.profile-top {
display: grid;
grid-template-columns: 72px 1fr;
gap: 16px;
align-items: center;
}
.profile-avatar {
width: 72px;
height: 72px;
border-radius: 22px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
}
.profile-name {
font-size: 24px;
font-weight: 800;
margin-bottom: 4px;
}
.profile-subtitle {
font-size: 14px;
line-height: 1.5;
color: var(--text-secondary);
}
.profile-meta {
display: grid;
gap: 8px;
margin-top: 16px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.5;
}
.theme-toggle {
width: 100%;
border: 1px solid var(--border-card);
border-radius: 18px;
background: var(--bg-card);
color: var(--text-primary);
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
transition: transform 0.12s ease-out, background 0.22s var(--ios-spring), border-color 0.22s var(--ios-spring);
}
.theme-toggle:active { transform: scale(0.98); }
.theme-toggle small {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
}
.profile-collapsible .profile-collapse-body { display: none; }
.profile-collapsible.open .profile-collapse-body {
display: block;
animation: profileSectionFade 0.18s ease-out;
}
.profile-collapse-body > *:first-child { margin-top: 14px; }
.profile-collapse-right {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.profile-collapse-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
border: 1px solid var(--border-card);
font-size: 14px;
font-weight: 700;
color: var(--text-secondary);
}
@keyframes profileSectionFade {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mode-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.mode-logo-button {
border: none;
background: transparent;
padding: 0;
cursor: pointer;
line-height: 0;
transition: transform 0.12s ease-out;
}
.mode-logo-button:active { transform: scale(0.92); }
/* «Войти» в шапке «Режимов». До 2026-09-24 это был голый .text-button —
прозрачный лавандовый текст 14px, который терялся рядом с чипом Telegram
(у того есть и рамка, и подложка). Для гостя это единственная дорога в
аккаунт, поэтому кнопка заполнена фирменным золотом и крупнее текста
вокруг. Компактнее .btn-primary намеренно: она стоит в одном ряду с лисой
и чипом, полноразмерная выдавит их на вторую строку.
Селектор с .mode-header-actions — чтобы перебить .screen-header .text-button
(тот же вес, но выше по файлу) и задать свои отступы. */
.mode-header-actions .mode-auth-button {
background: var(--accent-gold);
color: var(--text-on-accent);
border: none;
border-radius: 999px;
padding: 9px 20px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2px;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(232, 213, 163, 0.28);
transition: background 0.2s, transform 0.12s ease-out, box-shadow 0.2s;
}
.mode-header-actions .mode-auth-button:hover { background: var(--accent-gold-hover); }
.mode-header-actions .mode-auth-button:active { transform: scale(0.96); }
@media (max-width: 380px) {
.mode-header-actions .mode-auth-button {
padding: 8px 15px;
font-size: 14px;
}
}
/* Мини-промо Telegram компактным чипом в шапке, в одном ряду с лисой и «Войти»
(до 2026-09-01 это был отдельный широкий блок под шапкой — выглядел несогласованно). */
.mode-tg-promo {
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
flex: 0 1 auto;
}
.mode-tg-promo[hidden] { display: none; }
.mode-tg-promo-button {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(102, 126, 234, 0.3);
background: rgba(102, 126, 234, 0.1);
color: var(--text-primary);
cursor: pointer;
text-align: left;
min-width: 0;
white-space: nowrap;
transition: transform 0.12s ease-out, background 0.2s ease;
}
.mode-tg-promo-button:active { transform: scale(0.97); }
.mode-tg-promo-button svg {
width: 14px;
height: 14px;
flex: 0 0 auto;
color: #667eea;
}
.mode-tg-promo-copy {
min-width: 0;
}
.mode-tg-promo-copy strong {
display: block;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.mode-tg-promo-close {
border: none;
background: transparent;
cursor: pointer;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
opacity: 0.55;
flex: 0 0 auto;
}
.mode-tg-promo-close:active { opacity: 0.8; }
.mode-tg-promo-close .ui-icon {
width: 11px;
height: 11px;
}
.profile-section-title {
font-size: 18px;
font-weight: 800;
margin-bottom: 8px;
color: var(--profile-card-text);
}
.profile-section-copy {
color: var(--profile-card-copy);
font-size: 13px;
line-height: 1.5;
margin-bottom: 14px;
}
.profile-bio-card {
display: grid;
gap: 12px;
}
.profile-founder-card {
display: none;
}
.profile-founder-card.active {
display: block;
}
.profile-founder-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.profile-founder-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 209, 102, 0.12);
border: 1px solid rgba(255, 209, 102, 0.26);
color: #ffd166;
box-shadow: 0 0 14px rgba(255, 209, 102, 0.18);
}
.profile-founder-icon .artifact-icon {
width: 22px;
height: 22px;
}
.profile-founder-title {
font-size: 16px;
font-weight: 800;
color: var(--profile-card-text);
}
.profile-founder-copy {
font-size: 13px;
line-height: 1.5;
color: var(--profile-card-copy);
}
.profile-founder-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
background: rgba(255, 209, 102, 0.12);
border: 1px solid rgba(255, 209, 102, 0.3);
color: #ffd166;
}
.profile-founder-badge .ui-icon {
width: 14px;
height: 14px;
}
.profile-bio-text {
margin: 0;
color: var(--profile-card-text);
font-size: 14px;
line-height: 1.65;
white-space: pre-line;
}
.profile-bio-placeholder {
margin: 0;
color: var(--profile-card-copy);
font-size: 14px;
line-height: 1.6;
}
.profile-actions {
display: grid;
gap: 12px;
margin-top: 16px;
}
.profile-hero-card {
position: relative;
overflow: hidden;
color: var(--profile-theme-text, #1a1a2e);
border: 1px solid var(--profile-theme-border, transparent);
background: var(--profile-theme-surface, radial-gradient(circle at top right, rgba(255, 225, 177, 0.18), transparent 34%), linear-gradient(180deg, rgba(244, 239, 230, 0.98), rgba(235, 228, 217, 0.98)));
}
/* Сезонный арт-персонаж: полупрозрачная подложка в инфо-зоне
геро-карточки (имя → мета → звезда дня). Слой живёт строго ниже
фото-блоков, поэтому фото никогда его не перекрывают. */
.profile-info-zone {
position: relative;
/* Свой стековый контекст: арт с z-index:-1 уходит под текст,
но остаётся над фоном карточки */
z-index: 0;
/* режет приближенный арт тем, у которых по краям запечён бордюр */
overflow: hidden;
}
.profile-season-art {
display: none;
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* Арт живёт в зоне под фото (инфо + био): лицо персонажа никогда не закрывается фотографией анкеты.
Пропорции зоны близки к 2:3, поэтому кропы минимальны. */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.32;
/* мягкий переход от фото-зоны, без жёсткой кромки */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%);
mask-image: linear-gradient(180deg, transparent 0, #000 8%);
}
/* Арт храним в сжатом виде (640×960): AVIF 24–57 КБ для современных
браузеров через image-set, WebP 47–110 КБ как фолбэк. Раньше это были
PNG 2–3.6 МБ, потом WebP 134–364 КБ — на мобильном грузились слишком долго. */
/* ?v=N в url() - кэш-баст арта темы. Vercel отдаёт /assets/* с max-age=604800,
SW кэширует «сначала кэш», поэтому при замене арта поднимаем N (сейчас 2):
иначе возвращающиеся юзеры до 7 дней видят старую картинку. */
.season-art-anime_bloom .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/sakura.webp?v=2');
background-image: image-set(url('/assets/themes/anime_bloom/sakura.avif?v=2') type('image/avif'), url('/assets/themes/anime_bloom/sakura.webp?v=2') type('image/webp'));
}
.season-art-akadza .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/akadza.webp?v=2');
background-image: image-set(url('/assets/themes/anime_bloom/akadza.avif?v=2') type('image/avif'), url('/assets/themes/anime_bloom/akadza.webp?v=2') type('image/webp'));
}
.season-art-alisa .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/alisa.webp?v=2');
background-image: image-set(url('/assets/themes/cinema_noir/alisa.avif?v=2') type('image/avif'), url('/assets/themes/cinema_noir/alisa.webp?v=2') type('image/webp'));
}
.season-art-itachi .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/itachi.webp?v=2');
background-image: image-set(url('/assets/themes/anime_bloom/itachi.avif?v=2') type('image/avif'), url('/assets/themes/anime_bloom/itachi.webp?v=2') type('image/webp'));
}
.season-art-pochita .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/pochita.webp?v=2');
background-image: image-set(url('/assets/themes/anime_bloom/pochita.avif?v=2') type('image/avif'), url('/assets/themes/anime_bloom/pochita.webp?v=2') type('image/webp'));
}
.season-art-avatar .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/avatar.webp');
background-image: image-set(url('/assets/themes/cinema_noir/avatar.avif') type('image/avif'), url('/assets/themes/cinema_noir/avatar.webp') type('image/webp'));
}
.season-art-levi .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/levi.webp');
background-image: image-set(url('/assets/themes/anime_bloom/levi.avif') type('image/avif'), url('/assets/themes/anime_bloom/levi.webp') type('image/webp'));
}
.season-art-potter .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/potter.webp?v=2');
background-image: image-set(url('/assets/themes/cinema_noir/potter.avif?v=2') type('image/avif'), url('/assets/themes/cinema_noir/potter.webp?v=2') type('image/webp'));
}
.season-art-himym .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/himym.webp');
background-image: image-set(url('/assets/themes/cinema_noir/himym.avif') type('image/avif'), url('/assets/themes/cinema_noir/himym.webp') type('image/webp'));
}
.season-art-hangover .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/hangover.webp');
background-image: image-set(url('/assets/themes/cinema_noir/hangover.avif') type('image/avif'), url('/assets/themes/cinema_noir/hangover.webp') type('image/webp'));
}
.season-art-hollywood .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/hollywood.webp');
background-image: image-set(url('/assets/themes/cinema_noir/hollywood.avif') type('image/avif'), url('/assets/themes/cinema_noir/hollywood.webp') type('image/webp'));
}
.season-art-alastor .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/alastor.webp');
background-image: image-set(url('/assets/themes/anime_bloom/alastor.avif') type('image/avif'), url('/assets/themes/anime_bloom/alastor.webp') type('image/webp'));
}
.season-art-gojo .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/gojo.webp');
background-image: image-set(url('/assets/themes/anime_bloom/gojo.avif') type('image/avif'), url('/assets/themes/anime_bloom/gojo.webp') type('image/webp'));
}
.season-art-mazino .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/mazino.webp');
background-image: image-set(url('/assets/themes/anime_bloom/mazino.avif') type('image/avif'), url('/assets/themes/anime_bloom/mazino.webp') type('image/webp'));
}
.season-art-androssi .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/androssi.webp');
background-image: image-set(url('/assets/themes/anime_bloom/androssi.avif') type('image/avif'), url('/assets/themes/anime_bloom/androssi.webp') type('image/webp'));
}
.season-art-houm .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/houm.webp');
background-image: image-set(url('/assets/themes/cinema_noir/houm.avif') type('image/avif'), url('/assets/themes/cinema_noir/houm.webp') type('image/webp'));
}
.season-art-saitama .profile-season-art {
display: block;
background-image: url('/assets/themes/anime_bloom/saitama.webp');
background-image: image-set(url('/assets/themes/anime_bloom/saitama.avif') type('image/avif'), url('/assets/themes/anime_bloom/saitama.webp') type('image/webp'));
}
.season-art-jin .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/jin.webp');
background-image: image-set(url('/assets/themes/cinema_noir/jin.avif') type('image/avif'), url('/assets/themes/cinema_noir/jin.webp') type('image/webp'));
}
/* У артов mazino и jin по краям запечён blur-бордюр, который в превью и в
анкете читается как рамка вокруг карточки. Чуть приближаем слой арта,
чтобы бордюр ушёл за кроп; родители (.season-preview-card и
.profile-info-zone) имеют overflow:hidden и держат кроп внутри. */
.season-art-mazino .profile-season-art,
.season-art-jin .profile-season-art {
transform: scale(1.2);
}
/* Сезон 02 · Кино: 11 новых тем. Фолбэк jpg вместо webp: конвертер
sips не умеет писать webp, поэтому avif остаётся основным форматом. */
.season-art-konor .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/konor.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/konor.avif') type('image/avif'), url('/assets/themes/cinema_noir/konor.jpg') type('image/jpeg'));
}
.season-art-charly .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/charly.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/charly.avif') type('image/avif'), url('/assets/themes/cinema_noir/charly.jpg') type('image/jpeg'));
}
.season-art-makavoy .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/makavoy.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/makavoy.avif') type('image/avif'), url('/assets/themes/cinema_noir/makavoy.jpg') type('image/jpeg'));
}
.season-art-hadson .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/hadson.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/hadson.avif') type('image/avif'), url('/assets/themes/cinema_noir/hadson.jpg') type('image/jpeg'));
}
.season-art-djeik .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/djeik.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/djeik.avif') type('image/avif'), url('/assets/themes/cinema_noir/djeik.jpg') type('image/jpeg'));
}
.season-art-eklz .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/eklz.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/eklz.avif') type('image/avif'), url('/assets/themes/cinema_noir/eklz.jpg') type('image/jpeg'));
}
.season-art-leo .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/leo.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/leo.avif') type('image/avif'), url('/assets/themes/cinema_noir/leo.jpg') type('image/jpeg'));
}
.season-art-pitt .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/pitt.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/pitt.avif') type('image/avif'), url('/assets/themes/cinema_noir/pitt.jpg') type('image/jpeg'));
}
.season-art-tom .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/tom.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/tom.avif') type('image/avif'), url('/assets/themes/cinema_noir/tom.jpg') type('image/jpeg'));
}
.season-art-zendaya .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/zendaya.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/zendaya.avif') type('image/avif'), url('/assets/themes/cinema_noir/zendaya.jpg') type('image/jpeg'));
}
.season-art-patison .profile-season-art {
display: block;
background-image: url('/assets/themes/cinema_noir/patison.jpg');
background-image: image-set(url('/assets/themes/cinema_noir/patison.avif') type('image/avif'), url('/assets/themes/cinema_noir/patison.jpg') type('image/jpeg'));
}
/* Плотный режим сезонного арта: выбор владельца хранится в
questionnaire.season_art_mode и виден всем, кто открывает анкету.
0.85 против 0.32 в «нежно»: арт читается сразу, яркий и плотный,
но текст анкеты поверх всё ещё различим. */
.season-art-solid .profile-season-art {
opacity: 0.85;
}
/* Миниатюра сезонного арта в превью-модалке: макет инфо-зоны анкеты,
чтобы не разблокировавший тему видел, что именно он получит. */
.season-preview-card {
position: relative;
/* Свой стековый контекст (как у .profile-info-zone): без него арт с
z-index:-1 рисовался ПОД собственным фоном карточки, и градиентная
подложка темы (theme.surface) полностью закрывала арт. */
z-index: 0;
/* Вертикальная витрина 2:3, как сама тема: арт заполняет карточку
целиком, и по бокам не остаётся лишней подложки theme.surface. */
aspect-ratio: 2 / 3;
width: min(78%, 260px);
margin: 0 auto;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
overflow: hidden;
color: #fff;
}
/* В превью арт заполняет вертикальную карточку целиком: пропорции
совпадают (2:3), поэтому cover не кроит персонажа. */
.season-preview-card .profile-season-art {
background-position: center;
background-size: cover;
/* миниатюра показывает арт целиком, фейд сверху здесь не нужен */
-webkit-mask-image: none;
mask-image: none;
}
.season-preview-info {
position: relative;
z-index: 1;
}
.season-preview-name {
font-weight: 700;
font-size: 16px;
}
.season-preview-meta {
font-size: 12px;
opacity: 0.75;
margin-top: 4px;
}
/* Музей сезонных событий: ряды-медали, по тапу — превью темы. */
.season-event-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 10px 12px;
margin-top: 8px;
border-radius: 12px;
border: 1px solid var(--profile-theme-chip-border, rgba(255, 255, 255, 0.08));
background: var(--profile-theme-chip-bg, rgba(255, 255, 255, 0.05));
color: inherit;
text-align: left;
cursor: pointer;
}
.season-event-row svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.season-event-info {
flex: 1;
min-width: 0;
}
.season-event-name {
font-weight: 600;
font-size: 14px;
}
.season-event-sub {
font-size: 12px;
opacity: 0.7;
margin-top: 2px;
}
.season-event-status {
font-size: 12px;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
background: rgba(110, 198, 242, 0.12);
color: #6ec6f2;
}
.season-event-status.ended {
background: rgba(160, 160, 175, 0.14);
color: inherit;
opacity: 0.65;
}
/* Группировка музея по сезонам: заголовок сезона со статусом и
ряды тем внутри. */
.season-group {
margin-top: 14px;
}
.season-group:first-child {
margin-top: 0;
}
.season-group-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.season-group-title {
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
opacity: 0.85;
}
/* Сезоны свёрнуты по умолчанию: кнопка «Посмотреть темы» раскрывает
список, чтобы музей не тянулся длинной колонкой ассетов. */
.season-group-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
margin-top: 8px;
padding: 8px 12px;
border-radius: 12px;
border: 1px solid var(--profile-theme-chip-border, rgba(255, 255, 255, 0.08));
background: var(--profile-theme-chip-bg, rgba(255, 255, 255, 0.05));
color: inherit;
font: inherit;
font-size: 13px;
cursor: pointer;
}
.season-group-chevron { transition: transform 0.25s ease; }
.season-group.open .season-group-chevron { transform: rotate(180deg); }
.season-group-themes {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.season-group.open .season-group-themes { grid-template-rows: 1fr; }
.season-group-themes-inner { overflow: hidden; }
/* Выбор награды за друга: плашка раскрывается в список всех сезонных тем. */
.referral-pick-row {
margin-top: 8px;
}
.referral-pick-toggle {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 1px solid rgba(255, 170, 205, 0.35);
background: rgba(255, 170, 205, 0.12);
color: inherit;
border-radius: 14px;
padding: 10px 14px;
font-size: 13px;
cursor: pointer;
}
.referral-pick-toggle.open { border-radius: 14px 14px 0 0; }
.referral-pick-label {
font-size: 13px;
font-weight: 600;
opacity: 0.9;
}
.referral-pick-caret {
font-size: 12px;
transition: transform 0.18s ease-out;
}
.referral-pick-toggle.open .referral-pick-caret { transform: rotate(180deg); }
.referral-pick-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 6px;
padding: 8px;
border: 1px solid rgba(255, 170, 205, 0.25);
border-top: none;
border-radius: 0 0 14px 14px;
background: rgba(255, 170, 205, 0.05);
max-height: 260px;
overflow-y: auto;
}
.referral-pick-option {
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 170, 205, 0.2);
background: rgba(255, 255, 255, 0.04);
color: inherit;
border-radius: 10px;
padding: 7px 8px;
font-size: 12px;
text-align: left;
cursor: pointer;
}
.referral-pick-option:active { transform: scale(0.97); }
.referral-pick-swatch {
flex: none;
width: 30px;
height: 30px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.16);
}
.referral-pick-option-copy {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.referral-pick-option-copy strong { font-size: 12px; font-weight: 600; }
.referral-pick-option-copy small { font-size: 10px; opacity: 0.6; }
/* Окно «установи как приложение»: карточки плюсов и шаг установки. */
.install-hint-benefits {
display: grid;
gap: 8px;
margin: 4px 0 12px;
}
.install-hint-benefit {
font-size: 13px;
line-height: 1.45;
padding: 9px 12px;
border-radius: 12px;
/* Модалка всегда светлая (пергамент) в обеих темах, поэтому карточки
плюсов тоже светлые с тёмным текстом. Раньше фон брался из
var(--glass-surface), а это тёмное стекло: цвет текста не задавался
и наследовался тёмный, получался нечитаемый тёмный текст на тёмном. */
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(36, 50, 82, 0.14);
color: #2b3350;
}
.install-hint-steps {
font-size: 14px;
line-height: 1.5;
}
.season-events-note {
font-size: 12px;
opacity: 0.75;
margin-top: 10px;
}
/* Переключатель плотности сезонного арта в Обсерватории. */
.season-art-mode-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.season-art-mode-label {
font-size: 13px;
color: var(--profile-card-text, inherit);
opacity: 0.8;
}
.season-art-mode-switch {
display: flex;
border: 1px solid var(--profile-theme-chip-border, rgba(255, 255, 255, 0.12));
border-radius: 999px;
overflow: hidden;
}
.season-art-mode-switch button {
border: 0;
background: transparent;
color: inherit;
padding: 6px 14px;
font-size: 13px;
cursor: pointer;
}
.season-art-mode-switch button.active {
background: var(--profile-theme-chip-bg, rgba(255, 255, 255, 0.14));
font-weight: 600;
}
.profile-info-zone > .profile-top,
.profile-info-zone > .profile-meta,
.profile-info-zone > .daily-star-row {
position: relative;
z-index: 1;
}
.profile-cozy-sky {
position: absolute;
inset: 0;
overflow: hidden;
opacity: 0.9;
pointer-events: none;
}
body.light-theme .profile-cozy-sky,
body[data-theme="light"] .profile-cozy-sky {
opacity: 0.42;
}
.profile-cozy-sky .sky-dot {
position: absolute;
border-radius: 999px;
background: rgba(255,255,255,0.7);
box-shadow: 0 0 10px rgba(255,255,255,0.18);
pointer-events: none;
}
.daily-star-row {
margin-top: 16px;
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: start;
}
.daily-star-button {
position: static;
width: 44px;
height: 44px;
border: none;
border-radius: 16px;
background: transparent;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
/* Заметная пульсация звезды дня (v238): яркое дыхание + ритмичный
блик, чтобы звезда в профиле реально пульсировала. Ambient .sky-star
остаётся редкой (star-glint 7s); reduced-motion гасит всё ниже. */
animation: star-glint-bright 2.8s ease-in-out infinite;
}
.daily-star-button img {
width: 100%;
height: 100%;
object-fit: contain;
animation: star-breathe-bright 2.8s ease-in-out infinite;
}
.daily-star-button:hover {
animation-duration: 1.6s;
}
.daily-star-button:hover img {
animation-duration: 1.4s;
}
.daily-star-button:active {
transform: scale(0.94);
}
.daily-star-button.collected {
opacity: 0.55;
animation: none;
filter: grayscale(0.35);
}
.daily-star-button.collected img {
animation: none;
}
.daily-star-button.collecting {
animation: star-collect 0.72s ease-out;
}
@keyframes star-breathe {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.07); opacity: 1; }
}
@keyframes star-glint {
0%, 70%, 100% { filter: drop-shadow(0 0 8px rgba(232, 213, 163, 0.34)); }
80% { filter: drop-shadow(0 0 20px rgba(255, 244, 214, 0.9)); }
88% { filter: drop-shadow(0 0 11px rgba(232, 213, 163, 0.45)); }
}
@keyframes star-collect {
0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255, 244, 214, 0.6)); }
38% { transform: scale(1.45) rotate(8deg); filter: drop-shadow(0 0 30px rgba(255, 250, 228, 1)); }
100% { transform: scale(0.92); opacity: 0.55; filter: drop-shadow(0 0 6px rgba(232, 213, 163, 0.3)); }
}
/* v238: усиленная пульсация звезды дня в профиле — шире дыхание и ярче
блик (двойной halo). Отдельные keyframes, чтобы ambient .sky-star
сохранял прежний редкий ритм (star-glint 7s / star-breathe 4.6s). */
@keyframes star-breathe-bright {
0%, 100% { transform: scale(0.9); opacity: 0.68; }
50% { transform: scale(1.18); opacity: 1; }
}
@keyframes star-glint-bright {
0%, 100% { filter: drop-shadow(0 0 5px rgba(232, 213, 163, 0.45)); }
50% { filter: drop-shadow(0 0 16px rgba(255, 247, 222, 0.95)) drop-shadow(0 0 32px rgba(255, 231, 168, 0.6)); }
}
.daily-star-status {
font-size: 13px;
line-height: 1.5;
color: var(--profile-theme-muted, var(--text-secondary));
max-width: none;
}
.observatory-header {
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.observatory-kicker {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
font-weight: 800;
}
.observatory-lead {
font-size: 15px;
line-height: 1.6;
color: var(--text-primary);
}
/* Обсерватория - особый раздел профиля: холодный «аврора» акцент (не золото),
чтобы блок сразу отличался цветом от остальных, но шрифты оставались
читаемыми в обеих темах. */
#observatorySection {
border-color: rgba(56, 189, 248, 0.42);
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.16), transparent 48%),
radial-gradient(circle at bottom right, rgba(129, 140, 248, 0.14), transparent 44%),
var(--profile-card-bg);
}
#observatorySection > .theme-toggle {
border-color: rgba(56, 189, 248, 0.38);
background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(129, 140, 248, 0.12));
}
#observatorySection > .theme-toggle > span:first-child { color: #7dd3fc; }
#observatorySection > .theme-toggle > span:first-child small { color: rgba(125, 211, 252, 0.82); }
body.light-theme #observatorySection { border-color: rgba(2, 132, 199, 0.4); }
body.light-theme #observatorySection > .theme-toggle {
background: linear-gradient(135deg, rgba(2, 132, 199, 0.12), rgba(99, 102, 241, 0.1));
}
body.light-theme #observatorySection > .theme-toggle > span:first-child { color: #075985; }
body.light-theme #observatorySection > .theme-toggle > span:first-child small { color: rgba(7, 89, 133, 0.8); }
/* Звезда дня вынесена в отдельную карточку (v219): раньше она жила внутри
.profile-info-zone и её глушил сезонный арт подложки. Теперь карточка
вне .profile-surface, поэтому фон/контраст берутся из темы интерфейса и
звезда читается на любой анкете. Тёплый золотой подтон = ритуал. */
.profile-dailystar-card {
border-color: rgba(244, 228, 193, 0.28);
background:
radial-gradient(circle at top left, rgba(255, 244, 214, 0.12), transparent 52%),
var(--profile-card-bg);
}
.profile-dailystar-card .daily-star-row { margin-top: 12px; }
/* Мой разбор - яркий блок профиля (v219): тот же сдержанный паттерн, что у
Обсерватории, но в лавандовом hue (--accent-lavender), чтобы раздел не
спорил с холодным «аврора» акцентом и не выглядел аляповато. */
.profile-reading-card {
position: relative;
text-align: center;
cursor: pointer;
padding: 18px;
border: 1.5px solid transparent;
background:
radial-gradient(circle at top left, rgba(196, 181, 224, 0.18), transparent 55%) padding-box,
radial-gradient(circle at bottom right, rgba(167, 139, 250, 0.14), transparent 50%) padding-box,
linear-gradient(var(--profile-card-bg), var(--profile-card-bg)) padding-box,
linear-gradient(120deg, #cdbdf0 0%, #f3d79c 30%, #a9caff 60%, #cdbdf0 100%) border-box;
background-size: 100% 100%, 100% 100%, 100% 100%, 320% 320%;
animation: reading-border-shimmer 7s linear infinite;
transition: transform 0.15s ease;
}
.profile-reading-card:hover { transform: translateY(-1px); }
.profile-reading-card:active { transform: scale(0.98); }
.profile-reading-card .profile-section-title { color: #ddd6fe; margin-bottom: 6px; font-size: 17px; }
.profile-reading-card .profile-section-copy { color: rgba(221, 214, 254, 0.78); font-size: 13px; }
@keyframes reading-border-shimmer {
0% { background-position: 0 0, 0 0, 0 0, 0% 50%; }
100% { background-position: 0 0, 0 0, 0 0, 320% 50%; }
}
body.light-theme .profile-reading-card .profile-section-title { color: #5b21b6; }
body.light-theme .profile-reading-card .profile-section-copy { color: rgba(91, 33, 182, 0.8); }
/* Шапка исследований в экране «Мой разбор» (v219): счётчик пройденных глав
+ подсказка про пересборку + кнопка «К исследованиям» перед текстом. */
.personal-research-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
}
.personal-research-head-text { display: grid; gap: 4px; min-width: 0; }
.personal-research-head-text strong { font-size: 15px; color: var(--card-title); }
.personal-research-head-text span { font-size: 12.5px; line-height: 1.55; color: var(--card-copy); }
.personal-research-head-plus {
flex: 0 0 auto;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid var(--border-card, rgba(255, 255, 255, 0.12));
background: transparent;
color: var(--card-title, var(--text-primary));
font-size: 19px;
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.12s ease, border-color 0.2s ease;
}
.personal-research-head-plus:hover { border-color: var(--accent-lavender, #c4b5e0); }
.personal-research-head-plus:active { transform: scale(0.92); }
/* «Пересобрать разбор» в ряду действий: серый, пока не хватает исследований. */
.refine-locked { opacity: 0.5; filter: grayscale(0.45); }
.observatory-feature-list {
display: grid;
gap: 10px;
margin-bottom: 14px;
}
.observatory-feature {
padding: 14px 16px;
border-radius: 18px;
background: var(--bg-card);
border: 1px solid var(--border-card);
}
.observatory-feature strong {
display: block;
font-size: 14px;
color: var(--text-primary);
margin-bottom: 4px;
}
.observatory-feature span {
display: block;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.observatory-gift-card {
padding: 16px;
border-radius: 20px;
background: var(--banner-bg);
border: 1px solid var(--border-card);
display: grid;
gap: 12px;
margin-bottom: 14px;
}
.observatory-gift-title {
font-size: 15px;
font-weight: 800;
color: var(--profile-card-text);
display: inline-flex;
align-items: center;
gap: 8px;
}
.observatory-gift-title .ui-icon {
width: 16px;
height: 16px;
}
.observatory-gift-copy {
font-size: 13px;
line-height: 1.55;
color: var(--profile-card-copy);
}
/* Модалки разбора «пергаментные» в обеих темах, поэтому ведический
* блок рисуем фиксированными чернилами, а не переменными темы.
* Кнопка компактная и ведёт к пояснению — не выглядит рекламным
* баннером поверх текста разбора. */
.vedic-upsell {
margin-top: 18px;
padding: 12px 14px;
border-radius: 14px;
border: 1px dashed rgba(117, 94, 58, 0.35);
background: rgba(255, 255, 255, 0.35);
display: grid;
gap: 6px;
justify-items: start;
}
.vedic-upsell-head {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #1a1a2e;
}
.vedic-upsell-copy {
font-size: 12px;
line-height: 1.45;
color: rgba(26, 26, 46, 0.66);
}
.vedic-upsell-btn {
margin-top: 2px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(117, 94, 58, 0.4);
background: rgba(117, 94, 58, 0.08);
color: #5c4a2e;
font-size: 13px;
font-weight: 600;
font-family: 'Manrope', sans-serif;
cursor: pointer;
}
/* Компактная вторичная кнопка для апселлов в тематических поверхностях
* (чат, карточка совместимости): перебивает width:100% базовой. */
.btn-compact {
width: auto;
padding: 8px 16px;
font-size: 13px;
border-radius: 999px;
}
/* Пояснение про джьотиш открывается в пергаментной модалке — чернила
* фиксированные, как в модалке Обсерватории. */
#vedicInfoModal .modal-note {
color: rgba(26, 26, 46, 0.72);
}
#vedicInfoModal .modal-note strong {
color: #1a1a2e;
}
.observatory-price-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
/* Модалка оплаты всегда «пергаментная» в обеих темах, поэтому цвета
карточек цен фиксированные и читаются на светлом фоне. */
.observatory-price-card {
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(117, 94, 58, 0.22);
background: rgba(255, 255, 255, 0.55);
display: grid;
gap: 3px;
text-align: left;
}
.observatory-price-card strong {
font-size: 20px;
font-weight: 800;
color: #1a1a2e;
}
.observatory-price-card span {
font-size: 12px;
color: rgba(26, 26, 46, 0.72);
line-height: 1.35;
}
.observatory-price-card em {
font-style: normal;
font-size: 11px;
color: #8f6d1f;
}
.observatory-price-card.featured {
border-color: rgba(143, 109, 31, 0.55);
box-shadow: 0 0 0 1px rgba(143, 109, 31, 0.22);
}
/* Статусные карточки (Солнце/Первозвёзд) подсвечиваем золотом,
чтобы они читались как отдельные награды, а не тарифы. */
.observatory-price-card--status {
border-color: rgba(143, 109, 31, 0.6);
background: linear-gradient(150deg, rgba(246, 212, 124, 0.32), rgba(255, 255, 255, 0.55) 65%);
box-shadow: 0 4px 16px rgba(143, 109, 31, 0.16);
}
/* Модалка Обсерватории: фон пергаментный в обеих темах, поэтому
текст фиксированными тёмными чернилами, а не темными переменными. */
#observatoryActivationModal .modal-note {
color: rgba(26, 26, 46, 0.72);
}
#observatoryActivationModal .modal-note strong {
color: #1a1a2e;
}
/* Превью сезонной темы: тот же пергаментный модал. В тёмной теме
переменные --text-primary/--text-secondary давали белый текст на
светлом фоне — заголовок и пояснение были невидимы. */
#seasonThemePreviewModal .modal-title {
color: #1a1a2e;
}
#seasonThemePreviewModal .modal-note {
color: rgba(26, 26, 46, 0.72);
}
#photoRejectNoticeModal .modal-title {
color: #1a1a2e;
}
#photoRejectNoticeModal .modal-note {
color: rgba(26, 26, 46, 0.72);
}
/* FAQ в окне Обсерватории: вопросы свёрнуты, по тапу раскрываются.
Цвета как у модалки — пергаментный фон в обеих темах. */
.observatory-faq {
display: grid;
gap: 8px;
margin-top: 6px;
}
.observatory-faq-title {
font-size: 13px;
font-weight: 700;
color: #1a1a2e;
}
.faq-item {
border: 1px solid rgba(117, 94, 58, 0.22);
border-radius: 16px;
background: rgba(255, 255, 255, 0.55);
overflow: hidden;
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;
background: none;
border: none;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
text-align: left;
cursor: pointer;
}
.faq-chevron {
flex: none;
color: rgba(26, 26, 46, 0.55);
transition: transform 0.25s ease;
}
.faq-item.open .faq-chevron {
transform: rotate(180deg);
}
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s ease;
}
.faq-item.open .faq-answer {
grid-template-rows: 1fr;
}
.faq-answer-inner {
overflow: hidden;
font-size: 13px;
line-height: 1.55;
color: rgba(26, 26, 46, 0.72);
}
.faq-answer-text {
padding: 0 14px 12px;
}
#observatoryActivationModal .form-group label {
color: rgba(26, 26, 46, 0.8);
}
#observatoryActivationModal .form-group input {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(117, 94, 58, 0.28);
color: #1a1a2e;
}
#observatoryActivationModal .form-group input::placeholder {
color: rgba(26, 26, 46, 0.4);
}
/* Контент модала обсерватории высокий: ограничиваем по экрану и скроллим внутри,
чтобы кнопка закрытия не уезжала под нижний меню-бар (инцидент 2026-08-12). */
#observatoryActivationModal .modal-content {
max-height: calc(100dvh - max(40px, env(safe-area-inset-top)) - max(40px, env(safe-area-inset-bottom)));
overflow-y: auto;
}
.legal-modal-content {
max-width: 540px;
}
.legal-doc-meta {
text-align: center;
font-size: 12px;
color: #8a7a5f;
margin: -8px 0 12px;
}
.manifesto-body p {
margin: 0 0 12px;
}
.manifesto-lines {
line-height: 1.9;
font-style: italic;
}
.manifesto-sign {
font-weight: 700;
margin-top: 16px;
}
.manifesto-seal {
font-size: 10px;
letter-spacing: 0.04em;
word-break: break-all;
opacity: 0.55;
}
.manifesto-divider {
border: none;
border-top: 1px solid rgba(117, 94, 58, 0.25);
margin: 18px 0;
}
.manifesto-en {
font-size: 12px;
color: #6f6047;
}
.legal-doc-body {
flex: 1;
overflow-y: auto;
text-align: left;
font-size: 14px;
line-height: 1.55;
color: #2c2416;
padding-right: 6px;
}
.legal-doc-body h4 {
margin: 16px 0 6px;
font-size: 15px;
color: #1a1a2e;
}
.legal-doc-body p {
margin: 0 0 10px;
}
.legal-doc-body a {
color: #7a5c2e;
text-decoration: underline;
}
.legal-consent-group {
margin-top: 4px;
}
.legal-consent {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.legal-consent input {
margin-top: 2px;
width: 18px;
height: 18px;
accent-color: #a8823f;
cursor: pointer;
flex-shrink: 0;
}
.legal-consent-copy {
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
text-align: left;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
}
.legal-link {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--accent-gold, #a8823f);
text-decoration: underline;
cursor: pointer;
}
a.legal-link:visited,
a.legal-link:hover {
color: var(--accent-gold, #a8823f);
}
.auth-legal-footer {
margin-top: 14px;
text-align: center;
font-size: 12px;
color: var(--text-secondary);
}
.danger-toggle {
border-color: rgba(224, 82, 96, 0.35);
}
.danger-toggle span,
.danger-toggle small {
color: #e05260;
}
.danger-toggle strong {
color: #e05260;
}
.btn-danger {
background: linear-gradient(180deg, #e05260 0%, #c73e4c 100%);
color: #fff;
border: none;
border-radius: var(--radius-button, 50px);
padding: 14px 24px;
font-size: 15px;
font-weight: 700;
font-family: 'Manrope', sans-serif;
cursor: pointer;
transition: transform 0.12s ease-out, opacity 0.2s;
}
.btn-danger:active { transform: scale(0.98); }
.btn-danger:disabled { opacity: 0.55; cursor: default; }
/* Большая кнопка покупки Обсерватории: единственная точка входа в оплату. */
.observatory-buy-button {
width: 100%;
margin-top: 16px;
padding: 18px;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.06em;
}
.observatory-theme-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 14px 0;
}
.observatory-theme-card {
position: relative;
border-radius: 20px;
border: 1px solid var(--border-card);
overflow: hidden;
background: var(--bg-card);
cursor: pointer;
padding: 0;
text-align: left;
transition: transform 0.18s var(--ios-spring), box-shadow 0.22s, border-color 0.22s;
}
.observatory-theme-card:active { transform: scale(0.985); }
.observatory-theme-card.active {
box-shadow: 0 0 0 2px rgba(232, 213, 163, 0.26);
}
.observatory-theme-preview {
height: 86px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.observatory-theme-meta {
padding: 12px;
display: grid;
gap: 4px;
}
.observatory-theme-name {
font-size: 13px;
font-weight: 800;
color: var(--text-primary);
}
.observatory-theme-note {
font-size: 12px;
line-height: 1.4;
color: var(--text-secondary);
}
.observatory-theme-badge {
position: absolute;
top: 10px;
right: 10px;
min-width: 32px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: rgba(8, 12, 24, 0.58);
color: #fff6ea;
border: 1px solid rgba(255,255,255,0.12);
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.observatory-theme-badge .ui-icon {
width: 12px;
height: 12px;
}
.daily-star-img {
width: 80px;
height: 80px;
object-fit: contain;
margin: 0 auto 16px;
display: block;
animation: star-appear 0.6s ease-out;
filter: drop-shadow(0 0 24px rgba(232,213,163,0.4));
}
@keyframes star-appear {
0% { transform: scale(0) rotate(-30deg); opacity: 0; }
60% { transform: scale(1.15) rotate(5deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.sky-star {
position: absolute;
font-size: 24px;
color: var(--accent-gold);
background: none;
border: none;
cursor: pointer;
z-index: 2;
transition: transform 0.3s ease, filter 0.3s ease;
animation: star-glint 7s ease-in-out infinite;
}
.sky-star img {
width: 22px;
height: 22px;
object-fit: contain;
animation: star-breathe 4.6s ease-in-out infinite;
}
.sky-star:hover {
animation-duration: 3.4s;
}
.sky-star:hover img {
animation-duration: 2.4s;
}
.sky-star.collected {
color: var(--text-muted);
animation: none;
cursor: default;
filter: grayscale(0.9) opacity(0.45);
}
.sky-star.collected img {
animation: none;
}
.sky-star.collecting {
animation: star-collect 0.72s ease-out;
}
/* ── «Звезда дня» v208: счётчик, модалка вех, полёт «+1» ── */
.daily-star-counter {
margin: 12px auto 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
width: fit-content;
max-width: 100%;
padding: 10px 16px;
border-radius: 14px;
background: var(--bg-card);
border: 1px solid var(--border-card);
cursor: pointer;
text-align: center;
font: inherit;
color: inherit;
transition: transform 0.15s ease, border-color 0.2s ease;
}
.daily-star-counter[hidden] { display: none; }
.daily-star-counter:hover {
border-color: var(--accent-gold);
transform: translateY(-1px);
}
.daily-star-counter-value {
display: block;
font-size: 15px;
font-weight: 800;
color: var(--profile-card-text, var(--text-primary));
}
.daily-star-counter-meta {
display: block;
font-size: 12px;
color: var(--text-secondary);
}
.daily-star-counter-value.bump {
animation: daily-star-counter-bump 0.52s ease-out;
}
@keyframes daily-star-counter-bump {
0% { transform: scale(1); }
40% { transform: scale(1.2); color: var(--accent-gold); }
100% { transform: scale(1); }
}
/* «+1» летит от звезды к счётчику профиля (отключается при reduced-motion). */
.daily-star-fly {
position: fixed;
z-index: 4000;
pointer-events: none;
font-size: 22px;
font-weight: 800;
color: var(--accent-gold);
text-shadow: 0 0 16px rgba(255, 244, 214, 0.95), 0 0 34px rgba(246, 217, 155, 0.55);
opacity: 1;
will-change: transform, opacity;
}
/* Шлейф кометы тянется вверх: звезда «падает» сверху вниз к счётчику. */
.daily-star-fly::after {
content: '';
position: absolute;
left: 50%;
bottom: 55%;
width: 4px;
height: 56px;
transform: translateX(-50%);
background: linear-gradient(to top, rgba(255, 244, 214, 0.9), rgba(246, 217, 155, 0.32) 45%, rgba(246, 217, 155, 0) 100%);
filter: blur(2.5px);
border-radius: 4px;
}
.daily-star-fly.flying {
animation: star-fly-fall 1.5s cubic-bezier(0.42, 0.14, 0.3, 1) forwards;
}
@keyframes star-fly-fall {
0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
18% { transform: translate(calc(var(--fly-dx, 0px) * 0.1), calc(var(--fly-dy, 0px) * -0.08)) scale(1.18) rotate(-6deg); opacity: 1; }
55% { transform: translate(calc(var(--fly-dx, 0px) * 0.55 + 22px), calc(var(--fly-dy, 0px) * 0.5)) scale(0.95) rotate(8deg); opacity: 1; }
100% { transform: translate(var(--fly-dx, 0px), var(--fly-dy, 0px)) scale(0.5) rotate(0deg); opacity: 0; }
}
/* Мысль дня центрируем только внутри карточки звезды: общий .modal-text
выровнен по левому краю и используется во многих модалках. */
.daily-star-card .modal-text {
text-align: center;
}
/* Подпись «— фильм» под цитатой: курсив, приглушённое золото на кремовой карточке. */
.daily-star-source {
margin: -12px 0 18px;
text-align: center;
font-size: 13px;
font-style: italic;
letter-spacing: 0.01em;
color: #8a7440;
}
.daily-star-source[hidden] { display: none; }
/* Футер модалки сбора: «Звезда собрана / Сегодня +1 / Всего N». */
.daily-star-footer {
margin: 4px 0 16px;
padding-top: 12px;
border-top: 1px solid rgba(117, 94, 58, 0.14);
display: grid;
gap: 3px;
text-align: center;
font-size: 13.5px;
color: #444;
}
.daily-star-footer-title {
font-weight: 800;
color: #1a1a2e;
}
.daily-star-footer-row { line-height: 1.35; }
.daily-star-footer strong { color: #b8862a; }
/* Модалка вех живёт в бумажной карточке .modal-content — тёмный текст на креме. */
.daily-star-summary {
text-align: center;
font-size: 13.5px;
font-weight: 700;
color: #8a7a5f;
margin: -6px 0 12px;
}
.milestone-list {
display: grid;
gap: 2px;
max-height: 56vh;
overflow-y: auto;
}
.milestone-row {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
align-items: start;
padding: 12px 0;
border-bottom: 1px solid rgba(117, 94, 58, 0.12);
}
.milestone-row:last-child { border-bottom: none; }
.milestone-mark {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(117, 94, 58, 0.08);
font-weight: 800;
font-size: 14px;
color: #8a7a5f;
}
.milestone-row.reached .milestone-mark {
background: linear-gradient(135deg, #f8dd8f, #d19a2f);
color: #2b1d04;
}
/* Второй столбец сетки .milestone-row: min-width:0 не даёт длинному
заголовку и прогресс-бару распирать колонку (grid-item overflow).
Отступы между строками заданы margin-top у самих детей. */
.milestone-body {
min-width: 0;
}
.milestone-title {
font-weight: 800;
font-size: 14.5px;
color: #1a1a2e;
}
.milestone-at {
font-weight: 600;
font-size: 12px;
color: #8a7a5f;
margin-left: 6px;
}
.milestone-reward {
font-size: 12.5px;
line-height: 1.45;
color: #5a5142;
margin-top: 3px;
}
.milestone-bar {
margin-top: 8px;
height: 6px;
border-radius: 999px;
background: rgba(117, 94, 58, 0.12);
overflow: hidden;
}
.milestone-bar span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #f8dd8f, #d19a2f);
}
.milestone-action { margin-top: 10px; }
.milestone-done {
margin-top: 8px;
font-size: 12.5px;
font-weight: 700;
color: #b8862a;
}
/* Артефакты v208: Звездопад (7★, личный) и Плеяды (100★, публичный). */
.artifact-icon--starfall {
color: #ffe6a8;
filter: drop-shadow(0 0 12px rgba(255, 226, 150, 0.5));
}
.artifact-icon--pleiades {
color: #bcd8ff;
filter: drop-shadow(0 0 14px rgba(150, 195, 255, 0.55));
}
/* Личный статус «Год под звёздами» (веха 365) рядом с именем в анкете. */
.supporter-badge--year-stars {
background: linear-gradient(135deg, #cfe0ff, #8fa9e8);
color: #16224a;
box-shadow: 0 2px 12px rgba(143, 169, 232, 0.45);
}
/* Спека v208: ритуал звезды не должен быть «казино» — при reduced-motion
гасим дыхание, блик, вспышку сбора, полёт «+1» и импульс счётчика. */
@media (prefers-reduced-motion: reduce) {
.daily-star-button,
.daily-star-button img,
.sky-star,
.sky-star img,
.daily-star-button.collecting,
.sky-star.collecting,
.daily-star-counter-value.bump,
.profile-reading-card {
animation: none !important;
}
.daily-star-fly { display: none; }
}
.research-profile-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 14px 0 16px;
}
.research-stat {
border-radius: 18px;
background: var(--bg-card);
border: 1px solid var(--border-card);
padding: 14px;
}
.research-stat strong {
display: block;
font-size: 22px;
font-weight: 800;
color: var(--profile-card-text);
margin-bottom: 4px;
}
.research-stat span {
font-size: 12px;
line-height: 1.4;
color: var(--profile-card-copy);
}
/* Карточка награды за исследование ВСЕГДА светлая, поэтому статистику под
коллекционной картой красим в цвет самой карточки (currentColor), а не в
переменные профиля: иначе на теме или тёмном интерфейсе подписи выходят
светлым по светлому и не читаются. Плитки делаем нейтрально-светлыми. */
.research-reward-card .research-stat {
background: rgba(29, 40, 68, 0.05);
border-color: rgba(29, 40, 68, 0.1);
}
.research-reward-card .research-stat strong { color: currentColor; }
.research-reward-card .research-stat span { color: currentColor; opacity: 0.72; }
.cozy-shell {
max-width: 420px;
margin: 0 auto;
padding-top: 32px;
position: relative;
}
.research-overview-card {
background: linear-gradient(180deg, rgba(18, 28, 51, 0.76), rgba(16, 36, 68, 0.76));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 20px;
backdrop-filter: blur(18px);
box-shadow: 0 20px 50px rgba(0,0,0,0.22);
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.research-overview-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255, 214, 102, 0.22), transparent 38%);
pointer-events: none;
}
.research-overview-card h3 {
font-size: 16px;
font-weight: 700;
color: #cfd8ff;
margin-bottom: 16px;
}
.research-overview-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.research-overview-stat {
border-radius: 18px;
background: rgba(255,255,255,0.05);
padding: 14px;
}
.research-overview-stat strong {
display: block;
font-size: 26px;
line-height: 1;
margin-bottom: 6px;
color: #ffffff;
}
.research-overview-stat span {
display: block;
font-size: 12px;
color: #b9c4e8;
line-height: 1.4;
}
.research-list {
display: grid;
gap: 12px;
}
.research-item {
background: rgba(8, 13, 30, 0.58);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: 16px;
backdrop-filter: blur(18px);
box-shadow: 0 18px 42px rgba(0,0,0,0.2);
}
.research-lens-section {
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 12px;
}
.research-lens-section:first-child {
margin-top: 0;
}
.research-lens-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 0 4px;
}
.research-lens-header h3 {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.research-lens-header span {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
white-space: nowrap;
}
.research-lens-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
text-align: left;
background: rgba(8, 13, 30, 0.58);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: 18px 16px;
backdrop-filter: blur(18px);
box-shadow: 0 18px 42px rgba(0,0,0,0.2);
color: inherit;
font: inherit;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.research-lens-card:active {
transform: scale(0.98);
border-color: rgba(255,255,255,0.2);
}
.research-lens-card-meta h4 {
margin: 0;
font-size: 17px;
color: var(--text-primary);
}
.research-lens-card-meta p {
margin: 3px 0 0;
font-size: 12px;
color: var(--text-muted);
}
.research-lens-card-side {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.research-lens-chevron {
font-size: 22px;
line-height: 1;
color: var(--text-muted);
}
.research-lens-screen-note {
margin: -6px 0 14px;
}
.engine-trust-card {
margin-top: 14px;
}
.engine-trust-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.engine-trust-star {
color: #ffb84d;
font-size: 14px;
line-height: 1;
}
.social-follow-card {
margin-top: 14px;
}
.social-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.social-chip {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 184, 77, 0.35);
background: rgba(255, 184, 77, 0.08);
color: inherit;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.social-chip:hover,
.social-chip:focus-visible {
background: rgba(255, 184, 77, 0.18);
}
.research-item.locked {
opacity: 0.82;
}
.research-item-header {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 12px;
align-items: center;
}
.research-item-icon {
width: 56px;
height: 56px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 28% 22%, rgba(255, 224, 158, 0.2), transparent 34%),
rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
color: #f6e4b1;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.research-item-icon svg {
width: 34px;
height: 34px;
display: block;
}
.research-item.done .research-item-icon {
box-shadow: 0 0 0 2px rgba(255, 214, 102, 0.28), 0 0 22px rgba(255, 214, 102, 0.14);
}
.research-item-meta h4 {
font-size: 17px;
font-weight: 800;
margin-bottom: 4px;
color: #ffffff;
}
.research-item-meta p {
font-size: 13px;
line-height: 1.45;
color: #b9c4e8;
}
.research-state-chip {
border-radius: 999px;
padding: 7px 10px;
font-size: 11px;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255,255,255,0.08);
color: #dbe4ff;
white-space: nowrap;
}
.research-state-chip.done {
background: rgba(99, 215, 145, 0.16);
color: #9ff0b4;
}
.research-state-chip.available {
background: rgba(255, 214, 102, 0.16);
color: #ffe08a;
}
.research-state-chip.premium {
background: linear-gradient(90deg, rgba(214, 40, 57, 0.22), rgba(255, 123, 84, 0.22));
color: #ff9e7d;
}
/* Ретеншн-петля: persistent-чип в Research-хабе «N глав устарели после
уточнения времени -> Открыть». Коралловый - сигнал «требует внимания»,
в такт .onboarding-missing-panel (v209). */
.research-stale-chip {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
margin-bottom: 14px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(212, 117, 107, 0.12);
border: 1px solid rgba(212, 117, 107, 0.36);
color: var(--text-primary);
font-size: 13px;
line-height: 1.45;
text-align: left;
cursor: pointer;
transition: transform 0.3s var(--ios-spring), box-shadow 0.3s var(--ios-spring);
}
.research-stale-chip:active { transform: scale(0.98); }
.research-stale-chip-cta {
flex-shrink: 0;
font-weight: 700;
color: var(--accent-coral);
white-space: nowrap;
}
/* Компактный бейдж «обновится» на устаревшей главе в списке линзы. */
.research-stale-badge {
border-radius: 999px;
padding: 5px 9px;
font-size: 10px;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(212, 117, 107, 0.16);
color: var(--accent-coral);
white-space: nowrap;
}
.research-item.premium-locked {
border-color: rgba(214, 40, 57, 0.35);
box-shadow: 0 0 0 1px rgba(214, 40, 57, 0.12);
}
.research-item-actions {
margin-top: 14px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.research-item-copy {
margin-top: 12px;
font-size: 13px;
line-height: 1.55;
color: #cfd8ff;
}
.research-read-card,
.research-rating-card,
.research-reward-card,
.daily-star-card,
.card-modal-card {
background:
radial-gradient(circle at top right, rgba(255, 223, 166, 0.22), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245, 241, 232, 0.96));
color: #1d2844;
border-radius: 28px;
padding: 22px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.research-subtitle {
font-size: 14px;
line-height: 1.55;
color: #5c6986;
margin-top: 6px;
}
.research-read-shell {
display: grid;
gap: 14px;
}
.research-read-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.research-meta-chip {
border-radius: 999px;
background: rgba(102, 126, 234, 0.08);
color: #324162;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
}
.research-read-body {
/* Длинный разбор (×3) листается вместе с экраном #researchStudyScreen
(.screen имеет overflow-y:auto, .app-shell — padding-bottom под таб-бар).
Вложенный скролл max-height убран: на длинных текстах он «упирался»
и не давал дочитать главу до конца. */
font-size: 16px;
line-height: 1.72;
color: #374151;
white-space: pre-line;
overflow-wrap: anywhere;
}
.research-read-status {
border-radius: 18px;
background: rgba(102, 126, 234, 0.08);
border: 1px solid rgba(102, 126, 234, 0.12);
padding: 14px;
font-size: 13px;
line-height: 1.55;
color: #51607c;
}
.research-rating-grid {
display: grid;
gap: 14px;
}
.rating-question {
font-size: 16px;
font-weight: 700;
color: #1d2844;
}
.scale-captions {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
color: #6c7894;
margin-bottom: 8px;
}
.score-scale {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
}
.score-button,
.usefulness-button {
border: 1px solid rgba(102, 126, 234, 0.14);
background: rgba(102, 126, 234, 0.06);
color: #243252;
border-radius: 16px;
min-height: 50px;
padding: 10px;
cursor: pointer;
font-weight: 700;
font-size: 14px;
}
.score-button.active,
.usefulness-button.active {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.18), rgba(255, 214, 102, 0.18));
border-color: rgba(255, 184, 77, 0.34);
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.12);
}
.usefulness-grid {
display: grid;
gap: 10px;
}
.fate-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.fate-card-button {
border: none;
background: transparent;
padding: 0;
display: block;
cursor: pointer;
}
.fate-card {
width: 160px;
height: 240px;
border-radius: 16px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 8px 28px rgba(0,0,0,0.4);
flex-shrink: 0;
perspective: 1000px;
}
.fate-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(0,0,0,0.5);
}
.fate-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
/* Блик + подъём по тапу: карта односторонняя, переворота больше нет */
.fate-card-shine {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
mix-blend-mode: screen;
background: linear-gradient(115deg,
transparent 32%,
rgba(255,255,255,0.55) 47%,
rgba(255,214,130,0.6) 52%,
transparent 68%);
transform: translateX(-130%);
}
.fate-card.shining {
animation: card-lift 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fate-card.shining .fate-card-shine {
animation: shine-sweep 0.9s cubic-bezier(0.3, 0.6, 0.4, 1);
}
@keyframes shine-sweep {
0% { opacity: 0; transform: translateX(-130%); }
18% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; transform: translateX(130%); }
}
@keyframes card-lift {
0% { transform: translateY(0) scale(1); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
40% { transform: translateY(-10px) scale(1.035); box-shadow: 0 18px 46px rgba(255,205,110,0.42); }
100% { transform: translateY(0) scale(1); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
}
.fate-card.deal-in .fate-card-inner {
/* backwards, не both: после анимации появления трансформ
освобождается, чтобы тап-блик (card-lift) отрабатывал чисто */
animation: card-deal-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}
.fate-card-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.fate-card-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fate-card.locked {
filter: brightness(0.6) grayscale(0.2);
}
.fate-card-lock-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 16px;
background: linear-gradient(transparent 40%, rgba(15,13,26,0.85));
}
.fate-card.unlocked {
filter: none;
border: 1.5px solid var(--border-gold);
}
.fate-card-title {
font-size: 20px;
font-weight: 800;
letter-spacing: 0.03em;
}
.fate-card-subtitle {
font-size: 12px;
line-height: 1.5;
opacity: 0.82;
margin-top: 4px;
}
#cardModalBody {
display: flex;
justify-content: center;
margin-top: 12px;
}
#cardModal .fate-card {
width: min(320px, 82vw);
height: min(500px, 58dvh);
}
#cardModal .fate-card-brand {
margin-top: auto;
padding-top: 12px;
}
.card-modal-card .btn-secondary,
.modal-content .btn-secondary {
background: rgba(36, 50, 82, 0.06);
color: #243252;
border: 1px solid rgba(36, 50, 82, 0.18);
}
.card-modal-card .artifact-meta {
color: #51607c;
}
.fate-card-brand {
font-size: 11px;
color: #7381a0;
margin-top: 14px;
}
.fate-card-lock {
margin-top: 8px;
text-align: center;
font-size: 13px;
color: rgba(255,255,255,0.78);
line-height: 1.5;
}
@keyframes card-deal-in {
0% { transform: translateY(16px) scale(0.88); opacity: 0.25; }
55% { opacity: 1; }
100% { transform: translateY(0) scale(1); opacity: 1; }
}
.reward-flip-hint {
font-size: 13px;
color: #5c6986;
line-height: 1.5;
text-align: center;
}
.reward-card-stage {
display: grid;
justify-items: center;
gap: 18px;
margin: 18px 0;
position: relative;
}
.reward-card-stage::before {
content: '';
position: absolute;
/* подложка ровно по ширине карты (min(280px,100%)), чтобы не выпирала по бокам */
top: -20px;
left: max(0px, calc(50% - 140px));
right: max(0px, calc(50% - 140px));
height: 220px;
background:
radial-gradient(circle at 20% 24%, rgba(255, 212, 120, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 74% 18%, rgba(255,255,255,0.38) 0 2px, transparent 3px),
radial-gradient(circle at 38% 68%, rgba(215, 197, 255, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 62% 54%, rgba(255, 212, 120, 0.3) 0 2px, transparent 3px);
animation: reward-stardust 2.8s ease-in-out infinite;
pointer-events: none;
}
.reward-card-stage .fate-card {
width: min(280px, 100%);
}
.reward-card-stage .fate-card-inner {
animation: card-arrive 0.7s ease;
}
@keyframes card-arrive {
0% { opacity: 0; transform: translateY(22px) scale(0.88) rotate(-4deg); }
100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes reward-stardust {
0%, 100% { opacity: 0.46; transform: translateY(0) scale(0.98); }
50% { opacity: 1; transform: translateY(-6px) scale(1.02); }
}
.reward-copy {
text-align: center;
color: #5c6986;
line-height: 1.55;
}
.coming-soon-card {
border: 1px dashed rgba(102, 126, 234, 0.16);
background: rgba(102, 126, 234, 0.04);
}
.coming-soon-card .profile-section-copy {
margin-bottom: 0;
}
.coming-soon-card .profile-section-title {
color: var(--profile-card-text);
}
.coming-soon-card .profile-section-copy {
color: var(--profile-card-copy);
}
.artifact-preview-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 12px 0 4px;
}
.artifact-mini {
width: 34px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
background: linear-gradient(180deg, rgba(22, 33, 62, 0.95), rgba(15, 52, 96, 0.95));
border: 1px solid rgba(255, 209, 102, 0.22);
box-shadow: 0 0 12px rgba(102, 126, 234, 0.16);
}
.artifact-mini .artifact-icon {
width: 22px;
height: 22px;
}
.chat-insight-stack {
display: grid;
gap: 10px;
}
/* Блок вайба по умолчанию свёрнут в тонкую пилюлю: карты чата
не теряют место, разбор открывается тапом по кнопке. */
.chat-insight-pill {
width: 100%;
border: 1px solid var(--chat-insight-border);
background: var(--chat-insight-bg);
border-radius: 999px;
padding: 7px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
color: var(--insight-title);
font-size: 13px;
font-weight: 700;
}
.chat-insight-stack.insights-hidden .chat-insight-card,
.chat-insight-stack.insights-hidden #portraitExchangeSlot,
.chat-insight-stack.insights-hidden .chat-insight-accordion {
display: none;
}
.chat-insight-pill-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-insight-card {
border-radius: 18px;
border: 1px solid var(--chat-insight-border);
background: var(--chat-insight-bg);
overflow: hidden;
transition: transform 0.16s var(--ios-spring), border-color 0.22s var(--ios-spring), background 0.22s var(--ios-spring);
}
.chat-insight-toggle {
width: 100%;
border: none;
background: transparent;
color: inherit;
padding: 11px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
text-align: left;
}
.chat-insight-title {
font-size: 14px;
font-weight: 800;
color: var(--insight-title);
margin-bottom: 0;
}
.chat-insight-subtitle {
font-size: 13px;
color: var(--insight-copy);
line-height: 1.45;
}
.chat-insight-chevron {
color: var(--insight-copy);
font-size: 16px;
flex: 0 0 auto;
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
}
.chat-insight-body {
display: none;
padding: 0 14px 12px;
color: var(--insight-copy);
font-size: 13px;
line-height: 1.5;
white-space: pre-line;
overflow-wrap: anywhere;
}
.chat-insight-body p {
margin: 0 0 8px;
}
.chat-insight-body p:last-child {
margin-bottom: 0;
}
.chat-insight-body .result-text {
font-size: 13px;
line-height: 1.5;
}
.chat-insight-body .star-strength {
margin: 2px 0 10px;
padding: 10px 12px;
border-radius: 14px;
}
.chat-insight-card.expanded .chat-insight-body {
display: block;
animation: surface-pop 0.22s ease;
/* Экран чата статичен, поэтому длинные разборы листаются
внутри самой карточки, а не тянут ленту сообщений. */
max-height: 42vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* «Глубже о вас» как аккордеон: сворачиваемые блоки вместо простыни.
Каждое раскрытое тело скроллится внутри себя, потому что экран чата
статичен; это же чинит непролистываемый ранее разбор химии. */
.chat-insight-accordion { display: grid; gap: 8px; }
.ci-acc-item {
border-radius: 16px;
border: 1px solid var(--chat-insight-border);
background: var(--chat-insight-bg);
overflow: hidden;
}
.ci-acc-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: none;
background: none;
color: inherit;
padding: 11px 14px;
cursor: pointer;
text-align: left;
font: inherit;
}
.ci-acc-headtext { display: grid; gap: 2px; min-width: 0; }
.ci-acc-title {
font-size: 14px;
font-weight: 800;
color: var(--insight-title);
display: flex;
align-items: center;
gap: 8px;
}
.ci-acc-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 8px;
border-radius: 999px;
background: rgba(124, 92, 255, 0.16);
color: var(--insight-title);
}
.ci-acc-teaser {
font-size: 12px;
color: var(--insight-copy);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ci-acc-body {
display: none;
padding: 0 14px 12px;
color: var(--insight-copy);
font-size: 13px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.ci-acc-item.open .ci-acc-body {
display: block;
max-height: 46vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.ci-acc-prose { white-space: pre-line; }
.ci-acc-copy { font-size: 13px; line-height: 1.5; color: var(--insight-copy); }
.ci-acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ci-acc-footer { display: flex; flex-wrap: wrap; gap: 8px; }
body.light-theme .ci-acc-badge { background: rgba(124, 92, 255, 0.12); }
/* Полноэкранный читатель разборов «Глубже о вас»: заголовок и «назад»
сверху, весь остальной экран - скроллящийся текст до самого конца. */
.insight-reader {
position: fixed;
inset: 0;
z-index: 1400;
display: flex;
flex-direction: column;
background: var(--bg-primary);
color: var(--text-primary);
}
.insight-reader[hidden] { display: none; }
.insight-reader-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
border-bottom: 1px solid var(--border-card);
background: var(--bg-secondary);
}
.insight-reader-back {
flex: 0 0 auto;
min-width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid var(--border-card);
background: var(--bg-elevated);
color: var(--text-primary);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.insight-reader-title {
font-size: 16px;
font-weight: 800;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.insight-reader-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
font-size: 14px;
line-height: 1.6;
color: var(--text-primary);
overflow-wrap: anywhere;
}
/* Окно «Что нового»: модалка всегда светлая, поэтому текст тёмный и
контрастный в обеих темах (урок бага нечитаемых карточек). */
#whatsNewModal .modal-title { color: #1a1a2e; }
.whatsnew-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
color: #333a4d;
font-size: 14px;
line-height: 1.55;
text-align: left;
}
/* feature-080: «Открыться друг другу» — взаимное открытие личных
разборов. Тексты внутри скроллятся локально, экран чата статичен. */
/* polish-67: карточка живёт внутри «Глубже о вас» и по умолчанию
свёрнута в строку-заголовок, чтобы не съедать ленту чата. */
.portrait-exchange-card {
margin-top: 0;
padding: 14px 16px;
border-radius: 16px;
background: rgba(124, 92, 255, 0.10);
border: 1px solid rgba(124, 92, 255, 0.22);
display: grid;
gap: 10px;
}
.portrait-exchange-title { font-size: 15px; font-weight: 700; }
.portrait-exchange-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
border: none;
background: none;
padding: 0;
cursor: pointer;
color: inherit;
text-align: left;
font: inherit;
}
.portrait-exchange-chevron { font-size: 16px; color: var(--card-copy); }
.portrait-exchange-detail { display: grid; gap: 10px; }
.portrait-exchange-detail[hidden] { display: none; }
.portrait-exchange-copy { font-size: 13px; line-height: 1.5; color: var(--card-copy); }
.portrait-exchange-entry { display: grid; gap: 6px; }
.portrait-exchange-entry-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--card-copy);
}
.portrait-exchange-text {
font-size: 13px;
line-height: 1.55;
white-space: pre-line;
overflow-wrap: anywhere;
max-height: 34vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-right: 4px;
}
.portrait-exchange-rating {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 13px;
color: var(--card-copy);
}
.portrait-exchange-rating button { min-height: 0; padding: 6px 12px; font-size: 14px; }
.portrait-exchange-rebuild {
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 201, 143, 0.10);
border: 1px solid rgba(255, 201, 143, 0.28);
display: grid;
gap: 10px;
font-size: 13px;
line-height: 1.5;
}
.portrait-exchange-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.light-theme .portrait-exchange-card {
background: rgba(124, 92, 255, 0.07);
border-color: rgba(124, 92, 255, 0.18);
}
body.light-theme .portrait-exchange-rebuild {
background: rgba(255, 176, 102, 0.12);
border-color: rgba(214, 138, 60, 0.30);
}
/* feature-083: приветственный экран перед регистрацией.
Спокойный «тихий космос», а не продающий лендинг. */
.welcome-shell {
max-width: 460px;
margin: 0 auto;
display: grid;
gap: 16px;
}
.welcome-title { font-size: 22px; font-weight: 800; line-height: 1.25; }
.welcome-hook { font-size: 14px; line-height: 1.5; color: var(--card-copy); }
.welcome-list { display: grid; gap: 10px; }
.welcome-item {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: 10px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 14px;
line-height: 1.5;
}
.welcome-icon { font-size: 18px; line-height: 1.4; }
.welcome-proof {
display: grid;
gap: 8px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 14px;
line-height: 1.5;
}
.welcome-anyone {
text-align: center;
font-size: 13px;
line-height: 1.5;
color: var(--card-copy);
}
.welcome-directions {
text-align: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--card-copy);
}
.welcome-manifesto {
padding: 4px 8px;
text-align: center;
font-size: 13px;
line-height: 1.7;
color: var(--card-copy);
}
.welcome-cta { width: 100%; font-size: 16px; }
.welcome-cta-note {
margin-top: -8px;
text-align: center;
font-size: 12px;
line-height: 1.5;
color: var(--card-copy);
}
/* «Уже есть аккаунт? Войти» — контурная пилюля вместо голой ссылки
(.text-link: прозрачный фон, 14px, цвет #d7ddf2). Заметнее, чтобы гость
с аккаунтом не тыкал в «Создать профиль», но сознательно слабее
золотой .welcome-cta над ней: регистрация остаётся главным действием. */
.welcome-login-link {
justify-self: center;
padding: 12px 24px;
border: 1px solid rgba(232, 213, 163, 0.5);
border-radius: 999px;
background: rgba(232, 213, 163, 0.08);
color: var(--accent-gold);
font-size: 15px;
font-weight: 700;
transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.12s ease-out;
}
.welcome-login-link:hover {
background: rgba(232, 213, 163, 0.16);
border-color: var(--accent-gold);
color: #f4e4c1;
}
.welcome-login-link:active { transform: scale(0.97); }
body.light-theme .welcome-item {
background: rgba(29, 40, 68, 0.04);
border-color: rgba(145, 132, 163, 0.18);
}
body.light-theme .welcome-proof {
background: rgba(29, 40, 68, 0.04);
border-color: rgba(145, 132, 163, 0.18);
}
.chat-insight-actions {
margin-top: 12px;
}
.chat-insight-actions .btn-primary {
margin-top: 0;
}
body.light-theme {
background: linear-gradient(135deg, #f3eee4 0%, #ece8f2 48%, #eef1f6 100%);
color: #1d2844;
}
body.light-theme::before {
opacity: 0.35;
background-image:
linear-gradient(rgba(73,88,181,0.18) 0 0),
linear-gradient(rgba(73,88,181,0.12) 0 0),
linear-gradient(rgba(73,88,181,0.16) 0 0),
linear-gradient(rgba(73,88,181,0.1) 0 0),
linear-gradient(rgba(255, 184, 77, 0.16) 0 0),
linear-gradient(rgba(73,88,181,0.14) 0 0),
linear-gradient(rgba(73,88,181,0.1) 0 0),
linear-gradient(rgba(73,88,181,0.16) 0 0),
linear-gradient(rgba(73,88,181,0.1) 0 0),
linear-gradient(rgba(255, 184, 77, 0.16) 0 0);
}
body.light-theme .subtitle,
body.light-theme .collection-copy,
body.light-theme .helper-text,
body.light-theme .research-note,
body.light-theme .empty-state p,
body.light-theme .screen-header div[style*='color: #a0a0b0'],
body.light-theme .header p[style*='color: #a0a0b0'] {
color: #5c6986 !important;
}
body.light-theme .profile-subtitle,
body.light-theme .profile-section-copy,
body.light-theme .observatory-lead,
body.light-theme .observatory-feature span,
body.light-theme .daily-star-status,
body.light-theme .result-text,
body.light-theme .saved-check-item p,
body.light-theme .preview-note,
body.light-theme .profile-preview-note {
color: #465674;
}
body.light-theme .auth-card,
body.light-theme .panel-card,
body.light-theme .form-card {
background: rgba(244, 239, 230, 0.9);
border-color: rgba(145, 132, 163, 0.14);
box-shadow: 0 18px 44px rgba(72, 76, 108, 0.1);
}
body.light-theme .bottom-nav {
background: rgba(244, 239, 230, 0.94);
border-top-color: rgba(145, 132, 163, 0.16);
}
body.light-theme .auth-tip {
background: transparent;
border-color: transparent;
}
body.light-theme .auth-tip-body {
background: rgba(227, 223, 216, 0.84);
border-color: rgba(145, 132, 163, 0.16);
}
body.light-theme .auth-resend-meta,
body.light-theme .auth-recovery-copy,
body.light-theme .auth-tip-copy {
color: #5c6986;
}
body.light-theme .text-link,
body.light-theme .auth-tip-title {
color: #243455;
}
body.light-theme .account-chip,
body.light-theme .ghost-chip,
body.light-theme .tab-button,
body.light-theme .header-action,
body.light-theme .match-badge {
background: rgba(102, 126, 234, 0.08);
color: #324162;
border-color: rgba(102, 126, 234, 0.12);
}
body.light-theme .text-button,
body.light-theme .screen-title,
body.light-theme .header,
body.light-theme .match-item,
body.light-theme .chat-card,
body.light-theme .result-card,
body.light-theme .modal-content,
body.light-theme .bottom-nav-button {
color: #1d2844;
}
/* Оверрайды двух «Войти» стоят именно здесь: выше body.light-theme .text-button
и body.light-theme .text-link задают цвет с большим весом, и правило рядом с
базовым (в блоке welcome/mode) молча проиграло бы им по порядку. */
body.light-theme .mode-auth-button {
color: var(--text-on-accent);
box-shadow: 0 4px 14px rgba(200, 155, 94, 0.3);
}
/* На светлом фоне бледное золото --accent-gold не читается, поэтому контур и
текст — более тёмный золотисто-коричневый, в тон --border-gold светлой темы. */
body.light-theme .welcome-login-link {
border-color: rgba(200, 155, 94, 0.55);
background: rgba(200, 155, 94, 0.1);
color: #8a6420;
}
body.light-theme .welcome-login-link:hover {
background: rgba(200, 155, 94, 0.18);
border-color: #c89b5e;
color: #6f4f16;
}
body.light-theme .chat-compose input,
body.light-theme .chat-bubble.them,
body.light-theme .saved-check-item {
background: rgba(223, 223, 231, 0.72);
color: #243252;
border-color: rgba(145, 132, 163, 0.12);
}
body.light-theme .chat-bubble.them {
background: rgba(255, 255, 255, 0.96);
color: #212121;
border: 1px solid rgba(107, 95, 133, 0.16);
}
body.light-theme .chat-meta-line {
color: rgba(33, 33, 33, 0.45);
}
body.light-theme .mode-card {
background: var(--mode-card-bg);
border-color: var(--mode-card-border);
color: #1d2844;
}
body.light-theme .mode-card h3,
body.light-theme .mode-card p,
body.light-theme .mode-card .helper-text,
body.light-theme .mode-greeting,
body.light-theme .mode-greeting-copy,
body.light-theme .mode-shell .screen-header .screen-title,
body.light-theme #modeChoiceResearchBanner strong,
body.light-theme #modeChoiceResearchBanner p,
body.light-theme .today-block-title,
body.light-theme .today-block-subtitle,
body.light-theme .today-block-meta {
color: #1d2844;
}
body.light-theme #modeChoiceResearchBanner {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(145, 132, 163, 0.14);
}
body.light-theme .founder-micro-banner {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(145, 132, 163, 0.14);
}
body.light-theme #modeChoiceResearchBanner .btn-secondary {
background: rgba(0, 0, 0, 0.04);
color: #1d2844;
border-color: rgba(0, 0, 0, 0.08);
}
body.light-theme .match-preview,
body.light-theme .chat-meta-line {
color: #51607c;
}
body.light-theme .result-text {
color: #243252;
}
body.light-theme .stars-filter-label {
color: rgba(90, 82, 110, 0.75);
}
body.light-theme .stars-filter-chip {
background: rgba(250, 246, 240, 0.86);
color: #2a2340;
border-color: rgba(107, 95, 133, 0.22);
}
body.light-theme .stars-filter-chip.active {
background: linear-gradient(135deg, #f0c14b, #d9a441);
border-color: transparent;
color: #241a05;
}
body.light-theme .result-intro strong,
body.light-theme .saved-check-item h4 {
color: #243252;
}
body.light-theme .result-intro span,
body.light-theme .saved-check-meta {
color: #5c6986;
}
body.light-theme .form-group label,
body.light-theme .form-group input,
body.light-theme .form-group select,
body.light-theme .form-group textarea {
color: #243252;
}
body.light-theme .form-group input,
body.light-theme .form-group select,
body.light-theme .form-group textarea {
background: rgba(223, 223, 231, 0.78);
}
body.light-theme .form-group input::placeholder,
body.light-theme .form-group textarea::placeholder,
body.light-theme .chat-compose input::placeholder {
color: #7381a0;
}
body.light-theme .btn-secondary {
color: #243252;
background: rgba(227, 223, 216, 0.84);
border-color: rgba(145, 132, 163, 0.16);
}
body.light-theme .artifact-tile,
body.light-theme .artifact-mini {
background: var(--bg-card);
border-color: var(--border-card);
box-shadow: 0 4px 16px rgba(180,160,120,0.12);
}
body.light-theme .match-artifact {
background: rgba(255, 252, 246, 0.96);
border-color: rgba(167, 144, 106, 0.18);
box-shadow: 0 6px 14px rgba(164, 140, 108, 0.14);
}
body.light-theme .icebreaker-button {
background: rgba(0,0,0,0.05);
color: rgba(0,0,0,0.87);
border-color: rgba(33, 33, 33, 0.08);
}
body.light-theme .chat-info {
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(145, 132, 163, 0.14);
color: #243252;
}
body.light-theme .header--swipe .account-chip {
color: #5c6986;
background: transparent;
border-color: transparent;
}
body.light-theme .header--swipe .header-action {
color: #243252;
background: transparent;
border-color: transparent;
}
body.light-theme .chat-insight-card {
background: var(--chat-insight-bg);
border-color: var(--chat-insight-border);
}
body.light-theme .chat-insight-title,
body.light-theme .chat-insight-subtitle,
body.light-theme .chat-insight-body,
body.light-theme .chat-insight-chevron {
color: #1d2844;
}
body.light-theme .artifact-mini {
border-color: rgba(255, 184, 77, 0.26);
}
body.light-theme .artifact-tile.locked {
background: linear-gradient(180deg, rgba(236, 240, 250, 0.95), rgba(224, 231, 244, 0.95));
}
body.light-theme .artifact-modal-card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 245, 255, 0.98));
color: #1d2844;
box-shadow: 0 20px 48px rgba(60, 81, 135, 0.16);
}
body.light-theme .artifact-modal-text,
body.light-theme .artifact-meta {
color: #51607c;
}
body.light-theme .artifact-modal-icon {
background: linear-gradient(180deg, rgba(245, 247, 255, 0.98), rgba(231, 238, 255, 0.98));
border-color: rgba(255, 184, 77, 0.3);
}
body.light-theme .coming-soon-card .profile-section-title {
color: #1d2844;
}
body.light-theme .coming-soon-card .profile-section-copy {
color: #5c6986;
}
body.light-theme .bottom-nav-button.active {
color: #243252;
}
body.light-theme .research-overview-card,
body.light-theme .research-item,
body.light-theme .research-lens-card {
background: rgba(255,255,255,0.88);
border-color: rgba(98, 114, 191, 0.14);
box-shadow: 0 18px 44px rgba(60, 81, 135, 0.12);
}
body.light-theme .research-overview-card::before {
background: radial-gradient(circle at top right, rgba(255, 184, 77, 0.16), transparent 38%);
}
body.light-theme .research-overview-card h3,
body.light-theme .research-overview-stat strong,
body.light-theme .research-item-meta h4,
body.light-theme .research-item-copy,
body.light-theme .research-state-chip,
body.light-theme .research-item-meta p {
color: #243252;
}
body.light-theme .research-overview-stat,
body.light-theme .research-item-icon {
background: rgba(102, 126, 234, 0.08);
border-color: rgba(102, 126, 234, 0.12);
}
body.light-theme .daily-star-status {
color: #5c6986;
}
body.light-theme .research-stat {
background: rgba(102, 126, 234, 0.08);
border-color: rgba(102, 126, 234, 0.14);
}
body.light-theme .research-read-card,
body.light-theme .research-rating-card,
body.light-theme .research-reward-card,
body.light-theme .daily-star-card,
body.light-theme .card-modal-card {
background: rgba(255,255,255,0.96);
color: #1d2844;
}
/* === DATING UX REWORK === */
/* Карточка знакомства почти во весь экран: по бокам 8px, снизу только
полоска нижнего меню. Высота контейнера задана явным calc — цепочка
вложенных flex:1 + процентных высот схлопывалась (карточка
превращалась в полосу), поэтому опираемся на определённую высоту. */
#swipeScreen {
padding: calc(10px + env(safe-area-inset-top)) 8px calc(74px + env(safe-area-inset-bottom));
}
#swipeScreen .swipe-container {
max-width: 560px;
margin: 0 auto;
}
.swipe-container {
height: calc(100dvh - 130px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
padding-top: 0;
padding-bottom: 0;
}
.swipe-prefs-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 2px 8px;
}
.swipe-prefs-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.07);
color: #e9e4f5;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.swipe-prefs-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
min-width: 0;
}
.swipe-prefs-chip {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #d9d4ea;
font-size: 12.5px;
line-height: 1.2;
white-space: nowrap;
}
.swipe-prefs-chip--expanded {
border-color: rgba(255, 184, 77, 0.55);
color: #ffd79a;
}
.swipe-prefs-gear {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.07);
color: #f0ebf8;
font-size: 15px;
cursor: pointer;
}
.swipe-age-note {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 10px;
border-radius: 12px;
background: rgba(255, 184, 77, 0.14);
border: 1px solid rgba(255, 184, 77, 0.4);
color: #ffd79a;
font-size: 12.5px;
line-height: 1.35;
}
.seeking-choice {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.seeking-option {
flex: 1;
min-width: 96px;
padding: 10px 8px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
color: #d9d4ea;
font-size: 13.5px;
cursor: pointer;
}
.seeking-option.active {
background: rgba(124, 92, 255, 0.28);
border-color: rgba(124, 92, 255, 0.75);
color: #ffffff;
}
.search-prefs-overlay {
position: fixed;
inset: 0;
background: rgba(6, 8, 18, 0.6);
backdrop-filter: blur(4px);
display: none;
align-items: flex-end;
justify-content: center;
/* Поверх нижнего таб-бара (.bottom-nav, z-index 1100): иначе лист
«Настройки поиска» прижимается к низу экрана и кнопка «Готово»
оказывается под навигацией - до неё не дотянуться и не нажать. */
z-index: 1200;
}
.search-prefs-overlay.active {
display: flex;
}
.search-prefs-sheet {
width: min(480px, 100%);
max-height: 88dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: linear-gradient(180deg, #171c30, #101527);
border-radius: 24px 24px 0 0;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
color: #f0ebf8;
}
.search-prefs-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 6px;
}
.search-prefs-label {
font-size: 13px;
color: #a0a0b0;
margin: 16px 0 8px;
}
.search-prefs-segment {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.search-prefs-option {
flex: 1;
min-width: 90px;
padding: 10px 8px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.05);
color: #d9d4ea;
font-size: 13.5px;
cursor: pointer;
text-align: center;
}
.search-prefs-option.active {
background: rgba(124, 92, 255, 0.28);
border-color: rgba(124, 92, 255, 0.75);
color: #ffffff;
}
.search-prefs-age-row {
display: flex;
align-items: center;
gap: 10px;
}
.search-prefs-age-row input {
width: 84px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
color: #f0ebf8;
font-size: 15px;
text-align: center;
}
.search-prefs-hint {
font-size: 12px;
color: #8d8aa0;
margin-top: 8px;
line-height: 1.45;
}
.search-prefs-done {
margin-top: 18px;
width: 100%;
}
#cardContainer {
flex: 1;
min-height: 0;
display: flex;
}
#swipeScreen .card {
min-height: 0;
height: 100%;
}
/* polish-74: эффект колоды — следующая анкета выглядывает из-под
текущей (нижняя кромка + затемнение), стек получает глубину.
Задняя карточка не кликабельна и не участвует в анимации выхода. */
#cardContainer { position: relative; padding-bottom: 22px; }
#swipeScreen #currentCard { position: relative; z-index: 1; }
.swipe-card-behind {
position: absolute;
inset: 0;
z-index: 0;
transform: scale(0.97);
filter: brightness(0.72);
border-radius: 28px;
overflow: hidden;
pointer-events: none;
background: linear-gradient(180deg, rgba(12, 17, 34, 0.98), rgba(18, 28, 50, 0.98));
}
.swipe-card-behind img {
width: 100%;
height: 100%;
object-fit: cover;
}
#swipeScreen .swipe-photo-stage {
min-height: min(46vh, 420px);
}
.card {
width: 100%;
min-height: calc(100dvh - 230px);
padding: 0;
overflow: hidden;
border-radius: 28px;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(12, 17, 34, 0.98), rgba(18, 28, 50, 0.98));
color: #f0ebf8;
background-image: none;
position: relative;
}
.swipe-photo-button {
width: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border: none;
background: transparent;
padding: 0;
text-align: left;
cursor: pointer;
transition: transform 0.16s var(--ios-spring);
will-change: transform;
}
.swipe-photo-button:active { transform: scale(0.985); }
.swipe-photo-stage {
position: relative;
flex: 1;
min-height: min(56vh, 480px);
background: var(--bg-primary);
overflow: hidden;
}
.swipe-photo-media,
.match-avatar-image,
.profile-main-photo-image,
.profile-preview-photo-image,
.profile-thumb-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Фото в анкете кадрируем от верха, как у Звёзд (.star-full-media):
рамка 4/5 с object-fit: cover по умолчанию режет кадр по центру и
отрезает макушку. Якорь к верху оставляет лицо в кадре, а лишний низ
уходит. Храним фото целиком (prepareProfilePhoto только уменьшает до
1080px), поэтому правка чисто визуальная и не теряет данные. */
.profile-main-photo-image,
.profile-preview-photo-image,
.profile-thumb-image {
object-position: top center;
}
.swipe-photo-fallback,
.match-avatar-fallback,
.profile-main-photo-fallback,
.profile-preview-photo-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 25% 25%, rgba(232, 213, 163, 0.26), transparent 30%),
linear-gradient(160deg, rgba(46, 40, 78, 0.96), rgba(17, 24, 44, 0.98));
color: #f0ebf8;
}
.swipe-photo-fallback {
font-size: 84px;
}
.swipe-photo-stage .swipe-photo-media,
.swipe-photo-stage .swipe-photo-fallback {
position: absolute;
inset: 0;
}
.match-avatar-fallback {
font-size: 28px;
}
.profile-main-photo-fallback,
.profile-preview-photo-fallback {
font-size: 64px;
}
.swipe-photo-scrim {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 48%;
background: linear-gradient(180deg, rgba(7, 10, 18, 0) 0%, color-mix(in srgb, var(--bg-primary) 26%, transparent) 34%, color-mix(in srgb, var(--bg-primary) 72%, transparent) 72%, var(--bg-primary) 100%);
pointer-events: none;
}
.swipe-top-actions {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
}
.swipe-info-button {
width: 40px;
height: 40px;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(9, 13, 26, 0.48);
backdrop-filter: blur(10px);
color: #f0ebf8;
font-size: 18px;
font-weight: 800;
cursor: pointer;
}
.swipe-primary {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
/* safe-area снизу уже забирает нижнее меню — карточка заканчивается
выше него, поэтому дополнительный инсет здесь не нужен. */
padding: 22px 16px 16px;
display: grid;
gap: 14px;
}
.swipe-name-row {
display: flex;
align-items: center;
gap: 12px;
}
.swipe-name {
font-size: 32px;
line-height: 1.1;
font-weight: 800;
color: #fff9ef;
}
.swipe-meta-line {
margin-top: 6px;
font-size: 15px;
color: rgba(255, 247, 232, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
/* Звёздная анкета в свайпах: золотая рамка и бейдж — это официальная
маркетинговая акция сервиса, а не чужой профиль. */
.card.swipe-star {
box-shadow: 0 0 0 3px rgba(232, 213, 163, 0.75), 0 0 42px rgba(232, 213, 163, 0.3);
}
.card.swipe-star .swipe-photo-media {
/* Портретные арты звёзд кадрируем сверху — голова всегда в кадре. */
object-position: top center;
}
.swipe-star-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
padding: 8px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #ffd68c, #e8d5a3);
color: #241a05;
font-weight: 700;
font-size: 13px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.swipe-star-emoji {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 110px;
background: radial-gradient(circle at 50% 35%, rgba(124, 92, 255, 0.35), rgba(10, 13, 36, 0.9));
}
/* Премиум-тема владельца видна и на карточке в свайпах. */
.card.swipe-themed {
background: var(--profile-theme-surface);
box-shadow: 0 0 0 1px var(--profile-theme-border), 0 18px 44px rgba(0, 0, 0, 0.35);
}
.card.swipe-themed .swipe-primary {
/* Стеклянная панель: полупрозрачный слой темы с блюром поверх
фото, а не непрозрачная заглушка, чтобы не обрезать кадр. */
background: transparent;
isolation: isolate;
}
.card.swipe-themed .swipe-primary::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 24px 24px 0 0;
/* Лёгкое стекло: слабый тонирующий слой с небольшим блюром и
плавным сходом на нет сверху — фото под панелью остаётся
видимым, кадр не «обрезается» глухой подложкой. */
background: linear-gradient(180deg, transparent 0%, var(--profile-theme-modal-surface) 46%);
opacity: 0.4;
backdrop-filter: blur(7px) saturate(1.15);
-webkit-backdrop-filter: blur(7px) saturate(1.15);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
}
.card.swipe-themed .swipe-name { color: var(--profile-theme-text); text-shadow: none; }
.card.swipe-themed .swipe-meta-line { color: var(--profile-theme-muted); text-shadow: none; }
/* Вайб пары на карточках: «у вас с Машей — Искра». */
.swipe-vibe-chip {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(232, 213, 163, 0.16);
border: 1px solid rgba(232, 213, 163, 0.45);
color: #ffd68c;
font-size: 13px;
font-weight: 700;
width: fit-content;
backdrop-filter: blur(8px);
}
.match-vibe-chip {
display: inline-flex;
margin: 2px 0 4px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(232, 213, 163, 0.14);
border: 1px solid rgba(232, 213, 163, 0.4);
color: #e8d5a3;
font-size: 12px;
font-weight: 600;
width: fit-content;
}
/* Блок «Приведи друга» — часть карточки «Сезонные события»: без своей
подложки, цвета наследуются от темы через переменные. */
#referralSection {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
}
/* Хук «Приведи друга» (v219): короткая строка с «плюсом», полные условия —
в модалке #referralTermsModal, чтобы профиль «дышал» и карточка сезонных
событий не раздувалась от простыни условий/прогресса/ссылок. */
.referral-hook {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid var(--border-card, rgba(255, 255, 255, 0.08));
background: var(--bg-card);
}
.referral-hook-text { display: grid; gap: 3px; min-width: 0; }
.referral-hook-text strong {
font-size: 14px;
color: var(--profile-card-text, var(--text-primary));
}
.referral-hook-text small {
font-size: 12px;
line-height: 1.45;
color: var(--profile-card-copy, var(--text-secondary));
}
.referral-hook-plus {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 999px;
border: 1px solid var(--border-card, rgba(255, 255, 255, 0.12));
background: transparent;
color: var(--profile-card-text, var(--text-primary));
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: transform 0.12s ease-out, background 0.2s var(--ios-spring);
}
.referral-hook-plus:active { transform: scale(0.92); }
.referral-copy {
color: var(--profile-card-copy, var(--text-secondary));
font-size: 14px;
line-height: 1.45;
margin-bottom: 12px;
}
.referral-link-row { margin-bottom: 12px; }
.referral-link {
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
font-size: 13px;
word-break: break-all;
margin-bottom: 8px;
}
.referral-actions { display: flex; gap: 8px; }
#referralSection .referral-actions .btn-secondary {
padding: 8px 14px;
font-size: 13px;
}
.referral-note {
padding: 10px 12px;
border-radius: 12px;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
color: var(--profile-card-copy, var(--text-secondary));
font-size: 13px;
line-height: 1.4;
margin-bottom: 8px;
}
.referral-hint {
margin-top: 6px;
font-size: 12px;
line-height: 1.35;
color: var(--text-disabled);
}
.referral-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.referral-row {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-radius: 12px;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
font-size: 13px;
}
.referral-row-name { font-weight: 700; color: var(--text-primary); }
.referral-row-status { color: #e8b45a; white-space: nowrap; }
body.light-theme .referral-row-status { color: #9a6a1c; }
.referral-banner {
position: relative;
padding: 12px 34px 12px 14px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(255, 170, 205, 0.24) 0%, rgba(255, 214, 140, 0.16) 100%);
border: 1px solid rgba(255, 190, 215, 0.55);
margin-bottom: 10px;
}
.referral-banner-title { color: var(--text-primary); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.referral-banner-text { color: var(--profile-card-copy, var(--text-secondary)); font-size: 13px; line-height: 1.45; }
.referral-banner-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
border: none;
background: var(--bg-input);
color: var(--text-primary);
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.referral-steps { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.referral-step {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--profile-card-copy, var(--text-secondary));
}
.referral-step.done { color: #7fdcae; }
body.light-theme .referral-step.done { color: #1f8a5b; }
.referral-step-mark { width: 18px; text-align: center; }
.referral-fineprint {
color: var(--text-disabled);
font-size: 11px;
line-height: 1.4;
margin-top: 10px;
}
.swipe-sign-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 6px;
margin-top: 10px;
}
.swipe-sign-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(10, 14, 28, 0.68);
border: 1px solid rgba(255,255,255,0.14);
color: #fff7e3;
font-size: 12px;
font-weight: 700;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.swipe-sign-badge .pixel-badge-icon,
.swipe-sign-badge .ui-badge-icon {
width: 12px;
height: 12px;
}
button.swipe-sign-badge {
font-family: inherit;
appearance: none;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease;
}
button.swipe-sign-badge:active {
transform: scale(0.96);
}
.swipe-sign-badge .sign-badge-word {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.3px;
opacity: 0.85;
}
.swipe-artifact-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.swipe-artifact-chip {
width: 42px;
height: 42px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
background: rgba(10, 15, 28, 0.74);
border: 1px solid rgba(232, 213, 163, 0.34);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
.swipe-artifact-chip .artifact-icon {
width: 26px;
height: 26px;
}
.swipe-compatibility-panel {
position: absolute;
left: 16px;
right: 16px;
top: 16px;
z-index: 4;
display: none;
padding: 16px;
border-radius: 22px;
background: rgba(8, 13, 26, 0.84);
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(16px);
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
}
.swipe-compatibility-panel.active {
display: block;
}
.swipe-compatibility-title {
font-size: 13px;
line-height: 1.45;
color: rgba(240, 235, 248, 0.72);
margin-bottom: 10px;
}
.swipe-compatibility-panel .preview-item {
color: #f0ebf8;
border-bottom-color: rgba(255,255,255,0.08);
}
.swipe-card-body {
padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
display: grid;
gap: 12px;
}
.swipe-action-panel {
display: grid;
gap: 12px;
}
.swipe-action-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.swipe-card-hint {
font-size: 13px;
line-height: 1.45;
color: rgba(255, 249, 239, 0.84);
text-align: left;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
display: none;
}
.swipe-buttons {
margin-top: 0;
background: transparent;
padding: 0;
}
.btn {
min-height: 52px;
}
.swipe-buttons .btn-dislike,
.swipe-buttons .btn-like {
border: 1px solid var(--swipe-action-border);
box-shadow: none;
min-height: 56px;
backdrop-filter: blur(12px);
}
.swipe-buttons .btn-dislike {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.9);
}
.swipe-buttons .btn-like {
background: var(--accent-gold);
color: var(--text-on-accent);
border-color: rgba(232, 213, 163, 0.42);
}
.swipe-buttons .btn-dislike:hover,
.swipe-buttons .btn-like:hover {
box-shadow: none;
}
.match-list {
gap: 8px;
}
.match-item {
min-height: 0;
padding: 10px 12px;
grid-template-columns: 44px minmax(0, 1fr) auto;
grid-template-rows: none;
gap: 10px;
border-radius: 18px;
align-items: center;
}
.match-avatar-wrap {
position: relative;
width: 40px;
height: 40px;
align-self: center;
}
.match-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
font-size: 22px;
}
/* Мессенджер-стандарт: имя и время — верхняя строка, превью и статус —
нижняя; всё в одной колонке между аватаркой и артефактами. */
.match-main {
min-width: 0;
display: grid;
gap: 3px;
align-self: center;
}
.match-topline {
min-width: 0;
display: flex;
align-items: center;
gap: 6px;
}
.match-topline .match-time {
margin-left: auto;
}
.match-subline {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.match-title-row {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
/* min-height: 0 снимает глобальное button { min-height: 44px },
font: inherit — чтобы имя наследовало шрифт карточки, а не
дефолтный шрифт кнопки браузера. */
.match-open-profile {
border: none;
background: transparent;
padding: 0;
min-height: 0;
font: inherit;
color: inherit;
cursor: pointer;
touch-action: manipulation;
}
.match-open-profile--avatar {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
}
.match-open-profile--name {
display: inline-flex;
max-width: 100%;
min-width: 0;
flex: 0 1 auto;
overflow: hidden;
text-align: left;
}
.match-name {
margin-bottom: 0;
font-size: 15px;
line-height: 1.2;
font-weight: 700;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.match-preview {
flex: 0 1 auto;
min-width: 0;
align-self: center;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text-secondary);
}
.match-artifact-row {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-height: 28px;
line-height: 0;
}
/* Артефакты собеседника — компактная горизонталь справа: один
значок крупной плиткой, несколько — в ряд помельче. */
.match-artifact-stack {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
align-self: center;
}
.match-artifact {
width: 26px;
height: 26px;
min-height: 0;
border-radius: 8px;
padding: 0;
border: 1px solid rgba(232, 213, 163, 0.24);
background: linear-gradient(180deg, rgba(21, 29, 52, 0.94), rgba(12, 18, 36, 0.98));
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
color: inherit;
cursor: pointer;
touch-action: manipulation;
}
.match-artifact .artifact-icon {
width: 15px;
height: 15px;
border-radius: 0;
}
/* Один артефакт — крупная плитка почти в размер аватарки. */
.match-artifact--solo {
width: 36px;
height: 36px;
border-radius: 12px;
}
.match-artifact--solo .artifact-icon {
width: 22px;
height: 22px;
}
/* Три артефакта — компактнее, чтобы строка оставалась узкой. */
.match-artifact--compact {
width: 22px;
height: 22px;
border-radius: 7px;
}
.match-artifact--compact .artifact-icon {
width: 13px;
height: 13px;
}
.match-time {
flex: 0 0 auto;
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
}
.match-message-state {
flex: 0 0 auto;
min-width: 18px;
min-height: 18px;
font-weight: 800;
color: #d6cae7;
display: inline-flex;
align-items: center;
justify-content: center;
}
.match-message-state .ui-icon {
width: 14px;
height: 14px;
}
.match-unread-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: #ff6b8a;
color: #fff9ef;
font-size: 10px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 3px rgba(14, 18, 34, 0.92);
}
.match-message-state.new {
width: 8px;
min-width: 8px;
height: 8px;
border-radius: 999px;
background: #ff8fa3;
box-shadow: 0 0 0 3px rgba(255, 143, 163, 0.12);
color: transparent;
font-size: 0;
}
.match-message-state.read {
color: #6ba8a0;
}
.match-message-state.sent {
color: #d7c5ff;
}
.match-message-state.match {
color: #f2d89c;
}
.profile-photo-stage {
position: relative;
overflow: hidden;
border-radius: 28px;
aspect-ratio: 4 / 5;
max-height: min(52vh, 500px);
background: linear-gradient(160deg, rgba(36, 33, 69, 0.96), rgba(15, 17, 34, 0.98));
margin-bottom: 14px;
}
.profile-main-photo {
width: 100%;
height: 100%;
border: none;
background: transparent;
padding: 0;
cursor: pointer;
}
.profile-photo-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 18px;
background: linear-gradient(180deg, rgba(8, 12, 24, 0) 0%, rgba(8, 12, 24, 0.82) 100%);
pointer-events: none;
}
.profile-photo-overlay-label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(10, 14, 28, 0.48);
color: #fff6ea;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(255,255,255,0.12);
}
.profile-photo-actions {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 8px;
z-index: 2;
}
.profile-photo-chip {
border: 1px solid rgba(255,255,255,0.14);
background: rgba(8, 13, 26, 0.46);
color: #fff9ef;
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
backdrop-filter: blur(10px);
}
.profile-photo-strip {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
margin-bottom: 16px;
}
.profile-thumb,
.profile-thumb-add {
position: relative;
width: 74px;
height: 96px;
border-radius: 18px;
overflow: hidden;
flex: 0 0 auto;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.05);
cursor: pointer;
}
.profile-thumb.active {
border-color: rgba(232, 213, 163, 0.46);
box-shadow: 0 0 0 3px rgba(232, 213, 163, 0.12);
}
.profile-thumb-add {
display: inline-flex;
align-items: center;
justify-content: center;
border-style: dashed;
color: #d7c5ff;
font-size: 14px;
font-weight: 700;
}
.profile-thumb-remove {
position: absolute;
top: 6px;
right: 6px;
width: 22px;
height: 22px;
border: none;
border-radius: 999px;
background: rgba(8, 13, 26, 0.62);
color: #fff9ef;
font-size: 13px;
cursor: pointer;
}
.profile-photo-input {
display: none;
}
.profile-top {
grid-template-columns: 1fr;
gap: 10px;
align-items: start;
}
.profile-identity {
min-width: 0;
}
.profile-subtitle {
color: var(--profile-theme-muted, rgba(29, 40, 68, 0.78));
}
.profile-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 14px;
}
.profile-meta-item {
padding: 12px 14px;
border-radius: 16px;
background: var(--profile-theme-chip-bg, rgba(102, 126, 234, 0.08));
border: 1px solid var(--profile-theme-chip-border, rgba(102, 126, 234, 0.08));
color: var(--profile-theme-chip-text, #324162);
font-size: 13px;
line-height: 1.45;
}
.profile-meta-item strong {
display: block;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 4px;
color: var(--profile-theme-label, #6c7894);
}
.profile-meta-item--wide {
grid-column: 1 / -1;
}
/* Асцендент в анкете (v219): глиф знака по центру заполняет пустое место ячейки. */
.profile-meta-item--asc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 2px;
}
.profile-meta-item--asc strong { margin-bottom: 2px; }
.profile-meta-glyph {
font-size: 26px;
line-height: 1.1;
color: var(--profile-theme-label, #6c7894);
opacity: 0.92;
}
.profile-meta-sign { font-size: 13px; }
.profile-preview-bio {
margin-top: 14px;
padding: 12px 14px;
border-radius: 16px;
/* Та же полупрозрачная подложка, что у «Темп общения» / «Что важно»:
хардкод-плита rgba(220,224,238,0.72) бросалась в глаза на любых темах */
background: var(--profile-theme-chip-bg, rgba(255,255,255,0.05));
border: 1px solid var(--profile-theme-chip-border, rgba(255,255,255,0.08));
font-size: 13px;
line-height: 1.55;
color: var(--profile-theme-chip-text, rgba(240, 235, 248, 0.86));
}
.profile-preview-bio strong {
display: block;
margin-bottom: 4px;
color: var(--profile-theme-label, rgba(240, 235, 248, 0.56));
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.artifact-icon {
width: 44px;
height: 44px;
}
.artifact-tile {
width: 100%;
aspect-ratio: 1;
height: auto;
min-height: 68px;
}
.artifact-tile.unlocked {
box-shadow: 0 0 0 1px rgba(232, 213, 163, 0.24), var(--shadow-glow-gold);
}
.artifact-mini {
box-shadow: 0 10px 22px rgba(20, 24, 44, 0.22);
}
.artifact-mini .artifact-icon {
width: 20px;
height: 20px;
}
.profile-preview-card {
position: relative;
width: min(460px, 100%);
max-height: 92vh;
overflow: auto;
padding: 18px;
border-radius: 28px;
background: var(--profile-theme-modal-surface, linear-gradient(180deg, rgba(12, 17, 34, 0.98), rgba(17, 26, 47, 0.98)));
color: var(--profile-theme-text, #f0ebf8);
border: 1px solid var(--profile-theme-border, transparent);
box-shadow: 0 24px 64px rgba(0,0,0,0.34);
animation: modal-rise 0.35s var(--ios-spring);
}
.artifact-modal-card,
.daily-star-card,
.card-modal-card {
animation: modal-rise 0.35s var(--ios-spring);
}
@keyframes surface-pop {
0% {
opacity: 0;
transform: translateY(16px) scale(0.98);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes modal-rise {
0% {
opacity: 0;
transform: translateY(32px) scale(0.96);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes overlay-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.profile-preview-media {
position: relative;
overflow: hidden;
border-radius: 24px;
aspect-ratio: 4 / 5;
margin-bottom: 16px;
background: linear-gradient(160deg, rgba(36, 33, 69, 0.96), rgba(15, 17, 34, 0.98));
}
.profile-preview-head {
display: grid;
gap: 8px;
margin-bottom: 12px;
}
.profile-preview-title {
font-size: 26px;
font-weight: 800;
color: var(--profile-theme-text, #fff9ef);
}
.profile-preview-subtitle {
font-size: 14px;
line-height: 1.5;
color: var(--profile-theme-muted, rgba(240, 235, 248, 0.76));
}
.profile-preview-sign-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.profile-preview-thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
margin-bottom: 16px;
padding-bottom: 4px;
}
.profile-preview-thumb {
width: 68px;
height: 88px;
border-radius: 16px;
overflow: hidden;
flex: 0 0 auto;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.06);
cursor: pointer;
}
.profile-preview-thumb.active {
border-color: rgba(232, 213, 163, 0.42);
box-shadow: 0 0 0 2px rgba(232, 213, 163, 0.16);
}
.profile-preview-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.profile-preview-meta-item {
padding: 12px 14px;
border-radius: 16px;
background: var(--profile-theme-chip-bg, rgba(255,255,255,0.05));
border: 1px solid var(--profile-theme-chip-border, rgba(255,255,255,0.08));
font-size: 13px;
line-height: 1.45;
color: var(--profile-theme-chip-text, rgba(240, 235, 248, 0.86));
}
.profile-preview-meta-item strong {
display: block;
margin-bottom: 4px;
color: var(--profile-theme-label, rgba(240, 235, 248, 0.56));
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.profile-preview-close {
position: fixed;
top: 16px;
right: 16px;
z-index: 1001;
width: 40px;
height: 40px;
border: none;
border-radius: 999px;
background: rgba(0,0,0,0.6);
color: #ffffff;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}
.profile-preview-close .ui-icon {
width: 18px;
height: 18px;
}
.screen-header-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
.profile-preview-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.profile-preview-tag {
padding: 8px 12px;
border-radius: 999px;
background: var(--profile-theme-chip-bg, rgba(255,255,255,0.06));
border: 1px solid var(--profile-theme-chip-border, rgba(255,255,255,0.08));
color: var(--profile-theme-chip-text, rgba(240, 235, 248, 0.84));
font-size: 13px;
}
.profile-preview-note {
font-size: 14px;
line-height: 1.55;
color: var(--profile-theme-muted, rgba(240, 235, 248, 0.72));
margin-bottom: 16px;
}
.profile-preview-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.profile-preview-actions .btn-secondary {
flex: 1 1 160px;
}
.profile-preview-actions--subtle {
gap: 8px;
margin: 0 0 18px;
}
.profile-preview-subtle-action {
flex: 0 0 auto;
padding: 7px 12px;
border-radius: 999px;
background: transparent;
border: 1px solid var(--profile-theme-chip-border, rgba(255, 255, 255, 0.12));
color: var(--profile-theme-muted, rgba(240, 235, 248, 0.6));
font-size: 12px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: opacity 0.18s ease;
}
.profile-preview-subtle-action:active {
opacity: 0.7;
}
.profile-moderation-card {
display: grid;
gap: 14px;
}
.profile-moderation-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.profile-moderation-title {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.profile-moderation-copy {
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
margin-top: 4px;
}
.profile-moderation-badge {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255,255,255,0.06);
color: var(--text-primary);
}
.profile-moderation-badge.review {
background: rgba(255, 215, 130, 0.12);
border-color: rgba(255, 215, 130, 0.26);
color: #f5dfaa;
}
.profile-moderation-badge.frozen {
background: rgba(255, 107, 107, 0.12);
border-color: rgba(255, 107, 107, 0.28);
color: #ffb4b4;
}
.profile-moderation-status-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
font-size: 14px;
line-height: 1.45;
color: var(--text-primary);
}
.profile-moderation-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.report-modal-card {
width: min(420px, 100%);
border-radius: 24px;
padding: 24px;
background: var(--bg-card);
border: 1px solid var(--border-card);
box-shadow: 0 24px 64px rgba(0,0,0,0.34);
color: var(--text-primary);
animation: modal-rise 0.35s var(--ios-spring);
}
.report-category-grid {
display: grid;
gap: 10px;
margin: 18px 0 16px;
}
.report-category-button {
width: 100%;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
padding: 14px 16px;
background: rgba(255,255,255,0.04);
color: var(--text-primary);
text-align: left;
cursor: pointer;
transition: transform 0.12s ease-out, border-color 0.2s ease, background 0.2s ease;
}
.report-category-button:active {
transform: scale(0.985);
}
.report-category-button strong {
display: block;
margin-bottom: 4px;
font-size: 15px;
}
.report-category-button span {
display: block;
font-size: 13px;
line-height: 1.45;
color: var(--text-secondary);
}
/* Модалка выбора формата шаринга лежит на кремовой подложке
.modal-content в обеих темах; переменные тёмной темы делают текст
кнопок светлым и он сливается с подложкой. */
#shareFormatModal .report-category-button {
background: rgba(36, 50, 82, 0.05);
border-color: rgba(117, 94, 58, 0.16);
color: #1a1a2e;
}
#shareFormatModal .report-category-button span {
color: rgba(33, 33, 51, 0.6);
}
.report-modal-note {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
margin-bottom: 16px;
}
body:not(.light-theme) .subtitle,
body:not(.light-theme) .collection-copy,
body:not(.light-theme) .helper-text,
body:not(.light-theme) .research-note,
body:not(.light-theme) .empty-state p,
body:not(.light-theme) .screen-header div[style*='color: #a0a0b0'],
body:not(.light-theme) .header p[style*='color: #a0a0b0'],
body:not(.light-theme) .match-preview {
color: rgba(240, 235, 248, 0.82) !important;
}
body.light-theme .swipe-info-button,
body.light-theme .profile-photo-chip {
background: rgba(250, 246, 240, 0.86);
color: #2a2340;
border-color: rgba(107, 95, 133, 0.14);
}
body.light-theme .swipe-prefs-chip {
background: rgba(250, 246, 240, 0.86);
color: #2a2340;
border-color: rgba(107, 95, 133, 0.22);
}
body.light-theme .swipe-prefs-chip--expanded {
border-color: rgba(176, 116, 24, 0.55);
color: #8a5a10;
}
body.light-theme .swipe-prefs-gear {
background: rgba(250, 246, 240, 0.86);
color: #2a2340;
border-color: rgba(107, 95, 133, 0.22);
}
body.light-theme .swipe-prefs-toggle {
background: rgba(250, 246, 240, 0.9);
color: #2a2340;
border-color: rgba(107, 95, 133, 0.25);
}
body.light-theme .swipe-meta-line,
body.light-theme .swipe-card-hint {
color: rgba(255, 249, 239, 0.9);
}
body.light-theme .match-item {
background: transparent;
}
body.light-theme .match-item + .match-item {
border-top-color: rgba(107, 95, 133, 0.16);
}
body.light-theme .profile-moderation-meta,
body.light-theme .report-category-button {
background: rgba(255, 250, 244, 0.82);
border-color: rgba(107, 95, 133, 0.12);
}
body.light-theme .profile-moderation-badge {
background: rgba(255, 250, 244, 0.92);
border-color: rgba(107, 95, 133, 0.12);
color: #2f3550;
}
body.light-theme .profile-preview-card {
background: var(--profile-theme-modal-surface, linear-gradient(180deg, rgba(250, 246, 240, 0.98), rgba(240, 236, 245, 0.98)));
color: var(--profile-theme-text, #2a2340);
}
body.light-theme .match-name,
body.light-theme .match-preview,
body.light-theme .match-time {
background: transparent;
}
/* polish-58: управление скрытыми анкетами в профиле. */
.hidden-profiles-note {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 10px;
}
.hidden-profiles-list {
display: grid;
gap: 8px;
}
.hidden-profile-row {
display: flex;
align-items: center;
gap: 10px;
}
.hidden-profile-row img,
.hidden-profile-row .hidden-profile-avatar-fallback {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.hidden-profile-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-card);
border: 1px solid var(--border-card);
font-weight: 700;
}
.hidden-profile-name {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hidden-profile-restore {
min-height: 0;
padding: 8px 14px;
font-size: 12px;
}
/* polish-55: доводка светлой темы после редизайнов чатов и свайпов —
контраст кнопок, артефактов, статусов и своих пузырей. */
body.light-theme .swipe-buttons .btn-dislike {
background: rgba(29, 40, 68, 0.08);
color: #243252;
border-color: rgba(145, 132, 163, 0.22);
}
body.light-theme .match-artifact .artifact-icon {
color: #96702d;
filter: none;
}
body.light-theme .match-message-state {
color: #6b5a8c;
}
body.light-theme .chat-bubble.me {
color: #ffffff;
}
body.light-theme .chat-bubble.me .chat-meta-line {
color: rgba(255, 255, 255, 0.75);
}
body.light-theme .chat-compose input::placeholder {
color: #5f6d8c;
}
body.light-theme .profile-preview-title,
body.light-theme .profile-preview-subtitle,
body.light-theme .profile-preview-meta-item,
body.light-theme .profile-preview-note,
body.light-theme .profile-preview-tag {
color: var(--profile-theme-text, #2f3550);
}
body.light-theme .profile-preview-sign-row .swipe-sign-badge {
background: rgba(255, 252, 246, 0.94);
border-color: rgba(107, 95, 133, 0.14);
color: #2f3550;
box-shadow: 0 6px 16px rgba(110, 96, 125, 0.08);
}
body.light-theme .profile-preview-meta-item,
body.light-theme .profile-preview-tag {
background: var(--profile-theme-chip-bg, rgba(102, 126, 234, 0.08));
border-color: var(--profile-theme-chip-border, rgba(107, 95, 133, 0.12));
}
body.light-theme .profile-preview-close {
background: rgba(250, 246, 240, 0.94);
color: #2a2340;
}
@media (max-width: 400px) {
.screen {
padding: 16px;
}
.auth-shell,
.onboarding,
.mode-shell,
.matches-shell,
.chat-shell,
.swipe-container {
max-width: 100%;
}
.screen-title {
font-size: 22px;
}
.result-text,
.chat-info,
.saved-check-item p {
font-size: 16px;
line-height: 1.65;
}
.header-top,
.header-tabs,
.chat-compose,
.auth-actions {
flex-wrap: wrap;
}
.header-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.bottom-nav {
padding-left: 12px;
padding-right: 12px;
}
.score-scale {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fate-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.swipe-name {
font-size: 28px;
}
.screen-header-actions {
width: 100%;
justify-content: flex-end;
}
.profile-meta,
.profile-preview-meta {
grid-template-columns: 1fr;
}
}
/* === Анимированная заставка натальной карты (долгие генерации) ===
Универсальный оверлей для всех мест ожидания: внешнее кольцо знаков
крутится по часовой, внутреннее кольцо домов/планет - против,
звёзды мерцают. Закрытие не отменяет генерацию (она доживает на
сервере), поэтому рядом подпись-гарантия. */
#astroLoadingOverlay {
position: fixed;
inset: 0;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(10, 8, 20, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
#astroLoadingOverlay.open { display: flex; }
.astro-loading-card {
position: relative;
width: min(560px, 92vw);
max-height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 26px 22px 22px;
border-radius: 24px;
border: 1px solid rgba(255, 210, 122, 0.28);
background: radial-gradient(120% 120% at 50% 0%, rgba(64, 42, 110, 0.92), rgba(16, 12, 30, 0.96));
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
text-align: center;
overflow: hidden;
}
.astro-loading-close {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 20px;
line-height: 1;
cursor: pointer;
z-index: 2;
}
.astro-loading-close:active { transform: scale(0.94); }
.astro-chart { width: min(340px, 62vw); height: auto; display: block; }
.astro-ring-cw,
.astro-ring-ccw,
.astro-ring-slow,
.astro-core {
transform-origin: 50% 50%;
transform-box: view-box;
}
.astro-ring-cw { animation: astro-spin-cw 26s linear infinite; }
.astro-ring-ccw { animation: astro-spin-ccw 40s linear infinite; }
.astro-ring-slow { animation: astro-spin-cw 70s linear infinite; }
.astro-core { animation: astro-core-pulse 3.2s ease-in-out infinite; }
.astro-star { animation: astro-twinkle 2.6s ease-in-out infinite; }
.astro-star:nth-of-type(2) { animation-delay: 0.35s; }
.astro-star:nth-of-type(3) { animation-delay: 0.7s; }
.astro-star:nth-of-type(4) { animation-delay: 1.05s; }
.astro-star:nth-of-type(5) { animation-delay: 1.4s; }
.astro-star:nth-of-type(6) { animation-delay: 1.75s; }
.astro-star:nth-of-type(7) { animation-delay: 2.1s; }
.astro-loading-title { font-size: 17px; font-weight: 700; color: #f4ecff; }
.astro-loading-note { font-size: 13px; line-height: 1.5; color: rgba(244, 236, 255, 0.66); }
/* UX ожидания: через 30с заставка «доживает» — натальная карта плавно
дополняется кометами и искрами (класс .astro-enhanced на оверлее), чтобы
ожидание ~1 минуты не выглядело мёртвым экраном. Кометы летят на фоне
(z-index 0) за картой, текст и карта читаются поверх (z-index 1).
В prefers-reduced-motion полёт гасится (см. блок ниже). */
.astro-chart, .astro-loading-title, .astro-loading-note { position: relative; z-index: 1; }
.astro-comets {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 1.4s ease;
overflow: hidden;
}
.astro-enhanced .astro-comets { opacity: 1; }
.astro-comet {
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff6df;
box-shadow: 0 0 10px 2px rgba(255, 233, 184, 0.85);
opacity: 0;
}
.astro-comet::after {
content: '';
position: absolute;
top: 50%;
right: 3px;
width: 90px;
height: 1.6px;
transform: translateY(-50%);
border-radius: 2px;
background: linear-gradient(90deg, rgba(255, 233, 184, 0), rgba(255, 241, 214, 0.9));
}
.astro-sparkle {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #ffe9b8;
box-shadow: 0 0 7px 1.5px rgba(255, 233, 184, 0.8);
opacity: 0;
}
.astro-sparkle-a { top: 16%; left: 18%; }
.astro-sparkle-b { top: 26%; left: 76%; }
.astro-sparkle-c { top: 64%; left: 14%; }
.astro-sparkle-d { top: 72%; left: 82%; }
/* Модалка разбора вайба со звездой (v175). Поверхность карточки -
непрозрачная модальная поверхность (--interface-modal-surface):
var(--bg-elevated) в тёмной теме почти прозрачный (0.06), и страница
просвечивала сквозь карточку поверх оверлея. Поверхность тематическая
(тёмная/светлая), поэтому текст разбора читается в обеих темах.
Заставка внутри - всегда тёмная космическая панель. */
.star-vibe-modal-card {
position: relative;
width: min(460px, calc(100vw - 32px));
max-height: min(92dvh, 820px);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
background: var(--interface-modal-surface);
border: 1px solid var(--border-card);
border-radius: 24px;
padding: 26px 22px 22px;
color: var(--card-title);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* Крестик .modal-close рассчитан на светлый фон; на тематической
карточке в тёмной теме берём те же var, что и у текста разбора. */
.star-vibe-modal-card .modal-close {
background: var(--glass-surface);
color: var(--card-title);
}
.star-vibe-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 34px 18px;
border-radius: 18px;
border: 1px solid rgba(255, 210, 122, 0.28);
background: radial-gradient(120% 120% at 50% 0%, rgba(64, 42, 110, 0.92), rgba(16, 12, 30, 0.96));
text-align: center;
}
.star-vibe-loading .astro-chart { width: min(220px, 50vw); }
.star-vibe-loading-title { font-size: 16px; font-weight: 700; color: #f4ecff; }
.star-vibe-loading-note { font-size: 12.5px; line-height: 1.5; color: rgba(244, 236, 255, 0.66); }
@keyframes astro-spin-cw { to { transform: rotate(360deg); } }
@keyframes astro-spin-ccw { to { transform: rotate(-360deg); } }
@keyframes astro-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes astro-core-pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes astro-comet-fly {
0% { transform: translate3d(-60px, 24px, 0) rotate(16deg); opacity: 0; }
10% { opacity: 1; }
72% { opacity: 1; }
100% { transform: translate3d(430px, 210px, 0) rotate(16deg); opacity: 0; }
}
@keyframes astro-sparkle-in {
0%, 100% { opacity: 0; transform: scale(0.6); }
50% { opacity: 1; transform: scale(1.15); }
}
/* Кометы/искры оживают только на «дожившей» заставке (.astro-enhanced). */
.astro-enhanced .astro-comet-a { animation: astro-comet-fly 4.8s ease-in 0.2s infinite; }
.astro-enhanced .astro-comet-b { animation: astro-comet-fly 6.4s ease-in 2.2s infinite; top: 14%; }
.astro-enhanced .astro-comet-c { animation: astro-comet-fly 5.6s ease-in 3.8s infinite; top: 6%; }
.astro-enhanced .astro-sparkle-a { animation: astro-sparkle-in 3.4s ease-in-out 0s infinite; }
.astro-enhanced .astro-sparkle-b { animation: astro-sparkle-in 3.4s ease-in-out 0.7s infinite; }
.astro-enhanced .astro-sparkle-c { animation: astro-sparkle-in 3.4s ease-in-out 1.4s infinite; }
.astro-enhanced .astro-sparkle-d { animation: astro-sparkle-in 3.4s ease-in-out 2.1s infinite; }
@media (prefers-reduced-motion: reduce) {
.astro-ring-cw,
.astro-ring-ccw,
.astro-ring-slow,
.astro-star,
.astro-core { animation: none; }
/* Reduced-motion: кометы не летят, искры не мигают — показываем их
статично (мягкое свечение без движения), заставка остаётся спокойной. */
.astro-comet { animation: none !important; opacity: 0 !important; }
.astro-sparkle { animation: none !important; }
.astro-enhanced .astro-sparkle { opacity: 0.7; }
}