/* Аналитика конкурентов FunPay. Палитра и характер взяты из кита iOS 26 (Apple, галерея Figma), тёмный режим: чёрная основа, слои серого, синий акцент, разделители-волоски вместо рамок и теней. Значения цветов сняты из библиотеки напрямую и не подбирались на глаз. Соответствие именам в ките: --bg Backgrounds/Primary --text Labels/Primary --panel Backgrounds/Secondary --muted Labels/Secondary --raised Backgrounds/Tertiary --muted-2 Labels/Tertiary --raised-2 Backgrounds/Tertiary-Elev. --muted-3 Labels/Quaternary --border Separators/Opaque --fill-2 Fills/Secondary --hairline Separators/Non-opaque --accent Accents/Blue Размер текста намеренно остался 14, хотя в ките 17: панель показывает плотные таблицы и ленты, и крупный шрифт съедает треть строк на экране. Из кита взяты пропорции и ступеньки, а не абсолютные размеры. */ /* ── шрифт ──────────────────────────────────────────────────── Inter лежит рядом с панелью, а не тянется со стороны: панель не должна зависеть от чужой доступности ради начертания букв. Он заменяет SF Pro из кита — рисунок близкий, а SF Pro принадлежит Apple, на Windows его нет и для сайтов он не лицензирован. У Inter лицензия SIL Open Font License, класть к себе разрешено. Файл переменный: одним начертанием закрывает все толщины от 100 до 900, отдельных файлов на полужирный не нужно. Разбит по алфавитам, и браузер скачивает только нужный кусок: для русского интерфейса это кириллица и латиница, около 67 КБ один раз — дальше из кэша, он выставлен на год. Версия стоит в имени файла, поэтому долгий кэш безопасен: при замене шрифта поменяется имя, и браузер заберёт новый. ───────────────────────────────────────────────────────────── */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-v20-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-v20-cyrillic-ext.woff2) format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; } @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-v20-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/inter-v20-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304, U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0, U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* Фон слоями. Глубина набирается слоями серого на чёрном, а не подкраской и тенями, как было раньше. */ --bg:#000000; --panel:#1c1c1e; --panel-2:#1c1c1e; --card:#1c1c1e; --raised:#2c2c2e; --raised-2:#3a3a3c; /* Текст четырьмя ступенями вместо прежних двух. */ --text:#ffffff; --muted:rgba(235,235,245,.70); --muted-2:rgba(235,235,245,.30); --muted-3:rgba(235,235,245,.16); /* Разделители. Сплошной — между строками, полупрозрачный — там, где под линией просвечивает содержимое. */ --border:#38383a; --hairline:rgba(255,255,255,.17); /* Заливки элементов управления: серый с прозрачностью, а не собственный цвет. Так кнопка одинаково лежит на любом слое фона. */ --fill:rgba(120,120,128,.20); --fill-2:rgba(120,120,128,.32); --fill-3:rgba(120,120,128,.44); /* Заливка выбранного — в ките это чёрный на 11 % в светлом режиме. Наш тёмный двойник: белый на 12 %. Именно ей, а не синим, помечается выбранный пункт меню и выбранный период. */ --sel:rgba(255,255,255,.12); /* Чередование строк в таблице вместо разделителей под каждой. */ --stripe:rgba(255,255,255,.035); /* Акценты. Чистый цвет остался для текста, значков и линий — там он и должен звенеть. А вот заливки кнопок взяты с прозрачностью: на чёрном сплошной #0091ff бьёт по глазам, а сквозь него проступает фон, и цвет садится сам собой. Цвет при этом не переписан — убавлена только плотность. */ --accent:#0091ff; --accent-2:#3cd3fe; --accent-fill:rgba(0,145,255,.62); --accent-fill-hi:rgba(0,145,255,.78); --accent-soft:rgba(0,145,255,.18); --accent-line:rgba(0,145,255,.42); --on-accent:#ffffff; --danger:#ff4245; --danger-fill:rgba(255,66,69,.55); --danger-soft:rgba(255,66,69,.14); --danger-line:rgba(255,66,69,.36); --danger-text:#ff8a8c; --danger-text-2:#ffb3b4; --ok:#30d158; --ok-fill:rgba(48,209,88,.55); --ok-fill-hi:rgba(48,209,88,.7); --ok-soft:rgba(48,209,88,.14); --ok-line:rgba(48,209,88,.36); /* Подпись на приглушённой зелёной заливке стала белой: сквозь прозрачность проступает чёрный фон, и прежний тёмный текст на ней перестал читаться. */ --on-ok:#ffffff; --warn:#ff9230; --warn-soft:rgba(255,146,48,.11); --warn-line:rgba(255,146,48,.30); /* ── стекло ────────────────────────────────────────────── Стекло в iOS 26 — не просто полупрозрачность, а стопка слоёв: размытие фона, лёгкая подкраска, блик по верхней кромке и волосок по краю. Здесь они разложены по переменным, чтобы собирать их одинаково везде. Размытие стоит только на крупном: панели, плитки, шапки таблиц, меню, всплывающие. Мелочи — кнопки, капсулы, фишки — сделаны просто полупрозрачными: на их размере разницы не видно, а размытие каждой из полусотни кнопок заметно подтормаживало бы прокрутку длинной ленты. */ --glass:rgba(28,28,30,.62); --glass-2:rgba(44,44,46,.62); --glass-3:rgba(58,58,60,.74); --glass-line:rgba(255,255,255,.10); /* Кромка направленная, как в ките «Liquid Glass — Control Center»: светлее слева-сверху, темнее справа-снизу, и едва заметное свечение по всему краю изнутри. Раньше был ровный блик по верхней кромке — плоско. Интенсивность снижена под чёрный фон: в ките слои сложены режимами наложения поверх обоев. */ --glass-hi:inset 1px 1px 0 -0.5px rgba(255,255,255,.18), inset -1px -1px 0 -0.5px rgba(0,0,0,.40), inset 0 0 3px rgba(255,255,255,.06); --blur:blur(28px) saturate(1.7); --blur-sm:blur(18px) saturate(1.5); /* Теней больше нет: слой отделяется цветом и волоском. Осталась одна — для всплывающих поверх страницы, где иначе не понять, что лежит выше. */ --shadow:none; --shadow-pop:0 18px 40px rgba(0,0,0,.6); /* Скругления. Капсула — кнопкам и переключателям, крупное — панелям, среднее — полям ввода. */ --r-card:20px; --r-pill:980px; --r-field:12px; --r-sm:8px; --sidebar-w:250px; } *{box-sizing:border-box} html,body{height:100%} /* Атрибут hidden обязан прятать всегда. Браузер даёт ему display:none своей таблицей стилей, но любое наше правило с display перебивает её — и элемент остаётся на экране, хотя скрипт считает его спрятанным. Так подменю настроек не закрывалось при переходе в другой раздел. */ [hidden]{display:none!important} /* Полосы прокрутки под стиль панели: системные светлые выбивались из тёмного оформления. */ *{scrollbar-width:thin;scrollbar-color:var(--fill-2) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{ background:var(--fill-2);border-radius:8px; border:2px solid transparent;background-clip:content-box; } *::-webkit-scrollbar-thumb:hover{background:var(--fill-3);background-clip:content-box} *::-webkit-scrollbar-corner{background:transparent} body{ margin:0; font:14px/1.45 Inter,-apple-system,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial; letter-spacing:-.01em; color:var(--text); background:var(--bg); } /* Подсветка фона. На ровном чёрном стекло сделать не из чего: размывать нечего, и полупрозрачная панель выглядит просто серой. В iOS под стеклом всегда лежат обои — здесь их роль играют три очень слабых пятна света. Сами по себе они почти не видны, но именно их подхватывают панели, и стекло начинает читаться как стекло, а не как серый прямоугольник. Пятна закреплены на экране, а не на странице: иначе при прокрутке длинной ленты панели меняли бы оттенок на ходу. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(900px 620px at 10% -8%, rgba(255,255,255,.07), transparent 62%), radial-gradient(780px 560px at 94% 6%, rgba(255,255,255,.045), transparent 60%), radial-gradient(900px 700px at 60% 112%, rgba(255,255,255,.035), transparent 62%); } /* Ссылки того же цвета, что и обычный текст. Синим они кричали на весь экран: в ленте отзывов и в таблице по конкурентам ник встречается в каждой строке, и колонка превращалась в синюю полосу. Что это ссылка, видно по подчёркиванию при наведении и по курсору — этого достаточно. */ a{color:inherit;text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} .muted{color:var(--muted)} .sub{color:var(--muted);font-size:12px} .empty{color:var(--muted);padding:14px 0} .bad{color:var(--danger)} code{font-family:ui-monospace,Consolas,Menlo,monospace;background:var(--fill);padding:1px 5px;border-radius:5px;font-size:12px} /* ── боковое меню ─────────────────────────────────────────── */ /* Полупрозрачное с размытием — то, чем узнаётся iOS 26. На узком экране меню наезжает на содержимое, и размытие работает в полную силу; на широком оно просто чуть темнее панелей, что тоже верно. */ /* Меню — отдельная скруглённая панель, отступающая от края окна, а не приклеенный к нему борт с рамкой. Так в ките macOS: окно имеет внутренний отступ 8, меню лежит внутри со скруглением 18. Разница заметнее, чем кажется: борт разрезает экран пополам, панель — лежит на нём. */ .sidebar{ position:fixed; left:8px; top:8px; bottom:8px; width:var(--sidebar-w); background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:0; border-radius:18px; box-shadow:0 8px 40px rgba(0,0,0,.30), var(--glass-hi); display:flex; flex-direction:column; gap:10px; padding:10px 0; z-index:100; } /* Отступ 10 по краям — у пунктов меню он свой, поэтому у панели боковых отступов нет вовсе. */ .usercard{ display:flex; align-items:center; gap:10px; margin:0 10px; padding:8px 10px; border:1px solid transparent; border-radius:12px; background:var(--fill); } .usercard .avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--raised);flex:0 0 auto} .usercard .meta{min-width:0} .usercard .row{display:flex;align-items:center;gap:6px} .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Нейтральная, а не синяя: это пометка роли, а не действие. Синим она звенела громче имени, рядом с которым стоит. */ .badge{ font-size:10px;text-transform:uppercase;letter-spacing:.05em; background:var(--fill-2);color:var(--muted); padding:2px 7px;border-radius:var(--r-pill);flex:0 0 auto; } #userId{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Двухпиксельный зазор между пунктами. В ките его нет — там пункты стоят вплотную, — но там и подсветка бывает только у одного. У нас раздел «Настройки» подсвечен вместе с выбранным подпунктом под ним, и без зазора две заливки слипались в один блок. */ .nav{display:flex;flex-direction:column;gap:2px} /* Заголовок раздела. Числа из кита: 15 сверху, 5 снизу, отступ слева 18. Без заголовков меню читается плоским списком. */ .nav-sect{ padding:15px 12px 5px 18px; font-size:12px;font-weight:700;color:var(--muted-2); letter-spacing:.01em; } .nav-sect:first-child{padding-top:5px} /* Пункт: в ките высота 24 при тексте 11 — это размеры для macOS, где интерфейс мельче. На мониторе в браузере так читается плохо, поэтому строка 34 при тексте 13.5. Всё равно ощутимо плотнее прежних сорока, но буквы не приходится выискивать. */ .nav-item{ display:flex;align-items:center;gap:9px; height:34px;margin:0 10px;padding:0 8px; background:none;border:0;border-radius:9px;color:var(--text); cursor:pointer;font:inherit;font-size:13.5px;text-align:left; } .nav-item:hover{background:var(--fill)} /* Выбранный раздел подсвечен едва заметно, а цветом отмечен только значок — так в ките. Прежняя сплошная синяя заливка во всю кнопку выдавала, что делал не Apple. */ .nav-item.is-active{background:var(--sel);color:var(--text)} .nav-item.is-active .ico{color:var(--accent);opacity:1} /* Иконки заливные и наследуют цвет текста, поэтому одинаково выглядят и в меню, и на кнопке, и внутри ячейки таблицы. */ .ico{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-0.24em} /* Значок в меню приглушён, пока пункт не выбран: в ките цвет значка и есть главный признак выбранного. */ .nav-item .ico{width:18px;height:18px;opacity:.55} /* Подпункты настроек: их шесть, и одной портянкой они не читаются. */ .nav-chev{margin-left:auto;width:11px!important;height:11px!important;color:var(--muted-2);opacity:1;transition:transform .15s} .nav-item.is-active .nav-chev{color:var(--muted-2)} .nav-item.is-open .nav-chev{transform:rotate(90deg)} /* Подпункты идут с отступом от значка родителя, без вертикальной черты: в ките вложенность показывается отступом. */ /* Зазор от родителя — внутренним отступом, а не внешним: раскрытие анимируется по высоте, и внешний отступ появлялся бы рывком до начала движения, а внутренний растёт вместе с блоком. */ .nav-sub{display:flex;flex-direction:column;gap:2px;margin:0 10px 6px;padding:4px 0 0 27px} .nav-subitem{ text-align:left;height:30px;padding:0 8px;border:0;border-radius:8px;background:transparent; color:var(--muted);font-size:13px;display:flex;align-items:center; } .nav-subitem:hover{background:var(--fill);color:var(--text)} .nav-subitem.is-active{color:var(--text);background:var(--sel)} .nav-subitem:active{transform:none;background:var(--fill-2)} .subtab .ico{width:1.15em;height:1.15em} .copy-btn .ico{width:1.1em;height:1.1em} .sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:0 16px 4px} /* Когда обновились данные — по строке на лоты и на отзывы. Точка слева относится к возрасту данных, а не к тому, «жива ли служба»: последнее человеку ничего не говорит. */ .collect-state{font-size:12px;color:var(--muted);line-height:1.6;display:flex;flex-direction:column;gap:1px} .collect-state b{font-weight:600;color:var(--text)} .upd-row{display:flex;align-items:center;gap:6px;white-space:nowrap} .collect-state .dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:0 0 auto} .dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.err{background:var(--danger)} .logout{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:8px} .burger{ display:none;position:fixed;top:10px;left:10px;z-index:200; background:var(--glass-3); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line);color:var(--text); box-shadow:var(--glass-hi); border-radius:var(--r-pill);padding:7px 11px;cursor:pointer;font-size:15px; } /* ── контент ──────────────────────────────────────────────── */ /* 8 слева до панели меню, её ширина, и ещё 8 зазора справа. */ .content{margin-left:calc(var(--sidebar-w) + 16px);padding:8px 20px 20px 8px;max-width:1520px} .page{display:none} /* Смена раздела: короткое проявление, чтобы переход читался как движение, а не как подмена картинки. */ .page.is-active{display:block;animation:page-in .18s ease-out} @keyframes page-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* Переключение подразделов настроек — тем же коротким проявлением. */ .sect:not([hidden]){animation:page-in .18s ease-out} @media (prefers-reduced-motion:reduce){ .page.is-active,.sect:not([hidden]){animation:none} } /* ── панель инструментов ──────────────────────────────────── */ /* Высота 52 и заголовок В СТРОКЕ с управлением — числа из кита. Прежде заголовок занимал отдельную строку, а под ним лежала стеклянная плита с фильтрами: втрое больше высоты на то же самое. */ .toolbar{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; min-height:52px;margin-bottom:4px; } .tb-title{margin:0;font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap} .tb-grow{flex:1} /* Капсульная группа. В ките кнопки собраны в общую капсулу со своей подложкой, а не разбросаны поодиночке. */ .group{ display:flex;align-items:center;gap:4px;padding:4px; border-radius:296px; background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); box-shadow:0 8px 40px rgba(0,0,0,.24), var(--glass-hi); } .periods{display:flex;gap:4px;flex-wrap:wrap} .periods.group{margin-left:0} .period{ display:inline-flex;align-items:center;justify-content:center; height:28px;min-width:28px;padding:0 12px; background:none;border:0;box-shadow:none;color:var(--text); border-radius:100px;cursor:pointer;font:inherit;font-size:13px; } .period:hover{background:var(--fill)} /* Тем же белым на 12 %, что и выбранный пункт меню. Синей заливки в панели больше нет нигде: в ките ею ничего не помечают. */ .period.is-active{background:var(--sel);color:var(--text)} /* Строка выбора дат разворачивается под панелью инструментов. Своей стеклянной плиты у неё больше нет: в ките управление лежит в строке, а не в плите под заголовком. */ .custom-range{ display:flex;gap:10px;align-items:center;flex-wrap:wrap; padding:0;margin:0 0 12px;font-size:13px; } /* ── панели ───────────────────────────────────────────────── */ /* Рамки и тени убраны: панель отделяется от фона своим цветом, а строки внутри — волоском. Экран перестал быть набором коробок. Рамка оставлена прозрачной, чтобы .panel.accent могла её показать, не сдвигая содержимое на пиксель. */ .panel{ background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line);border-radius:var(--r-card); padding:14px 16px;box-shadow:var(--glass-hi);margin-bottom:16px; } .panel.accent{border-color:var(--accent-line)} .panel.dim{opacity:.72} /* Таблица распирает панель до её краёв: в ките вокруг списка нет ни рамки, ни поля. Отступы панели — 14 по вертикали, 16 по бокам, отсюда и величины. Сверху отступ обязателен. Без него таблица прилипала к тому, что стоит над ней: в разделе «Доступ» шапка начиналась вплотную к полю ввода, и форма с таблицей читались как один слипшийся блок. */ .panel > .table-wrap{margin:14px -16px 0;border-radius:0} .panel > .table-wrap:first-child{margin-top:0} .panel > .table-wrap:last-child{margin-bottom:-14px} .panel-head{margin-bottom:14px} .panel-head h2{margin:0;font-size:15px;font-weight:600} .hint{display:block;color:var(--muted-2);font-size:12.5px;margin-top:5px;max-width:80ch;line-height:1.5} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:1050px){.two-col{grid-template-columns:1fr}} /* ── плитки ───────────────────────────────────────────────── */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px} .card{ background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line);border-radius:var(--r-card); padding:12px 14px;box-shadow:var(--glass-hi); } .card .muted{font-size:12px} .metric{font-size:22px;font-weight:700;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .delta{font-size:12px;margin-top:4px;color:var(--muted-2);min-height:17px} .delta.positive{color:var(--ok)} .delta.negative{color:var(--danger)} .d-up{color:var(--ok)} .d-down{color:var(--danger)} .d-flat{color:var(--muted-2)} .d-new{color:var(--accent)} /* ── таблицы ──────────────────────────────────────────────── */ /* Обводка снята: таблица лежит на панели и отделена от неё только волосками между строками. */ /* Таблица идёт от края до края панели, без своей обводки: в ките список занимает всю ширину области содержимого. */ .table-wrap{border:0;border-radius:0;overflow:auto;max-height:70vh} table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums} /* Шапка: высота 33, обычный регистр, между колонками — вертикальная черта. Прежний капс с разрядкой — приём из веба, в macOS его нет. Стекло здесь работает в полную силу: под шапкой едут строки, и она их размывает, а не закрывает. */ thead th{ position:sticky;top:0;z-index:2;height:36px; background:rgba(40,40,42,.74); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); text-align:left;font-weight:500;font-size:13px;letter-spacing:0; text-transform:none;color:var(--muted-2);white-space:nowrap; padding:0 12px;border-bottom:1px solid var(--border); box-shadow:inset -1px 0 0 var(--border); } thead th:last-child{box-shadow:none} /* Высота задаётся отступами, а не жёстким числом: в ячейке бывает две строки — имя и номер под ним, аватарка рядом с ником, — и при фиксированной высоте содержимое вылезало за края. Отступы дают 34 на обычной строке и ровно столько, сколько нужно, на сложной. Разделителей между строками нет: вместо них чередование фона. Это и была причина, почему таблица выглядела расчерченной сеткой, а не списком. */ td{padding:8px 12px;border:0;font-size:14px} tbody tr:nth-child(even){background:var(--stripe)} tbody tr:hover{background:var(--fill)} th:first-child,td:first-child{padding-left:16px} th:last-child,td:last-child{padding-right:16px} th.num,td.num{text-align:right;white-space:nowrap} /* ── график ───────────────────────────────────────────────── */ .chart{min-height:190px} .bars{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:18px} .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;min-width:18px} .bar{width:100%;max-width:44px;background:linear-gradient(180deg,var(--accent),var(--accent-2));border-radius:6px 6px 0 0} .bar-value{font-size:11px;color:var(--muted-2);margin-bottom:4px} .bar-label{font-size:10px;color:var(--muted-2);margin-top:6px;white-space:nowrap} /* ── ленты и категории ────────────────────────────────────── */ .feed{max-height:440px;overflow-y:auto} .feed-item{padding:10px 0;border-bottom:1px solid var(--border)} .feed-item:last-child{border-bottom:none} .feed-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12px;margin-bottom:3px} .feed-who{color:var(--text)} .feed-cat{color:var(--muted-2)} .feed-time{color:var(--muted-2);margin-left:auto} .feed-name{font-size:13px;word-break:break-word} .feed-price{font-size:12px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums} .hot-row{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--border)} .hot-row:last-child{border-bottom:none} .hot-cat{font-weight:600} .hot-meta{color:var(--accent);font-size:12px} .hot-who{color:var(--muted-2);font-size:12px;margin-left:auto} /* ── формы ────────────────────────────────────────────────── */ input,select,button,textarea{ border:1px solid transparent;border-radius:var(--r-field);padding:9px 12px; background:var(--fill);color:var(--text);font:inherit; } /* Кнопка — капсула, поле ввода — скруглённый прямоугольник. В ките это разные формы, и путать их нельзя: по форме отличают то, на что нажимают, от того, куда пишут. */ button{border-radius:var(--r-pill)} input::placeholder,textarea::placeholder{color:var(--muted-2)} button{cursor:pointer} button.primary{background:var(--accent-fill);border-color:var(--glass-line);color:var(--on-accent);font-weight:600;box-shadow:var(--glass-hi)} button.primary:hover{background:var(--accent-fill-hi)} button.ghost{background:var(--fill);border-color:var(--glass-line);box-shadow:var(--glass-hi)} button.ghost:hover{background:var(--fill-2);color:var(--text)} button:disabled{opacity:.55;cursor:not-allowed} /* Нажатие. Кнопка должна отзываться: без этого непонятно, попал ли клик, — особенно там, где ответ приходит не сразу. */ button,.scope-pill,.subtab,.nav-item,.danger-btn,.copy-btn,.picker-btn{ transition:transform .06s ease,filter .12s,background .15s,border-color .15s,color .15s; } button:active:not(:disabled), .scope-pill:active,.subtab:active,.nav-item:active, .danger-btn:active,.copy-btn:active,.picker-btn:active{ transform:translateY(1px) scale(.985); } button.primary:active:not(:disabled){filter:brightness(.94)} /* Наведение не должно спорить с нажатием: у ленты конкурентов кнопка приподнимается, поэтому вниз её сдвигаем от той же точки. */ .scope-pill:active{transform:translateY(0) scale(.985)} @media (prefers-reduced-motion:reduce){ button,.scope-pill,.subtab,.nav-item,.danger-btn,.copy-btn,.picker-btn{transition:none} button:active:not(:disabled),.scope-pill:active,.subtab:active, .nav-item:active,.danger-btn:active,.copy-btn:active,.picker-btn:active{transform:none} } textarea{width:100%;min-height:92px;resize:vertical;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12px;border-radius:var(--r-field)} .rowed{display:flex;gap:8px;flex-wrap:wrap} .rowed input{flex:1;min-width:220px} .field{margin-bottom:18px} .field:last-child{margin-bottom:0} .field > label{display:block;color:var(--muted);margin-bottom:8px;font-size:13px} .checkline{display:flex;align-items:center;gap:9px;color:var(--text);cursor:pointer} input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer;padding:0} /* ── переключатели ────────────────────────────────────────── */ .switch{ position:relative;display:inline-block;width:42px;height:24px; flex:0 0 auto;vertical-align:middle; } .switch input{ position:absolute;inset:0;width:100%;height:100%; margin:0;padding:0;opacity:0;cursor:pointer;z-index:2; } .switch .track{ position:absolute;inset:0;border-radius:999px; background:var(--fill-2);border:1px solid transparent; transition:background .18s,border-color .18s; } .switch .knob{ position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%; background:#ffffff;transition:transform .18s,background .18s; box-shadow:0 1px 3px rgba(0,0,0,.4); } /* Включённый переключатель в ките — сплошная зелёная заливка, а не подсветка рамкой. */ .switch input:checked ~ .track{background:var(--ok-fill-hi);border-color:var(--glass-line)} .switch input:checked ~ .knob{transform:translateX(18px);background:#ffffff} .switch input:disabled{cursor:not-allowed} .switch input:disabled ~ .track{opacity:.45} .switch input:disabled ~ .knob{opacity:.45} .switch input:focus-visible ~ .track{outline:2px solid var(--accent);outline-offset:2px} .switch-line{display:flex;align-items:center;gap:10px;cursor:pointer} .form-msg{font-size:13px;min-height:18px;margin:8px 0 0;color:var(--muted)} .form-msg.ok{color:var(--ok)} .form-msg.err{color:var(--danger)} /* Кнопки удаления оформлены так же, как остальные, только в красном: раньше они были простым текстом и не читались как кнопки. */ .danger-btn{ display:inline-flex;align-items:center;gap:6px; background:var(--danger-soft); border:1px solid var(--danger-line); color:var(--danger-text); padding:7px 13px;border-radius:var(--r-pill);font:inherit;font-size:13px;cursor:pointer; transition:background .15s,border-color .15s,color .15s; } .danger-btn:hover{background:rgba(255,66,69,.22);border-color:var(--danger);color:var(--danger-text-2)} .danger-btn:active{background:rgba(255,66,69,.3)} .link-btn{background:none;border:none;color:var(--muted);cursor:pointer;font:inherit;font-size:13px;padding:0} .link-btn:hover{text-decoration:underline;color:var(--text)} button.primary,button.ghost{display:inline-flex;align-items:center;gap:7px;justify-content:center} /* ── выбор конкурента ─────────────────────────────────────── */ .scope-bar{ display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:4px; scrollbar-width:thin; } .scope-bar::-webkit-scrollbar{height:6px} .scope-bar::-webkit-scrollbar-thumb{background:var(--fill-2);border-radius:3px} .scope-pill{ flex:0 0 auto;display:flex;align-items:center;gap:9px; padding:7px 14px 7px 8px;border-radius:var(--r-pill); background:var(--fill);border:1px solid var(--glass-line); box-shadow:var(--glass-hi); color:var(--text);cursor:pointer;font:inherit; transition:background .15s,border-color .15s,transform .08s; } .scope-pill:hover{background:var(--fill-2);border-color:var(--glass-line);transform:translateY(-1px)} .scope-pill.is-active{border-color:var(--glass-line);background:var(--accent-fill)} .scope-pill.is-active .scope-name, .scope-pill.is-active .scope-sub{color:var(--on-accent)} .scope-pill.is-active .scope-count{background:rgba(255,255,255,.22);color:var(--on-accent)} .scope-pill .ico{width:20px;height:20px;margin-left:5px;color:var(--muted-2)} .scope-pill.is-active .ico{color:var(--on-accent)} /* Свой аккаунт. Из анализа не убран — сравнивать себя с рынком нормально, — но в сводные числа не входит, и цвет об этом напоминает, чтобы человек не принял свои лоты за чужие. */ .scope-pill.is-self{border-color:var(--ok-line);background:var(--ok-soft)} .scope-pill.is-self:hover{border-color:var(--ok);background:rgba(48,209,88,.2)} .scope-pill.is-self.is-active{border-color:var(--glass-line);background:var(--ok-fill)} .scope-pill.is-self .scope-name{color:var(--ok)} .scope-pill.is-self.is-active .scope-name, .scope-pill.is-self.is-active .scope-sub, .scope-pill.is-self.is-active .ico{color:var(--on-ok)} .scope-pill.is-self.is-active .scope-count{background:rgba(0,0,0,.2);color:var(--on-ok)} /* Подпись стоит СПРАВА от имени, а не третьей строкой под ним: строкой она поднимала высоту всей ленты, потому что кнопки в ряду тянутся по самой высокой. Кнопка должна становиться длиннее, а не толще. */ .scope-own{ flex:0 0 auto;margin-left:2px;padding:2px 9px;border-radius:var(--r-pill); font-size:11px;font-weight:600;letter-spacing:.02em; color:var(--ok);background:var(--ok-soft);border:1px solid var(--ok-line); } /* Выбор внутри пачки твинков: список под кнопкой продавца, через тот же перенос наверх, что и остальные списки. */ #scopeMenu{min-width:240px} /* Стрелка у продавца с твинками: в наборе смотрит вправо, здесь вниз. */ .scope-pill .chev{width:14px;height:14px;margin-left:0;transform:rotate(90deg)} #scopeMenu .picker-item{gap:8px} #scopeMenu .picker-item .sub{margin-left:auto} /* Имя аккаунта в таблице: ник и пометки в одну строку, без переносов; под ними — номер и чей это твинк. */ .acc-name{display:flex;align-items:center;gap:8px;white-space:nowrap} .acc-sub{margin-top:3px;white-space:nowrap} /* ── связка твинков ───────────────────────────────────────── */ .checklist{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow:auto;padding:2px 0;transition:opacity .15s} .checklist .checkline{padding:6px 8px;border-radius:8px;gap:10px} .checklist .checkline .sub{margin-left:auto} .checklist .checkline:hover{background:var(--fill)} /* Пока основной не выбран — список виден, но приглушён и не нажимается. */ .checklist.is-off{opacity:.4;pointer-events:none} .link-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--border)} .link-row:last-child{border-bottom:0} .link-arrow{color:var(--muted-2)} .link-alt{ display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px; border-radius:var(--r-pill);background:var(--fill);font-size:13px; } .link-alt .link-btn{color:var(--muted-2);font-size:15px;line-height:1} .link-alt .link-btn:hover{color:var(--danger);text-decoration:none} /* Пометка «твинк» — нейтральная, серая: это не роль, а принадлежность. Двойной класс, чтобы перебить зелёный у .self-badge. */ .self-badge.alt-badge{color:var(--muted);background:var(--fill-2);border-color:transparent;margin-left:0} /* ── выбор аккаунта с поиском ──────────────────────────────── */ /* Обычный рисует операционная система: он всегда светлый, с прямыми углами и своей подсветкой, и на тёмной панели выглядел заплаткой. Перекрасить его нельзя, поэтому вид заменён целиком, а сам список остался под ним и по-прежнему хранит значение. Отличия от выбора аккаунта: ширина по содержимому, а не в треть строки, и нет поиска — тут четыре строки, искать нечего. */ .picker.is-inline{flex:0 0 auto;min-width:0;max-width:none;width:auto} .picker.is-inline .picker-btn{ padding:6px 13px;border-radius:var(--r-pill);white-space:nowrap; color:var(--text); } .picker.is-inline .picker-menu{right:auto;min-width:100%;width:max-content} .picker.is-inline .picker-list{max-height:320px} /* Зелёный в выборе аккаунта значит «это вы». Здесь такого смысла нет, поэтому выбранная строка помечается акцентом. */ .picker.is-inline .picker-item.is-chosen{color:var(--accent)} /* ── календарь ──────────────────────────────────────────────── Календарь у рисует сам браузер: он всегда светлый, с прямыми углами и своей подсветкой, и никакими стилями до него не дотянуться. Поэтому здесь свой. Само поле осталось в разметке и хранит значение. */ .picker.is-date{flex:0 0 auto;min-width:0;max-width:none;width:auto} .picker.is-date .picker-btn{ padding:6px 13px;border-radius:var(--r-pill);white-space:nowrap; font-variant-numeric:tabular-nums; } .cal-menu{right:auto;left:0;width:max-content;padding:10px} .cal-head{ display:flex;align-items:center;gap:8px; margin-bottom:8px;padding:0 2px; } .cal-head b{flex:1;text-align:center;font-size:13px;font-weight:600} .cal-nav{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;padding:0;flex:0 0 auto; background:var(--fill);border:1px solid var(--glass-line); border-radius:var(--r-pill);color:var(--muted); } .cal-nav:hover{background:var(--fill-2);color:var(--text)} .cal-nav .ico{width:14px;height:14px} /* Стрелка в наборе смотрит вправо — для «назад» её разворачиваем. */ .cal-nav .chev-l{transform:rotate(180deg)} .cal-grid{display:grid;grid-template-columns:repeat(7,34px);gap:2px} .cal-dow{margin-bottom:4px} .cal-dow span{ display:grid;place-items:center;height:24px; font-size:11px;color:var(--muted-2); } .cal-day{ height:32px;padding:0;font-size:13px;font-variant-numeric:tabular-nums; background:transparent;border:1px solid transparent;border-radius:var(--r-pill); color:var(--text); } .cal-day:hover:not(:disabled){background:var(--fill-2)} /* Дни соседних месяцев показываем, чтобы неделя не рвалась, но приглушаем: иначе взгляд цепляется не за тот месяц. */ .cal-day.is-out{color:var(--muted-2)} /* Сегодня помечено кольцом, а выбранное — заливкой. Так видно оба сразу, когда выбран не сегодняшний день. */ .cal-day.is-today{border-color:var(--accent-line)} .cal-day.is-sel{background:var(--accent-fill);border-color:var(--glass-line);color:var(--on-accent);font-weight:600} .cal-day:disabled{color:var(--muted-3);cursor:not-allowed} .cal-day:disabled:hover{background:transparent} .cal-foot{ display:flex;justify-content:flex-end; margin-top:8px;padding-top:8px;border-top:1px solid var(--border); } /* ── ИИ-агент: находки ─────────────────────────────────────── */ .hide-marked{margin-left:auto;color:var(--muted);font-size:13px} .advisor-note{ margin:0 0 14px;padding:11px 14px;border-radius:var(--r-field); background:var(--warn-soft);border:1px solid var(--warn-line); color:var(--text);font-size:13px;line-height:1.55; } .advisor-note b{color:var(--warn)} .sig-group{margin-bottom:18px} .sig-group:last-child{margin-bottom:0} .sig-group-head{ display:flex;align-items:baseline;gap:9px;margin:0 0 9px; font-size:13px;font-weight:600;color:var(--text); } .sig-group-head .count{color:var(--muted-2);font-weight:400;font-size:12px} /* Находки лежат внутри панели, которая сама уже стеклянная. Второе размытие поверх первого даёт кашу, поэтому здесь только полупрозрачная подложка и волосок по краю. */ .sig{ border:1px solid var(--glass-line);border-radius:var(--r-field);margin-bottom:7px; background:var(--fill);box-shadow:var(--glass-hi);overflow:hidden; } .sig:last-child{margin-bottom:0} .sig.is-marked{opacity:.55} .sig-row{ display:flex;align-items:center;gap:12px;padding:10px 13px;cursor:pointer; } .sig-row:hover{background:var(--fill)} .sig-main{flex:1;min-width:0} .sig-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .sig-sum{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5} .sig-chip{ padding:1px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:500; border:1px solid var(--glass-line);background:var(--fill);color:var(--muted); } .sig-chip.hot{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)} .sig-chip.mine{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-line)} .sig-marks{display:flex;gap:5px;flex:0 0 auto} .mark-btn{ padding:4px 11px;border-radius:var(--r-pill);font-size:11px; background:var(--fill);border:1px solid var(--glass-line);color:var(--muted); box-shadow:var(--glass-hi); } .mark-btn:hover{background:var(--fill-2);color:var(--text)} .mark-btn.is-on{background:var(--accent-fill);border-color:var(--glass-line);color:var(--on-accent)} .mark-btn.is-on[data-mark="skip"]{background:var(--danger-fill);border-color:var(--glass-line);color:#fff} .mark-btn.is-on[data-mark="have"]{background:var(--ok-fill);border-color:var(--glass-line);color:var(--on-ok)} .sig-detail{ border-top:1px solid var(--border);padding:11px 13px; background:rgba(0,0,0,.28); } .sig-facts{display:flex;flex-wrap:wrap;gap:7px 20px;margin:0} .sig-fact{font-size:12px} .sig-fact .k{color:var(--muted-2)} .sig-fact .v{font-variant-numeric:tabular-nums} .sig-why{margin:9px 0 0;font-size:12px;color:var(--muted);line-height:1.55} @media (max-width:700px){ .sig-row{flex-wrap:wrap} .sig-marks{width:100%} } /* ── всплывающие сообщения ─────────────────────────────────── */ /* Раньше ответ появлялся строкой под формой, и при длинной странице человек его просто не видел: сохранил и не понял, получилось ли. */ .toasts{ position:fixed;top:14px;right:14px;z-index:200; display:flex;flex-direction:column;gap:8px; max-width:min(380px,calc(100vw - 28px));pointer-events:none; } .toast{ display:flex;align-items:flex-start;gap:9px; padding:11px 14px;border-radius:var(--r-field); background:var(--glass-3); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line); box-shadow:var(--shadow-pop),var(--glass-hi); color:var(--text);font-size:13px;line-height:1.45; pointer-events:auto; animation:toast-in .18s ease-out; } .toast.is-hiding{animation:toast-out .18s ease-in forwards} .toast .ico{width:17px;height:17px;flex:0 0 auto;margin-top:1px} .toast.ok{border-color:var(--ok-line)} .toast.ok .ico{color:var(--ok)} .toast.err{border-color:var(--danger-line)} .toast.err .ico{color:var(--danger)} .toast.info .ico{color:var(--accent)} @keyframes toast-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} @keyframes toast-out{to{opacity:0;transform:translateX(14px)}} @media (prefers-reduced-motion:reduce){ .toast,.toast.is-hiding{animation:none} } .self-badge{ display:inline-block;margin-left:7px;padding:1px 9px;border-radius:var(--r-pill); font-size:11px;color:var(--ok);background:var(--ok-soft); border:1px solid var(--ok-line);vertical-align:middle; } .scope-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--raised);flex:0 0 auto} .scope-meta{display:flex;flex-direction:column;gap:1px;text-align:left} .scope-name{font-size:13px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .scope-sub{font-size:11px;color:var(--muted-2)} .scope-count{ font-size:11px;color:var(--muted);background:var(--fill-2); padding:1px 8px;border-radius:var(--r-pill); } /* ── подвкладки ───────────────────────────────────────────── */ .subtabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:0} .subtab{ display:inline-flex;align-items:center;gap:7px; background:none;border:none;border-bottom:2px solid transparent; color:var(--muted);padding:10px 14px;cursor:pointer;font:inherit;font-size:14px; border-radius:var(--r-sm) var(--r-sm) 0 0; } .subtab:hover{color:var(--text);background:var(--fill)} .subtab.is-active{color:var(--accent);border-bottom-color:var(--accent)} .tabview{display:none} .tabview.is-active{display:block} /* ── раскрывающиеся блоки настроек ────────────────────────── */ .fold summary{list-style:none;cursor:pointer} .fold summary::-webkit-details-marker{display:none} .fold-head{ display:flex;align-items:flex-start;gap:10px; padding:2px 0;user-select:none; } .fold-head b{font-size:15px;font-weight:600;display:block} .fold-head .hint{margin-top:3px} .fold-head .ico{margin-top:2px;color:var(--muted-2);transition:transform .18s} .fold[open] .fold-head .chev{transform:rotate(90deg)} /* Пока блок сворачивается, стрелка уже смотрит вбок: иначе она дёргается в самом конце движения, отдельно от него. */ .fold.is-closing .fold-head .chev{transform:rotate(0deg)} .fold-head:hover .ico{color:var(--accent)} .fold-count{ margin-left:auto;flex:0 0 auto;font-size:11px;color:var(--muted); background:var(--fill-2);padding:2px 10px;border-radius:var(--r-pill);white-space:nowrap; } .fold-count.has{background:var(--danger-soft);color:var(--danger-text)} /* Содержимое сворачиваемого блока скрипт оборачивает в .fold-body, чтобы анимировать одно тело, а не три соседних куска. Отступы поэтому считаем и от обёртки, и внутри неё. */ .fold > .table-wrap,.fold > div{margin-top:14px} .fold-body > .table-wrap,.fold-body > div{margin-top:14px} .fold-body > :first-child{margin-top:0} /* Счётчик подписчиков: имена раскрываются при наведении, чтобы длинный список не распирал колонку таблицы. */ /* Тоже нейтральный: это счётчик, а не действие. */ .who-badge{ position:relative;display:inline-flex;align-items:center;justify-content:center; min-width:28px;height:24px;padding:0 10px;border-radius:var(--r-pill); background:var(--fill-2);border:1px solid transparent; color:var(--text);font-size:12px;cursor:default; } .who-pop{ position:absolute;top:calc(100% + 6px);left:0;z-index:60; display:none;flex-direction:column;gap:6px;min-width:200px; background:var(--glass-3); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--line-strong,var(--glass-line)); border-radius:var(--r-field);padding:9px 11px; box-shadow:var(--shadow-pop),var(--glass-hi); color:var(--text);text-align:left;cursor:default; } .who-badge:hover .who-pop,.who-badge:focus-within .who-pop{display:flex} .who-row{display:flex;align-items:baseline;gap:8px;font-size:12px;white-space:nowrap} .who-row .sub{margin-left:auto} .who-layers{color:var(--accent);font-size:11px;flex-basis:100%} .copy-btn{ background:none;border:1px solid transparent;color:var(--muted-2); border-radius:var(--r-sm);padding:3px 6px;cursor:pointer;line-height:1; display:inline-flex;align-items:center; } .copy-btn:hover{color:var(--accent);border-color:transparent;background:var(--fill)} .copy-btn.copied{color:var(--ok);border-color:var(--ok-line)} /* «с» и «по» стоят рядом с полем, а не над ним: строкой выше они поднимали высоту всей строки вдвое. */ .custom-range label{ display:inline-flex;align-items:center;gap:8px; color:var(--muted);white-space:nowrap; } /* ── журнал сбоев ─────────────────────────────────────────── */ .err-item{ border:1px solid transparent;border-left:3px solid var(--danger); border-radius:var(--r-field);padding:11px 13px;margin-bottom:9px;background:var(--danger-soft); } .err-top{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;font-size:12px;margin-bottom:5px} .err-kind{ text-transform:uppercase;letter-spacing:.05em;font-size:10px; color:var(--muted);background:var(--fill-2);padding:1px 8px;border-radius:var(--r-pill); } .err-who{color:var(--text)} .err-count{color:var(--danger-text);font-weight:600} .err-time{color:var(--muted-2);margin-left:auto} .err-text{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12px;color:var(--danger-text-2);word-break:break-word} /* ── ручное обновление и прогресс ─────────────────────────── */ .refresh-bar{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px} .progress{ flex:1;min-width:280px; background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line);box-shadow:var(--glass-hi); border-radius:var(--r-card);padding:10px 13px; } .progress-head{display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--muted);margin-bottom:6px} .progress-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Полоса загрузки в духе Apple: тонкая, капсулой, сплошной заливкой акцента по приглушённой дорожке. Прежняя была шестнадцати пикселей в высоту и с градиентом — она читалась как самостоятельный элемент и перетягивала внимание на себя. У Apple полоса намеренно скромная: она сообщает ход дела, а не требует на себя смотреть. */ .progress-track{ width:100%;height:6px;border-radius:var(--r-pill);background:var(--fill-2); border:0;overflow:hidden; } .progress-fill{ width:0;height:100%;border-radius:var(--r-pill); background:var(--accent); transition:width .3s cubic-bezier(.32,.72,0,1); } .progress-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted-2);margin-top:6px} .backfill-note{ display:flex;align-items:center;gap:8px; font-size:12px;color:var(--muted);background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:var(--r-field); padding:9px 13px;margin:0 0 14px; } .sort-bar{margin-bottom:12px;align-items:center;font-size:13px} .sort-bar label{display:flex;align-items:center;gap:8px;color:var(--muted)} .sort-bar select{padding:6px 12px;border-radius:var(--r-pill)} /* ── продавец с аватаркой ─────────────────────────────────── */ .seller{display:inline-flex;align-items:center;gap:10px;min-width:0} .mini-avatar{ width:28px;height:28px;border-radius:50%;object-fit:cover; background:var(--raised);flex:0 0 auto; } .feed-head .seller{font-size:13px} .feed-head .seller a{color:var(--text)} tr.gone{opacity:.45;text-decoration:line-through} .setting-row{display:grid;grid-template-columns:1fr 260px;gap:12px 18px;align-items:start;padding:13px 0;border-bottom:1px solid var(--border)} .setting-row:last-of-type{border-bottom:none} .setting-title{font-size:13px} .setting-hint{color:var(--muted-2);font-size:12px;margin-top:3px} .setting-ctl{display:flex;flex-direction:column;gap:6px} .setting-ctl input[type=number],.setting-ctl input[type=text]{width:100%} .setting-src{font-size:11px;color:var(--muted-2)} @media (max-width:760px){.setting-row{grid-template-columns:1fr}} .bot-state{display:flex;flex-direction:column;gap:6px;font-size:13px} .bot-line{display:flex;gap:8px;align-items:baseline} .bot-line b{font-weight:600} .loading{ position:fixed;bottom:16px;right:16px; background:var(--glass-3); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line);color:var(--muted); padding:6px 14px;border-radius:var(--r-pill);font-size:12px; box-shadow:var(--shadow-pop),var(--glass-hi); } /* ── вход ─────────────────────────────────────────────────── */ .login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px} .login-card{ background:var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); border:1px solid var(--glass-line);border-radius:26px; padding:32px;max-width:420px;text-align:center; box-shadow:var(--shadow-pop),var(--glass-hi); } .login-card h1{margin:0 0 8px;font-size:20px} .login-widget{margin:24px 0 8px;display:flex;justify-content:center;min-height:48px} .login-error{color:var(--danger);font-size:13px} .login-note{font-size:12px;margin-bottom:0} .login-alt{margin-top:22px;padding-top:4px} .login-or{position:relative;text-align:center;margin-bottom:14px} .login-or::before{ content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border); } .login-or span{ position:relative;background:var(--panel);padding:0 12px; color:var(--muted-2);font-size:11px;text-transform:uppercase;letter-spacing:.06em; } .login-alt p{font-size:13px;margin:0 0 12px} .bot-link{ display:inline-block;background:var(--accent-fill); border:1px solid var(--glass-line);color:var(--on-accent); box-shadow:var(--glass-hi); padding:9px 20px;border-radius:var(--r-pill);font-size:13px; } .bot-link:hover{background:var(--accent-fill-hi);text-decoration:none} .login-alt .login-note{margin-top:12px} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ── мобильные ────────────────────────────────────────────── */ @media (max-width:900px){ .burger{display:block} .sidebar{transform:translateX(-100%);transition:transform .2s ease} .sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.6)} .content{margin-left:0;padding:56px 14px 20px} .sidebar{left:0;top:0;bottom:0;border-radius:0} .stats{grid-template-columns:repeat(2,minmax(140px,1fr))} .metric{font-size:18px} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ── ИИ-агент: разговор ─────────────────────────────────────── Слева список разговоров, справа лента. Ответ агента — не пузырь мессенджера, а текст с полями: он длинный, с заголовками и списками, и пузырь его только сужает. Реплика человека — короткая, её можно и в капсулу. */ .atab{display:none} .atab.is-active{display:block} .chat{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:start} .chat-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:8px;min-width:0} .chat-new{width:100%} .chat-list{display:flex;flex-direction:column;gap:2px;max-height:70vh;overflow:auto} .chat-item{ display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px; color:var(--muted);font-size:13px;cursor:pointer;border:0;background:none;text-align:left; font:inherit;width:100%;min-width:0; } .chat-item:hover{background:var(--fill);color:var(--text)} .chat-item.is-active{background:var(--sel);color:var(--text)} .chat-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-item .del{ flex:0 0 auto;opacity:0;color:var(--muted-2);font-size:15px;line-height:1;padding:0 2px; background:none;border:0;cursor:pointer; } .chat-item:hover .del{opacity:1} .chat-item .del:hover{color:var(--danger)} .chat-empty{color:var(--muted-2);font-size:12.5px;padding:8px 10px;line-height:1.5} .chat-main{display:flex;flex-direction:column;min-height:60vh;min-width:0} .chat-msgs{flex:1;display:flex;flex-direction:column;gap:16px;overflow:auto;max-height:64vh;padding:2px 2px 6px;scroll-behavior:smooth} .chat-hello{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:70ch;padding:6px 0 0} .chat-hello b{color:var(--text)} .msg{display:flex;flex-direction:column;gap:6px;min-width:0} .msg.user{align-items:flex-end} .msg.user .msg-body{ background:var(--sel);border-radius:16px 16px 4px 16px;padding:9px 13px; max-width:80%;white-space:pre-wrap;line-height:1.5; } .msg.assistant .msg-body{ padding:2px 0 0;line-height:1.6;max-width:86ch;font-size:14px; } .msg-body p{margin:0 0 10px} .msg-body p:last-child{margin-bottom:0} .msg-body h1,.msg-body h2,.msg-body h3{margin:14px 0 6px;font-size:15px;font-weight:600} .msg-body h1:first-child,.msg-body h2:first-child,.msg-body h3:first-child{margin-top:0} .msg-body ul,.msg-body ol{margin:0 0 10px;padding-left:22px} .msg-body li{margin:3px 0} .msg-body code{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12.5px;background:var(--fill);padding:1px 5px;border-radius:5px} .msg-body pre{background:var(--fill);padding:10px 12px;border-radius:var(--r-field);overflow:auto;font-size:12.5px;margin:0 0 10px} .msg-body pre code{background:none;padding:0} .msg-body a{color:var(--text);text-decoration:underline;text-decoration-color:var(--muted-2)} .msg-body a:hover{text-decoration-color:var(--text)} .msg-body table{width:auto;margin:4px 0 12px;border:1px solid var(--border);border-radius:8px;overflow:hidden} .msg-body th,.msg-body td{padding:6px 10px;font-size:13px} .msg-body th{color:var(--muted);font-weight:500;text-align:left;background:var(--fill)} .msg-body tr:nth-child(even) td{background:var(--stripe)} .msg-body blockquote{margin:0 0 10px;padding:2px 12px;border-left:2px solid var(--border);color:var(--muted)} .msg-body hr{border:0;border-top:1px solid var(--border);margin:12px 0} /* След работы: что агент вызывал. Свёрнут в одну строку, по щелчку раскрывается — чтобы видеть, откуда взялись числа. */ .msg-steps{font-size:12.5px;color:var(--muted-2)} .msg-steps summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px} .msg-steps summary::-webkit-details-marker{display:none} .msg-steps summary:hover{color:var(--muted)} .msg-steps summary .chev{width:.9em;height:.9em;transition:transform .18s} .msg-steps[open] summary .chev{transform:rotate(90deg)} .msg-steps ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px} .msg-steps li{display:flex;gap:8px;align-items:baseline;min-width:0} .msg-steps li .n{color:var(--muted);flex:0 0 auto} .msg-steps li .b{color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msg-steps li .a{color:var(--muted-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40ch} .msg-steps li.err .b{color:var(--danger-text)} .msg-foot{font-size:11.5px;color:var(--muted-3);display:flex;gap:12px;flex-wrap:wrap} .msg-foot .mem{color:var(--muted-2)} .msg.error .msg-body{color:var(--danger-text)} /* Пока агент думает — строка с бегущими точками, не спиннер. */ .thinking{color:var(--muted);font-size:13px} .thinking .dots{display:inline-block;width:1.4em;text-align:left;overflow:hidden;vertical-align:bottom;animation:dots 1.2s steps(4,end) infinite} @keyframes dots{from{width:0}to{width:1.4em}} .chat-templates{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 8px} .tpl{ font-size:12.5px;padding:6px 11px;border-radius:var(--r-pill); background:var(--fill);color:var(--muted);border:1px solid transparent;cursor:pointer;font:inherit; } .tpl:hover{background:var(--fill-2);color:var(--text)} .tpl:disabled{opacity:.5;cursor:default} .chat-form{display:flex;gap:8px;align-items:flex-end} .chat-form textarea{flex:1;min-height:44px;max-height:200px;font-family:inherit;font-size:14px;resize:vertical} .chat-form button{flex:0 0 auto;height:40px} @media (max-width:900px){ .chat{grid-template-columns:1fr} .chat-side{position:static} .chat-list{max-height:160px} } /* ── ИИ-агент: настройки ──────────────────────────────────────── */ input.short{max-width:120px} .model-list{ margin-top:8px;border:1px solid var(--border);border-radius:var(--r-field); background:var(--raised);overflow:hidden; } .model-list input{width:100%;border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent} .model-list input:focus{outline:none;border-bottom-color:var(--accent)} .model-items{max-height:260px;overflow:auto;padding:4px} .model-item{ display:flex;align-items:baseline;gap:10px;padding:6px 9px;border-radius:7px;cursor:pointer; font-size:13px;min-width:0; } .model-item:hover{background:var(--fill)} .model-item .id{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .model-item .price{color:var(--muted-2);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums} .model-item.no-tools{opacity:.45} .model-empty{padding:10px;color:var(--muted-2);font-size:13px} .file-list{display:flex;flex-direction:column;gap:2px} .file-row{ display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center; padding:8px 10px;border-radius:8px; } .file-row:hover{background:var(--fill)} .file-row.is-open{background:var(--sel)} .file-row .name{font-weight:600;font-size:13.5px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap} .file-row .name .path{color:var(--muted-2);font-weight:400;font-size:12px;font-family:ui-monospace,Consolas,Menlo,monospace} .file-row .meta{color:var(--muted-2);font-size:12px;grid-column:1;line-height:1.45} .file-row .meta.agent{color:var(--muted)} .file-row .acts{grid-row:1 / span 2;display:flex;gap:4px;align-items:center} .file-row .acts .link-btn{padding:4px 7px;border-radius:6px} .file-row .acts .link-btn:hover{background:var(--fill-2);text-decoration:none} .file-row .acts .link-btn.danger:hover{color:var(--danger)} .agent-editor{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:var(--r-field);background:var(--raised)} .agent-editor-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px} .agent-editor-head b{font-size:13.5px} .agent-editor-head .hint{margin:0} .agent-editor textarea{font-family:inherit;font-size:13.5px;line-height:1.5;margin-bottom:10px} .editor-size{margin:auto 0} .new-file{margin-top:18px} a.btn-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text);padding:9px 14px} .skills-list{display:flex;flex-direction:column;gap:6px} .skill{border:1px solid var(--border);border-radius:var(--r-field);overflow:hidden} .skill summary{list-style:none;cursor:pointer;padding:8px 12px;font-size:13px;display:flex;justify-content:space-between;gap:10px} .skill summary::-webkit-details-marker{display:none} .skill summary:hover{background:var(--fill)} .skill summary .path{color:var(--muted-2);font-family:ui-monospace,Consolas,Menlo,monospace;font-size:12px} .skill pre{ margin:0;padding:10px 12px;border-top:1px solid var(--border);white-space:pre-wrap; font-family:inherit;font-size:13px;line-height:1.55;color:var(--muted);max-height:360px;overflow:auto; } /* Модель, у которой есть оговорка: бесплатная или без инструментов. Выбрать можно, но точка на полях говорит, что стоит навести. */ .model-item.is-warn .id::after{ content:'';display:inline-block;width:5px;height:5px;margin-left:7px; border-radius:50%;background:var(--warn);vertical-align:middle; } /* ── находки: ступени силы ───────────────────────────────────── Лента одна, разложена по ступеням: сильное сверху, фон свёрнут. Ступень помечена точкой перед заголовком — нейтральной, как всё выделение в панели: белая, приглушённая, едва заметная. */ .sig-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px} .tpl.is-active{background:var(--sel);color:var(--text)} .tpl:disabled{opacity:.4;cursor:default} .sig-group-head{flex-wrap:wrap} .sig-group-head .hint{margin:0;font-weight:400;font-size:12px;flex-basis:100%} .grade-dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--muted-2);flex:0 0 auto; } .grade-strong .grade-dot{background:var(--text)} .grade-medium .grade-dot{background:var(--muted)} .sig-kind{ flex:0 0 76px;font-size:11px;color:var(--muted-2);text-transform:lowercase; letter-spacing:.01em;padding-top:2px; } .grade-strong .sig-kind{color:var(--muted)} .sig-acts{display:flex;gap:5px;flex:0 0 auto;align-items:center;flex-wrap:wrap;justify-content:flex-end} .mark-btn.ask{background:var(--fill-2);color:var(--text)} .mark-btn.ask:hover{background:var(--fill-3)} .sig-weak{margin-top:18px} .sig-weak .fold-head b .count{color:var(--muted-2);font-weight:400;font-size:12px;margin-left:6px} .sig-weak .sig{opacity:.8} @media (max-width:700px){ .sig-kind{flex-basis:100%;padding-top:0} .sig-acts{width:100%;justify-content:flex-start} } /* ── находки: значки видов, бан, спокойная плашка ──────────────── */ .sig-kind{ display:flex;flex-direction:column;align-items:center;gap:4px; flex:0 0 64px;padding-top:0; } .sig-kind .ico{width:20px;height:20px;color:var(--muted-2)} .grade-strong .sig-kind .ico{color:var(--text)} .grade-medium .sig-kind .ico{color:var(--muted)} .mark-btn.ban{color:var(--muted-2)} .mark-btn.ban:hover{color:var(--danger-text);background:var(--danger-soft);border-color:var(--danger-line)} .advisor-note.is-info{background:var(--fill);border-color:var(--glass-line);color:var(--muted)} #bansFold{margin-top:18px} .ban-row{display:flex;gap:12px;align-items:baseline;padding:7px 10px;border-radius:8px;flex-wrap:wrap} .ban-row:hover{background:var(--fill)} .ban-kind{flex:0 0 76px;font-size:11px;color:var(--muted-2);text-transform:lowercase} .ban-title{flex:1;min-width:160px;font-size:13px} .ban-row .hint{margin:0} /* ── кольцевая диаграмма ──────────────────────────────────────── */ .donut-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:6px 0} .donut{width:180px;height:180px;flex:0 0 auto} .donut path{transition:opacity .15s} .donut path:hover{opacity:.75} .donut-total{fill:var(--text);font-size:26px;font-weight:600;text-anchor:middle;font-variant-numeric:tabular-nums} .donut-label{fill:var(--muted-2);font-size:10px;text-anchor:middle} .donut-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:5px} .donut-item{display:flex;align-items:center;gap:9px;font-size:13px;min-width:0} .donut-item .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.08)} .donut-item .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .donut-item .num{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px} .chart-extra{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)} /* ── одна игра крупно ─────────────────────────────────────────── */ tr.is-link{cursor:pointer} tr.is-link:hover td{background:var(--fill)} body.has-modal{overflow:hidden} .modal-back{ position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center; padding:24px;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .modal{ width:min(1100px,100%);max-height:88vh;display:flex;flex-direction:column; background:var(--panel);border:1px solid var(--glass-line);border-radius:var(--r-field); box-shadow:0 24px 80px rgba(0,0,0,.6);overflow:hidden; } .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:16px 18px 12px;border-bottom:1px solid var(--border)} .modal-head h2{margin:0;font-size:17px;font-weight:600} .modal-head .hint{margin-top:4px} .modal-body{display:grid;grid-template-columns:3fr 2fr;gap:0;overflow:hidden;min-height:0} .modal-body section{min-width:0;display:flex;flex-direction:column;padding:12px 0 0} .modal-body section + section{border-left:1px solid var(--border)} .modal-body h3{margin:0 18px 8px;font-size:13px;color:var(--muted);font-weight:500} .modal-table{max-height:calc(88vh - 120px);border:0;border-radius:0} @media (max-width:900px){ .modal-body{grid-template-columns:1fr} .modal-body section + section{border-left:0;border-top:1px solid var(--border)} .modal-table{max-height:38vh} } /* Твинки своего аккаунта в «Моём профиле». */ .self-twins{display:flex;flex-wrap:wrap;gap:6px;align-items:center}