/* Жидкое стекло: единый материал поверхностей.
   Подключается последним и меняет только материал — геометрию, отступы
   и раскладку задают предыдущие слои. Светлая и тёмная темы равноправны.

   Материал собирается из трёх частей:
   1) полупрозрачная заливка (--lg-fill), сквозь неё виден фон приложения;
   2) размытие с усилением насыщенности (--lg-blur) — «толщина» стекла;
   3) верхний световой кант (inset-блик) и мягкая тень — преломление края.

   Без backdrop-filter (старые браузеры) слой отключается целиком:
   поверхности остаются непрозрачными и читаемыми. */

:root{
 --lg-fill:rgba(255,255,255,.52);
 --lg-fill-strong:rgba(255,255,255,.68);
 --lg-fill-soft:rgba(255,255,255,.36);
 --lg-stroke:rgba(255,255,255,.58);
 --lg-stroke-strong:rgba(255,255,255,.75);
 --lg-sheen:rgba(255,255,255,.60);
 --lg-shadow:0 2px 8px rgba(18,28,48,.05),0 12px 32px rgba(18,28,48,.07);
 --lg-shadow-raised:0 4px 12px rgba(18,28,48,.07),0 20px 48px rgba(18,28,48,.11);
 --lg-shadow-pop:0 24px 70px rgba(12,20,34,.22);
 --lg-blur:blur(26px) saturate(180%);
 --lg-blur-soft:blur(16px) saturate(160%);
 --lg-blur-deep:blur(40px) saturate(190%);
}
:root[data-theme="dark"]{
 --lg-fill:rgba(146,170,208,.17);
 --lg-fill-strong:rgba(152,176,214,.25);
 --lg-fill-soft:rgba(138,162,200,.10);
 --lg-stroke:rgba(255,255,255,.20);
 --lg-stroke-strong:rgba(255,255,255,.30);
 --lg-sheen:rgba(255,255,255,.28);
 --lg-shadow:0 2px 8px rgba(0,0,0,.26),0 14px 36px rgba(0,0,0,.34);
 --lg-shadow-raised:0 4px 14px rgba(0,0,0,.32),0 22px 52px rgba(0,0,0,.44);
 --lg-shadow-pop:0 28px 80px rgba(0,0,0,.6);
}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){

/* --- Фон приложения. Прежде здесь лежали четыре цветных пятна под размытием:
   в панели, открытой весь день, цвет должен приходить от данных, а не от
   подложки. Остался один сдвиг тона внутри того же нейтрального — он даёт
   глубину сверху вниз и не окрашивает поверхности. --- */
body{
 background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#ffffff),var(--bg));
 background-attachment:fixed;
}

/* --- Плоскости: панели, карточки, таблицы, всплывающие слои --- */
.panel,.stat-card,.module-card,.seller-widget,.seller-row,.seller-metric,
.settings-category,.rule-editor,.keyword-condition,.delivery-entry,
.bulk-preview,.simple-pool-scroll,
.plan-card,.chart-card,.proxy-box,.balance-mini,
.feature-card,.step-card,.shot-card,.faq-item,.price-card,
.toast,.notification-popup,.chart-tooltip{
 background:var(--lg-fill);
 border:1px solid var(--lg-stroke);
 box-shadow:inset 0 1px 0 var(--lg-sheen),var(--lg-shadow);
 backdrop-filter:var(--lg-blur);
 -webkit-backdrop-filter:var(--lg-blur);
}
.stat-card,.module-card,.panel,.settings-category,.chart-card{border-radius:var(--radius-lg)}

/* Вложенные поверхности не наслаивают размытие: стекло на стекле мутнеет. */
.panel .panel,.module-card .panel,.settings-category .rule-editor,
.panel .bulk-preview,.panel .keyword-condition,.modal .panel{
 background:var(--lg-fill-soft);
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 box-shadow:inset 0 1px 0 var(--lg-sheen);
}

@media(hover:hover){
 .panel:hover,.stat-card:hover,.module-card:hover,.seller-widget:hover{
  box-shadow:inset 0 1px 0 var(--lg-stroke-strong),var(--lg-shadow-raised);
  border-color:var(--lg-stroke-strong);
 }
}

/* --- Диалоги: самый толстый слой, под ним затемнение с размытием --- */
.modal{
 background:var(--lg-fill-strong);
 border:1px solid var(--lg-stroke-strong);
 box-shadow:inset 0 1px 0 var(--lg-sheen),var(--lg-shadow-pop);
 backdrop-filter:var(--lg-blur-deep);
 -webkit-backdrop-filter:var(--lg-blur-deep);
}
.modal::backdrop{
 background:rgba(10,17,29,.34);
 backdrop-filter:blur(8px) saturate(120%);
 -webkit-backdrop-filter:blur(8px) saturate(120%);
}
.modal-footer,.modal-heading{background:transparent}

/* --- Боковая панель: закреплённая плоскость поверх фона --- */
.sidebar{
 background:var(--lg-fill-soft);
 border-right:1px solid var(--lg-stroke);
 /* Прежняя панель была сплошной тёмной плитой со своим светлым текстом;
    на прозрачном фоне цвет должен приходить из темы. */
 color:var(--ink);
 backdrop-filter:var(--lg-blur-deep);
 -webkit-backdrop-filter:var(--lg-blur-deep);
}
.sidebar .nav-heading,.sidebar .control-hint,.sidebar .brand small{color:var(--ink-secondary)}
/* Пункты меню наследуют цвет темы: прежний светлый текст был рассчитан
   на непрозрачную тёмную панель и в светлой теме становился нечитаемым.
   background-image обнуляем явно — прежние правила задают плотный градиент
   через шорткат background, и одного background-color было бы мало. */
.sidebar button,.sidebar button.nav-item{
 background-color:var(--lg-fill-soft);
 background-image:none;
 border-color:var(--lg-stroke);
 color:var(--ink);
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}
.sidebar button.selected,.sidebar button.nav-item.selected{
 background-color:color-mix(in srgb,var(--accent) 32%,transparent);
 background-image:none;
 border-color:color-mix(in srgb,var(--accent) 50%,transparent);
 color:var(--ink);
}
@media(hover:hover){
 .sidebar button:hover:not(:disabled),.sidebar button.nav-item:hover:not(:disabled){
  background-color:var(--lg-fill);background-image:none;
 }
}
.sidebar .icon-button{color:var(--ink-secondary)}

/* --- Элементы управления: капля стекла с подсветкой канта --- */
:is(button,button.button,button.icon-button,button.nav-item,button.panel-control,
    button.account-name,button.dialog-item),.file-label{
 background-color:var(--lg-fill);
 background-image:none;
 border:1px solid var(--lg-stroke);
 box-shadow:inset 0 1px 0 var(--lg-sheen),var(--lg-shadow);
 backdrop-filter:var(--lg-blur-soft);
 -webkit-backdrop-filter:var(--lg-blur-soft);
}
/* Верхний блик живёт в ::before; низ подсвечиваем мягче, чтобы кант читался по кругу. */
button::before,.file-label::before{
 background:linear-gradient(160deg,var(--lg-sheen),transparent 42%,rgba(255,255,255,.05));
}
button.primary{
 background-color:color-mix(in srgb,var(--accent) 80%,transparent);
 background-image:none;
 border-color:color-mix(in srgb,var(--accent) 50%,var(--lg-stroke-strong));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 24px color-mix(in srgb,var(--accent) 26%,transparent);
}
@media(hover:hover){
 button:hover:not(:disabled){
  background-color:var(--lg-fill-strong);background-image:none;
  border-color:color-mix(in srgb,var(--accent) 42%,var(--lg-stroke-strong));
  box-shadow:inset 0 1px 0 var(--lg-stroke-strong),var(--lg-shadow-raised);
 }
 button.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent) 92%,transparent)}
}

/* Кнопки состояния: тонированное стекло вместо плотной заливки.
   Цвет остаётся смысловым (включено / выключено), но материал общий. */
.button.state-on,.icon-button.state-on{
 background:color-mix(in srgb,var(--good-ink) 26%,transparent);
 border-color:color-mix(in srgb,var(--good-ink) 42%,transparent);
 color:var(--good-ink);
 box-shadow:inset 0 1px 0 var(--lg-sheen),var(--lg-shadow);
}
.button.state-off,.icon-button.state-off{
 background:color-mix(in srgb,var(--bad-ink) 24%,transparent);
 border-color:color-mix(in srgb,var(--bad-ink) 40%,transparent);
 color:var(--bad-ink);
 box-shadow:inset 0 1px 0 var(--lg-sheen),var(--lg-shadow);
}
@media(hover:hover){
 .button.state-on:hover:not(:disabled),.icon-button.state-on:hover:not(:disabled){background:color-mix(in srgb,var(--good-ink) 36%,transparent)}
 .button.state-off:hover:not(:disabled),.icon-button.state-off:hover:not(:disabled){background:color-mix(in srgb,var(--bad-ink) 34%,transparent)}
}
.button.danger{
 background:color-mix(in srgb,var(--bad-ink) 26%,transparent);
 border-color:color-mix(in srgb,var(--bad-ink) 42%,transparent);
 color:var(--bad-ink);
}

/* --- Поля ввода: вдавленное стекло, противоположное выпуклым кнопкам --- */
input,textarea,select{
 background:var(--lg-fill-soft);
 border:1px solid var(--lg-stroke);
 box-shadow:inset 0 1px 3px rgba(18,28,48,.06);
 backdrop-filter:var(--lg-blur-soft);
 -webkit-backdrop-filter:var(--lg-blur-soft);
}
input:focus,textarea:focus,select:focus{
 background:var(--lg-fill);
 border-color:color-mix(in srgb,var(--accent) 55%,transparent);
}
/* Поиск по диалогам лежит внутри собственной пилюли и намеренно прозрачен
   (telegram.css). Стеклом его не оформляем: без своей заливки размытие с
   усилением насыщенности рисует поверх подложки мутное голубое пятно.
   Материал здесь задаёт обёртка, поле остаётся просто текстом.
   Поиск в панелях инструментов это правило не затрагивает — там поле рисует
   рамку и заливку само. */
.chat-sidebar>.search-box input,.chat-sidebar>.search-box input:focus{
 background:transparent;
 border:0;
 box-shadow:none;
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
}

/* --- Таблицы: шапка — отдельный слой, строки прозрачны --- */
thead{
 background:var(--lg-fill-soft);
 backdrop-filter:var(--lg-blur-soft);
 -webkit-backdrop-filter:var(--lg-blur-soft);
}
.account-table tbody tr,.order-table tbody tr{background:transparent}

/* --- Статусные плашки сохраняют смысловой цвет, но становятся полупрозрачными --- */
.status-pill,.notice{
 backdrop-filter:var(--lg-blur-soft);
 -webkit-backdrop-filter:var(--lg-blur-soft);
}

/* Фон чата рисует собственная сцена: стекло поверх неё не накладываем. */
.chat-thread,.wallpaper-preview{backdrop-filter:none;-webkit-backdrop-filter:none}

}

/* --- Прокрутка: тонкая стеклянная полоса вместо серой системной ---
   Задаётся вне @supports: полосы нужны и там, где размытие недоступно.
   Firefox понимает только scrollbar-width / scrollbar-color, WebKit и Blink —
   псевдоэлементы; описываем оба способа, браузер возьмёт свой. */
:root{
 --lg-scroll-thumb:color-mix(in srgb,var(--ink) 22%,transparent);
 --lg-scroll-thumb-hover:color-mix(in srgb,var(--accent) 55%,transparent);
}
:root[data-theme="dark"]{
 --lg-scroll-thumb:rgba(255,255,255,.22);
 --lg-scroll-thumb-hover:color-mix(in srgb,var(--accent) 65%,transparent);
}
*{scrollbar-width:thin;scrollbar-color:var(--lg-scroll-thumb) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
 background:var(--lg-scroll-thumb);
 border-radius:999px;
 /* Прозрачная рамка через background-clip делает полосу уже самой дорожки,
    поэтому ползунок висит в воздухе, а не прилипает к краю. */
 border:3px solid transparent;
 background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:var(--lg-scroll-thumb-hover);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}

/* --- Выделение текста: акцент темы вместо системного синего --- */
::selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--ink)}
::-moz-selection{background:color-mix(in srgb,var(--accent) 32%,transparent);color:var(--ink)}

/* --- Выбор в списках и фокус: та же акцентная логика ---
   Нативный список вариантов рисует система: полупрозрачная заливка поля выше
   до него не доходит, а цвет текста наследуется. Светлый --ink на системном
   белом фоне делал названия лотов невидимыми, поэтому варианты получают
   собственный непрозрачный фон и цвет. */
option,optgroup{background-color:var(--surface);color:var(--ink)}
option:checked,option:hover{background:color-mix(in srgb,var(--accent) 28%,var(--surface));color:var(--ink)}
:is(input,textarea,select,button,a,summary,[tabindex]):focus-visible{
 outline:2px solid color-mix(in srgb,var(--accent) 70%,transparent);
 outline-offset:2px;
}
/* Выбранные строки и варианты подсвечиваются акцентом, а не плотной заливкой. */
tbody tr[aria-selected="true"],.dialog-item.selected,.zone-option[aria-selected="true"]{
 background:color-mix(in srgb,var(--accent) 22%,transparent);
}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent)}

/* --- Доступность: размытие дорого при прокрутке и мешает при reduced motion --- */
@media(prefers-reduced-transparency:reduce){
 :root{--lg-fill:var(--surface);--lg-fill-strong:var(--surface);--lg-fill-soft:var(--surface-soft);--lg-stroke:var(--border);--lg-stroke-strong:var(--border)}
 .panel,.stat-card,.module-card,.modal,.sidebar,button,input,textarea,select,thead{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
 }
}