/* ============================================================
   Oneiro — стилевая система
   Концепция: ночь, тишина, серьёзная рефлексия. Не технологично, не "магически".
   Тёмный фон + кремовый текст + акцент тёплого медного.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

:root {
    /* Палитра: глубокая ночь */
    --bg-deep:       #0e0e12;
    --bg-soft:       #16161c;
    --bg-card:       #1c1c24;
    --bg-elevated:   #232330;

    --ink:           #ece6db;       /* основной текст — слегка кремовый */
    --ink-muted:     #9994a0;
    --ink-subtle:    #6b6772;

    --accent:        #c98a5a;       /* медно-тёплый */
    --accent-soft:   #d9a684;
    --accent-glow:   rgba(201, 138, 90, 0.18);

    --rule:          rgba(236, 230, 219, 0.08);
    --rule-strong:   rgba(236, 230, 219, 0.18);

    --danger:        #c46060;

    /* Типографика */
    --serif:  'Fraunces', 'Times New Roman', Georgia, serif;
    --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Расстояния */
    --container: 720px;
    --container-wide: 980px;
    --radius: 14px;
    --radius-sm: 8px;

    /* Анимации */
    --ease: cubic-bezier(.2, .7, .25, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Атмосферный фон с очень мягкой "звёздной" текстурой */
body {
    background-image:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(201, 138, 90, 0.08), transparent 70%),
        radial-gradient(ellipse 80% 50% at 80% 110%, rgba(120, 80, 160, 0.05), transparent 60%);
    min-height: 100vh;
}

/* Едва заметное "зерно" — добавляет аналоговое ощущение */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 1;
    mix-blend-mode: overlay;
}

main, header, footer {
    position: relative;
    z-index: 2;
}

a { color: var(--accent-soft); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--bg-deep); }

/* ============================================================
   Заголовки и типографика
   ============================================================ */

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.15;
    margin: 0 0 0.6em;
    color: var(--ink);
}

h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    font-weight: 400;
    font-variation-settings: 'opsz' 144;
    letter-spacing: -0.025em;
}

h1 em {
    font-style: italic;
    color: var(--accent-soft);
    font-weight: 400;
}

h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.serif { font-family: var(--serif); }
.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); font-size: 0.92em; }

/* ============================================================
   Шапка
   ============================================================ */

.site-header {
    padding: 28px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-wide);
    margin: 0 auto;
}

.logo {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--accent-soft), var(--accent) 60%, #6a4422);
    box-shadow: 0 0 18px var(--accent-glow);
    flex-shrink: 0;
}

.nav {
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 0.93rem;
}

.nav a {
    color: var(--ink-muted);
}
.nav a:hover { color: var(--ink); }

/* Кнопка "Регистрация" в шапке — заметная, как CTA */
.nav-register {
    background: rgba(201, 138, 90, 0.12);
    border: 1px solid rgba(201, 138, 90, 0.4);
    color: var(--accent) !important;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    transition: all .15s;
}
.nav-register:hover {
    background: rgba(201, 138, 90, 0.2);
    border-color: var(--accent);
    color: var(--accent) !important;
}
@media (max-width: 540px) {
    .nav-register { padding: 5px 11px; font-size: 0.82rem; }
}
.lang-switch {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 4px;
    background: var(--bg-card);
    border-radius: 999px;
    border: 1px solid var(--rule);
}

.lang-switch a {
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--ink-subtle);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lang-switch a.active {
    background: var(--ink);
    color: var(--bg-deep);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
    max-width: var(--container);
    margin: 60px auto 0;
    padding: 0 24px;
    text-align: center;
}

.hero .tagline {
    color: var(--accent-soft);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 28px;
    font-weight: 500;
}

.hero h1 {
    margin-bottom: 24px;
}

.hero .subtitle {
    font-size: 1.12rem;
    color: var(--ink-muted);
    max-width: 540px;
    margin: 0 auto 48px;
    line-height: 1.55;
}

/* Декоративная деталь — луна-полумесяц */
.moon {
    width: 80px;
    height: 80px;
    margin: 0 auto 36px;
    position: relative;
}

.moon::before, .moon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.moon::before {
    background: radial-gradient(circle at 30% 30%, #f5e7d3, #c98a5a 65%, #5a3a22);
    box-shadow: 0 0 60px var(--accent-glow), 0 0 120px var(--accent-glow);
}
.moon::after {
    background: var(--bg-deep);
    transform: translate(22%, -8%) scale(0.95);
}

/* ============================================================
   Форма ввода
   ============================================================ */

.form-card {
    max-width: var(--container);
    margin: 40px auto;
    padding: 40px 36px;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5);
}

.form-card h2 {
    margin-bottom: 8px;
}

.form-card .form-hint {
    color: var(--ink-muted);
    font-size: 0.95rem;
    margin-bottom: 28px;
}

.field { margin-bottom: 22px; }

/* Чипы для выбора эмоций (можно выбирать несколько) */
.mood-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mood-chip {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-muted);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.92rem;
    cursor: pointer;
    transition: all .15s var(--ease);
    user-select: none;
}
.mood-chip:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
}
.mood-chip.selected {
    background: rgba(201, 138, 90, 0.18);
    border-color: var(--accent);
    color: var(--accent);
}
@media (max-width: 540px) {
    .mood-chip { font-size: 0.88rem; padding: 7px 13px; }
}

.field label {
    display: block;
    font-size: 0.86rem;
    color: var(--ink-muted);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.field textarea, .field input[type="text"], .field input[type="email"], .field input[type="password"], .field select {
    width: 100%;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    padding: 14px 16px;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color .2s, background .2s;
}

.field textarea {
    min-height: 200px;
    font-size: 1.05rem;
    line-height: 1.6;
}

.field textarea:focus, .field input:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 4px var(--accent-glow);
}

.field textarea::placeholder, .field input::placeholder {
    color: var(--ink-subtle);
}

/* Чекбокс "Запомнить меня" в логин-форме */
.field-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--ink-muted);
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
}
.field-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}
.field-remember span {
    line-height: 1.4;
}

/* ============================================================
   Hero для анонимов: 3 шага "как это работает" под подзаголовком
   ============================================================ */
.hero-steps {
    max-width: 660px;
    margin: 36px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.hero-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.55;
}
.hero-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: rgba(201, 138, 90, 0.12);
    border: 1px solid rgba(201, 138, 90, 0.4);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
}
@media (max-width: 600px) {
    .hero-steps { margin-top: 28px; gap: 12px; }
    .hero-step { font-size: 0.94rem; }
}

/* ============================================================
   Компактный hero для зарегистрированного юзера
   "С возвращением. Что снилось?" + ссылка на дневник
   ============================================================ */
.hero-compact {
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 30px 24px;
    text-align: center;
}
.hero-compact .moon { display: none; }
.hero-greeting {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.7rem;
    color: var(--ink-muted);
    line-height: 1.3;
    margin-bottom: 18px;
}
.hero-greeting em {
    font-style: italic;
    color: var(--ink);
}
.hero-journal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-soft);
    font-size: 1rem;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(201, 138, 90, 0.08);
    border: 1px solid rgba(201, 138, 90, 0.25);
    transition: all .15s;
}
.hero-journal-link:hover {
    background: rgba(201, 138, 90, 0.15);
    color: var(--accent);
}
.hero-journal-link .muted {
    color: var(--ink-subtle);
    font-size: 0.92rem;
}
.hero-journal-link .hero-arrow {
    transition: transform .15s;
}
.hero-journal-link:hover .hero-arrow {
    transform: translateX(2px);
}
.hero-cross-hint {
    display: block;
    margin-top: 12px;
    color: var(--accent-soft);
    font-size: 0.88rem;
    text-decoration: none;
    font-style: italic;
}
.hero-cross-hint:hover {
    color: var(--accent);
    text-decoration: underline;
}
@media (max-width: 600px) {
    .hero-compact { margin-top: 30px; padding: 20px 16px; }
    .hero-greeting { font-size: 1.4rem; margin-bottom: 14px; }
    .hero-journal-link { font-size: 0.94rem; }
}

/* ============================================================
   Демо мета-разбора для анонимов
   Показывает что юзер получит после 3+ снов
   ============================================================ */
.cross-demo {
    max-width: 720px;
    margin: 80px auto 60px;
    padding: 0 24px;
    text-align: center;
}
.cross-demo-eyebrow {
    color: var(--ink-subtle);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
}
.cross-demo-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(201, 138, 90, 0.06) 0%,
        rgba(201, 138, 90, 0.02) 100%);
    border: 1px solid rgba(201, 138, 90, 0.25);
    border-radius: var(--radius);
    padding: 32px 32px 26px;
    text-align: left;
    box-shadow: 0 12px 40px -20px rgba(201, 138, 90, 0.4);
}
.cross-demo-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 18px;
    font-family: var(--serif);
    font-style: italic;
    flex-wrap: wrap;
}
.cross-demo-period {
    color: var(--accent);
    font-size: 1.1rem;
}
.cross-demo-meta {
    color: var(--ink-subtle);
    font-size: 0.9rem;
}
.cross-demo-summary {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}
.cross-demo-body p {
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 14px;
}
.cross-demo-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.cross-demo-badge {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 0.75rem;
    color: var(--ink-subtle);
    font-style: italic;
    background: rgba(15, 14, 13, 0.6);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--rule);
}
.cross-demo-hint {
    margin-top: 24px;
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    font-style: italic;
}
@media (max-width: 600px) {
    .cross-demo { margin: 60px auto 50px; }
    .cross-demo-card { padding: 24px 20px 22px; }
    .cross-demo-summary { font-size: 1.05rem; }
    .cross-demo-body p { font-size: 0.94rem; }
    .cross-demo-badge { position: static; display: inline-block; margin-bottom: 12px; }
    .cross-demo-header { flex-direction: column; gap: 4px; }
}

.char-counter {
    text-align: right;
    font-size: 0.8rem;
    color: var(--ink-subtle);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}
.char-counter.warn { color: var(--accent-soft); }
.char-counter.error { color: var(--danger); }

/* Voice button */
.voice-btn {
    margin-top: 10px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-muted);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .2s;
    font-family: var(--sans);
}

.voice-btn:hover { color: var(--ink); border-color: var(--ink-muted); }

.voice-btn.recording {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(196, 96, 96, 0.08);
}

.voice-btn .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}

.voice-btn.recording .dot {
    animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

/* Раскрывашка контекста */
.context-toggle {
    background: none;
    border: 1px dashed var(--rule-strong);
    color: var(--ink-muted);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--sans);
    font-size: 0.93rem;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.context-toggle:hover {
    color: var(--ink);
    border-color: var(--accent);
}
.context-toggle .chev { transition: transform .25s var(--ease); }
.context-toggle.open .chev { transform: rotate(180deg); }

.context-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s var(--ease);
}
.context-body.open { max-height: 600px; }
.context-body .inner { padding-top: 20px; }

/* Mood select pretty */
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239994a0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Submit button */
.btn {
    background: var(--accent);
    color: var(--bg-deep);
    border: none;
    padding: 16px 36px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform .15s var(--ease), background .2s, box-shadow .25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 30px -10px var(--accent-glow);
}

.btn:hover:not(:disabled) {
    background: var(--accent-soft);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -10px var(--accent-glow);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-block { width: 100%; }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--rule-strong);
    box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--bg-elevated);
    border-color: var(--ink-muted);
}

/* ============================================================
   Примеры на главной
   ============================================================ */

.examples {
    max-width: var(--container-wide);
    margin: 80px auto 60px;
    padding: 0 24px;
}

.about {
    max-width: 680px;
    margin: 100px auto 80px;
    padding: 0 24px;
}
.about-block {
    margin-bottom: 64px;
    padding-bottom: 56px;
    border-bottom: 1px solid var(--rule);
}
.about-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.about-block h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 22px;
    letter-spacing: -0.005em;
}
.about-block p {
    color: var(--ink-muted);
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 16px;
}
.about-block p:last-child {
    margin-bottom: 0;
}
.about-block a {
    color: var(--accent-soft);
    border-bottom: 1px solid rgba(201, 138, 90, 0.3);
    transition: border-color .15s;
}
.about-block a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Шаги — пронумерованный список с акцентом */
.about-steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.about-steps li {
    counter-increment: step;
    position: relative;
    padding-left: 44px;
    margin-bottom: 14px;
    color: var(--ink-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}
.about-steps li:last-child {
    margin-bottom: 0;
}
.about-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: rgba(201, 138, 90, 0.12);
    border: 1px solid rgba(201, 138, 90, 0.4);
    color: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Тонкий комментарий-сноска к блоку */
.about-note {
    color: var(--ink-subtle) !important;
    font-size: 0.92rem !important;
    font-style: italic;
    border-left: 2px solid var(--rule-strong);
    padding-left: 16px;
    margin-top: 22px;
}

@media (max-width: 600px) {
    .about { margin: 70px auto 60px; }
    .about-block { margin-bottom: 48px; padding-bottom: 40px; }
    .about-block h2 { font-size: 1.45rem; margin-bottom: 18px; }
    .about-block p { font-size: 0.97rem; }
    .about-steps li { padding-left: 38px; font-size: 0.97rem; }
    .about-steps li::before { width: 26px; height: 26px; font-size: 0.88rem; }
}

.examples-title {
    text-align: center;
    color: var(--ink-muted);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 32px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.example-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: all .25s var(--ease);
    text-align: left;
    font-family: var(--sans);
    color: var(--ink);
}

.example-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px -20px var(--accent-glow);
}

.example-card h4 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--accent-soft);
    margin: 0 0 12px;
}

.example-card p {
    color: var(--ink-muted);
    font-size: 0.93rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Результат разбора
   ============================================================ */

.result {
    max-width: var(--container);
    margin: 60px auto;
    padding: 0 24px;
}

.result-section {
    margin-bottom: 48px;
    animation: fadeUp .6s var(--ease) both;
}

.result-section:nth-child(2) { animation-delay: 0.1s; }
.result-section:nth-child(3) { animation-delay: 0.2s; }
.result-section:nth-child(4) { animation-delay: 0.3s; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.result-eyebrow {
    color: var(--accent-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: 12px;
}

.result-summary {
    font-family: var(--serif);
    font-size: 1.7rem;
    line-height: 1.4;
    font-weight: 400;
    color: var(--ink);
    border-left: 2px solid var(--accent);
    padding-left: 24px;
    font-style: italic;
}

.result-analysis {
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ink);
}

.result-analysis p {
    margin-bottom: 1.2em;
}

.life-link {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px 28px;
    border: 1px solid var(--rule);
    color: var(--ink);
    font-style: italic;
    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.6;
}

.questions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.questions-list li {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    padding: 18px 0 18px 36px;
    position: relative;
    border-bottom: 1px solid var(--rule);
}

.questions-list li:last-child { border-bottom: none; }

.questions-list li::before {
    content: '?';
    position: absolute;
    left: 0;
    top: 18px;
    color: var(--accent);
    font-size: 1.4rem;
    font-style: italic;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    background: var(--bg-elevated);
    color: var(--ink-muted);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    border: 1px solid var(--rule);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--rule);
}

/* Safety-плашки — кризисная информация и anti-pattern */
.safety-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 22px;
    border-radius: var(--radius);
    margin-bottom: 28px;
    line-height: 1.55;
}
.safety-banner-icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.safety-banner-body { flex: 1; }
.safety-banner-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.safety-banner-text {
    color: var(--ink-muted);
    font-size: 0.92rem;
    margin-bottom: 10px;
}
.safety-banner-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.safety-banner-link {
    color: var(--accent-soft);
    font-size: 0.92rem;
    text-decoration: none;
    font-weight: 500;
}
.safety-banner-link:hover { color: var(--accent); text-decoration: underline; }

/* Кризисная — спокойная, но заметная (тёплый янтарь, не алармистский красный) */
.safety-crisis {
    background: rgba(201, 138, 90, 0.08);
    border: 1px solid rgba(201, 138, 90, 0.35);
    color: var(--accent-soft);
}
.safety-crisis .safety-banner-icon { color: var(--accent); }

/* Anti-pattern — мягче, без яркого акцента */
.safety-soft {
    background: var(--bg-card);
    border: 1px dashed var(--rule-strong);
}

@media (max-width: 540px) {
    .safety-banner { padding: 14px 16px; }
}

/* Onboarding-плашка над формой при первом заходе */
.onboarding-card {
    position: relative;
    padding: 22px 56px 22px 26px;
    margin-bottom: 24px;
    background: rgba(201, 138, 90, 0.06);
    border: 1px solid rgba(201, 138, 90, 0.25);
    border-radius: var(--radius);
    animation: onboarding-fade-in .5s var(--ease) both;
}
@keyframes onboarding-fade-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
    color: var(--ink-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}
.onboarding-step:last-child { margin-bottom: 0; }
.onboarding-num {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--bg-deep);
    border-radius: 50%;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 0.92rem;
}
.onboarding-close {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: none;
    color: var(--ink-subtle);
    font-size: 1.6rem;
    line-height: 1;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.onboarding-close:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
}

/* Виджет реакций — like/dislike после разбора */
.reactions-widget {
    margin: 32px 0 24px;
    padding: 22px 26px;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-align: center;
}
.reactions-prompt {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.08rem;
    color: var(--ink);
    margin-bottom: 14px;
}
.reactions-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-muted);
    padding: 9px 18px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 0.92rem;
    cursor: pointer;
    transition: all .2s var(--ease);
}
.reaction-btn:hover {
    color: var(--ink);
    border-color: var(--ink-muted);
    transform: translateY(-1px);
}
.reaction-btn.selected[data-reaction="helpful"] {
    background: rgba(120, 200, 140, 0.12);
    border-color: rgba(120, 200, 140, 0.5);
    color: #92d6a4;
}
.reaction-btn.selected[data-reaction="not_helpful"] {
    background: rgba(196, 96, 96, 0.12);
    border-color: rgba(196, 96, 96, 0.5);
    color: #d09898;
}
.reaction-icon { display: inline-flex; align-items: center; }
.reaction-count {
    font-size: 0.82rem;
    color: var(--ink-subtle);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}
.reaction-count[hidden] { display: none; }
.reactions-comment {
    margin-top: 14px;
    text-align: left;
}
.reactions-comment textarea {
    width: 100%;
    min-height: 70px;
    background: var(--bg-soft);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    padding: 10px 12px;
    font-family: var(--sans);
    font-size: 0.92rem;
    resize: vertical;
}
.reactions-comment textarea:focus { outline: none; border-color: var(--accent); }
.reactions-comment-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.reactions-comment-actions .btn { padding: 8px 16px; font-size: 0.88rem; }
.reactions-thanks {
    color: #92d6a4;
    font-size: 0.94rem;
    font-style: italic;
    padding: 4px 0;
}

/* Share dropdown — варианты "поделиться" */
.share-dropdown {
    position: relative;
    display: inline-block;
}
#share-btn .share-caret {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.75em;
    opacity: 0.7;
}
.share-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    padding: 6px;
    z-index: 100;
    animation: share-fade-in .15s var(--ease) both;
}
@keyframes share-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.share-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-family: var(--sans);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all .12s;
    text-decoration: none;
}
.share-item:hover {
    background: rgba(201, 138, 90, 0.1);
    color: var(--ink);
}
.share-icon {
    flex-shrink: 0;
    color: var(--accent-soft);
    display: inline-flex;
}

.feedback-nudge {
    margin-top: 32px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-sm);
    color: var(--ink-muted);
    font-size: 0.92rem;
    text-align: center;
    line-height: 1.55;
}
.feedback-nudge a {
    color: var(--accent-soft);
    margin-left: 8px;
    font-weight: 500;
    white-space: nowrap;
}
.feedback-nudge a:hover { color: var(--accent); }

.disclaimer {
    margin-top: 48px;
    padding: 16px 20px;
    border-left: 2px solid var(--rule-strong);
    color: var(--ink-subtle);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* Стрим — показатель, что идёт генерация */
.streaming-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 8px;
    animation: pulse 1.4s ease-in-out infinite;
}

.thinking {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-muted);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
}

.thinking .moon {
    width: 50px;
    height: 50px;
    margin-bottom: 24px;
    animation: gentleSpin 8s linear infinite;
}

@keyframes gentleSpin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

/* ============================================================
   Toast
   ============================================================ */

.toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-elevated);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 0.9rem;
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
    opacity: 0;
    transition: all .3s var(--ease);
    z-index: 1000;
    pointer-events: none;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Журнал
   ============================================================ */

.journal {
    max-width: var(--container-wide);
    margin: 40px auto;
    padding: 0 24px;
}

/* ====== Кросс-разбор за период ====== */

/* Публичная страница просмотра мета-разбора */
.cross-view-page {
    max-width: 720px;
    margin: 40px auto 60px;
    padding: 0 24px;
}
.cross-view-eyebrow {
    color: var(--ink-subtle);
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 16px;
}
.cross-view-summary {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.85rem;
    line-height: 1.35;
    color: var(--ink);
    margin-bottom: 30px;
    letter-spacing: -0.005em;
}
.cross-view-body p {
    color: var(--ink-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    margin-bottom: 16px;
}
.cross-view-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.cross-view-recommendations p {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
.cross-view-meta {
    margin-top: 30px;
    color: var(--ink-subtle);
    font-size: 0.86rem;
}
.cross-view-disclaimer {
    margin-top: 40px;
    padding: 14px 18px;
    background: var(--bg-card);
    border-left: 2px solid var(--rule-strong);
    color: var(--ink-subtle);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.55;
}

@media (max-width: 600px) {
    .cross-view-summary { font-size: 1.5rem; }
    .cross-view-body p { font-size: 0.96rem; }
}

.cross-section {
    max-width: 720px;
    margin: 0 auto 50px;
    padding: 28px 32px;
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}
.cross-header h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--ink);
    margin-bottom: 10px;
}
.cross-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cross-actions .btn {
    flex: 1;
    min-width: 140px;
}
.cross-actions .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cross-count {
    opacity: 0.7;
    font-size: 0.88rem;
    margin-left: 4px;
}
.cross-hint {
    color: var(--ink-subtle);
    font-size: 0.82rem;
    margin: 0;
}
.cross-loading {
    text-align: center;
    padding: 30px 20px;
    color: var(--ink-muted);
    font-style: italic;
    background: var(--bg-deep);
    border-radius: var(--radius-sm);
    margin-top: 18px;
}
.cross-error {
    padding: 16px;
    color: var(--danger);
    background: rgba(196, 96, 96, 0.08);
    border: 1px solid rgba(196, 96, 96, 0.3);
    border-radius: var(--radius-sm);
    margin-top: 18px;
    font-size: 0.94rem;
}
.cross-result-card {
    margin-top: 24px;
    padding: 24px;
    background: var(--bg-deep);
    border: 1px solid rgba(201, 138, 90, 0.25);
    border-radius: var(--radius-sm);
}
.cross-result-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 14px;
    font-family: var(--serif);
    font-style: italic;
    color: var(--accent);
}
.cross-summary {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.5;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rule);
}
.cross-analysis p {
    color: var(--ink-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}
.cross-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}
.cross-recommendations {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    color: var(--ink-muted);
    font-size: 0.94rem;
    line-height: 1.6;
}
.cross-recommendations em {
    color: var(--accent-soft);
    font-style: italic;
    margin-right: 4px;
}

/* Блок share-кнопок — для свежего разбора и для исторических */
.cross-share-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
    justify-content: flex-start;
}
.cross-share-row .btn {
    flex: 0 1 auto;
    font-size: 0.88rem;
    padding: 10px 20px;
}
.cross-share-row .share-dropdown {
    /* Чтобы dropdown-меню позиционировался корректно */
    position: relative;
}

/* Мобильная адаптация: кнопка на всю ширину, чтобы пальцем удобно попадать */
@media (max-width: 540px) {
    .cross-share-row {
        margin-top: 24px;
        padding-top: 20px;
    }
    .cross-share-row .share-dropdown {
        width: 100%;
    }
    .cross-share-row .cross-share-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 0.92rem;
    }
    /* Dropdown-меню тоже на всю ширину */
    .cross-share-row .share-menu {
        left: 0;
        right: 0;
        min-width: 0;
    }
}
.cross-history {
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
}
.cross-item {
    margin-bottom: 8px;
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}
.cross-item summary {
    cursor: pointer;
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--ink-muted);
    font-size: 0.92rem;
    user-select: none;
}
.cross-item summary::-webkit-details-marker { display: none; }
.cross-item summary::before {
    content: "▸";
    color: var(--accent-soft);
    transition: transform .15s;
    display: inline-block;
}
.cross-item[open] summary::before {
    transform: rotate(90deg);
}
.cross-item-period {
    color: var(--accent-soft);
    font-style: italic;
}
.cross-item-date,
.cross-item-dreams {
    color: var(--ink-subtle);
    font-size: 0.85rem;
}
.cross-item-body {
    padding-top: 14px;
    padding-bottom: 6px;
    margin-top: 10px;
    border-top: 1px solid var(--rule);
}
.cross-item-body .cross-summary {
    font-size: 1rem;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.cross-item-body p {
    color: var(--ink-muted);
    font-size: 0.94rem;
    line-height: 1.65;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .cross-section { padding: 20px 18px; }
    .cross-header h2 { font-size: 1.3rem; }
    .cross-actions .btn { min-width: 0; }
}

.journal-list {
    display: grid;
    gap: 14px;
}

.journal-item {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 22px 26px;
    transition: all .2s;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.journal-item:hover {
    border-color: var(--rule-strong);
    transform: translateX(2px);
}

.journal-item h3 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    margin: 0 0 6px;
    color: var(--ink);
}

.journal-item .meta {
    color: var(--ink-subtle);
    font-size: 0.82rem;
    margin-bottom: 10px;
}

.journal-item .summary-preview {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.journal-item .actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.icon-btn {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink-muted);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-muted); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); }

.empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--ink-muted);
}
.empty-state .moon { margin-bottom: 24px; }
.empty-state h2 {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink);
}

/* ============================================================
   Auth страницы
   ============================================================ */

.auth-page {
    max-width: 440px;
    margin: 80px auto 40px;
    padding: 0 24px;
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 40px 36px;
}

.auth-card h1 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.auth-card .why {
    color: var(--ink-muted);
    font-size: 0.92rem;
    margin-bottom: 28px;
    line-height: 1.55;
}

.auth-switch {
    text-align: center;
    margin-top: 24px;
    color: var(--ink-muted);
    font-size: 0.92rem;
}

.error-message {
    background: rgba(196, 96, 96, 0.1);
    border: 1px solid rgba(196, 96, 96, 0.3);
    color: var(--danger);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    margin-bottom: 16px;
    display: none;
}
.error-message.show { display: block; }

/* ============================================================
   Подвал
   ============================================================ */

.site-footer {
    border-top: 1px solid var(--rule);
    padding: 40px 24px;
    margin-top: 80px;
    text-align: center;
    color: var(--ink-subtle);
    font-size: 0.85rem;
}
.site-footer .links { margin-bottom: 12px; display: flex; gap: 24px; justify-content: center; }
.site-footer a { color: var(--ink-muted); }

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {
    .site-header {
        padding: 18px 14px;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }
    .logo {
        font-size: 1.2rem;
        gap: 8px;
        flex-shrink: 0;
    }
    .logo-mark {
        width: 18px;
        height: 18px;
    }
    .nav {
        gap: 10px;
        font-size: 0.82rem;
        margin-left: auto;
        align-items: center;
    }
    /* Капсула регистрации компактнее на мобильном */
    .nav-register {
        padding: 6px 12px !important;
        font-size: 0.82rem;
    }
    .lang-switch a { font-size: 0.78rem; padding: 4px 8px; }

    .form-card {
        padding: 28px 22px;
        border-radius: 12px;
    }
    .hero { margin-top: 30px; }
    .hero .subtitle { font-size: 1rem; }
    .result-summary { font-size: 1.35rem; padding-left: 18px; }
    .result-analysis { font-size: 1rem; }
    .result-actions { flex-direction: column; }
    .result-actions .btn { width: 100%; }
    .journal-item { flex-direction: column; }
    .journal-item .actions { align-self: flex-end; }
}

/* На очень узких экранах (<400px) — переносим nav на новую строку,
   чтобы кнопка регистрации не сжималась. Логотип занимает первую строку. */
@media (max-width: 400px) {
    .site-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* Скрытие для скринридеров */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Плашка "У вас есть несохранённый сон" — предложение восстановить черновик */
.draft-banner {
    margin-bottom: 24px;
    padding: 18px 22px;
    background: rgba(201, 138, 90, 0.08);
    border: 1px solid rgba(201, 138, 90, 0.3);
    border-radius: var(--radius);
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    animation: draft-banner-in .3s var(--ease) both;
}
@keyframes draft-banner-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.draft-banner-content {
    flex: 1;
    min-width: 220px;
}
.draft-banner-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 4px;
}
.draft-banner-body {
    color: var(--ink-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.draft-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.draft-banner-actions .btn {
    padding: 8px 16px;
    font-size: 0.88rem;
}
@media (max-width: 540px) {
    .draft-banner {
        padding: 16px 18px;
        gap: 12px;
    }
    .draft-banner-actions {
        width: 100%;
    }
    .draft-banner-actions .btn {
        flex: 1;
    }
}

/* Register-nudge — приглашение к регистрации после первого разбора */
.register-nudge {
    margin: 36px 0 24px;
    padding: 22px 26px;
    background: linear-gradient(135deg,
        rgba(201, 138, 90, 0.10) 0%,
        rgba(201, 138, 90, 0.04) 100%);
    border: 1px solid rgba(201, 138, 90, 0.3);
    border-radius: var(--radius);
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.register-nudge-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(201, 138, 90, 0.15);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.register-nudge-body {
    flex: 1;
    min-width: 0;
}
.register-nudge-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.register-nudge-text {
    color: var(--ink-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.register-nudge-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.register-nudge-actions .btn {
    padding: 8px 18px;
    font-size: 0.9rem;
    box-shadow: none;
}
/* Сдержанный hover в контексте плашки — без свечения и подъёма */
.register-nudge-actions .btn:hover:not(:disabled) {
    background: var(--accent);
    transform: none;
    box-shadow: 0 4px 14px -6px var(--accent-glow);
    filter: brightness(1.05);
}
.register-nudge-actions .btn.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.04);
    filter: none;
}

@media (max-width: 540px) {
    .register-nudge {
        flex-direction: column;
        gap: 12px;
        padding: 18px 20px;
    }
    .register-nudge-icon { width: 36px; height: 36px; }
}

/* ======================================================================
   PWA install hint — мягкая плашка "добавить на главный экран"
   Появляется снизу с анимацией, только на мобильных, при условиях
   ====================================================================== */
.pwa-hint {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius);
    padding: 16px 18px 16px 56px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
    display: flex;
    gap: 14px;
    align-items: flex-start;

    transform: translateY(120%);
    opacity: 0;
    transition: transform .35s var(--ease), opacity .25s;

    max-width: 480px;
    margin: 0 auto;
}
.pwa-hint.show {
    transform: translateY(0);
    opacity: 1;
}
.pwa-hint-icon {
    position: absolute;
    left: 18px;
    top: 18px;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-hint-content {
    flex: 1;
    min-width: 0;
}
.pwa-hint-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 4px;
    padding-right: 24px;
}
.pwa-hint-body {
    color: var(--ink-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    margin-bottom: 12px;
}
.pwa-hint-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pwa-hint-actions .btn {
    padding: 6px 14px;
    font-size: 0.85rem;
}
.pwa-hint-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--ink-subtle);
    font-size: 1.5rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pwa-hint-close:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.05);
}

/* Если запущено как PWA — спрячем плашку гарантированно */
@media (display-mode: standalone) {
    .pwa-hint { display: none !important; }
}

/* ======================================================================
   БЛОГ
   ====================================================================== */

/* --- Список статей --- */
.blog-list-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 40px 24px 80px;
}
.blog-list-header {
    margin-bottom: 44px;
    text-align: center;
}
.blog-list-header h1 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 2.2rem;
    color: var(--ink);
    margin-bottom: 16px;
}
.blog-list-intro {
    color: var(--ink-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.blog-card {
    display: block;
    padding: 26px 28px;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg-card);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.blog-card:hover {
    border-color: rgba(201, 138, 90, 0.4);
    transform: translateY(-2px);
}
.blog-card-meta {
    font-size: 0.84rem;
    color: var(--ink-subtle);
    margin-bottom: 10px;
}
.blog-card-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--ink);
    margin-bottom: 10px;
    line-height: 1.3;
}
.blog-card-desc {
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.blog-card-more {
    color: var(--accent-soft);
    font-size: 0.92rem;
    font-weight: 500;
}
.blog-card:hover .blog-card-more {
    color: var(--accent);
}
.blog-empty {
    text-align: center;
    color: var(--ink-subtle);
    padding: 60px 0;
    font-style: italic;
}

/* CTA в конце списка и статьи */
.blog-cta {
    margin-top: 50px;
    padding: 32px;
    text-align: center;
    background: linear-gradient(135deg, rgba(201,138,90,0.08), rgba(201,138,90,0.02));
    border: 1px solid rgba(201, 138, 90, 0.25);
    border-radius: var(--radius);
}
.blog-cta p {
    color: var(--ink-muted);
    font-size: 1.05rem;
    margin-bottom: 18px;
}

/* --- Страница статьи --- */
.blog-post-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 30px 24px 80px;
}
.blog-post-breadcrumb {
    display: flex;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--ink-subtle);
    margin-bottom: 24px;
}
.blog-post-breadcrumb a { color: var(--accent-soft); }
.blog-post-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}
.blog-post-meta {
    display: flex;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--ink-subtle);
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rule);
}

/* Тело статьи — типографика для чтения */
.blog-post-body {
    color: var(--ink-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}
.blog-post-body p {
    margin-bottom: 20px;
}
.blog-post-body h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--ink);
    margin: 40px 0 18px;
    line-height: 1.3;
}
.blog-post-body strong {
    color: var(--ink);
    font-weight: 600;
}
.blog-post-body em {
    font-style: italic;
    color: var(--ink);
}
.blog-post-body a {
    color: var(--accent-soft);
    border-bottom: 1px solid rgba(201, 138, 90, 0.3);
}
.blog-post-body a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.blog-post-cta {
    margin-top: 48px;
    padding: 30px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid rgba(201, 138, 90, 0.25);
    border-radius: var(--radius);
}
.blog-post-cta-text {
    color: var(--ink-muted);
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Похожие статьи */
.blog-related {
    max-width: 680px;
    margin: 50px auto 0;
    padding: 0 24px;
}
.blog-related h2 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--ink-muted);
    margin-bottom: 18px;
}
.blog-related-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.blog-related-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    text-decoration: none;
    transition: border-color .15s;
}
.blog-related-card:hover {
    border-color: rgba(201, 138, 90, 0.4);
}
.blog-related-title {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink);
    font-size: 1.05rem;
}
.blog-related-desc {
    color: var(--ink-subtle);
    font-size: 0.88rem;
    line-height: 1.45;
}

@media (max-width: 600px) {
    .blog-list-header h1 { font-size: 1.7rem; }
    .blog-card { padding: 20px 22px; }
    .blog-card-title { font-size: 1.25rem; }
    .blog-post-title { font-size: 1.6rem; }
    .blog-post-body { font-size: 1.02rem; }
    .blog-post-body h2 { font-size: 1.3rem; }
}

/* ======================================================================
   Прогресс к мета-разбору — ведёт юзера к "моменту ценности"
   ====================================================================== */
.progress-block {
    margin: 28px 0 24px;
    padding: 22px 26px;
    background: rgba(201, 138, 90, 0.06);
    border: 1px solid rgba(201, 138, 90, 0.22);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.progress-block.unlocked {
    background: linear-gradient(135deg, rgba(201,138,90,0.14), rgba(201,138,90,0.04));
    border-color: rgba(201, 138, 90, 0.45);
}
.progress-dots {
    display: flex;
    gap: 10px;
}
.progress-dot {
    width: 36px;
    height: 6px;
    border-radius: 999px;
    background: var(--rule, #2E2925);
    transition: background .3s var(--ease);
}
.progress-dot.filled {
    background: var(--accent);
}
.progress-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 6px;
}
.progress-text {
    color: var(--ink-muted);
    font-size: 0.96rem;
    line-height: 1.55;
}
.progress-cta {
    display: inline-flex;
    margin-top: 14px;
    padding: 9px 20px;
    font-size: 0.92rem;
}
@media (max-width: 540px) {
    .progress-block { padding: 18px 20px; }
    .progress-dot { width: 28px; }
}

/* Прогресс-блок в журнале (для тех, кто ещё не достиг порога мета-разбора) */
.journal-progress {
    margin: 24px 0;
    padding: 26px 28px;
    background: rgba(201, 138, 90, 0.06);
    border: 1px solid rgba(201, 138, 90, 0.22);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.journal-progress-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: 8px;
}
.journal-progress-text {
    color: var(--ink-muted);
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 560px;
}
.journal-progress-cta {
    align-self: flex-start;
    margin-top: 8px;
    padding: 10px 22px;
    font-size: 0.92rem;
}
@media (max-width: 540px) {
    .journal-progress { padding: 20px; }
    .journal-progress-cta { align-self: stretch; text-align: center; }
}