.field-thumb_tag img,
.field-webp_thumb img,
.field-banner_600_tag img,
.field-thumb_p img{
    width: 100px;
}
.field-thumb div div a img{width: 200px;}
.flex-container {display: unset;}
img { max-width: 100%; }
.articles-main > p:not(:last-child),
.articles-block:not(:last-child) { margin-bottom: 24px; }
.articles-main { padding-bottom: 75px; }

.djn-dynamic-form-articles-customservicescar:hover, .djn-dynamic-form-articles-childgenservices:hover{
    outline: 2px solid #808080;
    position: relative;
}
@media screen and (max-width: 767px) {
  .articles-main { padding-bottom: 50px; }
}
#id_status, #id_group, #id_region, #id_alias_status{border: 1px solid;border-radius: 4px;}
#id_group{min-height: 250px;}
.save-employee-button{border: 1px solid;padding: 4px 18px;border-radius: 4px;background-color: #6d6b6b;color: white;}
.main-content,
.admin-content {
    max-width: 1200px;
    margin: 0 auto;
    min-height: 600px;
    margin-bottom: 20px;
}
.btn-delete-block-danger{
    display: block;
    border-radius: 4px;
    border: 1px solid;
    padding: 4px;
    margin: 4px;
    margin-bottom: 50px;
}
input, #services_fields {
    border: 1px solid #c2c2c2;
}

.button-login-container {
  width: 100%;
  max-width: 200px;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 8px;
  text-align: center;
  border-radius: 6px;
  background-color: #d70c17;
  text-decoration: none;
  color: white;
}

.button-login {
    color: black;
    text-decoration: none;
}

.breadcrumbs-adm {
    height: 40px;
    background-color: #c2c2c2;
    padding: 6px;
    margin-bottom: 20px;
}

.breadcrumbs-adm a {
    color: black;
}

.img-list-auto {
    width: 200px;
}

.head-row {
    border-bottom: 2px solid;
}

.unit_row {
    border-bottom: 1px solid #c2c2c2;
}

.admin-content p {
    margin-bottom: 10px;
}

.span-link {}

.span-link-active {
    border: 2px solid red;
    padding: 2px;
    border-radius: 4px;
}

.button_add_art {
    text-decoration: none;
    border: 1px solid;
    border-radius: 4px;
    padding: 4px;
    color: black;
    background-color: aliceblue;
    float: right;
}

#q-search,
#id-q-search {
    width: 100%;
}

.searsh-container {
    position: absolute;
    right: 200px;
    width: 800px;
    border: 1px solid;
    top: -45px;
    padding: 2px;
    border-radius: 4px;
}

.search-frame {
    border: 1px solid;
    position: absolute;
    width: 99.4%;
    background-color: #fff;
    padding: 5px;
    z-index: 100;
    display: none;
}

.item-result:hover {
    background-color: #dcdadadd;
    cursor: pointer;
}

.item-result a {
    color: black;
    text-decoration: none;
}

.img-art-block {
    text-align: center;
}

.articles-block:hover {
    outline: 2px solid #ff0000;
    position: relative;
}

.thumbnail-block {
    border: 1px solid;
    padding: 4px;
    margin-bottom: 4px;
    border-radius: 4px;
    position: relative;
}

.lock-button {
    position: absolute;
    right: 4px;
    top: 2px
}

.cart-row:hover .edit-block {
    opacity: 1;
    transition: 1s;
    position: relative;
}

.edit-block {
    position: absolute;
    right: 0;
    bottom: 0;
    /*display: block;
    opacity:0;*/
}

#id_codevalue,
#id_name,
#id_title,
#id_page_name,
#id_url,
#id_description,
#id_h1 {
    /* width: 60%; */
}

.search-serv-button {
    position: relative
}

.search-serv-button-img {
    position: absolute;
    width: 22px;
    height: 22px;
    display: block;
    top: -123px;
    left: 60px;
    border: 1px solid;
    padding: 1px;
    border-radius: 2px;
}

.search-serv-button {
    position: relative
}

.search-serv-button-img {
    position: absolute;
    width: 26px;
    height: 26px;
    display: block;
    top: -98px;
    left: 60px;
    border: 1px solid;
    padding: 1px;
    border-radius: 4px;
    background-color: aliceblue;
}

#services_fields {
    margin-left: 30px;
}

.searsh-serv-container {
    position: absolute;
    left: 86px;
    width: 860px;
    border: 1px solid;
    top: -98px;
    padding: 2px;
    border-radius: 2px;
    background: #f0f0ff;
}

.search-services-section {
    position: relative;
    height: 50px;
}

.search-services-sect {
    position: absolute;
    right: 200px;
    width: 800px;
    border: 1px solid;
    top: 0px;
    padding: 2px;
    border-radius: 4px;
}

.search-services-add {
    position: absolute;
    right: 0px;
    top: 4px
}

.cart-hide-row {
    position: absolute;
    top: -56px;
}

.cart-row-services {
    position: relative;
}

.flex-container .vTextField {
    width: 60%;
}

.dynamic-childcard_set:hover {
    outline: 2px solid #f66161;
    outline-style: auto;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
}

.popup {
    background-color: #fff;
    padding: 20px;
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.ck.ck-content {
    min-height: 160px;
}

.flip-list-move {
    transition: transform 0.5s;
}

.no-move {
    transition: transform 0s;
}

.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}

.list-group {
    min-height: 20px;
}

.list-group-item {
    cursor: move;
}

.ph-list .photo-uploaded {
    cursor: default;
}

.list-group-item i {
    cursor: pointer;
}

.list-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.photo-uploaded {
    border-radius: 8px;
    overflow: hidden;
    cursor: move;
    border: 1px solid #ccc;
}

.photo-uploaded__pic {
    height: 170px;
}

.photo-uploaded__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-uploaded__inputs {
    padding: 10px;
}

.photo-uploaded__inputs input {
    width: 100%;
}

.photo-uploaded__inputs label {
    display: block;
    font-size: 14px;
}

.photo-uploaded__bottom {
    display: flex;
    border-top: 1px solid #ccc;
}

.photo-uploaded__bottom button {
    border: none;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    background: transparent;
}

.photo-new {
    position: relative;
    height: 60px;
    border-radius: 5px;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.photo-new:hover {
    background-color: #f5f5f5;
}

.photo-new input {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
}

.ph-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.contents {
    position: absolute;
    width: 500px;
    right: 10px;
    bottom: 10px;
    box-shadow: 0 0 12px 0 rgba(41, 41, 41, .22);
    background: var(--color-white);
    padding: 16px;
    max-height: calc(100vh - 200px);
    overflow-y: scroll;
}

.contents::-webkit-scrollbar {
    height: 6px;
    width: 4px;
    background: #fff;
}

.contents::-webkit-scrollbar-thumb {
    background: #393812;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

.contents::-webkit-scrollbar-corner {
    background: #000;
}

.contents__item:not(:last-child) {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ccc;
}

.contents__item._h3 {
    padding-left: 30px;
}

.contents__empty {
    padding-right: 30px;
}

.contents-wrapper {
    position: fixed;
    z-index: 999;
    width: 100%;
    max-width: 1200px;
    height: 2px;
    left: 50%;
    translate: -50% 0;
    bottom: 20px;
}

.contents-wrapper._fixed {
    position: absolute;
    bottom: 0;
}

.contents-toggler {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    background-color: #fff;
    background-image: url('../icons/icon-contents.png');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 0 12px 0 rgba(41, 41, 41, .22);
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}

.contents-toggler._closer {
    background-image: url('../icons/icon-closer.png');
}

.contents__item-remove,
.contents__item-reset {
    cursor: pointer;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.contents__item-remove {
    background-image: url('../icons/icon-show.png');
}

.contents__item-reset {
    background-image: url('../icons/icon-hide.png');
}

.contents__item-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contents__item-title {
    line-height: 1.2;
    height: 25px;
    display: flex;
    align-items: center;
}

.contents__item-input {
    display: block;
    width: 100%;
    height: 25px;
}

.contents__item._hidden>* {
    opacity: 0.4;
    pointer-events: none;
}

.contents__item._hidden .contents__item-reset {
    opacity: 1;
    pointer-events: all;
}

.articles-block {
    position: relative;
}

.articles-block .edit-block {
    opacity: 0;
}

.articles-block:hover .edit-block {
    opacity: 1;
}

.article-block__input {
    display: block;
    width: 100%;
}

.admin-content .articles-block p {
    margin-bottom: 0;
}

.admin-content .subtitle-h2-s__wrapper,
.admin-content .content-important {
    margin-top: 0;
}

.articles-block .request-tooltip__social,
.articles-block .defaultButton {
    pointer-events: none;
}

.article-block-wrapper ul {
    list-style: none;
    margin: 10px 0;

    li {
        padding-left: 22px;
        position: relative;
        margin-bottom: 6px;

        &::before {
            content: "";
            position: absolute;
            background: var(--color-main);
            transform: translateY(-40%);
            border-radius: 50%;
            height: 6px;
            width: 6px;
            z-index: 1;
            top: 50%;
            left: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.new-admin-list {
    position: relative;
}

.popup__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

label._highlight {
    border: 2px solid red;
    padding: 0 3px;
}

.ck-content ul {
    padding-left: 2rem;
}

.my-list-news input[type="text"] {
    width: 100%;
}
.search-container {
    position: relative;
    max-width: 100%;
    margin: 20px auto;
}

.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    display: none;
}

.search-result-item {
    padding: 10px;
    cursor: pointer;
}

.search-result-item:hover {
    background-color: #f0f0f0;
}

.no-results {
    padding: 10px;
    color: #999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.pagination-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 5px;
}

.pagination-link {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
    font-size: 16px;
    color: #417690;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.pagination-current {
    padding: 10px 15px;
    border: 1px solid #417690;
    border-radius: 5px;
    background-color: #417690;
    color: white;
    font-size: 16px;
    cursor: default;
}
.article-header {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.publish-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 0px;
}

.publish-button {
    background-color: #add8e6;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.publish-button:hover {
    background-color: #1e90ff;
}

.button-link-article {
    padding: 2px 10px;
    background-color: #add8e6;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    border-radius: 2px;
    transition: background-color 0.3s ease;
}

.button-link-article:hover {
    background-color: #1e90ff;
    color: white;
}

.publish-article-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #add8e6; /* Светло-голубой фон */
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.9em;
    display: none;
    z-index: 1000;
    transition: opacity 0.3s ease;
}
.old-article-container {
    max-width: 100%;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    word-wrap: break-word;
}
.old-article-container img,
.old-article-container video,
.old-article-container iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.old-article-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.old-article-container p,
.old-article-container h1,
.old-article-container h2,
.old-article-container h3 {
    max-width: 100%;
    margin: 0;
}

.error-summary {
    border: 1px solid red;
    background-color: #fdd;
    padding: 10px;
    margin-bottom: 15px;
}

.error-summary ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.error-summary li {
    color: red;
    font-weight: bold;
}

/* ============================================================= */
/* Стили для страницы списка услуг (Vue-версия)                  */
/* ============================================================= */

/* --- Таблица --- */
.sl-table {
    width: 100%;
    font-size: 14px;
    table-layout: fixed;
    border-collapse: collapse;
}

.sl-table thead {
    position: sticky;
    /* top выставляется динамически из JS (services-list-app.js) */
    top: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.sl-th {
    border-bottom: 2px solid #333;
    padding: 6px 4px;
    text-align: left;
    font-size: 12px;
    vertical-align: bottom;
}

.sl-th-name {
    width: 30%;
}

.sl-th-flag {
    width: 3%;
    text-align: center;
}

.sl-th-carousel-group {
    width: 40%;
    padding: 0;
}

/* Строка 1 заголовка карусели — кнопки управления */
.sl-th-carousel-controls {
    padding: 4px 6px;
    text-align: center;
    border-bottom: none;
}

.sl-carousel-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sl-carousel-controls-info {
    font-size: 11px;
    color: #888;
    font-weight: 400;
    white-space: nowrap;
}

/* Строка 2 заголовка карусели — названия колонок */
.sl-th-carousel-label {
    text-align: center;
    padding: 4px 2px;
    font-size: 11px;
    font-weight: 500;
    cursor: grab;
    user-select: none;
    min-width: 80px;
}

.sl-th-carousel-label:active {
    cursor: grabbing;
}

.sl-td-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-td-flag {
    text-align: center;
}

/* ============================================================= */
/* Колонка дочерних услуг + popover                              */
/* ============================================================= */

.sl-td-children-cell {
    position: relative;
}

.sl-children-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #e3f2fd;
    color: #1565c0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.sl-children-badge:hover,
.sl-children-badge-active {
    background: #417690;
    color: #fff;
    box-shadow: 0 2px 8px rgba(65, 118, 144, 0.3);
}

.sl-children-popover {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    width: 320px;
    max-height: 400px;
    overflow: hidden;
    margin-top: 4px;
}

.sl-children-popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

.sl-children-popover-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.sl-children-popover-loading,
.sl-children-popover-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.sl-children-popover-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}

.sl-children-popover-list li {
    margin: 0;
    border-bottom: 1px solid #f5f5f5;
}

.sl-children-popover-list li:last-child {
    border-bottom: none;
}

.sl-children-popover-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
    transition: background 0.1s;
}

.sl-children-popover-link:hover {
    background: #f5f5f5;
}

.sl-children-popover-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-children-popover-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.sl-children-popover-price {
    color: #888;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sl-td-cell {
    text-align: center;
    padding: 4px 2px;
}

/* --- Карусель (заголовок) --- */
.sl-carousel-header {
    display: flex;
    align-items: center;
    gap: 0;
    user-select: none;
    cursor: grab;
    padding: 4px 0;
}

.sl-carousel-header:active {
    cursor: grabbing;
}

.sl-carousel-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    background: #f8f8f8;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s;
}

.sl-carousel-btn:hover:not(:disabled) {
    background: #e0e0e0;
}

.sl-carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.sl-carousel-labels {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.sl-carousel-label {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* --- Бейджи уровней качества контента (0-5) --- */
/* --- Бейджи уровней контента (страница редактирования услуги) --- */
.sl-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    margin: 0 1px;
    vertical-align: middle;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.sl-level-1 { background-color: #f44336; }
.sl-level-2 { background-color: #ffc107; color: #333; }
.sl-level-3 { background-color: #8bc34a; }
.sl-level-4 { background-color: #4caf50; }
.sl-level-5 { background-color: #42a5f5; }

/* --- Контент: бейджи ячеек (true/false/null) --- */
.sl-content-badge {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
}

.sl-content-true {
    background-color: #4caf50;
}

.sl-content-false {
    background-color: #f44336;
}

.sl-content-null {
    background-color: #bdbdbd;
}

.sl-cell-empty {
    color: #ccc;
    font-size: 12px;
}

.sl-td-parts {
    text-align: left;
    padding: 4px 8px;
}

.sl-parts-text {
    font-size: 12px;
    color: #333;
    line-height: 1.3;
}

.sl-td-parts-clickable {
    cursor: pointer;
    transition: background 0.15s;
}
.sl-td-parts-clickable:hover {
    background: #e8f0fe;
}

/* --- Попап редактирования запчастей --- */
.sl-parts-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sl-parts-popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
    width: 660px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sl-parts-popup-header {
    padding: 14px 20px;
    border-bottom: 1px solid #ddd;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sl-parts-popup-header .close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    line-height: 1;
    padding: 0 4px;
}
.sl-parts-popup-header .close-btn:hover {
    color: #333;
}
.sl-parts-popup-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.sl-parts-popup-footer {
    padding: 12px 20px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.sl-parts-popup-footer button {
    padding: 7px 18px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.sl-parts-popup-footer .btn-save {
    background: #417690;
    color: #fff;
    border-color: #417690;
}
.sl-parts-popup-footer .btn-save:hover {
    background: #356580;
}
.sl-parts-popup-footer .btn-save:disabled {
    opacity: 0.6;
    cursor: default;
}
.sl-parts-popup-footer .btn-cancel {
    background: #f8f8f8;
    color: #333;
}
.sl-parts-popup-footer .btn-cancel:hover {
    background: #e8e8e8;
}

/* dual-listbox */
.sl-dual-listbox {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.sl-dual-listbox-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sl-dual-listbox-col label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.sl-dual-listbox-search {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0;
    border-bottom: none;
    outline: none;
}
.sl-dual-listbox-search:focus {
    border-color: #79aec8;
}
.sl-dual-listbox-list {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    overflow-y: auto;
    min-height: 220px;
    max-height: 340px;
    background: #fff;
}
.sl-dual-listbox-item {
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-dual-listbox-item:hover {
    background: #e8f0fe;
}
.sl-dual-listbox-item.selected {
    background: #79aec8;
    color: #fff;
}
.sl-dual-listbox-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 2px;
}
.sl-dual-listbox-controls button {
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f8f8f8;
    cursor: pointer;
    color: #333;
}
.sl-dual-listbox-controls button:hover {
    background: #e0e0e0;
}

.sl-dual-listbox-item-reorder {
    display: flex;
    align-items: center;
    gap: 4px;
}
.sl-dual-listbox-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sl-dual-listbox-arrows {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.sl-arrow-btn {
    padding: 0 4px;
    font-size: 10px;
    line-height: 1;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f5f5f5;
    cursor: pointer;
    color: #555;
}
.sl-arrow-btn:hover:not(:disabled) {
    background: #ddd;
    color: #333;
}
.sl-arrow-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* --- Легенда уровней качества --- */
.sl-legend-title {
    font-weight: 600;
    color: #333;
}

.sl-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* --- Панель контент-режима: сайт + табы типа контента --- */
.sl-content-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 13px;
}

.sl-content-site-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sl-content-site-select label {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.sl-content-site-select select {
    padding: 3px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
}

.sl-content-tabs {
    display: inline-flex;
    gap: 2px;
}

.sl-content-tabs button {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sl-content-tabs button:hover {
    background: #e8e8e8;
    border-color: #999;
}

.sl-content-tab-active {
    background: #e3f2fd !important;
    border-color: #64b5f6 !important;
    color: #1565c0 !important;
    font-weight: 600;
}

.sl-content-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
}

.sl-applicability-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #555;
}

.sl-content-legend {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #555;
}

/* --- Skeleton (загрузка ячейки) --- */
.sl-cell-skeleton {
    display: inline-block;
    width: 32px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: sl-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes sl-skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Анимация подсветки (flash) --- */
.sl-highlight-flash {
    animation: sl-flash-border 2s ease-out;
}

@keyframes sl-flash-border {
    0%   { outline: 3px solid #f44336; outline-offset: -1px; background-color: rgba(244, 67, 54, 0.08); }
    30%  { outline: 3px solid #f44336; outline-offset: -1px; background-color: rgba(244, 67, 54, 0.08); }
    100% { outline: 3px solid transparent; outline-offset: -1px; background-color: transparent; }
}

/* --- Toolbar (поиск + экспорт) --- */
.sl-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.tabs-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tabs-nav button {
    padding: 10px 14px;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: #f5f5f5;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -2px;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.tabs-nav button:hover {
    background: #e9ecef;
    color: #333;
}
.tabs-nav button.tab-active {
    background: #fff;
    color: #417690;
    border-color: #dee2e6;
    border-bottom-color: #fff;
    font-weight: 600;
}
/* Таб «Отображение» — синий оттенок */
.tabs-nav button.tab-display {
    background: #e8f0fe;
    color: #1a56db;
}
.tabs-nav button.tab-display:hover {
    background: #d0e2fc;
    color: #1a4fc0;
}
.tabs-nav button.tab-display.tab-active {
    background: #dbeafe;
    color: #1a56db;
    border-color: #93b8f0;
    border-bottom-color: #dbeafe;
}
.tab-panel { display: none; }
.tab-panel.tab-panel-active { display: block; }

/* --- Subtabs (домены) --- */
.subtabs-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.subtabs-nav button {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #c2c2c2;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}
.subtabs-nav button.subtab-active {
    border-color: #417690;
    background: #e7f1ff;
    color: #234b5d;
    font-weight: 600;
}

/* --- Display accordion (как в админке услуг) --- */
.gen-accordion-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gen-accordion-item {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #fafafa;
}
.gen-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}
.gen-accordion-header:hover { background: #f0f0f0; }
.gen-accordion-header.gen-accordion-header-open { background-color: #ddd; }
.gen-accordion-header .gen-name { flex: 1; }
.seo-status-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}
.seo-status-dot.seo-yes { background: #4caf50; }
.seo-status-dot.seo-no  { background: #f44336; }
.se-content-indicator {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    line-height: 16px;
    white-space: nowrap;
}
.se-ci-yes { background-color: #c8e6c9; color: #2e7d32; }
.se-ci-no  { background-color: #ffcdd2; color: #c62828; }
.display-slider-body {
    padding: 10px 16px;
    background: #fafafa;
    border-left: 3px solid #ddd;
    border-right: 3px solid #ddd;
    font-size: 13px;
}
.display-slider-body a { color: #417690; text-decoration: none; }
.display-slider-body a:hover { text-decoration: underline; }
.display-no-seo { color: #999; font-style: italic; }
.display-link-row { margin-bottom: 5px; }
.display-link-label { font-weight: 500; color: #555; }

/* ==========================================================================
   Вкладка "Отображение" (копия стилей из админки услуг)
   ========================================================================== */
.display-loading-bar {
    padding: 12px 0;
    font-size: 13px;
    color: #888;
}

.sub-tabs-nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 0 6px;
    border-bottom: 1px solid #e0e0e0;
}
.sub-tabs-nav button {
    padding: 6px 14px;
    border: 1px solid #d0d7de;
    border-radius: 20px;
    background: #f6f8fa;
    color: #555;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.sub-tabs-nav button:hover {
    background: #eaeef2;
    border-color: #b8bfc6;
}
.sub-tabs-nav button.sub-tab-active {
    background: #417690;
    color: #fff;
    border-color: #417690;
    font-weight: 600;
}
.sub-tab-panel { display: none; }
.sub-tab-panel.sub-tab-panel-active { display: block; }

/* Кнопка «Открыть на сайте» в табе «Отображение» (staff + админка услуг) */
.ssc-public-page-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #1a4d6e;
    background: linear-gradient(180deg, #e8f1f8 0%, #d8e6f2 100%);
    border: 1px solid #8eb0c9;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
.ssc-public-page-btn:hover {
    color: #0f3650;
    background: linear-gradient(180deg, #ddeaf5 0%, #ccdfea 100%);
    border-color: #7599b5;
}
.ssc-public-page-btn--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    /* Важно: оставляем pointer-events, чтобы работал tooltip (title),
       но сам клик недоступен, потому что "disabled" вариант рендерится как <span>, а не <a>. */
    pointer-events: auto;
}
.ssc-display-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.ssc-display-head__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* ===== Индекс посадочных (ServiceModelLandingIndex) ===== */
.site-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.site-tab {
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #333;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
}

.site-tab--active {
    border-color: #1976d2;
    color: #1976d2;
    font-weight: 600;
}

.ssc-landing-index-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ssc-landing-index-table th,
.ssc-landing-index-table td {
    border-bottom: 1px solid #eee;
    padding: 8px 10px;
    vertical-align: top;
}

.ssc-landing-index-table code {
    font-size: 12px;
}

/* SEO Content Preview blocks */
.seo-content-block {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 12px;
    background: #fff;
}
.seo-content-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f7f8fa;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 6px 6px 0 0;
    flex-wrap: wrap;
    gap: 6px;
}
.seo-content-block__title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
}
.seo-content-count {
    font-weight: 400;
    color: #888;
}
.seo-content-block__actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.seo-content-block__body {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #444;
}
.seo-content-empty {
    color: #999;
    font-style: italic;
    font-size: 13px;
}
.seo-field-row {
    margin-bottom: 3px;
    word-break: break-word;
}
.seo-field-label {
    font-weight: 600;
    color: #555;
    margin-right: 4px;
}

/* ChildCard preview */
.seo-child-card {
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fafbfc;
}
.seo-child-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
    gap: 4px;
}
.seo-child-card__meta {
    font-size: 12px;
    color: #888;
}
.seo-child-card__actions {
    display: flex;
    gap: 4px;
}
.seo-child-card__body { padding: 6px 10px; }
.seo-child-card__title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 2px;
}
.seo-child-card__text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* Media thumbs */
.seo-media-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.seo-media-thumb {
    width: 150px;
    text-align: center;
}
.seo-thumb-img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #f5f5f5;
}
.seo-thumb-placeholder {
    width: 150px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px dashed #ccc;
    background: #fafafa;
    font-size: 28px;
    color: #bbb;
}
.seo-thumb-caption {
    font-size: 11px;
    color: #888;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Buttons: align to services admin display */
.btn-sm {
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    transition: background 0.15s, border-color 0.15s;
}
.btn-sm:hover { background: #f0f0f0; border-color: #aaa; }
.btn-outline { background: #fff; }
.btn-primary { background: #417690; color: #fff; border-color: #417690; }
.btn-primary:hover { background: #356580; }
.btn-danger-text { color: #d9534f; }
.btn-danger-text:hover { background: #fff0f0; border-color: #d9534f; }

.display-preview {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
}
.display-preview-empty {
    color: #888;
    font-style: italic;
}
.display-preview-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed #eee;
}
.display-preview-row:last-child { border-bottom: none; }
.display-preview-label {
    color: #666;
    font-weight: 600;
    font-size: 12px;
}
.display-preview-text {
    color: #222;
    font-size: 13px;
    line-height: 1.35;
    word-break: break-word;
}
.display-preview-images {
    grid-column: 2 / 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.display-preview-thumb {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    background: #f0f0f0;
    cursor: zoom-in;
}

.sl-toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/* --- Modal (для быстрых действий в списке услуг) --- */
.sl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sl-modal {
    width: min(720px, 96vw);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.sl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e6e6e6;
}

.sl-modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.sl-modal-close {
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
}
.sl-modal-close:hover { color: #000; }

.sl-modal-body {
    padding: 14px 16px;
}

.sl-modal-row {
    margin-bottom: 12px;
}

.sl-modal-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: #333;
}

.sl-modal-input,
.sl-modal-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

.sl-modal-inline {
    display: flex;
    gap: 10px;
}

.sl-modal-hint {
    margin-top: 6px;
    color: #888;
    font-size: 12px;
}

.sl-modal-error {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #ffe7ea;
    border: 1px solid #f2b5be;
    color: #8a1f2b;
    font-size: 13px;
}

.sl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e6e6e6;
    background: #fafafa;
}

.sl-modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 6px;
    border: 1px solid #c2c2c2;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}

.sl-modal-btn:hover:not(:disabled) {
    background: #f5f5f5;
}

.sl-modal-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.sl-modal-btn-primary {
    border-color: #417690;
    background: #417690;
    color: #fff;
}
.sl-modal-btn-primary:hover:not(:disabled) {
    background: #356580;
}

.sl-modal-btn-secondary {
    background: #fff;
    color: #333;
}

/* ==========================================================================
   Попапы редактирования CustomPageSeoEntry (переиспользуются в staff-админке)
   ========================================================================== */
.content-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* важно: ниже .modal-overlay (lightbox) */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.content-popup {
    width: min(1100px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 14px 16px;
}

.content-popup h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
}

.content-popup__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

/* ==========================================================================
   Staff (/main/staff/services/...): popups must be centered
   ========================================================================== */
#staff-services-content-app .content-popup-overlay {
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #c2c2c2;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
}
.btn-sm:disabled { opacity: 0.7; cursor: wait; }
.btn-sm.btn-primary {
    border-color: #417690;
    background: #417690;
    color: #fff;
}
.btn-sm.btn-primary:hover:not(:disabled) { background: #356580; }
.btn-sm.btn-outline:hover:not(:disabled) { background: #f5f5f5; }

.popup-media-item {
    display: grid;
    grid-template-columns: 120px 1fr 36px 36px;
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fafafa;
    margin-bottom: 10px;
}
.popup-media-item__thumb {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 6px;
    background: #eee;
}
.popup-media-item__thumb-placeholder {
    width: 120px;
    height: 90px;
    border-radius: 6px;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 22px;
}
.popup-media-item__fields input,
.popup-media-item__fields textarea,
.popup-media-item__fields select {
    width: 100%;
    margin-bottom: 6px;
    padding: 8px 10px;
    border: 1px solid #c2c2c2;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.popup-media-item__drag-handle,
.popup-media-item__remove {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
}
.popup-media-item__remove {
    border-color: #f2b5be;
    background: #ffe7ea;
    color: #8a1f2b;
    font-size: 18px;
    line-height: 1;
}

.popup-upload-area {
    position: relative;
    margin-top: 10px;
    padding: 14px;
    border: 2px dashed #c2c2c2;
    border-radius: 8px;
    background: #fff;
    color: #666;
    font-size: 13px;
    text-align: center;
}
.popup-upload-area input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.field-error { border-color: #dc3545 !important; }
.field-error-msg { color: #b02a37; font-size: 12px; margin: -2px 0 6px; }
.video-validation-summary { background: #fff3cd; border: 1px solid #ffe69c; padding: 10px 12px; border-radius: 8px; margin-bottom: 10px; }

/* --- confirm modals --- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    /* как в админке услуг: поверх content-popup-overlay (lightbox должен быть сверху) */
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-box {
    width: min(520px, 96vw);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 14px 16px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}
.modal-btn-cancel,
.modal-btn-primary,
.modal-btn-danger {
    padding: 9px 14px;
    border-radius: 6px;
    border: 1px solid #c2c2c2;
    background: #fff;
    cursor: pointer;
}
.modal-btn-primary {
    border-color: #417690;
    background: #417690;
    color: #fff;
}
.modal-btn-danger {
    border-color: #dc3545;
    background: #dc3545;
    color: #fff;
}

/* --- toast --- */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    min-width: 300px;
    max-width: 450px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    color: #fff;
    font-size: 14px;
    /* как в админке услуг */
    z-index: 9999;
    transition: opacity 0.4s ease, transform 0.4s ease;
    opacity: 1;
    transform: translateY(0);
}
.toast-notification.toast-hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}
.toast-notification.toast-success { background-color: #28a745; }
.toast-notification.toast-error { background-color: #dc3545; }
.toast-notification .toast-close {
    float: right;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    margin-left: 12px;
    line-height: 1;
}

/* --- Lightbox (минимальный набор для попапа фото) --- */
.lightbox {
    position: relative;
    width: min(1100px, 96vw);
    height: min(820px, 90vh);
    background: rgba(10, 10, 12, 0.96);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.45);
    overflow: hidden;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: stretch;
}
.lightbox__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-width: 0;
}
.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0,0,0,0.2);
}
.lightbox__placeholder {
    color: #ddd;
    font-size: 14px;
}
.lightbox__caption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
}
.lightbox__counter {
    position: absolute;
    top: 12px;
    left: 16px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.4);
}
.lightbox__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 28px;
    line-height: 40px;
    cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,0.16); }
.lightbox__nav {
    border: none;
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox__nav:hover { background: rgba(255,255,255,0.10); }
.lightbox__nav:disabled { opacity: 0.3; cursor: default; }

/* ==========================================================================
   OVERRIDES: Popups in "Отображение" must match services admin
   (copied from `service_edit_page.html` styles)
   ========================================================================== */
.content-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 40px;
    overflow-y: auto;
}
.content-popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-width: 800px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
}
.content-popup h3 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #333;
}
.content-popup .form-group { margin-bottom: 14px; }
.content-popup .form-group label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
}
.content-popup .form-group input[type="text"],
.content-popup .form-group textarea,
.content-popup .form-group select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}
.content-popup .form-group textarea {
    min-height: 80px;
    resize: vertical;
}
.content-popup__footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #eee;
}
.sortable-ghost {
    opacity: 0.4;
    background: #e6f0ff;
}
.popup-media-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 6px;
    background: #fafbfc;
}
.popup-media-item__thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #ddd;
    flex-shrink: 0;
}
.popup-media-item__thumb-placeholder {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
    border-radius: 3px;
    background: #f5f5f5;
    font-size: 20px;
    color: #bbb;
    flex-shrink: 0;
}
.popup-media-item__fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.popup-media-item__fields input,
.popup-media-item__fields textarea {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
}
.popup-media-item__fields select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}
.popup-media-item__fields input.field-error,
.popup-media-item__fields textarea.field-error {
    border-color: #d9534f;
    box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.25);
}
.popup-media-item__fields .field-error-msg {
    color: #d9534f;
    font-size: 11px;
    margin-top: 1px;
}
.popup-media-item__fields label.field-error .file-error-hint { color: #d9534f; }
.video-validation-summary {
    background: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 10px;
    color: #721c24;
    font-size: 13px;
}
.popup-media-item__remove {
    cursor: pointer;
    color: #d9534f;
    font-size: 18px;
    border: none;
    background: none;
    padding: 2px 6px;
    flex-shrink: 0;
}
.popup-media-item__remove:hover { color: #c9302c; }
.popup-media-item__drag-handle {
    cursor: grab;
    color: #666;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
}
.popup-media-item__drag-handle:active { cursor: grabbing; }
.popup-upload-area {
    border: 2px dashed #ccc;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    color: #888;
    font-size: 13px;
    position: relative;
    cursor: pointer;
    margin-top: 8px;
    transition: border-color 0.2s;
}
.popup-upload-area:hover { border-color: #417690; }
.popup-upload-area input[type="file"] {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.confirm-delete-body {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* select внутри модалок (например "Копировать контент на другой сайт") */
.modal-box select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 16px;
    background: #fff;
}
/* --- Поиск --- */
.sl-search-container {
    position: relative;
    flex: 1;
    max-width: 600px;
}

/* --- Кнопка экспорта XLSX --- */
.sl-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid #417690;
    border-radius: 5px;
    background: #417690;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, opacity 0.2s;
}
.sl-export-btn:hover:not(:disabled) {
    background: #356580;
}
.sl-export-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Спиннер внутри кнопки */
.sl-export-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sl-spin 0.7s linear infinite;
}
@keyframes sl-spin {
    to { transform: rotate(360deg); }
}

.sl-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #c2c2c2;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.sl-search-input:focus {
    border-color: #417690;
    outline: none;
}

.sl-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #c2c2c2;
    border-top: none;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sl-search-result-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.sl-search-result-item:last-child {
    border-bottom: none;
}

.sl-search-result-item:hover {
    background-color: #f0f4ff;
}

.sl-search-loading,
.sl-search-no-results {
    padding: 10px 12px;
    color: #999;
    font-size: 14px;
}

/* ============================================================= */
/* Переключатель вида таблицы + фильтр по марке                  */
/* ============================================================= */

.sl-view-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

.sl-view-btn {
    padding: 7px 18px;
    border: 1px solid #c2c2c2;
    background: #f8f8f8;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sl-view-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.sl-view-btn:nth-child(2) {
    border-radius: 0;
    border-left: none;
}

.sl-view-btn:nth-child(3) {
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.sl-view-btn:hover {
    background: #e8e8e8;
}

.sl-view-btn-active {
    background: #417690;
    color: #fff;
    border-color: #417690;
}

.sl-view-btn-active:hover {
    background: #356580;
}

.sl-mark-filter {
    padding: 7px 12px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
    margin-left: 12px;
    min-width: 180px;
}

/* ============================================================= */
/* Бейджи применимости генераций                                 */
/* ============================================================= */

.sl-app-badge {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    vertical-align: middle;
}

/* Белый — не заполнено */
.sl-app-0 {
    background-color: #fff;
    border-color: #ccc;
}

/* Зелёный — универсальная */
.sl-app-1 {
    background-color: #4caf50;
    border-color: #388e3c;
}

/* Синий — явно указана */
.sl-app-2 {
    background-color: #2196f3;
    border-color: #1976d2;
}

/* Красный — явно исключена */
.sl-app-3 {
    background-color: #f44336;
    border-color: #d32f2f;
}

/* Чёрный — исключена (универс.) */
.sl-app-5 {
    background-color: #212121;
    border-color: #000;
}

/* ============================================================= */
/* Кликабельные квадратики применимости                          */
/* ============================================================= */

.sl-app-clickable {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.sl-app-clickable:hover {
    transform: scale(1.25);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.4);
}

/* ============================================================= */
/* Попап быстрого изменения применимости                         */
/* ============================================================= */

.sl-popup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sl-applicability-popup {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 420px;
    max-width: 95vw;
    overflow: hidden;
}

.sl-applicability-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #fafafa;
}

.sl-applicability-popup-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.sl-popup-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.sl-popup-close:hover {
    color: #333;
}

.sl-applicability-popup-body {
    padding: 20px;
}

.sl-applicability-popup-info {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.7;
}

.sl-applicability-popup-info div {
    margin-bottom: 2px;
}

.sl-app-badge-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

.sl-applicability-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-app-action-btn {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 10px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.sl-app-action-btn > .sl-app-badge-inline {
    margin-top: 3px;
}

.sl-app-action-btn:hover {
    background: #f5f5f5;
    border-color: #bbb;
}

.sl-app-action-btn.active {
    border-color: #2196f3;
    background: #e3f2fd;
    font-weight: 600;
}

.sl-app-action-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.sl-app-action-allowed:hover {
    border-color: #4caf50;
    background: #e8f5e9;
}

.sl-app-action-excluded:hover {
    border-color: #f44336;
    background: #ffebee;
}

.sl-app-action-raw:hover {
    border-color: #9e9e9e;
    background: #f5f5f5;
}

.sl-applicability-popup-saving {
    text-align: center;
    color: #999;
    font-size: 13px;
    margin-top: 12px;
}

/* Бейдж типа услуги в попапе */
.sl-app-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}
.sl-app-type-universal {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.sl-app-type-specific {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Пояснительный текст в попапе */
.sl-applicability-popup-hint {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #5d4037;
    margin-bottom: 16px;
}

/* Подпись внутри кнопок действий */
.sl-app-action-hint {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-top: 2px;
}

.sl-app-action-btn.active .sl-app-action-hint {
    color: #666;
}

/* ============================================================= */
/* Попап статистики контента                                     */
/* ============================================================= */

.sl-stats-btn {
    margin-left: 8px;
}

.sl-content-stats-popup {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    padding: 0;
    min-width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sl-content-stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.sl-content-stats-body {
    padding: 20px;
    overflow-y: auto;
}

.sl-content-stats-loading {
    text-align: center;
    color: #999;
    padding: 40px 0;
    font-size: 14px;
}

.sl-content-stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.sl-content-stats-table th,
.sl-content-stats-table td {
    padding: 8px 14px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.sl-content-stats-table th {
    background: #f5f5f5;
    font-weight: 600;
    color: #555;
    position: sticky;
    top: 0;
}

.sl-content-stats-table th:first-child,
.sl-content-stats-table td:first-child {
    text-align: left;
    white-space: nowrap;
}

.sl-stats-level-cell {
    font-weight: 500;
}

.sl-stats-value-cell {
    font-variant-numeric: tabular-nums;
    min-width: 80px;
}

.sl-stats-has { color: #2e7d32; }
.sl-stats-missing { color: #c62828; }
.sl-stats-no-landing { color: #757575; }

.sl-stats-totals-row {
    background: #f5f5f5;
    font-weight: 600;
}

/* ============================================================= */
/* Кнопка и попап быстрого перехода к модельному ряду            */
/* ============================================================= */

.sl-jump-btn {
    background: #e3f2fd !important;
    border-color: #90caf9 !important;
    font-size: 14px !important;
    color: #1565c0 !important;
}

.sl-jump-btn:hover:not(:disabled) {
    background: #bbdefb !important;
}

.sl-jump-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
}

.sl-jump-popup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
    width: 340px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sl-jump-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.sl-jump-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.sl-jump-close {
    border: none;
    background: none;
    font-size: 22px;
    color: #888;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.sl-jump-close:hover {
    color: #333;
}

.sl-jump-list {
    overflow-y: auto;
    padding: 6px 0;
}

.sl-jump-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    text-align: left;
    transition: background 0.15s;
}

.sl-jump-item:hover {
    background: #f0f4ff;
}

.sl-jump-item-active {
    background: #e3f2fd;
    font-weight: 600;
}

.sl-jump-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-jump-item-count {
    flex-shrink: 0;
    margin-left: 12px;
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

/* ============================================================= */
/* Двухстрочные подписи генераций в карусели                     */
/* ============================================================= */

.sl-carousel-label-gen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
}

.sl-gen-lineup {
    font-size: 9px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-gen-name {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-gen-years {
    font-size: 9px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================= */
/* Toggle-переключатель (ползунок) для universal                 */
/* ============================================================= */

.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin: 8px 0;
}

.toggle-switch-track {
    position: relative;
    width: 48px;
    height: 26px;
    background: #ccc;
    border-radius: 13px;
    transition: background-color 0.3s;
    flex-shrink: 0;
}

.toggle-switch-track.active {
    background: #4caf50;
}

.toggle-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: left 0.3s;
}

.toggle-switch-track.active .toggle-switch-thumb {
    left: 25px;
}

.toggle-switch-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.toggle-switch-label-sub {
    font-size: 12px;
    color: #888;
    margin-left: 4px;
}

/* ============================================================= */
/* Попап управления генерациями модельного ряда (три колонки)     */
/* ============================================================= */

.lineup-gen-popup-body {
    display: flex;
    gap: 16px;
    margin: 16px 0;
    min-height: 200px;
}

.lineup-gen-column {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.lineup-gen-column-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
}

.lineup-gen-column.col-raw .lineup-gen-column-title {
    color: #666;
}

.lineup-gen-column.col-allowed {
    background: #f1f8e9;
    border-color: #a5d6a7;
}

.lineup-gen-column.col-allowed .lineup-gen-column-title {
    color: #2e7d32;
}

.lineup-gen-column.col-excluded {
    background: #fce4ec;
    border-color: #ef9a9a;
}

.lineup-gen-column.col-excluded .lineup-gen-column-title {
    color: #c62828;
}

.lineup-gen-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 4px;
    transition: background-color 0.15s;
}

.lineup-gen-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.lineup-gen-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.lineup-gen-item label {
    cursor: pointer;
    flex: 1;
}

/* Индикатор «N из M» для модельного ряда */
.lineup-progress {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 11px;
    color: #888;
}

.lineup-progress-bar {
    display: inline-flex;
    gap: 2px;
}

.lineup-progress-segment {
    width: 14px;
    height: 6px;
    border-radius: 2px;
    background-color: #e0e0e0;
}

.lineup-progress-segment.filled-allowed {
    background-color: #4caf50;
}

.lineup-progress-segment.filled-excluded {
    background-color: #f44336;
}

/* Кнопка «детали» для модельного ряда */
.btn-lineup-details {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    background: #f8f8f8;
    color: #555;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s;
    margin-left: 4px;
}

.btn-lineup-details:hover {
    background: #e0e0e0;
    color: #333;
}

/* Генерации из исходного списка (не обработаны) */
.raw-gen-item {
    background: #f5f5f5;
    border-left: 3px solid #bdbdbd;
    opacity: 0.75;
}

.raw-gen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #bdbdbd;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    margin-right: 4px;
    flex-shrink: 0;
}

.raw-gen-name {
    color: #999 !important;
    font-style: italic;
}

/* --- Пресеты на странице списка услуг --- */
.sl-preset-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
}
.sl-preset-label {
    font-weight: 600;
    white-space: nowrap;
}
.sl-preset-select {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-width: 200px;
}
.sl-preset-manage-link {
    margin-left: 8px;
    font-size: 12px;
    color: #417690;
    text-decoration: none;
    white-space: nowrap;
}
.sl-preset-manage-link:hover {
    text-decoration: underline;
}
.sl-preset-separator {
    margin: 0 10px;
    color: #ccc;
    font-size: 16px;
}
.sl-preset-bar .sl-mark-filter {
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}
.sl-preset-bar .sl-mark-filter:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- Двигатели: разделитель блока жидкостей --- */
.engine-fluids-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 2px solid #ddd;
}

.admin-regulation-disabled {
    opacity: 0.9;
}

.admin-regulation-input-disabled,
.admin-regulation-disabled input:disabled,
.admin-regulation-disabled textarea:disabled {
    background: #f2f3f5 !important;
    color: #7a7f87 !important;
    border-color: #d0d4d9 !important;
    cursor: not-allowed !important;
}