/* ═══════════════════════════════════════════════════════════════════════════
   Личный кабинет Astrobot — стили каркаса приложения.
   Перенесены из prototype/index.html (BS-30), адаптированы под PHP-рендер и
   боевое колесо (wheel.js). Токены — в tokens.css (подключается ниже), чтобы
   не дублировать :root (prototype/README.md §2).
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('/public/assets/tokens.css');
@import url('/public/assets/chart-views.css');

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    background: var(--bg-app);
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 126, 216, .10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201, 168, 255, .06), transparent 60%);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow: hidden; /* прокрутка живёт в .main-scroll */
}
.glyph, .sign-glyph, .aspect-glyph { font-family: 'AstroGlyphs', sans-serif; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2a2a4a; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #3a3a5e; background-clip: padding-box; }

/* ─── Каркас: sidebar | main | ai-panel ─── */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; width: 100vw; }

/* Верхняя панель */
.topbar {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 1rem;
    padding: 0 1.1rem;
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border);
    position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.brand .mark { font-size: 1.05rem; color: var(--accent-2); letter-spacing: .15em; }
.brand .name { font-size: 1.05rem; font-weight: 300; letter-spacing: .18em; color: var(--text); }
.brand .tag { font-size: .62rem; color: var(--text-dim); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--border); padding: .08rem .4rem; border-radius: 6px; }
.hamburger { display: none; font-size: 1.4rem; color: var(--text-dim); line-height: 1; }
.spacer { flex: 1; }

/* Переключатель личностей */
.person-switch { position: relative; }
.person-pill {
    display: flex; align-items: center; gap: .7rem;
    padding: .32rem .9rem .32rem .35rem;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 40px;
    transition: border-color .15s, box-shadow .15s;
}
.person-pill:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.person-pill .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .95rem; color: #fff; flex: none; }
.person-pill .who { display: flex; flex-direction: column; line-height: 1.15; }
.person-pill .who .nm { font-size: .9rem; font-weight: 500; }
.person-pill .who .bd { font-size: .72rem; color: var(--text-dim); letter-spacing: .02em; }
.person-pill .big3 { display: flex; gap: .15rem; color: var(--gold); font-size: 1rem; }
.person-pill .caret { color: var(--text-dim); font-size: .7rem; margin-left: .15rem; }
.person-menu {
    position: absolute; top: calc(100% + 8px); left: 0; min-width: 330px;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .5rem; z-index: 40; display: none;
}
.person-menu.open { display: block; }
.person-menu .pm-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); padding: .5rem .6rem .35rem; }
.pm-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: var(--radius-sm); cursor: pointer; transition: background .12s; }
.pm-item:hover { background: var(--bg-hover); }
.pm-item.active { background: var(--bg-active); }
.pm-item .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .85rem; color: #fff; flex: none; }
.pm-item .pm-meta { flex: 1; min-width: 0; }
.pm-item .pm-meta .t { font-size: .88rem; }
.pm-item .pm-meta .s { font-size: .72rem; color: var(--text-dim); }
.pm-item .pm-role { font-size: .66rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: .1rem .4rem; }
.pm-item .pm-check { color: var(--accent); opacity: 0; }
.pm-item.active .pm-check { opacity: 1; }
.pm-item .pm-del { color: var(--text-dim); font-size: .9rem; opacity: .4; padding: .15rem .3rem; border-radius: 6px; }
.pm-item .pm-del:hover { color: var(--danger); opacity: 1; background: rgba(255, 92, 92, .08); }
.pm-item .pm-edit { color: var(--text-dim); font-size: .9rem; opacity: .5; padding: .15rem .35rem; border-radius: 6px; }
.pm-item .pm-edit:hover { color: var(--accent-2); opacity: 1; background: var(--bg-hover); }
.pm-add { display: flex; align-items: center; gap: .6rem; padding: .6rem; color: var(--accent-2); border-top: 1px solid var(--border-soft); margin-top: .3rem; cursor: pointer; border-radius: 0 0 calc(var(--radius) - 4px); }
.pm-add:hover { color: var(--text); }

/* Топбар-плашки: токены, ИИ, профиль */
.tb-pill { display: flex; align-items: center; gap: .45rem; padding: .42rem .8rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 40px; font-size: .85rem; white-space: nowrap; transition: border-color .15s; }
.tb-pill:hover { border-color: var(--accent); }
.tb-pill .ico { font-size: .95rem; }
.tb-pill.tokens .ico { color: var(--gold); }
.tb-pill.tokens .v { font-weight: 600; }
.tb-pill.tokens .buy { font-size: .7rem; color: var(--text-dim); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-card); border: 1px solid var(--border); font-size: 1.05rem; color: var(--text-dim); transition: .15s; }
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn.ai { color: var(--accent-2); }
.icon-btn.ai.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }

/* Боковая навигация */
.sidebar { display: flex; flex-direction: column; background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 1rem .7rem; overflow-y: auto; z-index: 20; }
.nav-group-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); padding: .9rem .8rem .4rem; opacity: .8; }
.nav-item { display: flex; align-items: center; gap: .8rem; padding: .62rem .8rem; border-radius: var(--radius-sm); color: var(--text-dim); font-size: .92rem; cursor: pointer; transition: background .12s, color .12s; position: relative; }
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--bg-active); color: var(--text); }
.nav-item.active .ico { color: var(--accent-2); }
.nav-item .ico { width: 22px; text-align: center; font-size: 1.05rem; color: var(--text-dim); transition: color .12s; }
.nav-item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: linear-gradient(var(--accent), var(--accent-2)); border-radius: 0 3px 3px 0; }
.nav-item .badge { margin-left: auto; font-size: .66rem; background: rgba(212, 175, 55, .18); color: var(--gold); border-radius: 8px; padding: .05rem .4rem; }
.nav-item .badge.soon { background: var(--border); color: var(--text-dim); }
.sidebar-foot { margin-top: auto; padding: .8rem; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); font-size: .78rem; color: var(--text-dim); }
.sidebar-foot .h { color: var(--accent-2); font-size: .82rem; margin-bottom: .3rem; }
/* Мелкая ссылка на оферту в самом низу сайдбара (BS-45): flex + margin-top:auto
   у .sidebar-foot прижимает к низу блок футера — карточка тарифа, под ней ссылка. */
.sidebar-legal { display: block; margin-top: .7rem; padding: 0 .3rem; font-size: .72rem; color: var(--text-dim); text-align: center; }
.sidebar-legal:hover { color: var(--accent-2); text-decoration: none; }

/* Основная зона */
.main { overflow-y: auto; overflow-x: hidden; }
.main-scroll { max-width: var(--max-content); margin: 0 auto; padding: 1.6rem 1.6rem 5rem; }
.view { display: none; animation: fade .25s ease; }
.view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.page-head h1 { font-size: 1.5rem; font-weight: 400; color: var(--text); letter-spacing: .01em; }
.page-head .crumb { font-size: .8rem; color: var(--text-dim); margin-top: .25rem; }
.page-head .crumb a { color: var(--text-dim); cursor: pointer; }
.page-head .actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Кнопки */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1.1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; transition: .15s; white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(139, 126, 216, .4); }
.btn-ghost { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); border-color: var(--accent); }
.btn-sm { padding: .42rem .8rem; font-size: .82rem; }

/* Карточки */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; margin-bottom: 1.2rem; }
.card.tight { padding: 1rem; }
.card h2.sec { font-size: 1.05rem; font-weight: 500; color: var(--accent-2); margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.card h3.sub { font-size: .95rem; font-weight: 500; color: var(--accent); margin: 1.2rem 0 .7rem; padding-bottom: .3rem; border-bottom: 1px dashed var(--border); }
.muted { color: var(--text-dim); font-size: .85rem; }
.alert { background: rgba(255, 92, 92, .1); border: 1px solid var(--danger); color: #ffb0b0; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.notice { background: var(--bg-card-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .88rem; color: var(--text-dim); }

/* Дашборд */
.dash-hero { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 980px) { .dash-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.person-hero { position: relative; overflow: hidden; }
.person-hero .glow { position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(139, 126, 216, .16), transparent 55%); pointer-events: none; }
/* BS-236: виджет идущего розыгрыша сертификатов — в свободной области person-hero под big3-row */
.dash-auction { position: relative; margin-top: 1rem; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--gold) 6%, var(--bg)); }
.dash-auction .da-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.dash-auction .da-ico { font-size: 1.1rem; }
.dash-auction .da-t { font-weight: 600; font-size: .95rem; }
.dash-auction .da-timer { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; font-size: .95rem; }
.dash-auction .da-timer.is-over { color: var(--text-dim); font-weight: 500; font-size: .85rem; }
.dash-auction .da-progress { margin-top: .5rem; display: flex; align-items: center; gap: .7rem; }
.dash-auction .da-progress-l { font-size: .84rem; white-space: nowrap; }
.dash-auction .da-progress-bar { flex: 1; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent-2) 12%, var(--bg)); overflow: hidden; }
.dash-auction .da-progress-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-2), var(--gold)); }
.dash-auction .da-mine { margin-top: .4rem; font-size: .82rem; color: var(--text-dim); }
.dash-auction .da-btn { margin-top: .55rem; }
/* BS-447: приглашение в астро-сообщество (Telegram/Max, ссылки из .env) */
.dash-community { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.dash-community .cm-ico { font-size: 1.25rem; color: var(--gold); flex: none; }
.dash-community .cm-text { flex: 1; min-width: 240px; margin: 0; font-size: 1.02rem; line-height: 1.45; }
.dash-community .cm-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.person-hero .top { display: flex; align-items: center; gap: 1.1rem; position: relative; }
.person-hero .ava { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; font-weight: 600; color: #fff; flex: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .04); }
.person-hero .nm { font-size: 1.4rem; font-weight: 500; }
.person-hero .role { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--accent-2); background: rgba(139, 126, 216, .14); border: 1px solid rgba(139, 126, 216, .3); border-radius: 20px; padding: .15rem .6rem; margin-top: .2rem; }
.person-hero .birth { color: var(--text-dim); font-size: .86rem; margin-top: .5rem; }
.big3-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.2rem; position: relative; }
.big3-chip { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; text-align: center; }
.big3-chip .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.big3-chip .g { font-size: 1.7rem; color: var(--gold); margin: .2rem 0; }
.big3-chip .sn { font-size: .95rem; color: var(--accent-2); font-weight: 500; }
.big3-chip .kw { font-size: .72rem; color: var(--text-dim); margin-top: .15rem; }

.wheel-card { text-align: center; }
#dash-wheel, #natal-wheel { display: flex; justify-content: center; align-items: center; min-height: 280px; }
#dash-wheel svg, #natal-wheel svg { width: 100%; height: auto; }
#dash-wheel svg { max-width: 360px; }
#natal-wheel svg { max-width: 600px; }
/* BS-114: kerykeion-SVG (dark) заменил колесо AstroDraw. SVG сам несёт тёмный фон
   и CSS-переменные темы во встроенном <style>, поэтому стилизуем только размер:
   полный чарт (колесо + таблица аспектов, viewBox ~890×595) — шире, чем колесо
   AstroDraw, чтобы таблица аспектов читалась. Id+class даёт приоритет над правилами
   выше для чисто-AstroDraw-колеса. */
#dash-wheel.kery-wheel { min-height: 360px; }
#dash-wheel.kery-wheel svg { max-width: 420px; border-radius: 10px; }
#natal-wheel.kery-wheel svg { max-width: 1180px; border-radius: 10px; }
@media (max-width: 980px) { #natal-wheel.kery-wheel svg { max-width: 100%; } }
/* BS-130: kerykeion-диаграммы прогнозов (Транзиты / Соляр / Лунар). Dual-чарт
   (два колеса + таблица аспектов) широк — даём полный размер, как натуральному
   чарту, с адаптивом на узких экранах. Тёмный фон SVG несёт сам (встроенный <style>). */
#fc-transit-wheel.kery-wheel svg,
#fc-solar-wheel.kery-wheel svg,
#fc-lunar-wheel.kery-wheel svg { max-width: 1180px; border-radius: 10px; }
@media (max-width: 980px) {
    #fc-transit-wheel.kery-wheel svg,
    #fc-solar-wheel.kery-wheel svg,
    #fc-lunar-wheel.kery-wheel svg { max-width: 100%; }
}
/* BS-128: kerykeion-диаграмма синастрии (би-колесо). Dual-чарт (два кольца + таблица
   аспектов) широк — даём полный размер, как прогнозным диаграммам и натуральному
   чарту. Тёмный фон SVG несёт сам (встроенный <style>). Id+class даёт приоритет над
   правилом #synastry-wheel svg выше для чисто-AstroDraw-колеса. */
#synastry-wheel.kery-wheel svg { max-width: 1180px; border-radius: 10px; }
@media (max-width: 980px) { #synastry-wheel.kery-wheel svg { max-width: 100%; } }
/* Форма «Момент транзита» (GET, перезагружает страницу с ?tyear/&tmonth/&tday#forecasts). */
.fc-transit-form { display: block; }
.fc-transit-form .fc-date-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.fc-transit-form .fc-date-row label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--text-dim); }
.fc-transit-form .fc-date-row input[type=number] { width: 5.5rem; padding: .5rem .6rem; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .9rem; }
.fc-transit-form .fc-date-row input:focus { outline: none; border-color: var(--accent); }
.fc-transit-form .fc-date-row .btn { align-self: flex-end; }
.wheel-legend { font-size: .78rem; color: var(--text-dim); margin-top: .6rem; line-height: 1.9; }

/* BS-174: вкладка «Time-lord'ы» раздела «Прогнозы» — традиционные
   предсказательные периоды (профекции/фирдарии/релизинг) + секта +
   ректификация по секте. На дизайн-токенах, канон .fc-*. */
.tl-table th, .tl-table td { font-size: .84rem; }
.tl-table tr.tl-current td { background: rgba(139, 126, 216, .12); }
.tl-table tr.tl-peak td { background: rgba(212, 175, 55, .1); }
.tl-details { margin-top: .7rem; }
.tl-details summary { cursor: pointer; color: var(--accent-2, #8a7aff); font-size: .85rem; user-select: none; }
.tl-details[open] summary { margin-bottom: .6rem; }
.tl-lot-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--border); }
.tl-lot-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--text-dim); }
.tl-lot-form select { padding: .45rem .6rem; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .88rem; min-width: 14rem; }
.tl-lot-form select:focus { outline: none; border-color: var(--accent); }
.tl-rect { border-color: rgba(212, 175, 55, .35); }
.tl-boundary { border-top: 1px dashed var(--border); padding-top: .6rem; margin-top: .6rem; }
@media (max-width: 560px) {
    .tl-lot-form select { min-width: 0; flex: 1; }
}

/* BS-175: продвинутая прогностика — VoC Луны (виджет Дашборда + блок «Транзитов»),
   вкладки «Направления»/«Элективы» раздела «Прогнозы», «Драконическая» в натале и
   блок антискиев во вкладке «Склонения и середины». На дизайн-токенах, канон .tl-*. */
.voc-status {
    display: inline-block; padding: .45rem .8rem; border-radius: var(--radius-sm);
    font-size: .86rem; margin-bottom: .7rem;
}
.voc-status.voc-now { background: rgba(212, 175, 55, .12); border: 1px solid rgba(212, 175, 55, .35); }
.voc-status.voc-ok { background: rgba(139, 126, 216, .1); border: 1px solid rgba(139, 126, 216, .25); }
.voc-list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .45rem; }
.voc-list li {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
    padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: .86rem; cursor: default;
}
.voc-list li:hover { border-color: rgba(139, 126, 216, .4); }
.voc-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.voc-dur { color: var(--accent-2, #8a7aff); font-size: .8rem; }
.voc-foot { margin-top: .6rem; }
.voc-card.voc-dash { border-left: 3px solid rgba(139, 126, 216, .5); }

.dir-hero-num { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .9rem; }
.dir-arc { font-size: 1.7rem; font-weight: 700; color: var(--gold, #d4af37); font-variant-numeric: tabular-nums; }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.dir-list li {
    display: grid; grid-template-columns: auto auto auto 1fr; align-items: baseline;
    gap: .35rem .8rem; padding: .55rem .75rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .87rem; cursor: default;
}
.dir-list li:hover { border-color: rgba(139, 126, 216, .4); }
.dir-age { color: var(--gold, #d4af37); font-weight: 600; white-space: nowrap; }
.dir-text { color: var(--text-dim, var(--text)); }
.dir-term {
    margin-top: .9rem; padding: .7rem .9rem; border: 1px dashed var(--border);
    border-radius: var(--radius-sm); font-size: .86rem;
}
.el-form .fc-date-row label { min-width: 9rem; }
.el-window {
    display: grid; gap: .35rem; padding: .7rem .9rem; margin-bottom: .6rem;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: .88rem; cursor: default;
}
.el-window:hover { border-color: rgba(139, 126, 216, .4); }
.el-window-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.el-score {
    margin-left: auto; min-width: 2.4rem; text-align: center; font-weight: 700;
    padding: .15rem .5rem; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.el-score-high { background: rgba(107, 207, 127, .18); color: #6bcf7f; }
.el-score-good { background: rgba(139, 126, 216, .18); color: #8b7ed8; }
.el-score-mid { background: rgba(212, 175, 55, .15); color: var(--gold, #d4af37); }
.el-score-low { background: rgba(255, 255, 255, .07); color: var(--text-dim, #999); }
.el-facts { color: var(--text-dim, var(--text)); font-size: .82rem; }
.el-reasons { display: flex; flex-wrap: wrap; gap: .35rem; }
.el-chip {
    font-size: .74rem; padding: .12rem .55rem; border-radius: 999px;
    background: rgba(139, 126, 216, .1); border: 1px solid rgba(139, 126, 216, .25);
}
/* BS-534: модал ожидания длительного расчёта — канон .video-* / .ai-hint-*;
   follow-up по отзыву владельца: показывается ПОВЕРХ, как оверлей (канон
   .video-scrim: scrim перехватывает клики — интерфейс заблокирован, пока
   идёт перебор; расчёт продолжается в фоне). Используется двумя
   экземплярами: #el-wait (BS-534, элективный перебор) и #tl-wait (BS-535,
   «Лента года»).
   NB: внутри CSS-комментария недопустима последовательность «звезда-слэш» —
   она закрывает комментарий досрочно, парсер выбрасывает следующее правило
   (.el-wait-scrim) как мусор, и модал теряет position:fixed/display:grid
   (рендерится поточным блоком за пределами вьюпорта). */
.el-wait-scrim {
    position: fixed; inset: 0; z-index: 97; display: grid; place-items: center;
    background: rgba(8, 8, 18, .66); backdrop-filter: blur(2px);
}
.el-wait-scrim[hidden] { display: none; }
.el-wait-modal {
    width: min(420px, 92vw); text-align: center;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.4rem 1.6rem;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.el-wait-spin {
    font-size: 1.7rem; color: var(--accent-2, #8b7ed8); margin-bottom: .5rem;
    display: inline-block; animation: el-wait-rot 1.4s linear infinite;
}
@keyframes el-wait-rot { to { transform: rotate(360deg); } }
.el-wait-title { margin: 0 0 .35rem; font-weight: 600; }
.el-wait-note { margin: 0; color: var(--text-dim, var(--text)); font-size: .84rem; }
@media (max-width: 560px) { .el-wait-modal { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .el-wait-spin { animation: none; }
}
.anti-list { display: grid; gap: .6rem; }
.anti-item {
    padding: .65rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: .88rem; cursor: default;
}
.anti-item:hover { border-color: rgba(212, 175, 55, .4); }
.anti-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .3rem; }
.anti-kind { color: var(--gold, #d4af37); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.anti-orb { color: var(--text-dim, var(--text)); font-size: .78rem; }
.anti-item p { margin: 0; color: var(--text-dim, var(--text)); }
.drc-lead { margin-bottom: 1rem; }
.drc-bodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; }
.drc-body {
    display: grid; gap: .1rem; padding: .55rem .7rem; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .84rem; cursor: default;
}
.drc-body:hover { border-color: rgba(139, 126, 216, .4); }
.drc-pos { font-weight: 600; }
.drc-cross { display: grid; gap: .6rem; }
.drc-cross-item {
    padding: .65rem .85rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: .88rem; cursor: default;
}
.drc-cross-item:hover { border-color: rgba(139, 126, 216, .4); }
.drc-cross-item p { margin: .3rem 0 0; color: var(--text-dim, var(--text)); }
@media (max-width: 560px) {
    .dir-list li { grid-template-columns: 1fr auto; }
    .dir-list li .dir-text { grid-column: 1 / -1; }
    .el-score { margin-left: 0; }
}

/* BS-162: предупреждение о системе домов для полярных широт (Placidus/Koch
   за Полярным кругом). Notice-блок под колесом натальной карты. */
.polar-house-warn {
    display: flex; gap: .7rem; align-items: flex-start;
    margin: .8rem auto 0; max-width: 560px;
    background: rgba(212, 175, 55, .08);
    border: 1px solid rgba(212, 175, 55, .38);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    text-align: left;
}
.polar-house-warn .phw-ico { color: var(--gold); font-size: 1.05rem; line-height: 1.4; flex: none; }
.polar-house-warn .phw-body { min-width: 0; }
.polar-house-warn .phw-title { font-size: .84rem; font-weight: 600; color: var(--gold); margin-bottom: .2rem; }
.polar-house-warn .phw-text { font-size: .8rem; color: var(--text-dim); line-height: 1.55; margin: 0 0 .5rem; }
.polar-house-warn .phw-btn { margin-top: .1rem; }


.stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 1.2rem; }
@media (min-width: 760px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.05rem 1.1rem; display: flex; flex-direction: column; gap: .2rem; }
.stat .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.stat .v { font-size: 1.15rem; color: var(--accent-2); font-weight: 500; }
.stat .d { font-size: .76rem; color: var(--text-dim); }
.stat.tokens .v { color: var(--gold); }

/* BS-148.2: Энергия дня — виджет Дашборда */
.eb-card { padding: 1.2rem 1.3rem; position: relative; overflow: hidden; }
.eb-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.eb-card.eb-level-peak::before     { background: var(--accent-2); }
.eb-card.eb-level-high::before     { background: var(--earth); }
.eb-card.eb-level-balanced::before { background: var(--accent); }
.eb-card.eb-level-moderate::before { background: var(--gold); }
.eb-card.eb-level-low::before      { background: var(--danger); }
.eb-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.eb-head .sec { margin: 0; }
/* BS-148.2 (follow-up): кликабельная дата + форма смены дня расчёта */
.eb-date-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: .28rem .55rem;
  color: var(--text-dim); font-size: .78rem; font-family: inherit; transition: color .15s ease, border-color .15s ease; }
.eb-date-btn:hover, .eb-date-btn:focus-visible { color: var(--text); border-color: var(--border); outline: none; }
.eb-date-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.eb-date-ico { font-size: .85rem; }
.eb-date-caret { font-size: .62rem; opacity: .65; transition: transform .15s ease; }
.eb-date-btn[aria-expanded="true"] .eb-date-caret { transform: rotate(180deg); }
.eb-date-form { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: -.1rem 0 .9rem; }
.eb-date-form[hidden] { display: none; }
.eb-date-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-dim); }
.eb-date-form input[type=date] { padding: .34rem .5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card-2); color: var(--text); font-size: .85rem; font-family: inherit; }
.eb-date-form input[type=date]:focus { outline: none; border-color: var(--accent); }
.eb-date-hint { font-size: .7rem; line-height: 1.35; flex-basis: 100%; }
.eb-body { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.eb-ring { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.04), transparent 70%), var(--bg-card-2);
  border: 3px solid var(--accent); }
.eb-ring.eb-ring-peak     { border-color: var(--accent-2); }
.eb-ring.eb-ring-high     { border-color: var(--earth); }
.eb-ring.eb-ring-balanced { border-color: var(--accent); }
.eb-ring.eb-ring-moderate { border-color: var(--gold); }
.eb-ring.eb-ring-low      { border-color: var(--danger); }
.eb-ring-num { font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--text); }
.eb-ring-lbl { font-size: .66rem; color: var(--text-dim); margin-top: .15rem; }
.eb-main { flex: 1 1 280px; min-width: 0; }
.eb-level-line { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .45rem; }
.eb-level-tag { font-size: .82rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; color: #fff; background: var(--accent); }
.eb-level-tag.eb-level-peak     { background: var(--accent-2); }
.eb-level-tag.eb-level-high     { background: var(--earth); }
.eb-level-tag.eb-level-balanced { background: var(--accent); }
.eb-level-tag.eb-level-moderate { background: var(--gold); }
.eb-level-tag.eb-level-low      { background: var(--danger); }
.eb-moon { font-size: .78rem; color: var(--text-dim); }
.eb-headline { font-size: .88rem; line-height: 1.5; color: var(--text-dim); margin: 0 0 .7rem; }
.eb-factors { display: flex; flex-wrap: wrap; gap: .4rem; }
.eb-factor { font-size: .72rem; padding: .22rem .5rem; border-radius: 6px; border: 1px solid var(--border); color: var(--text-dim); }
.eb-factor.eb-up   { border-color: rgba(var(--earth-rgb, 120,180,120), .4); color: var(--earth); }
.eb-factor.eb-down { border-color: rgba(var(--danger-rgb, 220,90,90), .4); color: var(--danger); }
.eb-steps { margin: .9rem 0 .6rem; padding-left: 1.1rem; }
.eb-steps li { font-size: .84rem; line-height: 1.5; color: var(--text-dim); margin-bottom: .25rem; }
.eb-foot { font-size: .72rem; line-height: 1.45; margin: .6rem 0 0; }

/* ── BS-210: виджет «Лунный день рождения» (Дашборд) ────────────────────── */
.ld-card { display: flex; flex-direction: column; gap: .55rem; }
.ld-head { display: flex; align-items: center; gap: .8rem; }
.ld-moon { width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, rgba(201,178,255,.5), rgba(120,100,200,.12));
  border: 1px solid rgba(180,160,255,.35); display: grid; place-items: center;
  font-size: 1.1rem; color: var(--accent-2); }
.ld-title { min-width: 0; }
.ld-title h2 { margin: 0; }
.ld-sub { margin: .2rem 0 0; font-size: .78rem; color: var(--text-dim); }
.ld-symbol { margin-left: auto; flex: none; font-size: .78rem; color: var(--accent-2);
  background: rgba(139,126,216,.14); border: 1px solid rgba(139,126,216,.3);
  border-radius: 12px; padding: .25rem .7rem; white-space: nowrap; }
.ld-archetype { margin: 0; font-size: .95rem; font-weight: 500; color: var(--accent-2); }
.ld-desc { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--text); }
.ld-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.ld-col h3 { margin: 0 0 .35rem; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.ld-col ul { margin: 0; padding-left: 1.05rem; }
.ld-col li { font-size: .82rem; line-height: 1.55; color: var(--text-dim); margin-bottom: .25rem; }
.ld-keywords { display: flex; flex-wrap: wrap; gap: .4rem; }
.ld-kw { font-size: .74rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 12px; padding: .12rem .6rem; }
.ld-foot { font-size: .72rem; line-height: 1.45; margin: .3rem 0 0; }
@media (max-width: 860px) {
  .ld-grid { grid-template-columns: 1fr; }
  .ld-symbol { display: none; }
}

.ai-insight { background: linear-gradient(135deg, rgba(139, 126, 216, .12), rgba(201, 168, 255, .04)); border: 1px solid rgba(139, 126, 216, .3); }
.ai-insight .head { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.ai-insight .head .a { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-size: .95rem; }
.ai-insight .head .t { font-weight: 500; color: var(--accent-2); }
.ai-insight .head .t small { display: block; font-weight: 400; color: var(--text-dim); font-size: .74rem; }
.ai-insight p { font-size: .92rem; line-height: 1.7; }
.ai-insight .tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
.tag { background: rgba(139, 126, 216, .16); color: var(--accent-2); border-radius: 12px; padding: .15rem .65rem; font-size: .74rem; }

.dash-cols { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 980px) { .dash-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.qa { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; cursor: pointer; transition: .15s; display: flex; flex-direction: column; gap: .3rem; }
.qa:hover { border-color: var(--accent); transform: translateY(-2px); }
.qa .ico { font-size: 1.4rem; }
.qa .t { font-size: .92rem; font-weight: 500; }
.qa .s { font-size: .76rem; color: var(--text-dim); }
.report-list .ri { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--border-soft); }
.report-list .ri:last-child { border-bottom: none; }
.report-list .ri .ic { width: 36px; height: 36px; border-radius: 9px; background: var(--bg-card-2); border: 1px solid var(--border); display: grid; place-items: center; font-size: 1rem; color: var(--accent-2); flex: none; }
.report-list .ri .m { flex: 1; min-width: 0; }
.report-list .ri .m .t { font-size: .9rem; }
.report-list .ri .m .s { font-size: .74rem; color: var(--text-dim); }
.report-list .ri .dt { font-size: .74rem; color: var(--text-dim); white-space: nowrap; }

/* Табы */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.3rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tab { padding: .7rem 1rem; font-size: .9rem; color: var(--text-dim); border-bottom: 2px solid transparent; white-space: nowrap; transition: .15s; cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.tab-panel { display: none; animation: fade .2s ease; }
.tab-panel.active { display: block; }
/* BS-37: видимое кольцо фокуса при навигации с клавиатуры (focus-within на
   .tabs — чтобы фокус не терялся при горизонтальном скролле вкладок). */
.tabs .tab:focus-visible { outline: none; color: var(--text); border-radius: 8px 8px 0 0; box-shadow: inset 0 0 0 2px var(--accent); }

/* BS-251: скролл-обёртка таблиц (паттерн Bootstrap .table-responsive) —
   на мобильных таблица прокручивается по горизонтали, не вылезая за экран. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Минимальная ширина внутри обёртки: колонки не давятся в нечитаемый столбик,
   а включают горизонтальный скролл. */
.table-responsive > table.bodies { min-width: 560px; }
.table-responsive > table.sub-table { min-width: 480px; }
.table-responsive > table.admin-table { min-width: 640px; }
/* Существующая админ-обёртка (BS-109+) — тот же канон минимальной ширины. */
.admin-table-wrap > table { min-width: 640px; }

/* Таблицы тел/аспектов (как в result.php) */
table.bodies { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.bodies th { text-align: left; color: var(--text-dim); font-weight: 400; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; padding: .6rem .7rem; border-bottom: 1px solid var(--border); }
table.bodies td { padding: .62rem .7rem; border-bottom: 1px solid var(--border-soft); }
table.bodies tr:hover td { background: rgba(139, 126, 216, .05); }
.glyph { font-size: 1.2rem; color: var(--gold); width: 26px; display: inline-block; text-align: center; }
.sign-glyph { font-size: 1.05rem; color: var(--accent-2); }
.retro { color: var(--fire); font-weight: 600; font-size: .82rem; }
.house-num { color: var(--text-dim); font-size: .82rem; }
.dignity { display: inline-block; font-size: .64rem; padding: .08rem .4rem; border-radius: 7px; margin-left: .25rem; text-transform: uppercase; letter-spacing: .02em; vertical-align: middle; }
.dignity-ruler { background: rgba(212, 175, 55, .2); color: var(--gold); }
.dignity-exalted { background: rgba(107, 207, 127, .2); color: var(--earth); }
.dignity-fall { background: rgba(255, 107, 74, .15); color: var(--fire); }
.dignity-detriment { background: rgba(255, 92, 92, .15); color: var(--danger); }
.aspect-glyph { font-size: 1.05rem; color: var(--gold); }
.orb { color: var(--text-dim); font-size: .82rem; }
.verify-badge { display: inline-block; background: rgba(107, 207, 127, .12); color: var(--earth); border: 1px solid rgba(107, 207, 127, .3); border-radius: 8px; padding: .28rem .65rem; font-size: .74rem; margin-bottom: .6rem; }

.houses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.house-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px; padding: .7rem 1rem; font-size: .86rem; }
.house-card .num { color: var(--gold); font-weight: 500; margin-right: .5rem; }
.house-card .pos { color: var(--text-dim); font-size: .8rem; }

.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.analysis-item { background: var(--bg-card-2); border-radius: 10px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.analysis-label { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em; }
.analysis-value { font-size: 1.02rem; color: var(--accent-2); font-weight: 500; }
.analysis-detail { font-size: .76rem; }
.stellium-badge { display: inline-block; background: rgba(212, 175, 55, .15); color: var(--gold); border: 1px solid rgba(212, 175, 55, .3); border-radius: 8px; padding: .28rem .65rem; margin: .28rem .28rem 0 0; font-size: .82rem; }

.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }

.interpretation-block { background: var(--bg-card-2); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 1rem 1.2rem; margin-bottom: .9rem; }
.interpretation-block h3 { font-size: .95rem; font-weight: 500; color: var(--accent-2); margin-bottom: .4rem; }
.interpretation-block h3 .muted { font-weight: 400; }
.interpretation-block p { font-size: .9rem; line-height: 1.65; }
.interpretation-block .advice { margin-top: .5rem; color: var(--text-dim); font-size: .85rem; font-style: italic; border-left: 2px solid var(--gold); padding-left: .7rem; }
.keywords { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.keyword { background: rgba(139, 126, 216, .15); color: var(--accent-2); border-radius: 12px; padding: .12rem .65rem; font-size: .76rem; }

/* Плейсхолдер «скоро» для отложенных разделов */
.placeholder { text-align: center; padding: 3rem 1rem; color: var(--text-dim); }
.placeholder .ico { font-size: 2.6rem; margin-bottom: .6rem; opacity: .7; }
.placeholder h2 { font-size: 1.2rem; color: var(--text); font-weight: 400; margin-bottom: .5rem; }
.placeholder p { max-width: 460px; margin: 0 auto; font-size: .9rem; line-height: 1.7; }

/* Форма «Новая личность» (модал) */
.modal-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 60; display: none; }
.modal-scrim.open { display: grid; place-items: center; }
.modal { width: min(640px, 94vw); max-height: 90vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.modal .m-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.modal .m-head .t { font-size: 1.05rem; font-weight: 500; flex: 1; }
.modal .m-head .x { color: var(--text-dim); font-size: 1.3rem; padding: .2rem .5rem; border-radius: 8px; }
.modal .m-head .x:hover { color: var(--text); background: var(--bg-hover); }
.modal form { padding: 1.2rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.fg { display: flex; flex-direction: column; gap: .35rem; }
.fg label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.fg input, .fg select { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; color: var(--text); font-size: .92rem; font-family: inherit; }
/* BS-252: intrinsic-ширина <select> равна самой длинной опции — в настройках
   (аянамши, системы домов) она не давала полю сжаться и выталкивала карточку
   «Предпочтения» за пределы экрана на мобильных. */
.fg select { max-width: 100%; width: 100%; }
.fg input { max-width: 100%; }
.fg input:focus, .fg select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.fg .hint { font-size: .72rem; color: var(--text-dim); }
.checkbox-row { display: flex; align-items: center; gap: .6rem; margin: .2rem 0; color: var(--text-dim); font-size: .82rem; cursor: pointer; user-select: none; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.m-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }

/* ════════ BS-308/BS-621: долговременная память ИИ (модал персоны) ════════
   Чекбокс тумблера reuses .checkbox-row; ниже — блок «Просмотреть/Очистить»
   накопленной памяти и модал просмотра (человекочитанный digest, сервер-рендер). */
/* BS-621 follow-up: author display:flex перебивает UA-правило [hidden]{display:none}
   (канон-ловушка BS-598/BS-601) — без гарда блок «Просмотреть/Очистить» был виден
   ВСЕГДА, а openMemoryView() на пустых данных молча выходил: клик «ничего не делает». */
.np-memory-manage { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.np-memory-manage[hidden] { display: none; }
.np-memory-manage .hint { margin: 0; }
.np-memory-wipe:hover { color: var(--danger, #e08c8c); border-color: var(--danger, #e08c8c); }
.modal.modal-sm { width: min(520px, 94vw); }
.pmem-view-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.pmem-view-body .hint { margin: 0; }
.pmem-slots { display: flex; flex-direction: column; gap: .5rem; }
.pmem-row { display: flex; gap: .8rem; align-items: baseline; font-size: .86rem; }
.pmem-row .pmem-k { flex: 0 0 42%; max-width: 42%; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.pmem-row .pmem-v { flex: 1; min-width: 0; }
.pmem-chip { display: inline-block; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 999px; padding: .1rem .6rem; margin: .12rem .25rem .12rem 0; font-size: .78rem; }
/* BS-661: чип факта с крестиком удаления — чип стал POST-формой (v1 без AJAX,
   после PRG чип исчезает); крестик с фокус-кольцом канона BS-37. */
form.pmem-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .3rem .1rem .6rem; }
.pmem-chip-x { border: 0; background: none; color: var(--text-dim); font-size: .85rem; line-height: 1; padding: 0 .2rem; cursor: pointer; border-radius: 999px; }
.pmem-chip-x:hover { color: var(--danger, #e08c8c); }
.pmem-chip-x:focus-visible { outline: 2px solid var(--accent, #b48ce0); outline-offset: 1px; }
.pmem-x-hint { margin: .2rem 0 0; }
.pmem-meta { margin: 0; font-size: .74rem; color: var(--text-dim); }
/* BS-624 (полировка модала просмотра): бейдж свежести + раздел наводящих вопросов. */
.pmem-status { margin: 0; font-size: .78rem; display: flex; align-items: center; gap: .4rem; }
.pmem-status.pmem-fresh { color: var(--earth, #6bcf7f); }
.pmem-status.pmem-stale { color: var(--text-dim); }
.pmem-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.pmem-questions { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .9rem; background: var(--bg-card-2); }
.pmem-questions-t { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin-bottom: .35rem; }
.pmem-questions-l { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.pmem-questions-l .pmem-q { font-size: .84rem; color: var(--gold, #e7c27a); }
/* BS-659: коуч-вопросы ассистента — блок ниже наводящих, акцент на «голос Астры». */
.pmem-coach { margin-top: .6rem; border-style: dashed; }
.pmem-coach .pmem-questions-t { color: var(--accent-2, #cfa9e8); }
.pmem-coach .pmem-q { font-style: italic; }

/* BS-308 follow-up: раздел «Память ИИ» (section_persona_memory.php) —
   герой с бейджем свежести, кнопка очистки. Follow-up 4: чипы-переключатель
   персон удалены (персона раздела = активная, селектор в шапке). */
.pm-hero-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pm-hero-head h2 { margin: 0; }
.pm-hero .pmem-meta { margin-top: .45rem; }
.pm-body { display: flex; flex-direction: column; gap: .9rem; }
.pm-wipe-form { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: .8rem 0 2rem; }
@media (max-width: 560px) {
    .pmem-row { flex-direction: column; gap: .15rem; }
    .pmem-row .pmem-k { flex: none; max-width: none; }
}

/* ════════ BS-29: карта OpenLayers для выбора координат рождения (ручной режим) ════════
   Кнопка «📍 Выбрать на карте» раскрывает компактную accordion-панель с картой
   внутри блока ручного ввода координат (#np-manual-fields). Карта — на дизайн-токенах
   кабинета; тайлы OSM сами по себе светлые (стандарт веб-карт), обрамление — тёмное. */
.np-map-row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem !important; }
.np-map-row .np-map-row-hint { margin: 0; }
.np-map-btn { white-space: nowrap; }
#np-map-btn:disabled { opacity: .5; cursor: not-allowed; }
#np-map-wrap[hidden] { display: none; }       /* надёжный коллапс аккордеона */
.np-map-wrap { margin-top: .2rem; }
.np-map {
    border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-card-2); box-shadow: var(--shadow);
}
/* Канва карты — компактная (≈340px), отзывчивая; cursor:crosshair подсказывает клик.
   min-width:0 обязателен для grid-item, иначе канва растягивает колонку формы. */
.np-map-canvas {
    height: 340px; width: 100%; min-width: 0; cursor: crosshair;
    background: #aadaff; /* фон до загрузки тайлов — светло-голубой, как у OSM-моря */
}
@media (max-width: 560px) { .np-map-canvas { height: 280px; } }
.np-map-status {
    padding: .5rem .8rem; font-size: .76rem; color: var(--text-dim);
    border-top: 1px solid var(--border-soft); background: var(--bg-card-2);
    min-height: 2rem;
}
/* Подгон UI OpenLayers (кнопки зума, атрибуция) под тёмную тему кабинета */
.np-map .ol-zoom {
    top: .5rem; left: .5rem; background: rgba(20, 20, 42, .9); border-radius: 8px;
    padding: 2px;
}
.np-map .ol-zoom button {
    background: var(--bg-card-2); color: var(--text); border-radius: 6px; font-size: 1rem;
}
.np-map .ol-zoom button:hover { background: var(--bg-hover); color: var(--accent-2); }
.np-map .ol-attribution {
    background: rgba(20, 20, 42, .85); border-radius: 8px 0 0 0;
}
.np-map .ol-attribution a { color: var(--text-dim); }
.np-map .ol-attribution button { background: var(--bg-card-2); }

/* ИИ-панель */
.aipanel { background: var(--bg-sidebar); border-left: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; z-index: 25; transform: translateX(100%); transition: transform .25s ease; position: relative; }
.app.ai-open { grid-template-columns: var(--sidebar-w) 1fr var(--aipanel-w); }
.app.ai-open .aipanel { transform: none; }
/* Чат закрыт — убираем панель из layout полностью. Без этого .aipanel (третий
   grid-ребёнок) при 2-колоночном .app проваливается в новую grid-ячейку и
   остаётся видимым, перекрывая контент (баг: toggleAi «не скрывает» чат). */
.app:not(.ai-open) .aipanel { display: none; }
.app.ai-open.wide-ai { grid-template-columns: var(--sidebar-w) 1fr; }
.app.ai-open.wide-ai .aipanel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(var(--aipanel-w), 92vw); box-shadow: var(--shadow); z-index: 26; }
.app.ai-open.wide-ai .scrim { display: block; }
.app.wide-ai .msg { max-width: min(720px, 92%); }
.aip-resize { position: absolute; top: 0; left: -5px; bottom: 0; width: 10px; cursor: col-resize; z-index: 27; display: none; }
.app.ai-open .aip-resize { display: block; }
.app.ai-open .aip-resize::after { content: ""; position: absolute; top: 50%; left: 4px; transform: translateY(-50%); width: 2px; height: 38px; border-radius: 2px; background: var(--border); transition: background .15s; }
.aip-resize:hover::after, .aip-resize.dragging::after { background: var(--accent); }
.aip-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.aip-head .a { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; flex: none; font-size: 1rem; }
.aip-head .nm { font-size: 1.02rem; font-weight: 500; }
.aip-head .st { font-size: .78rem; color: var(--earth); }
.aip-head .x { color: var(--text-dim); font-size: 1.2rem; line-height: 1; padding: .35rem; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.aip-head .x:hover { color: var(--text); background: var(--bg-hover); }
/* BS-134 follow-up: кнопка архива истории (🕘) ведёт в отдельный раздел
   «Архив диалогов» (go('chat-archive')) — стили тогглера .on больше не нужны. */
.aip-head .x#chatArchiveBtn { font-size: 1rem; }
/* BS-660: кнопка режима диалога (коуч) — активное состояние (флаг треда
   chat_mode='coach'): золотая подложка + видимый глиф. */
.aip-head .x#coachModeBtn { font-size: 1rem; }
.aip-head .x#coachModeBtn.on { color: var(--gold); background: rgba(231, 194, 122, .14); }
.aip-head .x#coachModeBtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.aip-head .x.expand { margin-left: auto; font-size: 1.05rem; }
.aip-head .x.expand .ic-wide { display: none; }
.app.wide-ai .aip-head .x.expand .ic-narrow { display: none; }
.app.wide-ai .aip-head .x.expand .ic-wide { display: inline; }
.aip-context { font-size: .82rem; color: var(--text-dim); padding: .6rem 1rem; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .45rem; }
.aip-context b { color: var(--accent-2); font-weight: 500; }
.aip-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .9rem; overscroll-behavior: contain; }
.msg { max-width: 90%; padding: .8rem 1rem; border-radius: 14px; font-size: .98rem; line-height: 1.65; }
.msg.ai { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.me { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
/* BS-637: переносы строк текста отправителя — pre-wrap. Пузырь «me» рендерится plain-ом
   (createTextNode / htmlspecialchars), без markdown; дефолтный white-space:normal
   визуально схлопывал \n в пробел — абзацы пользователя сливались в одну строку. */
.msg.me { white-space: pre-wrap; }
.msg .g { color: var(--gold); font-size: 1.15rem; }
.msg.typing { color: var(--text-dim); font-style: italic; }

/* BS-94: бейдж источника ответа Астры + честное сообщение об ошибке связи.
   Делает интеграцию боевого LLM видимой: реальный ответ (✦ Боевой ИИ) отличим от
   демонстрационного fallback (⚠), а сбой показывается открыто — canned-ответ больше
   не маскируется под настоящий разбор (прежняя js-заглушка localReply убрана). */
.msg .msg-src { margin-top: .6rem; font-size: .76rem; line-height: 1.4; border-top: 1px dashed var(--border); padding-top: .45rem; }
.msg .msg-src-label { font-weight: 600; }
.msg .msg-src.yandexai { color: var(--accent-2); }              /* реальный ответ LLM — брендовый акцент */
.msg .msg-src.mock { color: var(--gold); }                       /* демонстрационный fallback — внимание без тревоги */
/* BS-538: подвал ответа Астры — строка «напротив токенов»: бейдж msg-src слева,
   кнопки-иконки «копировать» (⧉) и «избранное» (☆/★) справа. Разделитель
   (dashed border) переносится с msg-src на строку msg-foot целиком; у bubble
   без кнопок (пузырь с одним бейджем невозможен — оба пути идут через msg-foot)
   вид прежний. Кнопки без надписей — иконка + title/aria-label. */
.msg .msg-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .6rem; border-top: 1px dashed var(--border); padding-top: .35rem; }
.msg .msg-foot .msg-src { margin-top: 0; border-top: none; padding-top: 0; }
.msg .msg-actions { display: flex; align-items: center; gap: .15rem; flex-shrink: 0; }
.msg .msg-act { font: inherit; font-size: .85rem; line-height: 1; color: var(--text-dim); background: transparent; border: none; border-radius: 6px; padding: .25rem .35rem; cursor: pointer; opacity: .75; transition: .12s; }
.msg .msg-act:hover { opacity: 1; color: var(--text); background: rgba(139, 126, 216, .14); }
.msg .msg-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.msg .msg-act.done { color: var(--earth); opacity: 1; }
.msg .msg-fav.on { color: var(--gold); opacity: 1; }             /* активная звезда — золотой канон */
.msg .msg-fav.on:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .msg .msg-act { transition: none; } }
.msg.error { border-color: rgba(255, 92, 92, .45); background: rgba(255, 92, 92, .08); color: var(--danger); }
.msg-retry { margin-left: .55rem; font: inherit; font-size: .8rem; color: var(--accent-2); background: rgba(139, 126, 216, .12); border: 1px solid rgba(139, 126, 216, .3); border-radius: 14px; padding: .25rem .75rem; cursor: pointer; transition: .12s; }
.msg-retry:hover { background: rgba(139, 126, 216, .22); }
/* BS-235: сообщение о необходимости пополнить токен-баланс (402 insufficient_tokens).
   Тон — золотой варнинг (не красная ошибка: это не сбой, а требование оплаты). */
.msg.need-tokens { border-color: rgba(232, 196, 105, .5); background: rgba(232, 196, 105, .08); color: var(--gold); }
.msg-topup { margin-left: .55rem; font: inherit; font-size: .8rem; color: var(--gold); background: rgba(232, 196, 105, .12); border: 1px solid rgba(232, 196, 105, .35); border-radius: 14px; padding: .25rem .75rem; cursor: pointer; transition: .12s; }
.msg-topup:hover { background: rgba(232, 196, 105, .22); }

/* BS-94: markdown-рендер ответов Астры (marked + DOMPurify → .msg-md). Скоупировано
   под .msg.ai, чтобы не задеть остальные блоки кабинета. Компактные отступы, т.к.
   пузырь сообщения сам по себе небольшой. */
.msg-md { font-size: .98rem; line-height: 1.65; word-wrap: break-word; overflow-wrap: anywhere; }

/* BS-134 follow-up: архив истории диалога — ОТДЕЛЬНЫЙ раздел кабинета
   (#view-chat-archive; вынесен из тесной ИИ-панели). Двухпанельная раскладка:
   слева список версий (метаданные, лёгкий запрос), справа — просмотр реплик
   выбранной версии (ленивая подгрузка по клику). Ответы ассистента рендерятся
   markdown (.msg-md) — форматирование сохраняется, как в живом чате. */
.arch-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
.arch-sidebar { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.arch-side-head { font-size: .85rem; font-weight: 600; color: var(--text); padding: .15rem .1rem; }
.arch-version-list { display: flex; flex-direction: column; gap: .45rem; max-height: 70vh; overflow-y: auto; padding-right: .15rem; overscroll-behavior: contain; }
.arch-item { display: flex; flex-direction: column; gap: .2rem; text-align: left; font: inherit; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .7rem; cursor: pointer; transition: border-color .12s, background .12s; }
.arch-item:hover { border-color: var(--accent); }
.arch-item.selected { border-color: var(--accent-2); background: rgba(139, 126, 216, .1); }
.arch-item .arch-item-t { font-size: .85rem; font-weight: 600; }
.arch-item.current .arch-item-t { color: var(--accent-2); }
.arch-item .arch-item-m { font-size: .74rem; color: var(--text-dim); }
.arch-main { min-width: 0; }
.arch-view { display: flex; flex-direction: column; gap: .7rem; max-height: 70vh; overflow-y: auto; padding: .2rem .35rem .5rem; overscroll-behavior: contain; }
.arch-view-head { font-size: .82rem; color: var(--text-dim); padding: .1rem .15rem .35rem; border-bottom: 1px dashed var(--border); }
.arch-hint, .arch-loading, .arch-empty { font-size: .9rem; color: var(--text-dim); padding: .6rem .15rem; }
.arch-msgs { display: flex; flex-direction: column; gap: .7rem; padding: .4rem 0 .6rem; }
.arch-msgs .msg { max-width: 92%; }
.arch-msgs .msg.ai .msg-md { font-size: .92rem; }
.arch-placeholder { text-align: center; padding: 2.2rem 1.4rem; }
.arch-placeholder .t { font-size: 1.05rem; font-weight: 600; margin-bottom: .5rem; }
.arch-placeholder p { color: var(--text-dim); font-size: .9rem; max-width: 520px; margin: 0 auto; }
@media (max-width: 860px) {
    .arch-layout { grid-template-columns: 1fr; }
    .arch-version-list { max-height: 32vh; }
    .arch-view { max-height: none; overflow: visible; }
}
.msg-md > *:first-child { margin-top: 0; }
.msg-md > *:last-child { margin-bottom: 0; }
.msg-md p { margin: .5rem 0; }
.msg-md h1, .msg-md h2, .msg-md h3, .msg-md h4 { margin: .9rem 0 .4rem; line-height: 1.3; font-weight: 600; color: var(--text); }
.msg-md h1 { font-size: 1.15rem; } .msg-md h2 { font-size: 1.08rem; } .msg-md h3 { font-size: 1rem; } .msg-md h4 { font-size: .96rem; }
.msg-md ul, .msg-md ol { margin: .5rem 0; padding-left: 1.35rem; }
.msg-md li { margin: .2rem 0; }
.msg-md strong { font-weight: 600; color: var(--text); }
.msg-md em { font-style: italic; }
.msg-md a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.msg-md a:hover { color: var(--accent); }
.msg-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 5px; padding: .08rem .32rem; }
.msg-md pre { margin: .6rem 0; padding: .7rem .85rem; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; }
.msg-md pre code { background: none; border: 0; padding: 0; }
.msg-md blockquote { margin: .6rem 0; padding: .2rem 0 .2rem .85rem; border-left: 3px solid var(--accent); color: var(--text-dim); }
.msg-md hr { border: 0; border-top: 1px solid var(--border); margin: .8rem 0; }
.msg-md table { border-collapse: collapse; margin: .6rem 0; font-size: .9rem; }
.msg-md th, .msg-md td { border: 1px solid var(--border); padding: .35rem .55rem; }
/* BS-261: вертикальные отступы блока подсказок в нижней панели ИИ-ассистента —
   padding-top/bottom 5px (было .7rem/0); горизонтальные 1rem сохранены от прежнего
   правила. Чипы — компактнее по вертикали: padding 0 10px. */
.aip-chips { display: flex; gap: .45rem; flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; padding-left: 1rem; padding-right: 1rem; }
.chip { font-size: .85rem; color: var(--accent-2); background: rgba(139, 126, 216, .12); border: 1px solid rgba(139, 126, 216, .25); border-radius: 16px; padding: 0 10px; cursor: pointer; transition: .12s; }
.chip:hover { background: rgba(139, 126, 216, .22); }
/* BS-624: чип наводящего вопроса из долговременной памяти ИИ — тонкий золотой
   блик (приглушённый gold-токен), отличает от динамических подсказок BS-450. */
.chip-memory { color: var(--gold, #e7c27a); background: rgba(231, 194, 122, .10); border-color: rgba(231, 194, 122, .28); }
.chip-memory:hover { background: rgba(231, 194, 122, .20); }
.aip-input { padding: .85rem; border-top: 1px solid var(--border); display: flex; gap: .55rem; align-items: flex-end; }
.aip-input textarea { flex: 1; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 10px; padding: .75rem .9rem; color: var(--text); font-family: inherit; font-size: .98rem; resize: none; min-height: 72px; max-height: 240px; line-height: 1.5; }
.aip-input textarea:focus { outline: none; border-color: var(--accent); }
.aip-input textarea::placeholder { color: var(--text-dim); }
/* BS-126: маскот «Астра» — анимированный персонаж над полем ввода. position:absolute
   разрешается относительно .aipanel (ближайший position:relative), поэтому bottom/left
   задают положение в рамках всей панели, а не узкой полосы ввода. fade — через .visible.
   Путь к картинке — абсолютный от корня сайта: CSS лежит в /public/assets/, относительный
   ./public/... разрешился бы в /public/assets/public/assets/... (двойной public/). */
.aip-input > .astra-mascot {
    position: absolute;
    bottom: 106px;
    left: 40px;
    height: 214px;
    width: 255px;
    background-image: url(/public/assets/images/astra4.gif);
    background-position-x: center;
    background-position-y: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .4s ease;
    cursor: pointer;
    z-index: 5;
}
.aip-input > .astra-mascot.visible { opacity: 1; }
.aip-send { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: grid; place-items: center; flex: none; font-size: 1.2rem; }
.aip-send:hover { box-shadow: 0 4px 16px rgba(139, 126, 216, .4); }
/* BS-261: .aip-cost (стоимость разбора в ноге ИИ-панели) удалён — строки не трогаем. */
.ai-fab { position: fixed; right: 1.4rem; bottom: 1.4rem; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 1.4rem; display: none; place-items: center; box-shadow: 0 8px 28px rgba(139, 126, 216, .5); z-index: 50; }
.app:not(.ai-open) .ai-fab { display: grid; }
.ai-fab .dot { position: absolute; top: 10px; right: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--earth); border: 2px solid var(--bg-app); }

/* ─── Совместимость (синастрия) ─── */
.syn-pair { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.syn-side { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.syn-side .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex: none; font-size: 1.1rem; }
.syn-side .avatar.ghost { background: var(--bg-card-2); border: 1px dashed var(--border); color: var(--text-dim); }
.syn-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.syn-nm { font-size: 1.05rem; font-weight: 500; }
.syn-big3 { color: var(--gold); font-size: .95rem; margin-top: .15rem; }
.syn-vs { font-size: 1.3rem; color: var(--text-dim); padding: 0 .2rem; }

.syn-pick { margin-top: 1.1rem; }
.syn-pick-lbl { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-bottom: .5rem; }
.syn-pick-list { display: flex; gap: .55rem; flex-wrap: wrap; }
.syn-pick-item { display: flex; align-items: center; gap: .55rem; padding: .42rem .65rem; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: .15s; text-decoration: none; color: var(--text); }
.syn-pick-item:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.syn-pick-item.active { border-color: var(--accent); background: var(--bg-active); }
.syn-pick-item .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; font-size: .85rem; flex: none; }
.syn-pick-meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.syn-pick-meta .t { font-size: .86rem; }
.syn-pick-meta .s { font-size: .7rem; color: var(--text-dim); }
.syn-pick-role { font-size: .64rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: .08rem .35rem; }
.syn-pick-item .pm-check { color: var(--accent); opacity: 0; }
.syn-pick-item.active .pm-check { opacity: 1; }

#synastry-wheel { display: flex; justify-content: center; align-items: center; min-height: 300px; }
#synastry-wheel svg { width: 100%; height: auto; max-width: 600px; }

.syn-links { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 760px) { .syn-links { grid-template-columns: 1fr 1fr; } }
.syn-link { display: flex; gap: .85rem; background: var(--bg-card-2); border: 1px solid var(--border); border-left: 3px solid var(--text-dim); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .8rem 1rem; }
.syn-link.tone-soft { border-left-color: var(--earth); }
.syn-link.tone-hard { border-left-color: var(--fire); }
.syn-link.tone-neutral { border-left-color: var(--accent); }
.syn-link-planets { display: flex; align-items: center; gap: .28rem; white-space: nowrap; font-size: 1.05rem; }
.syn-link-aspect { color: var(--gold); font-family: 'AstroGlyphs', sans-serif; margin: 0 .12rem; }
.syn-link-body { min-width: 0; }
.syn-link-title { font-size: .92rem; font-weight: 500; color: var(--accent-2); }
.syn-link-text { font-size: .84rem; color: var(--text); line-height: 1.55; margin-top: .15rem; }
.syn-link-orb { font-size: .72rem; color: var(--text-dim); margin-top: .2rem; }

.syn-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 760px) { .syn-summary { grid-template-columns: repeat(5, 1fr); } }
.syn-stat { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem; text-align: center; display: flex; flex-direction: column; gap: .15rem; }
.syn-stat .v { font-size: 1.2rem; font-weight: 500; color: var(--accent-2); }
.syn-stat .l { font-size: .7rem; color: var(--text-dim); }
.syn-stat.tone-soft .v { color: var(--earth); }
.syn-stat.tone-hard .v { color: var(--fire); }

/* ─── Настройки (BS-41) ─── */
.alert-ok { background: rgba(107, 207, 127, .12); border-color: var(--earth); color: #b6e8c2; }

/* Сетка карточек настроек: 2 колонки на широком, 1 — на узком (auto-fit). */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1.2rem; align-items: start; }
/* BS-252: 1fr = minmax(auto,1fr) — несжимаемый контент (длинный email, широкие
   <select>) растягивал трек и карточки «Профиль аккаунта»/«Предпочтения»
   выходили за пределы экрана. minmax(0,1fr) + min-width:0 на карточке
   отдают переполнение переносу/обёрткам, а не ширине грида. */
@media (max-width: 860px) { .settings-grid { grid-template-columns: minmax(0, 1fr); } }
.settings-grid > .card { min-width: 0; }

/* Строки «ключ — значение» в карточках профиля/подписки. */
.kv { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--border-soft); font-size: .9rem; }
.kv:last-of-type { border-bottom: none; }
.kv .k { color: var(--text-dim); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
/* BS-252: длинный email — неразрывная строка, без anywhere она распирала
   flex-строку и карточку за пределы экрана на мобильных. */
.kv .v { color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Бейдж тарифа/типа аккаунта. */
.plan-badge { display: inline-block; font-size: .74rem; font-weight: 500; background: rgba(212, 175, 55, .16); color: var(--gold); border: 1px solid rgba(212, 175, 55, .35); border-radius: 8px; padding: .18rem .6rem; }
.plan-badge.guest { background: rgba(139, 126, 216, .14); color: var(--accent-2); border-color: rgba(139, 126, 216, .35); }
.plan-badge.admin { background: rgba(107, 207, 127, .16); color: var(--earth); border-color: rgba(107, 207, 127, .38); } /* BS-59: админ партнёрской программы */
.plan-badge.max-linked { background: rgba(139, 126, 216, .14); color: var(--accent-2); border-color: rgba(139, 126, 216, .35); } /* BS-294: статус «Привязан» MAX-блока настроек */

/* Шапка активной личности в настройках. */
.set-person { display: flex; align-items: center; gap: .85rem; }
.set-person .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff; flex: none; font-size: 1.05rem; }
.set-person-meta .t { font-size: 1.02rem; font-weight: 500; }
.set-person-meta .s { font-size: .8rem; margin-top: .1rem; }

/* Пустое состояние (нет личностей). */
.set-empty { text-align: center; padding: 1.2rem .5rem; color: var(--text-dim); }
.set-empty-ico { font-size: 2rem; color: var(--accent); margin-bottom: .4rem; }
.set-empty p { margin: 0 auto 1rem; max-width: 360px; line-height: 1.6; }

.set-note { font-size: .8rem; line-height: 1.55; margin: .9rem 0 0; }
.card h3.sub { margin-top: 1.4rem; }

/* Сегментированный переключатель (режим интерфейса и подобные бинарные выборы). */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 560px) { .seg { grid-template-columns: 1fr; } }
.seg-opt { position: relative; display: block; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.seg-body { display: flex; flex-direction: column; gap: .15rem; background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .7rem .85rem; transition: .15s; }
.seg-body .seg-t { font-size: .95rem; font-weight: 500; color: var(--text); }
.seg-body .seg-s { font-size: .76rem; color: var(--text-dim); line-height: 1.4; }
.seg-opt:hover .seg-body { border-color: var(--accent); }
.seg-opt input:focus-visible + .seg-body { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.seg-opt input:checked + .seg-body { border-color: var(--accent); background: var(--bg-active); }
.seg-opt input:checked + .seg-body .seg-t { color: var(--accent-2); }

/* ─── Системы личности (BS-39) ─── */

/* Ведущая карточка: темперамент + полярность (суть «типа» личности). */
.typo-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: center; }
.typo-hero > .glow { position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px; background: radial-gradient(circle, rgba(139, 126, 216, .18), transparent 65%); pointer-events: none; }
.typo-hero-main { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.typo-glyph { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; flex: none; background: var(--bg-card-2); border: 1px solid var(--border); }
/* Цвет глифа темперамента — по его стихии. */
.typo-glyph.tem-fire { color: var(--fire); background: rgba(255, 107, 74, .12); border-color: rgba(255, 107, 74, .35); }
.typo-glyph.tem-earth { color: var(--earth); background: rgba(107, 207, 127, .12); border-color: rgba(107, 207, 127, .35); }
.typo-glyph.tem-air { color: var(--air); background: rgba(126, 200, 227, .12); border-color: rgba(126, 200, 227, .35); }
.typo-glyph.tem-water { color: var(--water); background: rgba(107, 138, 255, .12); border-color: rgba(107, 138, 255, .35); }
.typo-hero-body { min-width: 0; }
.typo-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.typo-title { font-size: 1.45rem; font-weight: 500; color: var(--accent-2); margin: .15rem 0 .4rem; letter-spacing: .01em; }
.typo-text { font-size: .9rem; line-height: 1.6; color: var(--text); max-width: 56ch; }

/* Полярность: двухцветная полоса Ян/Инь + легенда. */
.typo-hero-side { min-width: 220px; }
.typo-pol-bar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.pol-fill { display: block; height: 100%; }
.pol-fill.yang { background: linear-gradient(90deg, var(--fire), var(--gold)); }
.pol-fill.yin { background: linear-gradient(90deg, var(--water), var(--accent)); }
.typo-pol-legend { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .76rem; color: var(--text-dim); }
.typo-pol-legend .pol-leg.yang { color: var(--gold); }
.typo-pol-legend .pol-leg.yin { color: var(--water); }

/* Сетка двух карточек балансов (стихии / кресты). */
.sys-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }

/* Строка баланса: иконка · название · полоса · счётчик. */
.el-row { display: flex; align-items: center; gap: .7rem; padding: .35rem 0; }
.el-ico { width: 24px; text-align: center; flex: none; }
.el-name { width: 96px; flex: none; font-size: .88rem; color: var(--text); }
.el-bar { flex: 1; height: 10px; background: var(--bg-card-2); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.el-fill { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }
.el-count { width: 22px; text-align: right; flex: none; font-size: .86rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Цвета заливок: стихии. */
.el-fill.el-fire, .el-ico.el-fire { color: var(--fire); }
.el-fill.el-fire { background: linear-gradient(90deg, rgba(255, 107, 74, .35), var(--fire)); }
.el-fill.el-earth, .el-ico.el-earth { color: var(--earth); }
.el-fill.el-earth { background: linear-gradient(90deg, rgba(107, 207, 127, .35), var(--earth)); }
.el-fill.el-air, .el-ico.el-air { color: var(--air); }
.el-fill.el-air { background: linear-gradient(90deg, rgba(126, 200, 227, .35), var(--air)); }
.el-fill.el-water, .el-ico.el-water { color: var(--water); }
.el-fill.el-water { background: linear-gradient(90deg, rgba(107, 138, 255, .35), var(--water)); }
/* Цвета заливок: кресты (оттенки акцента). */
.el-ico.mod-card { color: var(--fire); }
.el-fill.mod-card { background: linear-gradient(90deg, rgba(255, 107, 74, .35), var(--fire)); }
.el-ico.mod-fix { color: var(--gold); }
.el-fill.mod-fix { background: linear-gradient(90deg, rgba(212, 175, 55, .35), var(--gold)); }
.el-ico.mod-mut { color: var(--air); }
.el-fill.mod-mut { background: linear-gradient(90deg, rgba(126, 200, 227, .35), var(--air)); }

/* Сетка характеристик переиспользует .analysis-grid (см. ниже — варианты). */
.typo-grid .analysis-value { font-size: 1rem; }

/* Дорожная карта систем: карточки статусов. */
.sys-roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; min-width: 0; }
/* BS-252: на вьюпортах уже 420px несжимаемый minmax-трек выталкивал карточки
   «Дорожной карты систем» за пределы экрана. На мобильных — одна колонка на
   всю ширину контейнера (minmax(0,1fr) не даёт контенту раздувать трек). */
@media (max-width: 480px) {
    .sys-roadmap { grid-template-columns: minmax(0, 1fr); }
}
.sys-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.sys-card .ico { font-size: 1.8rem; }
.sys-card .nm { font-size: 1.05rem; font-weight: 500; }
.sys-card .ds { font-size: .82rem; color: var(--text-dim); line-height: 1.55; flex: 1; }
.sys-card .ft { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }
.sys-card .status { font-size: .74rem; font-weight: 500; border-radius: 8px; padding: .18rem .6rem; }
.sys-card .status.soon { background: var(--border); color: var(--text-dim); }
.sys-card .status.pro { background: rgba(212, 175, 55, .18); color: var(--gold); border: 1px solid rgba(212, 175, 55, .35); }
.sys-card .status.active { background: rgba(107, 207, 127, .16); color: var(--earth); border: 1px solid rgba(107, 207, 127, .35); }
.sys-card.sys-active { border-color: rgba(107, 207, 127, .35); }
.sys-card .status.locked { background: rgba(139, 126, 216, .16); color: var(--accent-2); border: 1px solid rgba(139, 126, 216, .35); }
.sys-card.sys-locked { border-color: rgba(139, 126, 216, .3); opacity: .92; }
.sys-card .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════ Gene Keys (раздел кабинета, BS-52) ═══════════════════════ */
.gk-preview-badge { background: rgba(139, 126, 216, .14); color: var(--accent-2); border-color: rgba(139, 126, 216, .35); }

.gk-hero { position: relative; overflow: hidden; }
.gk-hero > .glow { position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(212, 175, 55, .16), transparent 65%); pointer-events: none; }
.gk-hero-main { display: flex; align-items: center; gap: 1.2rem; position: relative; }
.gk-num { flex: 0 0 auto; width: 76px; height: 76px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(139, 126, 216, .25), rgba(212, 175, 55, .18));
    border: 1px solid rgba(212, 175, 55, .35); border-radius: 18px;
    font-size: 1.5rem; font-weight: 600; color: var(--gold); letter-spacing: .02em; }
.gk-hero-body { min-width: 0; }
.gk-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.gk-title { font-size: 1.4rem; font-weight: 500; color: var(--text); margin: .2rem 0 .5rem; }
.gk-gift-line { font-size: .92rem; color: var(--text); line-height: 1.6; margin: 0 0 .7rem; }
.gk-gift-line b { color: var(--earth); }
.gk-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--text-dim); }
.gk-hero-meta b { color: var(--accent-2); }

.gk-spheres { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.gk-sphere { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.gk-sphere-head { display: flex; align-items: baseline; gap: .6rem; }
.gk-sphere-num { font-size: 1rem; font-weight: 600; color: var(--gold); }
.gk-sphere-name { font-size: 1.08rem; font-weight: 500; color: var(--text); }
.gk-sphere-meta { display: flex; align-items: center; gap: .6rem; }
.gk-sphere-meta b { color: var(--accent-2); font-size: .9rem; }
.gk-lvl-badge { font-size: .68rem; border-radius: 8px; padding: .12rem .5rem; font-weight: 500; }
.gk-lvl-badge.lvl-conscious { background: rgba(139, 126, 216, .2); color: var(--accent-2); }
.gk-lvl-badge.lvl-unconscious { background: var(--border); color: var(--text-dim); }
.gk-sphere-sub { font-size: .76rem; }
.gk-sphere-sub2 { font-size: .76rem; font-style: italic; margin-bottom: .4rem; }

.gk-level { display: flex; gap: .6rem; align-items: baseline; padding: .28rem 0; border-top: 1px dashed var(--border); }
.gk-level:first-of-type { border-top: none; }
.gk-lv-tag { flex: 0 0 64px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gk-lv-body { font-size: .84rem; line-height: 1.5; color: var(--text); }
.gk-lv-kw { color: var(--text); }
.gk-lv-text { color: var(--text-dim); }
.gk-lv-shadow .gk-lv-tag { color: #e0857a; }
.gk-lv-gift   .gk-lv-tag { color: var(--earth); }
.gk-lv-siddhi .gk-lv-tag { color: var(--accent-2); }

.gk-foot { font-size: .76rem; line-height: 1.6; margin: .4rem .2rem 0; }

/* Граф сфер хологенетического профиля (BS-529, порт рендера adamblvck):
   самодостаточный тёмный SVG — вписываем в карточку раздела. */
.gk-graph { max-width: 640px; margin: 0 auto; }
.gk-graph svg { width: 100%; height: auto; display: block; }
/* Узлы с подсказкой Астры (канон data-ai-hint BS-468): клик → модалка вопроса. */
.gk-graph .gk-sphere-g[data-ai-hint] { cursor: pointer; }

@media (max-width: 860px) {
    .gk-spheres { grid-template-columns: 1fr; }
    .gk-hero-main { gap: .9rem; }
    .gk-num { width: 64px; height: 64px; font-size: 1.3rem; }
}
@media (max-width: 560px) {
    .gk-title { font-size: 1.2rem; }
    .gk-lv-tag { flex-basis: 54px; }
}

/* ════════════════════ Enneagram (BS-50) ════════════════════ */
/* Цвета трёх центров: голова (индиго), сердце (бронза/золото), тело (огонь). */
.enn-c-head  { --enn-c: var(--accent-2); }
.enn-c-heart { --enn-c: var(--gold); }
.enn-c-body  { --enn-c: var(--fire); }

.enn-badge { background: rgba(139, 126, 216, .14); color: var(--accent-2); border-color: rgba(139, 126, 216, .35); }

.enn-hero { position: relative; overflow: hidden; }
.enn-hero > .glow { position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(139, 126, 216, .18), transparent 70%); pointer-events: none; }
.enn-hero-main { display: flex; align-items: center; gap: 1.2rem; position: relative; }
.enn-num { flex: 0 0 auto; width: 76px; height: 76px; display: grid; place-items: center;
    font-size: 2rem; font-weight: 600; color: var(--enn-c, var(--accent-2));
    background: color-mix(in srgb, var(--enn-c, var(--accent-2)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--enn-c, var(--accent-2)) 38%, transparent);
    border-radius: 18px; }
.enn-hero-body { min-width: 0; }
.enn-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.enn-title { font-size: 1.4rem; font-weight: 500; color: var(--text); margin: .2rem 0 .5rem; }
.enn-wing { font-size: .9rem; color: var(--accent-2); font-weight: 400; }
.enn-desc { font-size: .92rem; color: var(--text); line-height: 1.6; margin: 0 0 .7rem; }
.enn-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--text-dim); }
.enn-hero-meta b { color: var(--accent-2); }

.enn-ranking { display: flex; flex-direction: column; gap: .35rem; }
.enn-row { display: grid; grid-template-columns: 30px 1fr minmax(140px, 240px) 44px; align-items: center; gap: .7rem; padding: .22rem 0; }
.enn-rank-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-weight: 600;
    color: var(--enn-c, var(--accent-2)); background: color-mix(in srgb, var(--enn-c, var(--accent-2)) 12%, transparent); }
.enn-rank-name { font-size: .9rem; color: var(--text); }
.enn-row.lead .enn-rank-name { color: var(--accent-2); font-weight: 500; }
.enn-bar { height: 8px; background: var(--bg-card-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.enn-fill { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--enn-c, var(--accent-2)) 45%, transparent), var(--enn-c, var(--accent-2))); border-radius: 4px; }
.enn-rank-score { font-size: .8rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.enn-legend { display: flex; gap: 1.1rem; margin-top: .8rem; font-size: .78rem; }
.enn-leg { color: var(--enn-c, var(--text-dim)); }

.enn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.enn-center { border-left: 3px solid var(--enn-c, var(--border)); padding: .55rem 0 .55rem .9rem; margin-bottom: .7rem; }
.enn-center-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.enn-center-glyph { font-size: 1.1rem; }
.enn-center-types { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.enn-type-chip { font-size: .8rem; padding: .18rem .6rem; border-radius: 14px; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text); }
.enn-type-chip.intritype { border-color: color-mix(in srgb, var(--enn-c, var(--accent-2)) 45%, var(--border)); color: var(--accent-2); }
.enn-type-chip.lead { background: color-mix(in srgb, var(--enn-c, var(--accent-2)) 14%, var(--bg-card-2)); color: var(--text); font-weight: 500; }

.enn-tritype { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.enn-tri-card { background: var(--bg-card-2); border: 1px solid color-mix(in srgb, var(--enn-c, var(--border)) 30%, var(--border)); border-radius: var(--radius); padding: .9rem; text-align: center; }
.enn-tri-top { display: flex; justify-content: center; align-items: baseline; gap: .5rem; }
.enn-tri-num { font-size: 1.8rem; font-weight: 600; color: var(--enn-c, var(--accent-2)); }
.enn-tri-glyph { font-size: 1.1rem; opacity: .8; }
.enn-tri-name { font-size: .95rem; color: var(--text); margin-top: .3rem; }
.enn-tri-center { font-size: .74rem; }

.enn-wings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.enn-wing-card { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.enn-wing-card.active { border-color: rgba(139, 126, 216, .4); background: rgba(139, 126, 216, .06); }
.enn-wing-top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.enn-wing-num { font-size: 1.3rem; font-weight: 600; color: var(--accent-2); }
.enn-wing-name { font-size: 1rem; color: var(--text); }
.enn-wing-tag { font-size: .68rem; background: rgba(107, 207, 127, .16); color: var(--earth); border-radius: 8px; padding: .1rem .5rem; margin-left: auto; }
.enn-wing-note { font-size: .84rem; line-height: 1.55; margin: .45rem 0 0; }

.enn-lines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.enn-line { background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; border-top: 3px solid var(--enn-c, var(--border)); }
.enn-line.enn-grow { border-top-color: var(--earth); }
.enn-line.enn-stress { border-top-color: var(--fire); }
.enn-line-dir { font-size: .82rem; color: var(--text-dim); display: flex; align-items: center; gap: .5rem; }
.enn-line-tag { font-size: .68rem; border-radius: 8px; padding: .1rem .5rem; font-weight: 500; }
.enn-grow .enn-line-tag { background: rgba(107, 207, 127, .16); color: var(--earth); }
.enn-stress .enn-line-tag { background: rgba(255, 107, 74, .15); color: var(--fire); }
.enn-line-name { font-size: 1.02rem; color: var(--accent-2); font-weight: 500; margin: .3rem 0 .35rem; }
.enn-line p { font-size: .84rem; line-height: 1.55; margin: 0; }

.enn-corr-table { display: flex; flex-direction: column; gap: .12rem; }
.enn-corr-row { display: grid; grid-template-columns: 28px 1fr 28px 1fr 44px; align-items: center; gap: .6rem; padding: .3rem .35rem; border-radius: 8px; }
/* BS-251: строка соответствий не переносится внутрь скролл-обёртки —
   прокручивается целиком (как строка таблицы). */
.table-responsive .enn-corr-row { white-space: nowrap; }
.table-responsive .enn-corr-name { overflow: hidden; text-overflow: ellipsis; }
.enn-corr-row.lead { background: rgba(139, 126, 216, .08); }
.enn-corr-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-size: .82rem; font-weight: 600; color: var(--text-dim); background: var(--bg-card-2); }
.enn-corr-num.lead { color: #fff; background: var(--accent-2); }
.enn-corr-name { font-size: .88rem; color: var(--text); }
.enn-corr-row.lead .enn-corr-name { color: var(--accent-2); font-weight: 500; }
.enn-corr-glyph { font-size: 1.1rem; color: var(--accent-2); text-align: center; }
.enn-corr-planet { font-size: .84rem; color: var(--text-dim); display: flex; align-items: center; gap: .25rem; }
.enn-corr-score { font-size: .8rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.enn-instinct { font-size: .82rem; line-height: 1.6; margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--border); }
.enn-foot { font-size: .76rem; line-height: 1.6; margin: .4rem .2rem 0; }

@media (max-width: 860px) {
    .enn-grid-2 { grid-template-columns: 1fr; }
    .enn-lines, .enn-wings { grid-template-columns: 1fr; }
    .enn-hero-main { gap: .9rem; }
    .enn-num { width: 64px; height: 64px; font-size: 1.5rem; }
}
@media (max-width: 560px) {
    .enn-title { font-size: 1.2rem; }
    .enn-tritype { grid-template-columns: 1fr; }
    .enn-row { grid-template-columns: 26px 1fr 44px; }
    .enn-row .enn-bar { grid-column: 1 / -1; order: 5; }
}

/* ── Этап 2: карточка «тип по самооценке» + модал теста ── */
.enn-test { position: relative; }
.enn-test-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.enn-test-result { display: flex; gap: 1rem; align-items: flex-start; }
.enn-test-result .enn-tri-num { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center;
    font-size: 1.8rem; font-weight: 600; color: var(--enn-c, var(--accent-2));
    background: color-mix(in srgb, var(--enn-c, var(--accent-2)) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--enn-c, var(--accent-2)) 38%, transparent); border-radius: 16px; }
.enn-test-result-body { min-width: 0; }
.enn-test-name { font-size: 1.2rem; font-weight: 500; color: var(--text); }
.enn-test-desc { font-size: .9rem; line-height: 1.6; margin: .35rem 0 .5rem; }
.enn-test-tritype { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; margin-bottom: .5rem; }
.enn-match { font-size: .84rem; line-height: 1.55; font-style: italic; border-left: 2px solid var(--accent-2); padding-left: .7rem; margin: .3rem 0 .6rem; }
.enn-test-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.enn-test-date { font-size: .76rem; }

/* Модал теста */
.enn-test-modal { width: min(720px, 96vw); padding: 20px; }
.enn-test-intro { font-size: .86rem; line-height: 1.6; padding: .2rem 0 .9rem; border-bottom: 1px solid var(--border); margin-bottom: .8rem; }
.enn-test-list { display: flex; flex-direction: column; gap: .15rem; }
.enn-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .2rem; border-bottom: 1px solid var(--border-soft); }
.enn-item-text { display: flex; gap: .6rem; font-size: .9rem; line-height: 1.45; color: var(--text); flex: 1; min-width: 0; }
.enn-item-num { flex: 0 0 auto; color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .8rem; min-width: 20px; }
.enn-item-scale { display: flex; gap: .15rem; flex: 0 0 auto; }
.enn-radio { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); font-size: .82rem; color: var(--text-dim); transition: background .12s, color .12s, border-color .12s; }
.enn-radio input { position: absolute; opacity: 0; pointer-events: none; }
.enn-radio:hover { border-color: var(--accent-2); color: var(--accent-2); }
.enn-radio:has(input:checked) { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.enn-test-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .9rem; margin-top: .6rem; border-top: 1px solid var(--border); }
.enn-test-progress { font-size: .8rem; }
.enn-test-err { color: var(--fire); font-size: .82rem; }

@media (max-width: 560px) {
    .enn-item { flex-direction: column; align-items: stretch; gap: .45rem; }
    .enn-item-scale { justify-content: space-between; }
    .enn-radio { flex: 1; }
    .enn-test-foot { flex-direction: column; align-items: stretch; }
}

/* Адаптивность раздела «Системы личности». */
@media (max-width: 860px) {
    .typo-hero { grid-template-columns: 1fr; }
    .typo-hero-side { min-width: 0; }
    .sys-balances { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .typo-title { font-size: 1.2rem; }
    .el-name { width: 76px; font-size: .82rem; }
    .typo-hero-main { gap: .8rem; }
    .typo-glyph { width: 56px; height: 56px; font-size: 1.7rem; border-radius: 14px; }
}

/* Адаптивность */
@media (max-width: 1180px) {
    .app.ai-open { grid-template-columns: var(--sidebar-w) 1fr; }
    .aipanel { position: fixed; top: var(--topbar-h); right: 0; bottom: 0; width: min(var(--aipanel-w), 86vw); box-shadow: var(--shadow); }
}
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: 260px; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow); }
    .app.nav-open .sidebar { transform: none; }
    .hamburger { display: block; }
    .brand .tag { display: none; }
    .person-pill .who .bd, .person-pill .big3 { display: none; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .main-scroll { padding: 1.1rem 1rem 5rem; }
    .big3-row { grid-template-columns: 1fr 1fr; }
    /* BS-37: топбар на планшетной ширине не умещал все элементы — сжимаем интервалы
       и прячем длинный email (выход остаётся иконкой ⎋ с title) и кнопку настроек
       («Настройки» остаются в drawer-навигации). Десктоп не затронут. */
    .topbar { gap: .6rem; padding: 0 .7rem; }
    .person-pill { gap: .45rem; padding: .32rem .6rem .32rem .35rem; }
    .person-pill .avatar { width: 30px; height: 30px; font-size: .85rem; }
    /* BS-252: меню личностей на мобильных раскрывается от ЛЕВОГО края экрана.
       Раньше absolute left:0 отсчитывался от .person-switch — плашка прижата
       вправо spacer'ом, поэтому блок «Личности в аккаунте» рос вправо от
       середины экрана и выходил за его пределы. Fixed + left:0/right:0
       растягивает панель на весь вьюпорт; длинный список личностей
       скроллится внутри #pmList (шапка и «Добавить личность» на виду). */
    .person-menu {
        position: fixed; top: var(--topbar-h); left: 0; right: 0; min-width: 0;
        border-radius: 0 0 var(--radius) var(--radius);
    }
    .person-menu #pmList { max-height: calc(100vh - var(--topbar-h) - 12rem); overflow-y: auto; }
    .tb-settings { display: none; }
}
@media (max-width: 560px) {
    /* BS-37: узкий телефонный экран. Приоритет контенту: бренд сворачивается до
       глифа ✦, плашка токенов и аватар переключателя личностей уплотняются.
       Всё, что осталось, — умещается в одну строку без горизонтального скролла. */
    .brand .name, .brand .tag { display: none; }
    .topbar { gap: .45rem; }
    .person-pill .who .nm { font-size: .82rem; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .person-pill .caret { display: none; }
    .icon-btn { width: 34px; height: 34px; font-size: .95rem; }
    .tb-pill { padding: .38rem .6rem; font-size: .8rem; gap: .3rem; }
    .quick-grid { grid-template-columns: 1fr; }
    .big3-row { grid-template-columns: 1fr; }
    .page-head h1 { font-size: 1.25rem; }
}
/* BS-37: очень узкие экраны (<400px) — имя личности прячем, остаётся аватар-кнопка
   (меню личностей полностью доступно по клику). */
@media (max-width: 400px) {
    .person-pill .who { display: none; }
    .person-pill .caret { display: none; }
    .person-pill { padding: .3rem .35rem; }
}
.scrim { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 15; }
.app.nav-open .scrim { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   Публичная оферта (/oferta) — BS-45.
   Статическая юридическая страница: переиспользует дизайн-токены кабинета, но
   живёт вне каркаса .app, поэтому снимаем «запрет прокрутки» body и даём свой
   topbar + читабельную центральную колонку. Текст перенесён из docs/oferta.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Каркас кабинета глушит прокрутку body (скролл в .main-scroll). Оферта —
   обычный документ: возвращаем нативную прокрутку страницы. */
body.oferta-page { overflow: auto; }

/* Верхняя панель оферты: та же высота/фон, что у .topbar кабинета, но sticky —
   «← В кабинет» всегда под рукой при прокрутке длинного текста. */
.oferta-topbar {
    position: sticky; top: 0;
    height: var(--topbar-h);
    background: var(--bg-topbar);
}
.oferta-topbar .brand { text-decoration: none; }
.oferta-topbar .brand:hover .name { color: var(--accent-2); }

/* Центральная читабельная колонка. */
.oferta-main { max-width: 860px; margin: 0 auto; padding: 2.4rem 1.6rem 6rem; }
.oferta-doc { font-size: .96rem; line-height: 1.75; color: var(--text); }

/* Шапка документа. */
.oferta-head { margin-bottom: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.oferta-eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-2); margin-bottom: .5rem; }
.oferta-doc h1 { font-size: 2rem; font-weight: 400; letter-spacing: .01em; line-height: 1.2; }
.oferta-service { margin-top: .7rem; font-size: 1rem; color: var(--text); font-weight: 500; }
.oferta-edition { margin-top: .25rem; font-size: .82rem; color: var(--text-dim); }

/* Вводные абзацы после шапки — чуть крупнее и приглушены, как лид. */
.oferta-lead { font-size: 1rem; color: var(--text-dim); margin-bottom: 1rem; }

/* Заголовки разделов. */
.oferta-doc h2 { font-size: 1.18rem; font-weight: 500; color: var(--accent-2); margin: 0 0 .9rem; letter-spacing: .01em; }
.oferta-doc h2.warn { color: var(--fire); }
.oferta-doc h2 .onum { color: var(--gold); margin-right: .15rem; }

/* Нумерация пунктов (2.1., 3.1. …) — акцент для сканирования текста. */
.oferta-doc p { margin: 0 0 .85rem; }
.oferta-doc p .onum { color: var(--accent); font-weight: 500; margin-right: .2rem; }

/* Маркированные списки. */
.oferta-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.oferta-list li { position: relative; padding: .25rem 0 .25rem 1.4rem; }
.oferta-list li::before { content: "—"; position: absolute; left: 0; top: .25rem; color: var(--accent); }

/* Разделитель между разделами (соответствует --- в docs/oferta.md). */
.oferta-sep { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Предупреждающая выноска (существенные условия, раздел 3). */
.oferta-warn { background: rgba(255, 92, 92, .1); border: 1px solid var(--danger); color: #ffb0b0; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: 1.1rem; }

/* Финальная курсивная строка. */
.oferta-foot { margin-top: 1.6rem; text-align: center; color: var(--text-dim); font-size: .92rem; }

/* На узких экранах колонка на всю ширину, шрифт заголовка мельче. */
@media (max-width: 640px) {
    .oferta-main { padding: 1.6rem 1rem 4rem; }
    .oferta-doc h1 { font-size: 1.6rem; }
    .oferta-doc h2 { font-size: 1.06rem; }
    .oferta-topbar .brand .tag { display: none; }
}

/* ════════ BS-600: публичные юрдокументы (комплект BS-595, 152-ФЗ) ════════
   Шаблон views/legal_doc.php переиспользует классы .oferta-* выше; здесь —
   только то, чего у оферты нет: видимая стилизация ссылок в тексте
   (перекрёстные ссылки между документами) и навигационная строка «Документы
   сервиса» в конце каждой страницы. */
.oferta-doc a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(154, 123, 255, .35); word-break: break-all; }
.oferta-doc a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.legal-docs-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; color: var(--text-dim); font-size: .88rem; }
.legal-docs-nav a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(154, 123, 255, .35); white-space: nowrap; }
.legal-docs-nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.legal-docs-t { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }

/* Блок согласий в модале авторизации кабинета (panel_auth.php; на /login —
   своя копия стилей в inline-CSS самой страницы). Две независимые отметки +
   ссылка на политику без чекбокса (ч. 2 ст. 18.1 152-ФЗ; ч. 1 ст. 9 в ред.
   с 01.09.2025 — согласие отдельным документом, отметки пустые по умолчанию).
   Follow-up владельца: при заблокированном действии границы плашек мигают
   (shake + border-вспышки, как в inline-версии login.php). */
.auth-consents { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.auth-consents.consent-needed { animation: consent-shake .9s ease; }
@keyframes consent-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.auth-consents.consent-needed .auth-consent-row { animation: consent-border .9s ease; }
@keyframes consent-border { 0%, 100% { border-color: var(--border); } 20%, 60% { border-color: #E88BC2; } 40%, 80% { border-color: #E7C27A; } }

/* ════════ BS-36: авторизация (вход/регистрация/выход) ════════ */

/* ════════ BS-36: авторизация (вход/регистрация/выход) ════════ */

/* Кнопка «Войти» в шапке (гость) — пилюля в стиле .tb-pill, но с акцентом. */
.tb-login {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .9rem; border-radius: 40px; font-size: .85rem; font-weight: 500;
    background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
    border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: .15s;
}
.tb-login:hover { box-shadow: 0 6px 24px rgba(139, 126, 216, .4); }
.tb-login .ico { font-size: .9rem; }

/* (BS-37 follow-up №3: чип email в шапке убран целиком — решение владельца;
   email виден в «Настройках» и в title кнопки выхода ⎋. Стили чипа удалены
   как мёртвые.) */

/* Переключатель режима в auth-модале + подпись. */
.auth-switch { margin-top: 1rem; font-size: .85rem; color: var(--text-dim); text-align: center; }
.auth-switch a { color: var(--accent-2); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-note { font-size: .78rem; margin-top: .8rem; text-align: center; line-height: 1.4; }

/* BS-44: кнопка «Войти через VK ID» (OAuth) над email-формой + разделитель. */
.btn-vk { width: 100%; justify-content: center; background: #0077FF; color: #fff; text-decoration: none; }
.btn-vk:hover { background: #0066DD; color: #fff; box-shadow: 0 6px 24px rgba(0, 119, 255, .35); }
/* BS-144: кнопка «Войти через Яндекс» (Yandex ID) рядом с VK. */
.btn-ya { width: 100%; justify-content: center; background: #FC3F1D; color: #fff; text-decoration: none; margin-top: .6rem; }
.btn-ya:hover { background: #E33512; color: #fff; box-shadow: 0 6px 24px rgba(252, 63, 29, .35); }
.auth-divider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--text-dim); font-size: .8rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-divider span { white-space: nowrap; }

/* BS-600: строки блока согласий в auth-модале (panel_auth.php). Враппер
   .auth-consents объявлен в блоке юрдокументов выше. */
/* Рамка строки — как у плашек .auth-consent на /login (нужна, чтобы мигание
   границ при consent-needed было видно; follow-up владельца BS-600). */
.auth-consent-row { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; line-height: 1.45; color: var(--text-dim); cursor: pointer; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.auth-consent-row input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; accent-color: var(--accent-2); cursor: pointer; }
.auth-consent-row a, .auth-consent-policy a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(231, 194, 122, .35); }
.auth-consent-row a:hover, .auth-consent-policy a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.auth-consent-policy { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--text-faint); }

/* ═══════════════════════════════════════════════════════════════════════════
   Админ-панель партнёрской программы (BS-59). Переиспользует .stat-row/.stat,
   table.bodies, .card, .kv, .tag, .alert — здесь только её специфичные элементы.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Горизонтальный скролл широких таблиц на узких экранах (код/даты не сжимаются). */
.admin-table-wrap { overflow-x: auto; }
table.admin-table td .who { font-weight: 500; }
table.admin-table td .sub,
table.admin-table td .muted.sub { font-size: .76rem; }
tr.admin-row { cursor: pointer; }              /* вся строка кликабельна → детали */
tr.admin-row:hover td { background: rgba(139, 126, 216, .08); }

/* Пагинатор под таблицей партнёров. */
.admin-pager { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; font-size: .82rem; }

/* Ленты «топ-10» и «действия админов» — компактные строки. */
.admin-mini-list { display: flex; flex-direction: column; gap: .15rem; }
.admin-mini { display: flex; align-items: center; gap: .7rem; padding: .5rem .2rem; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.admin-mini:last-child { border-bottom: none; }
.admin-mini:hover { background: rgba(139, 126, 216, .06); }
.admin-mini .rk { width: 1.4rem; text-align: center; color: var(--text-dim); font-size: .8rem; }
.admin-mini .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-mini .amt { color: var(--gold); font-weight: 500; }

.admin-act { padding: .55rem .2rem; border-bottom: 1px solid var(--border-soft); font-size: .86rem; }
.admin-act:last-child { border-bottom: none; }
.admin-act .meta { font-size: .8rem; margin-top: .15rem; }
.admin-act .ts { font-size: .74rem; margin-top: .2rem; }

/* Селект смены статуса реферала в таблице деталей — миниатюрный, в духе .status. */
.adm-ref-status {
    font-size: .78rem; background: var(--bg-card-2); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; padding: .25rem .4rem;
}
.adm-ref-status:disabled { opacity: .5; }

/* Модал деталей партнёра — плотнее, без двойных рамок вложенных .card. */
#adminDetailsBody .card.tight { background: none; border: none; padding: .2rem 0; box-shadow: none; }
#adminDetailsBody .card.tight + .card.tight { border-top: 1px solid var(--border-soft); margin-top: .8rem !important; padding-top: .8rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Админ-панель «Финансы» (BS-109). Переиспользует .stat-row/.stat, .tabs/.tab,
   table.bodies/.admin-table, .card, .form-grid/.fg, .btn — здесь только её
   специфичные элементы (фильтры, бейджи статусов/направлений, итоговая строка).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Полоса фильтров над каждой таблицей: период/статус/email + кнопки. */
.fin-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    align-items: end;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.2rem;
}
.fin-filters .fg.fin-actions { flex-direction: row; gap: .5rem; }
.fin-filters .fg.fin-actions .btn { align-self: auto; }

/* Бейдж статуса платежа: ok=зелёный, wait=серый, fail=красный. */
.fin-status {
    display: inline-block; font-size: .76rem; font-weight: 500;
    padding: .18rem .6rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.fin-status.ok   { background: rgba(107, 207, 127, .16); color: var(--earth); border-color: rgba(107, 207, 127, .35); }
.fin-status.wait { background: var(--bg-card-2); color: var(--text-dim); border-color: var(--border); }
.fin-status.fail { background: rgba(255, 92, 92, .14); color: var(--danger); border-color: rgba(255, 92, 92, .35); }
/* BS-259: статус «амбассадор» — золотой (особый партнёрский статус: 50% бонусов). */
.fin-status.amb  { background: rgba(227, 178, 60, .14); color: var(--gold); border-color: rgba(227, 178, 60, .4); }

/* Метка направления операции с токенами и цвет суммы: credit=зелёный, debit=красный. */
.fin-dir { font-size: .76rem; padding: .15rem .55rem; border-radius: 8px; border: 1px solid transparent; }
.fin-dir.credit { background: rgba(107, 207, 127, .14); color: var(--earth); border-color: rgba(107, 207, 127, .3); }
.fin-dir.debit  { background: rgba(255, 92, 92, .12); color: var(--danger); border-color: rgba(255, 92, 92, .3); }
.fin-amt.credit { color: var(--earth); }
.fin-amt.debit  { color: var(--danger); }

/* Под таблицей: пагинатор (.admin-pager) — уже определён выше.
   BS-299: у grid-полос фильтров элементы выходили за пределы блока на мобильных.
   Корень: grid-item'ы (.fg) с дефолтным min-width:auto — intrinsic-ширина
   <input> (size=20 ≈ 199px) не давала колонке сжаться до minmax(160px,1fr),
   фактическая колонка была ~199px → scrollWidth формы > clientWidth, поля
   вылезали за карточку и обрезались экраном (замер на 375px: 431 > 341).
   Канон BS-252 (селекты настроек): разрешить контенту сжиматься — min-width:0
   на grid-item + явная ширина полей; колонки auto-fit теперь честно считают. */
.fin-filters > .fg { min-width: 0; }
.fin-filters .fg input[type=text] { width: 100%; }

@media (max-width: 560px) {
    .fin-filters { grid-template-columns: 1fr 1fr; }
    .fin-filters .fg.fin-actions { grid-column: 1 / -1; }
    /* BS-299: на самом узком телефоне (<480px) колонка 1fr 1fr даёт ~145px —
       тесно для селектов «Тариф»/«Уровень партнёрки» (обрезается текст опций);
       фильтры складываем в один столбец (канон .quick-grid/.big3-row 560px). */
    .fin-filters .au-check-fg { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .fin-filters { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Раздел админки «Пользователи» (BS-141): управление тарифами и токенами.
   Переиспользует .fin-filters/.fin-status (BS-109), table.bodies/.admin-table,
   .admin-pager, .card, .modal-scrim/.modal, .fg, .btn — здесь только своё:
   колонка действий, радиоряд «начислить/списать», подпись пользователя в модале.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Колонка действий в строке пользователя — две компактные кнопки вплотную. */
.au-actions { white-space: nowrap; }

/* BS-206: новые идентификационные колонки в начале таблицы пользователей.
   ID — моноширинный приглушенный (стабильный технический идентификатор); имя и
   дата рождения — обычный текст, без переноса (узкая ширина; широкий список
   скроллится горизонтально через .admin-table-wrap).
   BS-307: td.au-id переиспользован для колонок «ID» в админ-финансах
   (section_admin_finance.php — таблицы «Платежи»/«Операции с токенами»). */
td.au-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
td.au-name, td.au-dob { white-space: nowrap; }

/* Подпись пользователя в шапке модала (email/имя) — выделена как «для чтения». */
.au-who { font-weight: 500; color: var(--text); word-break: break-word; }

/* Ряд радиокнопок «Начислить / Списать» — горизонтально, с акцентом на выборе. */
.au-radio-row { display: flex; gap: 1.2rem; }
.au-radio { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .9rem; }
.au-radio input { accent-color: var(--accent-2); width: 16px; height: 16px; }

/* BS-255: кнопка «Заблокировать» — красная (опасное действие визуально отлично от
   нейтральных Тариф/Токены/Бонусы); «Разблокировать» — обычная ghost-кнопка
   (возврат к норме). Обе идут через confirm на клиенте + защиту на сервере. */
.au-actions .au-block { color: var(--danger); border-color: rgba(255, 92, 92, .4); }
.au-actions .au-block:hover { background: rgba(255, 92, 92, .12); }

/* BS-259: кнопка «Амбассадор» — золотая (привилегированный статус, тон бейджа
   .fin-status.amb); «Снять амбассадора» — обычная ghost-кнопка (возврат к норме).
   Обе через confirm на клиенте; серверная точка записи — единственная (API). */
.au-actions .au-amb { color: var(--gold); border-color: rgba(227, 178, 60, .4); }
.au-actions .au-amb:hover { background: rgba(227, 178, 60, .12); }

/* BS-256: партнёрская статистика в таблице пользователей. Колонка «Рефералы» —
   компактный «N чел. · X ₽» без переноса; «Код ссылки» — моноширинный чип-кнопка
   (клик копирует код, потому визуально это кнопка, а не просто текст). */
td.au-refs { white-space: nowrap; }
td.au-code-cell { white-space: nowrap; }
.au-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    padding: .15rem .5rem;
    border: 1px solid var(--border, rgba(255,255,255,.14));
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}
.au-code:hover { border-color: var(--accent-2); color: var(--accent-2); }

/* BS-256 (follow-up): колонка «Способ авторизации» — компактные бейджи способов
   входа. VK — фирменный синий, Яндекс — брендовый красный, Email — нейтральный
   (на проде email-вход не используется, встречается у legacy/локальных аккаунтов).
   Несколько привязок — бейджи в столбик, не раздувают строку. */
td.au-auth-cell { white-space: nowrap; }
.au-auth {
    display: inline-block;
    font-size: .78rem;
    line-height: 1;
    padding: .28rem .5rem;
    border-radius: 5px;
    border: 1px solid var(--border, rgba(255,255,255,.14));
    color: var(--text-dim, #9aa0ab);
    margin-right: .25rem;
}
.au-auth.vk    { color: #7aa5f8; border-color: rgba(122,165,248,.45); }
.au-auth.ya    { color: #ff6a6a; border-color: rgba(255,106,106,.45); }
.au-auth.email { color: var(--text-dim, #9aa0ab); }

/* BS-272: фильтр-чекбокс «Только амбассадоры» в полосе .fin-filters — выравнивание
   по базовой линии полей фильтра (grid align-items:end делает чекбокс ниже полей);
   internally центрируем по высоте строки поля. */
.au-check-fg { display: flex; align-items: center; }
.au-check {
    display: inline-flex; align-items: center; gap: .45rem;
    cursor: pointer; font-size: .88rem; color: var(--text);
    user-select: none; padding-bottom: .45rem;
}
.au-check input { accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; }

/* BS-272: колонка «Рефералы за месяц» — компактная, без переноса (рядом с тоталом
   рефералов; наследует td.au-refs, здесь только приглушённый тон 30-дневного окна). */
td.au-refs-month { white-space: nowrap; color: var(--text-dim, #9aa0ab); }
td.au-refs-month b { color: var(--text); }

@media (max-width: 560px) {
    /* Таблица пользователей горизонтально скроллится (узкий экран) — обёртка
       .admin-table-wrap уже даёт overflow-x:auto; дополнительно сжимаем паддинги. */
    .au-actions { display: flex; flex-direction: column; gap: .35rem; align-items: stretch; }
    .au-actions .btn { width: 100%; }
    .au-radio-row { flex-direction: column; gap: .5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BS-558.2: раздел «Обслуживание» — статистика и очистка кэшей расчётов.
   Две карточки кэшей + карточка полной очистки + карточка сброса персоны в
   адаптивной сетке; таблицы разбивки по kind — компактные, реиспользуют
   .admin-table/.bodies; кнопки очистки — danger-тон канона .au-block (каждая
   с confirm на клиенте, серверная проверка is_admin+CSRF — в API).
   ═══════════════════════════════════════════════════════════════════════════ */
.mnt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.mnt-card { padding: 1rem 1.1rem 1.1rem; }
.mnt-card-head h2 { margin: 0 0 .25rem; font-size: 1.02rem; }
.mnt-card-head p.muted { margin: 0 0 .8rem; font-size: .84rem; line-height: 1.5; }
/* Карточка «Полная очистка» — предупреждение (красная рамка, тон .fin-status.fail). */
.mnt-danger { border-color: rgba(255, 92, 92, .38); }
.mnt-danger .mnt-card-head h2 { color: #ff8080; }
.mnt-kind-table { min-width: 0; }
.mnt-kind-table td, .mnt-kind-table th { padding: .4rem .55rem; font-size: .86rem; }
.mnt-kind-table td:nth-child(2), .mnt-kind-table td:nth-child(3),
.mnt-kind-table th:nth-child(2), .mnt-kind-table th:nth-child(3) { text-align: right; white-space: nowrap; }
.mnt-actions { margin-top: .8rem; display: flex; gap: .6rem; flex-wrap: wrap; }
/* Кнопки очистки — danger-тон (канон .au-block: красная обводка на ghost-базе). */
.mnt-actions .au-block { color: var(--danger); border-color: rgba(255, 92, 92, .4); }
.mnt-actions .au-block:hover { background: rgba(255, 92, 92, .12); }

@media (max-width: 860px) {
    .mnt-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BS-257: вкладка «Карта приглашений» (граф vis-network в разделе «Пользователи»).
   Канва — тёмная (тон кабинета), полноразмерная карточка; тултипы vis рисует
   сами (HTML), здесь — только каркас вокруг. Переиспользует .tabs/.tab/.card.
   ═══════════════════════════════════════════════════════════════════════════ */
.ig-toolbar {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem .2rem;
    min-height: 2.4rem;
}
.ig-stats { color: var(--text-dim); font-size: .88rem; }
.ig-stats b { color: var(--text); }
.ig-card {
    grid-column: 1 / -1;
    padding: .5rem;
    position: relative;
}
.ig-canvas {
    width: 100%;
    height: 620px;                 /* фиксированная высота: vis требует явный размер */
    border-radius: calc(var(--radius) - 4px);
    background: var(--bg-app);
    overflow: hidden;
}
.ig-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;          /* не мешает взаимодействию с сетью */
    font-size: .95rem;
}
/* BS-257 follow-up: скрытие элементов вкладки графа КЛАССОМ, а не атрибутом
   [hidden] — display:flex/.btn inline-flex выше перебивают браузерное правило
   [hidden]{display:none}, из-за чего empty-надпись висела поверх нарисованной
   карты, а кнопка «Загрузить ещё» не исчезала. Удвоенная специфичность. */
.ig-hide { display: none !important; }
.ig-legend { padding: .55rem .2rem 0; font-size: .8rem; }
.ig-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    vertical-align: middle; margin: 0 2px;
}
.ig-dot-partner  { background: #5b4fa8; border: 1px solid #c9a8ff; }
.ig-dot-amb      { background: #d4af37; border: 1px solid #f0d060; }
.ig-dot-blocked  { background: #ff5c5c; border: 1px solid #ff8a8a; }

/* Тултипы vis-network (div.vis-tooltip) по умолчанию белые — приводим к тёмной
   теме кабинета (либа не знает наши токены). BS-257 follow-up: содержимое —
   DOM-элемент .ig-tip (HTML-парсинг в title отключён в либе из-за XSS), переносы
   строк — "\n" + white-space:pre-line; vis задают white-space:nowrap — снимаем,
   иначе многострочный тултип растягивается в одну строку. */
.ig-canvas .vis-tooltip, .vis-tooltip {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: .5rem .7rem !important;
    font-size: .82rem !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45) !important;
}
.vis-tooltip .ig-tip {
    white-space: pre-line;
    line-height: 1.5;
    font-family: 'Segoe UI', -apple-system, Roboto, sans-serif;
    max-width: 320px;
}

@media (max-width: 860px) {
    .ig-canvas { height: 480px; }
}
@media (max-width: 560px) {
    .ig-canvas { height: 380px; }
    .ig-toolbar { gap: .6rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Раздел «Партнёрская программа» (BS-58). Переиспользует .stat-row/.stat,
   .tabs/.tab, table.bodies/.admin-table, .card, .kv, .tag, .alert, .form-grid,
   .checkbox-row — здесь только специфичные элементы: блок ссылки, чекбокс оплаты
   бонусами в ИИ-панели, бар-чарт статистики, тост-фидбек.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Чекбокс «Оплатить бонусами» в ноге ИИ-панели (BS-58→откат: не рендерится;
   .aip-cost из ноги удалён в BS-261 — историческая точка привязки). */
.aip-bonus {
    display: flex; align-items: center; gap: .45rem; justify-content: center;
    font-size: .78rem; color: var(--text-dim); padding: 0 .8rem .7rem; cursor: pointer;
}
.aip-bonus input { accent-color: var(--accent-2); width: 15px; height: 15px; }
.aip-bonus b { color: var(--gold); }
.aip-bonus.empty { opacity: .5; cursor: not-allowed; }  /* баланс 0 — газим и блокируем */

/* Блок «Ваша партнёрская ссылка». */
.partner-link-box { display: flex; flex-direction: column; gap: .6rem; }
.partner-link-row { display: flex; align-items: center; gap: .8rem; }

/* BS-246: QR-код с полной реферальной ссылкой — карточка над блоком ссылки.
   Белая подложка у SVG собственная (обязательна для сканируемости на тёмной теме),
   снаружи — рамка/скругление в токенах кабинета. */
.prt-qr-box {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 10px; padding: .8rem; margin-bottom: .8rem;
}
.prt-qr { flex: 0 0 auto; line-height: 0; }
.prt-qr svg {
    /* Экранное сканирование: ≥160px и запасная белая подложка под тихой зоной
       (SVG несёт свою — 4 модуля по ISO; эта — страховка от обрезки углов). */
    display: block; width: 168px; height: 168px;
    border-radius: 8px; background: #fff; padding: 4px;
}
.prt-qr-info { flex: 1 1 220px; min-width: 0; }
.prt-qr-t { font-size: .9rem; font-weight: 600; color: var(--text); margin-bottom: .25rem; }
.prt-qr-h { font-size: .78rem; color: var(--text-dim); line-height: 1.45; }

/* BS-593: QR deep-link привязки MAX в «Настройках» — компактнее партнёрского
   (ТЗ ~120–140px), разметка/логика те же: белая подложка у SVG своя (обязательна
   для сканируемости на тёмной теме), снаружи — рамка в токенах кабинета.
   Текстовые подписи переиспользуют .prt-qr-t/.prt-qr-h (BS-246). */
.mx-qr-box {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 10px; padding: .7rem; margin-bottom: .7rem;
}
.mx-qr { flex: 0 0 auto; line-height: 0; }
.mx-qr svg {
    display: block; width: 132px; height: 132px;
    border-radius: 8px; background: #fff; padding: 4px;
}
.mx-link-actions {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .5rem;
}

/* BS-259 (follow-up): статусная плашка амбассадора — вверху раздела «Приглашение
   друзей», зелёная рамка (тон успеха --earth, как .fin-status.ok / .alert-ok).
   Показывается только амбассадорам; параллельно у них скрыта вкладка «Уровни». */
.prt-ambassador-banner {
    display: flex; align-items: center; gap: .7rem;
    border: 1px solid rgba(107, 207, 127, .5);
    background: rgba(107, 207, 127, .1);
    border-radius: 10px; padding: .8rem 1rem;
    margin-bottom: 1rem;
}
.prt-amb-ico {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(107, 207, 127, .18); color: var(--earth);
    font-size: 1rem;
}
.prt-amb-text { font-size: .95rem; font-weight: 600; color: var(--earth); }
@media (max-width: 560px) {
    .prt-ambassador-banner { padding: .6rem .8rem; }
    .prt-amb-text { font-size: .86rem; }
}

.partner-link-label {
    width: 70px; flex: none; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-dim);
}
.partner-link-box code {
    background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 8px; padding: .5rem .7rem; font-size: .95rem; color: var(--accent-2);
    letter-spacing: .04em;
}
.partner-link-input {
    flex: 1; min-width: 0; background: var(--bg-card-2) !important;
    border: 1px solid var(--border); border-radius: 8px;
    padding: .5rem .7rem; color: var(--text); font-size: .9rem; font-family: inherit;
}
.partner-link-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .2rem; }
.partner-link-note { font-size: .76rem; margin-top: .2rem; }

/* Список правил начисления (вкладка «Обзор»). */
.partner-rules { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.partner-rules li { font-size: .9rem; color: var(--text); padding-left: 1.1rem; position: relative; }
.partner-rules li::before { content: "✦"; position: absolute; left: 0; color: var(--accent-2); font-size: .8rem; }
.partner-rules b { color: var(--gold); }

/* Тост-фидбек («Скопировано!» и т.п.) — фиксированный, под шапкой, по центру. */
.toast-host {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    z-index: 1000; display: flex; flex-direction: column; gap: .4rem;
    align-items: center; pointer-events: none;
}
.toast {
    background: var(--bg-card); border: 1px solid var(--accent);
    color: var(--text); padding: .55rem 1rem; border-radius: 10px;
    font-size: .86rem; box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
    animation: toast-in .18s ease;
}
.toast.toast-err { border-color: #e5704a; }
.toast.hide { opacity: 0; transition: opacity .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }


/* ════════ Нумерология (BS-68) ════════ */

/* Сетка 5 базовых чисел */
.num-core {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem;
}
.num-tile {
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: .9rem .6rem; text-align: center;
    transition: border-color .15s, transform .15s;
}
.num-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.num-tile-val {
    font-size: 2.1rem; font-weight: 600; line-height: 1; color: var(--accent-2);
    font-variant-numeric: tabular-nums;
}
.num-tile-val.master { color: var(--gold); }
.num-tile-role { font-size: .8rem; font-weight: 500; margin-top: .45rem; color: var(--text); }
.num-tile-src { font-size: .68rem; margin-top: .15rem; }

/* Трактовки чисел — две колонки карточек */
.num-meanings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.num-meaning { padding: 1rem 1.1rem; }
.num-meaning-head { display: flex; gap: .9rem; align-items: flex-start; }
.num-big {
    flex: 0 0 auto; font-size: 2.3rem; font-weight: 600; line-height: .9; color: var(--accent-2);
    font-variant-numeric: tabular-nums; min-width: 2.2rem; text-align: center;
}
.num-big.master { color: var(--gold); }
.num-meaning-title { font-size: 1rem; font-weight: 600; }
.num-meaning-role { font-size: .76rem; margin-top: .15rem; }
.num-meaning-desc { font-size: .86rem; line-height: 1.5; margin: .7rem 0 .55rem; color: var(--text); }
.num-kw { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.num-kw-chip {
    font-size: .68rem; color: var(--accent-2); border: 1px solid var(--border);
    background: var(--bg-card-2); border-radius: 20px; padding: .12rem .55rem;
}
.num-sc { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.num-sc-col ul { list-style: none; padding: 0; margin: .25rem 0 0; }
.num-sc-col li { font-size: .78rem; color: var(--text-dim); padding: .12rem 0 .12rem .85rem; position: relative; line-height: 1.35; }
.num-sc-col.plus li::before { content: '+'; position: absolute; left: 0; color: var(--accent-2); font-weight: 600; }
.num-sc-col.minus li::before { content: '–'; position: absolute; left: 0; color: #e5704a; font-weight: 600; }
.num-sc-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

/* Разбор расчёта: буквы имени / цифры даты */
.num-calc-block {
    border-top: 1px solid var(--border-soft); padding: .7rem 0 .2rem; margin-top: .5rem;
}
.num-calc-block:first-of-type { border-top: 0; padding-top: 0; }
.num-calc-label { font-size: .82rem; font-weight: 500; margin-bottom: .5rem; }
.num-letters { display: flex; flex-wrap: wrap; gap: .4rem; }
.num-letter, .num-digit {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 2rem; padding: .35rem .3rem; background: var(--bg-card-2);
    border: 1px solid var(--border-soft); border-radius: 8px; line-height: 1;
}
.num-letter .ch { font-size: 1.05rem; color: var(--text); }
.num-letter .v { font-size: .72rem; color: var(--accent-2); margin-top: .2rem; font-weight: 600; }
.num-digit { font-size: 1.05rem; color: var(--gold); min-width: 1.8rem; }
.num-calc-sum { font-size: .78rem; margin-top: .55rem; font-variant-numeric: tabular-nums; }

/* Квадрат Пифагора — сетка 3×3 */
.num-matrix {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
}
/* BS-252: скролл-обёртка психоматрицы (паттерн .table-responsive BS-251) —
   на мобильных карточки ячеек не сжимаются и не выходят за пределы экрана,
   а прокручиваются горизонтально. Минимальная ширина сетки держит 3 колонки
   читаемыми. */
.num-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.num-matrix-wrap .num-matrix { min-width: 520px; }
.num-mcell {
    background: var(--bg-card-2); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: .8rem .7rem; min-height: 7rem;
}
.num-mcell.empty { opacity: .45; }
.num-mcell-digits {
    font-size: 1.4rem; font-weight: 700; letter-spacing: .04em; color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.num-mcell-title { font-size: .82rem; font-weight: 500; margin-top: .35rem; color: var(--text); }
.num-mcell-desc { font-size: .72rem; line-height: 1.35; margin-top: .2rem; }

.num-foot { font-size: .76rem; line-height: 1.5; }

@media (max-width: 860px) {
    .num-core { grid-template-columns: repeat(2, 1fr); }
    .num-meanings { grid-template-columns: 1fr; }
}

/* ════════ Дизайн Человека (BS-74, этап 5) ════════ */

.hd-badge { background: rgba(201, 168, 255, .10); color: var(--accent-2); border-color: rgba(201, 168, 255, .3); }

/* Ведущая карточка: Тип + подпись/не-Я + Инкарнационный Крест */
.hd-hero { position: relative; overflow: hidden; }
.hd-hero > .glow { position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(196, 138, 86, .18), transparent 65%); pointer-events: none; }
.hd-hero-main { display: flex; align-items: center; gap: 1.2rem; position: relative; }
.hd-type-glyph {
    flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.7rem; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 20px rgba(139, 126, 216, .35);
}
.hd-hero-body { min-width: 0; }
.hd-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: .25rem; }
.hd-title { font-size: 1.6rem; font-weight: 500; color: var(--text); line-height: 1.15; }
.hd-desc { font-size: .9rem; line-height: 1.55; color: var(--text-dim); margin: .55rem 0 .6rem; }
.hd-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--text-dim); }
.hd-hero-meta b { color: var(--accent-2); }
.hd-cross {
    margin-top: 1rem; padding-top: .85rem; border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: .15rem;
}
.hd-cross-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.hd-cross-val { font-size: .92rem; color: var(--gold); font-weight: 500; }
/* BS-541: развёрнутое описание Инкарнационного Креста (hd_crosses.json) */
.hd-cross-desc { margin-top: .5rem; }
.hd-cross-desc p { font-size: .8rem; line-height: 1.5; color: var(--text-dim); margin: .25rem 0 0; }
.hd-cross-name { font-size: .78rem; font-weight: 500; color: var(--text); }

/* Плитки ключевых показателей (6 шт.) */
.hd-core { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; margin-bottom: 1.2rem; }
.hd-tile {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .85rem .7rem; text-align: center;
}
.hd-tile-val { font-size: 1.02rem; font-weight: 600; line-height: 1.2; color: var(--accent-2); min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.hd-tile-role { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin-top: .4rem; }

/* Бодиграф */
.hd-bodygraph {
    background: #fffdfa; border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: .6rem; display: flex; justify-content: center;
}
/* BS-565 follow-up 3 (владелец): бодиграф шире — колонки планет читаются крупнее */
.hd-bodygraph > svg { width: 100%; max-width: 660px; height: auto; display: block; }
.hd-legend { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: .8rem; font-size: .76rem; }
.hd-leg { display: inline-flex; align-items: center; gap: .4rem; }
.hd-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); }
.hd-swatch.hd-grad { background: linear-gradient(135deg, #a44344, #151515); }

/* BS-565: планетарные колонки «Дизайн / Личность» */
.hd-planets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.hd-planet-col {
    background: var(--bg-card-2); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: .8rem .9rem; overflow-x: auto;
}
.hd-planet-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.hd-planet-head b { font-size: .92rem; font-weight: 600; }
.hd-planet-head span { font-size: .7rem; color: var(--text-dim); }
.hd-planet-col-design .hd-planet-head b { color: #a44344; }
.hd-planet-col-personality .hd-planet-head b { color: var(--text); }
.hd-planet-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.hd-planet-table td { padding: .18rem .35rem; border-top: 1px solid var(--border-soft); white-space: nowrap; }
.hd-planet-table tr:first-child td { border-top: 0; }
.hd-pl-glyph { width: 1.6rem; font-size: 1rem; line-height: 1; text-align: center; }
.hd-planet-col-design .hd-pl-glyph { color: #a44344; }
.hd-planet-col-personality .hd-pl-glyph { color: var(--text); }
.hd-pl-name { color: var(--text); }
.hd-pl-coord { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; padding-right: .7rem !important; }
/* BS-565 follow-up 4/8 (владелец): координаты обеих колонок выравниваются влево */
.hd-planet-col-design .hd-pl-coord { text-align: left; }
.hd-planet-col-personality .hd-pl-coord { text-align: left; }
.hd-pl-fix { font-size: .7rem; vertical-align: super; }
.hd-pl-dir { font-size: .8rem; }
.hd-planet-col-design .hd-pl-coord { color: #a44344; }
.hd-planet-col-personality .hd-pl-coord { color: var(--text); }
.hd-pl-ctb { color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }

/* Карточки трактовок (стратегия/авторитет/профиль) */
.hd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.hd-itp-desc { font-size: .88rem; line-height: 1.55; color: var(--text); margin: -.2rem 0 .7rem; }
.hd-kw { display: flex; flex-wrap: wrap; gap: .35rem; }
.hd-kw-chip { font-size: .68rem; color: var(--accent-2); border: 1px solid var(--border); background: var(--bg-card-2); border-radius: 20px; padding: .12rem .55rem; }
.hd-sc { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: .3rem; }
.hd-sc-col ul { list-style: none; padding: 0; margin: .25rem 0 0; }
.hd-sc-col li { font-size: .78rem; color: var(--text-dim); padding: .12rem 0 .12rem .85rem; position: relative; line-height: 1.35; }
.hd-sc-col.plus li::before { content: '+'; position: absolute; left: 0; color: var(--accent-2); font-weight: 600; }
.hd-sc-col.minus li::before { content: '–'; position: absolute; left: 0; color: #e5704a; font-weight: 600; }
.hd-sc-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }

/* 9 центров */
.hd-centers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.hd-center {
    background: var(--bg-card-2); border: 1px solid var(--border-soft); border-radius: var(--radius);
    padding: .85rem .9rem;
}
.hd-center.defined { border-color: rgba(201, 168, 255, .35); }
.hd-center-head { display: flex; align-items: center; gap: .5rem; }
.hd-center-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--border); }
.hd-center-head b { font-size: .9rem; font-weight: 500; }
.hd-center-state { margin-left: auto; font-size: .66rem; border-radius: 8px; padding: .08rem .4rem; }
.hd-center-state.on { background: rgba(107, 207, 127, .16); color: var(--earth); }
.hd-center-state.off { background: var(--border); color: var(--text-dim); }
.hd-center-theme { font-size: .76rem; margin: .35rem 0 .25rem; }
.hd-center-desc { font-size: .8rem; line-height: 1.45; color: var(--text); margin: .2rem 0 .5rem; }

/* Каналы */
.hd-channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.hd-channel {
    background: var(--bg-card-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: .8rem .9rem;
}
.hd-channel-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.hd-channel-code { font-size: .8rem; font-weight: 700; color: var(--gold); background: rgba(212, 175, 55, .12); border-radius: 6px; padding: .1rem .45rem; font-variant-numeric: tabular-nums; }
.hd-channel-name { font-size: .9rem; font-weight: 500; }
.hd-channel-circuit { margin-left: auto; font-size: .68rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: .06rem .45rem; }
.hd-channel-desc { font-size: .8rem; line-height: 1.45; color: var(--text); margin: .4rem 0 .5rem; }

/* Ворота */
.hd-gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.hd-gate { background: var(--bg-card-2); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: .75rem .8rem; }
.hd-gate-head { display: flex; align-items: center; gap: .6rem; }
.hd-gate-num {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    font-size: .9rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
    font-variant-numeric: tabular-nums;
}
.hd-gate-theme { font-size: .86rem; font-weight: 500; line-height: 1.2; }
.hd-gate-meta { font-size: .7rem; margin-top: .1rem; }
.hd-gate-desc { font-size: .78rem; line-height: 1.4; color: var(--text); margin: .4rem 0 0; }
/* BS-541: планеты-активаторы ворота с линиями и темами линий */
.hd-gate-acts { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed var(--border-soft); }
.hd-gate-act { display: flex; align-items: baseline; gap: .45rem; font-size: .72rem; color: var(--text-dim); }
.hd-act-imp {
    flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 600; line-height: 1;
}
.hd-act-imp-p { background: rgba(255, 255, 255, .12); color: var(--text); }   /* Личность — «чёрное» */
.hd-act-imp-d { background: rgba(255, 92, 92, .16); color: #ff9a83; }          /* Дизайн — «красное» */
.hd-act-planet { color: var(--text); font-weight: 500; white-space: nowrap; }
.hd-act-line { font-size: .7rem; }

.hd-foot { font-size: .76rem; line-height: 1.5; }

@media (max-width: 1100px) {
    .hd-core { grid-template-columns: repeat(3, 1fr); }
    .hd-centers { grid-template-columns: repeat(2, 1fr); }
    .hd-gates { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
    .hd-grid-2 { grid-template-columns: 1fr; }
    .hd-core { grid-template-columns: repeat(2, 1fr); }
    .hd-channels { grid-template-columns: 1fr; }
    .hd-centers, .hd-gates { grid-template-columns: 1fr; }
    .hd-planets { grid-template-columns: 1fr; }
}

/* ════════════════════════ Раздел «Мои отчёты» (BS-40) ════════════════════════ */

.rep-gen-sub { margin: -.3rem 0 1.1rem; }
.rep-gen-form { display: flex; flex-direction: column; gap: 1.2rem; }
.rep-gen-field { border: none; padding: 0; margin: 0; }
.rep-gen-field > legend { font-size: .78rem; color: var(--text-dim); margin-bottom: .6rem; padding: 0; text-transform: uppercase; letter-spacing: .04em; }

/* BS-135: выбор «Тип отчёта» (radio-карточки) убран — всегда profile-отчёт,
   «Совместимость» выбирается галочкой в блоках. Стили .rep-type-card удалены. */

/* Глубина детализации */
.rep-depth-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.rep-depth { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .6rem 1rem;
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color .15s, background .15s; min-width: 150px; }
.rep-depth:hover { border-color: var(--accent); }
.rep-depth input { position: absolute; opacity: 0; pointer-events: none; }
.rep-depth.selected { border-color: var(--accent); background: var(--bg-active); }
.rep-depth-nm { font-size: .88rem; font-weight: 500; }
.rep-depth .muted { font-size: .72rem; }

.rep-gen-submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .2rem; }

/* BS-135: stub «Детализация» (поле глубины убрано — всегда full) */
.rep-gen-depth-stub .muted { margin: 0; }

/* BS-135: inline-селектор партнёра совместимости */
.rep-partner-field { margin-top: .2rem; }
.rep-partner-select {
    width: 100%; max-width: 420px; padding: .55rem .7rem; font-size: .92rem; font-family: inherit;
    color: var(--ink); background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer;
}
.rep-partner-select:focus { outline: none; border-color: var(--accent); }
.rep-partner-hint { margin: .4rem 0 0; font-size: .76rem; }

/* BS-135: панель публичного шаринга */
.rep-share-panel { display: flex; flex-direction: column; gap: .7rem; }
.rep-share-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rep-share-status { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rep-public-badge, .rep-private-badge {
    font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
}
.rep-public-badge { background: rgba(46,139,87,.14); color: var(--earth, #2e8b57); border: 1px solid rgba(46,139,87,.3); }
.rep-private-badge { background: var(--bg-card-2); color: var(--muted); border: 1px solid var(--border); }
.rep-share-link { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rep-share-input {
    flex: 1 1 320px; min-width: 0; padding: .5rem .7rem; font-size: .85rem; font-family: ui-monospace, monospace;
    color: var(--accent-2); background: var(--bg-card-2); border: 1px dashed var(--border); border-radius: var(--radius-sm);
}
.rep-share-input:focus { outline: none; border-style: solid; border-color: var(--accent); }
.rep-share-note { margin: 0; font-size: .76rem; }


/* Бейдж типа (иконка в списке и в шапке детали) */
.rep-type-badge { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
    font-size: 1.1rem; flex: none; background: var(--bg-card-2); border: 1px solid var(--border); color: var(--accent-2); }
.rep-type-badge.rep-type-synastry { color: var(--fire); }
.rep-type-badge.rep-type-solar { color: var(--gold); }
.rep-type-badge.rep-type-lunar { color: var(--water); }
.rep-type-badge.rep-type-transit { color: var(--air); }

/* Шапка детального просмотра */
.rep-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rep-detail-title { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.rep-detail-title h2 { font-size: 1.2rem; font-weight: 500; margin: 0; }
.rep-meta { font-size: .76rem; margin-top: .25rem; line-height: 1.4; }
.rep-detail-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.rep-detail { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.rep-detail .big3-chip .rep-pos { font-size: .7rem; margin-top: .15rem; }

/* JSON-дамп секций синтеза (details/summary) */
.rep-sections { display: flex; flex-direction: column; gap: .4rem; }
.rep-section summary { cursor: pointer; font-size: .88rem; font-weight: 500; padding: .3rem 0; list-style: none; }
.rep-section summary::-webkit-details-marker { display: none; }
.rep-section summary::before { content: '▸ '; color: var(--text-dim); transition: transform .15s; display: inline-block; }
.rep-section[open] summary::before { content: '▾ '; }
.rep-section summary:hover { color: var(--accent-2); }
.rep-json { font-size: .72rem; line-height: 1.5; color: var(--text-dim); background: var(--bg-app);
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: .8rem;
    overflow-x: auto; white-space: pre-wrap; max-height: 460px; overflow-y: auto; margin: .4rem 0 0; }

/* Список отчётов */
.rep-list-card { }
.rep-list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.rep-empty { text-align: center; padding: 2rem 1rem; color: var(--text-dim); }
.rep-empty .ico { font-size: 2.4rem; opacity: .5; margin-bottom: .5rem; }
.rep-empty p { margin: .2rem 0; }
.report-list .ri .ic { text-decoration: none; }
.report-list .ri .m .t { color: var(--text); text-decoration: none; }
.report-list .ri .m .t:hover { color: var(--accent-2); }
.report-list .ri .ri-del { margin-left: auto; flex: none; }

/* Трактовки внутри детального отчёта */
.rep-detail .interp { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); }
.rep-detail .interp:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.rep-detail .interp h4 { font-size: .9rem; font-weight: 500; margin: 0 0 .3rem; color: var(--text); }
.rep-detail .interp h4 .muted { font-weight: 400; }
.rep-detail .interp p { font-size: .84rem; line-height: 1.55; margin: .3rem 0; color: var(--text); }
.rep-detail .interp .advice { color: var(--text-dim); }
.rep-detail .interp .keywords { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.rep-detail .interp .keyword { font-size: .7rem; padding: .15rem .5rem; border-radius: 6px;
    background: var(--bg-card-2); border: 1px solid var(--border); color: var(--text-dim); }
.rx { color: var(--danger); font-weight: 700; }

/* Адаптив: 1180 / 860 / 560 (критерии приёмки BS-40) */
@media (max-width: 860px) {
    .rep-detail-head { flex-direction: column; }
}

/* ────────── BS-81: HTML-отчёты (фильтр секций, теги, iframe, тип profile) ────────── */

/* Тип 'profile' — единый отчёт о персоне (основной). */
.rep-type-badge.rep-type-profile { color: var(--accent-2); }

/* Шапка детального просмотра — три блока: бейдж · инфо · действия. */
.rep-detail-head { align-items: center; }
.rep-detail-info { flex: 1; min-width: 0; }
.rep-detail-info h2 { font-size: 1.15rem; font-weight: 500; margin: 0; word-break: break-word; }

/* Теги секций в шапке и строках списка. */
.rep-detail-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.2rem 0 1rem; }
.rep-tag { font-size: .72rem; padding: .2rem .6rem; border-radius: 14px;
    background: rgba(139, 126, 216, .14); color: var(--accent-2); border: 1px solid rgba(139, 126, 216, .28); }
.rep-tag.sm { font-size: .68rem; padding: .1rem .5rem; }
.report-list .ri .m .ri-sec { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }

/* Фильтр секций (чекбоксы) в форме генерации. */
.rep-sec-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.rep-sec-chip { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .9rem;
    background: var(--bg-card-2); border: 1px solid var(--border); border-radius: 16px; cursor: pointer;
    font-size: .82rem; transition: border-color .12s, background .12s; }
.rep-sec-chip:hover { border-color: var(--accent); }
.rep-sec-chip input { position: absolute; opacity: 0; pointer-events: none; }
.rep-sec-chip.selected { border-color: var(--accent); background: var(--bg-active); color: var(--text); }
.rep-sec-hint { font-size: .72rem; margin: .6rem 0 0; }

/* Iframe с HTML-отчётом. Сам отчёт несёт светлую тему и свой скролл. */
.rep-iframe-wrap { background: var(--bg-app); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; margin-bottom: .6rem; }
.rep-iframe { width: 100%; min-height: 1320px; border: 0; display: block; background: #fff; }
.rep-iframe-note { font-size: .76rem; line-height: 1.5; }
.rep-iframe-note a { color: var(--accent-2); }

/* BS-207: прогресс фоновой генерации ИИ-анализа */
.rep-ai-status { border-left: 3px solid var(--accent-2); }
.rep-ai-status-row { display: flex; align-items: center; gap: .9rem; }
.rep-ai-ico { font-size: 1.5rem; color: var(--accent-2); flex: 0 0 auto; line-height: 1; }
.rep-ai-status-text { flex: 1 1 auto; min-width: 0; }
.rep-ai-status-t { font-weight: 600; margin-bottom: 2px; }
.rep-ai-status-s { font-size: .82rem; line-height: 1.45; }
.rep-ai-status-actions { flex: 0 0 auto; display: flex; align-items: center; }
.rep-ai-spinner { display: inline-block; width: 22px; height: 22px; border: 2.5px solid var(--border);
    border-top-color: var(--accent-2); border-radius: 50%; animation: rep-ai-spin .8s linear infinite; }
@keyframes rep-ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rep-ai-spinner { animation: none; } }

@media (max-width: 860px) {
    .rep-detail-actions { flex-wrap: wrap; }
    .rep-iframe { min-height: 1100px; }
}
@media (max-width: 560px) {
    .rep-sec-grid { flex-direction: column; align-items: stretch; }
    .rep-sec-chip { justify-content: flex-start; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   BS-54: раздел «Тариф и оплата» + feature-gating навигации (🔒)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Замок на заблокированном тарифом пункте навигации */
.nav-item.locked { opacity: .55; }
.nav-item.locked .nav-lock { margin-left: auto; font-size: .8rem; opacity: .8; }
.nav-item.locked:hover { opacity: .8; }
/* BS-37: видимый фокус для клавиатурной навигации (nav-item — role=button div). */
.nav-item:focus-visible, .pm-item:focus-visible, .pm-add:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BS-288: заблокированный раздел виден, но заблюрен + модальное окно «как открыть».
   go() (cabinet.js) при входе в раздел из CABINET.lockedViews вешает .gate-blur
   на main и раскрывает #gateScrim. Blur из ТЗ (5px) размывает контент раздела;
   pointer-events:none на .main-scroll глушит клики по заблюренному содержимому
   (скролл остаётся: событие вешается на .main-scroll, а не на .main).
   Follow-up (отзыв владельца): блюр НЕ снимается кнопкой закрытия (кнопок нет
   вообще) — пока пользователь в залоченном разделе, он видит блюр; выход —
   CTA в раздел разблокировки или другой открытый раздел навигацией. Scrim
   прозрачен для указателя (pointer-events:none, без затемнения) и НЕ перекрывает
   sidebar/topbar — переключаться на открытые разделы можно свободно; клики
   ловит сама модалка (pointer-events:auto) и её CTA/«Скопировать».
   ═══════════════════════════════════════════════════════════════════════════ */
main.main.gate-blur { filter: blur(5px); }
main.main.gate-blur .main-scroll { pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { main.main.gate-blur { filter: none; } }

.gate-scrim { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
    padding: 1rem; pointer-events: none; }
.gate-scrim[hidden] { display: none; }
.gate-modal { width: min(480px, 94vw); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; pointer-events: auto; }
.gate-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border); }
.gate-head .gate-ico { font-size: 1.15rem; }
.gate-head .gate-title { flex: 1; font-size: .98rem; font-weight: 500; color: var(--accent-2); }
.gate-body { padding: 1.1rem 1.2rem 1.2rem; }
.gate-msg { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.65; color: var(--text); }
.gate-ref { display: flex; align-items: center; gap: .55rem; margin: 0 0 1rem; flex-wrap: wrap; }
.gate-ref[hidden] { display: none; }
.gate-ref-input { flex: 1; min-width: 200px; background: var(--bg-card-2); border: 1px solid var(--border);
    border-radius: 8px; padding: .55rem .75rem; color: var(--text); font-size: .84rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.gate-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.gate-actions .gate-cta { white-space: nowrap; }

/* ── BS-309: модальное окно видеообзора раздела (канон .gate-*, но с закрытием:
   Esc/крестик/клик по фону/«Понятно»). Плеер (#videoFrame) — 16:9, iframe/video
   растягиваются на весь контейнер; при закрытии JS очищает контейнер — плеер
   выгружается и звук останавливается. Контент — из config/section_videos.json. */
.video-scrim { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
    padding: 1rem; background: rgba(8, 8, 18, .66); backdrop-filter: blur(2px); }
.video-scrim[hidden] { display: none; }
.video-modal { width: min(720px, 94vw); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.video-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border); }
.video-head .video-ico { color: var(--accent-2); font-size: 1rem; }
.video-head .video-title { flex: 1; font-size: .98rem; font-weight: 500; color: var(--accent-2); }
.video-x { background: none; border: none; cursor: pointer; color: var(--text-dim);
    font-size: 1rem; line-height: 1; padding: .3rem .45rem; border-radius: 8px; }
.video-x:hover { color: var(--text); background: var(--bg-card-2); }
.video-body { padding: 1rem 1.1rem 1.1rem; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000;
    border-radius: 10px; overflow: hidden; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; display: block; }
.video-desc { margin: .85rem 0 0; font-size: .9rem; line-height: 1.6; color: var(--text); }
.video-desc[hidden] { display: none; }
.video-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .95rem; }
/* BS-598: #videoSoundBtn скрыт атрибутом hidden по умолчанию — явная display:none
   нужна, т.к. авторское .btn{display:inline-flex} перебивает UA-правило
   [hidden]{display:none} (та же ловушка, что в BS-257 follow-up .ig-empty). */
.video-actions .btn[hidden] { display: none; }
@media (max-width: 560px) {
    .video-modal { width: 100%; }
    .video-body { padding: .8rem .85rem .9rem; }
    .video-frame { border-radius: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BS-468: контекстные подсказки «Спросить Астра» (эпика BS-464).
   Элементы с data-ai-hint — клик открывает модалку подтверждения (chat.js
   openAiByKey). Курсор pointer + hover-подсветка тоном --accent-2 БЕЗ сдвига
   layout (box-shadow/фон, не border); строки таблиц подсвечиваются целиком
   (background на td — tr в border-collapse сам фон не рисует надёжно).
   Модалка #aiHintScrim — канон .video-* (BS-309).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-ai-hint] { cursor: pointer; }
[data-ai-hint]:hover { box-shadow: 0 0 0 1px var(--accent-2); background-color: rgba(139, 126, 216, .07); }
[data-ai-hint] { transition: box-shadow .18s ease, background-color .18s ease; }
tr[data-ai-hint] { cursor: pointer; }
tr[data-ai-hint] td { transition: background-color .18s ease; }
tr[data-ai-hint]:hover td { background-color: rgba(139, 126, 216, .09); }
@media (prefers-reduced-motion: reduce) {
    [data-ai-hint], [data-ai-hint] * , tr[data-ai-hint] td { transition: none; }
}

/* Модалка подтверждения «Спросить Астру» (канон .video-*). */
.ai-hint-scrim { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center;
    padding: 1rem; background: rgba(8, 8, 18, .66); backdrop-filter: blur(2px); }
.ai-hint-scrim[hidden] { display: none; }
.ai-hint-modal { width: min(480px, 94vw); background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ai-hint-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border); }
.ai-hint-head .ai-hint-ico { color: var(--accent-2); font-size: 1rem; }
.ai-hint-head .ai-hint-title { flex: 1; font-size: .98rem; font-weight: 500; color: var(--accent-2); }
.ai-hint-x { background: none; border: none; cursor: pointer; color: var(--text-dim);
    font-size: 1rem; line-height: 1; padding: .3rem .45rem; border-radius: 8px; }
.ai-hint-x:hover { color: var(--text); background: var(--bg-card-2); }
.ai-hint-body { padding: 1.1rem 1.1rem; }
.ai-hint-question { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text); }
.ai-hint-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
@media (max-width: 560px) {
    .ai-hint-modal { width: 100%; }
    .ai-hint-body { padding: .9rem .85rem 1rem; }
}

#view-subscription { max-width: 980px; }
#view-subscription .sub-head h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
#view-subscription .sub-head .muted { margin: 0 0 1.2rem; }
.sub-card-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted, #8a8aa0); margin-bottom: .5rem; }

.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.sub-card { background: var(--card, #1b1b30); border: 1px solid var(--border, #2a2a44);
    border-radius: 14px; padding: 1.1rem 1.2rem; }
.sub-current { border-left: 4px solid var(--plan-accent, #8b7ed8); }
.sub-plan-name { font-size: 1.4rem; font-weight: 700; }
.sub-plan-badge { display: inline-block; margin-top: .25rem; padding: .15rem .6rem; border-radius: 999px;
    background: var(--plan-accent, #8b7ed8); color: #14142a; font-weight: 600; font-size: .85rem; }
.sub-personas { margin-top: .7rem; font-size: .92rem; color: var(--text-dim, #a9a9c0); }
.sub-personas .sub-ok { color: var(--accent-2, #4ade80); }
.sub-personas .sub-lock { color: var(--danger, #f87171); }

.sub-balance-v { font-size: 2rem; font-weight: 800; color: var(--gold, #f0b429); }
.sub-balance-sub { font-size: .85rem; color: var(--text-dim, #a9a9c0); }
/* BS-179: срок действия пакета токенов под остатком */
.sub-token-expiry { margin-top: .35rem; font-size: .8rem; display: flex; align-items: center; gap: .3rem; line-height: 1.25; }
.sub-token-expiry .ste-ico { font-size: .9rem; }
.sub-token-expiry.muted { color: var(--text-dim, #a9a9c0); }
.sub-token-expiry.warn { color: var(--gold, #f0b429); font-weight: 600; }
.sub-token-expiry.expired { color: var(--danger, #f87171); font-weight: 600; }
/* BS-484: срок действия платной подписки в карточке «Текущий тариф» (канон .sub-token-expiry) */
.sub-plan-expiry { margin-top: .4rem; font-size: .8rem; display: flex; align-items: center; gap: .3rem; line-height: 1.25; flex-wrap: wrap; }
.sub-plan-expiry .spe-ico { font-size: .9rem; }
.sub-plan-expiry.muted { color: var(--text-dim, #a9a9c0); }
.sub-plan-expiry.warn { color: var(--gold, #f0b429); font-weight: 600; }
.sub-plan-expiry.expired { color: var(--danger, #f87171); font-weight: 600; }
.sub-plan-expiry-warn { margin-top: .25rem; font-size: .78rem; color: var(--gold, #f0b429); opacity: .85; line-height: 1.3; }
/* BS-484: мягкая модель персон — сверхлимитные сохранены (информационный, не тревожный тон) */
.sub-lock-soft { color: var(--text-dim, #a9a9c0); font-weight: 400; }
.sub-tok-stats { margin-top: .5rem; display: flex; gap: .8rem; font-size: .85rem; }
.sub-tok-stats .ts-in { color: var(--accent-2, #4ade80); }
.sub-tok-stats .ts-out { color: var(--danger, #f87171); }

.sub-sections { background: var(--card, #1b1b30); border: 1px solid var(--border, #2a2a44);
    border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.sub-sec-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-sec-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
    border-radius: 999px; font-size: .85rem; border: 1px solid var(--border, #2a2a44); }
.sub-sec-chip.open { color: var(--accent-2, #4ade80); }
.sub-sec-chip.locked { color: var(--text-dim, #a9a9c0); opacity: .75; }

.sub-catalog { margin-bottom: 1.2rem; }
.sub-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.sub-plan { position: relative; background: var(--card, #1b1b30); border: 1px solid var(--border, #2a2a44);
    border-radius: 14px; padding: 1.2rem; display: flex; flex-direction: column; gap: .4rem;
    border-top: 4px solid var(--plan-accent, #8b7ed8); }
.sub-plan.current { outline: 2px solid var(--plan-accent, #8b7ed8); }
.sub-plan-flag { position: absolute; top: .6rem; right: .6rem; font-size: .72rem; padding: .15rem .5rem;
    border-radius: 999px; background: var(--plan-accent, #8b7ed8); color: #14142a; font-weight: 700; }
.sub-plan-flag.active { background: var(--accent-2, #4ade80); }
.sub-plan-title { font-size: 1.2rem; font-weight: 700; }
.sub-plan-price { font-size: 1.5rem; font-weight: 800; color: var(--gold, #f0b429); line-height: 1.15; }
/* BS-179 UI: период «/ месяц» мельче и приглушённее основной цены */
.sub-plan-per { font-size: .6em; font-weight: 600; color: var(--text-dim, #a9a9c0); }
.sub-plan-feats { list-style: none; padding: 0; margin: .4rem 0; font-size: .9rem; color: var(--text-dim, #c0c0d4); }
.sub-plan-feats li { padding: .15rem 0; }
.sub-plan-desc { font-size: .82rem; line-height: 1.4; }
/* BS-179 UI: описание тарифа — структурированный список «что входит» (вместо абзаца) */
.sub-plan-desc-list { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .8rem; line-height: 1.4; color: var(--text-dim, #a9a9c0); }
.sub-plan-desc-list li { position: relative; padding: .12rem 0 .12rem 1rem; }
.sub-plan-desc-list li::before { content: '•'; position: absolute; left: .25rem; color: var(--plan-accent, #8b7ed8); font-weight: 700; }
/* BS-179 UI: пояснение под каталогом тарифов */
.sub-catalog-note { margin: 1rem 0 0; text-align: center; font-size: .85rem; line-height: 1.4; }
.sub-plan-cta { margin-top: auto; padding-top: .6rem; }
.sub-btn { display: inline-block; width: 100%; padding: .6rem .8rem; border-radius: 10px; border: none;
    cursor: pointer; font-weight: 700; background: var(--accent-2, #8b7ed8); color: #14142a; }
.sub-btn.current { background: transparent; color: var(--muted, #8a8aa0); border: 1px solid var(--border, #2a2a44); }
.sub-btn-note { display: block; margin-top: .35rem; font-size: .72rem; text-align: center; }

.sub-history { background: var(--card, #1b1b30); border: 1px solid var(--border, #2a2a44);
    border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.sub-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sub-table th { text-align: left; padding: .4rem .5rem; color: var(--muted, #8a8aa0);
    border-bottom: 1px solid var(--border, #2a2a44); font-weight: 600; }
.sub-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--border-soft, #222238); }
.sub-table td.pos { color: var(--accent-2, #4ade80); }
.sub-table td.neg { color: var(--danger, #f87171); }
.sub-status { padding: .12rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.sub-status.paid { background: rgba(74,222,128,.15); color: #4ade80; }
.sub-status.pend { background: rgba(240,180,41,.15); color: #f0b429; }
.sub-status.canc { background: rgba(248,113,113,.15); color: #f87171; }
.sub-empty { padding: .6rem 0; }

@media (max-width: 860px) {
    .sub-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BS-54 follow-up: кликабельные индикаторы тарифа/токенов → раздел «Тариф и оплата»
   (верхняя пилюля токенов, строка «Тариф:» в подвале сайдбара, плитка баланса на дашборде)
   ═══════════════════════════════════════════════════════════════════════════ */
.tb-pill.tokens.clickable,
.sidebar-foot .h.clickable,
.stat.tokens.clickable { cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
.tb-pill.tokens.clickable:hover,
.sidebar-foot .h.clickable:hover { opacity: .82; }
.stat.tokens.clickable:hover { transform: translateY(-1px); opacity: .92; }
/* underline-подсказка для строки тарифа в сайдбаре */
.sidebar-foot .h.clickable { display: inline-block; }
.sidebar-foot .h.clickable::after { content: ' →'; opacity: .55; font-size: .85em; }

/* ══════ BS-106: уровневая программа (вкладка «Уровни» в «Приглашение друзей») ══════ */
.plv-hero {
    --plv-accent: var(--accent-2);
    display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap;
    background: linear-gradient(135deg, color-mix(in srgb, var(--plv-accent) 14%, var(--card)), var(--card));
    border-color: color-mix(in srgb, var(--plv-accent) 35%, var(--border));
}
.plv-hero-main { flex: 1 1 280px; }
.plv-kicker { color: var(--text-dim); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.plv-title { font-size: 1.7rem; font-weight: 700; margin-top: .25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.plv-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--plv-accent); color: #1a1428; font-weight: 800; font-size: 1.2rem;
}
.plv-percent { margin-top: .4rem; color: var(--text); }
.plv-percent b { color: var(--plv-accent); font-size: 1.15rem; }
.plv-hero-side { display: flex; flex-direction: column; gap: .5rem; min-width: 220px; }
.plv-metric { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .6rem; background: color-mix(in srgb, var(--bg) 55%, transparent); border-radius: 8px; }
.plv-metric .k { color: var(--text-dim); font-size: .82rem; }
.plv-metric .v { font-weight: 600; }

.plv-next { display: flex; flex-direction: column; gap: .4rem; }
.plv-next-title { font-weight: 600; margin-bottom: .2rem; color: var(--accent-2); }
.plv-next-row { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .5rem; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); border-radius: 0 6px 6px 0; }
.plv-next-row .k { color: var(--text-dim); }
.plv-next-row .v { font-weight: 700; }

.plv-ladder { display: flex; flex-direction: column; gap: .6rem; }
.plv-lvl { padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); position: relative; }
.plv-lvl.current { border-color: color-mix(in srgb, var(--plv-accent, var(--accent-2)) 55%, var(--border)); background: color-mix(in srgb, var(--plv-accent, var(--accent-2)) 10%, var(--bg)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--plv-accent, var(--accent-2)) 30%, transparent); }
.plv-lvl-h { display: flex; align-items: center; gap: .5rem; }
.plv-lvl-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--plv-accent, var(--accent-2)); color: #1a1428; font-weight: 800; font-size: .9rem; }
.plv-lvl-t { font-weight: 700; }
.plv-lvl-flag { margin-left: auto; font-size: .72rem; color: var(--plv-accent, var(--accent-2)); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plv-lvl-pct { color: var(--gold); font-weight: 600; margin: .2rem 0; }
.plv-lvl-th { color: var(--text-dim); font-size: .85rem; }
.plv-lvl-d { margin-top: .2rem; font-size: .82rem; }

.plv-sys-refs { margin-bottom: .7rem; color: var(--text-dim); }
.plv-sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.plv-sys { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.plv-sys.open { border-color: color-mix(in srgb, var(--earth) 45%, var(--border)); background: color-mix(in srgb, var(--earth) 10%, var(--bg)); }
.plv-sys.locked { opacity: .72; }
.plv-sys-ico { font-size: 1.05rem; }
.plv-sys.open .plv-sys-ico { color: var(--earth); }
.plv-sys-nm { font-weight: 600; flex: 1; }
.plv-sys-req { font-size: .78rem; }

@media (max-width: 720px) {
    .plv-hero { flex-direction: column; align-items: flex-start; }
    .plv-hero-side { width: 100%; }
}

/* ══════ BS-106: аукцион сертификатов (вкладка «Призы») ══════ */
.prize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; }
.prize-card { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: .35rem; }
.prize-t { font-weight: 700; font-size: 1.02rem; }
.prize-nominal { color: var(--gold); font-weight: 600; }
.prize-meta { font-size: .78rem; }
.prize-mine { font-size: .88rem; padding: .3rem .5rem; background: color-mix(in srgb, var(--accent-2) 8%, var(--bg)); border-radius: 6px; }
.prize-bid { margin-top: .3rem; }
.prize-bid-form { display: flex; gap: .4rem; align-items: center; }
.prize-bid-form input { flex: 1; min-width: 0; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); }

/* BS-236: таймер обратного отсчёта розыгрыша (секунды, JS) + прогресс участников */
.prize-timer { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .95rem; padding: .35rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); align-self: flex-start; }
.prize-timer.is-running { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.prize-timer.is-waiting { color: var(--text-dim); font-weight: 500; font-size: .82rem; }
.prize-timer.is-over { color: var(--text-dim); font-weight: 500; font-size: .85rem; }
.prize-timer-note { min-height: 0; font-size: .8rem; }
.prize-timer-note:not(:empty) { margin-top: -.2rem; }
.prize-progress { margin-top: .15rem; }
.prize-progress-row { font-size: .84rem; margin-bottom: .25rem; }
.prize-progress-bar { height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent-2) 12%, var(--bg)); overflow: hidden; }
.prize-progress-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-2), var(--gold)); transition: width .4s ease; }
.prize-people { margin-top: .45rem; font-size: .85rem; }
.prize-people-t { font-weight: 600; margin-bottom: .25rem; }
.prize-people-t .muted { font-weight: 400; }
.prize-people-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .15rem; }
.prize-win { padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--earth) 40%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--earth) 8%, var(--bg)); margin-bottom: .6rem; }
.prize-win-t { font-weight: 700; margin-bottom: .2rem; }
.prize-win-code { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.prize-win-code .k { color: var(--text-dim); font-size: .85rem; }
.prize-win-code code { font-family: ui-monospace, monospace; background: var(--card); padding: .3rem .6rem; border-radius: 6px; border: 1px solid var(--border); letter-spacing: .03em; }

/* ══════ BS-215: задания партнёрской программы (вкладка «Задания») ══════ */
.ptk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }
.ptk-card { padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); display: flex; flex-direction: column; gap: .4rem; }
.ptk-head { display: flex; align-items: center; gap: .5rem; }
.ptk-ico { font-size: 1.15rem; }
.ptk-t { font-weight: 700; font-size: 1rem; flex: 1; }
.ptk-reward { color: var(--gold); font-weight: 700; white-space: nowrap; }
.ptk-desc { font-size: .84rem; line-height: 1.5; }
.ptk-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; margin-top: .2rem; flex-wrap: wrap; }
.ptk-form { display: flex; gap: .4rem; align-items: center; flex: 1 1 220px; min-width: 0; }
.ptk-form input { flex: 1; min-width: 0; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
.ptk-state { font-size: .86rem; word-break: break-all; }
.ptk-hint { font-size: .78rem; }

/* BS-106: оплата бонусами при покупке тарифа (раздел «Тариф и оплата») */
/* BS-179/BS-106: чекбокс «оплатить бонусами» в форме покупки тарифа */
.sub-bonus-check { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; padding: .5rem .6rem; border: 1px dashed var(--border); border-radius: 8px; background: color-mix(in srgb, var(--accent-2) 6%, var(--bg)); cursor: pointer; }
.sub-bonus-check input[type="checkbox"] { margin-top: .15rem; width: 16px; height: 16px; accent-color: var(--accent-2, #4ade80); cursor: pointer; flex-shrink: 0; }
.sub-bonus-check .sbc-text { display: flex; flex-direction: column; gap: .1rem; }
.sub-bonus-check .sbc-title { font-size: .85rem; color: var(--text); font-weight: 600; }
.sub-bonus-check .sbc-hint { font-size: .78rem; }
.sub-bonus-pay { display: block; font-size: .82rem; margin-bottom: .5rem; }




/* ════════ BS-148.1: Карта внутренних конфликтов (.ic-*) ════════ */
.ic-badge-bar { color: var(--text-dim); }
.ic-foot { font-size: .8rem; line-height: 1.55; margin-top: 1rem; opacity: .85; }

/* Герой-карточка: общий индекс напряжения */
.ic-hero { position: relative; overflow: hidden; padding: 1.4rem 1.5rem; }
.ic-hero .glow { position: absolute; inset: -40% 40% auto auto; width: 320px; height: 320px;
  border-radius: 50%; filter: blur(70px); opacity: .22; pointer-events: none; }
.ic-hero.ic-tone-high .glow      { background: var(--danger); }
.ic-hero.ic-tone-elevated .glow  { background: var(--gold); }
.ic-hero.ic-tone-balanced .glow  { background: var(--accent); }
.ic-hero.ic-tone-low .glow       { background: var(--earth); }
.ic-hero-main { display: flex; align-items: center; gap: 1.5rem; position: relative; flex-wrap: wrap; }

/* Кольцо с индексом 0..100 */
.ic-tension-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid; background: var(--card); position: relative; }
.ic-tension-ring::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; opacity: .12; }
.ic-tension-ring.ic-tone-high      { border-color: var(--danger); }
.ic-tension-ring.ic-tone-elevated  { border-color: var(--gold); }
.ic-tension-ring.ic-tone-balanced  { border-color: var(--accent); }
.ic-tension-ring.ic-tone-low       { border-color: var(--earth); }
.ic-tension-num { font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--text); }
.ic-tension-lbl { font-size: .66rem; color: var(--text-dim); margin-top: .15rem; text-transform: uppercase; letter-spacing: .08em; }

.ic-hero-body { flex: 1 1 320px; min-width: 0; }
.ic-kicker { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; }
.ic-title-big { font-size: 1.35rem; font-weight: 600; margin: .15rem 0 .5rem; color: var(--text); }
.ic-hero-text { font-size: .9rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .9rem; max-width: 60ch; }
.ic-hero-stats { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.ic-stat { font-size: .82rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: .3rem; }
.ic-stat b { font-weight: 600; color: var(--text); }
.ic-stat.ic-sev-high b   { color: var(--danger); }
.ic-stat.ic-sev-medium b { color: var(--gold); }
.ic-stat.ic-sev-low b    { color: var(--text-dim); }
.ic-stat-total b { color: var(--accent-2); }
.ic-hero-bar { height: 6px; border-radius: 4px; background: var(--border); margin-top: 1.2rem; overflow: hidden; }
.ic-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
.ic-bar-fill.ic-tone-high      { background: var(--danger); }
.ic-bar-fill.ic-tone-elevated  { background: var(--gold); }
.ic-bar-fill.ic-tone-balanced  { background: var(--accent); }
.ic-bar-fill.ic-tone-low       { background: var(--earth); }

/* Группы конфликтов по severity */
.ic-group { padding: 1.1rem 1.3rem; }
.ic-group-head { display: flex; align-items: center; gap: .5rem; margin: 0 0 .1rem; }
.ic-group-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ic-group-dot.ic-sev-high   { background: var(--danger); }
.ic-group-dot.ic-sev-medium { background: var(--gold); }
.ic-group-dot.ic-sev-low    { background: var(--text-dim); }
.ic-group-count { font-size: .75rem; color: var(--text-dim); background: var(--bg-active);
  padding: .1rem .5rem; border-radius: 10px; font-weight: 500; }
.ic-group-hint { font-size: .82rem; margin: .1rem 0 .9rem; }
.ic-conflicts { display: flex; flex-direction: column; gap: .8rem; }

/* Карточка одного конфликта */
.ic-conflict { border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: .85rem 1rem; background: color-mix(in srgb, var(--card) 55%, var(--bg)); }
.ic-conflict.ic-sev-high   { border-left-color: var(--danger); }
.ic-conflict.ic-sev-medium { border-left-color: var(--gold); }
.ic-conflict.ic-sev-low    { border-left-color: var(--text-dim); }
.ic-conf-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .4rem; }
.ic-cat-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 1rem; background: var(--bg-active); color: var(--accent-2); }
.ic-conf-title { flex: 1 1 auto; min-width: 0; }
.ic-title { font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.ic-archetype { font-size: .8rem; color: var(--accent-2); margin-top: .1rem; }
.ic-badge { flex: 0 0 auto; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .55rem; border-radius: 12px; white-space: nowrap; }
.ic-badge-high   { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.ic-badge-medium { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.ic-badge-low    { background: var(--bg-active); color: var(--text-dim); }
.ic-desc { font-size: .86rem; line-height: 1.55; color: var(--text-dim); margin: .3rem 0 .4rem; }
.ic-ctx { font-size: .74rem; margin: .2rem 0 .5rem; opacity: .85; }
.ic-res { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ic-res li { font-size: .82rem; line-height: 1.5; color: var(--text); padding-left: 1.1rem; position: relative; }
.ic-res li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--earth); font-weight: 600; }

/* Пустое состояние: гармоничная карта */
.ic-empty { text-align: center; padding: 2.4rem 1.5rem; }
.ic-empty-ico { font-size: 2.6rem; margin-bottom: .4rem; color: var(--earth); }

/* Сферы напряжения (распределение по категориям) */
.ic-cat-grid { display: flex; flex-direction: column; gap: .5rem; }
.ic-cat-row { display: flex; align-items: center; gap: .7rem; }
.ic-cat-ico { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; background: var(--bg-active); color: var(--accent-2); flex: 0 0 auto; }
.ic-cat-name { flex: 0 0 auto; font-size: .85rem; color: var(--text); min-width: 150px; }
.ic-cat-bar { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.ic-cat-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.ic-cat-count { flex: 0 0 auto; font-size: .82rem; font-weight: 600; color: var(--text); min-width: 18px; text-align: right; }

/* Адаптив */
@media (max-width: 860px) {
  .ic-hero { padding: 1.1rem; }
  .ic-hero-main { gap: 1rem; }
  .ic-tension-ring { width: 80px; height: 80px; }
  .ic-tension-num { font-size: 1.5rem; }
  .ic-title-big { font-size: 1.15rem; }
}
@media (max-width: 560px) {
  .ic-conf-head { flex-wrap: wrap; }
  .ic-cat-name { min-width: 0; flex: 1 1 auto; }
  .ic-hero-stats { gap: .3rem .7rem; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-170: Фигуры карты — крупные конфигурации аспектов (стеллиум, Большой
   тригон, Тау-квадрат, Йод, Большой крест, Мистический прямоугольник, Кайт).
   Структура повторяет .ic-* (Карта конфликтов): герой, карточки фигур с
   бейджами, рамки «Напряжение/Талант», рекомендации, empty-state.
   ────────────────────────────────────────────────────────────────────────── */
.ap-badge-bar { color: var(--text-dim); }
.ap-hero { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.ap-hero-score { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 0 0 auto; }
.ap-ring { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: var(--accent-2);
  background: radial-gradient(closest-side, var(--bg-active) 78%, transparent 79% 100%), var(--accent);
  box-shadow: 0 0 0 6px rgba(139, 106, 255, .12); }
.ap-ring-sub { font-size: .78rem; color: var(--text-dim); }
.ap-hero-body { flex: 1 1 320px; min-width: 0; }
.ap-hero-body h3 { margin: 0 0 .5rem; }
.ap-hero-types { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.ap-hero-type { font-size: .78rem; padding: .22rem .6rem; border-radius: 999px;
  background: var(--bg-active); border: 1px solid var(--border); color: var(--text); }
.ap-hero-note { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-dim); }
.ap-hero-note strong { color: var(--text); }

.ap-list { display: flex; flex-direction: column; gap: .9rem; }
.ap-pattern { border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 14px; padding: 1.1rem 1.2rem; background: var(--card); }
.ap-pattern.ap-sev-high   { border-left-color: var(--danger); }
.ap-pattern.ap-sev-medium { border-left-color: var(--gold); }
.ap-pattern.ap-sev-low    { border-left-color: var(--text-dim); }
.ap-conf-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem; }
.ap-type-ico { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-size: 1.15rem; background: var(--bg-active); color: var(--accent-2); flex: 0 0 auto; }
.ap-conf-title { flex: 1 1 auto; min-width: 0; }
.ap-title { font-weight: 700; font-size: 1.02rem; }
.ap-essence { font-size: .8rem; color: var(--text-dim); font-style: italic; margin-top: .15rem; }
.ap-badge { flex: 0 0 auto; font-size: .72rem; font-weight: 600; padding: .2rem .55rem;
  border-radius: 999px; background: var(--bg-active); color: var(--text-dim); border: 1px solid var(--border); }
.ap-badge-high   { color: var(--danger); border-color: var(--danger); }
.ap-badge-medium { color: var(--gold); border-color: var(--gold); }
.ap-badge-low    { color: var(--text-dim); }
.ap-tone-high { color: var(--danger); border-color: var(--danger); }
.ap-tone-ok   { color: var(--earth); border-color: var(--earth); }
.ap-tone-gold { color: var(--gold); border-color: var(--gold); }

.ap-meta-row { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-bottom: .7rem; }
.ap-members { font-size: .86rem; color: var(--text); font-weight: 600; }
.ap-chip { font-size: .74rem; padding: .18rem .55rem; border-radius: 999px;
  background: var(--bg-active); color: var(--text-dim); border: 1px solid var(--border); }

.ap-desc { margin: 0 0 .7rem; font-size: .9rem; line-height: 1.55; color: var(--text); }
.ap-notes { margin: 0 0 .7rem; padding: .6rem .8rem; border-radius: 10px;
  background: var(--bg-active); border: 1px dashed var(--border); }
.ap-notes p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--text-dim); }
.ap-notes p + p { margin-top: .4rem; }

.ap-frames { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.ap-frame { border-radius: 10px; padding: .65rem .85rem; border: 1px solid var(--border); }
.ap-frame-tension { border-left: 3px solid var(--danger); }
.ap-frame-talent  { border-left: 3px solid var(--earth); }
.ap-frame p { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--text-dim); }
.ap-frame-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent-2); font-weight: 700; margin-bottom: .35rem; }

.ap-advice { margin-bottom: .7rem; }
.ap-advice ul { margin: 0; padding-left: 1.1rem; }
.ap-advice li { font-size: .85rem; line-height: 1.5; color: var(--text-dim); margin-bottom: .25rem; }
.ap-kws { display: flex; flex-wrap: wrap; gap: .3rem; }
.ap-kw { font-size: .72rem; padding: .16rem .5rem; border-radius: 999px;
  background: rgba(139, 106, 255, .08); color: var(--accent-2); border: 1px solid rgba(139, 106, 255, .25); }

.ap-empty { text-align: center; padding: 2.4rem 1.5rem; }
.ap-empty-ico { font-size: 2.6rem; margin-bottom: .4rem; color: var(--accent-2); }
.ap-empty h3 { margin: 0 0 .5rem; }
.ap-empty p { margin: 0 auto; max-width: 62ch; font-size: .9rem; line-height: 1.55; color: var(--text-dim); }
.ap-disclaimer { font-size: .84rem; line-height: 1.55; color: var(--text-dim); }

/* Подсказка «Спросить Астру» на карточке фигуры (BS-481/BS-468 канон) —
   hover-подсветка без сдвига layout; см. базовое [data-ai-hint] в блоке BS-468. */
.ap-pattern[data-ai-hint] { cursor: pointer; transition: box-shadow .18s ease, border-color .18s ease; }
.ap-pattern[data-ai-hint]:hover { box-shadow: 0 0 0 1px var(--accent-2); border-color: var(--accent-2); }

@media (max-width: 860px) {
  .ap-hero { gap: 1rem; }
  .ap-ring { width: 76px; height: 76px; font-size: 1.5rem; }
}
@media (max-width: 560px) {
  .ap-conf-head { flex-wrap: wrap; }
  .ap-frames { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-171: Арабские части — раздел кабинета (.al-*) и вкладка «Силы планет»
   раздела «Натальная карта» (.dg-*). Паттерн карточек .ap-* (Фигуры карты),
   тона статусов — дизайн-токены. */
.al-badge-bar { border-color: rgba(139, 106, 255, .35); }

.al-sect { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; font-size: .9rem; line-height: 1.55; color: var(--text-dim); }
.al-sect-ico { font-size: 1.4rem; line-height: 1.2; color: var(--gold); }
.al-sect strong { color: var(--text); }

.al-key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }

.al-group { margin-bottom: 1.6rem; }
.al-group-head h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.al-group-count { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 10px; background: rgba(139, 106, 255, .12); color: var(--accent-2); font-size: .78rem; vertical-align: 1px; }
.al-group-intro { margin: 0 0 .8rem; font-size: .84rem; line-height: 1.5; color: var(--text-dim); max-width: 90ch; }

.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; }

.al-lot { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08)); border-radius: 12px; padding: .85rem 1rem; transition: box-shadow .18s ease, border-color .18s ease; }
.al-lot[data-ai-hint]:hover { box-shadow: 0 0 0 1px var(--accent-2); border-color: var(--accent-2); }
.al-lot-key { grid-column: 1 / -1; border-color: rgba(231, 194, 122, .4); background: rgba(231, 194, 122, .05); }
.al-lot-key[data-ai-hint]:hover { box-shadow: 0 0 0 1px var(--gold); border-color: var(--gold); }

.al-lot-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.al-lot-title { font-weight: 600; font-size: .95rem; }
.al-lot-key .al-lot-title { font-size: 1.05rem; color: var(--gold); }
.al-pos { margin-left: auto; font-size: .8rem; color: var(--text-dim); white-space: nowrap; }
.al-chip { display: inline-block; padding: .05rem .45rem; border-radius: 9px; font-size: .72rem; background: rgba(139, 106, 255, .12); color: var(--accent-2); }
.al-chip-dup { background: rgba(255, 255, 255, .07); color: var(--text-dim); }

.al-formula { margin: .35rem 0 .45rem; font-family: var(--mono, monospace); font-size: .78rem; color: var(--accent-2); letter-spacing: .01em; }
.al-desc { margin: 0 0 .5rem; font-size: .86rem; line-height: 1.55; color: var(--text-dim); }
.al-kws { display: flex; flex-wrap: wrap; gap: .35rem; }
.al-kw { padding: .06rem .5rem; border-radius: 10px; font-size: .74rem; background: rgba(139, 106, 255, .1); color: var(--accent-2); }

.al-empty { text-align: center; padding: 2.4rem 1.5rem; }
.al-empty-ico { font-size: 2.6rem; margin-bottom: .4rem; color: var(--accent-2); }
.al-empty h3 { margin: 0 0 .5rem; }
.al-empty p { margin: 0 auto; max-width: 62ch; font-size: .9rem; line-height: 1.55; color: var(--text-dim); }
.al-disclaimer { font-size: .84rem; line-height: 1.55; color: var(--text-dim); }

/* Вкладка «Силы планет» (в section_natal.php): таблица скоринга + алмутен + приёмы. */
.dg-card h2.sec { margin-bottom: .4rem; }
.dg-lead { margin: 0 0 1rem; font-size: .87rem; line-height: 1.55; color: var(--text-dim); max-width: 95ch; }
.dg-empty { font-size: .9rem; color: var(--text-dim); }

.dg-almuten { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid rgba(231, 194, 122, .35); border-radius: 12px; background: rgba(231, 194, 122, .06); cursor: pointer; transition: box-shadow .18s ease, border-color .18s ease; }
.dg-almuten:hover { box-shadow: 0 0 0 1px var(--gold); border-color: var(--gold); }
.dg-almuten-ico { font-size: 1.5rem; color: var(--gold); line-height: 1.2; }
.dg-almuten strong { color: var(--gold); }
.dg-almuten p { margin: .25rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--text-dim); }

.dg-table td, .dg-table th { vertical-align: top; }
.dg-planet { font-weight: 600; white-space: nowrap; }
.dg-pos { white-space: nowrap; font-size: .85rem; color: var(--text-dim); }
.dg-total { white-space: nowrap; }
.dg-total .fin-status { margin-left: .45rem; }
.dg-parts { max-width: 320px; display: flex; flex-wrap: wrap; gap: .3rem; }
.dg-part { padding: .04rem .45rem; border-radius: 9px; font-size: .74rem; background: rgba(107, 207, 127, .12); color: var(--earth, #6bcf7f); }
.dg-part.neg { background: rgba(231, 106, 106, .12); color: var(--danger, #e76a6a); }

.dg-recs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.dg-rec { border: 1px solid var(--border, rgba(255, 255, 255, .08)); border-radius: 12px; padding: .8rem 1rem; cursor: pointer; transition: box-shadow .18s ease, border-color .18s ease; }
.dg-rec:hover { box-shadow: 0 0 0 1px var(--accent-2); border-color: var(--accent-2); }
.dg-rec strong { display: block; margin-bottom: .3rem; }
.dg-chip { display: inline-block; margin-left: .5rem; padding: .04rem .5rem; border-radius: 9px; font-size: .74rem; background: rgba(139, 106, 255, .12); color: var(--accent-2); }
.dg-rec p { margin: .3rem 0 0; font-size: .83rem; line-height: 1.5; color: var(--text-dim); }
.dg-foot { margin-top: .8rem; }

/* Строки таблицы сил — подсказка «Спросить Астру» (канон .ap-pattern[data-ai-hint]). */
.dg-table tr[data-ai-hint] { cursor: pointer; transition: box-shadow .15s ease; }
.dg-table tr[data-ai-hint]:hover td { background: rgba(139, 106, 255, .05); }

@media (max-width: 860px) {
  .al-pos { margin-left: 0; width: 100%; }
  .al-key-grid, .al-grid, .dg-recs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .al-lot-head { flex-direction: column; gap: .2rem; }
  .dg-parts { max-width: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-172: вкладка «Склонения и середины» раздела «Натальная карта» (.dc-*).
   Паттерн .dg-* (Силы планет): карточки OOB/параллелей на токенах, бейджи
   статусов, details-сворачивание полных таблиц. */
.dc-details { margin: .6rem 0 1.1rem; }
.dc-details summary { cursor: pointer; font-size: .86rem; color: var(--accent-2); margin-bottom: .6rem; }
.dc-details[open] summary { margin-bottom: .8rem; }

.dc-oob-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.dc-oob { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid rgba(231, 106, 106, .3); border-radius: 12px; padding: .85rem 1rem; }
.dc-oob-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; margin-bottom: .35rem; }
.dc-oob-name { font-size: .95rem; }
.dc-oob-decl { margin-left: auto; font-family: var(--mono, monospace); font-size: .8rem; color: var(--text-dim); white-space: nowrap; }
.dc-oob p { margin: 0 0 .45rem; font-size: .85rem; line-height: 1.5; color: var(--text-dim); }
.dc-sm { border-color: rgba(231, 194, 122, .4); background: rgba(231, 194, 122, .05); margin-bottom: 1rem; }
.dc-sm-occ { font-size: .85rem; color: var(--text-dim); }
.dc-sm-occ strong { color: var(--gold); }
.dc-badge { padding: .05rem .5rem; border-radius: 9px; font-size: .72rem; font-weight: 600; background: rgba(231, 106, 106, .14); color: var(--danger, #e76a6a); }
.dc-badge-gold { background: rgba(231, 194, 122, .14); color: var(--gold); }

.dc-list { margin: 0; padding-left: 1.1rem; font-size: .83rem; line-height: 1.5; color: var(--text-dim); }
.dc-list li { margin-bottom: .2rem; }

.dc-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; margin-bottom: 1.1rem; }
.dc-pair { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08)); border-radius: 12px; padding: .85rem 1rem; }
.dc-pair-hard { border-color: rgba(231, 106, 106, .28); }
.dc-pair-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.dc-pair-head strong { font-size: .9rem; }
.dc-pair-type { padding: .04rem .5rem; border-radius: 9px; font-size: .72rem; background: rgba(139, 106, 255, .12); color: var(--accent-2); }
.dc-theme { font-weight: 400; font-size: .76rem; color: var(--text-dim); }
.dc-orb { margin-left: auto; font-family: var(--mono, monospace); font-size: .76rem; color: var(--text-dim); white-space: nowrap; }
.dc-pair p { margin: 0; font-size: .83rem; line-height: 1.5; color: var(--text-dim); }

@media (max-width: 860px) {
  .dc-oob-row, .dc-pairs { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-173: Фиксированные звёзды (блок раздела «Натальная карта») —
   карточки соединений звезда↔тело. Сетка по канону .dc-pairs; бейджи тиров:
   1 Royal (золотой), 2 Major (акцент), 3 Extended (приглушённый).
   ────────────────────────────────────────────────────────────────────────── */
.fs-block { margin-top: 1rem; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; margin-top: .8rem; }
.fs-conj { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 12px; padding: .85rem 1rem; }
.fs-conj.fs-royal { border-color: rgba(231, 194, 122, .35); }
.fs-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.fs-head strong { font-size: .9rem; color: var(--gold, #e7c27a); }
.fs-title { font-size: .76rem; color: var(--text-dim); }
.fs-tier { padding: .04rem .5rem; border-radius: 9px; font-size: .7rem; }
.fs-tier1 { background: rgba(231, 194, 122, .14); color: var(--gold, #e7c27a); }
.fs-tier2 { background: rgba(139, 106, 255, .12); color: var(--accent-2); }
.fs-tier3 { background: rgba(255, 255, 255, .06); color: var(--text-dim); }
.fs-exact { padding: .04rem .5rem; border-radius: 9px; font-size: .7rem; background: rgba(107, 207, 127, .12); color: var(--earth, #6bcf7f); }
.fs-body { font-size: .84rem; margin-bottom: .2rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.fs-sign { color: var(--text-dim); }
.fs-orb { margin-left: auto; font-family: var(--mono, monospace); font-size: .76rem; color: var(--text-dim); }
.fs-nature { font-size: .74rem; color: var(--text-dim); margin-bottom: .3rem; }
.fs-conj p { margin: 0; font-size: .83rem; line-height: 1.5; color: var(--text-dim); }
.fs-kw { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.fs-kw span { padding: .04rem .5rem; border-radius: 9px; font-size: .7rem; background: rgba(139, 106, 255, .09); color: var(--text-dim); }

/* ──────────────────────────────────────────────────────────────────────────
   BS-173: Раздел «Малые тела» — карточки тел по группам (сетка по канону
   .fs-grid/.mo-*), позиция «знак градус · дом», бейдж ℞ и номер MPC.
   ────────────────────────────────────────────────────────────────────────── */
.mo-lead-card { margin-bottom: 1rem; }
.mo-lead-card .rx-lead { margin: 0; }
.mo-group { margin-bottom: 1rem; }
.mo-group .muted { margin: 0 0 .6rem; }
.mo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.mo-body { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 12px; padding: .85rem 1rem; }
.mo-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.mo-head strong { font-size: .9rem; }
.mo-glyph { font-size: 1.05rem; color: var(--accent-2); }
.mo-mpc { font-family: var(--mono, monospace); font-size: .72rem; color: var(--text-dim); }
.mo-retro { font-size: .76rem; color: var(--gold, #e7c27a); }
.mo-pos { font-size: .84rem; margin-bottom: .35rem; }
.mo-house { color: var(--text-dim); }
.mo-body p { margin: 0; font-size: .83rem; line-height: 1.5; color: var(--text-dim); }

@media (max-width: 860px) {
  .fs-grid, .mo-grid { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-507: Раздел «Ведическая» (джйотиш) — герой-визитка (Луна-раши + накшатра),
   раши-карта North/South Indian, карточки грахов (канон .mo-body), блок
   Vimshottari-даш с лентой. Тексты — база interpretations/vedic.json.
   ────────────────────────────────────────────────────────────────────────── */
.vd-disclaimer { font-size: .84rem; line-height: 1.55; margin-bottom: 1rem; }
.vd-hero { position: relative; overflow: hidden; padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.vd-hero .glow { position: absolute; inset: -40% auto auto -30%; width: 320px; height: 320px;
  border-radius: 50%; background: var(--accent-2); filter: blur(70px); opacity: .12; pointer-events: none; }
.vd-hero-main { display: flex; align-items: center; gap: 1.4rem; position: relative; flex-wrap: wrap; }
.vd-hero-moon { flex: 0 0 auto; text-align: center; min-width: 130px; }
.vd-moon-glyph { font-size: 1.9rem; color: var(--gold, #e7c27a); line-height: 1.1; }
.vd-moon-rashi { font-size: 1.2rem; font-weight: 700; color: var(--text); margin-top: .15rem; }
.vd-moon-nak { font-size: .8rem; color: var(--text-dim); }
.vd-hero-body { flex: 1 1 320px; min-width: 0; }
.vd-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .3rem; }
.vd-hero-text { font-size: .88rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .8rem; max-width: 62ch; }
.vd-hero-stats { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.vd-stat { font-size: .82rem; color: var(--text-dim); }
.vd-stat b { color: var(--text); font-weight: 700; }
.vd-nak-hero { margin-bottom: 1rem; }
.vd-nak-en { font-size: .78rem; color: var(--text-dim); font-weight: 400; }
.vd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .7rem; }
.vd-col-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold, #e7c27a); margin-bottom: .35rem; }
.vd-list { margin: 0; padding-left: 1.1rem; font-size: .83rem; line-height: 1.55; color: var(--text-dim); }
.vd-list li + li { margin-top: .2rem; }
.vd-list-growth li::marker { color: var(--gold, #e7c27a); }
.vd-wheel-card { margin-bottom: 1rem; }
.vd-wheel-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.vd-wheel-head h2 { margin-bottom: 0; }
.vd-style-switch { display: flex; gap: .4rem; }
.vd-wheel { margin-top: 1rem; display: flex; justify-content: center; }
.vd-wheel svg { max-width: 100%; height: auto; }
.vd-dasha-card { margin-bottom: 1rem; }
.vd-dasha-hero { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .6rem 0 .8rem; }
.vd-dasha-badge, .vd-dasha-antar { display: flex; flex-direction: column; align-items: center;
  padding: .5rem 1rem; border-radius: 12px; background: rgba(139, 106, 255, .1); border: 1px solid var(--border); }
.vd-dasha-antar { background: rgba(231, 194, 122, .09); }
.vd-dasha-lord { font-size: 1.25rem; font-weight: 700; color: var(--accent-2); }
.vd-dasha-antar .vd-dasha-lord-sm { font-size: 1rem; color: var(--gold, #e7c27a); }
.vd-dasha-kind { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.vd-dasha-dates { font-size: .8rem; line-height: 1.5; color: var(--text-dim); }
.vd-balance { margin-top: .6rem; }
.vd-details { margin-top: .8rem; }
.vd-details summary { cursor: pointer; color: var(--accent-2); font-size: .86rem; }
.vd-dasha-table { margin-top: .6rem; }
.vd-dasha-now td { background: rgba(139, 106, 255, .08); }
.vd-now-badge { padding: .02rem .45rem; border-radius: 8px; font-size: .68rem;
  background: rgba(107, 207, 127, .14); color: var(--earth, #6bcf7f); }
.vd-dasha-theme { font-size: .78rem; color: var(--text-dim); max-width: 420px; }
.vd-group { margin-bottom: 1rem; }
.vd-group .muted { margin: 0 0 .6rem; }
.vd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .8rem; }
.vd-graha { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 12px; padding: .85rem 1rem; }
.vd-graha-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.vd-graha-head strong { font-size: .9rem; }
.vd-glyph { font-size: 1.05rem; color: var(--accent-2); }
.vd-bhava { margin-left: auto; font-family: var(--mono, monospace); font-size: .72rem; color: var(--text-dim); }
.vd-pos { font-size: .84rem; margin-bottom: .3rem; }
.vd-sanskrit { color: var(--text-dim); font-size: .78rem; }
.vd-nak-line { font-size: .8rem; color: var(--text-dim); margin-bottom: .4rem; }
.vd-nak-line b { color: var(--text); font-weight: 600; }
.vd-graha p { margin: 0 0 .35rem; font-size: .83rem; line-height: 1.5; color: var(--text-dim); }
.vd-shadow { color: var(--text-dim); }
.vd-foot { margin-top: .6rem; max-width: 90ch; }

@media (max-width: 860px) {
  .vd-grid { grid-template-columns: 1fr; }
  .vd-cols { grid-template-columns: 1fr; }
  .vd-hero-main { align-items: flex-start; }
  .vd-dasha-theme { max-width: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-509: Раздел «Ба Цзы» (Четыре Столпа судьбы) — герой (Хозяин дня),
   сетка 4 столпов (стебель над ветвью, скрытые стебли, Десять Богов),
   баланс пяти стихий (полосы), сила Хозяина дня. Переиспользует .vd-*
   (дисклеймер/foot/cols) — та же nav-группа «Традиции».
   Тексты — база interpretations/bazi.json.
   ────────────────────────────────────────────────────────────────────────── */
.bz-hero { position: relative; overflow: hidden; padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.bz-hero .glow { position: absolute; inset: -40% auto auto -30%; width: 320px; height: 320px;
  border-radius: 50%; background: var(--gold, #e7c27a); filter: blur(70px); opacity: .12; pointer-events: none; }
.bz-hero-main { display: flex; align-items: center; gap: 1.4rem; position: relative; flex-wrap: wrap; }
.bz-hero-dm { flex: 0 0 auto; text-align: center; min-width: 120px;
  padding: .6rem 1.1rem; border-radius: 14px; background: rgba(231, 194, 122, .08); border: 1px solid var(--border); }
.bz-dm-hanzi { font-size: 2.4rem; line-height: 1.15; color: var(--gold, #e7c27a); }
.bz-dm-pinyin { font-size: .78rem; color: var(--text-dim); }
.bz-hero-body { flex: 1 1 320px; min-width: 0; }
.bz-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .3rem; }
.bz-hero-text { font-size: .9rem; line-height: 1.55; margin: 0 0 .5rem; max-width: 64ch; }
.bz-hero-text b { color: var(--gold, #e7c27a); }
.bz-hero-stats { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .5rem; }
.bz-stat { font-size: .82rem; color: var(--text-dim); }
.bz-stat b { color: var(--text); font-weight: 700; }
.bz-group { margin-bottom: 1rem; }
.bz-group .muted { margin: 0 0 .6rem; }
.bz-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.bz-pillar { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .45rem; }
.bz-pillar-name { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.bz-pillar-chars { display: flex; gap: .5rem; align-items: stretch; }
.bz-char { flex: 1 1 0; text-align: center; padding: .5rem .3rem .45rem; border-radius: 10px; border: 1px solid var(--border); }
.bz-char-stem { background: rgba(231, 194, 122, .08); }
.bz-char-branch { background: rgba(139, 106, 255, .07); }
.bz-char-hanzi { display: block; font-size: 1.7rem; line-height: 1.2; color: var(--text); }
.bz-char-label { display: block; font-size: .68rem; color: var(--text-dim); margin-top: .1rem; }
.bz-pillar-animal { font-size: .84rem; font-weight: 600; }
.bz-pillar-god { font-size: .84rem; color: var(--accent-2); }
.bz-pillar-god b { font-weight: 700; }
.bz-god-hanzi { margin-left: .3rem; color: var(--text-dim); font-size: .82rem; }
.bz-hidden { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem; font-size: .82rem; }
.bz-hidden-stem { padding: .06rem .4rem; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px dashed var(--border); }
.bz-hidden-stem i { font-style: normal; font-size: .68rem; color: var(--text-dim); margin-left: .25rem; }
.bz-hidden-sep { color: var(--text-dim); }
.bz-pillar-desc { margin: 0; font-size: .79rem; line-height: 1.5; color: var(--text-dim); }
.bz-hidden-note { margin: .4rem 0 0; font-size: .8rem; line-height: 1.55; }
.bz-god-counts { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.bz-god-chip { padding: .14rem .55rem; border-radius: 999px; font-size: .78rem;
  background: rgba(139, 106, 255, .09); border: 1px solid var(--border); color: var(--text-dim); }
.bz-god-chip b { color: var(--text); font-weight: 600; }
.bz-chip-fav { background: rgba(107, 207, 127, .1); }
.bz-chip-caution { background: rgba(255, 107, 107, .08); }
.bz-details { margin-top: .6rem; }
.bz-details summary { cursor: pointer; color: var(--accent-2); font-size: .86rem; }
.bz-gods-table { margin-top: .6rem; }
.bz-gods-table td { vertical-align: top; }
.bz-god-role { font-size: .78rem; color: var(--text-dim); max-width: 420px; }
.bz-elements { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem; margin-bottom: .7rem; }
.bz-element { background: var(--card-bg, rgba(255, 255, 255, .03)); border: 1px solid var(--border, rgba(255, 255, 255, .08));
  border-radius: 12px; padding: .8rem .9rem; }
.bz-element-dominant { border-color: rgba(231, 194, 122, .45); }
.bz-element-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.bz-element-name { font-weight: 700; font-size: .9rem; }
.bz-element-count { font-family: var(--mono, monospace); font-size: .78rem; }
.bz-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; margin-bottom: .5rem; }
.bz-bar span { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--gold, #e7c27a)); }
.bz-element-text { margin: 0 0 .3rem; font-size: .8rem; line-height: 1.5; color: var(--text-dim); }
.bz-element-text.bz-element-accent { color: var(--gold, #e7c27a); }
.bz-balance-notes { font-size: .8rem; line-height: 1.55; color: var(--text-dim); }
.bz-balance-notes p { margin: 0 0 .4rem; }
.bz-strength-hero { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin: .4rem 0 .7rem; }
.bz-strength-badge { padding: .28rem .8rem; border-radius: 999px; font-weight: 700; font-size: .86rem;
  background: rgba(139, 106, 255, .1); border: 1px solid rgba(139, 106, 255, .35); color: var(--accent-2); }
.bz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .7rem; }
.bz-col-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold, #e7c27a); margin-bottom: .35rem; }

@media (max-width: 860px) {
  .bz-pillars { grid-template-columns: 1fr 1fr; }
  .bz-elements { grid-template-columns: 1fr; }
  .bz-cols { grid-template-columns: 1fr; }
  .bz-hero-main { align-items: flex-start; }
}

@media (max-width: 560px) {
  .bz-pillars { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-511: Ураническая (Гамбургская школа) — раздел «Традиции».
   Герой «ведущий фактор» (точки на осях диалей), сетка 8 TNP-карточек,
   блоки диалей (оси/пары в две колонки + midpoint-структуры), картинки.
   Переиспользует .vd-disclaimer/.vd-foot и токены темы. */
.ur-hero { position: relative; overflow: hidden; padding: 1.3rem 1.5rem; margin-bottom: 1rem; }
.ur-hero .glow { position: absolute; inset: -40% auto auto -30%; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(139, 106, 255, .12), transparent 70%); pointer-events: none; }
.ur-hero-main { display: flex; align-items: center; gap: 1.4rem; position: relative; flex-wrap: wrap; }
.ur-hero-num { flex: 0 0 auto; text-align: center; min-width: 96px; }
.ur-hero-num b { display: block; font-size: 2.1rem; line-height: 1.1; color: var(--accent-2); }
.ur-hero-num span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.ur-hero-body { flex: 1 1 320px; min-width: 0; }
.ur-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold, #e7c27a); margin-bottom: .35rem; }
.ur-hero-text { font-size: .88rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .7rem; max-width: 62ch; }
.ur-hero-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ur-chip { padding: .22rem .65rem; border-radius: 999px; font-size: .76rem;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.ur-chip-tnp { background: rgba(139, 106, 255, .12); border-color: rgba(139, 106, 255, .4); color: var(--accent-2); }
.ur-tnp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .7rem; }
.ur-tnp-card { border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: .85rem .95rem;
  background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.ur-tnp-card:hover { border-color: rgba(139, 106, 255, .45); box-shadow: 0 0 0 3px rgba(139, 106, 255, .08); }
.ur-tnp-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ur-tnp-name { color: var(--accent-2); }
.ur-tnp-pos { font-size: .8rem; white-space: nowrap; }
.ur-tnp-meta { font-size: .72rem; margin-top: .15rem; }
.ur-tnp-essence { margin: .45rem 0 .2rem; font-weight: 600; font-size: .84rem; line-height: 1.45; }
.ur-tnp-desc { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--text-dim); }
.ur-tnp-kw { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.ur-kw { padding: .12rem .5rem; border-radius: 999px; font-size: .7rem;
  background: rgba(231, 194, 122, .08); border: 1px solid rgba(231, 194, 122, .2); color: var(--gold, #e7c27a); }
.ur-aries-note { margin: .8rem 0 0; font-size: .8rem; line-height: 1.55; }
.ur-dial-block { margin-bottom: 1rem; }
.ur-dial-essence { margin: .2rem 0 .3rem; font-weight: 600; font-size: .88rem; }
.ur-dial-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .7rem; }
.ur-col-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gold, #e7c27a); margin-bottom: .35rem; }
.ur-axis-row { display: flex; flex-direction: column; gap: .1rem; padding: .4rem .6rem; border-radius: 8px;
  cursor: pointer; transition: background .15s; }
.ur-axis-row:hover { background: rgba(139, 106, 255, .07); }
.ur-axis-row .muted { font-size: .76rem; }
.ur-details { margin-top: .7rem; }
.ur-details summary { cursor: pointer; font-size: .82rem; color: var(--text-dim); }
.ur-mid-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.ur-mid { padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-family: var(--mono, monospace);
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.ur-pics { display: grid; gap: .6rem; margin-top: .7rem; }
.ur-pic { border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; padding: .7rem .9rem;
  background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.ur-pic:hover { border-color: rgba(231, 194, 122, .45); box-shadow: 0 0 0 3px rgba(231, 194, 122, .07); }
.ur-pic-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ur-pic-formula { font-family: var(--mono, monospace); font-weight: 700; color: var(--gold, #e7c27a); }
.ur-pic-text { margin: .35rem 0 0; font-size: .84rem; line-height: 1.5; }
.ur-empty { font-style: italic; }

/* BS-516: диаль-график (SVG draw_dial stellium) — форма PRG + диск.
   Follow-up (отзыв владельца): select/опции в стиле тёмной темы — popup
   списка без color-scheme рендерится системным светлым, и светлый текст
   var(--text) на нём не читается; option получает явные тёмные фон/текст
   (тот же фикс у select жребия .tl-lot-form — идентичный паттерн). */
.ur-dial-card { margin-bottom: 1rem; }
.ur-dial-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: .8rem 0; }
.ur-dial-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.ur-dial-form select { min-width: 210px; background: var(--bg-card-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  padding: .45rem .6rem; font-size: .84rem; color-scheme: dark; }
.ur-dial-form select option, .tl-lot-form select option { background: var(--bg-card-2); color: var(--text); }
.ur-dial-form select:focus { outline: none; border-color: var(--accent); }
.ur-dial-wrap { display: flex; justify-content: center; padding: .6rem 0 .2rem; }
.ur-dial-wrap svg { max-width: 100%; height: auto; border-radius: 12px; }
.ur-dial-note { font-size: .76rem; line-height: 1.5; margin: .5rem 0 0; text-align: center; }

@media (max-width: 860px) {
  .ur-tnp-grid { grid-template-columns: 1fr; }
  .ur-dial-cols { grid-template-columns: 1fr; }
  .ur-hero-main { align-items: flex-start; }
}

@media (max-width: 560px) {
  .ur-dial-form { flex-direction: column; align-items: stretch; }
  .ur-dial-form select { min-width: 0; width: 100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   BS-148.3: Анти-рекомендации — чего избегать по сферам жизни.
   Структура повторяет .ic-* (Карта конфликтов): герой с индексом риска,
   группы по severity, карточки предупреждений, распределение по сферам.
   Тон риска: low=earth(зелёный), moderate=accent(фиолетовый),
   elevated=gold(янтарный), high=danger(красный).
   ────────────────────────────────────────────────────────────────────────── */
.ar-badge-bar { color: var(--text-dim); }
.ar-hero { position: relative; overflow: hidden; padding: 1.4rem 1.5rem; }
.ar-hero .glow { position: absolute; inset: -40% 40% auto auto; width: 320px; height: 320px;
  border-radius: 50%; filter: blur(70px); opacity: .14; pointer-events: none; }
.ar-hero.ar-tone-high .glow      { background: var(--danger); }
.ar-hero.ar-tone-elevated .glow  { background: var(--gold); }
.ar-hero.ar-tone-moderate .glow  { background: var(--accent); }
.ar-hero.ar-tone-low .glow       { background: var(--earth); }
.ar-hero-main { display: flex; align-items: center; gap: 1.5rem; position: relative; flex-wrap: wrap; }
.ar-risk-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  border: 3px solid var(--border); display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: var(--bg-active); }
.ar-risk-ring.ar-tone-high      { border-color: var(--danger); }
.ar-risk-ring.ar-tone-elevated  { border-color: var(--gold); }
.ar-risk-ring.ar-tone-moderate  { border-color: var(--accent); }
.ar-risk-ring.ar-tone-low       { border-color: var(--earth); }
.ar-risk-num { font-size: 1.8rem; font-weight: 700; color: var(--text); line-height: 1; }
.ar-risk-lbl { font-size: .68rem; color: var(--text-dim); margin-top: .15rem; text-transform: uppercase; letter-spacing: .05em; }
.ar-hero-body { flex: 1 1 320px; min-width: 0; }
.ar-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .25rem; }
.ar-title-big { font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.ar-hero-text { font-size: .9rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .9rem; max-width: 60ch; }
.ar-hero-stats { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.ar-stat { font-size: .82rem; color: var(--text-dim); }
.ar-stat b { color: var(--text); font-weight: 700; }
.ar-stat.ar-sev-high b   { color: var(--danger); }
.ar-stat.ar-sev-medium b { color: var(--gold); }
.ar-stat.ar-stat-total b { color: var(--text); }
.ar-hero-bar { height: 6px; border-radius: 4px; background: var(--border); margin-top: 1.2rem; overflow: hidden; }
.ar-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.ar-bar-fill.ar-tone-high      { background: var(--danger); }
.ar-bar-fill.ar-tone-elevated  { background: var(--gold); }
.ar-bar-fill.ar-tone-moderate  { background: var(--accent); }
.ar-bar-fill.ar-tone-low       { background: var(--earth); }

.ar-transit-note { font-size: .82rem; line-height: 1.5; margin: .3rem 0 .2rem; }
.ar-group-head { display: flex; align-items: center; gap: .5rem; }
.ar-group-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ar-group-dot.ar-sev-high   { background: var(--danger); }
.ar-group-dot.ar-sev-medium { background: var(--gold); }
.ar-group-dot.ar-sev-low    { background: var(--text-dim); }
.ar-group-count { margin-left: auto; font-size: .78rem; color: var(--text-dim); font-weight: 600; }
.ar-group-hint { font-size: .82rem; line-height: 1.5; margin: -.2rem 0 .9rem; }
.ar-warnings { display: flex; flex-direction: column; gap: .8rem; }

.ar-warn { border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: .85rem 1rem; background: color-mix(in srgb, var(--card) 55%, var(--bg)); }
.ar-warn.ar-sev-high   { border-left-color: var(--danger); }
.ar-warn.ar-sev-medium { border-left-color: var(--gold); }
.ar-warn.ar-sev-low    { border-left-color: var(--text-dim); }
.ar-warn.ar-transit { background: color-mix(in srgb, var(--card) 50%, var(--bg)); border-left-style: dashed; }
.ar-warn-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .4rem; }
.ar-cat-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 1rem; background: var(--bg-active); color: var(--accent-2); }
.ar-warn-title { flex: 1 1 auto; min-width: 0; }
.ar-title { font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.ar-sub { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.ar-cat-chip { font-size: .72rem; color: var(--text-dim); background: var(--bg-active); padding: .1rem .45rem; border-radius: 10px; }
.ar-per-chip { font-size: .72rem; color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); padding: .1rem .45rem; border-radius: 10px; }
.ar-badge { flex: 0 0 auto; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .55rem; border-radius: 12px; white-space: nowrap; }
.ar-badge-high   { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.ar-badge-medium { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.ar-badge-low    { background: var(--bg-active); color: var(--text-dim); }
.ar-desc { font-size: .86rem; line-height: 1.55; color: var(--text-dim); margin: .3rem 0 .4rem; }
.ar-ctx { font-size: .74rem; margin: .2rem 0 .5rem; opacity: .85; }
.ar-avoid { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.ar-avoid li { font-size: .82rem; line-height: 1.5; color: var(--text); padding-left: 1.3rem; position: relative; }
.ar-avoid-ico { position: absolute; left: 0; top: 0; color: var(--danger); font-weight: 700; }

/* Пустое состояние: карта без поражений */
.ar-empty { text-align: center; padding: 2.4rem 1.5rem; }
.ar-empty-ico { font-size: 2.6rem; margin-bottom: .4rem; color: var(--earth); }

/* Сферы риска (распределение по сферам жизни) */
.ar-cat-grid { display: flex; flex-direction: column; gap: .5rem; }
.ar-cat-row { display: flex; align-items: center; gap: .7rem; }
.ar-cat-row .ar-cat-ico { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; background: var(--bg-active); color: var(--accent-2); flex: 0 0 auto; }
.ar-cat-name { flex: 0 0 auto; font-size: .85rem; color: var(--text); min-width: 150px; }
.ar-cat-bar { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.ar-cat-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* Адаптив */
@media (max-width: 860px) {
  .ar-hero { padding: 1.1rem; }
  .ar-hero-main { gap: 1rem; }
  .ar-risk-ring { width: 80px; height: 80px; }
  .ar-risk-num { font-size: 1.5rem; }
  .ar-title-big { font-size: 1.15rem; }
}
@media (max-width: 560px) {
  .ar-warn-head { flex-wrap: wrap; }
  .ar-cat-name { min-width: 0; flex: 1 1 auto; }
  .ar-hero-stats { gap: .3rem .7rem; }
}

/* BS-148.3 (follow-up): кликабельная дата транзитного периода + форма смены дня расчёта.
   Зеркало .eb-date-* (виджет «Энергия дня»): клик по дате → календарь. */
.ar-date-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 .2rem; }
.ar-date-cap { font-size: .82rem; }
.ar-date-btn { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px; padding: .28rem .6rem;
  color: var(--text-dim); font-size: .82rem; font-family: inherit; transition: color .15s ease, border-color .15s ease; }
.ar-date-btn:hover, .ar-date-btn:focus-visible { color: var(--text); border-color: var(--border); outline: none; }
.ar-date-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.ar-date-ico { font-size: .9rem; }
.ar-date-caret { font-size: .62rem; opacity: .65; transition: transform .15s ease; }
.ar-date-btn[aria-expanded="true"] .ar-date-caret { transform: rotate(180deg); }
.ar-date-form { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; flex-basis: 100%; margin: .2rem 0 .6rem; }
.ar-date-form[hidden] { display: none; }
.ar-date-field { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-dim); }
.ar-date-form input[type=date] { padding: .34rem .5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card-2); color: var(--text); font-size: .85rem; font-family: inherit; }
.ar-date-form input[type=date]:focus { outline: none; border-color: var(--accent); }
.ar-date-hint { font-size: .72rem; line-height: 1.4; flex-basis: 100%; }

/* BS-148.3 (bugfix): разделение постоянного риска (натал) и транзитного фона (на дату). */
.ar-risk-split { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .6rem 0 .2rem; }
.ar-risk-cell { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid var(--border); border-left: 3px solid var(--border); background: color-mix(in srgb, var(--card) 60%, var(--bg)); }
.ar-risk-cell.ar-tone-high     { border-left-color: var(--danger); }
.ar-risk-cell.ar-tone-elevated { border-left-color: var(--gold); }
.ar-risk-cell.ar-tone-moderate { border-left-color: var(--accent); }
.ar-risk-cell.ar-tone-low      { border-left-color: var(--earth); }
.ar-risk-cap { font-size: .76rem; color: var(--text-dim); }
.ar-risk-val { font-size: .92rem; color: var(--text); }
.ar-risk-val b { font-weight: 700; }
.ar-risk-sub { font-size: .72rem; line-height: 1.4; }
@media (max-width: 560px) { .ar-risk-split { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════════════════
   BS-148.4: Когнитивные искажения (.cb-*)
   Тоны уровня искажённости: low=earth, moderate=accent, elevated=gold, high=danger.
   ────────────────────────────────────────────────────────────────────────── */
.cb-badge-bar { color: var(--text-dim); }
.cb-hero { position: relative; overflow: hidden; padding: 1.4rem 1.5rem; }
.cb-hero .glow { position: absolute; inset: -40% 40% auto auto; width: 320px; height: 320px;
  border-radius: 50%; filter: blur(70px); opacity: .14; pointer-events: none; }
.cb-hero.cb-tone-high .glow      { background: var(--danger); }
.cb-hero.cb-tone-elevated .glow  { background: var(--gold); }
.cb-hero.cb-tone-moderate .glow  { background: var(--accent); }
.cb-hero.cb-tone-low .glow       { background: var(--earth); }
.cb-hero-main { display: flex; align-items: center; gap: 1.5rem; position: relative; flex-wrap: wrap; }
.cb-dist-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  border: 3px solid var(--border); display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: var(--bg-active); }
.cb-dist-ring.cb-tone-high      { border-color: var(--danger); }
.cb-dist-ring.cb-tone-elevated  { border-color: var(--gold); }
.cb-dist-ring.cb-tone-moderate  { border-color: var(--accent); }
.cb-dist-ring.cb-tone-low       { border-color: var(--earth); }
.cb-dist-num { font-size: 1.8rem; font-weight: 700; color: var(--text); line-height: 1; }
.cb-dist-lbl { font-size: .68rem; color: var(--text-dim); margin-top: .15rem; text-transform: uppercase; letter-spacing: .05em; }
.cb-hero-body { flex: 1 1 320px; min-width: 0; }
.cb-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .25rem; }
.cb-title-big { font-size: 1.35rem; font-weight: 700; color: var(--text); margin-bottom: .4rem; }
.cb-hero-text { font-size: .9rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .9rem; max-width: 60ch; }
.cb-hero-stats { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.cb-stat { font-size: .82rem; color: var(--text-dim); }
.cb-stat b { color: var(--text); font-weight: 700; }
.cb-stat.cb-sev-high b   { color: var(--danger); }
.cb-stat.cb-sev-medium b { color: var(--gold); }
.cb-stat.cb-stat-total b { color: var(--text); }
.cb-hero-bar { height: 6px; border-radius: 4px; background: var(--border); margin-top: 1.2rem; overflow: hidden; }
.cb-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.cb-bar-fill.cb-tone-high      { background: var(--danger); }
.cb-bar-fill.cb-tone-elevated  { background: var(--gold); }
.cb-bar-fill.cb-tone-moderate  { background: var(--accent); }
.cb-bar-fill.cb-tone-low       { background: var(--earth); }

.cb-group-head { display: flex; align-items: center; gap: .5rem; }
.cb-group-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cb-group-dot.cb-sev-high   { background: var(--danger); }
.cb-group-dot.cb-sev-medium { background: var(--gold); }
.cb-group-dot.cb-sev-low    { background: var(--text-dim); }
.cb-group-count { margin-left: auto; font-size: .78rem; color: var(--text-dim); font-weight: 600; }
.cb-group-hint { font-size: .82rem; line-height: 1.5; margin: -.2rem 0 .9rem; }
.cb-biases { display: flex; flex-direction: column; gap: .8rem; }

.cb-bias { border: 1px solid var(--border); border-left: 3px solid var(--border);
  border-radius: 10px; padding: .85rem 1rem; background: color-mix(in srgb, var(--card) 55%, var(--bg)); }
.cb-bias.cb-sev-high   { border-left-color: var(--danger); }
.cb-bias.cb-sev-medium { border-left-color: var(--gold); }
.cb-bias.cb-sev-low    { border-left-color: var(--text-dim); }
.cb-bias-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .4rem; }
.cb-grp-ico { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 1rem; background: var(--bg-active); color: var(--accent-2); }
.cb-bias-title { flex: 1 1 auto; min-width: 0; }
.cb-title { font-size: .98rem; font-weight: 600; color: var(--text); line-height: 1.3; }
.cb-sub { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .25rem; }
.cb-grp-chip { font-size: .72rem; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); padding: .1rem .45rem; border-radius: 10px; }
.cb-src { font-size: .72rem; color: var(--text-dim); }
.cb-badge { flex: 0 0 auto; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .55rem; border-radius: 12px; white-space: nowrap; }
.cb-badge-high   { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.cb-badge-medium { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
.cb-badge-low    { background: var(--bg-active); color: var(--text-dim); }
.cb-desc { font-size: .86rem; line-height: 1.55; color: var(--text-dim); margin: .3rem 0 .5rem; }
.cb-comp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); margin: .4rem 0 .3rem; }
.cb-comp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.cb-comp li { font-size: .82rem; line-height: 1.5; color: var(--text); padding-left: 1.3rem; position: relative; }
.cb-comp-ico { position: absolute; left: 0; top: 0; color: var(--earth); font-weight: 700; }

/* Пустое состояние: карта без выраженных факторов */
.cb-empty { text-align: center; padding: 2.4rem 1.5rem; }
.cb-empty-ico { font-size: 2.6rem; margin-bottom: .4rem; color: var(--earth); }

/* Области мышления (распределение по группам) */
.cb-grp-grid { display: flex; flex-direction: column; gap: .5rem; }
.cb-grp-row { display: flex; align-items: center; gap: .7rem; }
.cb-grp-row .cb-grp-ico { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center;
  justify-content: center; font-size: .9rem; background: var(--bg-active); color: var(--accent-2); flex: 0 0 auto; }
.cb-grp-name { flex: 0 0 auto; font-size: .85rem; color: var(--text); min-width: 160px; }
.cb-grp-bar { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.cb-grp-fill { display: block; height: 100%; background: var(--accent-2); border-radius: 4px; }

/* Адаптив */
@media (max-width: 860px) {
  .cb-hero { padding: 1.1rem; }
  .cb-hero-main { gap: 1rem; }
  .cb-dist-ring { width: 80px; height: 80px; }
  .cb-dist-num { font-size: 1.5rem; }
  .cb-title-big { font-size: 1.15rem; }
}
@media (max-width: 560px) {
  .cb-bias-head { flex-wrap: wrap; }
  .cb-grp-name { min-width: 0; flex: 1 1 auto; }
  .cb-hero-stats { gap: .3rem .7rem; }
}


/* ──────────────────────────────────────────────────────────────────────────
   BS-219: Матрица Судьбы — раздел кабинета (.dm-*)
   ────────────────────────────────────────────────────────────────────────── */

/* Герой-карточка: личный аркан + центр + предназначение + личный год */
.dm-hero { padding: 1.4rem; }
.dm-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; }
.dm-hero-cell { background: var(--bg-active); border-radius: var(--radius); padding: 1rem 1.1rem; }
.dm-hero-cell.main { background: linear-gradient(135deg, rgba(156, 106, 222, .16), rgba(212, 175, 55, .10)); border: 1px solid var(--border-soft); }
.dm-hero-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .4rem; }
.dm-hero-num { font-size: 2.3rem; font-weight: 800; line-height: 1; color: var(--accent-2); }
.dm-hero-title { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: .35rem 0 .2rem; }
.dm-hero-year { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--border-soft); font-size: .9rem; color: var(--text); }
.dm-hero-year strong { color: var(--gold); }

/* Плитки углов даты и прямого квадрата */
.dm-date-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.dm-date-grid.four { grid-template-columns: repeat(4, 1fr); }
.dm-date-tile { background: var(--bg-active); border-radius: var(--radius); padding: .9rem 1rem; text-align: center; }
.dm-date-num { font-size: 1.7rem; font-weight: 800; color: var(--accent-2); line-height: 1.1; }
.dm-date-title { font-size: .92rem; font-weight: 600; color: var(--text); margin-top: .2rem; }
.dm-date-label { font-size: .76rem; margin-top: .15rem; }

/* Карточка аркана с трактовкой */
.dm-arcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.dm-arc { padding: 1.2rem; }
.dm-arc-head { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }
.dm-arc-num { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 1.35rem; font-weight: 800; color: var(--gold);
  background: rgba(212, 175, 55, .12); border: 1px solid rgba(212, 175, 55, .3); }
.dm-arc-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.dm-arc-role { font-size: .78rem; }
.dm-arc-desc { font-size: .88rem; color: var(--text); line-height: 1.55; margin: 0 0 .8rem; }
.dm-arc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dm-arc-col { background: var(--bg-active); border-radius: calc(var(--radius) - 4px); padding: .7rem .8rem; }
.dm-arc-col-h { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.dm-arc-col.plus .dm-arc-col-h { color: var(--earth); }
.dm-arc-col.minus .dm-arc-col-h { color: var(--gold); }
.dm-arc-col ul { margin: 0; padding-left: 1.1rem; }
.dm-arc-col li { font-size: .8rem; line-height: 1.5; color: var(--text); margin-bottom: .25rem; }
.dm-arc-spheres { font-size: .82rem; line-height: 1.5; margin-top: .8rem; }
.dm-arc-prof { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.dm-arc-prof-chip { font-size: .74rem; padding: .12rem .55rem; border-radius: 9px; background: var(--bg-active);
  color: var(--text-dim); border: 1px solid var(--border-soft); }

/* Градусный слой (при наличии карты) */
.dm-degrees { display: flex; flex-wrap: wrap; gap: .5rem; }
.dm-degree-chip { display: flex; align-items: center; gap: .45rem; padding: .35rem .7rem; border-radius: 10px;
  background: var(--bg-active); border: 1px solid var(--border-soft); font-size: .8rem; }
.dm-degree-body { font-weight: 600; color: var(--text); }
.dm-degree-arc { color: var(--accent-2); font-weight: 600; }

/* BS-220: октограмма-SVG; BS-553 — сферы кликабельны (hover-отклик) */
.dm-wheel { padding: 1.1rem; }
.dm-wheel-wrap { display: flex; justify-content: center; }
.dm-wheel-wrap svg { max-width: 560px; width: 100%; height: auto; border-radius: 10px; }
.dm-wheel-wrap svg g[data-ai-hint] { cursor: pointer; }
.dm-wheel-wrap svg g[data-ai-hint]:hover { opacity: .82; }
.dm-wheel-hint { text-align: center; font-size: .78rem; margin: .5rem 0 0; }
@media (max-width: 560px) { .dm-wheel-wrap svg { max-width: 100%; } }

/* BS-552: возрастная карта — личный прогноз + сетка 0–80 */
.dm-age { padding: 1.2rem; margin-top: 1.4rem; }
.dm-age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.dm-age-cell { padding: .85rem; border-radius: 12px; background: var(--bg-active); border: 1px solid var(--border-soft); text-align: center; }
.dm-age-cell.main { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
.dm-age-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.dm-age-num { font-size: 1.9rem; font-weight: 700; color: var(--accent-2); line-height: 1.25; }
.dm-age-cell.main .dm-age-num { color: var(--gold); }
.dm-age-title { font-weight: 600; }
.dm-age-all { padding: 1rem 1.2rem; margin-top: .9rem; }
.dm-age-all summary { cursor: pointer; font-weight: 600; color: var(--text); }
.dm-age-table-wrap { overflow-x: auto; margin-top: .8rem; }
.dm-age-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.dm-age-table th, .dm-age-table td { text-align: left; padding: .45rem .6rem; border-top: 1px solid var(--border-soft); vertical-align: top; }
.dm-age-table th { color: var(--text-dim); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; border-top: 0; }
.dm-age-table tr.now td { background: rgba(139, 126, 216, .09); }
.dm-age-now { display: inline-block; margin-left: .4rem; font-size: .72rem; color: var(--accent-2); font-weight: 600; }
.dm-age-nodes { display: flex; flex-wrap: wrap; gap: .3rem; }
.dm-age-node { font-size: .72rem; padding: .1rem .45rem; border-radius: 8px; background: var(--bg-active); border: 1px solid var(--border-soft); white-space: nowrap; }
.dm-age-note { font-size: .78rem; margin: .7rem 0 0; }
@media (max-width: 860px) { .dm-age-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) {
  .dm-age-grid { grid-template-columns: 1fr; }
  .dm-age { padding: 1rem; }
}

/* Адаптив (критерии приёмки: 860 / 560) */
@media (max-width: 860px) {
  .dm-hero-grid { grid-template-columns: 1fr 1fr; }
  .dm-hero-cell.main { grid-column: 1 / -1; }
  .dm-date-grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dm-hero-grid { grid-template-columns: 1fr; }
  .dm-date-grid { grid-template-columns: 1fr 1fr; }
  .dm-arc-cols { grid-template-columns: 1fr; }
  .dm-arc { padding: 1rem; }
}


/* ════════════════════════════════════════════════════════════════════════════
   BS-227: Родовые программы (.anc-*)
   Тоны уровня выраженности: low=earth, balanced=accent, elevated=gold, high=danger.
   ────────────────────────────────────────────────────────────────────────── */
.anc-badge-bar { color: var(--text-dim); }
.anc-foot { font-size: .8rem; line-height: 1.55; margin-top: 1rem; opacity: .85; }

/* Дисклеймер рамки подачи (BS-213 §4) — до любого контента раздела */
.anc-disclaimer { font-size: .84rem; line-height: 1.6; color: var(--text-dim);
  border: 1px dashed var(--border); background: color-mix(in srgb, var(--accent-2) 4%, var(--bg)); }
.anc-disclaimer b { color: var(--text); }
.anc-disclaimer i { font-style: italic; }

/* Герой-карточка: индекс выраженности родовых тем */
.anc-hero { position: relative; overflow: hidden; padding: 1.4rem 1.5rem; }
.anc-hero .glow { position: absolute; inset: -40% 40% auto auto; width: 320px; height: 320px;
  filter: blur(90px); opacity: .16; pointer-events: none; }
.anc-hero.anc-tone-high .glow      { background: var(--danger); }
.anc-hero.anc-tone-elevated .glow  { background: var(--gold); }
.anc-hero.anc-tone-balanced .glow  { background: var(--accent); }
.anc-hero.anc-tone-low .glow       { background: var(--earth); }
.anc-hero-main { display: flex; align-items: center; gap: 1.5rem; position: relative; flex-wrap: wrap; }
.anc-score-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 3px solid var(--border); background: var(--bg); }
.anc-score-ring.anc-tone-high      { border-color: var(--danger); box-shadow: 0 0 22px color-mix(in srgb, var(--danger) 28%, transparent); }
.anc-score-ring.anc-tone-elevated  { border-color: var(--gold);   box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 26%, transparent); }
.anc-score-ring.anc-tone-balanced  { border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 24%, transparent); }
.anc-score-ring.anc-tone-low       { border-color: var(--earth);  box-shadow: 0 0 22px color-mix(in srgb, var(--earth) 22%, transparent); }
.anc-score-num { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.anc-score-lbl { font-size: .68rem; color: var(--text-dim); margin-top: .2rem; }
.anc-hero-body { flex: 1 1 300px; min-width: 0; }
.anc-kicker { color: var(--text-dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }
.anc-title-big { font-size: 1.45rem; font-weight: 700; margin: .3rem 0 .5rem; }
.anc-hero-text { margin: 0; color: var(--text-dim); font-size: .92rem; line-height: 1.6; max-width: 60ch; }
.anc-hero-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.anc-stat { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem;
  padding: .25rem .7rem; border-radius: 99px; border: 1px solid var(--border-soft); color: var(--text-dim); }
.anc-stat b { font-size: .95rem; }
.anc-stat.anc-sev-high   { border-color: color-mix(in srgb, var(--danger) 45%, var(--border-soft)); color: var(--text); }
.anc-stat.anc-sev-medium { border-color: color-mix(in srgb, var(--gold) 45%, var(--border-soft)); }
.anc-stat.anc-sev-low    { border-color: color-mix(in srgb, var(--earth) 45%, var(--border-soft)); }
.anc-stat.anc-stat-total { border-style: dashed; }
.anc-hero-bar { height: 6px; border-radius: 99px; background: var(--bg-active); margin-top: 1.1rem; overflow: hidden; }
.anc-bar-fill { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.anc-bar-fill.anc-tone-high      { background: var(--danger); }
.anc-bar-fill.anc-tone-elevated  { background: var(--gold); }
.anc-bar-fill.anc-tone-balanced  { background: var(--accent); }
.anc-bar-fill.anc-tone-low       { background: var(--earth); }

/* Группы паттернов по severity */
.anc-group { margin-top: 1.2rem; }
.anc-group-head { display: flex; align-items: center; gap: .55rem; }
.anc-group-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.anc-group-dot.anc-sev-high   { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 55%, transparent); }
.anc-group-dot.anc-sev-medium { background: var(--gold); }
.anc-group-dot.anc-sev-low    { background: var(--earth); }
.anc-group-count { font-size: .75rem; color: var(--text-dim); background: var(--bg-active);
  padding: .1rem .55rem; border-radius: 99px; margin-left: .2rem; }
.anc-group-hint { margin: .3rem 0 .9rem; font-size: .85rem; }
.anc-patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .9rem; }

/* Карточка паттерна/опоры/точки роста */
.anc-pattern { border: 1px solid var(--border-soft); border-radius: 12px; padding: .9rem 1rem;
  background: var(--bg); display: flex; flex-direction: column; gap: .55rem; }
.anc-pattern.anc-sev-high   { border-color: color-mix(in srgb, var(--danger) 40%, var(--border-soft)); }
.anc-pattern.anc-sev-medium { border-color: color-mix(in srgb, var(--gold) 38%, var(--border-soft)); }
.anc-pattern-head { display: flex; align-items: flex-start; gap: .6rem; }
.anc-grp-ico { font-size: 1.05rem; line-height: 1.3; flex: 0 0 auto; }
.anc-pattern-title { flex: 1 1 auto; min-width: 0; }
.anc-title { font-weight: 700; font-size: .95rem; line-height: 1.35; }
.anc-archetype { font-size: .78rem; color: var(--text-dim); margin-top: .15rem; }
.anc-badge { flex: 0 0 auto; font-size: .7rem; padding: .18rem .6rem; border-radius: 99px;
  border: 1px solid var(--border-soft); color: var(--text-dim); white-space: nowrap; }
.anc-badge.anc-badge-high   { border-color: var(--danger); color: var(--danger); }
.anc-badge.anc-badge-medium { border-color: var(--gold); color: var(--gold); }
.anc-badge.anc-badge-low    { border-color: var(--earth); color: var(--earth); }
.anc-desc { margin: 0; font-size: .86rem; line-height: 1.6; color: var(--text-dim); }
.anc-ctx { font-size: .74rem; }
.anc-acts-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: .1rem; }
.anc-growth { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.anc-growth li { font-size: .84rem; line-height: 1.5; }
.anc-growth li::marker { color: var(--accent-2); }

/* Опоры рода — тёплый тон ресурса */
.anc-supports .anc-pattern { border-color: color-mix(in srgb, var(--earth) 35%, var(--border-soft)); }
.anc-supports .anc-grp-ico { color: var(--earth); }
/* Точки роста — штриховой акцент направления */
.anc-growth-block .anc-pattern { border-style: dashed; }

/* BS-231: транзитный слой «окна активации» — пунктирная карточка + плашка-пояснение */
.anc-pattern.anc-transit { border-style: dashed; border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border-soft)); }
.anc-transit-note { font-size: .82rem; line-height: 1.6; color: var(--text-dim); padding: .8rem 1rem; }
.anc-transit-note b { color: var(--text); }

/* Сводка «Линии рода» */
.anc-cat-grid { display: flex; flex-direction: column; gap: .55rem; }
.anc-cat-row { display: grid; grid-template-columns: auto 1fr minmax(120px, 220px) auto;
  align-items: center; gap: .6rem; }
.anc-cat-name { font-size: .86rem; color: var(--text-dim); }
.anc-cat-bar { height: 8px; border-radius: 99px; background: var(--bg-active); overflow: hidden; }
.anc-cat-fill { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent-2)); }
.anc-cat-count { font-size: .82rem; color: var(--text-dim); min-width: 2ch; text-align: right; }

/* Empty-state */
.anc-empty { text-align: center; padding: 2.4rem 1.4rem; }
.anc-empty-ico { font-size: 2.2rem; opacity: .8; }
.anc-empty .sec { margin-top: .6rem; }
.anc-empty p { max-width: 62ch; margin: .7rem auto 0; }

/* Адаптив (по критериям приёмки: 860 / 560) */
@media (max-width: 860px) {
  .anc-patterns { grid-template-columns: 1fr; }
  .anc-hero { padding: 1.1rem 1.1rem; }
  .anc-hero-main { gap: 1rem; }
}
@media (max-width: 560px) {
  .anc-score-ring { width: 80px; height: 80px; }
  .anc-score-num { font-size: 1.4rem; }
  .anc-title-big { font-size: 1.2rem; }
  .anc-cat-row { grid-template-columns: auto 1fr auto; }
  .anc-cat-bar { grid-column: 1 / -1; }
}

/* ══════════ BS-286: Прогрессии — раздел кабинета (.prog-*) ══════════ */
/* Рамка подачи (канон Цыпина) — до контента, как дисклеймер ancestry. */
.prog-frame { padding: .9rem 1.1rem; font-size: .88rem; line-height: 1.6;
  color: var(--text-dim); border-left: 3px solid var(--gold); }
.prog-badge-bar { margin-bottom: .8rem; }
/* BS-286 → отзыв 2026-08-20: интро-строка панели «Прогрессии» внутри вкладки
   «Прогнозы» — verify-бейдж + кнопка «Разобрать с ИИ» (бывший page-head раздела). */
.prog-panel-intro { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.prog-panel-intro .prog-badge-bar { margin-bottom: 0; }

/* Герой: возраст / дуга / фаза */
.prog-hero { padding: 1.2rem 1.3rem; }
.prog-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.prog-stat { min-width: 0; }
.prog-stat-num { font-size: 1.5rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-2); line-height: 1.2; }
.prog-stat-lbl { font-size: .82rem; color: var(--text-dim); margin-top: .3rem; line-height: 1.45; }
.prog-stat-lbl .muted { font-size: .76rem; opacity: .8; }

/* Двойное колесо — общий контейнер .kery-wheel (BS-114), свой max-width. */
.prog-wheel-card { padding: 1.1rem 1.3rem 1.3rem; }
.prog-wheel svg { max-width: 100%; height: auto; }
#view-progressions .kery-wheel { max-width: 1180px; margin: 0 auto; }

/* Карточки прогрессивных тел */
.prog-bodies { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: .8rem; margin-top: .8rem; }
.prog-body { padding: .9rem 1rem; margin: 0; border: 1px solid var(--border); }
.prog-body-angle { opacity: .92; }
.prog-body-head { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.prog-body-name { font-weight: 650; font-size: .95rem; }
.prog-body-pos { font-size: .86rem; color: var(--accent-2); }
.prog-badge { font-size: .72rem; padding: .12rem .5rem; border-radius: 99px;
  background: var(--bg-active); color: var(--text-dim); white-space: nowrap; }
.prog-badge-hot { color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: transparent; }
.prog-badge-rx { color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: transparent; }
.prog-body-line { font-size: .82rem; margin-top: .45rem; }
.prog-body-line b { color: var(--accent-2); font-weight: 600; }
.prog-same { opacity: .75; }
.prog-body-text { font-size: .84rem; line-height: 1.55; color: var(--text-dim); margin: .55rem 0 0; }
.prog-change-note { margin-top: .6rem; padding: .55rem .7rem; border-radius: .55rem;
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  font-size: .82rem; line-height: 1.55; }
.prog-change-note b { color: var(--gold); }
.prog-change-note p { margin: .25rem 0 0; color: var(--text-dim); }
.prog-body-aspects { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.prog-asp { font-size: .74rem; padding: .14rem .5rem; border-radius: .4rem;
  background: var(--bg-active); color: var(--text-dim); }
.prog-asp i { font-style: normal; opacity: .7; }

/* «Волна года»: прогресс-бар цикла */
.prog-wave { margin: .9rem 0; }
.prog-wave-phases { display: flex; justify-content: space-between; font-size: .74rem;
  color: var(--text-dim); margin-bottom: .35rem; }
.prog-wave-bar { position: relative; height: 10px; border-radius: 99px;
  background: var(--bg-active); overflow: visible; }
.prog-wave-fill { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, transparent), var(--accent-2)); }
.prog-wave-dot { position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent-2);
  border: 3px solid var(--bg-card); box-shadow: 0 0 0 1px var(--border); }
.prog-wave-meta { display: flex; justify-content: space-between; font-size: .78rem; margin-top: .4rem; }
.prog-phase-note { margin-top: .8rem; padding: .65rem .8rem; border-radius: .55rem;
  background: color-mix(in srgb, var(--accent-2) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  font-size: .84rem; line-height: 1.6; color: var(--text-dim); }
.prog-phase-note b { color: var(--accent-2); }

/* Solar arc / станции / upcoming / cross-аспекты */
.prog-count { font-size: .74rem; padding: .1rem .5rem; border-radius: 99px;
  background: var(--bg-active); color: var(--text-dim); vertical-align: middle; margin-left: .3rem; }
.prog-arc-list { display: grid; gap: .6rem; margin-top: .8rem; }
.prog-arc-item { padding: .7rem .85rem; border: 1px solid var(--border); border-radius: .6rem; font-size: .86rem; }
.prog-arc-item p { margin: .35rem 0 0; line-height: 1.55; color: var(--text-dim); font-size: .83rem; }
.prog-arc-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.prog-station { border-style: dashed; border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.prog-advice { margin: .5rem 0 0; padding-left: 1.15rem; font-size: .8rem;
  color: var(--text-dim); line-height: 1.55; }
.prog-advice li { margin: .18rem 0; }
.prog-upcoming { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .6rem; margin-top: .8rem; }
.prog-up-item { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .8rem;
  border: 1px solid var(--border); border-radius: .6rem; }
.prog-up-ico { font-size: 1rem; line-height: 1.3; }
.prog-up-title { font-size: .87rem; font-weight: 550; line-height: 1.4; }
.prog-cross { display: grid; gap: .6rem; margin-top: .8rem; }
.prog-cross-item { padding: .7rem .85rem; border: 1px solid var(--border); border-radius: .6rem; }
.prog-cross-head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; font-size: .88rem; }
.prog-cross-arch { font-size: .8rem; font-style: italic; margin-top: .3rem; }
.prog-cross-text { font-size: .84rem; line-height: 1.55; color: var(--text-dim); margin: .35rem 0 0; }
.prog-foot { font-size: .8rem; line-height: 1.55; margin-top: 1rem; opacity: .85; }

/* Адаптив (860 / 560 — канон сиблингов) */
@media (max-width: 860px) {
  .prog-hero-stats { grid-template-columns: 1fr; gap: .7rem; }
  .prog-bodies { grid-template-columns: 1fr; }
  .prog-upcoming { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .prog-stat-num { font-size: 1.25rem; }
  .prog-wave-phases span:nth-child(2), .prog-wave-phases span:nth-child(4) { display: none; }
}

/* ══════════ BS-223: ℞ Ретроградные планеты — сводный блок в «Натальной карте» ══════════ */
.rx-card { margin-top: 1.1rem; }
.rx-lead { margin: .2rem 0 1.1rem; max-width: 70ch; color: var(--text-dim); font-size: .9rem; line-height: 1.6; }
.rx-empty { margin: .4rem 0 .2rem; color: var(--text-dim); font-size: .9rem; line-height: 1.6; max-width: 70ch; }
.rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .9rem; }

/* Карточка ретроградной планеты */
.rx-planet { border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border-soft));
  border-radius: 12px; padding: .95rem 1rem; background: var(--bg);
  display: flex; flex-direction: column; gap: .55rem; }
.rx-head { display: flex; align-items: center; gap: .65rem; }
.rx-head .glyph { font-size: 1.25rem; color: var(--accent-2); }
.rx-title { flex: 1 1 auto; min-width: 0; }
.rx-title h3 { margin: 0; font-size: 1rem; line-height: 1.3; }
.rx-rx { color: var(--accent-2); font-weight: 700; }
.rx-pos { font-size: .8rem; color: var(--text-dim); margin-top: .12rem; }
.rx-meaning { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--text-dim); }

/* Блок дома — приглушённая подложка, отличает от базового смысла */
.rx-house { background: var(--bg-active); border-radius: 8px; padding: .55rem .7rem; }
.rx-house p { margin: .2rem 0 0; font-size: .84rem; line-height: 1.55; color: var(--text-dim); }

/* Знаковый слой «ретро в знаке» (BS-229) — сворачиваемая подложка <details>:
   карточка планеты не раздувается, текст раскрывается по требованию */
.rx-sign { background: color-mix(in srgb, var(--accent-2) 7%, var(--bg));
  border: 1px dashed color-mix(in srgb, var(--accent-2) 35%, var(--border-soft));
  border-radius: 8px; padding: .45rem .7rem; }
.rx-sign summary { cursor: pointer; font-size: .78rem; font-weight: 600;
  color: var(--accent-2); letter-spacing: .02em; user-select: none; list-style: none; }
.rx-sign summary::before { content: '▸ '; font-size: .72rem; }
.rx-sign[open] summary::before { content: '▾ '; }
.rx-sign summary::-webkit-details-marker { display: none; }
.rx-sign p { margin: .45rem 0 0; font-size: .84rem; line-height: 1.58; color: var(--text-dim); }
.rx-sign .rx-kw { margin-top: .5rem; }

.rx-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-top: .15rem; }
.rx-list { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: .28rem; }
.rx-list li { font-size: .84rem; line-height: 1.5; color: var(--text-dim); }
.rx-strengths li::marker { color: var(--earth); }
.rx-advice   li::marker { color: var(--accent); }
.rx-avoid    li::marker { color: var(--danger); }
.rx-kw { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }

/* Адаптив (по канону BS-148.x: 860 / 560) */
@media (max-width: 860px) {
  .rx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rx-planet { padding: .8rem .85rem; }
  .rx-head .glyph { font-size: 1.1rem; }
}

/* ══════════ BS-230: ⚷ Хирон «раненый целитель» — карточка в «Натальной карте» ══════════ */
/* Переиспользует сетку/карточку .rx-* (та же вёрстка); отличия: золотой тон глифа,
   рамка «Рана/Дар» и ретро-строка (ретро-нюанс Хирона — отдельным полем, вне
   матрицы ретро-планет). */
.ch-card { border-color: color-mix(in srgb, var(--gold) 28%, var(--border-soft)); }
.ch-card .rx-head .glyph { color: var(--gold); }
.ch-frame { display: flex; flex-direction: column; gap: .45rem; }
.ch-frame-row { display: flex; gap: .6rem; align-items: flex-start;
  background: color-mix(in srgb, var(--gold) 6%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, var(--border-soft));
  border-radius: 8px; padding: .5rem .7rem; }
.ch-frame-lbl { flex: 0 0 auto; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--gold); padding-top: .15rem; }
.ch-frame-row p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-dim); }
.ch-retro { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--text-dim);
  background: var(--bg-active); border-radius: 8px; padding: .5rem .7rem; }
.ch-retro .rx-rx { margin-right: .3rem; }

/* ══════════ BS-290 follow-up: тёмная тема select2 (модал персоны) ══════════
   Дефолтная тема select2 — светлая (белые селекшен/дропдаун), выбивалась из
   тёмного кабинета в полях «Город (место рождения)» и «Часовой пояс (IANA)».
   Переопределяем на дизайн-токены проекта, повторяя канон соседних полей
   .fg input/select (фон --bg-card-2, граница --border, текст --text, фокус —
   --accent + --ring). Действует на все select2 кабинета (виджеты geeration
   «new-city»/«np-tz» и любые будущие). Специфичность выше дефолтной темы
   (.select2-container--default), подключённой в layout.php раньше. */

/* ── Закрытый селекшен (поле с выбранным значением) ── */
.select2-container--default .select2-selection--single {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  height: auto;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text);
  line-height: 1.4;
  padding: .6rem .8rem;
  font-size: .92rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-dim);
}
/* Стрелка-каретка: дефолтная серая картинка border'ом невидима на тёмном —
   перекрашиваем в приглушённый текст; при открытии разворачивается. */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-dim) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--text-dim) transparent;
}
/* Крестик очистки (allowClear) */
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-selection--multiple .select2-selection__choice__remove {
  color: var(--text-dim);
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover,
.select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--danger);
}

/* ── Фокус контейнера — тот же акцент, что у .fg input:focus ── */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ── Дропдаун (список подсказок) ── */
.select2-container--default .select2-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.select2-container--default.select2-container--open.select2-container--below .select2-dropdown { border-top-color: var(--border); }
.select2-container--default.select2-container--open.select2-container--above .select2-dropdown { border-bottom-color: var(--border); }

/* Строка поиска внутри дропдауна */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: .5rem .7rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder { color: var(--text-dim); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Инлайн-поиск (single-селекшен после клика) */
.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  color: var(--text);
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder { color: var(--text-dim); }

/* ── Опции списка ── */
.select2-container--default .select2-results__option {
  color: var(--text-dim);
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--bg-active);
  color: var(--text);
}
/* Hover/подсветка клавиатурной навигации — мягкий акцент */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: color-mix(in srgb, var(--accent) 22%, var(--bg-card));
  color: var(--text);
}
.select2-container--default .select2-results__option[aria-disabled=true] { color: var(--text-dim); opacity: .6; }
/* Сообщения «Введите минимум 3 символа» / «Поиск…» / «не найдено» */
.select2-container--default .select2-results__option.loading-results,
.select2-container--default .select2-results__option.select2-results__message {
  color: var(--text-dim);
}

/* ── Мульти-селекшен (будущие виджеты; для единообразия) ── */
.select2-container--default .select2-selection--multiple {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: .35rem .8rem; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--bg-active);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
}

/* ── Дропдаун, отрендеренный в body (по умолчанию у наших виджетов
      dropdownParent — модал, но страховка для будущих) ── */
body > .select2-container--default .select2-dropdown { background: var(--bg-card); }

/* ── Скроллбар длинного списка (WebKit) ── */
.select2-container--default .select2-results > .select2-results__options { scrollbar-color: var(--border) transparent; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track { background: transparent; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* disabled-контейнер */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background: var(--bg-card);
  border-color: var(--border-soft);
  color: var(--text-dim);
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered { color: var(--text-dim); }

/* ════════════════════════════════════════════════════════════════════════
   BS-306: «Колесо баланса» — раздел кабинета (перенос прототипа
   circle-balance.local в стилистику сервиса: дизайн-токены, сетка .card,
   адаптив 1180/860/560). Префикс .bw- изолирует от соседних разделов.
   ════════════════════════════════════════════════════════════════════════ */

/* Guard: явный display у классов ниже (flex и т.п.) не должен перебивать
   атрибут hidden (браузерное [hidden]{display:none} проигрывает специфичности) */
#view-balance [hidden],
.bw-survey-scrim[hidden] { display: none !important; }
/* ⚠ Модал теста «В» живёт ВНЕ #view-balance (сразу после </section>), поэтому
   guard для него продублирован отдельным селектором: без него display:flex
   scrim'а перебивает браузерный [hidden]{display:none} и пустой оверлей
   перекрывает весь кабинет, перехватывая клики (баг ловился bs306 e2e). */

.bw-disclaimer {
    background: rgba(212, 175, 55, .07);
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: var(--radius);
    padding: .85rem 1.1rem;
    font-size: .88rem;
    color: #e8d9bd;
    margin-bottom: 1.1rem;
}
.bw-disclaimer b { color: var(--gold); }

.bw-grid {
    display: grid;
    /* minmax(0,…) + min-width:0 у детей — корм для отзывчивого canvas Chart.js:
       без них grid-трек раздувается до min-content от инлайн-ширины canvas, и на
       мобильных весь раздел выезжает за экран (отзыв владельца по BS-306). */
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
    padding-bottom: 2rem;
}
.bw-grid > .bw-left,
.bw-grid > .bw-right { min-width: 0; }

.bw-h2 { font-size: 1.02rem; font-weight: 500; margin: 1.1rem 0 .5rem; }
.bw-h2:first-child { margin-top: 0; }
.bw-dim { color: var(--text-dim); font-weight: 400; }
.bw-hint { color: var(--text-dim); font-size: .82rem; margin: .35rem 0; }
.bw-center { text-align: center; }

/* ── Слайдеры личной оценки ── */
.bw-slider-row { margin-bottom: .6rem; }
.bw-slider-row label { display: block; font-size: .9rem; }
.bw-slider-ctl { display: flex; align-items: center; gap: .75rem; }
.bw-slider-ctl input[type="range"] { flex: 1; accent-color: var(--gold); }
.bw-slider-ctl output {
    min-width: 34px;
    text-align: center;
    font-weight: 600;
    color: var(--gold);
    background: rgba(212, 175, 55, .1);
    border-radius: 7px;
    padding: 2px 6px;
    font-variant-numeric: tabular-nums;
}

.bw-run-row { margin-top: 1rem; }
/* Мобильные (отзыв владельца): у .btn глобальный white-space:nowrap — длинные
   подписи («Пройти психологический тест (В)») распирали колонку за экран.
   Кнопки левой колонки — во всю ширину карточки с переносом подписи. */
.bw-left .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
}

/* ── Состояния результата ── */
.bw-empty, .bw-error { text-align: center; padding: 2.6rem 1.4rem; }
.bw-empty p, .bw-error p { color: var(--text-dim); max-width: 460px; margin: 0 auto; }
.bw-big-ico { font-size: 2.6rem; margin-bottom: .6rem; }
.bw-error .bw-h2 { color: var(--danger); margin-top: 0; }

/* ── Радар ── */
.bw-res-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.bw-toggles { display: flex; gap: .5rem; flex-wrap: wrap; }
.bw-tg {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-dim);
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px .75rem;
    cursor: pointer;
    user-select: none;
}
.bw-tg input { accent-color: var(--accent); }

.bw-chart-wrap {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    background: radial-gradient(circle at 50% 45%, var(--bg-card-2) 0%, var(--bg-card) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .85rem;
}
/* Жёсткий кап canvas: Chart.js ставит инлайн-ширину в px по контейнеру на момент
   ресайза; пока observer догоняет (или колесо создано в скрытом разделе), canvas
   не должен раздувать контейнер — иначе элементы выезжают за экран (мобильные). */
.bw-chart-wrap canvas {
    display: block;
    max-width: 100%;
}

/* ── Сводная таблица ── */
.bw-table-wrap { overflow-x: auto; }
.bw-sum-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.bw-sum-table th, .bw-sum-table td {
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    white-space: nowrap;
}
.bw-sum-table th {
    color: var(--text-dim);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.bw-sum-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bw-sum-table td.v-cell { color: #8fd9a1; font-weight: 600; }

/* ── Расшифровка ── */
.bw-pill {
    display: inline-block;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: .72rem;
    border-radius: 999px;
    padding: 1px .6rem;
    vertical-align: middle;
    margin-left: .4rem;
    font-weight: 400;
}

.bw-bd-card {
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: .6rem;
    overflow: hidden;
}
.bw-bd-card summary {
    cursor: pointer;
    padding: .6rem .9rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.bw-bd-card summary::-webkit-details-marker { display: none; }
.bw-bd-card summary::before {
    content: "▸";
    color: var(--text-dim);
    transition: transform .12s;
}
.bw-bd-card[open] summary::before { transform: rotate(90deg); }
.bw-bd-card summary b { font-weight: 500; }

.bw-bd-score {
    background: rgba(126, 211, 252, .12);
    color: var(--air);
    border-radius: 999px;
    font-size: .76rem;
    padding: 2px .6rem;
}
.bw-bd-user {
    background: rgba(212, 175, 55, .12);
    color: var(--gold);
    border-radius: 999px;
    font-size: .76rem;
    padding: 2px .6rem;
}

.bw-bd-body { padding: .25rem 1rem .75rem 1.9rem; }
.bw-bd-house { margin-bottom: .6rem; }
.bw-bd-house-head { font-size: .86rem; margin-bottom: .25rem; font-weight: 600; }
.bw-bd-facts { margin: 0; padding-left: 1.1rem; }
.bw-bd-facts li { font-size: .83rem; color: var(--text-dim); margin-bottom: .2rem; }
.bw-bd-facts b { color: var(--text); font-weight: 600; }

/* ── Методология В: плашка честности ── */
.bw-v-plate {
    background: rgba(107, 207, 127, .07);
    border: 1px solid rgba(107, 207, 127, .35);
    border-radius: var(--radius);
    padding: .75rem 1rem;
    font-size: .85rem;
    color: #cfe8d6;
    margin-bottom: .6rem;
}
.bw-v-plate b { color: #8fd9a1; }

/* ── Методология В: модал опросника (один вопрос на экран) ── */
.bw-survey-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(5, 8, 14, .72);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
}
.bw-survey-modal {
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.35rem 1.1rem;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.bw-svq-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .6rem;
}
.bw-svq-sphere {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--accent-2);
    font-weight: 600;
}
.bw-svq-progress { color: var(--text-dim); font-size: .8rem; margin-top: .2rem; }
.bw-svq-close {
    color: var(--text-dim);
    font-size: 1.5rem;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 8px;
}
.bw-svq-close:hover { color: var(--text); background: var(--bg-card-2); }

.bw-svq-bar {
    height: 5px;
    background: var(--bg-card-2);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.bw-svq-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--gold));
    border-radius: 999px;
    transition: width .2s ease;
}

.bw-svq-text { font-size: 1.04rem; line-height: 1.5; margin: 0 0 .85rem; min-height: 3em; }

.bw-svq-options { display: grid; gap: .5rem; margin-bottom: .75rem; }
.bw-svq-opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    background: var(--bg-card-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s;
}
.bw-svq-opt:hover { border-color: var(--accent-2); }
.bw-svq-opt.picked { border-color: var(--gold); background: rgba(212, 175, 55, .08); }
.bw-svq-opt input { accent-color: var(--gold); }
.bw-svq-cap { flex: 1; }
.bw-svq-num { color: var(--text-dim); font-size: .76rem; font-variant-numeric: tabular-nums; }

.bw-svq-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: .25rem; }
.bw-svq-nav .btn { min-width: 130px; }

/* ── Адаптив ── */
@media (max-width: 1180px) {
    .bw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .bw-chart-wrap { max-width: 100%; }
}
@media (max-width: 560px) {
    .bw-svq-nav { flex-direction: column-reverse; }
    .bw-svq-nav .btn { width: 100%; }
    .bw-sum-table th, .bw-sum-table td { padding: .4rem .45rem; font-size: .82rem; }
}

/* ════════════════ АРХЕТИПЫ (Юнг/Пирсон) — BS-147 ════════════════
   Балльная модель 12 архетипов: герой ведущего архетипа, ведущая тройка,
   бары всех 12, три измерения (Эго/Душа/Самость), 4 драйва, модал опросника.
   Цвет измерения через --arc-c (канон .enn-c у Эннеаграммы):
   ego → accent-2, soul → earth, self → gold. */

.arc-d-ego  { --arc-c: var(--accent-2); }
.arc-d-soul { --arc-c: var(--earth); }
.arc-d-self { --arc-c: var(--gold); }

.arc-badge { margin: 0 0 1rem; }

.arc-hero { position: relative; overflow: hidden; }
.arc-hero > .glow { position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--arc-c, var(--accent-2)) 22%, transparent), transparent 70%); }
.arc-hero-main { display: flex; align-items: center; gap: 1.2rem; position: relative; }
.arc-hero-glyph { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; background: color-mix(in srgb, var(--arc-c, var(--accent-2)) 14%, var(--bg-card-2));
    border: 1px solid color-mix(in srgb, var(--arc-c, var(--accent-2)) 40%, var(--border)); }
.arc-hero-body { min-width: 0; }
.arc-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .25rem; }
.arc-title { font-size: 1.5rem; font-weight: 650; color: var(--text); margin-bottom: .4rem; }
.arc-desc { font-size: .9rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .6rem; }
.arc-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--text-dim); }
.arc-hero-meta b { color: var(--arc-c, var(--accent-2)); }
.arc-hero-meta .arc-match { color: var(--earth); font-weight: 500; }

.arc-test-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.arc-test-actions { display: flex; align-items: center; gap: .9rem; margin-top: .7rem; }
.arc-test-date { font-size: .78rem; }

.arc-top-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .6rem; }
.arc-top-chip { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 12px;
    background: var(--bg-card-2); border: 1px solid var(--border); font-size: .9rem; }
.arc-top-chip.lead { border-color: color-mix(in srgb, var(--arc-c, var(--accent-2)) 55%, var(--border));
    background: color-mix(in srgb, var(--arc-c, var(--accent-2)) 12%, var(--bg-card-2)); font-weight: 500; }
.arc-top-rank { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .8rem; }
.arc-top-pct { color: var(--arc-c, var(--accent-2)); font-variant-numeric: tabular-nums; font-size: .85rem; }
.arc-top-note { font-size: .82rem; line-height: 1.5; margin: 0; }

.arc-resonance { font-size: .9rem; color: var(--text); margin-bottom: .8rem; }
.arc-resonance b { color: var(--accent-2); }

.arc-ranking { display: flex; flex-direction: column; gap: .35rem; }
.arc-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: .7rem; }
.arc-row.lead .arc-rank-name { color: var(--arc-c, var(--accent-2)); font-weight: 600; }
.arc-rank-name { font-size: .85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-d-ego-tx { color: var(--accent-2); } .arc-d-soul-tx { color: var(--earth); } .arc-d-self-tx { color: var(--gold); }
.arc-bar { height: 8px; background: var(--bg-card-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.arc-fill { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--arc-c, var(--accent-2)) 45%, transparent), var(--arc-c, var(--accent-2))); border-radius: 4px; }
.arc-rank-score { font-size: .78rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.arc-sleep { font-size: .82rem; line-height: 1.5; margin: .9rem 0 0; }

.arc-dims { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.arc-dim-card { padding: .8rem .9rem; border-radius: 14px; background: var(--bg-card-2); border: 1px solid var(--border); }
.arc-dim-card.active { border-color: color-mix(in srgb, var(--arc-c, var(--accent-2)) 55%, var(--border));
    background: color-mix(in srgb, var(--arc-c, var(--accent-2)) 8%, var(--bg-card-2)); }
.arc-dim-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .92rem; }
.arc-dim-head .muted { font-size: .78rem; }
.arc-dim-glyph { font-size: 1.1rem; }
.arc-dim-types { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .55rem; }
.arc-type-chip { font-size: .78rem; padding: .16rem .55rem; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); }

.arc-drives { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.arc-drive { padding: .7rem .9rem; border-radius: 12px; background: var(--bg-card-2); border: 1px solid var(--border); }
.arc-drive-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; margin-bottom: .4rem; }
.arc-drive-pct { color: var(--accent-2); font-variant-numeric: tabular-nums; font-size: .84rem; }
.arc-drive .arc-bar { margin-bottom: .4rem; }
.arc-drive .arc-fill { --arc-c: var(--accent-2); }
.arc-drive-members { font-size: .76rem; }

.arc-foot { font-size: .78rem; line-height: 1.5; margin: 1rem 0 0; }

/* Модал опросника (48 пунктов) — канон .enn-test-модала Эннеаграммы */
.arc-test-scrim { z-index: 60; }
.arc-test-modal { width: min(760px, 96vw); padding: 20px; }
.arc-test-intro { font-size: .84rem; line-height: 1.5; margin-bottom: .8rem; }
.arc-test-list { max-height: min(58vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.arc-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .2rem; border-bottom: 1px solid var(--border-soft); }
.arc-item-text { display: flex; gap: .6rem; font-size: .9rem; line-height: 1.45; color: var(--text); flex: 1; min-width: 0; }
.arc-item-num { flex: 0 0 auto; color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .8rem; min-width: 22px; }
.arc-item-scale { display: flex; gap: .15rem; flex: 0 0 auto; }
.arc-radio { cursor: pointer; }
.arc-radio input { position: absolute; opacity: 0; pointer-events: none; }
.arc-radio span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 8px; border: 1px solid var(--border); color: var(--text-dim); font-size: .82rem;
    background: var(--bg-card-2); transition: border-color .15s ease, color .15s ease; }
.arc-radio:hover span { border-color: var(--accent-2); color: var(--accent-2); }
.arc-radio input:checked + span { border-color: var(--accent-2); color: var(--text);
    background: color-mix(in srgb, var(--accent-2) 22%, var(--bg-card-2)); font-weight: 600; }
.arc-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.arc-test-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.arc-test-progress { font-size: .8rem; }
.arc-test-err { color: var(--danger); font-size: .8rem; }

@media (max-width: 860px) {
    .arc-dims { grid-template-columns: 1fr; }
    .arc-drives { grid-template-columns: 1fr; }
    .arc-row { grid-template-columns: 118px 1fr 42px; gap: .5rem; }
}
@media (max-width: 560px) {
    .arc-hero-main { gap: .9rem; }
    .arc-hero-glyph { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 14px; }
    .arc-title { font-size: 1.2rem; }
    .arc-row { grid-template-columns: 1fr 42px; }
    .arc-row .arc-bar { grid-column: 1 / -1; order: 5; }
    .arc-item { align-items: flex-start; }
}

/* ══════════ MMPI / СМИЛ (BS-160) — клинические и поведенческие шкалы ══════════ */
/* Канон .arc-* (Архетипы) и .enn-* (Эннеаграмма): дизайн-токены, сетка .card. */

.mm-demo-badge { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
.mm-demo-note { display: block; margin-top: .3rem; color: var(--gold); }
.mm-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mm-test-date { font-size: .78rem; }

/* Ведущая карточка: кодотип + вердикт достоверности */
.mm-hero { position: relative; overflow: hidden; }
.mm-hero > .glow { position: absolute; inset: -40% -10% auto auto; width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 70%); }
.mm-hero-main { display: flex; align-items: center; gap: 1.2rem; position: relative; }
.mm-hero-code { flex: 0 0 auto; min-width: 92px; padding: .6rem .9rem; border-radius: 18px; display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; font-weight: 750; letter-spacing: .04em; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--accent-2) 14%, var(--bg-card-2));
    border: 1px solid color-mix(in srgb, var(--accent-2) 40%, var(--border)); color: var(--accent-2); }
.mm-hero-code.invalid { background: color-mix(in srgb, var(--danger) 12%, var(--bg-card-2));
    border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); color: var(--danger); }
.mm-hero-body { min-width: 0; }
.mm-kicker { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: .25rem; }
.mm-title { font-size: 1.35rem; font-weight: 650; color: var(--text); margin-bottom: .4rem; }
.mm-desc { font-size: .9rem; line-height: 1.55; color: var(--text-dim); margin: 0 0 .6rem; }
.mm-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .8rem; color: var(--text-dim); }
.mm-hero-meta b { color: var(--accent-2); }
.mm-verdict { font-size: .8rem; padding: .18rem .6rem; border-radius: 12px; border: 1px solid var(--border); }
.mm-v-valid    { color: var(--earth);  border-color: color-mix(in srgb, var(--earth) 45%, var(--border)); }
.mm-v-caution  { color: var(--gold);   border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.mm-v-invalid  { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* T-профиль: бары с маркером порога 65T */
.mm-profile { display: flex; flex-direction: column; gap: .35rem; }
.mm-row { display: grid; grid-template-columns: 34px 210px 1fr 46px; align-items: center; gap: .7rem; }
.mm-row.lead .mm-rank-name { font-weight: 600; color: var(--accent-2); }
.mm-rank-code { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
    font-size: .82rem; font-weight: 600; color: var(--text-dim); background: var(--bg-card-2); border: 1px solid var(--border); }
.mm-rank-name { font-size: .85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-bar { position: relative; height: 10px; background: var(--bg-card-2); border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.mm-fill { display: block; height: 100%; border-radius: 5px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 45%, transparent), var(--accent-2)); }
.mm-threshold { position: absolute; top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--gold) 80%, transparent); z-index: 1; }
.mm-rank-score { font-size: .8rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.mm-row.lead .mm-rank-score { color: var(--accent-2); }

/* Полосы band'ов (тон заливки по severity-канону) */
.mm-b-low      { background: linear-gradient(90deg, color-mix(in srgb, var(--text-dim) 35%, transparent), var(--text-dim)) !important; }
.mm-b-avg      { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 40%, transparent), var(--accent-2)) !important; }
.mm-b-elevated { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 40%, transparent), var(--gold)) !important; }
.mm-b-high     { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 55%, transparent), var(--gold)) !important; }
.mm-b-vhigh    { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 45%, transparent), var(--danger)) !important; }

.mm-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .76rem; margin-top: .8rem; }
.mm-leg { display: inline-flex; align-items: center; gap: .35rem; }
.mm-leg::before { content: ''; width: 14px; height: 8px; border-radius: 4px; background: var(--accent-2); }

/* Карточки шкал с трактовками */
.mm-scale-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.mm-scale-card { padding: .8rem .9rem; border-radius: 14px; background: var(--bg-card-2); border: 1px solid var(--border);
    border-left: 3px solid var(--accent-2); }
.mm-scale-card.mm-b-elevated, .mm-scale-card.mm-b-high { border-left-color: var(--gold); }
.mm-scale-card.mm-b-vhigh { border-left-color: var(--danger); }
.mm-scale-card.mm-b-low { border-left-color: var(--text-dim); }
.mm-scale-card.lead { border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border));
    background: color-mix(in srgb, var(--accent-2) 7%, var(--bg-card-2)); }
.mm-scale-head { display: flex; align-items: baseline; gap: .55rem; }
.mm-scale-code { font-size: 1.05rem; font-weight: 700; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mm-scale-name { font-weight: 600; font-size: .94rem; color: var(--text); flex: 1; min-width: 0; }
.mm-scale-t { font-size: .9rem; font-weight: 700; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.mm-scale-band { font-size: .76rem; margin: .2rem 0 .45rem; }
.mm-scale-level { font-size: .84rem; line-height: 1.5; color: var(--text-dim); margin: 0 0 .5rem; }
.mm-scale-kw { display: flex; flex-wrap: wrap; gap: .3rem; }
.mm-kw-chip { font-size: .74rem; padding: .14rem .55rem; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim); }

/* Валидностный слой — канон .enn-corr-table */
.mm-corr-table { display: flex; flex-direction: column; gap: .12rem; }
.mm-corr-row { display: grid; grid-template-columns: 1fr 90px 60px; align-items: center; gap: .6rem;
    padding: .3rem .35rem; border-radius: 8px; }
.mm-corr-row:hover { background: rgba(139, 126, 216, .06); }
.mm-corr-scale { font-size: .84rem; color: var(--text); }
.mm-corr-glyph, .mm-corr-planet { font-size: .8rem; color: var(--text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.mm-retake { margin-top: .2rem; }

/* Дисклеймер */
.mm-foot { font-size: .78rem; line-height: 1.5; margin: 1rem 0 0; }

/* ── BS-628: публичная ссылка прохождения теста (блок раздела MMPI) ── */
.mmi-invite { margin-top: .9rem; }
.mmi-invite .muted { max-width: 70ch; }
.mmi-status { font-size: .85rem; margin: .2rem 0 .7rem; }
.mmi-link-row { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.mmi-link-input { flex: 1; min-width: 240px; background: rgba(8, 6, 24, .55); color: var(--text);
    border: 1px solid rgba(139, 126, 216, .28); border-radius: 10px; padding: .55rem .8rem;
    font-size: .82rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mmi-pin-once { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
    padding: .7rem .9rem; margin: .2rem 0 .7rem; border-radius: 12px;
    background: rgba(231, 194, 122, .08); border: 1px solid rgba(231, 194, 122, .35);
    font-size: .85rem; }
.mmi-pin-code { font-size: 1.5rem; font-weight: 800; letter-spacing: .3em; color: var(--gold);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mmi-meta { font-size: .8rem; margin: .2rem 0 .7rem; }
.mmi-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .2rem; }
.mmi-actions form { display: contents; }
.mmi-revoke { color: #ff8f9c; border-color: rgba(255, 122, 138, .4); }
.mmi-revoke:hover { background: rgba(255, 122, 138, .08); color: #ffb3bc; }

/* ── Модал опросника (567 пунктов, пошаговый проход) — канон .arc-test-modal ── */
.mm-test-scrim { z-index: 60; }
.mm-test-modal { width: min(860px, 96vw); padding: 20px; }
.mm-test-intro { font-size: .84rem; line-height: 1.5; margin-bottom: .8rem; max-height: 24vh; overflow-y: auto; }
.mm-progress-row { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.mm-progress-bar { flex: 1; height: 8px; background: var(--bg-card-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
.mm-progress-fill { display: block; height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 45%, transparent), var(--accent-2));
    transition: width .25s ease; }
.mm-progress-label { font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mm-step-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.mm-step-label { font-size: .8rem; font-variant-numeric: tabular-nums; }
.mm-test-list { max-height: min(48vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.mm-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .2rem; border-bottom: 1px solid var(--border-soft); }
.mm-item-text { display: flex; gap: .6rem; font-size: .88rem; line-height: 1.45; color: var(--text); flex: 1; min-width: 0; }
.mm-item-num { flex: 0 0 auto; color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: .8rem; min-width: 34px; text-align: right; }
.mm-item-scale { display: flex; gap: .35rem; flex: 0 0 auto; }
.mm-radio { cursor: pointer; }
.mm-radio input { position: absolute; opacity: 0; pointer-events: none; }
.mm-radio span { display: flex; align-items: center; justify-content: center; min-width: 62px; height: 32px;
    padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--border); color: var(--text-dim); font-size: .84rem;
    background: var(--bg-card-2); transition: border-color .15s ease, color .15s ease; }
.mm-radio:hover span { border-color: var(--accent-2); color: var(--accent-2); }
.mm-radio input:checked + span { border-color: var(--accent-2); color: var(--text);
    background: color-mix(in srgb, var(--accent-2) 22%, var(--bg-card-2)); font-weight: 600; }
.mm-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.mm-test-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.mm-skip-note { font-size: .74rem; line-height: 1.4; flex: 1; min-width: 200px; }
.mm-test-foot-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mm-test-err { color: var(--danger); font-size: .8rem; }

@media (max-width: 860px) {
    .mm-row { grid-template-columns: 30px 150px 1fr 42px; gap: .5rem; }
    .mm-scale-grid { grid-template-columns: 1fr; }
    .mm-hero-main { gap: .9rem; }
}
@media (max-width: 560px) {
    .mm-row { grid-template-columns: 1fr 42px; }
    .mm-row .mm-bar { grid-column: 1 / -1; order: 5; }
    .mm-hero-code { min-width: 74px; font-size: 1.4rem; }
    .mm-title { font-size: 1.15rem; }
    .mm-item { align-items: flex-start; }
    .mm-item-scale { flex-direction: column; gap: .25rem; }
    .mm-radio span { min-width: 84px; }
}

/* ── BS-176: продвинутая визуализация — лента года (Gantt + графическая эфемерида)
   и PDF-визуализации в отчётах (планировщик года / атлас карт) ───────────────── */

/* Вкладка «Лента года» раздела «Прогнозы». SVG приходит из stellium-сервиса
   (светлый/тёмный фон несёт сам) — контейнер только масштабирует и оборачивает. */
.tl-gantt-wrap, .tl-eph-wrap { overflow-x: auto; border-radius: 10px; background: rgba(0,0,0,.25); padding: .5rem; }
.tl-gantt-wrap svg, .tl-eph-wrap svg { display: block; max-width: 100%; height: auto; min-width: 640px; }
.tl-gantt-count { margin-top: .6rem; font-size: .82rem; }
.tl-fast-opt { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.tl-fast-opt input { accent-color: var(--accent-2); }
.tl-fast-opt input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Компактный empty-state внутри карточек (вкладка «Лента года»). */
.placeholder-sm { padding: 1.6rem 1rem; }
.placeholder-sm .ico { font-size: 1.6rem; margin-bottom: .4rem; }
.placeholder-sm p { font-size: .86rem; max-width: 420px; margin: 0 auto; }

/* PDF-панель детального просмотра (planner/atlas — файл уже готовый PDF). */
.rep-pdf-panel { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.rep-pdf-ico { font-size: 2.2rem; line-height: 1; opacity: .9; }
.rep-pdf-info { flex: 1; min-width: 240px; }
.rep-pdf-info p { margin: .35rem 0 0; font-size: .85rem; line-height: 1.55; }

/* Карточки генерации PDF-визуализаций в панели «Создать отчёт». */
.rep-pdf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: .8rem; }
.rep-pdf-card { border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; padding: 1rem; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: .55rem; }
.rep-pdf-card-head { display: flex; align-items: center; gap: .5rem; font-size: .98rem; }
.rep-pdf-ico-sm { font-size: 1.3rem; }
.rep-pdf-card p { margin: 0; font-size: .82rem; line-height: 1.55; }
.rep-pdf-card-row { display: flex; align-items: end; gap: .7rem; flex-wrap: wrap; }
.rep-pdf-card-row label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--text-dim); }
.rep-pdf-card-row input[type="number"] { width: 96px; }
.rep-pdf-note { font-size: .76rem !important; opacity: .8; }
.rep-gen-pdf { margin-top: 1rem; }

@media (max-width: 560px) {
    .rep-detail-actions .btn, .rep-detail-actions form { width: 100%; }
    .rep-pdf-panel { align-items: flex-start; }
}

/* ═══ BS-561: скелетон ленивых разделов (этап 3 эпики BS-558) ═══
   Плейсхолдер раздела до подгрузки фрагментом: лёгкий каркас из полос
   с мягким шиммером (движки считаются в это время фрагмент-эндпоинтом).
   Разметку рендерит cab_lazySection() (views/cabinet/helpers.php). */
.lazy-skel-wrap { max-width: 760px; margin: 0 auto; padding: 1.4rem 0; display: flex; flex-direction: column; gap: .9rem; }
.lazy-skel {
    height: 74px; border-radius: 12px;
    background: linear-gradient(100deg, rgba(255,255,255,.04) 35%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 65%);
    background-size: 240% 100%;
    animation: lazy-skel-shift 1.5s ease-in-out infinite;
}
.lazy-skel-h { height: 30px; width: 46%; border-radius: 8px; }
.lazy-skel-hero { height: 150px; }
.lazy-skel-short { height: 46px; width: 62%; }
.lazy-skel-note { margin: .4rem 0 0; font-size: .82rem; color: var(--text-dim, rgba(255,255,255,.55)); }
@keyframes lazy-skel-shift { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .lazy-skel { animation: none; } }

/* ═══ BS-648: раздел админки «Аналитика» — посещаемость и запросы к ИИ ═══
   Переиспользует .stat-row/.stat/.card/.page-head. Новое: переключатель
   диапазона (единый для всех графиков), сетка карточек-графиков и
   оформление SVG-диаграмм (классы серий приходят из client-рендера). */
.an-range { display: inline-flex; gap: .35rem; margin-bottom: 1.1rem; border: 1px solid var(--border); border-radius: 10px; padding: .28rem; background: rgba(255,255,255,.02); }
.an-range-btn { border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: .85rem; padding: .38rem .95rem; border-radius: 7px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.an-range-btn:hover { color: var(--text); background: var(--bg-hover, rgba(255,255,255,.04)); }
.an-range-btn.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.an-range-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.an-note { font-size: .8rem; color: var(--text-dim); margin: -.3rem 0 .9rem; min-height: 1.1em; }

.an-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 1100px) { .an-grid { grid-template-columns: 1fr 1fr; } }

.an-chart-card { padding: 1.05rem 1.1rem; }
.an-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.an-chart-head h2 { margin: 0; font-size: 1.02rem; }
.an-legend { display: flex; gap: .9rem; flex-wrap: wrap; }
.an-legend-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--text-dim); }
.an-legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.an-chart { position: relative; height: 250px; } /* высоту держит контейнер — maintainAspectRatio:false */
.an-chart canvas { max-width: 100%; }

.an-chart-sub { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .an-chart-sub { grid-template-columns: 1fr 1fr; } }
.an-chart-sub-l { font-size: .78rem; color: var(--text-dim); margin-bottom: .3rem; }

@media (max-width: 560px) {
    .an-range { width: 100%; justify-content: space-between; }
    .an-range-btn { flex: 1; padding: .38rem .5rem; }
}