/* Разделы о городе: хроника, паспорт туриста, шкала воздуха, журнал изменений. Опирается на pages-plus-v1.css */
.cp { margin: clamp(22px, 3.4vw, 40px) 0; }
.cp-hero { position: relative; padding: clamp(22px, 4vw, 44px); border-radius: 30px; overflow: hidden; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--pp-a) 35%, var(--line)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pp-a) 22%, var(--surface)), transparent 60%), radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, var(--pp-b) 22%, var(--surface)), transparent 60%), var(--surface); box-shadow: var(--shadow); }
.cp-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 70% 30%, #000 20%, transparent 75%); pointer-events: none; }
.cp-hero > * { position: relative; }
.cp-hero h1 { margin: 10px 0 12px; font: 900 clamp(32px, 6vw, 62px)/1.04 var(--font-display); letter-spacing: -.035em; }
.cp-hero h1 em { font-style: normal; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-hero p { margin: 0; max-width: 760px; color: var(--muted); font: 500 clamp(15px, 1.6vw, 17.5px)/1.65 var(--font-display); }
.cp-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cp-hero__tags span { padding: 8px 14px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line); font: 700 13px/1 var(--font-display); backdrop-filter: blur(6px); }
.cp-orbit { position: absolute !important; right: clamp(10px, 4vw, 48px); top: clamp(14px, 3vw, 34px); width: clamp(90px, 16vw, 190px); aspect-ratio: 1; opacity: .9; pointer-events: none; }
.cp-orbit i { position: absolute; inset: 0; border: 2px dashed color-mix(in srgb, var(--pp-a) 55%, transparent); border-radius: 50%; animation: cpSpin 26s linear infinite; }
.cp-orbit i:nth-child(2) { inset: 16%; border-color: color-mix(in srgb, var(--pp-b) 55%, transparent); animation-duration: 17s; animation-direction: reverse; }
.cp-orbit i:nth-child(3) { inset: 34%; border-style: solid; border-color: color-mix(in srgb, var(--pp-a) 40%, transparent); animation-duration: 11s; }
.cp-orbit b { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(26px, 4.4vw, 54px); }
@keyframes cpSpin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .cp-orbit { display: none; } }

.cp-sec { margin-top: clamp(26px, 4vw, 44px); }
.cp-sec > .pp-head { margin-bottom: 14px; }

/* машина времени */
.cp-tm { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--gap, 20px); margin-top: var(--gap, 20px); align-items: stretch; }
@media (max-width: 900px) { .cp-tm { grid-template-columns: 1fr; } }
.cp-tm__ctl { display: grid; gap: 14px; align-content: start; }
.cp-tm__year { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cp-tm__year b { font: 900 clamp(46px, 8vw, 78px)/1 var(--font-mono, monospace); letter-spacing: -.04em; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cp-tm__year span { font: 800 16px/1.3 var(--font-display); color: var(--muted); }
.cp-tm input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); outline: none; cursor: grab; touch-action: pan-y; }
.cp-tm input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 5px solid var(--pp-b); box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .5); transition: transform .2s var(--spring, ease); }
.cp-tm input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.cp-tm input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 5px solid var(--pp-b); }
.cp-tm__ticks { display: flex; justify-content: space-between; font: 600 11px/1 var(--font-mono, monospace); color: var(--muted); }
.cp-tm__now { padding: 16px 18px; border-radius: 20px; background: var(--sunk); border-left: 5px solid var(--pp-a); display: grid; gap: 6px; min-height: 110px; animation: ppPop .4s var(--spring, ease) both; }
.cp-tm__now b { font: 800 16px/1.3 var(--font-display); }
.cp-tm__now span { font: 500 14.5px/1.6 var(--font-display); color: var(--muted); }

/* график населения */
.cp-pop svg { display: block; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; overflow: visible; }
.cp-pop .grid { stroke: var(--line); stroke-dasharray: 3 5; }
.cp-pop text { fill: var(--muted); font: 600 11px var(--font-mono, monospace); }
.cp-pop .line { fill: none; stroke: var(--pp-a); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pp-reveal.is-in .cp-pop .line, .cp-pop.is-in .line { animation: cpDraw 2.2s .2s ease forwards; }
.cp-pop .area { fill: url(#cpPopA); opacity: 0; }
.pp-reveal.is-in .cp-pop .area, .cp-pop.is-in .area { animation: ppPop 1s 1.2s ease forwards; }
.cp-pop__pt circle:not(.hit) { fill: var(--surface); stroke: var(--pp-b); stroke-width: 3.5; transition: r .2s var(--spring, ease), fill .2s; }
.cp-pop__pt .hit { fill: transparent; cursor: pointer; }
.cp-pop__pt:hover circle:not(.hit), .cp-pop__pt.is-pick circle:not(.hit) { r: 9; fill: var(--pp-a); }
.cp-pop__pt.is-now circle:not(.hit) { fill: var(--pp-b); r: 8; }
.cp-pop__pt:focus-visible { outline: none; } .cp-pop__pt:focus-visible circle:not(.hit) { stroke: var(--ink); }
@keyframes cpDraw { to { stroke-dashoffset: 0; } }
.cp-read { margin: 8px 2px 0; min-height: 1.5em; color: var(--muted); font: 600 14px/1.5 var(--font-display); }

/* фильтры */
.cp-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin: 22px 0 8px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 320px; }
.cp .cp-chip { appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 9px 14px; border-radius: 99px; font: 700 13.5px/1 var(--font-display); min-height: 40px; transition: transform .2s var(--spring, ease), background .2s, border-color .2s; }
.cp .cp-chip:hover { transform: translateY(-2px); border-color: var(--pp-a); }
.cp .cp-chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); color: #fff; border-color: transparent; }
.cp-find { position: relative; flex: 1 1 220px; max-width: 340px; }
.cp-find input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 600 15px/1 var(--font-display); }
.cp-find input:focus { outline: 0; border-color: var(--pp-a); }
.cp-find::before { content: "⌕"; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 19px; color: var(--muted); }
.cp-count { color: var(--muted); font: 700 13px/1 var(--font-display); margin: 4px 2px 12px; }

/* хроника */
.cp-tl { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 14px; }
.cp-tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--pp-a), var(--pp-b)); opacity: .55; }
.cp-dec { list-style: none; margin: 14px 0 0 -26px; font: 900 clamp(22px, 3vw, 30px)/1 var(--font-mono, monospace); color: var(--pp-b); letter-spacing: -.03em; padding-left: 26px; position: relative; }
.cp-dec::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--pp-b); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pp-b) 25%, transparent); }
.cp-ev { position: relative; opacity: 1; }
.pp-js .cp-ev:not(.is-in) { opacity: 0; transform: translateX(-18px); }
.cp-ev { transition: opacity .6s var(--ease, ease), transform .6s var(--spring, ease); }
.cp-ev::before { content: ""; position: absolute; left: -26px; top: 22px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 3px solid var(--pp-a); transition: transform .3s var(--spring, ease), background .3s; z-index: 1; }
.cp-ev.is-near::before, .cp-ev:hover::before { transform: scale(1.5); background: var(--pp-a); }
.cp .cp-ev__head { appearance: none; width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px; align-items: start; padding: 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); transition: transform .25s var(--spring, ease), border-color .2s, box-shadow .3s; }
.cp .cp-ev__head:hover { transform: translateX(4px); border-color: var(--pp-a); }
.cp-ev.is-near .cp-ev__head { border-color: var(--pp-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-b) 22%, transparent), var(--shadow); }
.cp-ev__ico { font-size: 28px; line-height: 1; }
.cp-ev__label { grid-column: 2; font: 800 12.5px/1 var(--font-mono, monospace); color: var(--pp-b); letter-spacing: .04em; text-transform: uppercase; }
.cp-ev__title { grid-column: 2; font: 800 clamp(17px, 2vw, 20px)/1.3 var(--font-display); }
.cp-ev__text { grid-column: 2 / -1; font: 500 15px/1.65 var(--font-display); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-ev.is-open .cp-ev__text { -webkit-line-clamp: unset; display: block; }
.cp-ev__plus { grid-column: 3; grid-row: 1; font-size: 22px; color: var(--muted); transition: transform .3s var(--spring, ease); }
.cp-ev.is-open .cp-ev__plus { transform: rotate(45deg); color: var(--pp-b); }
.cp-ev__cat { grid-column: 2 / -1; font: 700 12px/1 var(--font-display); color: var(--muted); }
.cp-none { padding: 22px; text-align: center; color: var(--muted); font: 600 15px/1.5 var(--font-display); }

/* игры раздела */
.cp-ordlist { display: grid; gap: 10px; margin: 12px 0; position: relative; z-index: 1; }
.cp .cp-ord { appearance: none; cursor: pointer; text-align: left; display: flex; gap: 12px; align-items: center; padding: 14px 16px; min-height: 52px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 700 14.5px/1.35 var(--font-display); transition: transform .2s var(--spring, ease), border-color .2s, background .2s; }
.cp .cp-ord:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--pp-a); }
.cp .cp-ord span { min-width: 92px; font: 800 12.5px/1.2 var(--font-mono, monospace); color: var(--pp-b); }
.cp .cp-ord:disabled { cursor: default; }
.cp .cp-ord.is-ok { border-color: #10b981; background: color-mix(in srgb, #10b981 14%, var(--surface)); }
.cp .cp-ord.is-bad { animation: ppShake .4s; border-color: #ef4444; }
.cp-msg { margin: 6px 0 12px; min-height: 1.4em; font: 700 14.5px/1.4 var(--font-display); position: relative; z-index: 1; }

.cp-flips { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.cp .cp-flip { display: block; width: 100%; appearance: none; cursor: pointer; text-align: left; perspective: 900px; border: 0; background: none; padding: 0; color: var(--ink); min-height: 230px; }
.cp-flip__in { display: block; position: relative; width: 100%; height: 100%; min-height: 230px; transition: transform .7s var(--spring, ease); transform-style: preserve-3d; }
.cp-flip.is-flipped .cp-flip__in { transform: rotateY(180deg); }
.cp-flip__f { position: absolute; inset: 0; padding: 18px; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; gap: 8px; align-content: start; overflow: hidden; }
.cp-flip__f--a { background: linear-gradient(160deg, color-mix(in srgb, #8b6b3d 18%, var(--surface)), var(--surface)); }
.cp-flip__f--b { background: linear-gradient(160deg, color-mix(in srgb, var(--pp-a) 16%, var(--surface)), var(--surface)); transform: rotateY(180deg); }
.cp-flip__f small { font: 800 11.5px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-b); }
.cp-flip__f b { font: 800 20px/1.2 var(--font-display); }
.cp-flip__f p { margin: 0; font: 500 14.5px/1.6 var(--font-display); color: var(--muted); }
.cp-flip__f a { align-self: end; font: 800 13.5px/1 var(--font-display); color: var(--signal); }
.cp-flip__hint { position: absolute; right: 16px; bottom: 14px; font: 700 12px/1 var(--font-display); color: var(--muted); }

/* истории */
.cp-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap, 20px); }
.cp .cp-story { appearance: none; text-align: left; cursor: pointer; padding: 0; grid-template-rows: 200px 1fr; align-content: start; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); display: grid; transition: transform .3s var(--spring, ease), border-color .2s; }
.cp .cp-story:hover { transform: translateY(-5px) rotate(-.4deg); border-color: var(--pp-a); }
.cp-story__ph { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 200px; gap: 3px; height: 200px; overflow: hidden; background: var(--sunk); }
.cp-story__ph img { min-height: 0; }
.cp-story__ph:has(img:only-child) { grid-template-columns: 1fr; }
.cp-story__ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: sepia(.25) contrast(1.05); transition: filter .4s, transform .6s; }
.cp-story:hover .cp-story__ph img { filter: none; transform: scale(1.04); }
.cp-story__b { padding: 18px 20px 20px; display: grid; gap: 8px; }
.cp-story__b small { font: 800 11.5px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--pp-b); }
.cp-story__b b { font: 800 20px/1.25 var(--font-display); }
.cp-story__b span { font: 500 14.5px/1.55 var(--font-display); color: var(--muted); }
.cp-story__b i { font: 800 13px/1 var(--font-display); font-style: normal; color: var(--signal); }
.cp-dialog { border: 0; border-radius: 28px; padding: clamp(18px, 3vw, 32px); width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift); }
.cp-dialog::backdrop { background: rgba(6, 10, 22, .62); backdrop-filter: blur(5px); }
.cp-dialog h2 { margin: 6px 0 12px; font: 900 clamp(22px, 3.4vw, 32px)/1.15 var(--font-display); letter-spacing: -.02em; }
.cp-dialog h3 { margin: 18px 0 6px; font: 800 16px/1.3 var(--font-display); }
.cp-dialog__x { position: sticky; top: 0; float: right; z-index: 2; border: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--sunk); color: var(--ink); font-size: 24px; cursor: pointer; }
.pp-eyebrow-s { font: 800 12px/1 var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cp-gal { position: relative; margin: 0 0 14px; border-radius: 20px; overflow: hidden; background: #000; }
.cp-gal img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #0b0f1a; }
.cp-gal figcaption { padding: 10px 14px; font: 600 13px/1.4 var(--font-display); color: #cfd8e8; background: #0b0f1a; }
.cp-gal__b { position: absolute; top: 40%; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); font-size: 28px; cursor: pointer; }
.cp-gal__b--l { left: 10px; } .cp-gal__b--r { right: 10px; }
.cp-lead { font: 600 16px/1.6 var(--font-display); }
.cp-ul { margin: 6px 0; padding-left: 20px; display: grid; gap: 8px; color: var(--muted); font: 500 14.5px/1.6 var(--font-display); }
.cp-ul--ok li::marker { content: "✓  "; color: #10b981; font-weight: 900; }
.cp-note { margin: 0 0 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #f59e0b 14%, var(--sunk)); font: 600 13px/1.5 var(--font-display); color: var(--ink); }

/* люди */
.cp-people { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 280px); gap: 14px; overflow-x: auto; padding: 6px 4px 16px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.cp-person { scroll-snap-align: start; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; transition: transform .3s var(--spring, ease), border-color .2s; }
.cp-person:hover { transform: translateY(-4px); border-color: var(--pp-a); }
.cp-person__ico { width: 54px; height: 54px; display: grid; place-items: center; font-size: 28px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 25%, var(--sunk)), color-mix(in srgb, var(--pp-b) 25%, var(--sunk))); }
.cp-person b { font: 800 17px/1.25 var(--font-display); }
.cp-person small { font: 700 12.5px/1.4 var(--font-display); color: var(--pp-b); }
.cp-person p { margin: 0; font: 500 14px/1.55 var(--font-display); color: var(--muted); }
.cp-person a { font: 800 13px/1 var(--font-display); color: var(--signal); }

/* факт дня и климат */
.cp-fact { display: grid; gap: 12px; padding: clamp(18px, 3vw, 28px); border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 18%, var(--surface)), color-mix(in srgb, var(--pp-b) 14%, var(--surface))); border: 1px solid color-mix(in srgb, var(--pp-a) 30%, var(--line)); box-shadow: var(--shadow); }
.cp-fact__text { margin: 0; font: 800 clamp(19px, 2.8vw, 27px)/1.4 var(--font-display); letter-spacing: -.01em; animation: ppPop .5s var(--spring, ease) both; }
.cp-fact__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.cp-fact__src { color: var(--muted); font: 600 13px/1.4 var(--font-display); }
.cp-climate { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cp .cp-cl { appearance: none; cursor: pointer; text-align: left; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; gap: 4px; transition: transform .25s var(--spring, ease); }
.cp .cp-cl:hover { transform: translateY(-3px); }
.cp-cl b { font: 900 30px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.cp-cl--cold b { color: #38bdf8; } .cp-cl--hot b { color: #f97316; }
.cp-cl span { font: 600 13px/1.35 var(--font-display); color: var(--muted); }
.cp-climate-out { margin: 10px 2px 0; min-height: 1.5em; font: 600 14.5px/1.5 var(--font-display); color: var(--muted); }

/* паспорт туриста */
.cp-passport { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
@media (max-width: 640px) { .cp-passport { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.cp-passport h3 { margin: 0 0 6px; font: 900 24px/1.2 var(--font-display); }
.cp-sights { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.cp-sight { position: relative; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; transition: transform .3s var(--spring, ease), border-color .2s; }
.cp-sight:hover { transform: translateY(-4px); border-color: var(--pp-a); }
.cp-sight.is-visited { border-color: #10b981; background: linear-gradient(160deg, color-mix(in srgb, #10b981 10%, var(--surface)), var(--surface)); }
.cp-sight.is-visited::after { content: "✓"; position: absolute; right: 14px; top: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #10b981; color: #fff; font-weight: 900; animation: ppPop .4s var(--spring, ease) both; }
.cp-sight__ico { font-size: 32px; }
.cp-sight h3 { margin: 0; font: 800 18px/1.25 var(--font-display); }
.cp-sight__meta { font: 700 12.5px/1.4 var(--font-display); color: var(--pp-b); }
.cp-sight p { margin: 0; font: 500 14.5px/1.6 var(--font-display); color: var(--muted); }
.cp-sight__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cp .cp-sight .pp-btn { padding: 10px 14px; min-height: 42px; font-size: 13.5px; }
.cp-sight__acts a { align-self: center; font: 800 13px/1.2 var(--font-display); color: var(--signal); }
.cp-route { display: grid; gap: 14px; }
.cp-route fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cp-route legend { font: 800 13px/1 var(--font-display); color: var(--muted); margin-bottom: 8px; padding: 0; }
.cp-radio { position: relative; }
.cp-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cp-radio span { display: inline-block; padding: 10px 16px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface); font: 800 14px/1 var(--font-display); transition: all .2s; }
.cp-radio input:checked + span { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); color: #fff; border-color: transparent; }
.cp-radio input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--pp-a) 60%, #fff); outline-offset: 2px; }
.cp-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.cp-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--sunk); animation: ppPop .4s var(--spring, ease) both; }
.cp-steps li:nth-child(2) { animation-delay: .06s; } .cp-steps li:nth-child(3) { animation-delay: .12s; } .cp-steps li:nth-child(4) { animation-delay: .18s; } .cp-steps li:nth-child(5) { animation-delay: .24s; }
.cp-step__n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); color: #fff; font: 900 15px/1 var(--font-display); }
.cp-steps b { display: block; font: 800 15.5px/1.3 var(--font-display); }
.cp-steps small { display: block; margin-top: 3px; font: 600 12.5px/1.45 var(--font-display); color: var(--muted); }
.cp-route-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.cp-help article { padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.cp-help h3 { margin: 0; font: 800 17px/1.3 var(--font-display); }
.cp-help p { margin: 0; font: 500 14.5px/1.6 var(--font-display); color: var(--muted); }
.cp-help ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cp-help li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--sunk); font: 700 14px/1.3 var(--font-display); }
.cp-help li small { font: 600 12.5px/1.4 var(--font-display); color: var(--muted); }
.cp-help a { color: inherit; text-decoration: none; } .cp-help a:hover b { text-decoration: underline; }
.cp-help .tel { color: var(--signal); font-weight: 800; }

/* шкала воздуха */
.cp-aqi { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 640px) { .cp-aqi { grid-template-columns: 1fr; } }
.cp .cp-aqi button { appearance: none; cursor: pointer; padding: 14px 10px; border-radius: 18px; border: 2px solid transparent; color: #08121f; font: 800 13.5px/1.3 var(--font-display); text-align: center; display: grid; gap: 4px; transition: transform .25s var(--spring, ease), box-shadow .25s; position: relative; }
.cp .cp-aqi button small { font: 700 12px/1 var(--font-mono, monospace); opacity: .75; }
.cp .cp-aqi button:hover { transform: translateY(-3px); }
.cp .cp-aqi button.is-on { border-color: var(--ink); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .55); transform: translateY(-4px) scale(1.03); }
.cp .cp-aqi button.is-now::after { content: "сейчас"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 99px; background: var(--ink); color: var(--surface); font: 800 10.5px/1 var(--font-display); }
.cp-aqi .a0 { background: #4ade80; } .cp-aqi .a1 { background: #a3e635; } .cp-aqi .a2 { background: #facc15; } .cp-aqi .a3 { background: #fb923c; } .cp-aqi .a4 { background: #f87171; }
.cp-aqi-ctl { margin-top: 14px; display: grid; gap: 12px; }
.cp-aqi-ctl input[type="range"] { width: 100%; height: 12px; -webkit-appearance: none; appearance: none; border-radius: 99px; background: linear-gradient(90deg, #4ade80 0 17%, #a3e635 17% 33%, #facc15 33% 50%, #fb923c 50% 67%, #f87171 67%); cursor: grab; }
.cp-aqi-ctl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 5px solid var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.cp-aqi-out { padding: 16px 18px; border-radius: 20px; background: var(--sunk); border-left: 5px solid var(--pp-a); display: grid; gap: 6px; animation: ppPop .35s var(--spring, ease) both; }
.cp-aqi-out b { font: 800 17px/1.3 var(--font-display); } .cp-aqi-out p { margin: 0; color: var(--muted); font: 500 14.5px/1.6 var(--font-display); }
.cp-aqi-out ul { margin: 4px 0 0; padding-left: 20px; display: grid; gap: 4px; font: 600 14px/1.5 var(--font-display); }
.cp-best { margin: 12px 0 0; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--pp-a) 12%, var(--sunk)); font: 600 14.5px/1.55 var(--font-display); }

/* журнал изменений */
.cp-log-stats { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 8px; }
.cp-newbadge { padding: 10px 14px; border-radius: 99px; background: var(--sunk); font: 800 13.5px/1 var(--font-display); color: var(--muted); }
.cp-newbadge.is-alert { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); color: #fff; animation: ppPulse 1.6s ease-in-out infinite; }
.cp-logs { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 14px; }
.cp-logs::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--pp-a), var(--pp-b)); opacity: .55; }
.cp-month { list-style: none; margin: 18px 0 0 -26px; padding-left: 26px; font: 900 clamp(22px, 3vw, 30px)/1 var(--font-display); letter-spacing: -.03em; position: relative; text-transform: capitalize; }
.cp-month::before { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--pp-b); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pp-b) 25%, transparent); }
.cp-month small { font: 700 13px/1 var(--font-display); color: var(--muted); margin-left: 8px; text-transform: none; letter-spacing: 0; }
.cp-log { position: relative; transition: opacity .6s var(--ease, ease), transform .6s var(--spring, ease); }
.pp-js .cp-log:not(.is-in) { opacity: 0; transform: translateX(-18px); }
.cp-log::before { content: ""; position: absolute; left: -26px; top: 24px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 3px solid var(--pp-a); z-index: 1; }
.cp-log.is-new::before { background: var(--pp-b); box-shadow: 0 0 0 6px color-mix(in srgb, var(--pp-b) 30%, transparent); animation: ppPulse 1.6s ease-in-out infinite; }
.cp .cp-log__head { appearance: none; width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; padding: 16px 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); transition: transform .25s var(--spring, ease), border-color .2s; }
.cp .cp-log__head:hover { transform: translateX(4px); border-color: var(--pp-a); }
.cp-log.is-new .cp-log__head { border-color: var(--pp-b); }
.cp-log__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 800 12px/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; }
.cp-tag { padding: 5px 9px; border-radius: 99px; background: color-mix(in srgb, var(--pp-a) 16%, var(--sunk)); color: var(--ink); }
.cp-tag--rel { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); color: #fff; }
.cp-tag--new { background: #ef4444; color: #fff; display: none; } .cp-log.is-new .cp-tag--new { display: inline-block; }
.cp-log__date { color: var(--muted); }
.cp-log__title { grid-column: 1; font: 800 clamp(17px, 2vw, 20px)/1.3 var(--font-display); }
.cp-log__plus { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 24px; color: var(--muted); transition: transform .3s var(--spring, ease); }
.cp-log.is-open .cp-log__plus { transform: rotate(45deg); color: var(--pp-b); }
.cp-log__lead { grid-column: 1 / -1; font: 500 14.5px/1.6 var(--font-display); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cp-log.is-open .cp-log__lead { display: block; -webkit-line-clamp: unset; }
.cp-log__more { display: none; padding: 4px 18px 6px; }
.cp-log.is-open .cp-log__more { display: block; animation: ppPop .35s var(--spring, ease) both; }
.cp-log__more ul { margin: 8px 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); font: 500 14.5px/1.6 var(--font-display); }
.cp-log__more a { color: var(--signal); font: 800 14px/1.4 var(--font-display); text-underline-offset: 3px; }
.cp-log.is-read .cp-log__head { opacity: .86; }
.cp-also { margin: 6px 0 0; font: 600 13px/1.5 var(--font-display); color: var(--muted); }
.cp-also a { margin-right: 10px; }

@media (prefers-reduced-motion: reduce) {
  .cp *, .cp-hero * { animation: none !important; transition: none !important; }
  .pp-js .cp-ev:not(.is-in), .pp-js .cp-log:not(.is-in) { opacity: 1; transform: none; }
  .cp-pop .line { stroke-dashoffset: 0; } .cp-pop .area { opacity: 1; }
}
@media (max-width: 560px) {
  .cp .cp-ev__head, .cp .cp-log__head { padding: 14px; }
  .cp-ev__ico { font-size: 24px; }
  .cp .cp-ord span { min-width: 70px; }
}

.cp-ev__ico { grid-row: 1 / span 4; align-self: start; }
.cp-ev__link { display: inline-block; margin: 8px 0 0 18px; font: 800 13px/1 var(--font-display); color: var(--signal); text-underline-offset: 3px; }

.cp-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap, 20px); align-items: start; }
@media (max-width: 860px) { .cp-two { grid-template-columns: 1fr; } }

/* Зубовская церковь */
.cp-hero--photo { color: #fff; border-color: transparent; background: linear-gradient(100deg, rgba(8, 14, 28, .88) 0%, rgba(8, 14, 28, .62) 46%, rgba(8, 14, 28, .2) 100%), var(--hero) center 30% / cover no-repeat; min-height: clamp(340px, 52vw, 520px); display: flex; flex-direction: column; justify-content: flex-end; }
.cp-hero--photo::before { opacity: .35; }
.cp-hero--photo h1 { text-shadow: 0 4px 30px rgba(0, 0, 0, .55); }
.cp-hero--photo p, .cp-hero--photo .eyebrow { color: #e6edf8; }
.cp-hero--photo .cp-hero__tags span { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.cp-hero--photo .cp-orbit i { border-color: rgba(255, 255, 255, .35); }
.cp-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cp-addr__line { margin: 0 0 10px; font: 800 18px/1.4 var(--font-display); }
.cp-addr__coords { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.cp-addr__coords code { padding: 9px 12px; border-radius: 12px; background: var(--sunk); font: 700 15px/1 var(--font-mono, monospace); }
.cp-addr__links { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-map { position: relative; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 22%, var(--sunk)), color-mix(in srgb, var(--pp-b) 18%, var(--sunk))); }
.cp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-map__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 16px; }
.cp-map__ph small { color: var(--muted); font: 600 13px/1.4 var(--font-display); max-width: 260px; }
.cp-map__pin { font-size: 56px; animation: cpBob 2.2s ease-in-out infinite; }
@keyframes cpBob { 50% { transform: translateY(-10px); } }
.cp-chapters { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; counter-reset: ch; }
.cp .cp-chap__btn { appearance: none; width: 100%; height: 100%; text-align: left; cursor: pointer; display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s; }
.cp .cp-chap__btn:hover { transform: translateY(-4px); border-color: var(--pp-a); }
.cp-chap__ico { font-size: 34px; line-height: 1; }
.cp-chap__when { font: 800 12.5px/1 var(--font-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--pp-b); }
.cp-chap__title { font: 800 19px/1.3 var(--font-display); }
.cp-chap__text { font: 500 14.5px/1.65 var(--font-display); color: var(--muted); transition: filter .5s, max-height .6s var(--ease, ease); }
.cp-chap__lock { font: 800 12.5px/1 var(--font-display); color: var(--ink); padding: 7px 10px; border-radius: 99px; background: color-mix(in srgb, var(--pp-a) 20%, var(--sunk)); justify-self: start; }
.cp-chap:not(.is-open) .cp-chap__text { filter: blur(5px); max-height: 4.9em; overflow: hidden; user-select: none; }
.cp-chap:not(.is-open) .cp-chap__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--surface) 80%, transparent)); pointer-events: none; }
.cp-chap.is-open .cp-chap__lock { display: none; }
.cp-chap.is-open .cp-chap__btn { cursor: default; border-color: var(--pp-b); background: linear-gradient(160deg, color-mix(in srgb, var(--pp-a) 10%, var(--surface)), var(--surface)); animation: ppPop .5s var(--spring, ease) both; }
.cp-chap.is-open .cp-chap__btn:hover { transform: none; }
.cp-photos { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 10px; }
.cp .cp-photo { appearance: none; position: relative; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: zoom-in; background: var(--sunk); box-shadow: var(--shadow); grid-column: span 2; }
.cp-photo--0 { grid-column: span 3 !important; grid-row: span 2; } .cp-photo--1 { grid-column: span 3 !important; grid-row: span 2; }
.cp-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease, ease), filter .4s; }
.cp-photo:hover img { transform: scale(1.07); }
.cp-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; text-align: left; color: #fff; font: 700 13px/1.35 var(--font-display); background: linear-gradient(transparent, rgba(0, 0, 0, .72)); transform: translateY(100%); transition: transform .35s var(--ease, ease); }
.cp-photo:hover span, .cp-photo:focus-visible span { transform: none; }
@media (max-width: 760px) { .cp-photos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; } .cp .cp-photo, .cp-photo--0, .cp-photo--1 { grid-column: span 1 !important; grid-row: span 1; } .cp-photo--0 { grid-column: span 2 !important; grid-row: span 2; } .cp-photo span { transform: none; } }
.cp-dialog--photo { width: min(980px, calc(100vw - 20px)); padding: 12px; background: #0b0f1a; }
.cp-dialog--photo .cp-dialog__x { background: rgba(255, 255, 255, .85); }

/* ── Права и жалобы ──────────────────────────────────────────────── */
.cp-sos { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; padding: 14px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, #ef4444 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, #ef4444 35%, var(--line)); }
.cp-sos__t { align-self: center; font: 900 14px/1 var(--font-display); color: #ef4444; text-transform: uppercase; letter-spacing: .08em; padding: 0 6px; }
.cp-sos__b { flex: 1 1 150px; display: grid; gap: 2px; padding: 10px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); transition: transform .25s var(--spring, ease), border-color .2s, box-shadow .25s; }
.cp-sos__b:hover { transform: translateY(-3px); border-color: #ef4444; box-shadow: 0 12px 24px -16px #ef4444; }
.cp-sos__b b { font: 900 26px/1 var(--font-mono, monospace); color: #ef4444; letter-spacing: -.02em; }
.cp-sos__b span { font: 800 13px/1.2 var(--font-display); }
.cp-sos__b small { font: 500 12px/1.3 var(--font-display); color: var(--muted); }

.cp-sits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.cp .cp-sit { appearance: none; cursor: pointer; text-align: left; display: grid; gap: 6px; align-content: start; padding: 16px 16px 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font-display); transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s, background .2s; position: relative; overflow: hidden; touch-action: manipulation; }
.cp .cp-sit::after { content: ""; position: absolute; inset: auto -30px -40px auto; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pp-b) 26%, transparent), transparent 70%); opacity: 0; transition: opacity .3s; }
.cp .cp-sit:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--pp-a); box-shadow: 0 18px 34px -22px var(--pp-a); }
.cp .cp-sit:hover::after, .cp .cp-sit.is-on::after { opacity: 1; }
.cp .cp-sit.is-on { border-color: var(--pp-a); background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 14%, var(--surface)), var(--surface)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-a) 55%, transparent); }
.cp .cp-sit:focus-visible { outline: 3px solid color-mix(in srgb, var(--pp-a) 70%, #fff); outline-offset: 2px; }
.cp-sit__ico { font-size: 32px; line-height: 1; transition: transform .35s var(--spring, ease); }
.cp-sit:hover .cp-sit__ico { transform: scale(1.18) rotate(-6deg); }
.cp-sit b { font: 800 16px/1.25 var(--font-display); }
.cp-sit small { font: 500 13px/1.45 var(--font-display); color: var(--muted); }

.cp-panel { margin-top: 16px; display: grid; gap: 14px; padding: clamp(14px, 2.4vw, 24px); border-radius: 26px; border: 1px solid color-mix(in srgb, var(--pp-a) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--pp-a) 8%, var(--surface)), var(--surface) 55%); scroll-margin-top: 90px; }
.cp-panel.is-in { animation: ppPop .5s var(--spring, ease) both; }
.cp-panel__head { display: flex; align-items: center; gap: 12px; }
.cp-panel__head h3 { margin: 0; font: 900 clamp(20px, 3vw, 28px)/1.15 var(--font-display); letter-spacing: -.02em; }
.cp-panel__ico { font-size: 36px; }
.cp-panel__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; }
@media (max-width: 860px) { .cp-panel__grid { grid-template-columns: 1fr; } }
.cp-panel h4 { margin: 0 0 6px; font: 800 12px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--pp-a); }
.cp-panel .pp-card p { margin: 0 0 14px; font: 500 15px/1.6 var(--font-display); }
.cp-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 8px; }
.cp-steps li { counter-increment: st; position: relative; padding: 10px 12px 10px 46px; border-radius: 14px; background: var(--sunk); font: 500 14.5px/1.55 var(--font-display); }
.cp-steps li::before { content: counter(st); position: absolute; left: 10px; top: 9px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 800 13px/1 var(--font-display); background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); }
.cp-ladder { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; counter-reset: lad; }
.cp-ladder li { counter-increment: lad; position: relative; display: grid; gap: 3px; padding: 14px 12px 12px; border-radius: 16px; background: var(--sunk); border-top: 4px solid var(--pp-a); animation: ppPop .5s calc(var(--i, 0) * .08s) var(--spring, ease) both; }
.cp-ladder li::before { content: counter(lad); position: absolute; right: 10px; top: 8px; font: 900 22px/1 var(--font-mono, monospace); color: color-mix(in srgb, var(--pp-a) 35%, transparent); }
.cp-ladder li:nth-child(n+3) { border-top-color: var(--pp-b); }
.cp-ladder b { font: 800 14px/1.25 var(--font-display); padding-right: 22px; }
.cp-ladder span { font: 500 12.5px/1.4 var(--font-display); color: var(--muted); }
.cp-laws { margin: 0; font: 500 13px/1.55 var(--font-display); color: var(--muted); }
.cp-panel__cta { margin: 0; }

.cp-form { margin-top: clamp(26px, 4vw, 44px); scroll-margin-top: 90px; }
.cp-form__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; margin-top: 12px; }
@media (max-width: 900px) { .cp-form__grid { grid-template-columns: 1fr; } }
.cp-form__fields, .cp-calc { display: grid; gap: 10px; align-content: start; }
.cp-form label, .cp-calc label { display: grid; gap: 5px; font: 700 12.5px/1.2 var(--font-display); color: var(--muted); }
.cp-form input, .cp-form select, .cp-form textarea, .cp-calc input, .cp-calc select { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: 500 15px/1.4 var(--font-display); min-height: 44px; }
.cp-form textarea { resize: vertical; }
.cp-form input:focus, .cp-form select:focus, .cp-form textarea:focus, .cp-calc input:focus, .cp-calc select:focus { outline: 3px solid color-mix(in srgb, var(--pp-a) 55%, transparent); outline-offset: 1px; border-color: var(--pp-a); }
.cp-doc { padding: 22px 22px 20px; border-radius: 6px 18px 18px 18px; background: #fffef9; color: #222; border: 1px solid #e6e1cf; box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .55), inset 0 0 0 1px #fff; position: relative; max-height: 520px; overflow: auto; }
.cp-doc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); border-radius: 6px 18px 0 0; }
.cp-doc pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 500 14px/1.65 Georgia, "Times New Roman", serif; }
.cp-form__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pp .pp-btn--ghost { background: var(--sunk); color: var(--ink); box-shadow: none; border: 1px solid var(--line); }
.pp .pp-btn--ghost:hover { border-color: var(--pp-a); }
.cp-form__hint { margin: 14px 0 0; }

.cp-calc__out { padding: 14px 16px; border-radius: 16px; background: var(--sunk); font: 500 14.5px/1.55 var(--font-display); border-left: 5px solid var(--line); transition: background .3s, border-color .3s; }
.cp-calc__out.is-ok { border-color: #10b981; background: color-mix(in srgb, #10b981 12%, var(--surface)); }
.cp-calc__out.is-bad { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--surface)); animation: ppPop .4s var(--spring, ease) both; }
.cp-calc__out.is-warn { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }
.cp-calc__out a { color: var(--pp-a); font-weight: 800; }
.cp-tbl { display: grid; gap: 4px; margin: 10px 0; }
.cp-tbl__r { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--sunk); font: 600 14px/1.3 var(--font-display); }
.cp-tbl__h { background: transparent; font: 800 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

.cp-tabs .cp-chips { margin-bottom: 14px; }
.cp-roles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap, 20px); }
@media (max-width: 760px) { .cp-roles { grid-template-columns: 1fr; } }
.cp-roles[hidden] { display: none; }
.cp-roles.is-in { animation: ppPop .45s var(--spring, ease) both; }
.cp-roles h3 { margin: 0 0 10px; font: 800 18px/1.2 var(--font-display); }
.cp-roles .cp-ul li { margin-bottom: 9px; }

.cp-orgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; margin-top: 10px; }
.cp-org { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--spring, ease), border-color .2s; }
.cp-org:hover { transform: translateY(-3px); border-color: var(--pp-a); }
.cp-org[hidden] { display: none; }
.cp-org__ico { font-size: 26px; }
.cp-org h3 { margin: 0; font: 800 16px/1.25 var(--font-display); }
.cp-org p { margin: 0; font: 500 14px/1.55 var(--font-display); color: var(--muted); }
.cp-org .cp-org__how { color: var(--ink); font-weight: 700; }
.cp-org a { font: 800 13px/1 var(--font-display); color: var(--pp-a); text-decoration: none; }
.cp-org a:hover { text-decoration: underline; }
@media print { .cp-hero, .cp-sits, .cp-panel, .cp-sos { display: none; } }

/* ── О портале ───────────────────────────────────────────────────── */
.cp-hero--portal { padding-right: clamp(22px, 26vw, 330px); min-height: clamp(280px, 38vw, 420px); }
@media (max-width: 760px) { .cp-hero--portal { padding-right: clamp(22px, 4vw, 44px); } }
.cp-orbit--big { width: clamp(150px, 26vw, 300px); right: clamp(14px, 4vw, 54px); top: 50%; transform: translateY(-50%); }
.cp-orbit--big b { font: 900 clamp(46px, 8vw, 96px)/1 var(--font-display); letter-spacing: -.05em; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-sat { position: absolute; width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px -10px rgba(0,0,0,.4); animation: cpFloat 5s ease-in-out infinite; }
.cp-sat--1 { left: 2%; top: 14%; } .cp-sat--2 { right: 0; top: 22%; animation-delay: -1.2s; } .cp-sat--3 { left: 8%; bottom: 8%; animation-delay: -2.4s; } .cp-sat--4 { right: 10%; bottom: 4%; animation-delay: -3.4s; }
@keyframes cpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.cp-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cp-mission { margin-top: clamp(22px, 3vw, 34px); padding: clamp(18px, 3vw, 30px); border-radius: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 12%, var(--surface)), color-mix(in srgb, var(--pp-b) 10%, var(--surface))); border: 1px solid color-mix(in srgb, var(--pp-a) 28%, var(--line)); }
.cp-mission h2 { margin: 6px 0 10px; font: 900 clamp(24px, 3.6vw, 36px)/1.1 var(--font-display); letter-spacing: -.03em; }
.cp-mission p { margin: 0 0 10px; max-width: 780px; font: 500 16px/1.7 var(--font-display); color: var(--muted); }
.cp-mission a { color: var(--pp-a); font-weight: 800; }

.cp-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 10px; }
.cp-svc { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 16px 16px; border-radius: 22px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s; animation: ppPop .5s calc(var(--i, 0) * .03s) var(--spring, ease) both; }
.cp-svc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 14%, transparent), color-mix(in srgb, var(--pp-b) 10%, transparent)); opacity: 0; transition: opacity .3s; }
.cp-svc:hover { transform: translateY(-5px) rotate(-.3deg); border-color: var(--pp-a); box-shadow: 0 20px 36px -24px var(--pp-a); }
.cp-svc:hover::before { opacity: 1; }
.cp-svc > * { position: relative; }
.cp-svc[hidden] { display: none; }
.cp-svc__ico { font-size: 32px; line-height: 1; transition: transform .35s var(--spring, ease); }
.cp-svc:hover .cp-svc__ico { transform: scale(1.2) rotate(-8deg); }
.cp-svc b { font: 800 17px/1.25 var(--font-display); }
.cp-svc small { font: 500 13.5px/1.5 var(--font-display); color: var(--muted); }
.cp-svc__go { margin-top: 4px; font: 800 13px/1 var(--font-display); color: var(--pp-a); transition: transform .25s var(--spring, ease); }
.cp-svc:hover .cp-svc__go { transform: translateX(4px); }
.cp-svc__seen { position: absolute !important; right: 12px; top: 12px; padding: 4px 9px; border-radius: 99px; font: 800 11px/1 var(--font-display); color: #fff; background: linear-gradient(135deg, #10b981, #0ea5e9); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .35s var(--spring, ease); }
.cp-svc.is-seen .cp-svc__seen { opacity: 1; transform: none; }
.cp-svc.is-seen { border-color: color-mix(in srgb, #10b981 45%, var(--line)); }

.cp-flow { display: grid; gap: 14px; }
.cp-flow__steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: fl; }
@media (max-width: 820px) { .cp-flow__steps { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); } }
.cp .cp-flow__s { appearance: none; cursor: pointer; width: 100%; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 8px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font-display); transition: transform .3s var(--spring, ease), border-color .2s, background .3s; }
.cp-flow__s span { font-size: 28px; transition: transform .35s var(--spring, ease); }
.cp-flow__s b { font: 800 13px/1.25 var(--font-display); }
.cp-flow__s:hover { transform: translateY(-3px); border-color: var(--pp-a); }
.cp-flow__s.is-done { background: color-mix(in srgb, var(--pp-a) 10%, var(--surface)); }
.cp-flow__s.is-on { background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); color: #fff; border-color: transparent; box-shadow: 0 14px 28px -16px var(--pp-b); }
.cp-flow__s.is-on span { transform: scale(1.25); }
.cp-flow__bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.cp-flow__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); transition: width .6s var(--spring, ease); }
.cp-flow__txt b { display: block; margin-bottom: 6px; font: 800 18px/1.3 var(--font-display); }
.cp-flow__txt p { margin: 0; font: 500 15.5px/1.65 var(--font-display); color: var(--muted); }
.cp-flow__txt.is-in { animation: ppPop .4s var(--spring, ease) both; }

.cp-rels { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 3px solid color-mix(in srgb, var(--pp-a) 40%, var(--line)); display: grid; gap: 12px; }
.cp-rel { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; animation: ppPop .5s calc(var(--i, 0) * .07s) var(--spring, ease) both; }
@media (max-width: 560px) { .cp-rel { grid-template-columns: 1fr; gap: 4px; } }
.cp-rel::before { content: ""; position: absolute; left: -29px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); border: 3px solid var(--bg, #fff); }
.cp-rel time { font: 800 13px/1.4 var(--font-mono, monospace); color: var(--pp-a); padding-top: 4px; }
.cp-rel a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); transition: transform .25s var(--spring, ease), border-color .2s; }
.cp-rel a:hover { transform: translateX(4px); border-color: var(--pp-a); }
.cp-rel b { font: 800 15.5px/1.3 var(--font-display); }
.cp-rel small { font: 500 13.5px/1.5 var(--font-display); color: var(--muted); }

.cp-idea { display: grid; gap: 4px; align-content: start; background: linear-gradient(160deg, color-mix(in srgb, var(--pp-a) 10%, var(--surface)), var(--surface)); }
.cp-idea h3 { margin: 0 0 4px; font: 900 22px/1.2 var(--font-display); }
.cp-idea p { margin: 0 0 10px; font: 500 15px/1.65 var(--font-display); color: var(--muted); }

.cp-faq h2 { margin: 6px 0 14px; font: 900 clamp(24px, 3.6vw, 36px)/1.1 var(--font-display); letter-spacing: -.03em; }
.cp-faq details { margin-bottom: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .2s; }
.cp-faq details[open] { border-color: var(--pp-a); }
.cp-faq summary { cursor: pointer; padding: 14px 18px; font: 800 15.5px/1.35 var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after { content: "＋"; color: var(--pp-a); transition: transform .3s var(--spring, ease); }
.cp-faq details[open] summary::after { transform: rotate(45deg); }
.cp-faq details p { margin: 0; padding: 0 18px 16px; font: 500 15px/1.65 var(--font-display); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cp-sat, .cp-svc, .cp-rel, .cp-ladder li { animation: none !important; } }

/* ── Права и жалобы: расширение ──────────────────────────────────── */
.cp-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.cp-toc a { padding: 8px 13px; border-radius: 99px; text-decoration: none; color: var(--ink); background: var(--sunk); border: 1px solid var(--line); font: 700 13px/1 var(--font-display); transition: transform .2s var(--spring, ease), border-color .2s, background .2s; }
.cp-toc a:hover { transform: translateY(-2px); border-color: var(--pp-a); background: color-mix(in srgb, var(--pp-a) 12%, var(--sunk)); }
#master, #kalkulyator, #prava, #sluzhby, #baza, #shpargalki, #kanaly, [id^="g-"] { scroll-margin-top: 90px; }

.cp-kb { display: grid; gap: 10px; margin-top: 10px; }
.cp-kbc { border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .3s; }
.cp-kbc[hidden] { display: none; }
.cp-kbc:hover { border-color: color-mix(in srgb, var(--pp-a) 55%, var(--line)); }
.cp-kbc.is-open { border-color: var(--pp-a); box-shadow: 0 18px 34px -26px var(--pp-a); }
.cp-kbc.is-read .cp-kbc__ico { background: linear-gradient(135deg, #10b981, #0ea5e9); }
.cp .cp-kbc__h { appearance: none; width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; text-align: left; cursor: pointer; border: 0; background: transparent; color: var(--ink); font-family: var(--font-display); }
.cp-kbc__ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 22px; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); transition: transform .3s var(--spring, ease); }
.cp-kbc__h:hover .cp-kbc__ico { transform: scale(1.08) rotate(-4deg); }
.cp-kbc__t { display: grid; gap: 3px; min-width: 0; }
.cp-kbc__t b { font: 800 16px/1.3 var(--font-display); }
.cp-kbc__t small { font: 500 13.5px/1.45 var(--font-display); color: var(--muted); }
.cp-kbc__plus { font-size: 20px; color: var(--pp-a); transition: transform .3s var(--spring, ease); }
.cp-kbc.is-open .cp-kbc__plus { transform: rotate(45deg); }
.cp-kbc__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--spring, ease); }
.cp-kbc.is-open .cp-kbc__b { grid-template-rows: 1fr; }
.cp-kbc__in { overflow: hidden; min-height: 0; }
.cp-kbc__b ul { margin: 0; padding: 0 18px 0 46px; list-style: disc; display: grid; gap: 8px; font: 500 15px/1.6 var(--font-display); }
.cp-kbc.is-open .cp-kbc__b ul { padding-top: 2px; padding-bottom: 6px; }
.cp-kbc:not(.is-open) .cp-kbc__in { visibility: hidden; }
.cp-kbc__n { margin: 0; padding: 0 18px; font: 600 12.5px/1.5 var(--font-display); color: var(--muted); }
.cp-kbc.is-open .cp-kbc__n { padding-bottom: 16px; padding-top: 4px; }

.cp-sheet { margin-top: 6px; }
.cp-sheet[hidden] { display: none; }
.cp-sheet.is-in { animation: ppPop .4s var(--spring, ease) both; }
.cp-tbl--cal .cp-tbl__r { grid-template-columns: minmax(96px, .5fr) 2fr 1fr; align-items: center; }
.cp-tbl--cal b { font: 800 14px/1.3 var(--font-display); color: var(--pp-a); }
.cp-tbl--cal small { font: 500 12px/1.4 var(--font-display); color: var(--muted); }
@media (max-width: 640px) { .cp-tbl--cal .cp-tbl__r { grid-template-columns: 1fr; gap: 2px; } }
.cp-gl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; margin: 12px 0 0; }
.cp-gl > div { padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.cp-gl > div[hidden] { display: none; }
.cp-gl dt { font: 800 15px/1.2 var(--font-display); color: var(--pp-a); margin-bottom: 4px; }
.cp-gl dd { margin: 0; font: 500 14px/1.55 var(--font-display); color: var(--muted); }
.cp-phs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.cp-ph { display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.cp-ph small { font: 800 11px/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: var(--pp-a); }
.cp-ph p { margin: 0; font: 500 14.5px/1.6 var(--font-display); }
.cp-ph .cp-chip { justify-self: start; }
.cp-errs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cp-errs li { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #f59e0b; }
.cp-errs b { font: 800 15px/1.3 var(--font-display); }
.cp-errs span { font: 500 14px/1.55 var(--font-display); color: var(--muted); }

.cp-chan { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.cp-chan__c { display: grid; gap: 8px; align-content: start; }
.cp-chan__c h3 { margin: 0; font: 800 18px/1.2 var(--font-display); }
.cp-chan__ico { font-size: 30px; }
.cp-chan__c a { font: 800 13px/1 var(--font-display); color: var(--pp-a); text-decoration: none; margin-top: 4px; }
.cp-chan__c a:hover { text-decoration: underline; }

/* ── Права и жалобы: прогресс, поиск, план, расчёты, тренажёр ────── */
.cp-readbar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; }
.cp-readbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); box-shadow: 0 0 12px var(--pp-a); transition: width .15s linear; }

.cp-prog { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 30px); align-items: center; margin-top: 16px; padding: clamp(16px, 3vw, 28px); border-radius: 28px; border: 1px solid color-mix(in srgb, var(--pp-a) 35%, var(--line)); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--pp-a) 14%, var(--surface)), var(--surface) 60%); }
@media (max-width: 640px) { .cp-prog { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.cp-prog__ring { position: relative; width: clamp(120px, 20vw, 168px); aspect-ratio: 1; }
.cp-prog__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cp-prog__ring circle { fill: none; stroke-width: 9; }
.cp-prog__ring .bg { stroke: var(--sunk); }
.cp-prog__ring .fg { stroke: url(#cpRingGrad), var(--pp-a); stroke: var(--pp-a); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: calc(327 - 327 * var(--p, 0) / 100); transition: stroke-dashoffset 1.2s var(--spring, ease); filter: drop-shadow(0 0 6px var(--pp-a)); }
.cp-prog__ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(26px, 4vw, 38px)/1 var(--font-display); letter-spacing: -.03em; }
.cp-prog__main { display: grid; gap: 8px; min-width: 0; width: 100%; }
.cp-prog h2 { margin: 0; font: 900 clamp(24px, 3.6vw, 34px)/1.1 var(--font-display); letter-spacing: -.03em; }
.cp-prog__next { margin: 0; font: 500 14.5px/1.55 var(--font-display); color: var(--muted); }
.cp-quests { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; text-align: left; }
.cp-quests li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--sunk); font: 600 13.5px/1.3 var(--font-display); transition: background .3s, transform .3s var(--spring, ease); }
.cp-quests small { font: 700 11.5px/1 var(--font-mono, monospace); color: var(--muted); }
.cp-quests__ck { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); font-size: 13px; color: #fff; }
.cp-quests li.is-done { background: color-mix(in srgb, #10b981 14%, var(--surface)); }
.cp-quests li.is-done .cp-quests__ck { background: #10b981; border-color: #10b981; animation: ppPop .4s var(--spring, ease) both; }
.cp-quests li.is-done span:nth-child(2) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, #10b981 60%, transparent); }

.cp-search { margin-top: clamp(20px, 3vw, 32px); padding: clamp(16px, 3vw, 26px); border-radius: 28px; border: 1px solid var(--line); background: var(--surface); }
.cp-search h2 { margin: 6px 0 12px; font: 900 clamp(24px, 3.6vw, 34px)/1.1 var(--font-display); letter-spacing: -.03em; }
.cp-search__box { position: relative; display: block; }
.cp-search__box input { width: 100%; box-sizing: border-box; padding: 16px 52px 16px 52px; border-radius: 18px; border: 2px solid var(--line); background: var(--sunk); color: var(--ink); font: 600 17px/1.3 var(--font-display); transition: border-color .2s, box-shadow .3s; }
.cp-search__box input:focus { outline: none; border-color: var(--pp-a); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-a) 25%, transparent), 0 10px 30px -14px var(--pp-a); }
.cp-search__ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; }
.cp-search__box kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line); font: 700 13px/1.2 var(--font-mono, monospace); color: var(--muted); background: var(--surface); }
.cp-search__quick { margin-top: 12px; }
.cp-search__out { display: grid; gap: 8px; margin-top: 14px; }
.cp-search__out[hidden] { display: none; }
.cp .cp-res { appearance: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 11px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font-family: var(--font-display); animation: ppPop .35s calc(var(--i, 0) * .04s) var(--spring, ease) both; transition: border-color .2s, transform .2s var(--spring, ease); }
.cp .cp-res:hover, .cp .cp-res:focus-visible { border-color: var(--pp-a); transform: translateX(4px); outline: none; }
.cp-res__i { font-size: 24px; }
.cp-res__b { display: grid; gap: 2px; min-width: 0; }
.cp-res__b b { font: 800 15px/1.3 var(--font-display); }
.cp-res__b small { font: 600 12px/1.4 var(--font-display); color: var(--muted); }

.cp-plan { margin-top: clamp(26px, 4vw, 44px); }
.cp-plan__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.cp-planc { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); animation: ppPop .4s var(--spring, ease) both; }
.cp-planc.is-full { border-color: #10b981; background: linear-gradient(160deg, color-mix(in srgb, #10b981 12%, var(--surface)), var(--surface)); }
.cp-planc header { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.cp-planc header span { font-size: 26px; }
.cp-planc header b { font: 800 16px/1.3 var(--font-display); }
.cp-planc ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.cp-planc label { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font: 500 14px/1.5 var(--font-display); cursor: pointer; }
.cp-planc input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pp-a); }
.cp-planc input:checked + span { text-decoration: line-through; color: var(--muted); }
.cp-plan__empty { padding: 18px; text-align: center; border-radius: 18px; border: 2px dashed var(--line); }
.cp-plan__empty[hidden] { display: none; }

.cp-calc2 { display: grid; gap: 12px; margin-top: 6px; }
.cp-calc2[hidden] { display: none; }
.cp-calc2.is-in { animation: ppPop .4s var(--spring, ease) both; }
.cp-calc2__f { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; }
.cp-calc2 label { display: grid; gap: 5px; font: 700 12.5px/1.2 var(--font-display); color: var(--muted); }
.cp-calc2 input, .cp-calc2 select { width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--sunk); color: var(--ink); font: 600 15px/1.4 var(--font-display); min-height: 44px; }
.cp-calc2 input:focus, .cp-calc2 select:focus { outline: 3px solid color-mix(in srgb, var(--pp-a) 55%, transparent); outline-offset: 1px; border-color: var(--pp-a); }
.cp-calc2__o { padding: 14px 16px; border-radius: 16px; background: var(--sunk); border-left: 5px solid var(--line); font: 500 15px/1.6 var(--font-display); transition: background .3s, border-color .3s; }
.cp-calc2__o b { font-weight: 900; }
.cp-calc2__o.is-ok { border-color: #10b981; background: color-mix(in srgb, #10b981 12%, var(--surface)); }
.cp-calc2__o.is-bad { border-color: #ef4444; background: color-mix(in srgb, #ef4444 12%, var(--surface)); }
.cp-calc2__o.is-warn { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 14%, var(--surface)); }

.cp-scen { display: grid; gap: 14px; }
.cp-scen__pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.cp .cp-scen__c { appearance: none; cursor: pointer; position: relative; display: grid; gap: 6px; justify-items: start; padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font-family: var(--font-display); transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s; }
.cp-scen__c span { font-size: 30px; }
.cp-scen__c b { font: 800 14.5px/1.3 var(--font-display); }
.cp-scen__c i { position: absolute; right: 12px; top: 12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #10b981; color: #fff; font-style: normal; font-size: 13px; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--spring, ease); }
.cp .cp-scen__c:hover { transform: translateY(-3px); border-color: var(--pp-a); }
.cp .cp-scen__c.is-on { border-color: var(--pp-a); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pp-a) 50%, transparent); }
.cp-scen__c.is-done i { opacity: 1; transform: none; }
.cp-scen__stage { display: grid; gap: 10px; min-height: 160px; }
.cp-scen__top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 800 15px/1.3 var(--font-display); }
.cp-scen__top span:last-child { color: var(--muted); font-weight: 700; }
.cp-scen__intro { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--sunk); font: 500 15px/1.6 var(--font-display); }
.cp-scen__q { margin: 0; font: 800 clamp(17px, 2.4vw, 21px)/1.35 var(--font-display); }
.cp-scen__stage .pp-opts { display: grid; gap: 8px; }
.cp-scen__stage .pp-q__fb { margin: 6px 0 0; font: 500 14.5px/1.6 var(--font-display); }
.cp-scen__stage [data-next] { margin-top: 8px; }
.cp-scen__end { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 10px; }
.cp-scen__end h3 { margin: 0; font: 900 26px/1.2 var(--font-display); }

.cp-tip.is-in { animation: ppPop .4s var(--spring, ease) both; }
.cp-tip h3 { margin: 8px 0 6px; font: 900 20px/1.3 var(--font-display); }
.cp-tip .cp-ul { margin: 8px 0 12px; }
@media (prefers-reduced-motion: reduce) { .cp .cp-res, .cp-planc, .cp-quests li.is-done .cp-quests__ck { animation: none !important; } .cp-prog__ring .fg { transition: none; } }

/* ── Тонкие страницы: инструкции, избранное, архив, рубрики ───────── */
.cp-hero--left { background: linear-gradient(90deg, rgba(5, 10, 24, .95) 0%, rgba(5, 10, 24, .86) 42%, rgba(5, 10, 24, .3) 70%, rgba(5, 10, 24, 0) 100%), var(--hero) right center / cover no-repeat; min-height: clamp(300px, 40vw, 440px); justify-content: center; }
.cp-hero--left > * { max-width: min(600px, 100%); }
@media (max-width: 760px) { .cp-hero--left { background: linear-gradient(180deg, rgba(5, 10, 24, .86) 0%, rgba(5, 10, 24, .7) 60%, rgba(5, 10, 24, .35) 100%), var(--hero) 70% center / cover no-repeat; } }
.cp-prog--slim { grid-template-columns: 1fr; padding: clamp(14px, 2.4vw, 22px); }
.cp-cta { display: grid; gap: 6px; align-content: start; }
.cp-cta h3 { margin: 0; font: 900 22px/1.2 var(--font-display); }

/* инструкции */
.cp-hw { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; margin-top: 10px; }
.cp-hwc { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 16px 16px; border-radius: 24px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s; animation: ppPop .5s calc(var(--i, 0) * .04s) var(--spring, ease) both; }
.cp-hwc::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 14%, transparent), color-mix(in srgb, var(--pp-b) 10%, transparent)); opacity: 0; transition: opacity .3s; }
.cp-hwc > * { position: relative; }
.cp-hwc:hover { transform: translateY(-5px) rotate(-.3deg); border-color: var(--pp-a); box-shadow: 0 20px 36px -24px var(--pp-a); }
.cp-hwc:hover::before { opacity: 1; }
.cp-hwc[hidden] { display: none; }
.cp-hwc__ico { font-size: 34px; line-height: 1; transition: transform .35s var(--spring, ease); }
.cp-hwc:hover .cp-hwc__ico { transform: scale(1.2) rotate(-8deg); }
.cp-hwc b { font: 800 17px/1.3 var(--font-display); }
.cp-hwc small { font: 500 13.5px/1.5 var(--font-display); color: var(--muted); }
.cp-hwc__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-hwc__meta em { font-style: normal; padding: 4px 9px; border-radius: 99px; font: 700 11.5px/1 var(--font-display); background: var(--sunk); color: var(--muted); }
.cp-hwc__bar { height: 5px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.cp-hwc__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); transition: width .8s var(--spring, ease); }
.cp-hwc__done { position: absolute !important; right: 12px; top: 12px; padding: 4px 9px; border-radius: 99px; font: 800 11px/1 var(--font-display); color: #fff; background: linear-gradient(135deg, #10b981, #0ea5e9); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .35s var(--spring, ease); }
.cp-hwc.is-done .cp-hwc__done { opacity: 1; transform: none; }
.cp-hwc.is-done { border-color: color-mix(in srgb, #10b981 45%, var(--line)); }

.cp-hi { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap, 20px); margin-top: 18px; align-items: start; }
@media (max-width: 900px) { .cp-hi { grid-template-columns: 1fr; } }
.cp-hi__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font: 800 15px/1.3 var(--font-display); }
.cp-hi__pct { font: 900 28px/1 var(--font-display); background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cp-hi__steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.cp-hi__s { animation: ppPop .45s calc(var(--i, 0) * .06s) var(--spring, ease) both; }
.cp-hi__s label { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, background .3s, transform .25s var(--spring, ease); }
.cp-hi__s label:hover { border-color: var(--pp-a); transform: translateX(3px); }
.cp-hi__s input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--pp-a); }
.cp-hi__n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; font: 800 13px/1 var(--font-display); background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); }
.cp-hi__t { font: 500 15.5px/1.6 var(--font-display); }
.cp-hi__s.is-ck label { background: color-mix(in srgb, #10b981 11%, var(--surface)); border-color: color-mix(in srgb, #10b981 40%, var(--line)); }
.cp-hi__s.is-ck .cp-hi__t { text-decoration: line-through; text-decoration-color: color-mix(in srgb, #10b981 55%, transparent); color: var(--muted); }
.cp-hi__done { margin: 14px 0 0; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, #10b981 14%, var(--surface)); border-left: 5px solid #10b981; font: 700 15px/1.5 var(--font-display); animation: ppPop .4s var(--spring, ease) both; }
.cp-hi__done[hidden] { display: none; }
.cp-hi__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cp-hi__side { display: grid; gap: 14px; }
.cp-hi__org h3 { margin: 6px 0; font: 800 18px/1.3 var(--font-display); }
.cp-hi__more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font: 700 14px/1.4 var(--font-display); }
.cp-hi__more a { color: var(--pp-a); text-decoration: none; }
@media print { .cp-hero, .cp-hi__act, .pp-hud, .cp-hi__side .cp-hi__org p:last-child, .cp-hw, .cp-hi__more { display: none !important; } .cp-hi { grid-template-columns: 1fr; } }

/* архив */
.cp-arY { margin-top: 16px; }
.cp-arY[hidden] { display: none; }
.cp-arY.is-in { animation: ppPop .5s var(--spring, ease) both; }
.cp-arY h2 { margin: 0 0 12px; font: 900 clamp(24px, 3.6vw, 34px)/1.1 var(--font-display); letter-spacing: -.03em; }
.cp-arY h2 small { font: 700 14px/1 var(--font-display); color: var(--muted); letter-spacing: 0; margin-left: 8px; }
.cp-arM { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.cp-arm { position: relative; display: grid; gap: 6px; padding: 14px 14px 12px; border-radius: 20px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s; animation: ppPop .45s calc(var(--i, 0) * .035s) var(--spring, ease) both; }
.cp-arm__n { font: 700 12.5px/1 var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.cp-arm b { font: 900 30px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.cp-arm i { display: block; height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.cp-arm i u { display: block; height: 100%; width: var(--h, 0%); border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); transform-origin: left; animation: cpGrowX .9s calc(var(--i, 0) * .05s) var(--spring, ease) both; }
@keyframes cpGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
a.cp-arm:hover { transform: translateY(-4px); border-color: var(--pp-a); box-shadow: 0 16px 30px -22px var(--pp-a); }
.cp-arm--1 { background: color-mix(in srgb, var(--pp-a) 5%, var(--surface)); }
.cp-arm--2 { background: color-mix(in srgb, var(--pp-a) 10%, var(--surface)); }
.cp-arm--3 { background: color-mix(in srgb, var(--pp-a) 16%, var(--surface)); }
.cp-arm--4 { background: color-mix(in srgb, var(--pp-a) 24%, var(--surface)); border-color: color-mix(in srgb, var(--pp-a) 45%, var(--line)); }
.cp-arm--0 { opacity: .45; background: var(--sunk); }
.cp-arm__seen { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #10b981; color: #fff; font-size: 12px; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .35s var(--spring, ease); }
.cp-arm.is-seen .cp-arm__seen { opacity: 1; transform: none; }

/* избранное */
.cp-svact { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-svempty { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(24px, 5vw, 46px); margin-top: 20px; }
.cp-svempty[hidden] { display: none; }
.cp-svempty__ico { font-size: 64px; animation: cpFloat 4s ease-in-out infinite; }
.cp-svempty h2 { margin: 0; font: 900 clamp(24px, 3.6vw, 34px)/1.1 var(--font-display); }
.cp-svempty__how { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; text-align: left; }
.cp-svempty__how li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--sunk); font: 600 15px/1.4 var(--font-display); }
.cp-svempty__how b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); font-size: 13px; }
.page-saved .grid { margin-top: 16px; }

/* рубрики */
.cp-tp { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; margin-top: 10px; }
.cp-tpc { position: relative; display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .3s var(--spring, ease), border-color .2s, box-shadow .3s; animation: ppPop .5s calc(var(--i, 0) * .04s) var(--spring, ease) both; }
.cp-tpc[hidden] { display: none; }
.cp-tpc:hover { transform: translateY(-4px); border-color: var(--pp-a); box-shadow: 0 18px 34px -24px var(--pp-a); }
.cp-tpc header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cp-tpc__ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--pp-a) 25%, var(--sunk)), color-mix(in srgb, var(--pp-b) 20%, var(--sunk))); transition: transform .3s var(--spring, ease); }
.cp-tpc:hover .cp-tpc__ico { transform: rotate(-8deg) scale(1.1); }
.cp-tpc__n { font: 600 13px/1.2 var(--font-display); color: var(--muted); }
.cp-tpc__n b { font: 900 22px/1 var(--font-display); color: var(--ink); margin-right: 4px; }
.cp-tpc h2 { margin: 0; font: 800 19px/1.25 var(--font-display); }
.cp-tpc h2 a { color: inherit; text-decoration: none; }
.cp-tpc p { margin: 0; font: 500 14px/1.55 var(--font-display); color: var(--muted); }
.cp-tpc__bar { height: 6px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.cp-tpc__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pp-a), var(--pp-b)); transition: width 1s var(--spring, ease); }
.cp-tpc.is-in .cp-tpc__bar i { width: var(--w, 0%); }
.cp-tpc__list { display: grid; gap: 6px; }
.cp-tpc__list a { padding: 8px 10px; border-radius: 12px; background: var(--sunk); color: var(--ink); text-decoration: none; font: 600 13px/1.4 var(--font-display); transition: background .2s, transform .2s; }
.cp-tpc__list a:hover { background: color-mix(in srgb, var(--pp-a) 14%, var(--sunk)); transform: translateX(3px); }
.cp-tpc__go { font: 800 13px/1 var(--font-display); color: var(--pp-a); text-decoration: none; }
.cp-tpc.is-seen { border-color: color-mix(in srgb, #10b981 40%, var(--line)); }
@media (prefers-reduced-motion: reduce) { .cp-hwc, .cp-hi__s, .cp-arm, .cp-arm i u, .cp-tpc, .cp-svempty__ico { animation: none !important; } }

/* ── правка: общее правило ссылок в тексте (refresh.css) не должно ломать кнопки и карточки ── */
.pp a.pp-btn.pp-btn, .pp a.pp-btn.pp-btn:hover, .cp a.pp-btn.pp-btn, .cp a.pp-btn.pp-btn:hover { color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--pp-a), var(--pp-b)); display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; }
.pp a.pp-btn.pp-btn--ghost, .pp a.pp-btn.pp-btn--ghost:hover, .cp a.pp-btn.pp-btn--ghost, .cp a.pp-btn.pp-btn--ghost:hover { color: var(--ink); background: var(--sunk); }
.cp-help li a:not(.tel) { display: grid; gap: 3px; color: inherit; text-decoration: none; background: none; }
.pp .cp-help li a:not(.btn):not(.tag), .pp .cp-help li a:not(.btn):not(.tag):hover { color: inherit; text-decoration: none; background: none; }
.cp-help li a b { display: block; font-weight: 800; }
.cp-help li a small { display: block; }
.pp .cp-help li a:not(.btn):not(.tag):hover b { text-decoration: underline; text-underline-offset: .2em; }
.pp .cp-help li a.tel:not(.btn):not(.tag), .pp .cp-help li a.tel:hover { color: var(--signal); text-decoration: none; font-weight: 800; background: none; width: fit-content; }