/* Стили модуля js/categories/numerology.js. До 19.09.2026 скрипт вставлял их тегом <style>;
   с 19.09.2026 CSP сайта без 'unsafe-inline' такие теги не применяет, поэтому стили — здесь.
   Правите стили раздела — правьте этот файл и поднимайте его ?v=N в index.html. */

            .numerology-content { padding: 20px; }

            /* ===== ФОН РАЗДЕЛА: фото «северное сияние над лесом» + лёгкая вуаль (full-bleed) ===== */
            .num-cosmos{
                position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .55s ease;
                background:
                    linear-gradient(180deg, rgba(9,6,22,0.16), rgba(9,6,22,0.12) 45%, rgba(9,6,22,0.38)),
                    url('../../img/bg-numerology.webp?v=2') center/cover no-repeat;
                background-color:#0a0714;
            }
            body[data-section="numerology"] .num-cosmos{opacity:1;}
            /* убираем стеклянную рамку контейнера — контент «уходит от границ» */
            body[data-section="numerology"] #categoryContainer,
            body[data-section="numerology"] #categoryContainer .page{background:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;margin-top:0;}

            .numerology-calculator {
                background: rgba(255, 255, 255, 0.05);
                padding: 25px;
                border-radius: 15px;
                margin: 25px 0;
                border-left: 4px solid #7c5cff;
            }

            .calculator-form {
                display: flex;
                gap: 15px;
                margin: 20px 0;
                flex-wrap: wrap;
            }

            .calculator-form input { flex: 1; min-width: 200px; }
            /* Подписи над полями (01.10.2026): на iPhone поле даты без подписи — просто дата
               или пустой прямоугольник, непонятно, чья это дата и что вводить. В колонке подписи
               flex:1 у поля растянул бы его по высоте — возвращаем высоту по содержимому. */
            .calculator-form .calc-lbl { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px;
                font-size: 12.5px; color: #b6b2d0; }
            /* Одна высота у имени и даты: высоту поля даты браузер (особенно Сафари на iPhone)
               считает по-своему, и без явной высоты поля выходили разными */
            .calculator-form .calc-lbl input { flex: 0 0 auto; min-width: 0; width: 100%; height: 50px; }
            .calculator-form button { align-self: flex-end; }

            .calculator-form button {
                width: auto;
                color: #2a1e05;
                background: linear-gradient(135deg, #ffe9b0, rgb(240,184,74) 45%, rgb(224,138,74));
                box-shadow: 0 10px 24px rgba(240,184,74,.32);
            }

            .numerology-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

            .results-container {
                min-width: 0;
                background: rgba(255, 255, 255, 0.03);
                padding: 20px;
                border-radius: 12px;
                border: 1px solid rgba(255, 255, 255, 0.06);
            }
            /* графики/схемы масштабируются под контейнер, а не распирают его */
            .results-container svg { max-width: 100%; height: auto; }
            .num-graph-host { min-width: 0; overflow-x: auto; }

            .numbers-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(min(160px,100%), 1fr));
                gap: 15px;
                margin-top: 15px;
            }

            .number-item {
                background: rgba(255, 255, 255, 0.05);
                padding: 15px;
                border-radius: 10px;
                text-align: center;
                border: 1px solid rgba(124, 92, 255, 0.3);
            }

            .number-value {
                font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
                font-variant-numeric: tabular-nums;
                font-size: 32px;
                font-weight: bold;
                letter-spacing: -1px;
                color: #cdbcff;
                margin-bottom: 5px;
            }

            .number-name { font-weight: 600; margin-bottom: 4px; }
            .number-desc { opacity: 0.85; font-size: 13px; }

            .destiny-matrix-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; }

            .destiny-matrix-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; }
            .legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.9; }
            .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
            .dot-a { background:#9b5cff; }      /* День */
            .dot-b { background:#5cffb1; }      /* Месяц */
            .dot-c { background:#5cc8ff; }      /* Год */
            .dot-d { background:#ff5c5c; }      /* Предназначение */
            .dot-center{ background:#ffd84d; }  /* Центр */

            .pythagoras-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 10px;
                margin-top: 10px;
            }

            .py-cell {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.10);
                border-radius: 12px;
                padding: 12px;
                min-height: 78px;
                text-align: center;
                display: grid;
                align-content: center;
                gap: 6px;
            }

            .py-digit { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; }
            .py-fill { font-size: 13px; letter-spacing: 0.5px; opacity: 0.9; min-height: 18px; word-break: break-word; }

            .small-muted { font-size: 12px; opacity: 0.75; margin-top: 10px; }

            /* ===== Примеры: психоматрицы известных личностей ===== */
            .num-ex-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 6px; }
            @media (min-width: 560px) { .num-ex-grid { grid-template-columns: 1fr 1fr; } }
            .num-ex-card {
                display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
                padding: 12px 14px; border-radius: 14px; cursor: pointer;
                background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
                color: #eef0ff; transition: background .16s ease, border-color .16s ease, transform .16s ease;
            }
            .num-ex-card:hover { background: rgba(124,92,255,0.14); border-color: rgba(124,92,255,0.4); }
            .num-ex-card.is-active { background: rgba(124,92,255,0.20); border-color: rgba(124,92,255,0.6); }
            .num-ex-ava {
                flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
                display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #201247;
                background: linear-gradient(135deg, #c9b6ff, #7c5cff);
            }
            .num-ex-ava--lg { width: 52px; height: 52px; font-size: 22px; border-radius: 14px; }
            .num-ex-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
            .num-ex-name { font-weight: 700; font-size: 15px; }
            .num-ex-meta { font-size: 12px; opacity: 0.72; margin-top: 2px; }
            .num-ex-arrow { flex: 0 0 auto; opacity: 0.5; font-size: 13px; transition: transform .16s ease; }
            .num-ex-card.is-active .num-ex-arrow { transform: rotate(90deg); }

            .num-ex-panel {
                position: relative;
                margin-top: 12px; padding: 16px;
                background: rgba(124,92,255,0.06); border: 1px solid rgba(124,92,255,0.25);
                border-radius: 16px;
            }
            .num-ex-panel[hidden] { display: none; }
            .num-ex-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-right: 40px; }
            .num-ex-panel__title { flex: 1 1 auto; min-width: 0; }
            .num-ex-panel__name { font-weight: 800; font-size: 17px; }
            .num-ex-panel__meta { font-size: 12.5px; opacity: 0.72; margin-top: 2px; }
            /* Единый стандарт крестика закрытия: круг 34px, правый верхний угол 14/14 */
            .num-ex-close {
                position: absolute; top: 14px; right: 14px; z-index: 5; margin: 0;
                flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; padding: 0;
                display: grid; place-items: center; line-height: 1; cursor: pointer;
                border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: #eef0ff; font-size: 15px;
            }
            .num-ex-close:hover { background: rgba(255,255,255,0.16); color: #fff; }
            .num-ex-calc { font-size: 13px; opacity: 0.85; margin-bottom: 6px; }
            .num-ex-calc i { color: #b7a4ff; margin-right: 6px; }
            .num-ex-matrix { grid-template-columns: repeat(3, 1fr); max-width: 300px; }
            .num-ex-matrix .py-cell { min-height: 60px; padding: 8px; }
            .num-ex-matrix .py-digit { font-size: 16px; opacity: 0.5; }
            .num-ex-matrix .py-fill { font-size: 15px; font-weight: 700; opacity: 1; color: #d9ceff; }
            .num-ex-matrix .py-cell--empty .py-fill { font-size: 11px; font-weight: 400; opacity: 0.4; color: #a0a0c0; }
            .num-ex-zeros { font-size: 13px; opacity: 0.85; margin-top: 10px; }
            .num-ex-desc { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: #d5d3ea; }
            .num-ex-desc p { margin: 0 0 9px; }
            .num-ex-list { margin: 0 0 9px; padding-left: 18px; }
            .num-ex-list li { margin-bottom: 5px; }
            .num-ex-note { font-size: 12px; opacity: 0.7; margin-top: 12px; }
            .num-ex-note i { margin-right: 6px; }

            .numerology-info {
                background: rgba(255, 255, 255, 0.05);
                padding: 20px;
                border-radius: 15px;
                margin-top: 25px;
                border-left: 4px solid #5cffb1;
            }

            /* ======= Матрица судьбы (полная схема как на фото) ======= */
            .destiny-matrix-wheel{
                width: 100%;
                max-width: 860px;
                margin: 10px auto 0;
                background: rgba(255,255,255,0.02);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 18px;
                padding: 14px;
            }

            .destiny-matrix-svg{
                width: 100%;
                height: auto;
                display: block;
            }

            .dm-ring{ stroke: rgba(255,255,255,0.38); stroke-width: 3; fill: rgba(255,255,255,0.02); }
            .dm-ring2{ stroke: rgba(255,255,255,0.20); stroke-width: 2; fill: none; }

            .dm-tick{ stroke: rgba(255,255,255,0.45); stroke-width: 2; }
            .dm-tick-small{ stroke: rgba(255,255,255,0.25); stroke-width: 1.4; }

            .dm-line{ stroke: rgba(255,255,255,0.35); stroke-width: 2; fill: none; }
            .dm-line-strong{ stroke: rgba(255,255,255,0.55); stroke-width: 3; fill: none; }
            .dm-line-dashed{ stroke: rgba(255,255,255,0.35); stroke-width: 2; fill: none; stroke-dasharray: 6 6; }

            .dm-age{ fill: rgba(255,255,255,0.70); font-size: 14px; font-weight: 700; }
            .dm-age-small{ fill: rgba(255,255,255,0.55); font-size: 11px; font-weight: 600; }

            .dm-node-shadow{ filter: drop-shadow(0px 6px 12px rgba(0,0,0,0.35)); }

            .dm-node-text{ font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; fill: rgba(255,255,255,0.95); font-size: 34px; font-weight: 900; dominant-baseline: middle; text-anchor: middle; }
            .dm-node-text-mid{ font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; fill: rgba(255,255,255,0.95); font-size: 26px; font-weight: 900; dominant-baseline: middle; text-anchor: middle; }
            .dm-node-text-small{ font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; fill: rgba(20,20,20,0.88); font-size: 22px; font-weight: 900; dominant-baseline: middle; text-anchor: middle; }
            .dm-node-text-mini{ font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; fill: rgba(20,20,20,0.88); font-size: 16px; font-weight: 900; dominant-baseline: middle; text-anchor: middle; }

            .dm-label{ fill: rgba(255,255,255,0.70); font-size: 12px; font-weight: 700; text-anchor: middle; }

            .dm-node-a{ fill:#9b5cff; }      /* День */
            .dm-node-b{ fill:#5cffb1; }      /* Месяц */
            .dm-node-c{ fill:#5cc8ff; }      /* Год */
            .dm-node-d{ fill:#ff5c5c; }      /* Предназначение */
            .dm-node-center{ fill:#ffd84d; } /* Центр */

            .dm-node-white{ fill: rgba(255,255,255,0.96); }
            .dm-node-white-stroke{ stroke: rgba(0,0,0,0.14); stroke-width: 2; }

            .dm-anno-ru { fill: rgba(0,0,0,0.60); font-size: 12px; font-weight: 800; }


            
            /* ====== Расширенный контент раздела ====== */
            .num-hero {
                display: flex; gap: 18px; align-items: flex-start;
                background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(92,169,255,0.12));
                border: 1px solid rgba(124,92,255,0.25);
                border-radius: 18px; padding: 22px 24px; margin-bottom: 22px;
            }
            .num-hero-icon {
                flex: 0 0 56px; width: 56px; height: 56px;
                background: linear-gradient(135deg, #7c5cff, #5ca9ff);
                border-radius: 14px;
                display: flex; align-items: center; justify-content: center;
                font-size: 24px; color: #fff;
            }
            .num-hero-text h3 { margin: 0 0 8px; font-size: 22px; color: #e5e5f5; }
            .num-hero-text p { color: #cfcfe5; line-height: 1.55; font-size: 14px; margin: 0; }
            .num-hero-text strong { color: #ffd84d; font-weight: 700; }

            .num-facts {
                display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
                margin-bottom: 24px;
            }
            .num-fact {
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 12px; padding: 14px 16px; text-align: center;
            }
            .num-fact-num {
                display: block; font-size: 26px; font-weight: 800;
                font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
                font-variant-numeric: tabular-nums; letter-spacing: -1px;
                background: linear-gradient(180deg, #cdbcff, #7c5cff);
                -webkit-background-clip: text; background-clip: text; color: transparent;
            }
            .num-fact-lbl { color: #a0a0c0; font-size: 12px; }

            /* ===== Навигация по разделу: плитки со ссылками на блоки ===== */
            .num-nav { display: block; margin-top: 18px; }
            .num-nav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
            @media (max-width: 720px) { .num-nav-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
            @media (max-width: 430px) { .num-nav-grid { grid-template-columns: minmax(0, 1fr); } }

            .num-tab {
                position: relative;
                display: flex; align-items: center; justify-content: center; text-align: center;
                min-height: 56px; line-height: 1.25;
                background: rgba(255,255,255,0.06);
                -webkit-backdrop-filter: blur(16px) saturate(150%);
                backdrop-filter: blur(16px) saturate(150%);
                border: 1px solid rgba(255,255,255,0.14);
                color: #d7d1e8;
                padding: 12px 16px;
                border-radius: 14px;
                cursor: pointer;
                font-size: 14px; font-weight: 600;
                font-family: inherit;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
                transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
            }
            .num-tab:hover {
                color: #fff; background: rgba(124,92,255,0.22); border-color: rgba(124,92,255,0.45);
                transform: translateY(-1px);
            }
            .num-tab.active {
                color: #fff;
                background: linear-gradient(135deg, rgba(124,92,255,0.42), rgba(124,92,255,0.24));
                border-color: rgba(160,138,255,0.6);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 20px rgba(60,40,140,0.35);
            }
            .num-tab__crown { position: absolute; top: 6px; right: 8px; font-size: 10px; color: #ffd84d; }
            .num-tab--pro { padding-right: 22px; }

            /* Чтобы после прокрутки заголовок блока не прилипал к верхней кромке */
            .numerology-calculator, .num-section { scroll-margin-top: 16px; }

            .num-section {
                background: rgba(255,255,255,0.03);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 16px; padding: 22px 24px; margin-top: 22px;
            }
            .num-section-accent {
                background: linear-gradient(135deg, rgba(255,216,77,0.08), rgba(124,92,255,0.06));
                border-color: rgba(255,216,77,0.2);
            }
            .num-section h4 {
                font-size: 17px; color: #e5e5f5; display: flex; align-items: center; gap: 10px;
                margin: 0 0 12px;
            }
            .num-section h4 i { color: #7c5cff; }
            .num-section p { color: #cfcfe5; line-height: 1.55; font-size: 14px; }
            .num-section-lead { margin-bottom: 16px; color: #a0a0c0 !important; }

            /* ===== Журнал расчётов ===== */
            .num-jrn-limit {
                display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between;
                padding: 12px 14px; margin-bottom: 14px; border-radius: 12px;
                background: linear-gradient(135deg, rgba(255,216,122,.10), rgba(124,92,255,.10));
                border: 1px solid rgba(255,216,122,.28);
            }
            .num-jrn-limit__txt { font-size: 13px; line-height: 1.5; color: #e6e1f4 !important; flex: 1 1 240px; margin: 0; }
            .num-jrn-limit__txt b { color: #ffd77a; }
            .num-jrn-limit__txt i { color: #f0b84a; margin-right: 5px; }
            .num-jrn-unlock {
                width: auto; padding: 10px 16px; border: none; border-radius: 11px; cursor: pointer;
                font-size: 13.5px; font-weight: 800; white-space: nowrap; color: #241a05;
                background: linear-gradient(135deg, #ffd77a, #f0b84a);
            }
            .num-jrn-unlock:hover { filter: brightness(1.05); }
            .num-jrn-empty {
                text-align: center; padding: 26px 18px; color: #b7b2d0; font-size: 14px;
                background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.12); border-radius: 12px;
            }
            .num-jrn-empty i { color: #7c5cff; margin-right: 6px; }
            .num-jrn-list { display: flex; flex-direction: column; gap: 10px; }
            .num-jrn-card {
                border-radius: 13px; padding: 13px 15px;
                background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
            }
            .num-jrn-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
            .num-jrn-card__id { display: flex; align-items: center; gap: 11px; min-width: 0; }
            .num-jrn-card__ava {
                flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
                justify-content: center; font-weight: 800; font-size: 17px; color: #fff;
                background: linear-gradient(135deg, #7c5cff, #a77bff);
            }
            .num-jrn-card__name { font-size: 15px; font-weight: 800; color: #ece9f8; }
            .num-jrn-card__meta { font-size: 12px; color: #b7b2d0; margin-top: 2px; }
            .num-jrn-card__meta i { color: #f0b84a; margin-right: 3px; }
            .num-jrn-del {
                flex: none; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
                border: 1px solid rgba(255,120,120,.25); background: rgba(255,90,90,.08); color: #ff8b8b; font-size: 14px;
                display: grid; place-items: center; line-height: 1; padding: 0;
            }
            .num-jrn-del:hover { background: rgba(255,90,90,.16); }
            .num-jrn-hist { list-style: none; margin: 11px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.07); }
            .num-jrn-hist li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
            .num-jrn-hist__lbl { color: #d3cfe6; }
            .num-jrn-hist__dt { color: #8f8ab0; white-space: nowrap; }
            .num-jrn-actions { margin-top: 14px; text-align: center; }
            .num-jrn-clear {
                width: auto; padding: 10px 18px; border-radius: 11px; cursor: pointer; font-size: 13.5px; font-weight: 700;
                color: #ff9b9b; background: transparent; border: 1px solid rgba(255,120,120,.3);
            }
            .num-jrn-clear:hover { background: rgba(255,90,90,.1); }
            /* Поле имени в калькуляторе */
            #numerologyName {
                padding: 12px 14px; border-radius: 10px; font-size: 15px;
                border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #ece9f8;
            }
            #numerologyName::placeholder { color: #9a95b8; }
            #numerologyName:focus { outline: none; border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.18); }

            .num-meaning-grid {
                display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px,100%), 1fr));
                gap: 12px; margin-top: 12px;
            }
            .num-meaning {
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 12px; padding: 14px 16px;
            }
            .num-meaning-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
            .num-meaning-name { font-weight: 600; color: #e5e5f5; font-size: 14px; }
            .num-meaning p { color: #a0a0c0; font-size: 13px; line-height: 1.5; margin: 0; }
            .num-badge {
                width: 32px; height: 32px; border-radius: 50%;
                background: linear-gradient(135deg, #7c5cff, #5ca9ff);
                color: #fff; font-weight: 700; font-size: 16px;
                display: flex; align-items: center; justify-content: center;
                flex: 0 0 32px;
            }

            .num-master-grid {
                display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px,100%), 1fr));
                gap: 14px; margin-top: 12px;
            }
            .num-master {
                display: flex; gap: 14px; align-items: flex-start;
                background: rgba(255,216,77,0.05);
                border: 1px solid rgba(255,216,77,0.18);
                border-radius: 12px; padding: 14px 16px;
            }
            .num-master-num {
                flex: 0 0 54px; width: 54px; height: 54px;
                border-radius: 14px; background: linear-gradient(135deg, #ffd84d, #ff9b3a);
                color: #1a1b2e; font-size: 22px; font-weight: 800;
                display: flex; align-items: center; justify-content: center;
            }
            .num-master h5 { margin: 0 0 4px; color: #e5e5f5; font-size: 15px; }
            .num-master p { margin: 0; color: #a0a0c0; font-size: 13px; line-height: 1.5; }

            .num-list { padding-left: 22px; margin-top: 8px; }
            .num-list li { color: #cfcfe5; font-size: 14px; line-height: 1.7; }
            .num-list strong { color: #ffd84d; }
            .num-list-2col {
                columns: 2; column-gap: 24px;
                padding-left: 0; list-style: none;
            }
            .num-list-2col li {
                padding-left: 10px; position: relative;
                break-inside: avoid;
            }
            .num-list-2col li::before {
                content: ""; position: absolute; left: 0; top: 12px;
                width: 4px; height: 4px; border-radius: 50%; background: #7c5cff;
            }
            .num-note {
                margin-top: 12px; padding: 10px 14px;
                background: rgba(124,92,255,0.08);
                border-left: 3px solid #7c5cff;
                border-radius: 8px;
                font-size: 13px; color: #cfcfe5 !important;
            }

            .num-faq {
                background: rgba(255,255,255,0.03);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 10px; padding: 12px 16px;
                margin-top: 10px; cursor: pointer;
            }
            .num-faq summary {
                font-weight: 600; color: #e5e5f5; font-size: 14px;
                list-style: none; outline: none;
                display: flex; align-items: center; gap: 10px;
            }
            .num-faq summary::before {
                content: "+"; color: #7c5cff; font-size: 18px; font-weight: 700;
                display: inline-block; width: 16px; transition: transform 0.2s;
            }
            .num-faq[open] summary::before { transform: rotate(45deg); }
            .num-faq p {
                margin-top: 10px; color: #a0a0c0; font-size: 13px; line-height: 1.6;
            }

            @media (max-width: 600px) {
                .num-hero { flex-direction: column; gap: 12px; padding: 18px; }
                .num-facts { grid-template-columns: 1fr; }
                .num-list-2col { columns: 1; }

                /* Вложенные отступы (content + calculator + results) съедали 130px из 375:
                   полезная ширина падала до 203px, и графики приходилось листать вбок. */
                .numerology-content { padding: 10px; }
                .numerology-calculator { padding: 12px; margin: 16px 0; }
                .results-container { padding: 12px; }
                .pythagoras-grid { gap: 7px; }
                .py-cell { padding: 8px 4px; }
            }

            .dm-icon-money{ fill: #39c26b; font-size: 26px; font-weight: 900; }
            .dm-icon-heart{ fill: #ff4d6d; font-size: 24px; font-weight: 900; }

            /* Расшифровка матрицы — текстовый вывод */
            .destiny-matrix-readout {
                margin-top: 24px;
                background: rgba(255,255,255,0.03);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 14px;
                padding: 18px;
            }
            .dm-readout-title {
                margin: 0 0 14px 0;
                font-size: 17px;
                color: #e5e5f5;
                font-weight: 700;
            }
            .dm-readout-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(min(220px,100%), 1fr));
                gap: 12px;
            }
            .dm-readout-item {
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.06);
                border-radius: 10px;
                padding: 12px 14px;
                line-height: 1.4;
            }
            .dm-readout-head {
                display: flex;
                align-items: baseline;
                gap: 8px;
                margin-bottom: 6px;
            }
            .dm-readout-code {
                font-size: 11px;
                font-weight: 700;
                color: #8a8ab0;
                background: rgba(124, 92, 255, 0.15);
                padding: 2px 7px;
                border-radius: 6px;
                letter-spacing: 0.5px;
            }
            .dm-readout-num {
                font-size: 22px;
                font-weight: 800;
                background: linear-gradient(90deg, #7c5cff, #5ca9ff);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent;
            }
            .dm-readout-name {
                font-size: 13px;
                font-weight: 600;
                color: #cfcfe5;
                margin-bottom: 2px;
            }
            .dm-readout-arc {
                font-size: 12px;
                color: #ffd84d;
                margin-bottom: 4px;
                font-style: italic;
            }
            .dm-readout-meaning {
                font-size: 12px;
                color: #a0a0c0;
            }

            /* ===== Матрица судьбы (октаграмма) ===== */
            .fate-matrix-layout {
                display: grid;
                grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
                gap: 20px;
                align-items: start;
                margin-top: 14px;
            }
            @media (max-width: 900px) { .fate-matrix-layout { grid-template-columns: 1fr; } }
            .fate-matrix-chart {
                min-width: 0;
                background: #fff;
                border: 1px solid rgba(255,255,255,0.12);
                border-radius: 12px;
                padding: 8px;
            }
            .fate-matrix-side { min-width: 0; }
            .fate-matrix-svg { width: 100%; height: auto; display: block; }
            .fate-matrix-subtitle { font-size: 13px; color: #c8c8e0; margin-bottom: 10px; }

            /* ===== Кнопка «Раздел для подробной информации» + раскрываемая панель ===== */
            .fm-detail-toggle {
                width: 100%; display: flex; align-items: center; gap: 10px;
                background: linear-gradient(135deg, rgba(255,216,77,0.16), rgba(92,141,255,0.14));
                border: 1px solid rgba(255,216,77,0.34);
                color: #ffe08a; font-size: 14px; font-weight: 600;
                padding: 12px 14px; border-radius: 12px; cursor: pointer;
                text-align: left; margin-bottom: 12px; transition: all .18s ease;
                -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            }
            .fm-detail-toggle:hover {
                background: linear-gradient(135deg, rgba(255,216,77,0.24), rgba(92,141,255,0.2));
                border-color: rgba(255,216,77,0.5);
            }
            .fm-detail-toggle__ic {
                display: inline-flex; width: 26px; height: 26px; flex: 0 0 auto;
                align-items: center; justify-content: center; border-radius: 8px;
                background: rgba(255,216,77,0.2); color: #ffd84d;
            }
            .fm-detail-toggle__label { flex: 1 1 auto; min-width: 0; }
            .fm-detail-toggle__chev { flex: 0 0 auto; color: #ffd07a; font-size: 12px; transition: transform .2s ease; }
            .fm-detail-toggle.open .fm-detail-toggle__chev { transform: rotate(180deg); }
            .fm-detail-panel[hidden] { display: none; }
            /* Атрибут hidden должен побеждать display из CSS (кнопка/сетка/тизер) */
            .fm-detail-toggle[hidden],
            .fate-matrix-buttons[hidden],
            .fm-free-teaser[hidden] { display: none !important; }
            .fm-detail-panel { animation: fmPanelIn .22s ease; }
            @keyframes fmPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

            /* ===== Тизер бесплатной версии ===== */
            .fm-free-teaser {
                background: linear-gradient(160deg, rgba(255,216,77,0.08), rgba(92,141,255,0.06));
                border: 1px solid rgba(255,216,77,0.28);
                border-radius: 12px; padding: 16px 16px 14px;
            }
            .fm-free-teaser[hidden] { display: none; }
            .fm-teaser-title { font-size: 14px; font-weight: 700; color: #ffd84d; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
            .fm-teaser-lead { font-size: 13px; line-height: 1.55; color: #d8d8ea; margin: 0 0 10px; }
            .fm-teaser-lead b { color: #fff; }
            .fm-teaser-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
            .fm-teaser-list li { font-size: 12.8px; line-height: 1.4; color: #c3c3d8; padding-left: 18px; position: relative; }
            .fm-teaser-list li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,216,77,0.75); }
            .fm-teaser-list li b { color: #ffe08a; font-weight: 600; }
            .fm-teaser-cta { font-size: 13px; color: #e8e8f4; margin: 0 0 12px; font-weight: 600; }
            .fm-teaser-btn {
                width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                background: linear-gradient(135deg, #f0b84a, #e08a4a);
                color: #3a2600; border: none; border-radius: 10px;
                padding: 12px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
                transition: filter .15s ease, transform .15s ease;
            }
            .fm-teaser-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
            .fate-matrix-buttons {
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                gap: 8px;
                margin-bottom: 14px;
            }
            .fm-btn {
                min-width: 0;
                overflow-wrap: break-word;
                hyphens: auto;
                background: rgba(255,255,255,0.06);
                color: #ffd84d;
                border: 1px solid rgba(255,216,77,0.3);
                padding: 10px 12px;
                border-radius: 8px;
                cursor: pointer;
                font-size: 13px;
                text-align: center;
                transition: all .15s ease;
            }
            .fm-btn:hover { background: rgba(255,216,77,0.14); }
            .fm-btn.active { background: linear-gradient(90deg, #5c8dff, #5cc8ff); color: #fff; border-color: transparent; }
            .fate-matrix-desc {
                background: rgba(255,255,255,0.04);
                border-radius: 10px;
                padding: 14px 16px;
                max-height: 560px;
                overflow-y: auto;
                font-size: 13px;
                line-height: 1.5;
                color: #d8d8ea;
            }
            .fm-arc-section-title { font-size: 16px; font-weight: 600; color: #ffd84d; margin-bottom: 8px; }
            .fm-arc-intro { color: #a0a0c0; font-style: italic; margin: 0 0 12px; }
            .fm-arc-block {
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 8px;
                padding: 10px 12px;
                margin-bottom: 10px;
            }
            .fm-arc-role { font-size: 12px; color: #9b9bbd; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
            .fm-arc-title { font-weight: 600; color: #fff; margin-bottom: 6px; }
            .fm-arc-text { color: #cfcfe2; }

            /* ===== Нумерологические графики ===== */
            .num-graph-host { overflow-x: auto; background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 0; margin: 8px 0; }
            .num-graph-svg { width: 100%; min-width: 720px; height: auto; display: block; }
            /* На телефоне 720px внутри ~295px окна означало, что график листают вбок
               почти целиком, а подписи в 9–12 единиц viewBox сжимались до 3–4 пикселей.
               Сужаем холст и увеличиваем шрифт подписей — читаемо без сильной прокрутки. */
            @media (max-width: 600px) {
                .num-graph-svg { min-width: 460px; }
                .num-graph-svg text { font-size: 24px; }
                .num-graph-host { border-radius: 12px; }
            }
            .num-py-legend { margin-top: 12px; }
            .num-py-line { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #d0d0e2; }

            /* ===== Совместимость в браке ===== */
            .marriage-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
            .marriage-form label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #c8c8e0; }
            .marriage-form input { padding: 7px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; }
            .marriage-form button { padding: 8px 16px; border: none; border-radius: 8px; background: linear-gradient(90deg, #5c8dff, #5cc8ff); color: #fff; cursor: pointer; }
            .marriage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
            @media (max-width: 720px) { .marriage-grid { grid-template-columns: 1fr; } }
            .psm-box { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px; text-align: center; }
            .psm-title { font-size: 13px; color: #c8c8e0; margin-bottom: 8px; }
            .psm-table { border-collapse: collapse; margin: 8px auto; }
            .psm-table td { width: 56px; height: 48px; border: 1px solid rgba(255,255,255,0.18); text-align: center; font-size: 18px; font-weight: 600; }
            .psm-table td.filled { background: rgba(92,141,255,0.18); color: #fff; }
            .psm-table td.empty { background: transparent; color: #555; }
            .psm-stats { font-size: 13px; color: #b8b8d0; margin-top: 6px; }
            .marriage-result { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 14px 18px; margin-top: 16px; }
            .mr-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; color: #d0d0e2; }
            .mr-row b { color: #fff; }
            .mr-main { font-size: 16px; }
            .mr-main b { color: #ffd84d; }

            /* ===== Краткое описание психоматрицы (бесплатно) ===== */
            .pyth-brief {
                margin-top: 14px;
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 12px;
                padding: 14px 16px;
            }
            .pyth-brief-title {
                display: flex; align-items: center; gap: 8px;
                font-size: 14px; font-weight: 700; color: #ffd84d; margin-bottom: 10px;
            }
            .pyth-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
            .pyth-brief-list li { font-size: 13px; line-height: 1.55; opacity: .92; }
            .pyth-brief-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #a0a0c0; }

            /* ===== Описание психоматрицы ===== */
            .pyth-desc-btn {
                margin-top: 14px;
                display: inline-flex; align-items: center; gap: 8px;
                background: rgba(255,216,77,0.12);
                color: #ffd84d;
                border: 1px solid rgba(255,216,77,0.4);
                padding: 10px 18px; border-radius: 9px;
                cursor: pointer; font-size: 14px; font-weight: 500;
                transition: all .15s ease;
            }
            .pyth-desc-btn:hover { background: rgba(255,216,77,0.2); }
            .pyth-desc {
                margin-top: 14px;
                background: rgba(255,255,255,0.04);
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 12px;
                padding: 14px 16px;
                display: block;
            }
            .pyth-desc.hidden { display: none; }
            .pyth-desc-note { color: #a0a0c0; font-style: italic; margin: 0; }

            .psy-cell {
                background: rgba(255,255,255,0.03);
                border: 1px solid rgba(255,255,255,0.08);
                border-radius: 10px;
                overflow: hidden;
                margin-bottom: 10px;
            }
            .psy-cell:last-child { margin-bottom: 0; }
            .psy-cell-head {
                display: flex; align-items: center; gap: 10px;
                padding: 12px 14px;
                background: rgba(92,141,255,0.12);
                cursor: pointer;
                user-select: none;
                transition: background .15s ease;
            }
            .psy-cell-head:hover { background: rgba(92,141,255,0.2); }
            .psy-cell.open .psy-cell-head { border-bottom: 1px solid rgba(255,255,255,0.08); }
            .psy-cell-badge {
                background: #5c8dff; color: #fff;
                font-weight: 700; font-size: 14px;
                padding: 3px 10px; border-radius: 8px;
                min-width: 34px; text-align: center; letter-spacing: 1px;
            }
            .psy-cell-title { font-size: 15px; font-weight: 600; color: #fff; }
            .psy-cell-count {
                margin-left: auto;
                background: rgba(255,255,255,0.08); color: #b9c0d4;
                font-size: 11.5px; padding: 2px 9px; border-radius: 12px; white-space: nowrap;
            }
            .psy-cell-chevron { color: #8a93a8; font-size: 12px; transition: transform .2s ease; }
            .psy-cell.open .psy-cell-chevron { transform: rotate(180deg); }
            .psy-cell-body { padding: 14px 16px; display: none; }
            .psy-cell.open .psy-cell-body { display: block; }
            .psy-cell-subhead {
                font-size: 13px; font-weight: 700; color: #ffd84d;
                text-transform: uppercase; letter-spacing: .3px;
                margin: 12px 0 6px;
            }
            .psy-cell-subhead:first-child { margin-top: 0; }
            .psy-cell-p { font-size: 13.5px; color: #d4d4e4; line-height: 1.55; margin: 0 0 8px; }

            /* ============================================================
               ЧИТАБЕЛЬНОСТЬ ПОВЕРХ ФОНОВОГО ИЗОБРАЖЕНИЯ (тёмная тема).
               Панели переведены на плотное тёмное «стекло» с блюром — текст
               читается поверх пёстрой картинки. Специфичность правил низкая
               (простые классы), поэтому светлая тема (html[data-theme="light"] .x)
               остаётся нетронутой — её правила специфичнее.
               ============================================================ */
            .num-fact, .num-section, .num-meaning, .numerology-calculator,
            .results-container, .number-item, .py-cell, .numerology-info,
            .destiny-matrix-wheel, .destiny-matrix-readout, .dm-readout-item,
            .num-faq, .psy-cell {
                background: rgba(14,10,28,0.72);
                -webkit-backdrop-filter: blur(13px) saturate(130%);
                backdrop-filter: blur(13px) saturate(130%);
                border-color: rgba(255,255,255,0.12);
            }
            .num-hero {
                background: linear-gradient(135deg, rgba(62,46,124,0.62), rgba(46,60,116,0.52));
                -webkit-backdrop-filter: blur(13px) saturate(130%);
                backdrop-filter: blur(13px) saturate(130%);
                border-color: rgba(150,120,255,0.38);
            }
            .num-section-accent {
                background: linear-gradient(135deg, rgba(74,58,22,0.55), rgba(52,42,92,0.55));
                border-color: rgba(255,216,77,0.32);
            }
            .num-master {
                background: rgba(44,33,60,0.66);
                -webkit-backdrop-filter: blur(13px) saturate(130%);
                backdrop-filter: blur(13px) saturate(130%);
                border-color: rgba(255,216,77,0.28);
            }
            .destiny-matrix-wheel { background: rgba(12,9,24,0.62); }
            /* текст прямо на фоне — с мягкой тенью для контраста */
            .num-hero-text h3, .num-hero-text p { text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
            /* приглушённый текст чуть светлее — чтобы уверенно читался поверх фона */
            .num-fact-lbl, .num-meaning p, .num-master p, .num-faq p,
            .dm-readout-meaning, .number-desc { color: #bcb8d4; }
            .num-section-lead { color: #bcb8d4 !important; }

            /* ===== Число имени ===== */
            .num-name-methods { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
            .num-name-method {
                flex: 1 1 auto; min-width: 180px; width: auto;
                display: inline-flex; align-items: center; justify-content: center; gap: 8px;
                padding: 11px 14px; border-radius: 12px; cursor: pointer;
                font-size: 13.5px; font-weight: 600; color: #cfcfe5;
                background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
                transition: background .18s ease, color .18s ease, border-color .18s ease;
            }
            .num-name-method i { opacity: .8; }
            .num-name-method:hover { background: rgba(124,92,255,0.16); color: #fff; }
            .num-name-method.is-active {
                color: #fff; border-color: transparent;
                background: linear-gradient(135deg, #7c5cff, #5ca9ff);
                box-shadow: 0 8px 20px rgba(124,92,255,0.30);
            }
            .num-name-form { display: flex; gap: 12px; flex-wrap: wrap; }
            .num-name-form input {
                flex: 1 1 220px; min-width: 0; padding: 13px 15px; border-radius: 12px; font-size: 15px;
                background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.14); color: #eef; outline: none;
            }
            .num-name-form input:focus { border-color: rgba(124,92,255,0.65); }
            .num-name-form button {
                width: auto; flex: 0 0 auto; padding: 13px 26px; border: none; border-radius: 12px;
                font-size: 15px; font-weight: 700; cursor: pointer; color: #2a1e05;
                background: linear-gradient(135deg, #ffe9b0, rgb(240,184,74) 45%, rgb(224,138,74));
                box-shadow: 0 10px 24px rgba(240,184,74,.30);
            }
            .num-name-form button:hover { filter: brightness(1.05); }

            .num-name-result { margin-top: 16px; }
            .num-name-empty {
                padding: 12px 14px; border-radius: 12px; font-size: 13.5px; color: #cfcfe5;
                background: rgba(124,92,255,0.10); border: 1px solid rgba(124,92,255,0.22);
            }
            .num-name-empty i { color: #a58cff; margin-right: 7px; }
            .num-name-headline { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
            .num-name-badge {
                flex: 0 0 auto; width: 68px; height: 68px; border-radius: 18px;
                display: flex; align-items: center; justify-content: center;
                font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
                font-size: 34px; font-weight: 800; color: #2a1e05;
                background: linear-gradient(135deg, #ffd84d, #ff9b3a);
                box-shadow: 0 10px 26px rgba(255,155,58,0.35);
            }
            .num-name-cap { font-size: 14px; color: #bcb8d4; line-height: 1.45; }
            .num-name-cap b { color: #fff; font-size: 17px; }

            .num-name-breakdown {
                background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08);
                border-radius: 14px; padding: 14px; margin-bottom: 14px;
            }
            .num-name-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
            .num-name-chip {
                display: inline-flex; align-items: baseline; gap: 5px;
                padding: 6px 10px; border-radius: 10px;
                background: rgba(124,92,255,0.14); border: 1px solid rgba(124,92,255,0.28);
            }
            .num-name-chip b { font-size: 15px; font-weight: 700; color: #fff; }
            .num-name-chip i {
                font-style: normal; font-size: 12px; font-weight: 700; color: #ffd84d;
                font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
            }
            .num-name-calc {
                font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
                font-variant-numeric: tabular-nums; font-size: 15px; color: #e5e5f5; font-weight: 600;
            }

            .num-name-interp {
                background: linear-gradient(135deg, rgba(255,216,77,0.08), rgba(124,92,255,0.08));
                border: 1px solid rgba(255,216,77,0.22); border-radius: 14px; padding: 16px 18px;
            }
            .num-name-interp-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; }
            .num-name-interp-key { font-size: 18px; font-weight: 800; color: #ffe08a; margin-bottom: 8px; }
            .num-name-zodiac {
                font-size: 12px; font-weight: 700; color: #ffd84d; vertical-align: middle;
                background: rgba(255,216,77,0.14); border: 1px solid rgba(255,216,77,0.3);
                padding: 3px 9px; border-radius: 999px; margin-left: 6px; white-space: nowrap;
            }
            .num-name-interp p { color: #d7d4ea; font-size: 14px; line-height: 1.55; margin: 0 0 8px; }
            .num-name-attr { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; margin-top: 8px; color: #cfcfe5; }
            .num-name-attr-lbl { flex: 0 0 118px; color: #a58cff; font-weight: 700; }
            .num-name-note { color: #9a97b4 !important; font-size: 12px !important; font-style: italic; margin: 10px 0 0 !important; }

            .num-name-how { margin-top: 14px; }
            .num-name-how-body { margin-top: 10px; }
            .num-name-how-body p { color: #cfcfe5; font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
            .num-name-steps { margin: 0 0 12px; padding-left: 20px; }
            .num-name-steps li { color: #cfcfe5; font-size: 13.5px; line-height: 1.7; }
            .num-name-example { color: #d7d4ea !important; }
            .num-name-example b { color: #ffd84d; }
            .num-name-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
            @media (max-width: 560px) { .num-name-tables { grid-template-columns: 1fr; } }
            .num-name-table { background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 12px 14px; }
            .num-name-table-h { font-weight: 700; color: #cdbcff; font-size: 13px; margin-bottom: 8px; }
            .num-name-table ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
            .num-name-table li { font-size: 12.5px; color: #bcb8d4; }
            .num-name-table li b { color: #ffd84d; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
        


            .lg-out:empty { display: none; }
            .nh-form--pair, .nh-form--gold { align-items: flex-end; flex-wrap: wrap; }
            /* Даты растягиваются, кнопка остаётся компактной и стоит в один ряд с полями.
               width:auto перебивает глобальное button{width:100%} из style.css. */
            .nh-form--pair .lg-lbl, .nh-form--gold .lg-lbl { flex: 0 1 150px; }
            .nh-form--pair button, .nh-form--gold button { flex: 0 0 auto; width: auto; align-self: flex-end; margin-top: 0; }
            /* «Схема здоровья»: на телефоне дата и время во всю ширину (каждое своей строкой),
               на широком экране — в ряд с кнопкой (01.10.2026) */
            .nh-form--health .lg-lbl { flex: 1 1 170px; }
            /* Телефон: поля с подписями во всю ширину, кнопка — отдельной строкой под ними,
               а не вплотную к узкому полю (01.10.2026) */
            @media (max-width: 560px) {
                .nh-form--pair .lg-lbl, .nh-form--gold .lg-lbl { flex: 1 1 100%; }
            }
            .lg-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #b6b2d0; }
            .lg-lbl input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.28); color: #efeaff; font-size: 14px; color-scheme: dark; }
            /* .lg-lbl — колоночный флекс, и глобальное правило .nh-form input с
               flex: 1 1 130px толковало 130px как ОСНОВУ ПО ВЕРТИКАЛИ: поля даты
               вырастали в квадраты высотой 130px. Возвращаем высоту по содержимому. */
            .lg-lbl input { flex: 0 0 auto; height: 42px; }   /* дата и время — одной высоты */
            .lg-lbl input:focus { outline: none; border-color: rgba(124,92,255,.65); }
            .lg-panel[hidden] { display: none !important; }

            .lg-card { border-radius: 16px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); padding: 15px 17px; margin-top: 14px; }
            .lg-card-h { font-weight: 800; font-size: 14.5px; color: #f0d69a; display: flex; align-items: center; gap: 9px; margin: 0 0 8px; }
            .lg-card-h i { color: #f0b84a; }
            .lg-card p { font-size: 13.5px; line-height: 1.6; color: rgba(232,229,246,.9); margin: 0 0 8px; }
            .lg-card p:last-child { margin-bottom: 0; }
            .lg-lead { font-size: 13px; color: rgba(232,229,246,.8); margin: 2px 0 12px; }
            .lg-hint { font-size: 12px; color: rgba(210,206,232,.6); margin-top: 8px; }

            /* Психоматрица с подсветкой диагоналей */
            .lg-mx-wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
            .lg-mx { display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 6px; }
            .lg-mx-cell { position: relative; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); display: flex; flex-direction: column; align-items: center; justify-content: center; }
            .lg-mx-cell .d { position: absolute; top: 3px; left: 6px; font-size: 10px; color: rgba(255,255,255,.4); }
            .lg-mx-cell .v { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 1px; }
            .lg-mx-cell.is-plot { background: rgba(255,120,90,.16); border-color: rgba(255,120,90,.45); }
            .lg-mx-cell.is-spirit { background: rgba(110,150,255,.16); border-color: rgba(110,150,255,.45); }
            .lg-mx-cell.is-both { background: linear-gradient(135deg, rgba(110,150,255,.22) 0 50%, rgba(255,120,90,.22) 50% 100%); border-color: rgba(200,160,255,.5); }
            .lg-diag-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
            .lg-diag-legend span { display: inline-flex; align-items: center; gap: 7px; color: #cfcbe6; }
            .lg-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
            .lg-dot.plot { background: rgba(255,120,90,.75); }
            .lg-dot.spirit { background: rgba(110,150,255,.8); }

            /* Шкала темперамента */
            .lg-scale { display: flex; gap: 4px; margin: 12px 0 4px; }
            .lg-seg { flex: 1; text-align: center; padding: 8px 2px; border-radius: 8px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.45); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
            .lg-seg.on { color: #fff; background: linear-gradient(180deg, rgba(255,140,90,.35), rgba(255,90,120,.28)); border-color: rgba(255,140,110,.6); box-shadow: 0 0 14px rgba(255,120,90,.25); }
            .lg-seg small { display: block; font-weight: 500; font-size: 9px; opacity: .8; }
            .lg-seg { cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
            .lg-seg:hover { background: rgba(255,255,255,.09); border-color: rgba(255,140,110,.4); }
            .lg-seg:focus-visible { outline: 2px solid rgba(255,140,110,.7); outline-offset: 2px; }
            .lg-scale-hint { font-size: 11.5px; color: rgba(210,206,232,.62); margin: 6px 0 4px; }
            .lg-scale-hint i, .lg-field-hint i { color: #f0b84a; margin-right: 5px; }
            .lg-field-hint { font-size: 12px; color: rgba(210,206,232,.68); margin: 2px 0 4px; }
            .lg-temp-detail { margin-top: 6px; }
            .lg-temp-level-h { font-size: 13.5px; font-weight: 800; color: #f0d69a; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
            .lg-temp-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,140,90,.35), rgba(255,90,120,.28)); border: 1px solid rgba(255,140,110,.6); color: #fff; }
            .lg-temp-badge.other { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: #cfcbe6; }

            /* Весы П/Д */
            .lg-balance { margin: 10px 0; }
            .lg-balance-track { position: relative; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(110,150,255,.6), rgba(180,160,220,.5), rgba(255,120,90,.6)); }
            .lg-balance-mark { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #b18cff; transform: translate(-50%, -50%); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
            .lg-balance-ends { display: flex; justify-content: space-between; font-size: 11px; color: rgba(210,206,232,.7); margin-top: 6px; }

            /* Метрики-плитки */
            .lg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
            .lg-metric { border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 11px 13px; }
            .lg-metric .k { font-size: 11.5px; color: rgba(210,206,232,.7); }
            .lg-metric .val { font-size: 20px; font-weight: 800; color: #fff; margin-top: 3px; }
            .lg-metric .val small { font-size: 12px; font-weight: 600; color: #b6b2d0; }
            .lg-metric.accent .val { color: #ffd77a; }
            .lg-metrics--wide { grid-template-columns: repeat(auto-fit, minmax(min(210px,100%), 1fr)); }
            .lg-metric-lbl { font-size: 12px; font-weight: 700; color: #d9c8ff; margin-top: 4px; }
            .lg-metric-desc { font-size: 12.5px; line-height: 1.5; color: rgba(224,220,244,.82); margin: 7px 0 0; }

            /* Портрет идеального партнёра */
            .lg-partner-card { display: flex; gap: 14px; align-items: flex-start; border-radius: 16px; padding: 15px 17px; background: linear-gradient(135deg, rgba(120,90,220,.14), rgba(90,140,255,.1)); border: 1px solid rgba(160,140,240,.28); margin-top: 12px; }
            .lg-partner-ava { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(255,255,255,.1); color: #d9c8ff; }
            .lg-reco { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
            .lg-reco span { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e6def7; }
            .lg-reco b { color: #ffd77a; }

            /* Параболы — сетка мини-графиков */
            .lg-par-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(168px,100%), 1fr)); gap: 12px; margin-top: 12px; }
            .lg-par-item { position: relative; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); padding: 26px 10px 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
            .lg-par-item:hover { border-color: rgba(150,180,255,.45); transform: translateY(-2px); }
            .lg-par-item.on { border-color: rgba(180,140,255,.7); background: rgba(150,120,255,.1); }
            .lg-par-title { font-size: 12px; font-weight: 700; color: #d8d4ee; display: block; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
            .lg-par-title > span:first-child { display: inline; overflow-wrap: normal; word-break: keep-all; }
            .lg-par-title > span:first-child i { margin-right: 4px; font-size: 0.95em; }
            .lg-par-tag { position: absolute; top: 7px; right: 8px; font-size: 10px; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
            .lg-par-tag.norm { background: rgba(90,200,140,.18); color: #8fe6b4; }
            .lg-par-tag.low { background: rgba(255,180,90,.16); color: #ffcf8a; }
            .lg-par-tag.over { background: rgba(255,110,110,.16); color: #ff9d9d; }
            .lg-par-svg { width: 100%; height: auto; display: block; }
            .lg-par-cap { text-align: center; font-size: 10.5px; color: rgba(210,206,232,.68); margin-top: 5px; }
            .lg-par-item:focus-visible { outline: 2px solid rgba(180,140,255,.7); outline-offset: 2px; }
            .lg-par-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 4px; }
            .lg-par-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(210,206,232,.72); }
            .lg-par-key { width: 22px; height: 12px; border-radius: 4px 4px 8px 8px; display: inline-block; flex: none; }
            .lg-par-key.low { background: linear-gradient(180deg, rgba(255,180,90,.5), rgba(255,180,90,.12)); }
            .lg-par-key.norm { background: linear-gradient(180deg, rgba(90,200,140,.6), rgba(90,200,140,.14)); }
            .lg-par-key.over { background: linear-gradient(180deg, rgba(255,110,110,.65), rgba(255,110,110,.16)); }
            .lg-par-about { font-style: italic; color: rgba(224,220,244,.82) !important; }
            .lg-par-detail-slot:empty { display: none; }

            /* Пара — две матрицы + таймлайн кризисов */
            .lg-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
            @media (max-width: 640px) { .lg-pair-grid { grid-template-columns: 1fr; } }
            .lg-pair-col { border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.1); padding: 12px; }
            .lg-pair-col-h { font-size: 12.5px; font-weight: 700; color: #cbb8ff; text-align: center; margin-bottom: 10px; }
            .lg-pair-col .lg-mx { margin: 0 auto; }
            .lg-verdict { text-align: center; border-radius: 16px; padding: 16px; margin-top: 14px; background: linear-gradient(135deg, rgba(90,140,255,.14), rgba(180,120,255,.12)); border: 1px solid rgba(150,140,240,.3); }
            .lg-verdict .big { font-size: 34px; font-weight: 900; color: #ffe08a; line-height: 1.1; }
            .lg-verdict .cap { font-size: 12.5px; color: rgba(230,226,246,.85); margin-top: 4px; }
            .lg-timeline { margin: 14px 0 4px; }
            .lg-compat-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); }
            .lg-compat-row:first-child { border-top: none; }
            .lg-compat-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
            .lg-compat-ic.ok { background: rgba(90,200,140,.16); color: #8fe6b4; }
            .lg-compat-ic.warn { background: rgba(255,180,90,.16); color: #ffcf8a; }
            .lg-compat-ic.bad { background: rgba(255,110,110,.16); color: #ff9d9d; }
            .lg-compat-txt { font-size: 13px; color: rgba(230,226,246,.9); line-height: 1.5; }
            .lg-compat-txt b { color: #fff; }
            .lg-compat-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 2px 0 6px; }
            .lg-compat-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(210,206,232,.72); }
            .lg-compat-legend .lg-compat-ic { width: 20px; height: 20px; font-size: 10px; }
            .lg-crisis-pt:hover { opacity: .82; }
            .lg-crisis-pt.sel > circle:last-of-type { stroke: #fff; stroke-width: 2.2; }
            .lg-crisis-detail-slot:empty { display: none; }
            .lg-crisis-detail-slot { margin-top: 8px; }

            /* SVG-контейнеры графических методов */
            .lg-graph { width: 100%; height: auto; display: block; border-radius: 14px; background: rgba(10,12,30,.35); border: 1px solid rgba(255,255,255,.08); margin-top: 12px; }
            .lg-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px,100%), 1fr)); gap: 10px; margin-top: 12px; }
            .lg-node { border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 11px 13px; }
            .lg-node .age { font-size: 18px; font-weight: 800; color: #ffd77a; }
            .lg-node .desc { font-size: 12.5px; color: rgba(224,220,244,.85); margin-top: 3px; line-height: 1.5; }

            /* Золотое сечение — точки, глоссарий, примеры */
            .lg-gold-pt { transition: opacity .15s; }
            .lg-gold-pt:hover { opacity: .8; }
            .lg-gold-pt.sel > circle:last-of-type { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 6px rgba(240,184,74,.8)); }
            .lg-gold-detail-slot:empty { display: none; }
            .lg-gold-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
            @media (max-width: 560px) { .lg-gold-glossary { grid-template-columns: 1fr; } }
            .lg-gloss { border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); padding: 12px 14px; }
            .lg-gloss-h { font-size: 13px; font-weight: 800; color: #f0d69a; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
            .lg-gloss-h i { color: #f0b84a; }
            .lg-gloss p { font-size: 12.5px; line-height: 1.55; color: rgba(228,224,246,.88); margin: 0 0 6px; }
            .lg-gloss p:last-child { margin-bottom: 0; }
            .lg-gold-howto { margin-top: 12px; background: linear-gradient(135deg, rgba(240,184,74,.08), rgba(120,90,220,.08)); border-color: rgba(200,170,110,.3); }