/* MetaCards Collage — самостоятельный UI без runtime Tailwind. */

/* Минимальный reset и утилиты, которые раньше приходили из Tailwind CDN. */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; line-height: inherit; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
img, svg { display: block; max-width: 100%; }
.hidden, [hidden] { display: none !important; }
.fixed { position: fixed; }
.inset-0 { inset: 0; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.flex { display: flex; }
.grid { display: grid; }
.min-h-screen { min-height: 100vh; min-height: 100dvh; }
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-sm { max-width: 24rem; }
.flex-1 { flex: 1 1 0%; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.p-4 { padding: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pt-6 { padding-top: 1.5rem; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-xs { font-size: .75rem; line-height: 1rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-gray-400 { color: var(--mc-text-muted); }
.text-gray-500, .text-gray-700 { color: var(--mc-text-secondary); }
.text-gray-800 { color: var(--mc-text); }
.text-red-600 { color: #c43535; }

:root {
    /* «Свидание с собой» — мёд и лаванда. Свет светлячка = инсайт. */
    --mc-bg: #faf5ec;            /* тёплый крем */
    --mc-card: #fffdf9;          /* молоко */
    --mc-primary: #c98a24;       /* тёмный мёд (текст-акценты, иконки) */
    --mc-primary-dark: #a2672d;
    --mc-honey: #e9a83b;         /* свет светлячка */
    --mc-honey-soft: #f2bc57;
    --mc-lavender: #8d7ba8;      /* пыльная лаванда — «внутреннее» */
    --mc-clay: #c47b52;          /* глина-терракота */
    --mc-sage: #9eb496;          /* шалфей */
    --mc-text: #3a3238;          /* какао */
    --mc-text-secondary: #6f6672;
    --mc-text-muted: #7a6f7e;    /* контраст ≥4.2 на креме */
    --mc-divider: #ede3d5;
    --mc-shadow: 0 1px 2px rgba(58, 42, 16, 0.05), 0 2px 8px rgba(58, 42, 16, 0.05);
    --mc-shadow-hover: 0 2px 4px rgba(58, 42, 16, 0.07), 0 6px 16px rgba(58, 42, 16, 0.10);
    --mc-display: Georgia, 'Times New Roman', serif; /* «тёплая книга о тебе» */
    --vk-safe-area-top: 0px;
    --vk-safe-area-right: 0px;
    --vk-safe-area-bottom: 0px;
    --vk-safe-area-left: 0px;
    color-scheme: light;
}

:root[data-appearance="dark"] {
    --mc-bg: #201b20;
    --mc-card: #2b252b;
    --mc-primary: #efb64f;
    --mc-primary-dark: #d99a35;
    --mc-honey: #efb64f;
    --mc-honey-soft: #f5c96f;
    --mc-lavender: #b5a2d1;
    --mc-clay: #d29370;
    --mc-sage: #a9c1a2;
    --mc-text: #f5edf3;
    --mc-text-secondary: #c8bdc6;
    --mc-text-muted: #aaa0a9;
    --mc-divider: #473d46;
    --mc-shadow: 0 1px 2px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.18);
    --mc-shadow-hover: 0 4px 20px rgba(0,0,0,.28);
    color-scheme: dark;
}

.mc-bg {
    /* Базовый цвет — фоллбэк, если градиенты не отрисуются */
    background: var(--mc-bg);
    color: var(--mc-text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    /* iOS safe area — чтобы под notch'ем и VK-плашкой текст не прятался. */
    padding-top: max(env(safe-area-inset-top, 0px), var(--vk-safe-area-top));
    padding-bottom: max(env(safe-area-inset-bottom, 0px), var(--vk-safe-area-bottom));
    padding-left: max(env(safe-area-inset-left, 0px), var(--vk-safe-area-left));
    padding-right: max(env(safe-area-inset-right, 0px), var(--vk-safe-area-right));
    box-sizing: border-box;
}

/* Мягкий пастельный «аврора»-фон: несколько размытых цветовых пятен поверх
   светлого градиента. Фиксированный слой — не уезжает при скролле ленты,
   z-index ниже контента. Спокойные тона под психологическую тему. */
.mc-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Приглушённое тёплое свечение: мёд сверху (свет светлячка), лаванда и шалфей — едва. */
    background:
        radial-gradient(circle at 15% 12%, rgba(233, 168, 59, 0.13), transparent 45%),
        radial-gradient(circle at 88% 20%, rgba(141, 123, 168, 0.10), transparent 42%),
        radial-gradient(circle at 80% 90%, rgba(158, 180, 150, 0.09), transparent 45%),
        linear-gradient(165deg, #fbf6ec 0%, #f8f2e7 55%, #f7f0e8 100%);
    pointer-events: none;
}

:root[data-appearance="dark"] .mc-bg::before {
    background:
        radial-gradient(circle at 15% 12%, rgba(233, 168, 59, 0.10), transparent 45%),
        radial-gradient(circle at 88% 20%, rgba(141, 123, 168, 0.10), transparent 42%),
        linear-gradient(165deg, #201b20 0%, #251f24 55%, #1f1a1f 100%);
}

@media (min-width: 700px) {
    :root[data-vk-wide="true"] #app { max-width: 44rem; }
}

/* ── Шапка с прогрессом ─────────────────────────────────────────── */

.mc-header {
    background: var(--mc-card);
    border-radius: 16px;
    padding: 16px 18px 18px;
    margin-bottom: 16px;
    box-shadow: var(--mc-shadow);
}

.mc-progress-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--mc-text-secondary);
}

.mc-progress-count {
    font-size: 12px;
    color: var(--mc-text-muted);
    font-variant-numeric: tabular-nums;
}

.mc-progress-track {
    height: 6px;
    background: var(--mc-divider);
    border-radius: 999px;
    overflow: hidden;
}

.mc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-primary-dark));
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mc-word {
    margin-top: 18px;
    font-family: var(--mc-display);
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: var(--mc-text);
    letter-spacing: 0.01em;
}

/* Микро-вехи пути (5/10/14) — подбадривание под прогресс-баром. */
.mc-milestone {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--mc-primary);
    font-weight: 600;
    animation: mc-fadein 0.5s ease-out;
}

.mc-hint {
    margin-top: 4px;
    font-size: 13px;
    text-align: center;
    color: var(--mc-text-muted);
}

/* ── Экран согласия на ПДн ──────────────────────────────────────── */

.mc-consent-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--mc-text);
    margin-bottom: 12px;
}

.mc-consent-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--mc-text-secondary);
    margin-bottom: 16px;
}

.mc-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mc-text-secondary);
    cursor: pointer;
}

.mc-consent-check input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--mc-primary);
}

.mc-consent-check a {
    color: var(--mc-primary);
    text-decoration: underline;
}

/* ── Карточки сетки ─────────────────────────────────────────────── */

#grid {
    margin: 0 -2px;
}

#grid button {
    aspect-ratio: 1;
    background: var(--mc-card);
    border-radius: 14px;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--mc-shadow);
    position: relative;
}

/* Наведение мышью (десктопный VK): лёгкий подъём + усиленная тень.
   На тач-устройствах :hover не срабатывает — там работает :active ниже. */
@media (hover: hover) {
    #grid button:hover {
        transform: translateY(-3px);
        box-shadow: var(--mc-shadow-hover);
    }
}

#grid button:active {
    transform: scale(0.97);
    box-shadow: var(--mc-shadow-hover);
}

#grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
    opacity: 0;
}

#grid img.mc-loaded {
    opacity: 1;
}

/* ── Skeleton placeholders (пока картинки грузятся) ─────────────── */

.mc-skel {
    aspect-ratio: 1;
    border-radius: 14px;
    background: linear-gradient(
        90deg,
        #f1e9dc 0%,
        #f9f4ea 50%,
        #f1e9dc 100%
    );
    background-size: 200% 100%;
    animation: mc-shimmer 1.4s ease-in-out infinite;
}

@keyframes mc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Skip button ───────────────────────────────────────────────── */

.mc-skip-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--mc-card);
    color: var(--mc-text-secondary);
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    box-shadow: var(--mc-shadow);
    transition: background 0.15s ease;
}

.mc-skip-btn:active {
    background: var(--mc-divider);
}

/* ── Спиннер ───────────────────────────────────────────────────── */

/* Светлячок вместо спиннера: медовый огонёк, парит и «дышит» светом. */
.mc-spinner {
    display: inline-block;
    width: 52px;
    height: 52px;
    position: relative;
    border: none;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 55%,
        #f7d08a 0%, var(--mc-honey) 38%,
        rgba(233, 168, 59, 0.25) 62%, transparent 78%);
    animation: mc-float 2.6s ease-in-out infinite;
}
.mc-spinner::after {
    content: "";
    position: absolute;
    inset: 32%;
    border-radius: 50%;
    background: #fbe3b0;
    filter: blur(1px);
    animation: mc-glow 1.7s ease-in-out infinite;
}
@keyframes mc-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes mc-glow {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.12); }
}

/* ── Success icon ──────────────────────────────────────────────── */

.mc-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mc-honey-soft), var(--mc-honey));
    color: #3a2a10;
    font-size: 32px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(233, 168, 59, 0.4);
}

/* ── Fullscreen preview ────────────────────────────────────────── */

.mc-preview {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(6px);
    height: 100vh;
    height: 100dvh;
}

.mc-preview:not(.hidden) {
    display: flex !important;
}

.mc-preview-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    color: white;
    font-size: 18px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mc-preview-img {
    max-width: 92%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mc-btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.mc-btn:active {
    transform: scale(0.97);
}

.mc-btn-secondary {
    background: var(--mc-card);
    color: var(--mc-text);
    border: 1px solid var(--mc-divider);
    box-shadow: var(--mc-shadow);
}

/* Тёмный fullscreen preview — обратный вариант для контраста на затемнении. */
#preview .mc-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: none;
    backdrop-filter: blur(8px);
    box-shadow: none;
}

.mc-btn-primary {
    /* Медовый свет с тёмным текстом — теплее и контрастнее белого на синем. */
    background: linear-gradient(135deg, var(--mc-honey-soft), var(--mc-honey));
    color: #3a2a10;
    box-shadow: 0 4px 16px rgba(233, 168, 59, 0.35);
}

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

/* ── Адаптив для маленьких устройств ───────────────────────────── */

@media (max-width: 360px) {
    .mc-word { font-size: 22px; }
    #grid { gap: 8px; }
}

/* ── Главное меню ─────────────────────────────────────────────────── */

.mc-home-header {
    text-align: center;
    margin: 8px 0 22px;
    /* Переключатель языка висит absolute в правом верхнем углу. Отступ сверху
       держит шапку под ним: короткое имя туда не доставало, длинное — заезжает.
       Работает и когда маскот не загрузился (onerror его прячет). */
    padding-top: 34px;
}
.mc-home-title {
    font-family: var(--mc-display);
    font-size: 30px;
    font-weight: 700;
    color: var(--mc-text);
    letter-spacing: 0.01em;
    text-align: center;
    text-wrap: balance;
}
/* Акцентная «Я» в имени — медовая, как огонёк светлячка. */
.mc-title-accent { color: var(--mc-primary); }
.mc-home-title [data-icon] svg { width: 26px; height: 26px; }

/* Маскот-светлячок с прозрачным фоном. */
.mc-mascot-hero {
    width: 92px;
    height: 92px;
    object-fit: contain;
    margin: 0 auto 6px;
    display: block;
    animation: mc-float 3.2s ease-in-out infinite;
}
.mc-mascot-done {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    animation: mc-float 3.2s ease-in-out infinite;
}
.mc-mascot-empty {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
    .mc-mascot-hero, .mc-mascot-done { animation: none; }
}
.mc-home-subtitle {
    font-size: 14px;
    color: var(--mc-text-secondary);
    margin-top: 5px;
}

/* ── Два входа в продукт: быстрое демо / полный разбор ─────────────── */
.mc-choice-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}
.mc-choice-card {
    position: relative;
    min-width: 0;
    min-height: 174px;
    padding: 16px 14px 15px;
    border: 1px solid var(--mc-divider);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: var(--mc-text);
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--mc-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.mc-choice-card-demo {
    background:
        radial-gradient(circle at 85% 8%, rgba(181, 162, 209, .34), transparent 42%),
        linear-gradient(145deg, rgba(141, 123, 168, .12), rgba(255, 253, 249, .94)),
        var(--mc-card);
}
.mc-choice-card-full {
    background:
        radial-gradient(circle at 88% 8%, rgba(255, 235, 170, .78), transparent 40%),
        linear-gradient(145deg, rgba(233, 168, 59, .26), rgba(255, 253, 249, .96)),
        var(--mc-card);
    border-color: rgba(201, 138, 36, .42);
}
.mc-choice-badge {
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--mc-text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.mc-choice-card-full .mc-choice-badge { color: #76500e; background: rgba(255, 247, 216, .88); }
.mc-choice-icon {
    width: 44px;
    height: 44px;
    margin: 18px 0 10px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #67557e;
    background: rgba(141, 123, 168, .18);
}
.mc-choice-card-full .mc-choice-icon { color: #7a5314; background: rgba(233, 168, 59, .23); }
.mc-choice-icon svg { width: 24px; height: 24px; }
.mc-choice-title { font-size: 17px; line-height: 1.15; font-weight: 750; text-wrap: balance; }
.mc-choice-sub { margin-top: 6px; color: var(--mc-text-secondary); font-size: 12px; line-height: 1.35; }
@media (hover: hover) {
    .mc-choice-card:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow-hover); }
}
.mc-choice-card:active { transform: scale(.98); }
.mc-choice-card:focus-visible { outline: 3px solid rgba(233, 168, 59, .52); outline-offset: 2px; }
:root[data-appearance="dark"] .mc-choice-card-demo {
    background: radial-gradient(circle at 85% 8%, rgba(181, 162, 209, .22), transparent 42%), var(--mc-card);
}
:root[data-appearance="dark"] .mc-choice-card-full {
    background: radial-gradient(circle at 88% 8%, rgba(239, 182, 79, .20), transparent 42%), var(--mc-card);
}
:root[data-appearance="dark"] .mc-choice-badge { background: rgba(255,255,255,.08); color: var(--mc-text-secondary); }
:root[data-appearance="dark"] .mc-choice-card-full .mc-choice-badge { color: #f2c26a; }

/* ── Бесплатное демо: 3 категории × 20 вариантов + объяснения + AI ─ */
.mc-demo-kicker {
    margin-top: 18px;
    color: var(--mc-primary);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.mc-demo-built-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 0 0 14px;
}
.mc-demo-built-cell {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: var(--mc-divider);
    border: 1px solid var(--mc-divider);
}
.mc-demo-built-cell img { width: 100%; height: 100%; object-fit: cover; }
.mc-demo-built-cell span {
    position: absolute;
    inset: auto 4px 4px;
    overflow: hidden;
    color: white;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.mc-demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.mc-demo-tile {
    position: relative;
    min-width: 0;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 15px;
    background: var(--mc-divider);
    cursor: pointer;
    box-shadow: var(--mc-shadow);
    transition: transform .14s ease, border-color .14s ease;
}
.mc-demo-tile img { width: 100%; height: 100%; object-fit: cover; }
.mc-demo-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 16, 12, .18), transparent 42%);
    pointer-events: none;
}
.mc-demo-tile:active { transform: scale(.98); }
.mc-demo-tile:focus-visible { outline: 3px solid rgba(233, 168, 59, .62); outline-offset: 2px; }
.mc-demo-skel { aspect-ratio: 1; border-radius: 15px; background: linear-gradient(100deg, var(--mc-divider) 20%, var(--mc-card) 45%, var(--mc-divider) 70%); background-size: 200% 100%; animation: mc-shimmer 1.2s linear infinite; }

.mc-demo-explain-list { margin-bottom: 12px; }
.mc-demo-explain-card {
    display: block;
    margin-bottom: 13px;
    padding: 13px;
    border: 1px solid var(--mc-divider);
    border-radius: 16px;
    background: var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-demo-explain-top {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 11px;
}
.mc-demo-explain-top img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    background: var(--mc-divider);
}
.mc-demo-explain-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.mc-demo-explain-copy strong { color: var(--mc-primary); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.mc-demo-explain-copy span { color: var(--mc-text-secondary); font-size: 13px; line-height: 1.4; }
.mc-demo-explain-input {
    display: block;
    width: 100%;
    min-height: 106px;
    resize: vertical;
    padding: 12px 13px;
    border: 1px solid var(--mc-divider);
    border-radius: 12px;
    color: var(--mc-text);
    background: var(--mc-bg);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    outline: none;
}
.mc-demo-explain-input:focus { border-color: var(--mc-primary); box-shadow: 0 0 0 3px rgba(141,123,168,.14); }
.mc-demo-char-count { display: block; margin-top: 5px; color: var(--mc-text-muted); font-size: 11px; text-align: right; }
.mc-demo-form-status { min-height: 20px; margin: 3px 0 10px; color: #b34f4f; font-size: 13px; line-height: 1.4; }
.mc-demo-analysis-orbit {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto 19px;
    border: 1px solid rgba(233,168,59,.35);
    border-radius: 50%;
    animation: mc-demo-orbit 2.4s linear infinite;
}
.mc-demo-analysis-orbit::before, .mc-demo-analysis-orbit span {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--mc-primary);
    box-shadow: 0 0 15px rgba(233,168,59,.66);
}
.mc-demo-analysis-orbit::before { width: 12px; height: 12px; top: -6px; left: 31px; }
.mc-demo-analysis-orbit span { width: 22px; height: 22px; inset: 26px; background: var(--mc-accent); }
@keyframes mc-demo-orbit { to { transform: rotate(360deg); } }

.mc-demo-result-head { margin: 14px 0 16px; }
.mc-demo-result-head .mc-demo-kicker { margin-top: 0; }
.mc-demo-result-head .mc-section-title { margin-top: 6px; }
.mc-demo-collage {
    width: 100%;
    aspect-ratio: 9 / 5;
    object-fit: cover;
    border-radius: 18px;
    background: var(--mc-divider);
    box-shadow: var(--mc-shadow-hover);
}
.mc-demo-note {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--mc-divider);
    border-radius: 16px;
    background: var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-demo-note strong { color: var(--mc-text); font-size: 13px; }
.mc-demo-note p { margin-top: 4px; color: var(--mc-text-secondary); font-size: 14px; line-height: 1.62; }
.mc-demo-result-actions {
    display: grid;
    gap: 10px;
    margin: 18px 0 8px;
}
.mc-demo-result-hint { margin: 7px 0 12px; color: var(--mc-text-muted); font-size: 12px; text-align: center; }
.mc-demo-analysis-text {
    margin-top: 14px;
    padding: 18px 17px;
    border: 1px solid var(--mc-divider);
    border-radius: 17px;
    background: var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-demo-analysis-text h3 {
    margin: 20px 0 8px;
    color: var(--mc-text);
    font-family: var(--mc-display);
    font-size: 19px;
    line-height: 1.3;
}
.mc-demo-analysis-text h3:first-child { margin-top: 0; }
.mc-demo-analysis-text p { margin: 0 0 13px; color: var(--mc-text-secondary); font-size: 14px; line-height: 1.68; }
.mc-demo-analysis-text p:first-child { color: var(--mc-text); font-size: 16px; font-weight: 700; }
.mc-demo-analysis-text p:last-child { margin-bottom: 0; }

@media (max-width: 340px) {
    .mc-choice-card { min-height: 164px; padding: 13px 11px; }
    .mc-choice-icon { margin-top: 14px; }
    .mc-choice-title { font-size: 15px; }
    .mc-choice-sub { font-size: 11px; }
}

.mc-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}
.mc-home-section {
    margin: 0 0 16px;
}
.mc-home-section-title {
    margin: 0 0 8px 2px;
    color: var(--mc-text-secondary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.mc-menu-item {
    position: relative;
    background: var(--mc-card);
    border: none;
    border-radius: 16px;
    padding: 16px 18px;
    text-align: left;
    box-shadow: var(--mc-shadow);
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mc-menu-item-primary {
    width: 100%;
    margin-bottom: 16px;
    border: 1px solid rgba(201, 138, 36, .28);
    background:
        linear-gradient(135deg, rgba(233, 168, 59, .17), rgba(141, 123, 168, .10)),
        var(--mc-card);
    box-shadow: var(--mc-shadow-hover);
}
.mc-menu-item-primary .mc-menu-label { font-size: 19px; }
.mc-menu-grid-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}
.mc-menu-item-compact {
    min-height: 126px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 5px;
    padding: 15px;
}
.mc-menu-item-compact .mc-menu-icon {
    grid-row: auto;
    /* center, а не start: на узких экранах (<=360px) иконка растягивается
       на обе строки текста, и при start она прижималась к верху. В обычной
       раскладке иконка одна в своей строке — видимой разницы нет. */
    align-self: center;
    width: 38px;
    height: 38px;
}
.mc-menu-item-compact .mc-menu-icon svg { width: 21px; height: 21px; }
.mc-menu-item-compact .mc-menu-label { font-size: 15px; }
.mc-menu-item-compact .mc-menu-sub { font-size: 12px; }

@media (max-width: 360px) {
    .mc-menu-grid-secondary { grid-template-columns: 1fr; }
    .mc-menu-item-compact {
        min-height: 0;
        grid-template-columns: 38px 1fr;
        grid-template-rows: auto auto;
    }
    .mc-menu-item-compact .mc-menu-icon { grid-row: 1 / 3; }
}
@media (hover: hover) {
    .mc-menu-item:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow-hover); }
}
.mc-menu-item:active { transform: scale(0.98); }
.mc-menu-label {
    font-weight: 600;
    font-size: 17px;
    color: var(--mc-text);
}
.mc-menu-sub {
    font-size: 14px;
    line-height: 1.35;
    color: var(--mc-text-secondary);
}

/* Видимый фокус для клавиатуры/пульта — медовое кольцо. */
.mc-menu-item:focus-visible,
.mc-btn:focus-visible,
.mc-day-btn:focus-visible,
.mc-back:focus-visible,
#grid button:focus-visible {
    outline: 3px solid rgba(233, 168, 59, 0.75);
    outline-offset: 2px;
}

/* ── SVG-иконки (заменили эмодзи) ───────────────────────────────── */
.mc-icon, [data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.15em;
}
.mc-icon svg, [data-icon] svg { width: 1.15em; height: 1.15em; }
/* Иконки меню — в мягких цветных кружках («бабушкин тест»: крупно и различимо). */
.mc-menu-icon {
    grid-row: 1 / 3;
    align-self: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3a2a10;
    background: rgba(233, 168, 59, 0.22);
}
.mc-menu-icon svg { width: 24px; height: 24px; }
.mc-menu-grid .mc-menu-item:nth-child(1) .mc-menu-icon { background: rgba(233, 168, 59, 0.24); color: #7a5314; }
.mc-menu-grid .mc-menu-item:nth-child(2) .mc-menu-icon { background: rgba(141, 123, 168, 0.20); color: #5c4d75; }
.mc-menu-grid .mc-menu-item:nth-child(3) .mc-menu-icon { background: rgba(196, 123, 82, 0.20); color: #82492a; }
.mc-menu-grid .mc-menu-item:nth-child(4) .mc-menu-icon { background: rgba(158, 180, 150, 0.24); color: #4c6244; }
.mc-menu-grid .mc-menu-item:nth-child(5) .mc-menu-icon { background: rgba(135, 170, 200, 0.22); color: #3d5a73; }
/* Цвет по ИМЕНИ иконки, а не по позиции в сетке. Позиционные правила ниже
   покрывали только первые пять кнопок: шестая («Твой типаж») до них не
   доставала и падала на дефолт — тёмно-коричневый глиф, в тёмной теме
   почти неразличимый на тёмном чипе. */
.mc-menu-icon[data-icon="heart"] { background: rgba(199, 106, 104, 0.18); color: #93413f; }
:root[data-appearance="dark"] .mc-menu-icon[data-icon="heart"] { background: rgba(224, 130, 122, 0.20); color: #eda093; }

/* Тёмная тема: те же чипы, но иконки светлые — тёмные цвета выше тонут в тёмных карточках. */
:root[data-appearance="dark"] .mc-menu-icon {
    background: rgba(239, 182, 79, 0.18);
    /* Базовый цвет тоже светлый: иначе любая иконка без своего правила
       остаётся почти чёрной на тёмной карточке. */
    color: #f2c26a;
}
:root[data-appearance="dark"] .mc-menu-grid .mc-menu-item:nth-child(1) .mc-menu-icon { background: rgba(239, 182, 79, 0.22); color: #f2c26a; }
:root[data-appearance="dark"] .mc-menu-grid .mc-menu-item:nth-child(2) .mc-menu-icon { background: rgba(181, 162, 209, 0.22); color: #cbbae4; }
:root[data-appearance="dark"] .mc-menu-grid .mc-menu-item:nth-child(3) .mc-menu-icon { background: rgba(210, 147, 112, 0.22); color: #e2ab87; }
:root[data-appearance="dark"] .mc-menu-grid .mc-menu-item:nth-child(4) .mc-menu-icon { background: rgba(169, 193, 162, 0.22); color: #bed6b6; }
:root[data-appearance="dark"] .mc-menu-grid .mc-menu-item:nth-child(5) .mc-menu-icon { background: rgba(135, 170, 200, 0.22); color: #a9c8e2; }
.mc-upload-icon { color: var(--mc-primary); margin-bottom: 8px; }
.mc-upload-icon svg { width: 36px; height: 36px; }
.mc-help-icon { color: var(--mc-primary); }
.mc-help-icon svg { width: 16px; height: 16px; }
.mc-icon-live { color: #34c759; }
/* Карточки уведомлений на главной (resume/pair) */
.mc-card {
    background: var(--mc-card);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: var(--mc-shadow);
}
.mc-card[type="button"] { display: block; border: 0; }
.mc-card-accent {
    border-left: 3px solid var(--mc-lavender);
}
.mc-card-label {
    font-size: 13px;
    color: var(--mc-text-secondary);
    margin-bottom: 4px;
}
.mc-card-meta {
    font-size: 15px;
    font-weight: 500;
    color: var(--mc-text);
}
.mc-card-hint {
    font-size: 13px;
    color: var(--mc-text-secondary);
    margin-top: 6px;
}

/* Пикер дня недели для подписки */
.mc-day-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.mc-day-btn {
    padding: 10px 4px;
    border: 1px solid var(--mc-divider);
    background: var(--mc-card);
    color: var(--mc-text);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.mc-day-btn:active {
    transform: scale(0.95);
    background: var(--mc-divider);
}

/* ── Превью растущего коллажа на экране сборки ──────────────────── */

.mc-built-preview {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin: 12px 0 16px;
    background: rgba(255,255,255,0.4);
    padding: 6px;
    border-radius: 10px;
    box-shadow: var(--mc-shadow);
}
.mc-built-cell {
    aspect-ratio: 1;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
}
.mc-built-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Вставка картинки в превью: подпрыгивающее появление + медовая вспышка. */
.mc-built-pop img {
    animation: mc-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc-built-pop {
    animation: mc-honey-flash 0.7s ease-out;
}
@keyframes mc-pop {
    from { transform: scale(0.4); opacity: 0.2; }
    to   { transform: scale(1);   opacity: 1; }
}
@keyframes mc-honey-flash {
    0%   { box-shadow: 0 0 0 0 rgba(233, 168, 59, 0.8); }
    100% { box-shadow: 0 0 0 10px rgba(233, 168, 59, 0); }
}
.mc-built-filled {
    background: var(--mc-card);
}
.mc-built-done {
    background: linear-gradient(135deg, #d4e6d4, #c8dfc8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-built-check {
    color: #4a9a4a;
    font-size: 16px;
    font-weight: 700;
}

/* ── Парный коллаж: список и карточка ────────────────────────────── */

.mc-pair-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mc-pair-card {
    background: var(--mc-card);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--mc-shadow);
}
.mc-pair-head {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.mc-pair-status {
    font-size: 15px;
    font-weight: 600;
    color: var(--mc-text);
}
.mc-pair-when {
    font-size: 12px;
    color: var(--mc-text-muted);
    white-space: nowrap;
}
.mc-pair-row {
    font-size: 13px;
    color: var(--mc-text);
    padding: 4px 0;
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.mc-pair-label {
    color: var(--mc-text-secondary);
    flex-shrink: 0;
}
.mc-pair-value {
    font-weight: 500;
}
.mc-pair-muted {
    color: var(--mc-text-muted);
    font-weight: 400;
}
.mc-pair-link {
    background: #f3ede2;
    color: var(--mc-text-secondary);
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    word-break: break-all;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    margin-top: 10px;
}

/* Кнопка-опасность для отзыва пары */
.mc-btn-danger {
    background: #fdecec;
    color: #c43535;
    border: 1px solid #f7d1d1;
}
.mc-btn-danger:active { background: #f7d1d1; }
.mc-btn-danger:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Section header (Назад + заголовок) ─────────────────────────── */

.mc-section-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    /* Запас сверху на случай overlap'а VK-плашки/notch'а */
    padding-top: 8px;
}
.mc-back {
    background: transparent;
    border: none;
    color: var(--mc-primary);
    font-size: 14px;
    padding: 6px 4px;
    cursor: pointer;
}
/* Кнопка выхода в меню на экране сбора: отдельной строкой над карточкой прогресса,
   с запасом сверху под VK-плашку/notch. */
.mc-step-back { display: inline-block; padding-top: 8px; margin-bottom: 8px; }

/* ── Зеркало симпатий ─────────────────────────────────────────────── */
/* Явная сетка, не полагаемся на Tailwind grid-cols. */
#symFeedGrid, #symRankGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc-sym-genders { display: flex; flex-direction: column; gap: 10px; }

/* Переключатель языка (правый верх главного экрана). Меню строится из списка
   языков, поэтому пятый язык не требует правки стилей. */
#home { position: relative; }
.mc-lang-wrap {
    position: absolute;
    top: max(6px, var(--vk-safe-area-top));
    right: 4px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
}
.mc-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    padding: 6px;
    border-radius: 12px;
    background: var(--mc-card);
    border: 1px solid var(--mc-divider);
    box-shadow: var(--mc-shadow-hover);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mc-lang-item {
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mc-text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.mc-lang-item:hover { background: var(--mc-divider); }
.mc-lang-toggle {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--mc-divider);
    background: var(--mc-card);
    color: var(--mc-text-secondary);
    font-size: 13px; font-weight: 700; letter-spacing: .03em;
    cursor: pointer;
}
.mc-menu-unread {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #35240b;
    background: var(--mc-honey);
    border: 2px solid var(--mc-card);
    box-shadow: 0 3px 10px rgba(82, 48, 13, .18);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}
.mc-menu-unread.hidden { display: none; }
.mc-account-link { text-decoration: none; }
.mc-sym-tile {
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mc-divider);
    cursor: pointer;
}
.mc-sym-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-sym-check {
    position: absolute; top: 6px; right: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--mc-primary); color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
}
.mc-sym-tile.mc-sym-sel { border-color: var(--mc-primary); }
.mc-sym-tile.mc-sym-sel .mc-sym-check { display: flex; }
.mc-sym-rank {
    position: absolute; top: 6px; left: 6px;
    min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px;
    background: var(--mc-honey); color: #2b2113;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 800;
}
.mc-sym-tile.mc-sym-ranked { border-color: var(--mc-honey); }
/* Зафиксированная снизу кнопка-действие (не уезжает при скролле ленты).
   fixed + отступ снизу у экрана — чтобы не перекрывала контент. */
.mc-sym-cta {
    position: fixed;
    left: 16px; right: 16px;
    bottom: max(14px, var(--vk-safe-area-bottom));
    width: auto;
    z-index: 20;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
}
#sympathyFeed, #sympathyRank { padding-bottom: 88px; }

/* ── Слайд-режим разбора ───────────────────────────────────────────── */
.mc-slides {
    position: fixed; inset: 0; z-index: 130;
    background: rgba(20, 16, 12, 0.97);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.mc-slides-stage {
    position: absolute; inset: 0;
    overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 14px;
    padding: max(40px, var(--vk-safe-area-top)) 20px 92px;
    z-index: 1;
    color: #f4efe8;
}
.mc-slides-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.16); color: #fff; border: none;
    font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mc-slides-arrow-l { left: 8px; }
.mc-slides-arrow-r { right: 8px; }
.mc-slide-collage { max-width: 100%; max-height: 80vh; border-radius: 12px; margin: auto; cursor: zoom-in; }
.mc-slide-thumbs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mc-slide-thumbs img { width: 132px; height: 132px; object-fit: cover; border-radius: 12px; cursor: zoom-in; }
.mc-slide-text { max-width: 560px; width: 100%; }
.mc-slide-text h3 { font-family: var(--mc-display); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.mc-slide-text p { font-size: 16px; line-height: 1.65; white-space: pre-wrap; }
.mc-slides-dots {
    position: absolute; top: max(14px, var(--vk-safe-area-top)); left: 50%; transform: translateX(-50%);
    z-index: 3; color: rgba(255,255,255,0.72); font-size: 13px; font-variant-numeric: tabular-nums;
}
.mc-slides .mc-lightbox-close { z-index: 4; }
.mc-section-title {
    font-family: var(--mc-display);
    font-size: 21px;
    font-weight: 700;
}
.mc-section-text {
    font-size: 14px;
    color: var(--mc-text-secondary);
    line-height: 1.5;
    margin-bottom: 18px;
}

/* ── Галерея ──────────────────────────────────────────────────────── */

.mc-gallery-card {
    position: relative;
    background: var(--mc-card);
    border: none;
    border-radius: 14px;
    padding: 0;
    box-shadow: var(--mc-shadow);
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) {
    .mc-gallery-card:hover { transform: translateY(-2px); box-shadow: var(--mc-shadow-hover); }
}
.mc-gallery-card:active { transform: scale(0.98); }
.mc-gallery-thumb {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f1e9dc, #f9f4ea);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Парный разбор: два коллажа рядом. */
.mc-gallery-thumb-pair { display: flex; }
.mc-gallery-thumb-pair img { width: 50%; }
/* Типаж-композит (широкий) — целиком, без обрезки. */
.mc-gallery-thumb img.mc-gallery-img-contain { object-fit: contain; background: #2a2622; }
.mc-gallery-icon { color: var(--mc-text-muted); }
.mc-gallery-icon svg { width: 28px; height: 28px; }
.mc-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.mc-gallery-thumb { position: relative; }
/* Крутящийся индикатор «разбор готовится» на карточке галереи. */
.mc-gallery-spin {
    width: 26px; height: 26px;
    border: 3px solid rgba(120, 120, 120, 0.28);
    border-top-color: var(--mc-honey);
    border-radius: 50%;
    animation: mc-spin 0.9s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
.mc-gallery-meta {
    padding: 10px 12px 12px;
}
.mc-gallery-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mc-text);
}
.mc-gallery-date {
    font-size: 12px;
    color: var(--mc-text-muted);
    margin-top: 2px;
}

/* ── Просмотр разбора ─────────────────────────────────────────────── */

.mc-analysis-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--mc-shadow);
    margin-bottom: 18px;
}

/* Парный разбор: два коллажа бок о бок */
.mc-analysis-pair-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}
.mc-analysis-pair-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mc-analysis-pair-label {
    font-size: 12px;
    color: var(--mc-text-secondary);
    text-align: center;
}
.mc-analysis-pair-col img {
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--mc-shadow);
}
.mc-analysis-text p {
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--mc-text);
}
.mc-analysis-text {
    background: var(--mc-card);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: var(--mc-shadow);
}
.mc-analysis-text:empty { display: none; }
.mc-reading-progress {
    position: sticky;
    top: max(env(safe-area-inset-top, 0px), var(--vk-safe-area-top));
    z-index: 12;
    height: 4px;
    margin: 0 0 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mc-divider);
}
.mc-reading-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mc-primary), var(--mc-lavender));
    transition: width .12s linear;
}
.mc-gallery-unread-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mc-honey);
    border: 2px solid var(--mc-card);
    box-shadow: 0 2px 7px rgba(82, 48, 13, .26);
}
.mc-demo-needs {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(141, 123, 168, .24);
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 0, rgba(233, 168, 59, .18), transparent 38%),
        linear-gradient(145deg, rgba(141, 123, 168, .16), rgba(255, 253, 249, .92) 52%);
    box-shadow: var(--mc-shadow);
}
.mc-demo-needs-head {
    padding: 18px 18px 14px;
}
.mc-demo-needs-eyebrow {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(141, 123, 168, .14);
    color: var(--mc-lavender);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.mc-demo-needs-head h3 {
    margin-bottom: 7px;
    font-family: var(--mc-display);
    font-size: 22px;
    line-height: 1.2;
}
.mc-demo-needs-head p {
    color: var(--mc-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}
.mc-demo-needs-lead {
    white-space: pre-line;
}
.mc-demo-needs-list {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}
.mc-demo-need-card {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 11px 12px 11px 8px;
    border: 1px solid rgba(141, 123, 168, .14);
    border-radius: 14px;
    background: rgba(255, 253, 249, .78);
}
.mc-demo-need-card img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(76, 48, 70, .13));
}
.mc-demo-need-card h4 {
    margin: 0 0 4px;
    color: var(--mc-text);
    font-family: var(--mc-display);
    font-size: 16px;
    line-height: 1.25;
}
.mc-demo-need-card p {
    margin: 0;
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.48;
}
:root[data-appearance="dark"] .mc-demo-needs {
    background:
        radial-gradient(circle at 90% 0, rgba(239, 182, 79, .13), transparent 38%),
        linear-gradient(145deg, rgba(181, 162, 209, .15), rgba(43, 37, 43, .94) 52%);
}
:root[data-appearance="dark"] .mc-demo-need-card {
    background: rgba(32, 27, 32, .55);
}
@media (min-width: 700px) {
    .mc-demo-needs-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }
    .mc-demo-need-card {
        grid-template-columns: 1fr;
        align-content: start;
        padding: 12px;
        text-align: center;
    }
    .mc-demo-need-card img {
        width: 112px;
        height: 112px;
        margin: 0 auto;
    }
}
.mc-analysis-summary,
.mc-analysis-questions {
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(233, 168, 59, .13), rgba(141, 123, 168, .09)), var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-analysis-summary h3,
.mc-analysis-questions h3,
.mc-analysis-section h3 {
    margin-bottom: 8px;
    font-family: var(--mc-display);
    font-size: 18px;
    color: var(--mc-text);
}
.mc-analysis-summary p,
.mc-analysis-questions li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--mc-text-secondary);
}
.mc-analysis-questions ul { margin: 0; padding-left: 20px; }
.mc-analysis-questions li + li { margin-top: 7px; }
.mc-analysis-toc {
    display: flex;
    flex-wrap: wrap;              /* переносим на след. строку — иначе последняя плашка обрезалась */
    gap: 8px;
    margin: 0 0 14px;
    padding: 2px 0 6px;
}
.mc-analysis-toc button {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid var(--mc-divider);
    border-radius: 999px;
    background: var(--mc-card);
    color: var(--mc-text-secondary);
    font-size: 12px;
}
.mc-analysis-section + .mc-analysis-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--mc-divider);
}
.mc-analysis-section p:last-child { margin-bottom: 0; }
/* Акценты внутри разбора. Модель ставит их на ключевых мыслях; делаем их
   заметными, но не крикливыми - это длинный текст, и десяток жирных пятен
   на экран утомляет сильнее, чем их отсутствие. Цвет основного текста
   вместо серого даёт достаточный контраст без утяжеления. */
.mc-analysis-section strong,
.mc-slide-text strong {
    font-weight: 650;
    color: var(--mc-text);
}
.mc-done-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}
.mc-support-card {
    padding: 18px;
    border: 1px solid rgba(141, 123, 168, .18);
    border-radius: 18px;
    background: var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-support-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.mc-support-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: rgba(141, 123, 168, .14);
    color: var(--mc-lavender);
}
.mc-support-icon svg { width: 22px; height: 22px; }
.mc-support-intro h3 {
    margin: 1px 0 4px;
    font-family: var(--mc-display);
    font-size: 18px;
}
.mc-support-intro p,
.mc-support-hint {
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.mc-support-label {
    display: block;
    margin-bottom: 7px;
    color: var(--mc-text);
    font-size: 13px;
    font-weight: 700;
}
.mc-support-textarea {
    width: 100%;
    min-height: 144px;
    resize: vertical;
    border: 1px solid var(--mc-divider);
    border-radius: 13px;
    padding: 12px 13px;
    background: var(--mc-bg);
    color: var(--mc-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
}
.mc-support-textarea:focus {
    outline: none;
    border-color: var(--mc-lavender);
    box-shadow: 0 0 0 3px rgba(141, 123, 168, .14);
}
.mc-support-counter {
    margin: 5px 2px 13px;
    color: var(--mc-text-muted);
    font-size: 11px;
    text-align: right;
}
.mc-support-counter.is-near-limit { color: #b36a22; font-weight: 700; }
.mc-support-files-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid var(--mc-divider);
    border-radius: 12px;
    background: var(--mc-bg);
    color: var(--mc-text);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}
.mc-support-files-button svg { width: 18px; height: 18px; }
.mc-support-hint { margin: 7px 0 10px; }
.mc-support-files-list {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
}
.mc-support-file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(141, 123, 168, .09);
    font-size: 12px;
}
.mc-support-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-support-file-size { color: var(--mc-text-muted); font-size: 11px; }
.mc-support-file-remove {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mc-text-muted);
    font-size: 18px;
}
.mc-support-status {
    min-height: 20px;
    margin: 4px 0 8px;
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.mc-support-status.is-error { color: #b34f42; }
.mc-support-status.is-success { color: #4d8554; }
.mc-btn-quiet {
    border: 0;
    background: transparent;
    color: var(--mc-text-secondary);
}

/* ── Загрузка своего коллажа ──────────────────────────────────────── */

.mc-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--mc-card);
    border: 2px dashed var(--mc-divider);
    border-radius: 14px;
    padding: 36px 20px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.mc-upload-zone:hover { border-color: var(--mc-primary); }
.mc-upload-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--mc-text);
}
.mc-upload-sub {
    font-size: 12px;
    color: var(--mc-text-muted);
    margin-top: 4px;
}
.mc-upload-preview {
    width: 100%;
    border-radius: 12px;
    box-shadow: var(--mc-shadow);
}

/* ── Help ─────────────────────────────────────────────────────────── */

.mc-help-section-title {
    margin: 0 0 10px 2px;
    font-family: var(--mc-display);
    font-size: 19px;
    color: var(--mc-text);
}
.mc-help-flow { margin-bottom: 20px; }
.mc-help-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mc-help-step {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 96px;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border-radius: 16px;
    background: var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-help-step-number {
    align-self: start;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--mc-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.mc-help-step-copy h4 {
    margin: 0;
    color: var(--mc-text);
    font-size: 14px;
    line-height: 1.3;
}
.mc-help-step-copy p {
    margin-top: 5px;
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.mc-help-choice-demo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
}
.mc-help-choice-demo span,
.mc-help-collage-demo span {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(233, 168, 59, .22), rgba(141, 123, 168, .16));
    font-size: 18px;
}
.mc-help-choice-demo span:nth-child(2n),
.mc-help-collage-demo span:nth-child(3n) {
    background: linear-gradient(145deg, rgba(158, 180, 150, .25), rgba(135, 170, 200, .18));
}
.mc-help-collage-demo {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 4px;
    border-radius: 9px;
    background: var(--mc-divider);
}
.mc-help-collage-demo span { border-radius: 3px; font-size: 10px; }
.mc-help-collage-demo .mc-help-color-tile {
    background: #8d7ba8;
}
.mc-help-result-demo {
    padding: 12px 10px;
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(141, 123, 168, .13), rgba(233, 168, 59, .12));
}
.mc-help-result-demo span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--mc-divider);
}
.mc-help-result-demo span + span { margin-top: 7px; }
.mc-help-result-demo span:nth-child(1) { width: 72%; height: 9px; background: var(--mc-primary); opacity: .65; }
.mc-help-result-demo span:nth-child(3) { width: 84%; }
.mc-help-result-demo span:nth-child(4) { width: 58%; }
.mc-help-pair-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding: 17px;
    border: 1px solid rgba(141, 123, 168, .22);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(141, 123, 168, .12), transparent), var(--mc-card);
    box-shadow: var(--mc-shadow);
}
.mc-help-pair-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(141, 123, 168, .18);
    color: var(--mc-lavender);
}
.mc-help-pair-icon svg { width: 24px; height: 24px; }
.mc-help-pair-card h3 { color: var(--mc-text); font-size: 15px; }
.mc-help-pair-card p {
    margin-top: 5px;
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}
.mc-help-pair-card .mc-btn { grid-column: 1 / -1; }
.mc-help-faq { margin-bottom: 18px; }
.mc-help-faq details {
    border-bottom: 1px solid var(--mc-divider);
    background: var(--mc-card);
}
.mc-help-faq details:first-of-type { border-radius: 14px 14px 0 0; }
.mc-help-faq details:last-of-type { border-bottom: 0; border-radius: 0 0 14px 14px; }
.mc-help-faq summary {
    position: relative;
    padding: 14px 42px 14px 16px;
    color: var(--mc-text);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    list-style: none;
}
.mc-help-faq summary::-webkit-details-marker { display: none; }
.mc-help-faq summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--mc-primary);
    font-size: 20px;
    transform: translateY(-50%);
}
.mc-help-faq details[open] summary::after { content: "−"; }
.mc-help-faq details p {
    padding: 0 16px 14px;
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.mc-help-notice {
    display: flex;
    gap: 11px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(196, 123, 82, .10);
    color: var(--mc-text-secondary);
}
.mc-help-notice-icon { flex: 0 0 auto; color: var(--mc-clay); }
.mc-help-notice-icon svg { width: 20px; height: 20px; }
.mc-help-notice strong { color: var(--mc-text); font-size: 13px; }
.mc-help-notice p { margin-top: 3px; font-size: 12px; line-height: 1.45; }
.mc-help-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 12px;
}

@media (max-width: 380px) {
    .mc-help-step { grid-template-columns: 30px minmax(0, 1fr); }
    .mc-help-choice-demo,
    .mc-help-collage-demo,
    .mc-help-result-demo { grid-column: 2; width: 100%; }
}

/* ── Анимация фраз на экране analyzing ────────────────────────────── */

.mc-fade {
    animation: mc-fadein 0.7s ease-out;
}
@keyframes mc-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Уважение к reduced motion: гасим парение/пульсы, оставляем мгновенные состояния. */
@media (prefers-reduced-motion: reduce) {
    .mc-spinner, .mc-spinner::after,
    .mc-built-pop, .mc-built-pop img,
    .mc-fade, .mc-milestone, .mc-gallery-spin {
        animation: none !important;
    }
}

/* ── Диалоги и уведомления ───────────────────────────────────────── */
.mc-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-bottom: max(24px, var(--vk-safe-area-bottom));
    background: rgba(30, 24, 30, .56);
    backdrop-filter: blur(8px);
}
.mc-dialog-card {
    width: 100%;
    max-width: 360px;
    padding: 22px;
    border-radius: 18px;
    background: var(--mc-card);
    box-shadow: 0 16px 48px rgba(0,0,0,.28);
}
.mc-dialog-title {
    font-family: var(--mc-display);
    font-size: 20px;
    color: var(--mc-text);
}
.mc-dialog-text {
    margin-top: 9px;
    color: var(--mc-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
}
.mc-dialog-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    color: var(--mc-text-secondary);
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.mc-dialog-check input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    accent-color: var(--mc-honey, #efb64f);
    cursor: pointer;
}
.mc-dialog-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.mc-dialog-actions .mc-btn:disabled {
    opacity: .45;
    cursor: default;
}
.mc-toast {
    position: fixed;
    left: 50%;
    bottom: max(18px, calc(var(--vk-safe-area-bottom) + 10px));
    z-index: 140;
    max-width: min(360px, calc(100vw - 32px));
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--mc-text);
    color: var(--mc-card);
    box-shadow: 0 8px 28px rgba(0,0,0,.24);
    font-size: 13px;
    text-align: center;
    transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
    .mc-reading-progress-bar,
    .mc-dialog-card { transition: none; animation: none; }
}

/* ── Динамика (тест-режим): график шкал ─────────────────────────────── */
.mc-dyn-chart {
    width: 100%;
    background: var(--mc-card);
    border: 1px solid var(--mc-divider);
    border-radius: 14px;
    padding: 8px;
}
.mc-dyn-svg { width: 100%; height: auto; display: block; }
.mc-dyn-grid { stroke: var(--mc-divider); stroke-width: 1; }
.mc-dyn-axis { fill: var(--mc-text-secondary); font-size: 9px; }
.mc-dyn-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mc-dyn-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--mc-card);
    border: 1px solid var(--mc-divider);
    color: var(--mc-text);
    cursor: pointer;
}
.mc-dyn-chip.mc-dyn-off { opacity: .45; text-decoration: line-through; }
.mc-dyn-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Динамика: подсказка при наведении ──────────────────────────────── */
.mc-dyn-wrap { position: relative; }
.mc-dyn-guide { stroke: var(--mc-text-muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.mc-dyn-tip {
    position: absolute;
    top: 8px;
    z-index: 5;
    width: 250px;
    max-width: calc(100% - 16px);
    padding: 10px;
    border-radius: 12px;
    background: var(--mc-card);
    border: 1px solid var(--mc-divider);
    box-shadow: var(--mc-shadow-hover);
    pointer-events: none;
    font-size: 12px;
    color: var(--mc-text);
}
.mc-dyn-tip .mc-dyn-tip-date { font-weight: 600; margin-bottom: 6px; }
.mc-dyn-tip-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 1px; }
.mc-dyn-tip .mc-dyn-row { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.mc-dyn-tip .mc-dyn-row .mc-dyn-dot { width: 8px; height: 8px; }
.mc-dyn-tip .mc-dyn-row .mc-dyn-val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--mc-text-secondary); }

/* ── Динамика: превью коллажей встроены в SVG под точками ────────────── */
.mc-dyn-thumb-b { stroke: rgba(128,128,128,.4); stroke-width: 0.8; }

/* ── Лайтбокс коллажа ───────────────────────────────────────────────── */
.mc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    padding-bottom: max(24px, var(--vk-safe-area-bottom));
    background: rgba(20, 16, 20, .9);
    backdrop-filter: blur(6px);
}
.mc-lightbox img { max-width: 100%; max-height: 82%; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.mc-lightbox-close {
    position: absolute;
    left: 50%;
    bottom: max(22px, calc(var(--vk-safe-area-bottom) + 14px));
    transform: translateX(-50%);
    padding: 11px 26px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff; border: none;
    font-size: 15px; cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Значения у точек — показываем, когда выбрано 1–2 шкалы */
.mc-dyn-vlabel { font-size: 8px; font-weight: 600; }

/* ── Помощь: список форматов и блок обучения ─────────────────────────────
   Список переиспользует .mc-menu-item с главной — те же карточки, те же
   переводы, никакого второго набора стилей. */
.mc-help-formats { margin-bottom: 20px; }
.mc-help-format-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mc-help-tours { margin-bottom: 18px; }
.mc-help-tour-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* Кнопки тура приходят из onboarding.js уже с .mc-btn — гасим их прежний
   «прилипший к низу» отступ, теперь они внутри секции. */
.mc-help-tour-list .svetlya-tour-restart { margin: 0; }

/* «Что здесь есть» — выдвигающиеся объяснения. Компонент тот же, что у FAQ
   ниже: строка раскрывается в ответ «что это такое». Отдельного меню тут нет
   намеренно — переходы живут на главной, здесь только объяснения. */
.mc-help-formats { margin-bottom: 20px; }
.mc-help-fmt-acc details {
    border-bottom: 1px solid var(--mc-divider);
    background: var(--mc-card);
}
.mc-help-fmt-acc details:first-of-type { border-radius: 14px 14px 0 0; }
.mc-help-fmt-acc details:last-of-type { border-bottom: 0; border-radius: 0 0 14px 14px; }
.mc-help-fmt-acc summary {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 11px;
    align-items: center;
    padding: 11px 42px 11px 14px;
    cursor: pointer;
    list-style: none;
}
.mc-help-fmt-acc summary::-webkit-details-marker { display: none; }
.mc-help-fmt-acc summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--mc-primary);
    font-size: 20px;
    transform: translateY(-50%);
}
.mc-help-fmt-acc details[open] summary::after { content: "−"; }
.mc-help-fmt-head { display: block; line-height: 1.35; }
.mc-help-fmt-head b { display: block; font-size: 13.5px; color: var(--mc-text); }
.mc-help-fmt-sub { font-size: 12px; color: var(--mc-text-secondary); }
.mc-help-fmt-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--mc-honey) 16%, transparent);
    color: var(--mc-honey);
}
.mc-help-fmt-icon svg { width: 17px; height: 17px; }
/* Цвет чипа — по ИМЕНИ иконки, не по nth-child: разметка ещё будет меняться,
   позиционные правила ломаются молча. */
.mc-help-fmt-icon[data-icon="image"]  { background: color-mix(in srgb, #8d7ba8 16%, transparent); color: #8d7ba8; }
.mc-help-fmt-icon[data-icon="users"]  { background: color-mix(in srgb, #c98a6a 16%, transparent); color: #c98a6a; }
.mc-help-fmt-icon[data-icon="upload"] { background: color-mix(in srgb, #6ac1b8 16%, transparent); color: #6ac1b8; }
.mc-help-fmt-icon[data-icon="chart"]  { background: color-mix(in srgb, #5aa9e6 16%, transparent); color: #5aa9e6; }
.mc-help-fmt-icon[data-icon="heart"]  { background: color-mix(in srgb, #e07a6a 16%, transparent); color: #e07a6a; }
.mc-help-fmt-pill {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--mc-text-secondary);
    background: color-mix(in srgb, var(--mc-text-secondary) 12%, transparent);
}
/* Раскрытое содержимое */
.mc-help-fmt-acc details > p {
    padding: 0 16px 12px 55px;
    margin: 0;
    color: var(--mc-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.mc-help-fmt-acc details > p + p { padding-top: 8px; }
/* Три шага внутри «Полного разбора» — компактнее, чем были отдельной секцией */
.mc-help-fmt-acc .mc-help-steps { padding: 0 16px 14px 14px; margin: 0; }
.mc-help-fmt-acc .mc-help-step { padding: 10px 12px; }
.mc-help-fmt-acc .mc-help-step h4 { font-size: 13px; }
.mc-help-fmt-acc .mc-help-step p { font-size: 12px; }

/* Демо-график: видно, что это пример, а не твои данные. */
.mc-dyn-demo { opacity: .55; }
.mc-dyn-demo-note {
    margin-top: 6px;
    font-size: 12px;
    color: var(--mc-text-secondary);
    text-align: center;
}