/* ЯСНОСТЬ — свои стили. Подключается ПОСЛЕ style.css. Модули и модификаторы style.css не тронуты. */
/* СВОЙ СТИЛЬ КНОПКИ */

.KNOP-1 {
				border: 0px solid #FFFFFF;
				text-decoration: none;
				text-align: center;
				color: #FFF;
				border-radius: 27px;
				padding: .6em 1.1em;
				transition: 0.2s;
				white-space: nowrap;
				background-color: #4C9F99;
				line-height: 2.8em;
}
.KNOP-1:hover {
				background-color: #3E8C86;
				text-decoration: none;
				color: #FFFFFF;
}

.KNOP-2{
				border: 0px solid #CCCCCC;
				text-decoration: none;
				text-align: center;
				color: #FFFFFF;
				background-color: #4C9F99;
				border-radius: 7px;
				padding: 0.95em 1.6em 0.95em 1.6em;
				line-height: 3.8em;
				transition: 0.2s;
				white-space: nowrap;
}
.KNOP-2:hover {
				background-color: #3E8C86;
				text-decoration: none;
				color: #FFFFFF;
}


.KNOP-3 {
				border: 1px solid #4C9F99;
				text-decoration: none;
				text-align: center;
				color: #4C9F99;
				border-radius: 77px;
				padding: 0.57em 1.5em 0.57em 1.5em;
				line-height: 2.8em;
				white-space: nowrap;
				display: inline;
				cursor: pointer;
}
.KNOP-3:hover {
				border: 1px solid #4C9F99;
				text-decoration: none;
				color: #2F7570;
}

.KNOP-4 {
				border: 0px solid #FFFFFF;
				text-decoration: none;
				text-align: center;
				color: #FFF;
				border-radius: 3px;
				padding: .75em 1.2em;
				line-height: 1.7em;
				transition: 0.2s;
				white-space: nowrap;
				background-color: #4C9F99;
				line-height: 2.8em;
}
.KNOP-4:hover {
				background-color: #3E8C86;
				text-decoration: none;
				color: #FFFFFF;
}

.KNOP-5 {
				border: 2px solid #4C9F99;
				text-decoration: none;
				text-align: center;
				color: #4C9F99;
				border-radius: 3px;
				padding: .6em 1.2em;
				line-height: 1.7em;
				transition: 0.2s;
				white-space: nowrap;
				line-height: 2.8em;
}
.KNOP-5:hover {
				background-color: #F6F6F6;
				text-decoration: none;
				color: #4C9F99;
}

.KNOP-6 {
				border: 1px solid #808080;
				text-decoration: none;
				text-align: center;
				color: #2B3C40;
				border-radius: 55px;
				padding: .6em 1.5em .6em 1.0em;
				transition: 0.3s;
				white-space: nowrap;
}
				
.KNOP-6:hover {
				background-color: #F1F1F1;
				text-decoration: none;
				color: #2B3C40;
}

.MARKER-1 {
				border-left-style: solid;
				border-left-width: 5px;
				border-left-color: #4C9F99;
				padding-left: 15px;
				line-height: 1.3em;
}
.CHAST-2 {
				margin: 0px;
				padding: 0px;
				width: 27px;
				height: 27px;
				border-radius: 35px;
				font-size: 0.7em;
				background-color: #4C9F99;
				color: #FFFFFF;
				font-weight: 500;
}
.LN-Z {
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #BFDCD9;
}
.CT-Z {
				color: #4C9F99;
}


/* ВЫСОТА ГЛАВНОГО ЭКРАНА */

.VIS-GE {
				height: calc(100vh - 60px)
}





/* ИКОНКИ */


.ICON-TIME::before {
				content: "";
				display: inline-block;
				width: 16px;
				height: 16px;
				background-image: url('../img/icon-time.png');
				background-size: cover;
				margin-right: 10px;
				vertical-align: -3px}


.ICON-DOST::before {
				content: "";
				display: inline-block;
				width: 16px;
				height: 16px;
				background-image: url('../img/icon-dost.png');
				background-size: cover;
				margin-right: 10px;
				vertical-align: -3px;
}

.ICON-KORZ::before {
				content: "";
				display: inline-block;
				width: 20px;
				height: 20px;
				background-image: url('../img/korzina.png');
				background-size: cover;
				margin-right: 5px;
				vertical-align: -5px;
}

.ICON-OPLATA::before {
				content: "";
				display: inline-block;
				width: 16px;
				height: 16px;
				background-image: url('../img/icon-oplata.png');
				background-size: cover;
				margin-right: 10px;
				vertical-align: -3px;
}

.ICON-VIDEO::before {
				content: "";
				display: inline-block;
				width: 1.7em;
				height: 1.7em;
				background-image: url('../img/icon-video.png');
				background-size: cover;
				margin-right: 0.7em;
				vertical-align: -0.48em;
				margin-left: -1.1em;
}



.KNOP-KORZ{
				border: 0px solid #CCCCCC;
				text-decoration: none;
				text-align: center;
				color: #2B3C40;
				background-color: #E3F0EE;
				border-radius: 37px;
				padding: 0.6em 1.3em ;
				line-height: 3.8em;
				transition: 0.2s;
				white-space: nowrap;
}
.KNOP-KORZ:hover {
				background-color: #D3E7E4;
				text-decoration: none;
				color: #2B3C40;
				}



/* СВОЙ ЦВЕТ ЗАКЛАДКИ */


.TABY > tbody > tr > td li.TABY-AKTIV {
				background-color: #4C9F99;
				color: #FFFFFF;
}


.ZAKL > tbody > tr > td li.TABY-AKTIV {
				color: #2B3C40;
				background-color: #E6F1F6;

}



/* СВОЙ СТИЛЬ ССЫЛКИ В ВЕРХНЕМ МЕНЮ */

.MENU-SSILKA-CH a {
				color: #808080;
				text-decoration: none;
				margin-right: 10px;
}
.MENU-SSILKA-CH a:hover {
				color: #2B3C40;
				text-decoration: none;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #2B3C40;
}

.MENU-SSILKA-CH a.active {
				color: #4C9F99;
}
.MENU-SSILKA-CH a.active:hover {
				color: #2F7570;
				border-bottom-width: 0px;
}



.MENU-SSILKA-B a {
				color: #FFFFFF;
				text-decoration: none;
				margin-right: 10px;
}
.MENU-SSILKA-B a:hover {
				color: #FFFFFF;
				text-decoration: none;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #FFFFFF;
}

/* ССЫЛКИ В ЛИСТИНГАХ */


.STATI-SSILKA a {
				color: #2B3C40;
				
}
.STATI-SSILKA a:hover {
				color: #2B3C40;
				
}

.STATI-SSILKA a:hover H2{
				color: #3E8C86;
	
}

.PROMO-SSILKA a {
				color: #2B3C40;
				cursor: default;
}
.PROMO-SSILKA a:hover {
				color: #2B3C40;
				
}




.LISTING-SSILKA a  {
				color: #2B3C40;
				text-decoration: none;
}
.LISTING-SSILKA a:hover {
				color: #2B3C40;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #CCCCCC;
}

.SSIL-1 {
				color: #3A4A4E;
				text-decoration: none;
}
.SSIL-1:hover {
				color: #2B3C40;
				text-decoration: none;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				border-bottom-color: #A6A6A6;
}

.SSIL-2 {
				color: #FFFFFF;
				text-decoration: none;
				margin-right: 20px;

}

.SSIL-2:hover {
				color: #FFFFFF;
				text-decoration: none;
				border-bottom-color: #FFFFFF;
				border-bottom-style: solid;
				border-bottom-width: 1px;
				
}

.SSIL-3 {
				color: #3A4A4E;
				text-decoration: none;
				line-height: 1;
}
.SSIL-3:hover {
				color: #2B3C40;
				text-decoration: none;
				}


/* СВОЙ ЦВЕТ ФОНА */


.F-6 {
				background: #E6F1F6}



/* СВОЙ ЦВЕТ ТЕКСТА */

.CT-1{
				color: #4C9F99
}

.CT-2{
				color: #4C9F99
}

/* СВОЙ СТИЛЬ КНОПКИ ОТПРАВИТЬ*/

.FORMA table td .Otpravka {
background-color: #4C9F99;
color: #FFF;
}

.FORMA table td .Otpravka:hover {
background-color: #3E8C86;
cursor:pointer
}




@media screen and (max-width:790px) {

.KNOP-6 {
				
				padding: .8em 1.4em;
				
}


.BLOK-KORZ{
				margin: 0px;
				position: fixed;
				bottom: 0px;
				left: 0px;
				display: block;
				z-index: 10000;
				width: 100%;
}




.KNOP-KORZ{
				border: 0px solid #CCCCCC;
				border-radius: 0px;
				padding: 0.45em 0em ;
				line-height: 1.9em;				
				display: block;
				z-index: 10000;
				width: 100%;
}





/* СВОЙ ЦВЕТ ФОНА НА МОБИЛЬНЫХ */

.Fm-6 {
				background-color: #E6F1F6
}



/* СВОЙ ЦВЕТ ТЕКСТА НА МОБИЛЬНЫХ */


.CTm-1{
				color: #4C9F99
}}



/* ============================================================
   ЯСНОСТЬ: светлая холодная гамма (мята, небо, шалфей).
   Только перекраска готовых модификаторов + несколько мелочей.
   ============================================================ */

/* Базовые цвета */
body { color: #33454A; }
a { color: #3E8C86; }
a:hover { color: #2F7570; }
h1, h2, h3 { color: #2B3C40; }
::selection { background: #CFE6E2; }

/* Фоны F-2 … F-4 — очень светлые холодные тона вместо серых */
.F-2 { background-color: #F5F9F8; }
.F-3 { background-color: #E8F1EF; }
.F-4 { background-color: #DCEAE7; }
.KON-1 { border-color: #E1EAE8; }
.LN-1  { border-color: #E1EAE8; }

/* Мягкие подсказки-ярлыки направлений (одна метка на карточке) */
.TEG {
 display: inline-block;
 padding: .1em .85em;
 border-radius: 20px;
 background-color: #E8F1EF;
 color: #3E8C86;
 font-size: .8em;
 font-weight: 500;
 line-height: 1.6;
 white-space: nowrap;
}

/* Кнопки — чуть спокойнее */
.KNOP-1, .KNOP-2, .KNOP-4 { color: #FFFFFF; }
.KNOP-3 { color: #3E8C86; border: 1px solid #A9D2CE; background-color: transparent; }
.KNOP-3:hover { color: #2F7570; border: 1px solid #4C9F99; background-color: #F5F9F8; }

/* Табы */
.TABY > tbody > tr > td li { border-color: #DCEAE7; }
.TABY > tbody > tr > td li:hover { border-color: #C5DEDA; background-color: #F5F9F8; }

.TABY-KONTENT > tbody > tr > td.TABY-AKTIV { background-color: transparent; }
.TABY > tbody > tr > td li { color: #3A4A4E; }
.TABY > tbody > tr > td li.TABY-AKTIV { color: #FFFFFF; }

/* Форма */
.FORMA > tbody > tr > td > form > table > tbody > tr > td input:focus,
.FORMA > tbody > tr > td > form > table > tbody > tr > td select:focus,
.FORMA > tbody > tr > td > form > table > tbody > tr > td textarea:focus { border: 1px solid #4C9F99; }
.FORMA > tbody > tr > td > form > table > tbody > tr > td input,
.FORMA > tbody > tr > td > form > table > tbody > tr > td select,
.FORMA > tbody > tr > td > form > table > tbody > tr > td textarea { border-color: #DCEAE7; }
.FORMA table td .Otpravka { border-radius: 27px; border: 0; padding: .7em 1.8em; }

/* Заголовок аккордеона */
.AKK-VOPROS:after { color: #4C9F99; }

/* Кнопка «наверх» */
.NAVERH-AKTIV { background-color: #E6F1F6; }

/* Мягкий шрифт: на планшетах и узких ноутбуках не мельчит */
@media screen and (min-width: 791px) {
 body { font-size: clamp(15px, 1.18vw, 26px); }
}

/* Мобильные версии перекрашенных фонов */
@media screen and (max-width: 790px) {
 .Fm-2 { background-color: #F5F9F8; }
 .Fm-3 { background-color: #E8F1EF; }
 .Fm-4 { background-color: #DCEAE7; }
}

/* ============================================================
   V2: каталог, квиз, гороскоп, карта дня — только необходимое
   ============================================================ */
.SKRYTO { display: none !important; }

/* Гибкая сетка карточек (фильтрация и сортировка без дыр) */
.SETKA { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; width: 85%; margin: 0 auto 30px; }
.SETKA > .SETKA-YA { display: flex; box-sizing: border-box; padding: 0 .6em 1.2em .6em; }
.SETKA-YA > table { flex: 1 1 auto; }
.SETKA-YA > table > tbody > tr > td { height: 100%; }
.SETKA-YA > table > tbody > tr > td > table { height: 100%; }
.KART img { aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 25%; width: 100%; display: block; }
.KATALOG .SETKA { width: 88%; }

/* Статусы */
.TEG-ON { background-color: #E1F3EA; color: #2F8F5B; }
.TEG-ON:before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .45em; border-radius: 50%; background-color: #3DB37A; vertical-align: 0.05em; }

/* Чипы-фильтры (KNOP-6 из набора) */
.KNOP-6 { display: inline-block; cursor: pointer; padding: .55em 1.2em; margin: 0 .25em .5em .25em; border-color: #C5DEDA; background-color: #FFFFFF; line-height: 1.4; }
.KNOP-6:hover { background-color: #F5F9F8; border-color: #4C9F99; }
.KNOP-6.AKTIV { background-color: #4C9F99; border-color: #4C9F99; color: #FFFFFF; }
.FILTR-KAT > tbody > tr > td li { cursor: pointer; }

/* Подбор эксперта */
.KVIZ .KNOP-6 { margin-bottom: .7em; }

/* Гороскоп */
.GOROSKOP > tbody > tr > td li { cursor: pointer; padding: .35em .8em; }

/* Карта дня */
.KARTA-RUB { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 2px 10px rgba(60, 90, 96, .12); }
.KARTA-RUB:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(60, 90, 96, .2); }

/* Мелочи */
.FORMA > tbody > tr > td > form > table { width: 100%; table-layout: fixed; }
.FORMA > tbody > tr > td > form > table > tbody > tr > td input,
.FORMA > tbody > tr > td > form > table > tbody > tr > td select,
.FORMA > tbody > tr > td > form > table > tbody > tr > td textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.FORMA > tbody > tr > td > form > table > tbody > tr > td input.Chekbox { width: auto; min-width: 0; height: auto; margin-right: .5em; }
.TABY > tbody > tr > td li { line-height: 2.4em; }
html { scroll-behavior: smooth; }


/* Лента категорий: листается пальцем / стрелками */
.LENTA-WRAP { display: flex; align-items: center; width: 100%; max-width: 1200px; margin: 0 auto; }
.LENTA { display: flex; flex: 1 1 0; min-width: 0; width: 0; gap: .55em; overflow-x: auto; overflow-y: hidden; padding: .3em 1.4em .5em 1.4em;
 scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
 -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.2em, #000 calc(100% - 1.2em), transparent 100%);
 mask-image: linear-gradient(to right, transparent 0, #000 1.2em, #000 calc(100% - 1.2em), transparent 100%); }
.LENTA::-webkit-scrollbar { display: none; }
.LENTA .KNOP-6 { flex: 0 0 auto; margin: 0; white-space: nowrap; scroll-snap-align: start; text-decoration: none; }
.LENTA-STR { flex: 0 0 auto; margin: 0; width: 2.4em; height: 2.4em; padding: 0; line-height: 2.2em; font-size: 1.15em; text-align: center; user-select: none; }
.LENTA-HOST { table-layout: fixed; }
.SETKA-3 .KNOP-3 { margin-top: 0; }
@media screen and (max-width: 790px) {
  .LENTA { padding-left: .9em; padding-right: .9em; }
  .KNOP-6.NETm { display: none; }
}

@media screen and (min-width: 791px) and (max-width: 1150px) {
  .SETKA > .SETKA-YA { width: 33.33%; }
  .SETKA { width: 94%; }
}
@media screen and (max-width: 790px) {
  .SETKA { width: 96%; }
  .SETKA > .SETKA-YA { padding: 0 .3em .6em .3em; }
  .KART img { aspect-ratio: 1 / 1; }
  .KNOP-6 { padding: .55em 1em; }
}

/* ============================================================
   КАБИНЕТЫ (клиент / эксперт / администратор): общие компоненты.
   Каркас страниц собран из модулей набора; здесь — только то, чего в модулях нет.
   Цветовые темы областей — в css/kabinet.css, css/ekspert.css, css/admin.css.
   ============================================================ */
body.KAB { background-color: #F5F9F8; }
.KAB-BODY { width: 100%; }
.KAB-MAIN { min-width: 0; padding-left: 1.2em; }
.KAB-SIDE { position: sticky; top: 4.8em; }
.KAB-AREA { text-transform: uppercase; letter-spacing: .08em; }
.KAB-NAV { display: flex; flex-direction: column; gap: .15em; }
.KAB-NAV a { display: block; padding: .6em .9em; border-radius: 8px; color: #3A4A4E; text-decoration: none; font-size: .95em; line-height: 1.3; }
.KAB-NAV a:hover { background-color: #F0F6F5; }
.KAB-NAV a.active { background-color: #E3F0EE; color: #2F7570; font-weight: 500; }
.KAB-N { display: inline-block; min-width: 1.5em; padding: 0 .45em; margin-left: .35em; border-radius: 1em; background-color: #4C9F99; color: #FFFFFF; font-size: .8em; text-align: center; line-height: 1.6; }

.KAB-CH { display: flex; justify-content: space-between; align-items: center; gap: .8em; margin: 0 0 1em 0; flex-wrap: wrap; }
.KAB-CH h3 { font-weight: 500; }
.KAB-ACT { text-align: right; }
.KAB-ACT .KNOP-1, .KAB-ACT .KNOP-3, .KAB-ACT .KNOP-6 { margin-left: .4em; }

.KAB-FLASH { padding: .9em 1.2em; margin: 0 0 1.2em 0; border-radius: 10px; border: 1px solid #C5DEDA; background-color: #EAF5F3; color: #2F5F5A; font-size: .95em; line-height: 1.5; transition: opacity .4s; word-break: break-word; }
.KAB-FLASH-err { background-color: #FBEAE3; border-color: #EBC3B3; color: #9A4A2E; }
.KAB-FLASH-warn { background-color: #FFF6E5; border-color: #EBD9AE; color: #6E5A22; }
.KAB-WARN { color: #B5593A; }

/* статусы (TEG из набора + варианты) */
.TEG-NEW { background-color: #E3F0F8; color: #3F7FA6; }
.TEG-DONE { background-color: #E8EEEC; color: #5A7A76; }
.TEG-OFF { background-color: #EEF0F0; color: #7C8A8A; }
.TEG-WARN { background-color: #FBEAE3; color: #B5593A; }

/* кнопки-отправки в таблицах и карточках */
.KAB-INLINE { display: inline-block; margin: 0 .25em .25em 0; }
.KAB-INLINE button, button.KNOP-1, button.KNOP-3, button.KNOP-6 { font-family: inherit; cursor: pointer; line-height: 1.3; }
.KAB-INLINE button.KNOP-6 { background-color: #FFFFFF; }
.KAB-CHIPS .KNOP-6 { margin-bottom: .4em; }
.KAB-NEG { color: #B5593A; } .KAB-POS { color: #2F8F5B; }

/* таблицы (Tablica из набора + адаптация под телефон) */
.KAB-TBL { overflow-x: auto; }
.KAB-TBL table { width: 100%; border-collapse: collapse; }
.KAB-TBL td { padding: .7em .8em; vertical-align: middle; text-align: left; line-height: 1.4; word-break: break-word; }
.KAB-TBL tr:first-child td { font-weight: 500; color: #3A4A4E; white-space: nowrap; }
.KAB-TBL .KNOP-1, .KAB-TBL .KNOP-3, .KAB-TBL .KNOP-6 { white-space: nowrap; }
.KAB-EMPTY { padding: 1.5em 0; }
.KAB-PAGER .KNOP-6, .KAB-PAGER .KNOP-1 { margin: 0 .15em; padding: .4em .9em; }

/* формы (FORMA из набора) */
.KAB-LBL { display: block; margin: 0 0 .35em 0; font-size: .85em; color: #6B7C80; }
.KAB-HINT { display: block; margin: .35em 0 0 0; font-size: .8em; color: #8A9A9E; line-height: 1.4; }
.KAB-FORMA > tbody > tr > td > form > table > tbody > tr > td { padding-top: .45em; padding-bottom: .45em; }
.KAB-FORMA input[type="file"] { height: auto; padding: .9em 1em; }
.KAB-FORMA input[type="checkbox"], .KAB-FORMA input.Chekbox { width: auto; min-width: 0; height: auto; }
.KAB-FORMA textarea { min-height: 6em; }
.KAB-CHECKS { display: flex; flex-wrap: wrap; gap: .5em .6em; }
.KAB-CHK { display: inline-block; padding: .45em .9em; border: 1px solid #DCEAE7; border-radius: 20px; background-color: #FFFFFF; font-size: .9em; cursor: pointer; }
.KAB-CHK input { margin-right: .4em; }
.KAB-FILTER { display: flex; gap: .6em; flex-wrap: wrap; margin: 0 0 1.2em 0; }
.KAB-FILTER input, .KAB-FILTER select { flex: 1 1 14em; height: 3.2em; padding: 0 1em; border: 1px solid #DCEAE7; border-radius: 8px; background-color: #FFFFFF; font-family: inherit; font-size: .95em; }
.KAB-FILTER button { flex: 0 0 auto; }
.KAB-ROW3 { display: grid; grid-template-columns: 3fr 1fr 1fr; gap: .6em; }
.KAB-DAY { display: grid; grid-template-columns: 11em 1fr auto 1fr; gap: .6em; align-items: center; }
.KAB-DAYN { font-size: .95em; }
.KAB-PHOTO { display: block; width: 9em; border-radius: 10px; border: 1px solid #DCEAE7; }

/* плитки показателей */
.KAB-STATS { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; margin: 0 0 1.2em 0; }
.KAB-STAT { display: flex; min-width: 0; }
.KAB-STAT > table { flex: 1 1 auto; }
.KAB-STAT > table > tbody > tr > td { height: 100%; }
.KAB-STAT > table > tbody > tr > td > table { height: 100%; }
.KAB-STATV { line-height: 1.2; word-break: break-word; }
.KAB-STAT table table td { padding: .15em 1.1em .15em 1.1em; }

/* карточки-сведения */
.KAB-KV { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: .9em 1.4em; }
.KAB-KV span { display: block; font-size: .8em; color: #8A9A9E; margin-bottom: .15em; }
.KAB-KV b { font-weight: 500; word-break: break-word; }
.KAB-MINIS { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 1em; }
.KAB-MINI { display: flex; gap: .9em; align-items: flex-start; }
.KAB-MINI img { width: 4.6em; height: 5.6em; object-fit: cover; object-position: 50% 20%; border-radius: 8px; flex: 0 0 auto; }
.KAB-MINI-L img { width: 7em; height: 8.5em; }
.KAB-REPLY { margin-top: .8em; padding: .8em 1em; border-left: 3px solid #A9D2CE; background-color: #F5F9F8; border-radius: 0 8px 8px 0; }
.KAB-NOTE { background-color: #EAF5F3; }

/* переписка */
.KAB-CHAT { max-height: 22em; overflow-y: auto; padding: .3em .2em; margin-bottom: 1em; }
.KAB-MSG { max-width: 82%; margin: 0 0 .7em 0; padding: .7em 1em; border-radius: 12px 12px 12px 4px; background-color: #F0F6F5; font-size: .95em; line-height: 1.5; word-break: break-word; }
.KAB-MSG-ME { margin-left: auto; border-radius: 12px 12px 4px 12px; background-color: #E3F0EE; }
.KAB-MSG-H { margin-bottom: .25em; font-size: .78em; color: #8A9A9E; }

/* администратор: очередь и диаграмма */
.KAB-QUEUE { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: .8em; }
.KAB-QUEUE a { display: block; padding: 1em; border: 1px solid #E1EAE8; border-radius: 10px; text-decoration: none; color: #6B7C80; }
.KAB-QUEUE a b { display: block; font-size: 1.8em; font-weight: 400; color: #8A9A9E; }
.KAB-QUEUE a.KAB-Q-ON { border-color: #A9D2CE; background-color: #F0F8F7; }
.KAB-QUEUE a.KAB-Q-ON b { color: #3E8C86; }
.KAB-BARS { display: flex; align-items: flex-end; gap: .5em; height: 9em; padding-top: .5em; }
.KAB-BAR { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.KAB-BAR i { display: block; width: 70%; background-color: #8CC5C0; border-radius: 4px 4px 0 0; }
.KAB-BAR span { margin-top: .3em; font-size: .7em; color: #8A9A9E; }

/* вход и регистрация */
.KAB-AUTHBG { padding: 2.5em 0 4em 0; }
.KAB-AUTHBOX { margin: 0 auto; }
.KAB-AUTH .KAB-FLASH { margin-top: .5em; }

@media screen and (max-width: 790px) {
  .KAB-BODY { box-sizing: border-box; padding: 0 .8em; }
  .KAB-MAIN { padding-left: 0; }
  .KAB-SIDE { position: static; margin-bottom: 1em; }
  .KAB-AREA { display: none; }
  .KAB-SIDE, .KAB-SIDE table { table-layout: fixed; width: 100%; }
  .KAB-NAV { flex-direction: row; overflow-x: auto; gap: .35em; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .2em; width: 0; min-width: 100%; }
  .KAB-NAV::-webkit-scrollbar { display: none; }
  .KAB-NAV a { flex: 0 0 auto; white-space: nowrap; border: 1px solid #DCEAE7; border-radius: 20px; background-color: #FFFFFF; }
  .KAB-NAV a.active { border-color: #4C9F99; }
  .KAB-ACT { text-align: left; margin-bottom: .8em; }
  .KAB-ACT .KNOP-1, .KAB-ACT .KNOP-3, .KAB-ACT .KNOP-6 { margin: 0 .4em .3em 0; }
  .KAB-TBL table, .KAB-TBL tbody, .KAB-TBL tr, .KAB-TBL td { display: block; width: 100%; box-sizing: border-box; }
  .KAB-TBL tr:first-child { display: none; }
  .KAB-TBL tr { padding: .6em 0; border-bottom: 1px solid #E1EAE8; }
  .KAB-TBL td { display: flex; justify-content: space-between; align-items: flex-start; gap: 1em; padding: .35em 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .KAB-TBL td:before { content: attr(data-l); flex: 0 0 38%; text-align: left; color: #8A9A9E; font-size: .85em; }
  .KAB-TBL td[data-l=""]:before { display: none; }
  .KAB-TBL td[data-l=""] { justify-content: flex-start; flex-wrap: wrap; text-align: left; }
  .KAB-STATS { grid-template-columns: 1fr 1fr; gap: .7em; }
  .KAB-ROW3 { grid-template-columns: 1fr; }
  .KAB-DAY { grid-template-columns: 1fr 1fr; }
  .KAB-DAYN { grid-column: 1 / -1; }
  .KAB-DAY span { display: none; }
  .KAB-MSG { max-width: 92%; }
  .KAB-AUTHBG { padding: 1.2em 0 3em 0; }
}

/* Статус «разговаривает» и SEO-текст */
.TEG-WAIT { background-color: #FBF1DE; color: #A5772A; }
.SEO-TEXT h2, .SEO-TEXT h3 { margin: 1.2em 0 .5em; }
.SEO-TEXT p { margin: 0 0 .9em; line-height: 1.6; }