/* pomoshniki.org — витрина, кабинет и панель (задание № 1030). Основа — /stil.css (цвета, шрифт, кнопки страницы мамы). */
.shapka__ryad { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.shapka__vhod { font-weight: 800; color: var(--sliva); text-decoration: none; padding: .5rem .9rem; border-radius: 999px; background: var(--krem-2); }
.shapka__vhod:hover { background: #FFD9A6; }

.vitrina h2 { margin-top: 0; }
.razdel { padding: clamp(2.5rem, 8vw, 4.5rem) 0; }
.razdel--svetlyy { background: var(--moloko); }
.razdel__podpis { color: var(--sliva-tih); max-width: 40rem; }
.spisok { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
.karta { position: relative; background: var(--moloko); border-radius: var(--ugol); box-shadow: var(--ten); padding: 1.5rem; border-top: .45rem solid var(--akcent, var(--oranzh)); display: flex; flex-direction: column; gap: .55rem; }
.razdel--svetlyy .karta { background: var(--krem); }
.karta h3 { margin: .2rem 0 0; font-size: 1.4rem; }
.karta p { margin: 0; }
.karta__dlya { color: var(--sliva-tih); font-weight: 800; }
.karta__metka { position: absolute; top: 1rem; right: 1rem; font-size: .85rem; font-weight: 800; padding: .2rem .65rem; border-radius: 999px; background: var(--krem-2); color: var(--sliva); }
.karta__metka--est { background: #DDF2DA; color: var(--zelenyy-tekst); }
.karta__niz { margin-top: auto; padding-top: .75rem; display: flex; flex-direction: column; gap: .6rem; }
.karta__vtor { text-align: center; color: var(--sliva); font-weight: 700; }
.karta img { width: 88px; height: auto; }

.forma { display: grid; gap: .6rem; }
.forma input, .forma select, .pole { font: inherit; padding: .75rem .9rem; border-radius: .8rem; border: 2px solid #E9D6BC; background: #fff; color: var(--sliva-temn); min-height: 3rem; width: 100%; }
.forma input:focus-visible, .pole:focus-visible { outline: 3px solid var(--oranzh); outline-offset: 1px; }
.forma__otvet { min-height: 1.4em; font-weight: 700; color: var(--sliva); margin: 0; }
.forma__otvet--ok { color: var(--zelenyy-tekst); }

.shagi3 { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.shagi3 li { counter-increment: s; background: var(--moloko); border-radius: var(--ugol); padding: 1.25rem 1.25rem 1.25rem 4rem; position: relative; box-shadow: var(--ten); }
.shagi3 li::before { content: counter(s); position: absolute; left: 1.1rem; top: 1.1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--oranzh); color: #fff; font-weight: 900; display: grid; place-items: center; }

/* кабинет */
.kab { padding: clamp(2rem, 6vw, 3.5rem) 0 var(--ritm); }
.kab h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 .5rem; }
.plashka { background: var(--moloko); border-radius: var(--ugol); box-shadow: var(--ten); padding: clamp(1.1rem, 4vw, 1.75rem); margin: 1.25rem 0; }
.plashka h2 { margin: 0 0 .75rem; font-size: 1.35rem; }
.status { font-weight: 800; }
.status--da { color: var(--zelenyy-tekst); }
.status--net { color: #B3412F; }
.vybor { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: .75rem 0; }
.vybor button { font: inherit; text-align: left; cursor: pointer; background: #fff; border: 2px solid #E9D6BC; border-radius: 1rem; padding: 1rem; color: var(--sliva-temn); display: flex; flex-direction: column; gap: .35rem; }
.vybor button:hover, .vybor button:focus-visible { border-color: var(--oranzh); outline: none; }
.vybor b { font-size: 1.15rem; }
.vybor .cena { font-size: 1.3rem; font-weight: 900; color: var(--sliva); }
.vybor small { color: var(--sliva-tih); line-height: 1.4; }
.pravila-spisok { padding-left: 1.2rem; display: grid; gap: .5rem; }
.flazhok { display: flex; gap: .65rem; align-items: flex-start; font-weight: 700; margin: 1rem 0; cursor: pointer; }
.flazhok input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; accent-color: var(--sliva); flex: none; }
.rekv { white-space: pre-wrap; background: var(--krem); border-radius: .8rem; padding: 1rem; font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
.summa { font-size: 1.6rem; font-weight: 900; color: var(--sliva); margin: .25rem 0; }
.kod { font-family: ui-monospace, Menlo, monospace; background: var(--krem-2); padding: .1rem .45rem; border-radius: .35rem; }
.zagruzka { display: grid; gap: .75rem; margin-top: 1rem; }
.zagruzka input[type=file] { font: inherit; }
.ryad-knopok { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.ssylka-knopka { font: inherit; background: none; border: 0; color: var(--sliva); text-decoration: underline; cursor: pointer; padding: .5rem 0; font-weight: 700; }
.istoriya { width: 100%; border-collapse: collapse; font-size: .98rem; }
.istoriya td, .istoriya th { padding: .55rem .4rem; border-bottom: 1px solid #F0E2CC; text-align: left; vertical-align: top; }
.soobshchenie { font-weight: 700; color: var(--sliva); }

/* панель */
.panel-body { background: #FBF5EC; }
.panel { padding: 1.25rem 0 4rem; }
.panel .ramka { max-width: 84rem; }
.vkladki { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; position: sticky; top: 0; background: #FBF5EC; padding: .5rem 0; z-index: 2; }
.vkladki button { font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: .55rem 1rem; cursor: pointer; background: var(--krem-2); color: var(--sliva); }
.vkladki button[aria-selected=true] { background: var(--sliva); color: var(--krem); }
.vkladki .zhdut { background: var(--krasnyy); color: #fff; border-radius: 999px; padding: 0 .45rem; margin-left: .3rem; font-size: .85rem; }
.plitki { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); margin: .75rem 0 1.25rem; }
.plitka { background: #fff; border-radius: 1rem; padding: .9rem 1rem; box-shadow: 0 1px 0 rgba(91,58,94,.06); }
.plitka b { display: block; font-size: 1.7rem; line-height: 1.1; color: var(--sliva-temn); font-variant-numeric: tabular-nums; }
.plitka span { color: var(--sliva-tih); font-size: .9rem; font-weight: 700; }
.tablica-ramka { overflow-x: auto; background: #fff; border-radius: 1rem; }
.tablica { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 46rem; }
.tablica th { position: sticky; top: 0; background: #FFF1DC; text-align: left; padding: .6rem .6rem; font-size: .85rem; color: var(--sliva-tih); }
.tablica td { padding: .55rem .6rem; border-top: 1px solid #F4E8D6; vertical-align: top; font-variant-numeric: tabular-nums; }
.tablica .malo { color: var(--sliva-tih); font-size: .85rem; }
.yarlyk { display: inline-block; font-size: .8rem; font-weight: 800; padding: .1rem .5rem; border-radius: 999px; background: #EFE6F0; color: var(--sliva); white-space: nowrap; }
.yarlyk--da { background: #DDF2DA; color: var(--zelenyy-tekst); }
.yarlyk--zhdet { background: #FFE7C2; color: #8A4B0C; }
.yarlyk--net { background: #FBDCD8; color: #9A2E22; }
.mini { font: inherit; font-size: .85rem; font-weight: 800; border: 0; border-radius: 999px; padding: .35rem .75rem; cursor: pointer; background: var(--krem-2); color: var(--sliva); margin: .1rem; }
.mini--da { background: var(--zelenyy); color: #fff; }
.mini--net { background: #F3C9C3; color: #7E2318; }
.poisk { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.poisk .pole { width: auto; min-width: 14rem; flex: 1; }
.okno-cheka { position: fixed; inset: 0; background: rgba(36, 22, 38, .75); display: grid; place-items: center; z-index: 10; padding: 1rem; }
.okno-cheka img, .okno-cheka iframe { max-width: 96vw; max-height: 86vh; background: #fff; border-radius: .5rem; }
.okno-cheka iframe { width: 90vw; height: 86vh; }
.okno-cheka button { position: absolute; top: 1rem; right: 1rem; }
.stolbiki { display: flex; align-items: flex-end; gap: 3px; height: 7rem; background: #fff; border-radius: 1rem; padding: 1rem; }
.stolbiki i { flex: 1; background: var(--oranzh); border-radius: 3px 3px 0 0; min-height: 2px; }
.dva { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
/* № 1047: вход по паролю, фильтр оплат, техподдержка, карта проекта */
.vhod-parol { display: grid; gap: .5rem; max-width: 22rem; margin: .5rem 0; }
.vhod-parol label { font-weight: 800; color: var(--sliva); }
.filtry { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 .25rem; }
.filtry button { font: inherit; font-weight: 700; border: 2px solid #E9D6BC; background: #fff; color: var(--sliva); border-radius: 999px; padding: .35rem .85rem; cursor: pointer; }
.filtry button[aria-pressed=true] { background: var(--sliva); border-color: var(--sliva); color: var(--krem); }
.tp__shapka { display: flex; flex-wrap: wrap; gap: .35rem .75rem; align-items: baseline; }
.tp__shapka .yarlyk { margin-left: auto; }
.tp__tekst { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.05rem; margin: .6rem 0; }
.tp__otvet { white-space: pre-wrap; background: var(--krem); border-radius: .8rem; padding: .7rem .9rem; margin: .5rem 0; }
.tp__forma { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.tp__forma textarea { flex: 1 1 18rem; min-height: 3rem; resize: vertical; }
.km--est { --km: #3F9A4A; --km-fon: #E6F4E4; }
.km--chast { --km: #D98A1C; --km-fon: #FFF0D6; }
.km--net { --km: #C4523C; --km-fon: #FBE3DD; }
.km-polosa { display: flex; height: .9rem; border-radius: 999px; overflow: hidden; background: var(--krem-2); margin: .75rem 0 .5rem; }
.km-polosa i { background: var(--km); }
.km-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-weight: 700; margin: 0; }
.km-tochka { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--km); margin-right: .35rem; vertical-align: -.05rem; }
.km-put { list-style: none; padding: 0; margin: 1.25rem 0; counter-reset: km; display: grid; gap: 1rem; }
.km-etap { position: relative; background: var(--moloko); border-radius: var(--ugol); box-shadow: var(--ten); padding: 1.1rem 1.1rem 1.1rem 1.25rem; border-left: .4rem solid var(--sliva); }
.km-etap + .km-etap::before { content: ""; position: absolute; left: 1.4rem; top: -1rem; height: 1rem; border-left: 3px dashed #D8C2D9; }
.km-etap h3 { margin: 0; font-size: 1.15rem; color: var(--sliva-temn); }
.km-etap > p { margin: .15rem 0 .7rem; }
.km-etap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.km-punkt { background: var(--km-fon); border-left: .3rem solid var(--km); border-radius: .7rem; padding: .55rem .75rem; display: flex; flex-direction: column; gap: .2rem; }
.km-metka { align-self: flex-start; font-size: .75rem; font-weight: 800; color: #fff; background: var(--km); border-radius: 999px; padding: .05rem .5rem; }
.km-dalshe { margin: 0; padding-left: 1.4rem; display: grid; gap: .6rem; }