/* Раздел «Самопринятие» и переключатель разделов.
 * Использует только переменные и приёмы из app.css: цвета, шрифты,
 * радиусы, тени и микроанимации остаются общими для всего сайта. */

[hidden]{display:none!important}
.sa-center{text-align:center}
@keyframes sa-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sa-in{animation:sa-in .35s ease both}
.modal h3{font-family:var(--font-round);letter-spacing:-.02em}

/* ---------- строка инструментов над каталогом «Самопринятие» ---------- */
.sa-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Отступ только у карточки безопасности, вложенной внутрь .section (перед
   заголовком раздела «Самопринятие») — верхняя, отдельно стоящая
   safety-card под hero получает свой отступ от следующего .section (76px). */
.section .safety-card{margin-bottom:24px}

/* ---------- каталог ---------- */
.practice-card.is-done{border-color:color-mix(in srgb,var(--good) 32%,var(--line))}
.sa-done{color:var(--good);margin-left:4px;font-size:12px}

/* ---------- общие элементы практик ---------- */
.sa-row{display:flex;gap:8px;margin:10px 0}
.sa-row input{flex:1;min-width:0;margin-top:0}
.sa-range{display:block;margin:14px 0}
.sa-range>span{display:flex;justify-content:space-between;gap:12px;font-weight:700;line-height:1.4}
.sa-range b{color:var(--accent);font-variant-numeric:tabular-nums}
.sa-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:14px 0}
.sa-tags li,.sa-chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:12px;font-weight:700;transition:.25s}
.sa-tags li{opacity:.45}
.sa-tags li.on{opacity:1;color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.sa-chip:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.sa-stage{position:relative;height:260px;margin:14px 0;border-radius:20px;border:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,#23242d,#181920)}
.sa-meter{margin:14px 0}.sa-meter>span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
.sa-verdict{margin:14px 0;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 8%,var(--bg))}
.sa-verdict b{display:block;font-family:var(--font-round);font-size:17px;margin-bottom:6px}.sa-verdict p{margin:4px 0}
.phase.is-good{color:var(--good)}

/* ползунки внутри практик — как громкость в микшере, но крупнее */
#selfModal input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:22px;padding:0;margin:8px 0 0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}
#selfModal input[type="range"]:focus{outline:none}
#selfModal input[type="range"]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:3px;border-radius:99px}
#selfModal input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line)}
#selfModal input[type="range"]::-moz-range-track{height:6px;border-radius:99px;background:var(--line)}
#selfModal input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.4)}
#selfModal input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.4)}
#selfModal input[type="range"]:disabled{opacity:.4;cursor:default}
#selfModal button:disabled{opacity:.45;cursor:default;transform:none!important;box-shadow:none!important}

/* перетаскиваемые карточки */
.sa-cards,.sa-pool{display:flex;flex-wrap:wrap;gap:6px}
.sa-pool{padding:14px;margin:12px 0;min-height:64px;border-radius:18px;border:1px dashed var(--line);transition:.2s}
.sa-card,.sa-ghost{padding:7px 11px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);font-size:12px;font-weight:700;color:var(--text)}
.sa-card{cursor:grab;user-select:none;touch-action:none;transition:.2s}
.sa-card:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sa-card.ext{color:var(--muted)}
.sa-card.is-dragging{opacity:.3}
.sa-ghost{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:.96;border-color:var(--accent);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.is-over{border-color:var(--accent)!important;background:var(--accent-soft)!important}

/* ---------- 1. Луч прожектора ---------- */
.sa-spot{touch-action:none;cursor:crosshair}
.sa-person{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent2)}
.sa-me{width:46px;height:46px;margin:-23px 0 0 -23px;border:0;background:radial-gradient(circle at 35% 30%,#fff,#cdd0ea 55%,#8e89bc);box-shadow:0 0 0 10px rgba(185,182,216,.08)}
.sa-mark{position:absolute;right:5px;top:8px;width:8px;height:8px;border-radius:50%;background:#e2a57a;box-shadow:0 0 12px #e2a57a;transform:scale(var(--mark,2.4));transition:transform .3s}
.sa-bubble{position:absolute;left:50%;bottom:130%;transform:translate(-50%,4px);white-space:nowrap;padding:4px 8px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);color:var(--muted);font-size:11px;opacity:0;transition:.45s}
.sa-spot.wide .sa-bubble{opacity:1;transform:translate(-50%,0)}
.sa-dim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),transparent var(--r),rgba(10,10,14,.95) calc(var(--r) + 16%))}

/* ---------- 6. Медиа-мифы ---------- */
.sa-media{height:auto;display:grid;place-items:center;padding:14px;background:radial-gradient(circle at 50% 40%,#2c2b38,#181920)}
.sa-avatar{width:min(230px,70%);height:auto}

/* .sa-sky-hint используется галереей благодарности (11) — оставляем её ниже. */
.sa-sky-hint{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px;pointer-events:none;text-align:center;padding:0 20px}

/* ---------- 16. Космос ---------- */
.sa-cosmos{height:290px;display:grid;place-items:center}
.sa-stars{position:absolute;inset:0;opacity:0}
.sa-stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;animation:sa-twinkle 3s ease-in-out var(--d) infinite}
@keyframes sa-twinkle{50%{opacity:.25}}
.sa-cosmos-dot{position:relative;z-index:1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0c9a4,#d98f63 60%,#a8603f);box-shadow:0 0 34px rgba(226,165,122,.4)}
.sa-cosmos-dot span{padding:8px;text-align:center;font-size:13px;font-weight:800;line-height:1.2;color:#2a1c15;overflow:hidden}
.sa-cosmos-level{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;text-align:center;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6))}
.sa-cosmos-level b{display:block;font-family:var(--font-round)}.sa-cosmos-level span{display:block;font-size:12px;color:var(--muted)}

/* ---------- схема тела (5, 17) ---------- */
.sa-bodygrid{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:20px;align-items:center}
.sa-figure{width:100%;height:auto;max-height:380px}
.sa-part{fill:var(--accent-soft);stroke:var(--line);stroke-width:1.5;cursor:pointer;outline:none;transition:fill .3s,filter .3s}
.sa-part:hover{fill:color-mix(in srgb,var(--accent) 32%,var(--accent-soft))}
.sa-part:focus-visible{stroke:var(--accent);stroke-width:3}
.sa-part.lit{fill:rgba(226,190,150,.55);filter:drop-shadow(0 0 8px rgba(226,190,150,.7))}
.sa-part.lvl-1{fill:rgba(185,182,216,.5)}.sa-part.lvl-2{fill:rgba(214,170,140,.6)}.sa-part.lvl-3{fill:rgba(224,132,120,.72)}
.sa-part.breathing{transform-box:fill-box;transform-origin:center;animation:sa-breathe 5s ease-in-out infinite}
@keyframes sa-breathe{50%{transform:scale(1.14);filter:drop-shadow(0 0 10px rgba(185,182,216,.85))}}
.sa-funcard{padding:18px;border-radius:18px;background:var(--bg);border:1px solid var(--line);transition:.5s}
.sa-funcard.glow{box-shadow:0 0 0 1px rgba(226,190,150,.3),0 0 40px rgba(226,190,150,.1)}
.sa-funcard h3{margin:8px 0;font-size:22px}.sa-funcard p{margin:0;font-size:15px;line-height:1.65}
.sa-maplist{list-style:none;padding:0;margin:10px 0 14px;font-size:13px}
.sa-maplist li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.sa-maplist b{color:var(--accent)}

/* ---------- 11. Галерея тепла ---------- */
.sa-gallery{height:210px;background:radial-gradient(circle at 50% 100%,#3a3340,#1c1d26 70%)}
.sa-dot{position:absolute;width:12px;height:12px;margin:-6px;padding:0;border-radius:50%;background:#f0d3b0;box-shadow:0 0 14px 4px rgba(240,211,176,.5);animation:sa-glow 3.2s ease-in-out infinite;transition:left 1.6s cubic-bezier(.2,.8,.2,1),top 1.6s cubic-bezier(.2,.8,.2,1),opacity 1.6s}
.sa-dot::after{content:"";position:absolute;inset:-10px}
@keyframes sa-glow{50%{box-shadow:0 0 20px 7px rgba(240,211,176,.32)}}
.sa-note{font-size:15px;min-height:64px}

/* ---------- 20. Зеркало ---------- */
/* Текст шага теперь всегда своей полосой ПОД картинкой камеры, а не поверх неё —
   раньше подпись перекрывала само изображение. */
.sa-mirror{margin:14px 0;display:flex;flex-direction:column;overflow:hidden;border-radius:24px;border:1px solid var(--line)}
.sa-mirror-visual{position:relative;height:250px;display:grid;place-items:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#34324a,#1b1c25)}
.sa-mirror-visual::before{content:"";position:absolute;width:140px;height:190px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 50% 30%,rgba(185,182,216,.28),transparent 70%);filter:blur(6px);animation:orb 8s ease-in-out infinite}
.sa-mirror-visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:0;transition:opacity .6s;filter:url(#saWatercolor) saturate(1.4) contrast(.92) brightness(1.05)}
.sa-mirror.has-video .sa-mirror-visual video{opacity:.9}.sa-mirror.has-video .sa-mirror-visual::before{display:none}
.sa-mirror-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(20,20,28,.72));box-shadow:inset 0 0 0 10px rgba(185,182,216,.08)}
.sa-mirror-text{position:relative;z-index:2;padding:16px 20px;text-align:center;background:var(--bg);border-top:1px solid var(--line)}
.sa-mirror-text h3{margin:6px 0;font-size:22px}.sa-mirror-text p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- 3. Весы ---------- */
.sa-scale{position:relative;margin:18px 0 8px;padding-bottom:64px}
.sa-beam{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 6px;border-top:3px solid var(--accent);transform-origin:50% 0;transform:rotate(var(--tilt,0deg));transition:transform .9s cubic-bezier(.3,1.4,.4,1)}
.sa-pan{flex:1;min-height:118px;margin-top:14px;padding:10px;border-radius:16px;border:1px dashed var(--line);background:var(--bg);transform:rotate(calc(var(--tilt,0deg) * -1));transition:transform .9s cubic-bezier(.3,1.4,.4,1),border-color .2s,background .2s}
.sa-pan>b,.sa-shelf>b{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sa-fulcrum{position:absolute;left:50%;top:0;width:0;height:0;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-bottom:46px solid var(--accent2);opacity:.45;z-index:-1}

/* ---------- 14. Сильные стороны ---------- */
.sa-board{display:grid;gap:8px}
.sa-shelf{min-height:72px;padding:10px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);border-bottom:4px solid var(--accent2);transition:.2s}
.sa-shelf .sa-card{background:linear-gradient(135deg,var(--accent-soft),var(--accent-warm))}

/* ---------- 9. Герб ---------- */
.sa-crest{display:grid;place-items:center;margin:16px 0;transition:filter .6s}
.sa-crest.complete{filter:drop-shadow(0 0 16px rgba(226,190,150,.5))}
.sa-shield{width:min(360px,100%);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 6px 30px;background:var(--line);clip-path:polygon(0 0,100% 0,100% 74%,50% 100%,0 74%)}
.sa-tile{min-height:74px;display:grid;place-items:center;padding:6px;border:0;border-radius:8px;text-align:center;word-break:break-word;font-size:10.5px;font-weight:700;line-height:1.2;color:#eceef2;background:hsl(var(--h) 24% 30%);animation:sa-in .4s both}
.sa-tile:hover{filter:brightness(1.15)}
.sa-tile.empty{background:transparent;border:1px dashed var(--line);color:var(--muted);font-size:18px;animation:none}

/* ---------- 4, 7. Суд и дерево вопросов ---------- */
.sa-step{padding:18px;margin-bottom:12px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.sa-step h3{margin:8px 0 12px;font-size:20px}
.sa-tree{margin:0 0 14px 8px;padding-left:16px;border-left:2px solid var(--line)}
.sa-node{position:relative;margin-bottom:12px}
.sa-node::before{content:"";position:absolute;left:-23px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.sa-node small{display:block;color:var(--muted);font-size:12px}.sa-node b{font-size:15px}
.sa-node.current{padding:16px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.sa-node.current::before{display:none}
.sa-node h3{margin:8px 0 12px;font-size:19px}

/* ---------- 2. Полярность ---------- */
.sa-poltext{margin:14px 0;padding:16px;border-radius:16px;background:var(--bg);border:1px solid var(--line);font-size:17px;line-height:1.8}
.sa-poltext mark{padding:2px 6px;border-radius:6px}
.sa-dark{background:#000;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.sa-light{background:#f5f4f1;color:#16171d}
.sa-abs{color:#fff;text-shadow:0 0 3px #000;background:repeating-linear-gradient(45deg,#111 0 4px,#8a8a8a 4px 8px)}
.sa-softlist{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 10px;font-size:13px}
.sa-softlist li{padding:5px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.sa-softlist s{color:var(--muted)}
/* «Крайних слов не нашлось…» — целая фраза, а не короткий чип: своя строка,
   обычные скругления и перенос строк, а не тесная пилюля. */
.sa-softlist li.sa-soft-empty{flex:1 1 100%;border-radius:14px;padding:12px 14px;line-height:1.5;white-space:normal}
#selfModal .sa-graybar input[type="range"]::-webkit-slider-runnable-track{height:12px;background:linear-gradient(90deg,#000,#777 50%,#f5f4f1)}
#selfModal .sa-graybar input[type="range"]::-moz-range-track{height:12px;background:linear-gradient(90deg,#000,#777 50%,#f5f4f1)}
#selfModal .sa-graybar input[type="range"]::-webkit-slider-thumb{margin-top:-4px;background:var(--surface2);border:3px solid var(--accent)}
#selfModal .sa-graybar input[type="range"]::-moz-range-thumb{background:var(--surface2);border:3px solid var(--accent)}
/* Подпись зоны («Серая зона…») почти касалась текстового поля снизу — даём воздух. */
#polZone{margin:12px 0 18px}

/* ---------- 18. Игра ---------- */
.sa-hud{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.sa-hud b{color:var(--text);font-variant-numeric:tabular-nums}
.sa-arena{height:310px;background:radial-gradient(circle at 50% 100%,#2b2e3a,#17181f)}
.sa-thought{position:absolute;top:-46px;max-width:54%;padding:9px 13px;border-radius:14px;text-align:left;cursor:pointer;font-size:13px;font-weight:700;color:#e9c9c4;background:#2a2230;border:1px solid rgba(224,132,120,.35);animation:sa-fall linear forwards}
@keyframes sa-fall{to{top:calc(100% + 10px)}}
.sa-thought.is-good{animation:sa-rise 2.6s ease-out forwards;animation-duration:2.6s!important;pointer-events:none;color:#cfe8d9;background:#26322d;border-color:rgba(109,152,127,.6)}
@keyframes sa-rise{0%{transform:translateY(0) scale(1);opacity:1}25%{transform:translateY(0) scale(1.04);opacity:1}100%{transform:translateY(-60px) scale(1.04);opacity:0}}

/* ---------- 8. Шредер ---------- */
.sa-shredder{height:270px}
.sa-voice{position:absolute;z-index:2;padding:8px 12px;border-radius:12px;white-space:nowrap;font-size:13px;font-weight:700;color:#e6cdc9;background:#2d2733;border:1px solid rgba(224,132,120,.35)}
.sa-shred-bar{position:absolute;left:14%;right:14%;bottom:18px;height:34px;z-index:5;border-radius:12px;border:1px solid var(--line);background:linear-gradient(180deg,#3b3d48,#23242c);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.sa-shred-bar i{position:absolute;left:8%;right:8%;top:11px;height:6px;border-radius:99px;background:#0c0c10}
.sa-strips{position:absolute;z-index:3}
.sa-strips i{position:absolute;top:0;height:100%;overflow:hidden;background:#2d2733;animation:sa-strip .9s ease-in var(--dl) forwards}
.sa-strips span{position:absolute;top:0;padding:8px 12px;white-space:nowrap;font-size:13px;font-weight:700;color:#e6cdc9}
@keyframes sa-strip{to{transform:translateY(70px) rotate(var(--r));opacity:0}}
.sa-sheets{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.sa-sheet{width:18px;height:24px;border-radius:3px;background:#f3f1ec;box-shadow:0 2px 6px rgba(0,0,0,.35);animation:sa-in .5s both}

/* ---------- 10. Челлендж ---------- */
.sa-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}
.sa-badge{padding:10px 6px;border-radius:14px;text-align:center;background:var(--bg);border:1px solid var(--line);opacity:.5;transition:.4s}
.sa-badge span{display:block;font-size:22px;color:var(--accent)}.sa-badge b{display:block;font-size:12px}.sa-badge small{font-size:10px;color:var(--muted)}
.sa-badge.on{opacity:1;border-color:color-mix(in srgb,var(--accent) 50%,var(--line));box-shadow:0 8px 24px rgba(185,182,216,.12)}
.sa-explist,.sa-predlist{list-style:none;display:grid;gap:8px;padding:0;margin:0 0 14px}
.sa-exp{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.sa-exp small,.sa-pred small{display:block;font-size:11px;color:var(--muted)}
.sa-exp.done{border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.sa-exp button:disabled{opacity:.5;cursor:default}
.sa-check{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;border:2px solid var(--line);font-size:13px;color:#16171d}
.sa-exp.done .sa-check{background:var(--good);border-color:var(--good)}

/* ---------- 13. Трекер прогнозов ---------- */
.sa-pred{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.sa-pred.done{border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.sa-pred-actions{display:flex;gap:6px}.sa-predform{grid-column:1/-1}
.sa-chart{width:100%;height:auto;margin-top:8px}
.sa-chart line{stroke:var(--line)}.sa-chart .pb{fill:var(--accent)}.sa-chart .pa{fill:#e2a57a}.sa-chart text{fill:var(--muted);font-size:10px}
.sa-legend{display:flex;justify-content:center;gap:14px;margin:6px 0 12px;font-size:12px;color:var(--muted)}
.sa-legend i{display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px}
.sa-legend .pb{background:var(--accent)}.sa-legend .pa{background:#e2a57a}

/* ---------- 15. Письмо ---------- */
.sa-paper{margin:14px 0;padding:22px 24px;border-radius:6px;transform:rotate(-.4deg);font-family:ui-monospace,"Courier New",Courier,monospace;font-size:14px;line-height:1.75;color:#e9e4d8;background:#26252c repeating-linear-gradient(transparent 0 24px,rgba(255,255,255,.035) 24px 25px);border:1px solid rgba(255,255,255,.08);box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 0 40px rgba(0,0,0,.25)}
.sa-paper p{margin:0 0 12px;font-size:14px;color:#e9e4d8}
.sa-paper.typing p:last-child::after{content:"▌";margin-left:2px;animation:sa-blink 1s steps(1) infinite}
@keyframes sa-blink{50%{opacity:0}}

/* ---------- 19. Шкала доброты ---------- */
.sa-scaleitem>span{font-weight:600}

@media(max-width:620px){
  .sa-bodygrid{grid-template-columns:1fr}.sa-figwrap{max-width:180px;margin:auto}
  .sa-badges{grid-template-columns:repeat(2,1fr)}
  .sa-exp{grid-template-columns:auto 1fr}.sa-exp button{grid-column:2}
  .sa-pred{grid-template-columns:1fr}
  .sa-paper{padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){
  .sa-in,.sa-dot,.sa-stars i,.sa-mirror-visual::before{animation:none}
  .sa-beam,.sa-pan{transition:none}
}