@import url("layout.caeacba42f33.css");
@import url("menu.fb817c025ecd.css");
@import url("content.6de760dcddf5.css");
@import url("auth.2ae783802064.css");

/* ==========================================================================
   1. ПЕРЕМЕННЫЕ (VARIABLES)
   ========================================================================== */
:root {
    --grey: #bbbbbb;
    --light-grey: #d1d1d1;
    --black: #1a1a1a;
    --white: #ffffff;
    --blue: #0055A4;
    --light-blue: #007BFF;
    --yellow: #FFD700;
    --red: #E63946;
    --green: #28a745;
    --border: 1px;
}

/* ==========================================================================
   2. БАЗОВЫЕ НАСТРОЙКИ (BASE STYLES)
   ========================================================================== */
html {
    scrollbar-gutter: stable;
    font-size: 15px;
}

* {
    box-sizing: border-box;
    image-rendering: optimizeSpeed;
    border-radius: 5px;
}

body {
    scrollbar-gutter: stable;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;

   
background-color: #f5f5f5;

    
    
    color: var(--black);
    display: flex;
    flex-direction: column;
    min-height: 100vh;

}

/* --- Типографика (Typography) --- */
h1, h2, h3, button {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    
}

/* Логотип остается в ретро-стиле */
.logo, .logo span {
    font-family: 'Press Start 2P', cursive;
    
}

.menu-item-link, .link-text, .search-form input {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
}

/* ==========================================================================
   3. УТИЛИТЫ (UTILITIES)
   ========================================================================== */
/* Отступы */
.m-0 { margin: 0 !important; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mt-0 { margin-top: 0; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }

/* Размеры и отображение */
.w-100 { width: 100%; }
.width-auto { width: auto; min-width: 150px; }
.hidden { display: none !important; }
.flex-grow { flex-grow: 1; }
.text-left { text-align: left; }

/* Цвета текста и статусы */
.red-text { color: var(--red); font-weight: bold; }
.status-active { color: green; }
.status-inactive { color: rgb(224, 71, 0); }
.status-text-new { color: var(--blue); font-weight: bold; }
.status-text-processing { color: #b8860b; font-weight: bold; }
.status-text-blue { color: var(--blue); font-weight: bold; }
.status-text-green { color: green; font-weight: bold; }
.status-text-red { color: red; font-weight: bold; }

/* Цветные рамки */
.border-blue { border-color: var(--blue); }
.border-green { border-color: green; }
.border-red { border-color: var(--red); }
.border-grey { border-color: var(--grey); }

/* Линии разделители */
.cabinet-hr-dashed { margin: 30px 0; border: none; border-top: 2px dashed var(--grey); }
.cabinet-hr-solid-red { margin: 40px 0 20px 0; border: none; border-top: 2px solid var(--red); }

/* ==========================================================================
   4. БАЗОВЫЕ КОМПОНЕНТЫ
   ========================================================================== */

/* --- Карточки --- */
.card {
       
    padding: 10px;
    margin-bottom: 25px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    /* ---
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10.1px);--- */
    

  /* --- Карточки  
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1119' height='932.5' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");

--- */ 
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px; /* Толщина "стеклянной" рамки */
  
  /* Косой градиент с акцентом на белые углы */
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.993) 0%,   /* Яркий белый угол (верх-лево) */
    rgba(255, 255, 255, 0.05) 40%, /* Прозрачная середина */
    rgba(255, 255, 255, 0.479) 60%, 
    rgb(255, 255, 255) 100%  /* Мягкий блик (низ-право) */
  );

  /* Маскировка: оставляем только саму рамку */
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -50;
  pointer-events: none;
}




.card p {
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) {
    .cabinet-settings-card {
        border:0px;
        box-shadow: 0px 0px 0px var(--light-grey);       
    }
    .card {
        border-radius: 10px !important;
    }
}

/*                               
 ▄▄                           
 ██          ██               
 ██▄███▄   ███████   ██▄████▄ 
 ██▀  ▀██    ██      ██▀   ██ 
 ██    ██    ██      ██    ██ 
 ███▄▄██▀    ██▄▄▄   ██    ██ 
 ▀▀ ▀▀▀       ▀▀▀▀   ▀▀    ▀▀ 
                              
                               */
.btn-main {
    font-size: 0.95rem;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    display: inline-block;
    padding: 12px 12px;
    margin-left: auto;
    border: var(--border) solid var(--black);
    cursor: pointer;
    background: white;
    color: black;
    box-shadow: 2px 2px 0px var(--grey);
    width: 100%;
    border-radius: 5px;
    transition: all 0.2s; /* ВОТ ОНО */
}





.btn-main:hover {
    transform: translate(2px, 2px); 
    box-shadow: 0px 0px 0px var(--black);
   
    
}



.back-btn {
    background: var(--grey);
    text-decoration: none;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: auto;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    
}

.btn-action {
    width: auto;
    color: #000000;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    height: auto;
    min-height: 0px;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 5px;
}




.btn-action:hover {
    transform: translate(2px, 2px) ; 
}

.btn-register{
    background:var(--green);
}

.btn-register:hover{
    background:var(--green);
}

.color-grey {
 color:var(--grey);
}
   
.btn-blue { 
    background: var(--blue); 
    color: white; 
    border-radius: 5px !important;
}
.btn-yellow { 
    background: var(--yellow); 
    border-radius: 5px !important;
    color:#000;
}

.btn-yellow:hover { 
    background: var(--yellow); 
    border-radius: 5px !important;
    color:#000;
}

.btn-white{
    background: var(--white); 
    color:var(--black);  ;
    border-radius: 5px !important;
}

.btn-white:hover{
    background: var(--white); 
    color:var(--black);  ;
    border-radius: 5px !important;
}


.btn-grey { background: var(--grey); border-radius: 5px !important;}
.btn-green {background: #ffffff;border-radius: 5px !important;}
.btn-red { 
    background: var(--red); 
    color: white; 
    border: 1px solid #000000; 
    border-radius: 5px !important;
}
.blue-bg { background: var(--blue); color: white; }

.btn-small {
    height: 30px;
    padding: 0 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: auto !important;
    margin: 0 !important;
}

.btn-disabled {
    background: var(--grey) !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.btn-main.btn-action.tab-btn.tab-cab:hover {
    color:#000 !important;

}

.btn-main.btn-action.tab-btn.tab-cab.active:hover {
    color:#ffffff !important;

}

/* feed карточки кнопки */

.btn-main.btn-action.tab-btn.feed-btn {
    
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;   
     
     border:0.5px solid rgb(150, 150, 150) !important;
     border-bottom: none !important;


     background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.993) 0%,   /* Яркий белый угол (верх-лево) */
    rgba(255, 255, 255, 0.05) 40%, /* Прозрачная середина */
    rgba(255, 255, 255, 0.479) 60%, 
    rgb(255, 255, 255) 100%  /* Мягкий блик (низ-право) */
  );
}


.btn-main.btn-action.tab-btn.feed-btn::before {
    border:0px solid white !important;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  padding: 0.5px; /* Толщина "стеклянной" рамки */
  
  /* Косой градиент с акцентом на белые углы */
  background: linear-gradient(
    135deg, 
    rgba(255, 255, 255, 0.993) 0%,   /* Яркий белый угол (верх-лево) */
    rgba(255, 255, 255, 0.05) 40%, /* Прозрачная середина */
    rgba(255, 255, 255, 0.479) 60%, 
    rgb(255, 255, 255) 100%  /* Мягкий блик (низ-право) */
  );

  /* Маскировка: оставляем только саму рамку */
  -webkit-mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  mask: 
     linear-gradient(#fff 0 0) content-box, 
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important; 
  z-index: -50;
}






.btn-main.btn-action.tab-btn.feed-btn:hover {
color:#000 !important;

}

.btn-main.btn-action.tab-btn.feed-btn.tab-btn-profile.active:hover {
color:#ffffff !important;
}


.btn-main.btn-action.tab-btn.feed-btn.active:hover {
color:#ffffff !important;    
}

.btn-main.btn-action.tab-btn.feed-btn {
    transform: translate(0,0);
}
/* кабинет */
.btn-main.btn-action.tab-btn:hover {

    color: #000;

}


@media (max-width: 768px) {
   

    .btn-action {
        width: auto;
        color: #000000;
        padding: 3px 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Inter', sans-serif;
        
        height: auto;
        min-height: 0px;
        text-decoration: none;
        white-space: nowrap;
    }
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- Ссылки (Links) --- */
.link { color: var(--blue); text-decoration: underline; }
.link:hover { color: var(--red); }
.link-cancel { color: var(--red); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; transition: opacity 0.2s; }
.link-cancel:hover { opacity: 0.7; text-decoration: underline; }

/* --- Формы и инпуты (Forms & Inputs) --- */
.input, .file-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    border: 1px solid var(--grey);
    box-sizing: border-box;
    background: var(--white);
}

.bold-label, .block-label, .cabinet-form-label {
    display: block;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    margin-bottom: 5px;
}

.help-text, .cabinet-form-help, .variant-hint {
    font-size: 0.85rem;
    color: var(--black);
    font-family: 'Inter', sans-serif;
    margin-bottom: 10px;
}

.checkbox-label-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label-flex input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--blue);
}

/* --- Изображения (Images) --- */
.img-box {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 2px solid var(--black);
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 40px;
}

.img-box.round { border-radius: 10px; }
.cover-img { width: 100%; height: 100%; object-fit: cover; }

/* --- Системные уведомления (System Messages) --- */
/* --- Системные уведомления (Toast Messages) --- */
.toast-messages-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 350px;
    width: calc(100% - 40px); /* Для мобильных устройств */
}

.toast-message-card {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border: 2px solid var(--black);
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.4;
    
    /* Анимация появления (сверху вниз и проявление) */
    animation: slideInDown 0.5s ease forwards;
    transform-origin: top;
    margin: auto;
}

.toast-message-card.toast-error {
    border-left: 6px solid var(--red);
}

.toast-message-card.toast-success {
    border-left: 6px solid var(--green);
}

.toast-content {
    flex-grow: 1;
}

.toast-close-btn {
    background: transparent;
    border: 1px solid var(--grey);
    color: var(--black);
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    background: #f0f0f0;
    border-color: var(--black);
}

/* Класс, который добавляется скриптом для исчезновения */
.toast-hiding {
    animation: fadeOutUp 0.5s ease forwards;
}

/* Keyframes для анимаций */
@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Адаптивность для мобильных */
@media screen and (max-width: 768px) {
    .toast-messages-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: 100%;
        width: auto;
    }
}

/* --- Таблицы (Tables) --- */
.table-responsive { overflow-x: auto; }
.table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    border: 0.5px solid var(--black);
}
.table thead { background: var(--yellow); }
.table th { border: 2px solid var(--black); padding: 10px; }
.table tbody { background: var(--white); }
.table td { border: 2px solid var(--black); padding: 10px; text-align: center; }
.table tr:border-bottom { border-bottom: 2px solid var(--black); }
.table a.btn-action { text-decoration: none; font-size: 0.9rem; }
.id-cell { font-weight: bold; }

/* --- Попап галереи (Image Popup) --- */
.image-popup-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.popup-content { position: relative; max-width: 90%; text-align: center; }
.popup-img { width: 100%; max-width: 400px; border: 4px solid var(--white); background: white; }
.popup-hint { color: white; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1rem; margin-top: 10px; }

/* ==========================================================================
   5. ГЛОБАЛЬНЫЕ СЕКЦИИ И ПОИСК (GLOBAL SECTIONS & SEARCH)
   ========================================================================== */
.search-form {
    display: flex;
    border: var(--border) solid var(--black);
    box-shadow: 3px 3px 0px var(--grey);
    z-index: 1003;
}

.search-form input {
    border: none;
    padding: 3px;
    outline: none;
    width: 200px;
    z-index: 1001;
}

.search-form button {
    border: none;
    cursor: pointer;
    background: var(--yellow);
    color: white;
    box-shadow: 2px 2px 2px var(--black);
}

.search-form button:hover {
    transform: translate(2px, 2px);
    box-shadow: inset -2px -2px 0 2px grey, inset -1px -1px 0 1px rgb(0, 0, 0);
    z-index: 1300;
}

.home-search-section {
    margin-bottom: 25px;
    
        display: flex;
    flex: 1;
    position: relative;
    border:0.2px solid rgb(202, 202, 202);
    border-radius: 10px;
    margin:10px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       



background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(360,960,455)'%3E%3Cstop offset='0' stop-color='%23EAEAEA'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='2000' height='1666.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");





    padding: 15px;
    position: sticky;
    top: 70px;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-form-flex { display: flex; flex-direction: column; gap: 10px; }
.search-bar-wrapper { 
    display: flex; 
    border: 0px solid var(--black); 
    
    border-radius: 5px; 
}
.search-icon-container { 
   margin-bottom: 25px;
    
        
    position: relative;
    border:0.2px solid rgb(202, 202, 202);
    border-radius: 10px;
    margin:10px ;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       



background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(360,960,455)'%3E%3Cstop offset='0' stop-color='%23EAEAEA'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='2000' height='1666.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");





    padding: 15px;
    position: sticky;
    top: 70px;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.search-input-main { 
    flex-grow: 1; 
    border: none; 
    padding: 10px; 
    font-family: 'Inter', sans-serif; 
    font-size: 1rem; 
    outline: none; 
    width: 100%; 

        display: flex;
    flex: 1;
    position: relative;
    border:0.2px solid rgb(202, 202, 202);
    border-radius: 10px;
    margin:10px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       



background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(360,960,455)'%3E%3Cstop offset='0' stop-color='%23EAEAEA'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='2000' height='1666.7' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.04'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");



}



.search-btn-embed { 
    background-color: #28a745;
    color:#ffffff;
    width: auto; 
    border: none; 
    border: 2px solid var(--black);     
    margin: 1px; 
    box-shadow: none; 
    padding: 0 20px; 
}

.filter-tabs-flex { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-tab-btn { width: auto; margin: 0; padding: 5px 10px; }
.filter-tab-btn.active { background: var(--blue); color: white; }
.filter-tab-btn.inactive { background: var(--white); color: black; }

.feed-title-section { margin-top: 30px; }
.loading-sentinel { height: 50px; margin-top: 10px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 500; }

.user-card-container { display: flex; align-items: center; padding: 15px; }
.user-card-flex { display: flex; align-items: center; gap: 15px; width: 100%; }
.user-card-avatar { 
    width: 100px; 
    height: 100px; 
    object-fit: cover; 
    border: 3px solid var(--black);
    border-radius: 5px; 
}
.user-card-no-avatar {
    width: 100px; height: 100px; background: #eee; border: 3px solid var(--black);
    display: flex; align-items: center; justify-content: center;
    color: #999; font-family: 'Inter', sans-serif; font-size: 0.85rem; text-align: center;
}
.user-card-info { flex-grow: 1; }
.user-card-name { margin: 0 0 10px 0; }
.user-card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.user-card-label { color: #555; font-family: 'Inter', sans-serif; font-size: 1rem; }

/* ==========================================================================
   6. МАГАЗИН И ТОВАРЫ (SHOP & PRODUCTS)
   ========================================================================== */
.shop-sticky-header, .management-top-bar {
    position: sticky;
    top: 70px;
    z-index: 900;
    background-color: #fff;
    justify-content: space-between;
   
   
    padding: 15px 30px;
    border: 1px solid black;
    margin-bottom: 30px;
    
}

.header-cart-btn {
    position: relative;
    background: var(--yellow);
    padding: 3px;
    width: 55px; height: 55px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--black);
    
    text-decoration: none;
    border-radius: 5px;
    margin-left:auto;
}


.btn-main.btn-action.btn-yellow.btn-public-profile {
    margin-right:auto;
}

.header-cart-btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0px var(--white); }
.header-cart-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0px rgba(0, 0, 0, 1); }
.svg-cart { width: 100%; height: 100%; display: block; }
.cart-badge {
    position: absolute; top: 3px; right: 3px;
    background: #e53935; color: white; border: 2px solid #000;
    font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; z-index: 2;
}

.product-list-card { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.product-list-img-wrap { flex-shrink: 0; }
.product-list-img { width: 150px; height: 150px; object-fit: cover; border: 1px solid var(--black); margin: 10px; }
.product-list-no-img {
    width: 150px; height: 150px; background: #eee; border: 3px solid var(--black);
    display: flex; align-items: center; justify-content: center; color: #999; font-family: 'Inter', sans-serif; font-weight: 500;
}
.product-list-info { flex-grow: 1; min-width: 200px; }
.product-title { margin-top: 0; }
a.product-list-actions { margin-top: 15px; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; }
.product-toggle-form { margin: 0; padding: 0; display: inline-block; }

.product-title-link { text-decoration: none; color: var(--black); transition: color 0.1s; display: inline-block; margin-top: 0; margin-bottom: 10px; }
.product-title-link:hover { color: var(--blue); }
.product-desc-preview { font-family: 'Inter', sans-serif; font-size: 0.95rem; color: #444; margin-bottom: 15px; line-height: 1.4; }

/* Детальная карточка товара */
.product-detail-layout { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.product-gallery-section { flex: 1; min-width: 300px; }
.product-main-image { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border: 4px solid var(--black); cursor: pointer; background: var(--white); }
.product-main-image-small { width: 100px; height: 100px; object-fit: cover; border: 3px solid var(--black); cursor: pointer; background: var(--white); }
.product-thumbnails { display: flex; gap: 10px; margin-top: 10px; overflow-x: auto; padding-bottom: 5px; }
.product-thumb { width: 60px; height: 60px; object-fit: cover; border: 2px solid var(--black); cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s; }
.product-thumb.active-thumb, .product-thumb:hover { opacity: 1; border-color: var(--blue); }
.product-info-section { flex: 1; min-width: 300px; }
.product-desc { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.5; white-space: pre-wrap; }

/* Управление товаром (редактирование) */
.image-preview-container { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.preview-img-item { width: 100px; height: 100px; object-fit: cover; border: 3px solid var(--black); cursor: pointer; transition: transform 0.1s; }
.preview-img-item:hover { transform: scale(1.05); }

.variants-management-box { border: 2px dashed var(--grey); padding: 15px; margin-top: 20px; background: #fdfdfd; }
.variant-input-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.variant-input-row input { flex: 1; padding: 8px; border: 2px solid var(--black); font-family: 'Inter', sans-serif; font-size: 1rem; }

/* Корзина и Оформление заказа */
.shop-cart-sticky { position: sticky; top: 70px; z-index: 100; background: white; border-color: var(--blue); margin-bottom: 30px; }
.shop-cart-title { margin-top: 0; color: var(--blue);  }
.cart-list { list-style: none; padding: 0; margin: 0 0 15px 0; }
.cart-item-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px dashed var(--grey); padding: 8px 0; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; }
.cart-qty-controls { display: flex; align-items: center; gap: 10px; margin-right: 20px; }
.qty-btn { height: 25px; width: 25px; padding: 0; line-height: 1; min-width: 25px; background: var(--grey); }
.qty-display { color: var(--red); min-width: 20px; text-align: center; }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-family: 'Inter', sans-serif; font-size: 1.2rem;  }

.checkout-subtitle { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--grey); }
.checkout-layout { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 20px; }
.checkout-form-col { flex: 1; min-width: 300px; }
.checkout-summary-col { flex: 1; min-width: 300px; background: #fafafa; height: fit-content; }
.checkout-field-group { margin-bottom: 15px; }

/* ==========================================================================
   7. ЗАКАЗЫ И ЧАТ (ORDERS & CHAT)
   ========================================================================== */
.order-detail-header { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 20px; gap: 15px; }
.order-info-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.order-info-col { flex: 1; min-width: 250px; }
.order-items-box { background: #f9f9f9; padding: 10px; border: 2px dashed var(--black); margin-bottom: 20px; }
.order-items-list { margin: 0; padding-left: 20px; font-family: 'Inter', sans-serif; font-size: 1rem; }
.order-actions-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; border-bottom: 2px solid var(--black); padding-bottom: 20px; }

.order-card-active { border-color: var(--blue); }
.order-card-processing { border-color: var(--yellow); }
.order-card-completed { border-color: green; }
.order-card-cancelled_by_buyer, .order-card-cancelled_by_seller { border-color: var(--red); }

.chat-container { max-height: 300px; overflow-y: auto; margin-bottom: 15px; padding-right: 10px; }
.chat-msg-wrapper { margin-bottom: 10px; padding: 10px; border: 2px solid var(--black); }
.chat-msg-mine { background: #e6f7ff; }
.chat-msg-theirs { background: #f0f0f0; }
.chat-msg-header { display: flex; justify-content: space-between; font-size: 0.8rem; color: #666; margin-bottom: 5px; }
.chat-msg-text { font-family: 'Inter', sans-serif; font-size: 1rem; word-wrap: break-word; line-height: 1.4; }
.chat-form-area { width: 100%; padding: 10px; font-family: 'Inter', sans-serif; font-size: 1rem; border: 2px solid var(--black); resize: vertical; box-sizing: border-box; }

/* ==========================================================================
   8. БРОНИРОВАНИЕ И РАСПИСАНИЕ (BOOKING & SCHEDULE)
   ========================================================================== */
.booking-flex-row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.slots-wrapper { display: flex; flex-wrap: wrap; gap: 10px; }
.list { font-family: 'Inter', sans-serif; font-size: 1rem; color: var(--blue); padding-left: 20px; }
.summary-box { padding: 15px; border: 2px dashed var(--blue); background: #f9f9f9; }

.slot-btn {
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500;
    background: var(--white); border: 2px solid var(--black);
    padding: 8px 15px; cursor: pointer; transition: all 0.1s;
}
.slot-btn:hover { background: var(--yellow); }
.slot-btn.selected { background: var(--blue); color: white; box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3); }
.slot-btn.booked { background: #e0e0e0; color: #999; cursor: not-allowed; border-color: #ccc; text-decoration: line-through; }
.slot-btn.booked:hover { background: #e0e0e0; }

.booking-detail-header { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-bottom: 20px; gap: 15px; }
.booking-detail-header h1 { margin: 0; }
.booking-detail-info { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.booking-info-column { flex: 1; min-width: 250px; }
.booking-info-title { margin-top: 0; font-size: 1.1rem; }
.booking-comment-box { background: #f0f0f0; padding: 15px; border: 2px dashed var(--black); font-family: 'Inter', sans-serif; font-size: 1rem; }
.booking-cancel-section { margin-top: 30px; border-top: 2px solid var(--black); padding-top: 20px; }

/* Кастомные радиокнопки/чекбоксы (Варианты и Провайдеры) */
.variant-group { margin-bottom: 15px; }
.variant-title { margin-bottom: 5px; font-weight: bold; }
.variant-options { display: flex; gap: 10px; flex-wrap: wrap; }
.variant-option-label { display: inline-block; cursor: pointer; }
.variant-option-label input[type="radio"] { display: none; }
.variant-btn {
    display: inline-block; padding: 5px 15px; background: var(--white);
    border: 1px solid var(--black); font-family: 'Inter', sans-serif;
    font-size: 1rem; font-weight: 500; user-select: none; box-shadow: 2px 2px 0px var(--grey); transition: all 0.1s;
}
.variant-option-label input[type="radio"]:checked + .variant-btn {
    background: var(--blue); color: white; transform: translate(2px, 2px); box-shadow: 0px 0px 0px var(--grey);
}

#id_providers { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin-bottom: 10px; list-style: none; }
#id_providers div, #id_providers li { margin: 0; list-style: none; }
#id_providers label {
    display: inline-block; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500;
    background: var(--white); border: 2px solid var(--black);
    padding: 8px 15px; cursor: pointer; transition: all 0.1s; user-select: none;
}
#id_providers label:hover { background: var(--yellow); }
#id_providers input[type="checkbox"] { display: none; }
#id_providers label:has(input[type="checkbox"]:checked) {
    background: var(--blue); color: white; box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
}

/* Управление расписанием */
.schedule-card { border-color: var(--yellow); }
.schedule-container { display: flex; flex-direction: column; gap: 15px; }
.schedule-row {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 2px dashed var(--grey); padding-bottom: 10px; flex-wrap: wrap; gap: 10px;
}
.day-label { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; width: 150px;  }
.time-inputs { display: flex; align-items: center; gap: 10px; }
.time-inputs input[type="time"] { padding: 5px; font-family: 'Inter', sans-serif; font-size: 1rem; border: 2px solid var(--black); }
.day-off-group { display: flex; align-items: center; gap: 5px; }
.day-off-label { cursor: pointer; font-family: 'Inter', sans-serif; font-size: 1rem; }
.schedule-actions { margin-top: 25px; display: flex; align-items: center; gap: 15px; }

/* Навигация вкладками для списков брони (Tabs) */

.bookings-header { 
    margin-bottom: 20px; 
}

.tabs-nav { 
    display: flex; 
    gap: 5px; 
    flex-wrap: wrap; 
    margin-bottom: 10px; 
    border-bottom: 0px solid var(--black); 
    border-bottom-left-radius: 0px !important;
}



.tab-btn { 
    margin: 0 !important; 
    box-shadow: none !important; 
    background: var(--white); 
    color: var(--black);
    border-color: 1xp solid #000000;
    border-bottom: 1px solid var(--black); 
}

.tab-btn.active { 
    background: var(--blue) !important; 
    color: white !important; 
    border-bottom: none !important; 
    transform: translateY(0px); 
}

/* Фильтры таблиц */
.filter-card { padding: 10px; margin-bottom: 20px; background: #f9f9f9; }
.filter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-input { 
    padding: 8px; 
    font-family: 'Inter', sans-serif; 
    font-size: 1rem; 
    border: 2px solid var(--black);
    flex-grow: 1; 
    border-radius: 5px;
}
.filter-input::placeholder { color: #aaa; }
.filter-select { 
    padding: 8px; 
    font-family: 'Inter', sans-serif; 
    font-size: 1rem; 
    border: 2px solid var(--black); 
    background: white; 
    border-radius: 5px;
}

/* ==========================================
   USER FEED CARD (HOME PAGE)
   ========================================== */
.user-feed-card {
    margin-bottom: 30px;
}

.user-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 0 10px;
    position: relative;
    z-index: 2;
    margin-bottom: 2px;
}

.user-feed-title-box {
    padding-bottom: 1px;
}

.user-feed-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
   
}

.user-feed-uid {
    font-size: 0.6rem;
    color: #888;
    font-family: 'Inter', sans-serif;
    text-transform: lowercase;
    letter-spacing: 1px;
}

.user-feed-tabs {
    margin-bottom: -3px;
    gap: 5px;
    border-bottom: none;
}

.tab-btn-profile {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border-color: rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);
}

.tab-btn-profile.active { 
    background: var(--blue) !important; 
    color: white !important; 
    border-bottom: none !important; 
    transform: translateY(0px); 
}

.tab-btn-set {
    background-color: #ffffff;
    color: rgb(179, 179, 179);
    border-color: rgb(179, 179, 179);
}

/*КАБИНЕТ НАСТРОЙКИ КАРТОЧКИ ВКЛАДКИ*/
.tab-btn-set.active { 
    background: var(--white) !important; 
    color: rgb(0, 0, 0) !important; 
    
    transform: translateY(0px); 
    border-color: #000;
}

.tab-btn-set.tab-btn-profile.active { 
    background: var(--white) !important; 
    color: rgb(0, 0, 0) !important; 
    
    transform: translateY(0px); 
}
 
.feed-card-container {
    margin-top: 0;
    position: relative;
    z-index: 1;
    border-top-right-radius: 0% !important;
    height: 150px;
     
}

.user-feed-content {
    display: flex;
    gap: 15px;
    
    align-items: center;
}

.user-feed-avatar-box {
    
    
    flex-shrink: 0; /* Запрещаем сжиматься блоку с аватаром */
    height: fit-content; /* Чтобы блок не растягивался на все 150px по высоте */
    /* ... твои остальные стили ... */
}


.user-feed-avatar {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 0px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

.user-feed-no-avatar {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--black);
    background: #eee;
    font-size: 0.85rem;
    
}

.user-feed-info {
    flex-grow: 1;
}

.user-feed-message {
    margin: 0 0 15px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.4;
}

.user-feed-message-empty {
    margin: 0 0 15px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #999;
}

.btn-feed-profile {
    font-size: 1.1rem;
    padding: 1px 1px;
}

/* ==========================================
   FEED ITEMS (PRODUCTS, SERVICES, PAGES)
   ========================================== */
.feed-item-card {
    margin-bottom: 20px;
    padding: 15px;
}

.feed-item-flex {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.feed-item-img-box {
    margin-top: 0;
}

.feed-service-img-box {
    border-color: var(--yellow);
}

.feed-item-info {
    flex-grow: 1;
}

.feed-item-category {
    font-size: 0.9rem;
}

.feed-category-service {
    color: #b8860b;
    font-weight: bold;
}

.feed-item-title {
    margin: 5px 0 10px 0;
    
}

.feed-item-desc {
    margin: 0 0 15px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.4;
}

.feed-page-icon-box {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: #f0f0f0;
    border: 1px solid var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feed-error-text {
    color: red;
}

/* ==========================================================================
   9. КАБИНЕТ И ПРОФИЛЬ (CABINET & PROFILE)
   ========================================================================== */
.cabinet-profile-header { display: flex; gap: 20px; align-items: center; margin-bottom: 30px; }

.cabinet-avatar-wrapper {
    flex-shrink: 0;
}

.cabinet-avatar-trigger {
    cursor: pointer;
}

.cabinet-avatar-upload-input {
    display: none;
}

.cabinet-profile-title {
    margin-top: 0;
}

.cabinet-profile-meta {
    font-size: 0.7rem;
    font-family: 'Inter', monospace;
}

.cabinet-profile-meta-muted {
    color: #888;
}

.cabinet-profile-meta-dark {
    color: #000;
}

.cabinet-form-error {
    color: red;
    font-size: 0.8em;
}

.cabinet-help-text-tight {
    margin-top: 5px;
}

.featured-service-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.featured-service-remove-btn {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
}

.featured-service-add-btn {
    margin-top: 8px;
}

.cabinet-inline-icon {
    margin-left: 5px;
    display: inline-flex;
    align-items: center;
}

.cabinet-btn-auto-width {
    width: auto;
}

.feed-builder-tab-toggle {
    margin-left: 5px;
    cursor: pointer;
}

.feed-builder-body-wrap {
    flex-wrap: wrap;
}

.cabinet-form-group-top {
    margin-top: 20px;
}

.cabinet-featured-services-group {
    margin-top: 20px;
    padding: 15px;
    border: 2px dashed var(--blue);
    background: var(--white);
}

.cabinet-featured-services-label {
    color: var(--blue);
}

.cabinet-tab-visible {
    display: block;
}

.cabinet-tab-hidden {
    display: none;
}

.cabinet-avatar-img { 
    width: 100px; 
    height: 100px; 
    object-fit: cover; 
    border: 1px solid var(--black); 
}
.cabinet-avatar-placeholder {
    width: 100px; height: 100px; background: var(--white); border: 3px solid var(--black);
    display: flex; align-items: center; justify-content: center; color: var(--black);
    font-family: 'Inter', sans-serif; text-align: center;
}
.cabinet-profile-info h1 { margin: 0;}
.cabinet-profile-info p { margin: 5px 0 0 0; }
.cabinet-settings-card, .cabinet-activity-card { margin-bottom: 30px; border-top-left-radius: 0px;}
.cabinet-settings-card h2, .cabinet-activity-card h2 { margin-top: 0; }
.cabinet-form-group { margin-bottom: 15px; }

.cabinet-checkbox-wrapper { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    cursor: pointer; 
    border: 2px dashed var(--grey); 
    padding: 10px; margin-bottom: 0px; 
}

.cabinet-button-group { display: flex;  gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
.cabinet-delete-wrapper { text-align: right; }

.cabinet-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.cabinet-header h1 { margin: 0; }
.cabinet-top-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.cabinet-spacer { flex-grow: 1; }
.cabinet-section-title { border-bottom: 2px dashed var(--grey); padding-bottom: 10px; }
.cabinet-modules { margin-bottom: 40px; }
.cabinet-item-card { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; margin-bottom: 15px; }
.cabinet-item-img {
    width: 100px; height: 100px; flex-shrink: 0; border: 2px solid var(--black);
    background: #e0e0e0; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cabinet-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cabinet-item-img span { color: #888; font-family: 'Inter', sans-serif; font-size: 0.9rem; }
.cabinet-item-info { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }

.cabinet-item-info h3 { 
    margin: 0 0 10px 0; 
    font-size: 1.1rem; 
   
}

.cabinet-item-info p { margin: 0 0 5px 0; font-family: 'Inter', sans-serif; font-size: 1rem; }
.cabinet-item-actions { display: flex; gap: 10px; align-items: flex-end; }
.cabinet-item-actions form { margin: 0; }

.profile-showcase-section { margin-top: 30px; border-top: 2px dashed var(--grey); padding-top: 20px; }
.profile-actions { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; margin-top: 15px; }
.profile-no-store-text { color: var(--grey); font-family: 'Inter', sans-serif; font-size: 1rem; margin: 0; }
.creators-container { display: flex; flex-direction: column; gap: 15px; font-family: 'Inter', sans-serif; }
.form-description { margin-top: 0; color: #555; font-family: 'Inter', sans-serif; font-size: 0.95rem; margin-bottom: 20px; }
.form-actions { margin-top: 20px; display: flex; align-items: center; gap: 15px; }
.delete-warning-text { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 600; margin-bottom: 25px; }
.delete-actions { display: flex; align-items: center; gap: 20px; margin-top: 20px; }

/* Яркий жирный плюсик для кнопок добавления */
.svg-plus {
    stroke: rgb(76, 156, 0);
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: middle;
}

/* ==========================================
   FEED CARD BUILDER (CABINET)
   ========================================== */
.feed-builder-container {
    margin-bottom: 30px; 
    max-width: 600px;
}

.feed-builder-tabs {
    justify-content: flex-end; 
    margin-bottom: -3px; 
    border-bottom: none; 
    gap: 5px;
}

.feed-builder-body {
    display: flex; 
    gap: 15px; 
    padding: 15px; 
    background: #fff; 
    border: 2px dashed #999;
    box-shadow: none;
    border-color: #c0c0c0;
}

/* Общие стили для кликабельных блоков внутри карточки-макета */
.feed-builder-box {
    cursor: pointer;
    background: #f8f8f8;
    border: 2px solid #ccc;
    box-shadow: none;
    opacity: 0.4;
    transition: all 0.1s ease-in-out;
}

/* Стили для включенного (active) состояния блоков */
.feed-builder-box.active {
    background: #fff;
    border: 2px solid var(--black);
    opacity: 1;
}

/* Блок аватара в макете */
.feed-builder-avatar {
    width: 80px; 
    height: 80px; 
    padding: 0; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0;
}

/* Блок текстового сообщения в макете */
.feed-builder-msg {
    flex-grow: 1; 
    text-align: left; 
    padding: 10px; 
    min-height: 80px;
}

.feed-builder-placeholder {
    font-family: 'Inter', sans-serif; 
    font-size: 1rem; 
    color: #555;
}

/* ==========================================================================
   10. АДАПТИВНОСТЬ (RESPONSIVE GLOBALS)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .logo { display: none; }
    
    .card {
        padding: 15px !important;
        margin: 0px auto 25px auto !important;
        width: 100% !important;
        max-width: 400px;
        
    }

    .creators-container {
        width: 100%;
    }

    .resumen-block {
        text-align: left;
        padding: 10px;
        border-top: 2px solid var(--black);
        margin-top: 20px;
    }

    .service-image-placeholder,
    .provider-avatar-placeholder {
        max-width: 50%;
        height: auto;
        margin: 10px 0;
    }
}

/* ==========================================================================
   АДАПТИВНОСТЬ КАРТОЧЕК ЛЕНТЫ И КОНСТРУКТОРА (MOBILE FEED & BUILDER)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .user-feed-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }

    .user-feed-tabs,
    .feed-builder-tabs {
        width: 100%;
        justify-content: flex-end;
    }

    .tab-btn {
        padding: 2px 5px;
        font-size: 0.9rem !important;
    }

    .user-feed-avatar,
    .user-feed-no-avatar,
    .feed-builder-avatar {
        width: 100px;
        height: 100px;
    }

    .user-feed-content,
    .feed-builder-body {
        gap: 10px;
    }

    .user-feed-title {
        font-size: 1rem;
    }

    .user-feed-message,
    .user-feed-message-empty,
    .feed-builder-placeholder {
        font-size: 0.95rem;
    }
    
    .feed-builder-msg {
        min-height: 60px;
        padding: 5px 10px;
    }
}

/* ==========================================================================
   АДАПТИВНОСТЬ ЛИЧНОГО КАБИНЕТА (CABINET MOBILE - МАСШТАБИРОВАНИЕ ДЕСКТОПА)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .content-center { padding: 5px !important; }
    
    .content-center h1 { font-size: 0.9rem !important; margin-bottom: 5px !important; line-height: 1.2 !important; }
    .content-center p { font-size: 0.95rem !important; margin: 2px 0 !important; }
    .card p { font-size: 0.95rem !important; }

    .cabinet-profile-header {
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center;
        gap: 10px !important;
        margin-bottom: 15px !important;
        text-align: left !important;
    }

    .cabinet-avatar-img, .cabinet-avatar-placeholder {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0;
    }
    
    .cabinet-avatar-placeholder { font-size: 0.6rem; }
    
    .cabinet-profile-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: center;
    }
    
    .cabinet-profile-info h1 { margin-top: 0 !important; margin-bottom: 3px !important; }
    .cabinet-profile-info span { font-size: 0.6rem !important; margin-left: 0 !important; display: block !important;}

    #cabinet-tabs.tabs-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        margin-bottom: 10px !important;
        padding-bottom: 2px;
    }

    #cabinet-tabs .tab-btn {
        flex: 0 1 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 4px 6px !important;
        font-size: 0.85rem !important;
        text-align: center;
        border-radius: 5px !important;
    }

    .cabinet-settings-card, .cabinet-activity-card,
    .cabinet-card-blue, .cabinet-card-yellow, .cabinet-card-red {
        padding: 10px !important;
        margin: 0 !important;
        border-radius: 5px !important;
        border:1px solid #a0a0a0;
    }

    .cabinet-checkbox-wrapper {
        border: none !important;
        padding: 0 !important;
        gap: 5px !important;
    }
    .cabinet-checkbox-wrapper input { width: 16px; height: 16px;}
    .cabinet-checkbox-wrapper span { font-size: 0.95rem !important; }

    .cabinet-form-label { font-size: 1rem !important; }
    .cabinet-form-label[style*="size:1.3rem"] { font-size: 1rem !important; }
    .input, .file-input, textarea.input {
        font-size: 0.95rem !important;
        padding: 5px !important;
        margin-bottom: 5px !important;
    }
    
    .cabinet-form-help { font-size: 0.8rem !important; margin-bottom: 5px !important;}

    .feed-builder-body {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 10px !important;
        align-items: flex-start;
    }

    .feed-builder-avatar {
        width: 50px !important;
        height: 50px !important;
        font-size: 0.6rem;
        flex-shrink: 0;
    }

    .feed-builder-msg {
        flex-grow: 1;
        text-align: left !important;
        padding: 5px !important;
        min-height: 50px !important;
    }
    
    .feed-builder-placeholder { font-size: 0.65rem !important; }

    .cabinet-button-group {
        display: flex !important;
        flex-direction: row !important;
        width: auto !important;
        gap: 5px !important;
        margin-top: 10px !important;
        justify-content: flex-start !important;
    }

    .cabinet-button-group .btn-main {
        width: auto !important;
        font-size: 0.95rem !important;
        padding: 5px 10px !important;
        border-radius: 5px !important;
    }

    form button.btn-action, .cabinet-delete-wrapper button {
        font-size: 0.95rem !important;
        
        width: auto !important;
        border-radius: 5px !important;
        color: #ffffff;
        border-color: #000000;
    }

    .cabinet-hr-solid-red { margin: 20px 0 10px 0 !important; }
}

/* Фиксированный контейнер для баннера Cookie */
.cookie-banner-fixed {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 600px;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 25px;
    border-radius: 12px;
}

.cookie-content h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--black);
    letter-spacing: 0.5px;
}

.cookie-content p {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #444;
    margin-bottom: 20px;
}

.cookie-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    .cookie-banner-fixed {
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        border-radius: 15px 15px 0 0;
        padding: 20px;
    }

    .cookie-actions {
        flex-direction: column;
    }

    .cookie-actions .btn-main {
        width: 100%;
        text-align: center;
    }
}













/* --- ГЛОБАЛЬНЫЙ ВЫЕЗЖАЮЩИЙ САЙДБАР --- */

/* Перебиваем старые стили (если main-wrapper был гридом или флексом) */
.main-wrapper {
    display: block !important;
}

/* Центрируем основной контент, так как сайдбар больше не занимает место слева */
.content-center {
    margin: 0 auto !important;
    max-width: 800px; /* Можешь подогнать под свой дизайн */
    width: 100%;
    padding: 20px;
}

/* Сайдбар по умолчанию спрятан за левым краем экрана на всех устройствах */
.sidebar-left {
    position: fixed !important;
    top: 0;
    left: -320px; /* Прячем за экран */
    width: 300px !important;
    height: 100vh;
    background: var(--white, #ffffff);
    z-index: 1001; /* Поверх всего */
    transition: left 0.3s ease-in-out;
    box-shadow: 5px 0 15px rgba(0,0,0,0.2);
    overflow-y: auto;
    padding-top: 80px; /* Отступ сверху, чтобы контент не перекрывался шапкой, если шапка fixed */
}

/* Класс, который добавляет твой main.js при клике на бургер */
.sidebar-left.mobile-open {
    left: 0 !important; /* Выезжает на экран */
}

/* Затемнение фона (создается в твоем main.js) */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    
    z-index: 1000; /* Под сайдбаром, но над сайтом */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Убеждаемся, что кнопка меню всегда видна */
.menu-toggle {
    display: inline-block !important; 
}

/* Дефолтное выравнивание в шапке для обертки */
.header-right-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 900px) {
    /* Прячем блок языка и профиля на мобильных */
    .header-right-wrapper {
        display: none; 
        position: absolute;
        top: 100%; /* Выпадает ровно под шапкой */
        right: 10px;
        background: var(--white);
        border: 2px solid var(--black);
        box-shadow: 4px 4px 0px var(--grey);
        padding: 15px;
        flex-direction: column;
        align-items: flex-end;
        z-index: 1000;
        gap: 10px;
    }
    
    /* Класс, который добавляется при клике на 3 точки */
    .header-right-wrapper.show-mobile {
        display: flex;
    }

    /* Показываем 3 точки */
    .mobile-dots-btn {
        display: block !important;
    }

    /* Сжимаем поиск, чтобы помещался на экранах телефона */
    .header-center {
        padding: 5px 10px 0 !important;
    }
}



/* ==========================================================================
   11. STOREFRONT (ВИТРИНА ПРОДАВЦА И КАРТОЧКИ ФИДА)
   ========================================================================== */

/* Общая обертка витрины (ограничиваем ширину) */
.storefront-wrapper {
    max-width: 760px;
    width: 100%;
}

/* Блок 1: Шапка магазина / провайдера */
.storefront-header-block {
    display: flex;
    align-items: center;
    height: 140px;
    gap: 15px;
    width: 100%;
}

/* Блоки 2 и 3: Контейнер для товаров (2 слота) */
.storefront-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}

/* Сама мини-карточка товара (флекс 50% на десктопе, 100% на мобилке) */
.storefront-item-box {
    display: flex;
    flex: 1 1 calc(50% - 10px);
    min-width: 280px; /* Ключевой триггер для мобилок (прыжок на след. строку) */
    height: 140px;
    padding: 10px !important;
    gap: 10px;
    margin-bottom: 0 !important; /* Убираем нижний отступ от стандартного .card */
}

/* Одиночный товар (для прямого поиска), занимает всю ширину */
.single-result-box {
    display: flex;
    width: 100%;
    max-width: 760px;
    height: 140px;
    padding: 10px !important;
    gap: 15px;
    align-items: center;
}

/* Универсальный контейнер для картинок внутри витрин */
.storefront-img-wrapper {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--black);
    border-radius: 5px;
    background: #eee;
    overflow: hidden;
    color: #888;
    font-size: 0.85rem;
    font-weight: 500;
}

.storefront-img-wrapper.round {
    border-radius: 50%;
}

.storefront-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Контейнер для текста с выравниванием кнопки внизу-справа */
.storefront-text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow: hidden;
}

.storefront-title {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.storefront-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Обрезает текст на 3 строке */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.storefront-action {
    align-self: flex-end;
    margin-top: auto; /* Прижимает кнопку к низу */
}

/* Спец-настройка высоты для .feed-card-container, чтобы он тянулся под товары */
.feed-card-container {
    height: auto !important; 
    min-height: 150px;
}






/* Стили для карточек внутри витрин */
.storefront-price { color: var(--green); font-weight: bold; margin-bottom: 5px; }
.storefront-footer-action { width: 100%; text-align: right; margin-top: 5px; }
.btn-padded { padding: 6px 15px !important; }



/* Обновления для главной карточки витрины */
.feed-card-column { display: flex; flex-direction: column; padding: 15px; gap: 15px; }
.storefront-header-responsive { display: flex; width: 100%; align-items: flex-start; gap: 15px; height: auto; min-height: 120px; }
.storefront-avatar { width: 120px; height: 120px; flex-shrink: 0; }
.storefront-avatar-link { display: block; width: 100%; height: 100%; }
.storefront-text-flex { justify-content: flex-start; flex-grow: 1; min-width: 0; }
.storefront-placeholder-title { margin: 0 0 5px 0; font-size: 1.2rem; color: var(--black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.storefront-badge-featured { font-size: 0.75rem; color: var(--blue); font-weight: 700; text-transform: uppercase; }
.storefront-item-empty { opacity: 0.6; background: #e9ecef; }
.storefront-img-empty { background: transparent; border-style: dashed; }
.text-grey { color: #666 !important; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }



/* Стили для результатов одиночного поиска */
.single-box-layout { height: 140px; overflow: hidden; display: flex; box-sizing: border-box; }
.single-box-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.text-truncate-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 5px 0; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.storefront-action-bottom { flex-shrink: 0; margin-top: auto; }
.storefront-action-group { display: flex; gap: 5px; flex-shrink: 0; margin-top: auto; }
.btn-border-black { border: 1px solid var(--black) !important; }
.bg-white { background-color: #fff !important; }
.border-yellow { border-color: var(--yellow) !important; }
.border-blue { border-color: var(--blue) !important; }