/* Оформление в духе настроек iOS: сгруппированные списки на светло-сером
   фоне, строки по 44px с волосяными разделителями, один акцентный цвет для
   выбранного и главной кнопки. Две своих темы — светлая «Дюна» и тёмная в цветах
   Claude; по умолчанию выбирается та, что совпадает с темой Telegram.

   Шрифт — системный: на iPhone это SF Pro, на Android — Roboto. Свой не
   грузим: системный совпадает с интерфейсом Telegram вокруг приложения. */

:root {
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.345 5.26068C19.0295 5.72737 19.206 6.66056 18.7393 7.34503L11.2393 18.345C10.9877 18.7141 10.5847 18.9518 10.14 18.9935C9.69533 19.0352 9.25517 18.8765 8.93934 18.5607L4.43934 14.0607C3.85355 13.4749 3.85355 12.5251 4.43934 11.9394C5.02513 11.3536 5.97487 11.3536 6.56066 11.9394L9.78052 15.1592L16.2607 5.65502C16.7273 4.97055 17.6605 4.794 18.345 5.26068Z'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C16.8946 11.4804 17 11.7348 17 12C17 12.2652 16.8946 12.5196 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z'/%3E%3C/svg%3E");
  --bg: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --group: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #000000);
  --icon: var(--text);  /* иконки в строках; тёмная тема приглушает их отдельно */
  /* Системные labels iOS (Apple UI Kit): secondary — значения и подписи, tertiary — шевроны, плейсхолдеры */
  --hint: rgba(60, 60, 67, .6);
  --label-3: rgba(60, 60, 67, .3);
  --accent: var(--tg-theme-button-color, #007aff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #ff3b30);
  --orange: #ff9500; /* iOS system orange */
  --sep: #e6e6e6;     /* separators/vibrant з Apple UI Kit */
  --fill: color-mix(in srgb, var(--hint) 14%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --row: 52px;        /* строка inset grouped в iOS 26 — 52pt (измерено в Настройках) */
  --hair: 1px;        /* разделитель 1pt — так в Apple UI Kit (Row / Separator) */
  --r: 26px;          /* группы и карточки — радиус inset grouped в iOS 26 */
  --pad: 16px;
  --glass: color-mix(in srgb, var(--group) 88%, transparent);
  --glass-edge: color-mix(in srgb, var(--group) 55%, transparent);
  --shadow: 0 8px 28px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06);
}

/* Тем две, обе свои; «Авто» в настройках лишь выбирает одну из них по теме Telegram.
   Переменные :root выше — запасные на миг до того, как скрипт поставит data-theme. */
/* Светлая — «Дюна», как в Claude: тёплый песок, кремовые карточки, графитовый акцент */
html[data-theme="light"] {
  --bg: #efe9df; --group: #faf7f2; --text: #2a2420;
  --hint: rgba(42, 36, 32, .6); --label-3: rgba(42, 36, 32, .3);
  --accent: #3f3a36; --accent-text: #ffffff; --danger: #b8432e; color-scheme: light;
  --btn: #1f1c19;      /* кнопки — темнее акцента, почти чёрный тёплый */
  --sep: rgba(90, 70, 50, .12); --fill: rgba(90, 70, 50, .09);
  --shadow: 0 8px 28px rgba(70, 50, 30, .12), 0 1px 2px rgba(70, 50, 30, .06);
}
/* Тёмная — как в приложении Claude: графитовый фон, чуть светлее карточки, тёплый белый текст,
   иконки приглушённые серые, переключатели — спокойный синий */
html[data-theme="dark"] {
  --bg: #151515; --group: #1f1f1f; --text: #f9faf7; --icon: #c0c1bc;
  --hint: rgba(249, 250, 247, .55); --label-3: rgba(249, 250, 247, .28); --sep: #373737;
  --accent: #5598e8; --accent-text: #ffffff; --danger: #ff6b5c; color-scheme: dark;
  --fill: rgba(255, 255, 255, .08);
  --shadow: 0 8px 28px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
}

/* Акцентный цвет выбирается отдельно от темы; у каждого — светлый и тёмный вариант.
   «Графит» — типовой для светлой «Дюны», в тёмной он становится кремовым с тёмным текстом. */
html[data-theme="light"][data-accent="graphite"] { --accent: #3f3a36; --btn: #1f1c19; --accent-text: #ffffff; }
html[data-theme="dark"][data-accent="graphite"] { --accent: #8e8e93; --btn: #8e8e93; --accent-text: #ffffff; }
html[data-theme="light"][data-accent="blue"] { --accent: #3478f6; --btn: #3478f6; --accent-text: #ffffff; }
html[data-theme="dark"][data-accent="blue"] { --accent: #5598e8; --btn: #5598e8; --accent-text: #ffffff; }
html[data-theme="light"][data-accent="green"] { --accent: #2fa84f; --btn: #2fa84f; --accent-text: #ffffff; }
html[data-theme="dark"][data-accent="green"] { --accent: #34c759; --btn: #34c759; --accent-text: #ffffff; }
html[data-theme="light"][data-accent="pink"] { --accent: #ff2d55; --btn: #ff2d55; --accent-text: #ffffff; }
html[data-theme="dark"][data-accent="pink"] { --accent: #ff375f; --btn: #ff375f; --accent-text: #ffffff; }
/* Оранжевый — фирменный цвет Claude, а не системный iOS */
html[data-theme="light"][data-accent="orange"] { --accent: #d97757; --btn: #d97757; --accent-text: #fff; }
html[data-theme="dark"][data-accent="orange"] { --accent: #d97757; --btn: #d97757; --accent-text: #fff; }

/* Строка с системным <select>: сам список прозрачный и лежит поверх строки, а показываем
   своё — так в значении может быть цветная точка, а выбор остаётся нативным */
.control.select-row { position: relative; }
/* Тап — по значению со стрелками справа, как в меню iOS. Системный <select> лежит
   прозрачным поверх всей правой части (точка, текст, стрелки) и сам открывает список
   по тапу — без showPicker() и фокусов, что на iOS срабатывали через раз */
.control.select-row .grow { flex: 1; }
.control.select-row .pick { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: var(--row);
                              /* Зона тапа шире значения на 16px по бокам — справа до самого края строки */
                              padding: 0 var(--pad); margin-right: calc(-1 * var(--pad)); }
.control.select-row .pick .val { flex: none; }
.control.select-row .native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0;
                               -webkit-appearance: none; appearance: none; font-size: 16px; }
/* Не влезает — сокращаем подпись, а не значение, как в iOS */
.control.select-row .lbl { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control.select-row .pick .dot { margin-right: 0; }
/* Иконка вида — по выбору пользователя (авто/светлая/тёмная), а не по текущей теме */
.select-row .sun, .select-row .moon, .select-row .auto { display: none; }
html[data-look="light"] .select-row .sun, html[data-look="dark"] .select-row .moon,
html[data-look="auto"] .select-row .auto { display: flex; }

/* Цветная точка перед названием цвета — в строке настроек и в списке выбора */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; flex: none; }
.sheet-list button .dot { margin-right: 12px; }
.sheet-list .inner > button > span:first-child.with-dot { flex-direction: row; align-items: center; }
/* Лого слева, название с описанием — столбиком справа от него */
.sheet-list .inner > button > span:first-child.with-logo { flex-direction: row; align-items: center; gap: 12px; }
.sheet-list .with-logo > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Выключенный запрос в фильтре находок — бледный, как карточка в «Запити» (.3); галочка яркая */
.sheet-list .inner > button.off > span:first-child { opacity: .3; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; background: var(--bg); touch-action: pan-x pan-y; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; letter-spacing: -.43px; /* трекинг SF Pro 17pt */
}
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent); text-decoration: none; }

/* ------------------------------------------------------------------ */
/* Каркас                                                               */
/* ------------------------------------------------------------------ */

.screen { display: none; padding: calc(12px + var(--inset-top, 0px)) var(--pad) 120px; max-width: 560px; margin: 0 auto; }
/* Экран проявляется при переключении: display не анимируется, поэтому keyframes на появление */
.screen.on { display: block; animation: screen-in .18s ease-out; }
@keyframes screen-in { from { opacity: 0; } to { opacity: 1; } }
/* Вглубь — экран въезжает справа, назад — предыдущий возвращается слева, как в iOS; вкладки
   внизу просто проявляются. Без fill: после въезда transform не остаётся, и sticky/fixed
   внутри экрана считаются от окна, как раньше */
.screen.on.in-push { animation: screen-push .34s cubic-bezier(.32,.72,0,1); }
.screen.on.in-pop { animation: screen-pop .34s cubic-bezier(.32,.72,0,1); }
@keyframes screen-push { from { opacity: 0; transform: translateX(40px); } }
@keyframes screen-pop { from { opacity: 0; transform: translateX(-40px); } }
/* «Ціни», пришедшие после въезда экрана (медленный ответ), проявляются, а не возникают */
.late { animation: screen-in .2s ease-out; }
/* Сдвинутый экран не должен давать горизонтальную прокрутку на время въезда */
body { overflow-x: clip; }
/* Панель действия (24 + 54 + 21 = 99) минус 8 нижнего отступа последней карточки:
   между ней и кнопкой при прокрутке вниз ровно 24 */
.screen.with-action { padding-bottom: 75px; } /* 24 под последней карточкой с её margin 24 */

.screen-head { margin: 8px 0 18px; }
/* Первая группа сразу под шапкой — без верхнего отступа, шапка уже дала свой */
.screen-head + .group { margin-top: 0; }
.screen-head h1 { font-size: 28px; font-weight: 700; letter-spacing: +0.38px; margin: 0; }
.screen-head p { margin: 4px 0 0; color: var(--hint); font-size: 15px; letter-spacing: -0.23px; }

/* Прогрессивный блюр под статус-баром и кнопками Telegram: восемь полос, каждая
   размывает сильнее и обрезана маской выше предыдущей. Высота — отступ safe
   area плюс 24px; без отступа (не полный экран) слой нулевой высоты. */
.top-glass { position: fixed; left: 0; right: 0; top: 0; z-index: 35; pointer-events: none; overflow: hidden;
             height: calc(var(--inset-top, 0px) + min(var(--inset-top, 0px) * 100, 24px)); }
.top-glass i { position: absolute; inset: 0; display: block; }
.top-glass i:nth-child(1) { backdrop-filter: blur(0.5px); -webkit-backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 10%, transparent 20%); mask-image: linear-gradient(to top, #000 0%, #000 10%, transparent 20%); }
.top-glass i:nth-child(2) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to top, transparent 10%, #000 20%, #000 30%, transparent 40%); mask-image: linear-gradient(to top, transparent 10%, #000 20%, #000 30%, transparent 40%); }
.top-glass i:nth-child(3) { backdrop-filter: blur(1.75px); -webkit-backdrop-filter: blur(1.75px); -webkit-mask-image: linear-gradient(to top, transparent 20%, #000 30%, #000 40%, transparent 50%); mask-image: linear-gradient(to top, transparent 20%, #000 30%, #000 40%, transparent 50%); }
.top-glass i:nth-child(4) { backdrop-filter: blur(2.75px); -webkit-backdrop-filter: blur(2.75px); -webkit-mask-image: linear-gradient(to top, transparent 30%, #000 40%, #000 50%, transparent 60%); mask-image: linear-gradient(to top, transparent 30%, #000 40%, #000 50%, transparent 60%); }
.top-glass i:nth-child(5) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(to top, transparent 40%, #000 50%, #000 60%, transparent 70%); mask-image: linear-gradient(to top, transparent 40%, #000 50%, #000 60%, transparent 70%); }
.top-glass i:nth-child(6) { backdrop-filter: blur(5.5px); -webkit-backdrop-filter: blur(5.5px); -webkit-mask-image: linear-gradient(to top, transparent 50%, #000 60%, #000 70%, transparent 80%); mask-image: linear-gradient(to top, transparent 50%, #000 60%, #000 70%, transparent 80%); }
.top-glass i:nth-child(7) { backdrop-filter: blur(7.5px); -webkit-backdrop-filter: blur(7.5px); -webkit-mask-image: linear-gradient(to top, transparent 60%, #000 70%, #000 80%, transparent 90%); mask-image: linear-gradient(to top, transparent 60%, #000 70%, #000 80%, transparent 90%); }
.top-glass i:nth-child(8) { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, transparent 70%, #000 80%, #000 100%); mask-image: linear-gradient(to top, transparent 70%, #000 80%, #000 100%); }

/* iOS 26: капсула вкладок с отступом 21pt от краёв и отдельная круглая кнопка справа через 8pt */
.dock {
  position: fixed; left: 21px; right: 21px; bottom: 21px; z-index: 38; /* над плашкой дня (36) и верхним блюром (35), под шторкой (40) */
  /* Уже контента на 5 px с каждой стороны, как на телефоне (21 против 16): 560 − 2 × 21 */
  max-width: 518px; margin: 0 auto; display: flex; gap: 8px; align-items: center;
}
.dock[hidden] { display: none; }
.dock-fade { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 104px; z-index: 37; pointer-events: none; }
.dock-fade[hidden] { display: none; }
/* Цвет — через CSS: Safari не понимает var() в атрибуте stop-color */
.dock-fade stop { stop-color: var(--bg); }
nav.tabs {
  position: relative; flex: 1; min-width: 0;
  display: flex; gap: 0; padding: 4px; height: 62px; border-radius: 999px;
  /* Liquid Glass: почти прозрачное стекло с сильным размытием и насыщением того, что под ним */
  background: linear-gradient(180deg, color-mix(in srgb, var(--group) 55%, transparent), color-mix(in srgb, var(--group) 40%, transparent));
  backdrop-filter: blur(12px) saturate(2.2) brightness(1.1); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.06);
}
/* Ободок — кольцо со своим backdrop-filter: показывает то, что под кромкой, ярче и
   насыщеннее — над зелёным зелёное, над серым серое. Лежит РЯДОМ с баром, а не внутри:
   в WebKit потомок элемента с backdrop-filter видит за собой лишь подложку родителя.
   Кольцо вырезает clip-path (его ставит fadeHoles), а не mask: маску WebKit сбрасывает во время
   резинового перетягивания, и кольцо пропадало. Блик по периметру — второй слой .rim-shade,
   притемняющий бока цветом подложки */
.dock .rim, .dock .rim-shade {
  position: absolute; left: 0; top: 0; height: 62px; right: 70px; /* 62px «+» и 8px промежуток */
  border-radius: 999px; pointer-events: none;
}
.dock .rim {
  z-index: 2;
  backdrop-filter: brightness(1.6) saturate(2.2); -webkit-backdrop-filter: brightness(1.6) saturate(2.2);
  background: linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.12) 40%, rgba(255,255,255,.1) 60%, rgba(255,255,255,.22));
}
.dock .rim-shade {
  z-index: 3;
  background: linear-gradient(160deg, transparent 0%, color-mix(in srgb, var(--group) 75%, transparent) 35%,
                              color-mix(in srgb, var(--group) 80%, transparent) 65%, transparent 100%);
}
html[data-theme="dark"] nav.tabs {
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  backdrop-filter: blur(12px) saturate(2.2) brightness(1.2); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.2);
}
/* Плашка активной вкладки — тёмная полупрозрачная, без теней; скользит между вкладками */
nav.tabs .pill {
  position: absolute; top: 4px; left: 0; height: 54px; width: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  /* Та же пружина, что в сегменте «Усі/Бізнес/Приватні». Позиция — через translate,
     чтобы transform остался под squash & stretch */
  transition: translate .4s cubic-bezier(.3,1.3,.4,1), width .3s ease; will-change: translate, transform;
}
/* Во время переезда плашка сжимается по высоте и тянется в ширину, как капля */
nav.tabs .pill.moving { animation: pill-squash .4s cubic-bezier(.3,1.3,.4,1); }
@keyframes pill-squash { 0% { transform: scale(1); } 40% { transform: scale(1.1, .86); } 100% { transform: scale(1); } }
/* Тап по вкладке — вся капсула чуть увеличивается и возвращается */
nav.tabs.spring, .dock .rim.spring, .dock .rim-shade.spring { animation: bar-spring .4s cubic-bezier(.3,1.4,.4,1); }
@keyframes bar-spring { 0% { transform: scale(1); } 35% { transform: scale(1.025); } 100% { transform: scale(1); } }
nav.tabs button {
  position: relative; z-index: 1;
  flex: 1; min-width: 0; height: 54px; padding: 0 2px; border-radius: 999px; color: var(--hint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: +0.06px; white-space: nowrap; overflow: hidden; transition: color .25s;
}
nav.tabs button svg { width: 24px; height: 24px; }
nav.tabs button.on { color: var(--accent); }
/* Одна площадка у человека — от переключателя остаётся плашка со счётчиком, не нажимается */
.segment.single { pointer-events: none; }
/* Без «+» («Перегляд», нет площадок) капсула не растягивается: та же ширина, что рядом с «+»,
   по центру; ободок — вместе с ней */
.dock.no-fab { justify-content: center; }
.dock.no-fab nav.tabs { flex: 0 0 calc(100% - 70px); }
.dock.no-fab .rim, .dock.no-fab .rim-shade { left: 35px; right: 35px; }
/* Кругла акцентна вкладка «Новий запит» — того ж скла, що й капсула, але залита кольором */
.fab { flex: none; width: 62px; height: 62px; border-radius: 999px; display: grid; place-items: center;
       background: var(--btn, var(--accent)); color: var(--accent-text);
       box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent),
                   inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.08); }
.fab svg { width: 28px; height: 28px; }
.fab.spring { animation: bar-spring .4s cubic-bezier(.3,1.4,.4,1); }

.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; pointer-events: none;
  padding: 24px 21px 21px;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent), transparent);
}
.action-bar > * { max-width: 518px; margin-left: auto; margin-right: auto; pointer-events: auto; }
/* Круглая «Назад» слева, основная кнопка — на остальную ширину (как в шторках) */
.action-bar .bar { display: flex; gap: 10px; }
.action-bar .bar .btn { margin: 0; }
/* Когда видна таб-панель, кнопка действия поднимается над ней. */
/* Над таб-панеллю: 21 (край) + 62 (панель) + 8 (зазор) = 91 */
body.tabs-on .action-bar { padding-bottom: 91px; background: none; }
body.tabs-on .screen { padding-bottom: 107px; } /* 21 + 62 + 24 под панелью */
body.tabs-on .screen.with-action { padding-bottom: 145px; } /* 24 + 54 + 91 − 24 */

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px;
       border-radius: 999px; font-weight: 600; font-size: 17px; letter-spacing: -0.43px; }
.btn svg { width: 22px; height: 22px; }
/* Плавное вращение: у значка восемь одинаковых лучей, и поворот рывками по 1/8
   оборота совмещал его с самим собой — спиннер выглядел застывшим */
.btn svg.spin { animation: spin .8s linear infinite; }
.btn.primary { background: var(--btn, var(--accent)); color: var(--accent-text);
               box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent),
                           inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.08); } /* як у «+» */
.btn.primary:active { transform: scale(.985); }
/* Нижние кнопки — то же стекло, что «+»: тень, блик сверху, тень снизу, пружина при тапе */
.action-bar .btn.secondary, .sheet-foot .btn.secondary {
  background: var(--glass); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.08); }
html[data-theme="dark"] .action-bar .btn.secondary, html[data-theme="dark"] .sheet-foot .btn.secondary {
  box-shadow: 0 12px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3); }
.action-bar .btn.spring, .sheet-foot .btn.spring { animation: bar-spring .4s cubic-bezier(.3,1.4,.4,1); }
.btn.primary[disabled] { opacity: .4; box-shadow: none; }
/* Пока крутится спиннер, кнопка остаётся яркой: она не выключена, а занята */
.btn[disabled].busy { opacity: 1; }
/* Второстепенная кнопка на панели: серая заливка, как у поля поиска, — не сливается со списком */
.btn.secondary { background: linear-gradient(var(--fill), var(--fill)) var(--bg); color: var(--text); font-weight: 600; }
/* Тот же шеврон, что в списках, развёрнутый влево */
.btn .chev.back { width: 24px; height: 24px; background: currentColor; transform: scaleX(-1); margin-left: -4px;
                  -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }
.btn.danger, .btn.link { background: var(--group); color: var(--danger); font-weight: 600; border-radius: var(--r);
              margin-left: calc(-1 * var(--pad)); width: calc(100% + var(--pad)); }
.btn.link { color: var(--accent); }
.btn + .btn { margin-top: 10px; }
/* Невелика кнопка в рядку списку: додати користувача */
.btn.small { width: auto; height: 36px; padding: 0 18px; font-size: 15px; letter-spacing: -0.23px; background: var(--fill); color: var(--text); }
.btn.small:active { opacity: .7; }

/* ------------------------------------------------------------------ */
/* Группы и строки — основа всего                                       */
/* ------------------------------------------------------------------ */

/* Заголовок секции как в настройках iOS 26: 17px полужирный серый, без капса */
.group { margin: 24px 0 8px var(--pad); font-size: 17px; font-weight: 600; color: var(--hint);
         letter-spacing: -0.43px; }
/* Группа: сама отступает слева, поэтому разделители между строками начинаются
   с отступа и идут до правого края — как в списках iOS. */
.box { background: var(--group); border-radius: var(--r); overflow: hidden; margin-bottom: 24px;
       padding-left: var(--pad); }
/* Разделитель 1px, с отступом от обоих краёв карточки — не касается правого края.
   Линия — у строки, перед которой есть видимая: скрытая первая строка (права, площадка)
   иначе оставляла линию над единственной видимой */
.box > :not([hidden]) ~ * { position: relative; }
.box > :not([hidden]) ~ *::before { content: ""; position: absolute; top: 0; left: 0; right: var(--pad); height: var(--hair);
                       background: var(--sep); pointer-events: none; }

/* Строка: 44px, текст слева, значение справа. Поле ввода живёт прямо в ней. */
.field { margin: 0; min-width: 0; }
/* Подпись над чипами — того же кегля, что и «Лінійка» рядом, а не мелкое примечание */
.field > label:not(.control) { display: block; padding: 14px var(--pad) 0 0; font-size: 17px; letter-spacing: -0.43px; line-height: 22px; color: var(--text); }
.control {
  width: 100%; min-width: 0; min-height: var(--row); padding: 0 var(--pad) 0 0;
  display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0;
}
.control input, .control select, .control textarea {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0; outline: none; height: var(--row);
  /* WKWebView в Telegram красит курсор своим tint, а не цветом текста — в светлой теме
     он получается белым и его не видно. Задаём явно: системный синий в обеих темах. */
  caret-color: #0a84ff;
}
input, textarea { caret-color: var(--accent); }
/* Полоса прокрутки в цветах темы, а не системная белая */
textarea { scrollbar-width: thin; scrollbar-color: var(--label-3) transparent; }
textarea::-webkit-scrollbar { width: 6px; }
textarea::-webkit-scrollbar-thumb { background: var(--label-3); border-radius: 3px; }
textarea::-webkit-scrollbar-track { background: transparent; }
/* Стоп-слова: поле растёт по тексту, прокручивается страница, а не поле */
#s-stopwords { min-height: 140px; overflow: hidden; }
.control input::placeholder, .control textarea::placeholder { color: var(--hint); }
/* В поиске подсказка и лупа бледнее (30 %), в тон крестику — как в строке поиска iOS */
.search input::placeholder { color: var(--label-3); }
.control select { appearance: none; -webkit-appearance: none; }
.control textarea { height: auto; padding: 11px 0; resize: none; min-height: 66px; line-height: 1.4; }
/* Однострочное поле, растущее вместе с текстом: сначала как обычная строка, дальше — по высоте */
/* 15 + 22 + 15 = 52: textarea не центрирует текст по вертикали, поэтому отступы должны дать ровно строку */
.control textarea.line { min-height: var(--row); line-height: 22px; padding: 15px 0; }
.control .lbl { flex: none; color: var(--text); }
.control .ico { flex: none; display: flex; color: var(--icon); margin-right: 2px; }
.control .ico svg { width: 24px; height: 24px; }
.control .ph { color: var(--hint); flex: 1; text-align: right; }
.control .val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                text-align: right; color: var(--hint); }
.control .val.left { text-align: left; color: var(--text); }
/* Сколько внутри — тот же кружок, что в капсуле «Фільтр» находок */
.control .val.count { flex: none; margin-left: 8px; min-width: 26px; height: 26px; padding: 0 7px;
                      border-radius: 999px; display: grid; place-items: center;
                      background: var(--accent); color: var(--accent-text);
                      font-size: 14px; font-weight: 600; letter-spacing: -0.23px; }
.control .val.count:empty { display: none; }
/* Выключенная настройка (список стоп-слов при выключенном тумблере): строка приглушена,
   шильдик — нейтральный, не акцентный. Открыть и править список по-прежнему можно */
.control.off .ico, .control.off .val.left, .control.off .val.count { opacity: .25; }
.control.off .val.count { background: var(--fill); color: var(--text); }
/* Ночь на графиках выключена — часы начала и конца приглушены, как строка стоп-слов */
.control.select-row.off .ico, .control.select-row.off .lbl, .control.select-row.off .pick { opacity: .25; }
/* Разделитель под строкой с иконкой — от текста, а не от иконки (24 + 2 + 10) */
.box > .field.iconed::before { left: 36px; }
/* Фильтры категории живут в той же карточке, что и строка категории: разделители как у карточки */
/* Линию над контейнером не рисуем — её даёт первый фильтр, иначе две совпадают */
#olx-params::before { display: none; }
#olx-params > * { position: relative; }
#olx-params > *::before { content: ""; position: absolute; top: 0; left: 0; right: var(--pad); height: var(--hair); background: var(--sep); }
.control .chev { color: var(--label-3); flex: none; margin-right: -2px; display: flex; }
/* Крестик сброса на месте шеврона: серый, как в полях поиска iOS; те же 24px и сдвиг */
.control .clear { color: var(--label-3); flex: none; display: flex; margin-right: -2px; }
.control .clear svg { width: 24px; height: 24px; }
.control .clear:active { opacity: .5; }
/* В строке поиска крестик появляется с текстом: вырастает из точки, как в iOS; пустое поле —
   сжимается обратно и не ловит тапы */
.search .clear { transition: opacity .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.search input:placeholder-shown + .clear { opacity: 0; transform: scale(.4); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease; }
@media (prefers-reduced-motion: reduce) { .search .clear, .search input:placeholder-shown + .clear { transition: none; } }
.chev svg { width: 24px; height: 24px; }
.tick { color: var(--accent); display: flex; }
.tick svg { width: 24px; height: 24px; }
.control.picker:active { background: var(--fill); }
.control .unit { color: var(--hint); flex: none; min-width: 32px; text-align: right; }
.control button.unit { color: var(--accent); }

/* Цена одной строкой из трёх отдельных карточек: «грн» «Від ___» «До ___», между ними 8px */
.row3 { display: flex; align-items: stretch; gap: 8px; min-height: var(--row); margin-bottom: 24px; }
.row3 .cell { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; padding-right: var(--pad); }
.row3 .cell:not(.cur) { flex: 1; }
/* Сегмент валют сразу над полями цены, как на OLX */
.segment.tight { margin-bottom: 8px; }
.row3 .cell input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; padding: 0; outline: none;
                    height: var(--row); font: inherit; color: var(--text); text-align: right; }
.row3 .cell input::placeholder { color: var(--hint); }
.row3 .cell .lbl { flex: none; color: var(--text); }
.row3 .cur { justify-content: center; border: 0; font: inherit; }
.row3 button.cur { color: var(--accent); }
.row3 span.cur { color: var(--hint); }

.with-info { display: flex; align-items: center; }
.with-info .control { flex: 1; }
.info { flex: none; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; color: var(--hint);
        display: grid; place-items: center; }
.info svg { width: 22px; height: 22px; }
/* «i» рядом с заголовком группы на «Стан системи» */
.group.with-i, .usage-head .with-i { display: flex; align-items: center; gap: 4px; }
.group.with-i .info, .usage-head .info { margin-right: 0; width: 24px; height: 24px; }
.group.with-i .info svg, .usage-head .info svg { width: 20px; height: 20px; }

/* Сегмент — как в iOS */
.segment { display: flex; padding: 3px; margin-bottom: 24px; background: var(--fill); border-radius: 999px; position: relative; }
.segment .pill { position: absolute; top: 3px; left: 0; height: 36px; width: 0; border-radius: 999px;
  background: var(--group); box-shadow: 0 1px 3px rgba(0,0,0,.08), inset 0 0 0 var(--hair) rgba(0,0,0,.04);
  transition: translate .4s cubic-bezier(.3,1.3,.4,1), width .3s ease; will-change: translate, transform; }
/* В тёмной теме --group темнее дорожки — плашку не видно; берём светлее, как у сегмента iOS */
html[data-theme="dark"] .segment .pill { background: #3a3a3c; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* Те же движения, что в таб-баре: плашка сжимается во время переезда, сегмент пружинит при тапе */
.segment .pill.moving { animation: pill-squash .4s cubic-bezier(.3,1.3,.4,1); }
.segment.spring { animation: bar-spring .4s cubic-bezier(.3,1.4,.4,1); }
.segment button { position: relative; z-index: 1; flex: 1; height: 36px; border-radius: 999px; color: var(--text);
  font-size: 16px; font-weight: 500; padding: 0 6px; white-space: nowrap; letter-spacing: -0.31px; }
/* Сегмент с разными по длине подписями: кнопки по ширине текста, дорожка делится пропорционально */
.segment.fit button { flex: 1 1 auto; padding: 0 12px; }
/* Невыбранные — полупрозрачным текстом, выбранный — жирный и полный цвет */
.segment button[aria-pressed="false"] { opacity: .6; }
.segment button[aria-pressed="true"] { font-weight: 600; }
/* «/18» в «OLX · 12/18» — приглушено: акцент на числе включённых */
.segment button .of { opacity: .3; }

/* Площадка в списке запросов липнет к верху при прокрутке, как плашка дня в находках,
   и так же стеклянная — список просвечивает под ней */
/* Над списком запросов: переключатель площадок и справа кнопка сортировки, через 8 px */
.list-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 24px;
  position: sticky; top: calc(8px + var(--inset-top, 0px)); z-index: 36; }
.list-bar .segment { flex: 1; margin: 0; }
.list-bar .head-btn { flex: none; color: var(--icon);
  background: linear-gradient(var(--fill), var(--fill)), color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8); }
/* Включённые сверху — кнопка подсвечена акцентом, чтобы было видно, что порядок не обычный */
.list-bar .head-btn[aria-pressed="true"] { color: var(--accent-text); background: var(--btn, var(--accent)); }
/* Поиск под переключателем: та же «пилюля», что в окне выбора; от переключателя 12, до списка 24 */
.list-bar:has(+ .list-search:not([hidden])) { margin-bottom: 12px; }
.list-search { margin-bottom: 24px; }
.list-search .control { background: var(--fill); border-radius: 999px; min-height: 44px; padding: 0 12px; gap: 6px; }
.list-search .ico { display: flex; flex: none; color: var(--label-3); }
.list-search .ico svg { width: 24px; height: 24px; }
.list-search input { height: 44px; }
/* Системный синий крестик выбивается из стиля — вместо него наш серый из набора */
.search input::-webkit-search-decoration, .search input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
/* «Знахідки»: та же липкая строка — «Фільтр» и вид слева, очистка справа. Плашка дня
   липнет под ней: 8 + 42 + 8 = 58 от верха */
/* Выше плашки дня (36): уходящую плашку следующий день выталкивает вверх — она должна
   проехать под кнопками, как карточки, а не лечь поверх переключателя вида */
.f-bar { z-index: 37; }
.f-bar .spacer { flex: 1; }
.f-bar .segment.icons { flex: none; margin: 0;
  background: linear-gradient(var(--fill), var(--fill)), color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8); }
.f-bar .filter-pill { height: 42px; padding-left: 14px; box-shadow: none; flex: none;
  background: linear-gradient(var(--fill), var(--fill)), color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8); }
.f-bar .filter-pill::after { display: none; }
.f-bar .filter-pill:has(b[hidden]) { padding-right: 16px; }
/* Кружок — как у «Доступ» в «Опції» (26 px); от края капсулы 8 — столько же, сколько сверху и снизу */
.f-bar .filter-pill { padding-right: 8px; }
.f-bar .filter-pill b { letter-spacing: -0.23px; }
#list-source {
  /* Дорожка та же, что у обычного сегмента (--fill поверх фона экрана), но фон почти
     непрозрачный: над карточками подписи не должны сливаться с их текстом */
  background: linear-gradient(var(--fill), var(--fill)), color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8); }

/* Галочка — строка списка с отметкой справа */
.check { display: flex; align-items: center; gap: 12px; min-height: var(--row); padding: 8px var(--pad) 8px 0; cursor: pointer; }
.check > span:not(.box) { flex: 1; }
.check .box { order: 2; width: 22px; height: 22px; border-radius: 50%; border: var(--hair) solid var(--sep); flex: none;
              margin-left: auto; display: grid; place-items: center; background: none; }
.check[aria-checked="true"] .box { background: var(--accent); border-color: var(--accent); }
.check[aria-checked="true"] .box::after { content: ""; width: 16px; height: 16px; background: var(--accent-text);
  -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
.check .sub { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; margin-top: 1px; }

/* Строка настройки как в iOS: иконка слева, заголовок 17, пояснение 15 серым, переключатель справа */
.row.setting { gap: 14px; padding: 12px var(--pad) 12px 0; }
.row.setting .ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--icon); }
.row.setting .ico svg { width: 24px; height: 24px; }
.row.setting .ttl { font-size: 17px; letter-spacing: -0.43px; line-height: 22px; }
.row.setting .sub { color: var(--hint); font-size: 15px; line-height: 20px; margin-top: 2px; letter-spacing: -0.23px; }

/* Значения — маленькие капсулы */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px var(--pad) 16px 0; } /* снизу чуть больше, чем над подписью — так выглядит ровнее */
.chip { background: var(--fill); color: var(--text); border-radius: 999px; padding: 7px 13px; font-size: 14px;
        font-weight: 500; letter-spacing: -0.15px; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
/* Поле с мультивыбором: строка открывает шторку, выбранное — чипами под ней. Чип здесь
   всегда «выбрано»: залит акцентом, крестик справа убирает значение */
.multi .chips.picked { padding: 0 var(--pad) 14px 0; }
.multi .picked .chip { display: inline-flex; align-items: center; gap: 4px; padding-right: 8px;
  background: var(--accent); color: var(--accent-text); }
.multi .picked .chip svg { width: 16px; height: 16px; opacity: .75; }

/* Тело сита Apple под тумблером: каждая строка с линией сверху, включая первую */
.adv-body > * { position: relative; }
.adv-body > *::before { content: ""; position: absolute; top: 0; left: 0; right: var(--pad); height: var(--hair);
                        background: var(--sep); pointer-events: none; }
.box > .adv-body::before { display: none; }
/* Подпись под группой, как футер секции в iOS: 8px от карточки, 24px до следующей группы */
.note { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; line-height: 1.4; margin: 0 var(--pad) 24px; }
.box + .note, .segment + .note { margin-top: -16px; }
/* Пояснение к выбору и следующая подпись — одним блоком, без полного отступа между ними */
.note + .note { margin-top: -12px; }
.note.warn { color: var(--danger); }
/* Кто и когда создал запрос — подпись под кнопкой удаления, как в iOS под таблицей */
.note.meta { text-align: center; }
.box .note { margin: 0; padding: 10px var(--pad) 10px 0; }

.problems { color: var(--danger); font-size: 14px; letter-spacing: -0.15px; margin: 10px var(--pad) 6px; }
.problems ul { margin: 0; padding-left: 18px; }
.problems:empty { display: none; }

/* ------------------------------------------------------------------ */
/* Карточки запросов                                                   */
/* ------------------------------------------------------------------ */

/* Карточка запроса — того же вида, что и группы в настройках: радиус --r, без теней */
.card { position: relative; background: var(--group); border-radius: var(--r); padding: var(--pad); margin-bottom: 12px; }
.card { transition: opacity .3s ease, transform .15s ease; cursor: pointer; }
/* До нижнего бара на вкладках — ровно отступ экрана (24), как в «Знахідки»: свой отступ
   последней карточки или группы не прибавляем */
#list > .card:last-child, #s-settings > .box:last-child { margin-bottom: 0; }
.card:active { transform: scale(.985); }
.card.off { opacity: .3; }
.q-head { display: flex; align-items: flex-start; gap: 8px; padding-right: 72px; margin-bottom: 14px; }
/* Корзина в углу: от верха и от правого края одинаково — --pad; зона тапа шире иконки */
.q-tools { display: flex; }
/* «Копія» и корзина — рядом, между иконками 18 px (у кнопок поля для пальца внахлёст) */
.card .q-tools { gap: 18px; }
.card .q-tools { position: absolute; top: var(--pad); right: var(--pad); }
.q-tools button { width: 24px; height: 24px; padding: 8px; margin: -8px; box-sizing: content-box; color: var(--hint); border-radius: 999px; display: grid; place-items: center; }
.q-tools button svg { width: 24px; height: 24px; }
.q-tools button:active { background: var(--fill); }
.q-name { flex: 1; min-width: 0; font-weight: 600; font-size: 17px; letter-spacing: -0.43px; line-height: 24px; }
.q-rows { border-top: var(--hair) solid var(--sep); padding-top: 10px; }
.q-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: 15px; letter-spacing: -0.23px; }
.q-row .k { color: var(--hint); flex: none; }
.q-row .v { text-align: right; overflow: hidden; text-overflow: ellipsis; }
.q-row .v.tag { background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 1px 7px; font-weight: 500; }
.q-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
          color: var(--hint); font-size: 13px; letter-spacing: -0.08px; }
.q-foot .found { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; letter-spacing: -0.23px;
                 padding: 0; color: inherit; }
/* Тап — в «Знахідки» с этим запросом в фильтре */
.q-foot .found:active { opacity: .5; }
/* Подчёркнуто только «знахідок: N» — видно, что это переход, время рядом — просто подпись */
.q-foot .found .u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.q-foot .found svg { width: 20px; height: 20px; flex: none; }
.q-foot .found.quiet { color: var(--orange); }
/* «Аналітика цін» — во всю ширину карточки, под подвалом, тоном акцента */
.q-prices { width: 100%; height: 44px; margin-top: 12px; border-radius: 12px; display: flex;
            align-items: center; justify-content: center; gap: 8px; background: var(--accent-soft);
            color: var(--accent); font-size: 15px; font-weight: 600; letter-spacing: -0.23px; }
.q-prices:active { opacity: .6; }
.q-prices svg { width: 20px; height: 20px; flex: none; }
.q-prices .q-dot { font-weight: 900; margin: 0 -2px; }
.q-prices .q-med { white-space: nowrap; }
/* Маячок подгрузки находок: спиннер, пока есть следующая страница */
.more { height: 48px; display: grid; place-items: center; }
/* Плавно, не шагами: у иконки 8 одинаковых лучей через 45°, и steps(8) поворачивал её
   каждый раз в то же положение — значок казался замершим */
.more svg { width: 22px; height: 22px; color: var(--hint); animation: spin 1s linear infinite; }
/* Восемь лучей — восемь шагов: крутится, как индикатор iOS, а не плавно */
@keyframes spin { to { transform: rotate(360deg); } }
/* Приложение не открылось: доступа нет или вход не прошёл — блок по центру экрана */
.fatal { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: 8px; padding: 24px; text-align: center; }
.fatal .tile { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 8px;
               background: var(--fill); color: var(--icon); }
.fatal .tile svg { width: 28px; height: 28px; }
.fatal h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.45px; }
.fatal p { margin: 0; max-width: 300px; color: var(--hint); font-size: 15px; line-height: 20px; letter-spacing: -0.23px; }
/* Тот же блок внутри экрана (нет площадок): по центру окна, но под шапкой и капсулой — не
   перекрывает нажатия на них */
.fatal.in-screen { z-index: 0; pointer-events: none; }
.fatal .id { margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--fill); font-size: 15px;
             font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; }
.empty { text-align: center; color: var(--hint); padding: 64px 24px; line-height: 1.5; font-size: 15px; letter-spacing: -0.23px; }

.choice { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--row); padding: 12px var(--pad) 12px 0;
          background: var(--group); text-align: left; font-size: 17px; letter-spacing: -0.43px; font-weight: 500; }
.choice:active { background: var(--fill); }
/* Лого площадки в кружке слева — фирменные цвета, как иконки приложений в настройках iOS.
   Цвета не перекрашиваются под тему: узнаваемость здесь важнее */
.choice { gap: 12px; }
.choice > span:not(.logo) { flex: 1; }
.choice .logo { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.choice .logo svg { display: block; }
/* В карточке запроса — лого площадки перед названием, 24 px */
.q-head > span { display: flex; flex: none; }
.q-head .logo, .finding .site .logo, .sheet-list .with-logo .logo, .an-head .logo { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center;
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 16%, transparent); }
.q-head .logo svg, .finding .site .logo svg, .sheet-list .with-logo .logo svg, .an-head .logo svg { display: block; }
.q-head .logo.olx, .finding .site .logo.olx, .sheet-list .with-logo .logo.olx, .an-head .logo.olx { background: #26e5dd; }
.q-head .logo.olx svg, .finding .site .logo.olx svg, .sheet-list .with-logo .logo.olx svg, .an-head .logo.olx svg { width: 15px; }
.q-head .logo.ebay, .finding .site .logo.ebay, .sheet-list .with-logo .logo.ebay, .an-head .logo.ebay { background: #fff; }
.q-head .logo.ebay svg, .finding .site .logo.ebay svg, .sheet-list .with-logo .logo.ebay svg, .an-head .logo.ebay svg { width: 18px; }
.choice .logo.olx { background: #26e5dd; }
.choice .logo.olx svg { width: 22px; }
.choice .logo.ebay { background: #fff; }
.choice .logo.ebay svg { width: 26px; }
.choice small { display: block; font-size: 13px; letter-spacing: -0.08px; font-weight: 400; color: var(--hint); margin-top: 2px; }
.choice::after { content: ""; width: 24px; height: 24px; flex: none; background: var(--label-3);
                 -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; }

/* ------------------------------------------------------------------ */
/* Выбор из списка                                                     */
/* ------------------------------------------------------------------ */

/* Шторка — на весь экран (фон, выезд), а содержимое — в колонке экранов: на широком экране
   шапка и список не шире 560 px (контент 528), кнопки — 518, всё по центру */
.sheet { --side: max(var(--pad), calc((100% - 528px) / 2)); --side-bar: max(21px, calc((100% - 518px) / 2));
         position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column;
         transform: translateY(100%); transition: transform .32s cubic-bezier(.32,.72,0,1); }
.sheet.in { transform: none; }
/* Переход между уровнями в две фазы (как смена страницы на bpr.afu.in.ua, только по горизонтали):
   старый список гаснет и сдвигается в сторону движения за 240 мс, новый проявляется с противоположной стороны за 520 мс */
/* will-change держит список на своём слое постоянно: iOS иначе сбрасывает слой в конце анимации,
   и картинка дёргается, как отскок */
.sheet-list { transition: opacity .24s, transform .24s; will-change: transform, opacity; }
.sheet-list.out-push { opacity: 0; transform: translateX(-10px); }
.sheet-list.out-pop { opacity: 0; transform: translateX(10px); }
.sheet-list.in-push, .sheet-list.in-pop { transition: none; }
.sheet-list.in-push { animation: list-in-push .52s cubic-bezier(.4,0,.2,1) both; }
.sheet-list.in-pop { animation: list-in-pop .52s cubic-bezier(.4,0,.2,1) both; }
@keyframes list-in-push { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes list-in-pop { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen.on, .screen.on.in-push, .screen.on.in-pop, .late { animation: none; }
  .sheet { transition: none; }
  .sheet-list { transition: none; }
  .sheet-list.in-push, .sheet-list.in-pop { animation: none; }
}
/* Шапка висит над списком: он проходит под ней, поэтому снизу — градиент, как у панели кнопок */
.sheet-head { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: calc(12px + var(--inset-top, 0px)) var(--side) 16px;
              background: linear-gradient(to bottom, var(--bg) 0, var(--bg) calc(100% - 24px), transparent); }
.sheet-head h1 { font-size: 28px; font-weight: 700; letter-spacing: +0.38px; margin: 8px 0 14px; }
/* Без строки поиска (категории) список стоит от заголовка на те же 14, что и поиск */
.sheet-head:has(.search[hidden]) { padding-bottom: 0; }
.sheet-head .crumb { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; margin-bottom: 8px; }
.sheet-head .crumb:empty { display: none; }
.sheet-head .search .control { background: linear-gradient(var(--fill), var(--fill)) var(--bg); border-radius: 999px; min-height: 44px; padding: 0 12px; gap: 6px; }
.sheet-head .search .ico { display: flex; flex: none; color: var(--label-3); }
.sheet-head .search .ico svg { width: 24px; height: 24px; }
.sheet-head .search input { height: 44px; }
/* Снизу — место под панель кнопок (24 + 54 + 21), как на экранах с действием */
/* iOS: без min-height:0 flex-ребёнок не сжимается и не скроллится; overscroll-behavior не отдаёт
   жест странице под шторкой, когда список упирается в край */
.sheet-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
              touch-action: pan-y; padding: 0 var(--side) 99px; }
/* Пока шторка открыта, страница под ней не скроллится — иначе на iOS жест уходит ей */
body.sheet-open { overflow: hidden; } /* верхний отступ — высота шапки, ставит скрипт */
.sheet-list .inner { background: var(--group); border-radius: var(--r); overflow: hidden; }
.sheet-list .inner { padding-left: var(--pad); }
.sheet-list .inner > button { display: flex; width: 100%; justify-content: space-between; align-items: center;
  min-height: var(--row); padding: 10px var(--pad) 10px 0; text-align: left; font-size: 17px; letter-spacing: -0.43px; }
.sheet-list .inner > button + button { position: relative; }
.sheet-list .inner > button + button::before { content: ""; position: absolute; top: 0; left: 0; right: var(--pad); height: var(--hair);
                                      background: var(--sep); pointer-events: none; }
.sheet-list .inner > button > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.sheet-list button small { font-size: 13px; letter-spacing: -0.08px; color: var(--hint); }
.sheet-list button.sel { color: var(--accent); }
/* Список, где выбор показывает сама галочка: название акцентом не красим */
.sheet-list button.picked { color: var(--text); font-weight: 600; }
.sheet-list button.picked small { font-weight: 400; }
.sheet-list button.picked .tick { color: var(--accent); }
/* Подписи блоков в шторке (запросы OLX / eBay): первая — вплотную к шапке */
.sheet-list .group:first-child { margin-top: 0; }
/* Число на «Показати · N»: надпись стоит, каждая цифра прокручивается отдельно (лента 0–9
   в окошке на одну строку) */
#sheet-done { white-space: nowrap; }
#sheet-done .num { display: inline-flex; vertical-align: top; font-variant-numeric: tabular-nums; }
#sheet-done .digit { display: block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
#sheet-done .strip { display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.25,1.1,.4,1); }
#sheet-done .strip span { height: 1.25em; }
#sheet-done .num.still .strip { transition: none; }
.sheet-list button .chev { color: var(--label-3); display: flex; }
/* Та же панель, что и .action-bar: градиент, отступы 24/21/21, кнопки 54 */
.sheet-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 24px var(--side-bar) 21px; display: flex; gap: 10px;
              background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent), transparent); }
.sheet-foot .btn { margin: 0; }
/* Кнопки, появляющиеся по выбору (фильтр находок): выныривают пружиной, исчезают угасанием */
.sheet-foot .btn.appear { animation: foot-in .36s cubic-bezier(.3,1.35,.4,1) both; }
.sheet-foot .btn.leaving { animation: foot-out .2s ease-in both; pointer-events: none; }
@keyframes foot-in { from { opacity: 0; transform: scale(.8); } }
@keyframes foot-out { to { opacity: 0; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { .sheet-foot .btn.appear, .sheet-foot .btn.leaving { animation: none; } }
/* «Назад» — круг со стрелкой, как «+» в док-баре; основная кнопка занимает остальную ширину */
.btn.round { flex: none; width: 54px; padding: 0; }
/* Круглая кнопка, прижатая к правому краю панели */
.action-bar .btn.round.end { margin-left: auto; }
/* Кнопка по ширине текста, прижата вправо — «Оновити» в «Стан системи» */
.action-bar .btn.fit { flex: none; width: auto; padding: 0 24px; }
.action-bar .btn.fit.end { margin-left: auto; }
.btn.round .chev.back { margin: 0; }

/* Подсказка */
/* Подсказка «i» в шторке: текст в такой же карточке, как группы настроек */
.sheet-list .inner.hint-text { background: none; border-radius: 0; padding: 0; }
.sheet-list .hint-text p, .sheet-list .hint-text li { line-height: 1.4; font-size: 17px; letter-spacing: -0.43px; color: var(--text); margin: 12px 0; }
.sheet-list .hint-text ul { padding-left: 18px; margin: 12px 0; }
.sheet-list .hint-text mark { background: var(--accent-soft); color: var(--accent); border-radius: 5px; padding: 0 6px; font-weight: 500; }

/* ------------------------------------------------------------------ */
/* Находки, проверка, настройки                                        */
/* ------------------------------------------------------------------ */

/* Находки — сетка по две в ряд: фото 3:2 сверху вплотную к краям, под ним данные */
/* Заголовок остаётся на той же высоте, что и на других экранах: кнопки (42 px) выше
   строки h1 (≈34 px), поэтому выравниваем по верху и поднимаем их на половину разницы */
.screen-head.with-tools { display: flex; align-items: flex-start; gap: 8px; }
.screen-head.with-tools h1 { flex: 1; min-width: 0; }
.screen-head.with-tools .segment.icons, .screen-head.with-tools .head-btn { margin-top: -4px; }
/* Круглая кнопка в шапке — той же высоты, что сегмент рядом */
.head-btn { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: var(--fill); color: var(--text); }
.head-btn svg { width: 22px; height: 22px; }
.head-btn:active { opacity: .6; }
/* Сегмент из иконок вместо подписей — компактный, для шапки */
.segment.icons { margin: 0; padding: 3px; }
.segment.icons button { flex: none; width: 44px; height: 36px; display: grid; place-items: center; }
.segment.icons button svg { width: 22px; height: 22px; }
#findings { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Список: карточка горизонтальная — фото слева, текст справа, плашка запроса внизу */
#findings.list { grid-template-columns: 1fr; }
#findings.list .finding { flex-direction: row; align-items: flex-start; padding: 12px 0 12px 12px; }
/* Квадратное фото с отступом от краёв карточки, скруглённое, как сама карточка */
#findings.list .finding .cover { flex: none; width: 112px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
#findings.list .finding .grow { padding: 0 12px; align-self: stretch; }
#findings.list .finding .badge { left: 6px; top: 6px; }
/* В списке город и дата — одной строкой через точку; в сетке — двумя */
.finding .meta.joined { display: none; }
#findings.list .finding .meta { display: none; }
#findings.list .finding .meta.joined { display: block; }
#findings.list .finding .title { -webkit-line-clamp: 2; }
#findings .empty { grid-column: 1 / -1; }
/* Секция дня повторяет сетку родителя; заголовок — плашка по центру, как дата в чате Telegram:
   липнет к верху при прокрутке, пока длится этот день, дальше её выталкивает следующая */
#findings .days { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
#findings.list .days { grid-template-columns: 1fr; }
#findings .day { grid-column: 1 / -1; justify-self: center; position: sticky; top: calc(58px + var(--inset-top, 0px)); z-index: 36; /* над .top-glass (35), под нижним баром (38) и его градиентом (37) */
  margin: 0; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -0.08px; color: var(--text);
  background: color-mix(in srgb, var(--group) 40%, transparent);
  backdrop-filter: blur(12px) saturate(2.2) brightness(1.1); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.1); }
/* В светлой теме белая плашка сливается со страницей — берём заливку кнопок шапки */
html:not([data-theme="dark"]) #findings .day { background: var(--fill); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* без saturate/brightness: на бежевому вони жовтять */
html[data-theme="dark"] #findings .day { backdrop-filter: blur(12px) saturate(2.2) brightness(1.2); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.2); }
#findings .day b { font-weight: 600; color: var(--hint); }
#findings .day b::before { content: "·"; margin: 0 5px; }
.finding { display: flex; flex-direction: column; color: var(--text); padding: 0; margin: 0; overflow: hidden; border-radius: 16px; }
.finding .cover { position: relative; aspect-ratio: 4 / 3; background: var(--fill); }
/* В «Дюне» обложка без фото с --fill получается того же песка, что и фон страницы, и карточка
   будто без верха — делаем её заметно темнее фона */
html[data-theme="light"] .finding .cover { background: rgba(90, 70, 50, .17); }
.finding .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.finding .cover .no-photo { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); color: var(--text); opacity: .15; }
.finding .badge { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; letter-spacing: +0.06px; font-weight: 600; color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.finding .badge svg { width: 14px; height: 14px; margin-left: -2px; }
/* Лого площадки на обложке — слева внизу, под «Нове/Підняте»; тот же кружок 24 px
   с тонкой обводкой, что в карточке запроса */
.finding .site { position: absolute; left: 8px; bottom: 8px; display: flex; }
#findings.list .finding .site { left: 6px; bottom: 6px; }
.finding .badge.fresh { background: #ff3b30; color: #fff; } /* красный независимо от темы и акцента — чтобы новое бросалось в глаза */
.finding .grow { padding: 12px; min-width: 0; flex: 1; display: flex; flex-direction: column; }
.finding .q-bottom { margin-top: auto; padding-top: 8px; }
/* В сетке к низу прижаты цена, город и время; название запроса идёт сразу за ними */
#findings:not(.list) .finding .money { margin-top: auto; }
#findings:not(.list) .finding .q-bottom { margin-top: 0; } /* плашка запроса прижата к низу, с воздухом над ней */
.finding .title { font-weight: 600; font-size: 14px; letter-spacing: -0.15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.finding .tags { margin: 4px 0 0; }
.finding .tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; letter-spacing: 0; background: var(--fill); color: var(--hint);
                /* Одна строка: длинный стан eBay («Good - Refurbished») — с троеточием */
                max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; }
.finding .money { padding-top: 6px; font-weight: 700; font-size: 16px; letter-spacing: -0.31px; }
.finding .meta { color: var(--hint); font-size: 12px; letter-spacing: 0; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Название запроса — оранжевая строка с канцелярской кнопкой внизу карточки, без плашки */
/* Продавец eBay в карточке находки: ник и тихая кнопка блока рядом */
.finding .seller { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--hint);
                   font-size: 12px; min-width: 0; }
.finding .seller span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finding .seller button { flex: none; border: 0; background: none; padding: 0; font: inherit;
                          font-weight: 600; color: var(--danger); cursor: pointer;
                          display: inline-flex; align-items: center; gap: 3px; }
.finding .seller button svg { width: 14px; height: 14px; }
.finding.blocked .seller button { color: var(--accent); }
.finding.blocked .cover, .finding.blocked .title, .finding.blocked .money { opacity: .45; }
.finding .query { color: var(--orange); font-size: 12px; letter-spacing: 0; font-weight: 600;
  display: flex; align-items: center; gap: 5px; min-width: 0; }
.finding .query svg { width: 14px; height: 14px; flex: none; }
.finding .query span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finding .query .gone { color: var(--hint); text-decoration: line-through; }

.verdict { display: flex; gap: 12px; align-items: flex-start; }
.verdict .mark svg { width: 16px; height: 16px; }
.verdict .mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
                 font-weight: 700; flex: none; font-size: 13px; letter-spacing: -0.08px; margin-top: 1px; }
.verdict.ok .mark { background: var(--accent-soft); color: var(--accent); }
.verdict.no .mark { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.verdict .title { font-weight: 600; font-size: 16px; letter-spacing: -0.31px; }
.verdict .why { color: var(--hint); font-size: 14px; letter-spacing: -0.15px; }

.kv { display: flex; justify-content: space-between; gap: 12px; min-height: var(--row); align-items: center;
      padding: 8px var(--pad) 8px 0; font-size: 17px; letter-spacing: -0.43px; }
.kv .k { color: var(--text); }
.kv .v { text-align: right; color: var(--hint); }
/* Статус: сбой — красным значение, сломанная задача сверху — красным и название */
.kv.bad .v, .box.alerts .kv .k { color: var(--danger); }
.kv.idle .v { color: var(--label-3); }
/* Полоса до следующего прохода — во всю ширину под строкой канала */
.kv.with-next { flex-wrap: wrap; row-gap: 8px; }
.kv .next { flex-basis: 100%; height: 8px; border-radius: 4px; overflow: hidden;
            background: color-mix(in srgb, var(--accent) 22%, transparent); }
.kv .next i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); }
.kv .next-foot { flex-basis: 100%; font-variant-numeric: tabular-nums; }
/* Та же полоса над списком запросов eBay: отступ до карточек — как от переключателя (24) */
.box.ebay-timer { margin-bottom: 24px; }
/* Карточка одна, не строка в группе — сверху и снизу просторнее, 12 вместо 8 */
.box.ebay-timer .kv { padding-top: 12px; padding-bottom: 12px; }

/* Переключатель iOS 26: дорожка 64×28, ползунок — овал 38×24 с отступом 2, ход 22.
   Стекло без теней: ползунок полупрозрачный, размывает дорожку под собой, с бликом
   сверху и тонкой кромкой; при нажатии вытягивается. */
.toggle { width: 64px; height: 28px; border-radius: 14px; flex: none; position: relative;
  background: color-mix(in srgb, var(--hint) 30%, transparent); transition: background .25s ease;
  /* Отдельный слой: WebKit привязывает его к целому пикселю, иначе при дробной
     координате верх и низ дорожки рендерятся по-разному и ползунок «сползает» */
  will-change: transform; transform: translateZ(0); }
.toggle[aria-pressed="true"] { background: var(--accent); }
.toggle::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: 38px; border-radius: 12px;
  background: #fff;
  transition: translate .3s cubic-bezier(.3,1.2,.5,1), width .2s ease; }
.toggle:active::after { width: 42px; }
.toggle[aria-pressed="true"]::after { translate: 22px 0; }
.toggle[aria-pressed="true"]:active::after { translate: 18px 0; }
/* Ползунок во время переезда сжимается по высоте и тянется в ширину, как плашка сегмента */
.toggle.moving::after { animation: pill-squash .3s cubic-bezier(.3,1.2,.5,1); }
.row { display: flex; align-items: center; gap: 12px; min-height: var(--row); padding: 8px var(--pad) 8px 0; }
/* Шторка с одним полем: поле в такой же карточке, как все формы, подсказка — обычная .note */
.sheet-list .prompt { background: var(--group); border-radius: var(--r); padding-left: var(--pad); }
.sheet-list .prompt + .note { margin-top: 8px; }
/* Доступ: аватар-буква и имя, как переключатель аккаунтов в Telegram; разделитель — от текста */
.row.user { gap: 14px; width: 100%; text-align: left; font-size: 17px; letter-spacing: -0.43px; color: var(--text); min-height: 60px; cursor: pointer; }
.row.user:active:not(:has(.toggle:active)) { opacity: .7; }
#users > * + *::before { left: 58px; }
.row.user.off .avatar, .row.user.off .grow { opacity: .45; } /* тумблер остаётся ярким */
.row.user.add { color: var(--accent); }
.row.user .nick { display: block; color: var(--hint); font-size: 15px; letter-spacing: -0.23px; margin-top: 1px; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
          color: #fff; font-size: 19px; font-weight: 600; }
.avatar.plus { background: none; color: var(--accent); }
/* Фото из Telegram ложится на место буквы */
.avatar.photo { background-size: cover !important; background-position: center !important; color: transparent; }
.avatar.plus svg { width: 30px; height: 30px; }
.avatar.big { width: 84px; height: 84px; font-size: 36px; }
/* Карточка человека в шторке: большой аватар сверху, под ним данные строками «название — значение» */
.user-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 20px 0 24px; }
.user-head .nm { margin-top: 12px; font-size: 28px; font-weight: 700; letter-spacing: +0.38px; } /* как заголовки экранов */
.user-head .nick { margin-top: 2px; font-size: 17px; letter-spacing: -0.43px; color: var(--accent); text-decoration: none; }
/* Шторка без заголовка (карточка человека) — пустой h1 места не занимает */
.sheet-head h1:empty { display: none; }
.user-card { margin-bottom: 24px; }
.user-card .row { font-size: 17px; letter-spacing: -0.43px; }
.user-card .val { color: var(--hint); text-decoration: none; }
/* ID копируется тапом — нажатая строка чуть темнеет, как в списках iOS */
.user-card .row.copy { cursor: pointer; }
.user-card .row.copy:active { background: var(--fill); }
.user-card .row.copy .val.done { color: var(--accent); }
.user-card + .note { margin-bottom: 24px; }
/* Последняя на странице: запас экрана под «Назад» рассчитан на 24 снизу, как у карточки */
#user-card .btn.danger { margin-left: 0; width: 100%; margin-bottom: 24px; }
#user-card .btn.danger svg { width: 22px; height: 22px; }
.grow { flex: 1; min-width: 0; }

/* Расход суточного лимита eBay — карточкой с полосой, как в счётчиках iOS.
   Полоса желтеет после двух третей и краснеет под конец: это единственное место, где
   видно, что запросы вот-вот закончатся. */
.box.usage { padding: 14px var(--pad); display: grid; gap: 8px; }
/* Внутри карточки один блок, а не список строк: разделители тут лишние */
.box.usage > * + *::before { display: none; }
.usage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.usage-head .t { font-size: 17px; letter-spacing: -0.43px; }
.usage-head .p { color: var(--hint); font-size: 15px; letter-spacing: -0.23px; }
.usage-bar { height: 8px; border-radius: 4px; overflow: hidden;
             background: color-mix(in srgb, var(--accent) 22%, transparent); }
.usage-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent);
               transition: width .3s ease, background .3s ease; }
/* Диск и память в группе «Сервер» — тот же вид, что и лимит eBay */
.box .meter { padding: 12px var(--pad) 12px 0; display: grid; gap: 8px; }
.meter.warn .usage-bar { background: color-mix(in srgb, #ff9f0a 22%, transparent); }
.meter.warn .usage-bar i { background: #ff9f0a; }
.meter.over .usage-bar { background: color-mix(in srgb, #ff453a 22%, transparent); }
.meter.over .usage-bar i { background: #ff453a; }
.box.usage.warn .usage-bar { background: color-mix(in srgb, #ff9f0a 22%, transparent); }
.box.usage.warn .usage-bar i { background: #ff9f0a; }
.box.usage.over .usage-bar { background: color-mix(in srgb, #ff453a 22%, transparent); }
.box.usage.over .usage-bar i { background: #ff453a; }
.usage-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--hint); font-size: 15px; letter-spacing: -0.23px; }

/* Плашка новых — под липкой плашкой дня, тем же стеклом, что и «Фільтр» */
.new-dock { position: fixed; left: 0; right: 0; top: calc(58px + 32px + 10px + var(--inset-top, 0px)); z-index: 39;
            display: flex; justify-content: center; pointer-events: none; animation: foot-in .36s cubic-bezier(.3,1.35,.4,1) both; }
.new-dock[hidden] { display: none; }
.filter-pill { pointer-events: auto; position: relative; height: 36px; padding: 0 5px 0 12px;
  border-radius: 999px; display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600;
  letter-spacing: -0.23px; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--group) 62%, transparent), color-mix(in srgb, var(--group) 46%, transparent));
  backdrop-filter: blur(12px) saturate(2.2) brightness(1.1); -webkit-backdrop-filter: blur(12px) saturate(2.2) brightness(1.1);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.06);
}
/* Кромка как у нижнего бара: свой backdrop-filter показывает то, что под ней,
   ярче и насыщеннее, — тонкое светлое кольцо по периметру */
.filter-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  backdrop-filter: brightness(1.15) saturate(1.6); -webkit-backdrop-filter: brightness(1.15) saturate(1.6);
  background: linear-gradient(160deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.12));
}
/* В светлой теме то же кольцо светит слишком ярко — приглушаем ещё вдвое */
html[data-theme="light"] .filter-pill::after {
  backdrop-filter: brightness(1.04) saturate(1.3); -webkit-backdrop-filter: brightness(1.04) saturate(1.3);
  background: linear-gradient(160deg, rgba(255,255,255,.5), rgba(0,0,0,.05) 45%, rgba(0,0,0,.05) 60%, rgba(255,255,255,.3));
}
.filter-pill:active { transform: scale(.96); }
.filter-pill svg { width: 18px; height: 18px; }
.filter-pill span { padding-right: 2px; }
/* Сколько запросов выбрано — акцентным кружком справа внутри капсулы */
.filter-pill b { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
                 display: grid; place-items: center; background: var(--accent); color: var(--accent-text);
                 font-size: 14px; font-weight: 600; }
.filter-pill b[hidden] { display: none; }
.filter-pill:has(b[hidden]) { padding-right: 12px; }

/* Аналітика: графики из обычных блоков — столбики высотой в процентах, цвет из темы.
   У каждой площадки свой график, поэтому цвет один — акцент */
/* Период липнет к верху при прокрутке, как переключатель площадок в «Запити», — тем же стеклом */
#an-days, #pr-days { margin-bottom: 24px; position: sticky; top: calc(8px + var(--inset-top, 0px)); z-index: 36;
  background: linear-gradient(var(--fill), var(--fill)), color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px) saturate(1.8); -webkit-backdrop-filter: blur(12px) saturate(1.8); }
.box.an { padding: 14px var(--pad); display: grid; gap: 8px; margin-bottom: 12px; }
/* Как между карточками запросов; между разделами остаётся 24 — отступ заголовка .group поглощает этот */
.box.an > * + *::before { display: none; }
.an-cap, .an-axis, .an-foot { color: var(--hint); font-size: 15px; letter-spacing: -0.23px; }
.an-cap { color: var(--text); font-variant-numeric: tabular-nums; }
/* Над графиком часов строка появляется только по тапу на столбик */
.an-cap:empty { display: none; }
.an-head { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; letter-spacing: -0.43px; }
/* Слева — лого площадки (как в карточке запроса) и название */
.an-head .site { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.an-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.an-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
          padding: 0; border-radius: 3px; }
.an-col i { display: block; width: 100%; flex: none; border-radius: 3px; background: var(--accent); }
/* Пустой день или час — без черты: нулевая линия сетки и так видна */
.an-col.sel { background: var(--fill); }
/* Ночные часы (настройка «Графіки») — тот же цвет, но бледнее: ночь видна и без штриховки */
.an-col.night i { opacity: .45; }
.an-axis { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
/* График часов как обычный столбчатый: слева шкала количества, горизонтальная сетка,
   под столбиками часы — каждая подпись по центру своего столбика */
/* Сверху 12 к зазору блока: верхнее деление шкалы висит над линией на полвысоты цифры */
.an-plot { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 6px; margin-top: 12px; }
.an-y { position: relative; height: 120px; min-width: 14px; color: var(--hint); font-size: 13px;
        letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
.an-y span { position: absolute; right: 0; translate: 0 50%; line-height: 1; white-space: nowrap; }
/* Подписи висят абсолютно и колонку не распирают — невидимая копия самой длинной задаёт ширину */
.an-y .sizer { display: block; visibility: hidden; height: 0; font-style: normal; white-space: nowrap; }
.an-area { position: relative; height: 120px; }
.an-area .grid { position: absolute; left: 0; right: 0; height: var(--hair); background: var(--sep); }
.an-area .an-chart { position: relative; height: 100%; }
.an-axis.ticks { position: relative; display: block; height: 16px; }
.an-axis.ticks span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.an-foot { display: flex; justify-content: space-between; gap: 12px; border-top: var(--hair) solid var(--sep); padding-top: 10px; }
.an-empty { color: var(--hint); font-size: 15px; letter-spacing: -0.23px; }

/* ---------- Ціни запроса ---------- */
/* Под заголовком — лого площадки и имя запроса, как в карточке */
#pr-name { display: flex; align-items: center; gap: 8px; }
#pr-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pr-name .logo { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; }
#pr-name .logo.olx { background: #26e5dd; }
#pr-name .logo.olx svg { width: 13px; }
#pr-name .logo.ebay { background: #fff; }
#pr-name .logo.ebay svg { width: 15px; }
/* Три доли — три насыщенности акцента: различимы при любом акцентном цвете, и
   «ваш діапазон» самый яркий. Серый для «дорожче» при графитовом акценте сливался */
.pr-below { background: color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.pr-inside { background: var(--accent) !important; }
.pr-above { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; }
/* Доли над полосой: слева дешевше, посередине диапазон, справа дорожче */
.pr-parts { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.pr-part { display: grid; gap: 2px; justify-items: center; text-align: center; }
.pr-part:first-child { justify-items: start; text-align: left; }
.pr-part:last-child { justify-items: end; text-align: right; }
.pr-part span { display: flex; align-items: center; gap: 6px; color: var(--hint); font-size: 13px; letter-spacing: -0.08px; }
.pr-part span b { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pr-part strong { font-size: 20px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.pr-part small { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; }
/* Шкала цен: медиана и границы диапазона — на своих ценах */
.pr-med-label { position: relative; height: 18px; font-size: 13px; font-weight: 600; letter-spacing: -0.08px;
                margin-top: 6px; }
.pr-med-label span { position: absolute; top: 0; white-space: nowrap; }
.pr-bar { position: relative; height: 14px; }
.pr-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
/* Вне вашего диапазона — полоса тоньше: глаз сразу находит свой отрезок */
.pr-bar i.pr-below, .pr-bar i.pr-above { top: 4px; bottom: 4px; border-radius: 3px; }
.pr-med { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px;
          border-radius: 1px; background: var(--text); }
/* Границы вашего диапазона — под своими местами на полосе */
.pr-bounds { position: relative; height: 18px; margin-top: 2px; color: var(--hint); font-size: 13px;
             letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
.pr-bounds span { position: absolute; top: 0; white-space: nowrap; }
/* Ваш диапазон — цветом текста, мін. и макс. по краям — серым */
.pr-bounds .own { color: var(--text); font-weight: 600; }
/* Числа дня — под графиком, отступ от подписей дат */
.pr-cap { margin-top: 4px; line-height: 1.45; }
/* Ціни по днях: линии растянуты по области, толщина от этого не зависит — non-scaling-stroke */
.pl-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-area path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pl-area i { position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
             pointer-events: none; }
.pl-area i.pl-median { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
/* Мін. и макс. одним цветом: какая из них какая — видно по положению, медиана — акцентом */
path.pl-max, path.pl-min { stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
path.pl-median { stroke: var(--accent); stroke-width: 2.5; }
.pl-area path.gap { stroke-dasharray: 3 4; }
i.pl-max, i.pl-min, .pl-legend b.pl-edge { background: color-mix(in srgb, var(--accent) 50%, var(--group)); }
i.pl-median, .pl-legend b.pl-median { background: var(--accent); }
/* Ваш диапазон — полоса за линиями */
/* Ваш диапазон — полупрозрачный фон и поверх него частая бледная штриховка: зона видна,
   линии поверх читаются */
.pl-area .pl-own, .pl-legend b.pl-own {
  --hatch: color-mix(in srgb, var(--accent) 14%, transparent);
  background:
    repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 4px),
    color-mix(in srgb, var(--accent) 8%, transparent);
}
.pl-area .pl-own { position: absolute; left: 0; right: 0; }
.pl-legend b.pl-own { border-radius: 3px; }
.pl-hit { position: absolute; top: 0; bottom: 0; padding: 0; border-radius: 3px; background: none; }
.pl-hit.sel { background: var(--fill); }
.pl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--hint); font-size: 13px; letter-spacing: -0.08px; }
.pl-legend span { display: flex; align-items: center; gap: 6px; }
.pl-legend b { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* Столбик дня из частей — между ними тонкий зазор */
.pr-col { gap: 1px; }
.an-note { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; line-height: 1.4; }
/* Мін. / медіана / макс. — три карточки под периодом; медиана — жирнее и акцентом */
/* Середина рынка — под карточками, мельче: главные цифры остаются карточками */
.pr-core { text-align: center; font-size: 15px; letter-spacing: -0.2px; margin-top: 10px;
  font-variant-numeric: tabular-nums; }
/* Ночь на графиках по часам — серая штриховка за столбиками (настройка «Графіки») */
.an-night { position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hint) 22%, transparent) 0 1px,
    transparent 1px 4px), color-mix(in srgb, var(--hint) 8%, transparent); }
.pr-trend { text-align: center; color: var(--hint); font-size: 13px; letter-spacing: -0.08px;
  margin-top: 4px; }
.pr-conf span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
/* Цена выше шкалы «Ціни по днях» — подписью у верхнего края над своим днём */
.pl-over { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px;
  color: var(--hint); background: var(--group); padding: 0 3px; border-radius: 4px;
  font-variant-numeric: tabular-nums; pointer-events: none; z-index: 1; }
.pr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pr-stat { background: var(--group); border-radius: 20px; padding: 12px 8px; display: grid; gap: 4px;
           text-align: center; min-width: 0; }
.pr-stat span { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; }
.pr-stat b { font-size: 22px; font-weight: 500; letter-spacing: -0.3px; font-variant-numeric: tabular-nums;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Мин. и макс. — чуть мельче медианы: главная цифра — она */
.pr-stat:not(.main) b { font-size: 19px; }
.pr-stat.main b { color: var(--accent); font-weight: 700; }
/* Семизначное и длиннее («125 000») — в узкой карточке мельче */
.pr-stat b.long { font-size: 18px; }
.pr-stat:not(.main) b.long { font-size: 16px; }
.pr-stat small { color: var(--hint); font-size: 13px; letter-spacing: -0.08px; margin-top: -2px; }
.pr-total { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 10px 0 0;
            color: var(--hint); font-size: 13px; letter-spacing: -0.08px; }
.pr-total .info { margin-right: 0; width: 22px; height: 22px; }
.pr-total .info svg { width: 18px; height: 18px; }

/* «Перегляд»: запросы видно, но не поменять — без инструментов карточки и тумблера, редактор
   только смотреть: поля не нажимаются, «Зберегти» и «Видалити» спрятаны; «i» у групп работают */
.view-only .q-tools, .view-only .q-foot .toggle { display: none; }
.view-only :is(#s-olx, #s-ebay) > :not(.group):not(.screen-head):not(.note) { pointer-events: none; }
.view-only :is(#s-olx, #s-ebay) .info { pointer-events: auto; }
.view-only :is(#olx-save, #ebay-save, #olx-delete, #ebay-delete) { display: none !important; }
/* Карточка с одной кнопкой «Видалити» — тоже: иначе пустой блок давал лишний отступ */
.view-only .box:has(> :is(#olx-delete, #ebay-delete)) { display: none; }
.view-only .box:has(> :is(#olx-delete, #ebay-delete)) + .note { margin-top: 0; }

/* Права человека на его странице в «Доступ»: площадки тумблерами, застосунок — сегментом.
   Доступ выключен — блок приглушён: настройки хранятся, но не действуют; менять можно */
.user-rights { margin-top: 0; }
.uc-rights { transition: opacity .25s; }
.uc-rights.off { opacity: .4; }