/* ════════════════════════════════════════════════════════════════════
LIQUID GLASS «Deep» — визуальный скин личного кабинета FastyConnection
────────────────────────────────────────────────────────────────────
Подключается ПОСЛЕДНИМ (после layout/components/chat/channel/payment/
fastyvideo) и переопределяет ТОЛЬКО внешний вид. JS-логика и DOM
не меняются. Откат = убрать на этот файл из user.html.
Правила безопасности (см. инвентаризацию):
• не трогаем display у .hidden/.visible/#chatSection/#channelLoadMore;
• #status перезаписывается JS целиком — стили только через
.header .status / .connected / .connecting;
• ::before/::after у .message.admin-reply (метка «Поддержка») и
.message.typing (точка) не пере-объявляем;
• backdrop-filter только на структурных поверхностях (шапка, док,
ввод, модалка, auth) — НЕ на карточках в скролл-лентах;
• disabled-состояния JS ставит инлайн opacity — не строим hover
на opacity;
• .main-menu: базовому классу не добавляем padding/border
(механика collapsed/expanded на max-height).
════════════════════════════════════════════════════════════════════ */
/* ── 1. Токены ─────────────────────────────────────────────────────── */
:root {
--bg-primary: #07080f;
--bg-secondary: rgba(16, 19, 32, 0.62);
--bg-card: rgba(255, 255, 255, 0.065);
--bg-input: rgba(255, 255, 255, 0.07);
--bg-hover: rgba(255, 255, 255, 0.12);
--border: rgba(255, 255, 255, 0.11);
--border-light: rgba(255, 255, 255, 0.18);
--text-primary: #f4f6fb;
--text-secondary: rgba(244, 246, 251, 0.6);
--text-muted: rgba(244, 246, 251, 0.38);
--accent: #ff653e;
--accent-hover: #ff7e55;
--accent-glow: rgba(255, 101, 62, 0.22);
--active: rgba(255, 255, 255, 0.16);
--blue: #4da8e8;
--blue-hover: #6db9ee;
--blue-glow: rgba(77, 168, 232, 0.2);
--green: #3fdba2;
--green-bg: rgba(52, 211, 153, 0.1);
--green-border: rgba(52, 211, 153, 0.32);
--yellow: #fbbf24;
--red: #f25555;
--red-bg: rgba(239, 68, 68, 0.12);
--radius: 16px;
--radius-sm: 12px;
--radius-xs: 10px;
--shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
--transition: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
/* Скин-токены */
--lg-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16);
--lg-edge-strong: inset 0 1px 0 rgba(255, 255, 255, 0.28);
--lg-grad-accent: linear-gradient(150deg, #ff653e, #d44a20);
--lg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body {
background: var(--bg-primary);
}
/* ── 2. Аврора-фон ─────────────────────────────────────────────────── */
/* div.lg-aurora добавлен в user.html сразу после .
position:fixed выводит его из flex-потока body; z-index:-1 кладёт
ПОД контент, но НАД фоном body (правила stacking-контекста). */
.lg-aurora {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.lg-aurora::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 130% 90% at 50% -25%, rgba(255, 255, 255, 0.05), transparent 60%);
}
.lg-aurora i {
position: absolute;
border-radius: 50%;
/* Перф: вместо живого filter:blur(110px) — предразмытый radial-gradient.
Блобы анимируются ПОД blur-поверхностями (шапка/док/ввод): живой filter
заставлял пересчитывать оба blur-пасса каждый кадр. */
opacity: 0.42;
will-change: transform;
}
.lg-aurora i:nth-child(1) {
width: 70vw; height: 70vw;
background: radial-gradient(closest-side, rgba(255, 101, 62, 0.9), transparent 72%);
top: -42vw; left: -28vw; /* отодвинут от шапки — не ронять контраст текста */
opacity: 0.36;
animation: lgDrift1 28s var(--lg-ease) infinite alternate;
}
.lg-aurora i:nth-child(2) {
width: 62vw; height: 62vw;
background: radial-gradient(closest-side, rgba(59, 158, 223, 0.9), transparent 72%);
bottom: -26vw; right: -16vw;
opacity: 0.5;
animation: lgDrift2 34s var(--lg-ease) infinite alternate;
}
.lg-aurora i:nth-child(3) {
width: 46vw; height: 46vw;
background: radial-gradient(closest-side, rgba(139, 92, 246, 0.9), transparent 72%);
top: 38%; left: 56%;
opacity: 0.32;
animation: lgDrift3 40s var(--lg-ease) infinite alternate;
}
@keyframes lgDrift1 { to { transform: translate(9vw, 7vh) scale(1.12); } }
@keyframes lgDrift2 { to { transform: translate(-7vw, -6vh) scale(1.08); } }
@keyframes lgDrift3 { to { transform: translate(-10vw, 8vh) scale(0.92); } }
/* ── 3. Шапка ──────────────────────────────────────────────────────── */
.header {
background: rgba(13, 16, 28, 0.55);
-webkit-backdrop-filter: blur(24px) saturate(170%);
backdrop-filter: blur(24px) saturate(170%);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
box-shadow: var(--lg-edge);
}
.logo-icon {
border-radius: 11px;
box-shadow: 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Статус: JS целиком переписывает className/innerHTML — стилизуем классы */
.header .status {
padding: 6px 13px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 12.5px;
color: var(--text-secondary);
}
.header .status.connected {
background: rgba(52, 211, 153, 0.1);
border-color: rgba(52, 211, 153, 0.28);
color: var(--green);
}
.header .status.connected .dot {
background: var(--green);
box-shadow: 0 0 10px var(--green);
}
/* Плитки логотипов сливались с новыми поверхностями — контурим */
.logo-icon, .auth-logo .icon {
border: 1px solid rgba(255, 255, 255, 0.14);
}
/* ── 4. Док вкладок (segmented glass) ─────────────────────────────── */
.section-tabs {
background: rgba(13, 16, 28, 0.5);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding: 8px 10px;
gap: 6px;
}
.section-tab {
border-radius: 99px;
border-bottom: 2px solid transparent; /* гасим механику подчёркивания */
padding: 12px 0; /* ≥44px тач-высота — главная навигация */
transition: all 0.3s var(--lg-ease);
}
.section-tab:hover {
background: rgba(255, 255, 255, 0.06);
}
.section-tab.active {
color: #fff;
border-bottom-color: transparent;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.07));
box-shadow: var(--lg-edge-strong), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.section-tab.active svg { color: var(--accent); }
/* Точка непрочитанного — позиция под пилюлю */
.section-tab.has-unread::after {
top: 7px;
/* на узких вкладках calc уходит в минус — прижимаем точку к краю пилюли */
right: max(8px, calc(50% - 38px));
}
/* ── 5. Плашка «вы вошли» ─────────────────────────────────────────── */
.logged-in-bar {
background: rgba(13, 16, 28, 0.45);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.logged-in-bar .logout-btn { /* специфичность ≥ components.css (0,2,0) */
border-radius: 99px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
}
/* ── 6. Auth-экран ────────────────────────────────────────────────── */
.auth-overlay {
/* убираем чёрный градиент + pattern.png — пусть светит аврора */
background: transparent;
}
.auth-container {
background: rgba(16, 19, 32, 0.55);
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 26px;
box-shadow: var(--lg-edge-strong), 0 24px 60px rgba(0, 0, 0, 0.55);
}
.auth-logo .icon {
box-shadow: 0 10px 28px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.auth-about {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
}
.auth-tabs {
background: rgba(0, 0, 0, 0.25);
border-radius: 99px;
padding: 4px;
}
.auth-tab {
border-radius: 99px;
transition: all 0.3s var(--lg-ease);
}
.auth-tab.active {
background: rgba(255, 255, 255, 0.14);
box-shadow: var(--lg-edge);
color: #fff;
}
.auth-form input {
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 13px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}
.auth-form input:focus {
border-color: rgba(255, 101, 62, 0.55);
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Плейсхолдер — единственная подпись поля на auth-экране, нужен контраст */
.auth-form input::placeholder { color: var(--text-secondary); }
.auth-info { color: var(--text-secondary); }
.auth-form button {
background: var(--lg-grad-accent);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 26px rgba(255, 101, 62, 0.35);
transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.auth-form button:hover:not(:disabled) {
background: var(--lg-grad-accent); /* hover из components.css специфичнее базы скина */
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 14px 32px rgba(255, 101, 62, 0.45);
}
.auth-form button:disabled {
background: rgba(255, 255, 255, 0.08);
color: var(--text-muted);
}
/* «Забыли пароль?» — в components.css рамка через !important, перебиваем */
.auth-link {
border: none !important;
background: none !important;
color: var(--blue);
text-decoration: none;
padding: 10px 0;
}
.auth-link:hover { color: var(--blue-hover); text-decoration: underline; }
/* ── 7. Чат ───────────────────────────────────────────────────────── */
/* Скроллбары (двойной механизм: FF + WebKit) */
.chat { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.chat::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }
.chat::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
/* Пузыри — стекло без backdrop-filter (производительность ленты) */
.message {
border-radius: 18px;
line-height: 1.55;
}
.message.assistant {
background: rgba(255, 255, 255, 0.075);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--lg-edge);
border-bottom-left-radius: 7px;
}
.message.user {
background: linear-gradient(150deg, rgba(255, 101, 62, 0.92), rgba(201, 63, 28, 0.92));
border: 1px solid rgba(255, 150, 110, 0.38);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 22px rgba(255, 101, 62, 0.22);
border-bottom-right-radius: 7px;
}
.message.admin-reply {
background: rgba(77, 168, 232, 0.09);
border: 1px solid rgba(77, 168, 232, 0.25);
box-shadow: var(--lg-edge);
}
.message.error {
border-color: rgba(239, 68, 68, 0.35);
border-radius: 14px;
}
.message.assistant.streaming {
border-color: rgba(77, 168, 232, 0.45);
box-shadow: var(--lg-edge), 0 0 14px var(--blue-glow);
}
.message.key-data {
background: rgba(52, 211, 153, 0.08);
border: 1px solid rgba(52, 211, 153, 0.3);
box-shadow: var(--lg-edge);
border-radius: var(--radius);
}
.key-download-btn,
.key-copy-btn {
background: rgba(52, 211, 153, 0.13);
border: 1px solid rgba(52, 211, 153, 0.32);
border-radius: 99px;
transition: all 0.25s var(--lg-ease);
}
.key-download-btn:hover,
.key-copy-btn:hover {
background: rgba(52, 211, 153, 0.26);
transform: translateY(-1px);
}
.tt-credentials-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: var(--radius);
box-shadow: var(--lg-edge);
}
.tt-field { background: rgba(0, 0, 0, 0.26); border-radius: 11px; }
/* chat.css ссылается на несуществующий var(--text) — фиксируем цвет явно */
.tt-title, .tt-value { color: var(--text-primary); }
/* Контраст служебных текстов на авроре/стекле */
.message.system, .message.history-sep { color: var(--text-secondary); }
.chat-link { color: var(--blue-hover); }
.key-download-btn .dl-icon, .key-copy-btn .dl-icon {
background: rgba(52, 211, 153, 0.16);
border-radius: 10px;
}
.key-download-btn .dl-hint, .key-copy-btn .dl-hint { color: var(--text-secondary); }
.message .file-icon { background: rgba(255, 255, 255, 0.13); border-radius: 10px; }
/* Инлайн-кнопки в ленте */
.inline-buttons {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: var(--lg-edge);
border-radius: var(--radius);
}
.inline-buttons .btn-action {
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 16px rgba(255, 101, 62, 0.25);
transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.inline-buttons .btn-action:hover {
background: var(--lg-grad-accent);
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 9px 22px rgba(255, 101, 62, 0.4);
}
.inline-buttons .btn-link {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 99px;
box-shadow: var(--lg-edge);
cursor: pointer;
}
.inline-buttons .btn-link:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(77, 168, 232, 0.5);
}
/* Главное меню: шторка + чипы.
.main-menu базовый НЕ трогаем (механика collapsed/expanded). */
.menu-wrapper {
background: rgba(13, 16, 28, 0.5);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.menu-toggle {
animation: none; /* menuPulse анимировал background — гасим */
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 99px;
box-shadow: var(--lg-edge);
color: var(--text-secondary);
}
.menu-toggle:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); }
.main-menu { background: transparent; }
.main-menu button {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 99px;
box-shadow: var(--lg-edge);
transition: all 0.3s var(--lg-ease);
}
.main-menu button:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--border-light);
color: var(--text-primary);
transform: translateY(-2px);
}
/* Панель ввода */
.input-area {
background: rgba(13, 16, 28, 0.55);
-webkit-backdrop-filter: blur(24px) saturate(170%);
backdrop-filter: blur(24px) saturate(170%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.input-area input {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 99px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
padding-left: 18px;
padding-right: 18px;
}
.input-area input:focus {
border-color: rgba(255, 101, 62, 0.55);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.input-area button {
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px rgba(255, 101, 62, 0.35);
transition: transform 0.25s var(--lg-ease);
}
.input-area button:hover:not(:disabled):not(.attach-btn) {
/* hover из chat.css специфичнее базы — перебиваем синий;
:not(.attach-btn) — иначе градиент утекал на скрепку */
background: var(--lg-grad-accent);
transform: scale(1.05);
}
.input-area button:disabled {
background: rgba(255, 255, 255, 0.07);
color: var(--text-muted);
box-shadow: none;
}
.input-area .attach-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 99px;
box-shadow: var(--lg-edge);
color: var(--text-secondary);
}
.input-area .attach-btn:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(77, 168, 232, 0.5);
color: var(--blue);
}
/* Полоса превью вложения — в один тон со стеклянным вводом (шва не видно) */
.upload-preview-strip {
background: rgba(13, 16, 28, 0.55);
-webkit-backdrop-filter: blur(24px) saturate(170%);
backdrop-filter: blur(24px) saturate(170%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* ── 8. Подписка / оплата ─────────────────────────────────────────── */
.payment-container { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.payment-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }
.tariff-card {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
box-shadow: var(--lg-edge-strong), 0 16px 44px rgba(0, 0, 0, 0.4);
/* тень не анимируем — интерполяция большого blur дорогая на repaint */
transition: transform 0.35s var(--lg-ease);
}
.tariff-card:hover {
transform: translateY(-3px);
}
.tariff-card .tariff-name .tariff-badge { /* специфичность ≥ payment.css (0,3,0) */
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px rgba(255, 101, 62, 0.35);
}
.tariff-plans .plan-row {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 15px;
transition: all 0.3s var(--lg-ease);
}
.tariff-plans .plan-row:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 101, 62, 0.45);
transform: translateY(-1px);
}
.plan-row .plan-pay-btn {
background: var(--lg-grad-accent);
border-radius: 99px;
position: relative;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 18px rgba(255, 101, 62, 0.3);
transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.plan-row .plan-pay-btn:hover:not(:disabled) {
background: var(--lg-grad-accent);
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 26px rgba(255, 101, 62, 0.45);
}
.plan-row .plan-pay-btn:disabled {
background: rgba(255, 255, 255, 0.08);
color: var(--text-muted);
cursor: not-allowed;
box-shadow: none;
}
.plan-row .plan-days { color: var(--text-secondary); }
/* Модалка оплаты — настоящее стекло (одиночный слой поверх оверлея) */
.payment-modal-overlay {
background: rgba(3, 4, 10, 0.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.payment-modal {
/* 0.78 — страховка: в Safari вложенный backdrop-filter (модалка внутри
блюр-оверлея) может не отрисоваться, фон должен быть читаем сам по себе */
background: rgba(16, 19, 32, 0.78);
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 26px;
box-shadow: var(--lg-edge-strong), 0 30px 80px rgba(0, 0, 0, 0.6);
}
.payment-modal .pm-btn {
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 22px rgba(255, 101, 62, 0.32);
transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.payment-modal .pm-btn:hover:not(:disabled) {
background: var(--lg-grad-accent); /* hover из payment.css специфичнее — перебиваем */
transform: translateY(-1px);
}
.payment-modal .pm-btn:disabled {
background: rgba(255, 255, 255, 0.08);
color: var(--text-muted);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.payment-modal .pm-btn.secondary {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.13);
box-shadow: var(--lg-edge);
}
.payment-modal .pm-btn.secondary:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
.payment-modal .pm-btn.secondary:disabled {
background: rgba(255, 255, 255, 0.05);
box-shadow: none;
}
/* Голые в модалке (ссылки на приложения в success) — иначе UA-синий #0000EE */
.payment-modal a {
color: var(--blue-hover);
text-decoration-color: rgba(109, 185, 238, 0.5);
}
.payment-modal .pm-key {
background: rgba(0, 0, 0, 0.32);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 13px;
}
.payment-modal .pm-details { background: rgba(0, 0, 0, 0.22); border-radius: 14px; }
/* Спиннер рисуется бордерами — не обнуляем границы в модалке! */
/* Карточки устройств */
.device-card {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 22px;
box-shadow: var(--lg-edge), 0 12px 34px rgba(0, 0, 0, 0.35);
}
.device-option-row,
.device-row {
background: rgba(0, 0, 0, 0.24);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 13px;
}
.device-buy-btn {
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 16px rgba(255, 101, 62, 0.28);
transition: transform 0.25s var(--lg-ease);
}
.device-buy-btn:hover:not(:disabled) { transform: translateY(-1px); }
.device-delete-btn {
background: rgba(239, 68, 68, 0.14);
color: #f49c9c;
border: 1px solid rgba(239, 68, 68, 0.35);
border-radius: 99px;
transition: all 0.25s var(--lg-ease);
}
.device-delete-btn:hover:not(:disabled) { background: rgba(239, 68, 68, 0.28); color: #fff; }
/* ── 9. Канал ─────────────────────────────────────────────────────── */
.channel-container { scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
.channel-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }
.channel-post {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 22px;
box-shadow: var(--lg-edge), 0 12px 34px rgba(0, 0, 0, 0.32);
}
.channel-post .post-media .file-download { /* специфичность ≥ channel.css (0,3,0) */
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 99px;
}
.reaction-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 99px;
box-shadow: var(--lg-edge);
padding: 8px 14px; /* тач-таргет: было ~27px высоты */
transition: all 0.25s var(--lg-ease);
}
.reaction-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.reaction-btn.active {
background: rgba(77, 168, 232, 0.16);
border-color: rgba(77, 168, 232, 0.45);
box-shadow: var(--lg-edge), 0 4px 14px rgba(77, 168, 232, 0.2);
}
.channel-load-more {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 99px;
box-shadow: var(--lg-edge);
color: var(--blue);
}
.channel-load-more:hover { background: rgba(255, 255, 255, 0.11); }
/* Медиа в постах — радиус под новые карточки (фон #111 у видео оставляем) */
.channel-post .post-media img,
.channel-post .post-media.video-wrap,
.channel-post .post-media.video-wrap video { border-radius: 14px; }
/* ── 10. Лайтбокс ─────────────────────────────────────────────────── */
.lightbox-overlay {
background: rgba(3, 4, 10, 0.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
/* ── 11. Загрузочная полоса ───────────────────────────────────────── */
.loading-bar { background: transparent; }
/* ── 11b. FastyVideo: только модалки (глубокий скин вкладки — отдельно) ── */
.fv-modal,
.fv-detail-modal {
background: rgba(16, 19, 32, 0.78);
-webkit-backdrop-filter: blur(28px) saturate(170%);
backdrop-filter: blur(28px) saturate(170%);
border-color: rgba(255, 255, 255, 0.14);
}
/* fastyvideo.css задаёт overlay-блюр без -webkit-пары — чиним для iOS */
.fv-modal-overlay {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* ── 11c. FastyVideo: полный скин вкладки ─────────────────────────── */
/* Правила безопасности: display/механики .visible не трогаем; радиусы
.fv-gen-item НЕ меняем (стык с .fv-progress-wrap через margin-top:-4px);
JS-инлайны старого акцента (#e85d26) гасим авторским !important —
он сильнее инлайн-стиля. Поллинг каждые 5с пересоздаёт #fvActive —
никаких entry-анимаций на его детях. */
/* Баланс-бар */
.fv-balance-bar {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 18px;
box-shadow: var(--lg-edge);
}
.fv-topup-btn {
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 16px rgba(255, 101, 62, 0.28);
transition: transform 0.25s var(--lg-ease);
}
.fv-topup-btn:hover {
background: var(--lg-grad-accent); /* был хардкод #d44e2e */
transform: translateY(-1px);
}
/* Саб-табы → стеклянный segmented */
.fv-sub-tabs {
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 99px;
padding: 4px;
}
.fv-sub-tab { border-radius: 99px; padding: 11px 8px; /* тач ≥40px */ }
.fv-sub-tab:hover { background: rgba(255, 255, 255, 0.07); }
.fv-sub-tab.active {
background: var(--lg-grad-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 5px 16px rgba(255, 101, 62, 0.3);
}
/* Карточки моделей */
.fv-model-card {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 16px;
/* тень не анимируем — дорогой repaint (как у .tariff-card) */
transition: transform 0.3s var(--lg-ease), border-color 0.3s var(--lg-ease);
}
.fv-model-card:hover {
border-color: rgba(255, 255, 255, 0.22);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.fv-model-card.active {
border-color: rgba(255, 101, 62, 0.6);
background: rgba(255, 101, 62, 0.08);
box-shadow: 0 0 0 1px rgba(255, 101, 62, 0.45), var(--lg-edge);
}
.fv-model-card .fv-mc-price { /* специфичность ≥ исходника (0,2,0) */
background: rgba(255, 101, 62, 0.12);
border-radius: 99px;
}
.fv-top-badge {
background: linear-gradient(120deg, #ff653e, #f59e0b);
border-radius: 99px;
}
.fv-model-card.fv-top {
border-color: rgba(255, 101, 62, 0.4);
background: linear-gradient(160deg, rgba(255, 101, 62, 0.09), rgba(245, 158, 11, 0.04));
box-shadow: 0 0 18px rgba(255, 101, 62, 0.1), var(--lg-edge);
}
.fv-model-card.fv-top:hover,
.fv-model-card.fv-top.active {
border-color: rgba(255, 101, 62, 0.6);
box-shadow: 0 0 22px rgba(255, 101, 62, 0.16), var(--lg-edge);
}
/* Форма генерации */
.fv-gen-form {
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 22px;
box-shadow: var(--lg-edge), 0 12px 34px rgba(0, 0, 0, 0.3);
}
.fv-prompt,
.fv-param-group select,
.fv-param-group input,
.fv-music-textarea,
.fv-music-input {
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 13px;
}
/* Плейсхолдеры исходника (25% белого) тонут на затемнённом стекле */
.fv-prompt::placeholder,
.fv-music-textarea::placeholder,
.fv-music-input::placeholder { color: var(--text-muted); }
.fv-toggle-btn { border-radius: 99px; }
.fv-toggle-btn.active {
background: rgba(255, 101, 62, 0.16);
border-color: rgba(255, 101, 62, 0.5);
}
.fv-upload-zone {
background: rgba(0, 0, 0, 0.18);
border-color: rgba(255, 255, 255, 0.18);
border-radius: 16px;
}
.fv-generate-btn {
background: var(--lg-grad-accent);
border-radius: 99px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 22px rgba(255, 101, 62, 0.3);
transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.fv-generate-btn:hover:not(:disabled) {
background: var(--lg-grad-accent); /* был хардкод #d44e2e */
transform: translateY(-1px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 12px 28px rgba(255, 101, 62, 0.42);
}
.fv-generate-btn:disabled {
background: rgba(255, 255, 255, 0.08);
color: var(--text-muted);
box-shadow: none;
}
/* Активные генерации (радиусы карточки не трогаем — стык с прогрессом).
Прогресс-пара — НЕПРОЗРАЧНЫЙ фон (эквивалент стекла над базой): иначе в
4px-зоне наложения margin-top:-4px полупрозрачные фоны складываются
в светлую полосу, а бордеры двоятся. */
.fv-gen-item {
background: rgba(255, 255, 255, 0.055);
border-color: rgba(255, 255, 255, 0.11);
}
.fv-gen-item:has(+ .fv-progress-wrap) { background: rgb(21, 22, 28); }
.fv-progress-wrap {
background: rgb(21, 22, 28);
border-color: rgba(255, 255, 255, 0.11);
border-top: none; /* стык как в оригинале */
}
.fv-status { border-radius: 99px; }
/* JS-инлайны СТАРОГО акцента (#e85d26 = тип «видео») — адресно переводим на
новый акцент атрибутным селектором; фиолетовый/зелёный/синий у фото/музыки/
голоса сохраняются. Авторский !important сильнее инлайна. */
.fv-progress-bar-fill[style*="#e85d26"] {
background: linear-gradient(90deg, #ff653e, #f59e0b) !important;
}
.fv-spinner[style*="#e85d26"] { border-top-color: var(--accent) !important; }
.fv-gi-model span[style*="#e85d26"],
.fv-progress-meta span[style*="#e85d26"] { color: var(--accent) !important; }
.fv-ht-type-icon[style*="#e85d26"] {
background: rgba(255, 101, 62, 0.13) !important;
color: var(--accent) !important;
}
.fv-progress-bar-bg { background: rgba(255, 255, 255, 0.08); border-radius: 99px; }
.fv-download-btn {
background: rgba(52, 211, 153, 0.13);
color: var(--green);
border: 1px solid rgba(52, 211, 153, 0.32);
border-radius: 99px;
transition: all 0.25s var(--lg-ease);
}
.fv-download-btn:hover { background: rgba(52, 211, 153, 0.26); }
/* История */
.fv-hist-table {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.fv-ht-row:hover { background: rgba(255, 255, 255, 0.05); }
.fv-hf-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: 99px;
padding: 9px 16px; /* тач ≥38px */
}
.fv-hf-btn:hover { background: rgba(255, 255, 255, 0.1); }
.fv-hf-btn.active {
background: rgba(255, 101, 62, 0.14);
border-color: rgba(255, 101, 62, 0.5);
}
.fv-hf-btn.active span { background: rgba(255, 101, 62, 0.2); }
.fv-ht-btn {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 99px;
}
.fv-ht-btn:hover { background: rgba(255, 255, 255, 0.12); }
.fv-ht-btn-download {
background: rgba(52, 211, 153, 0.13);
border-color: rgba(52, 211, 153, 0.32);
color: var(--green);
}
.fv-ht-btn-download:hover { background: rgba(52, 211, 153, 0.26); }
/* Топ-ап и detail-модалка: внутренности (фоны модалок — в 11b) */
.fv-topup-amount {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
transition: all 0.25s var(--lg-ease);
}
.fv-topup-amount:hover {
border-color: rgba(255, 101, 62, 0.55);
background: rgba(255, 101, 62, 0.08);
}
.fv-detail-prompt { background: rgba(0, 0, 0, 0.24); border-radius: 13px; }
/* Алерты — радиусы под общий стиль */
.fv-error, .fv-success, .fv-error-block { border-radius: 14px; }
/* Мобильные правки FastyVideo.
640px — тот же брейкпоинт, на котором fastyvideo.css переключает историю
в карточный режим (а не 600) */
@media (max-width: 640px) {
.fv-ht-btn { padding: 10px 12px; } /* тач-таргет кнопок истории */
}
@media (max-width: 640px) {
/* pre-existing баг исходника: fastyvideo.css:668 перекруглял нижние углы
bottom-sheet (position:fixed; bottom:0) — возвращаем прямые */
.fv-detail-modal { border-radius: 14px 14px 0 0; }
}
/* ── 12. Доступность и производительность ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
/* :nth-child(n) — выравниваем специфичность с анимирующими правилами */
.lg-aurora i:nth-child(n) { animation: none; }
}
/* Без поддержки backdrop-filter — плотные фоны вместо стекла */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.header, .section-tabs, .input-area, .menu-wrapper,
.upload-preview-strip { background: rgba(13, 16, 28, 0.92); }
.auth-container, .payment-modal,
.fv-modal, .fv-detail-modal { background: rgba(16, 19, 32, 0.96); }
.payment-modal-overlay { background: rgba(3, 4, 10, 0.75); }
.lightbox-overlay { background: rgba(3, 4, 10, 0.88); }
}
/* ── 13. Мобильная адаптация ──────────────────────────────────────── */
@media (max-width: 600px) {
.tariff-card { border-radius: 20px; }
.section-tabs { padding: 6px 8px; gap: 4px; }
/* Тач-таргеты ≥40px (до скина были 27-38px) */
.plan-row .plan-pay-btn { padding: 12px 20px; }
.main-menu button { padding: 12px 8px; }
.logged-in-bar .logout-btn { padding: 8px 16px; }
/* iOS-автозум: поля FastyVideo тоже <16px в исходнике */
.fv-prompt, .fv-music-textarea, .fv-music-input,
.fv-param-group select, .fv-param-group input { font-size: 16px; }
/* iOS: font-size <16px вызывает автозум страницы при фокусе поля */
.input-area input, .auth-form input { font-size: 16px; }
}
@media (max-width: 390px) {
/* layout.css на 390px ужимает ввод — не съедать ширину боковым паддингом */
.input-area input { padding-left: 12px; padding-right: 12px; }
/* Док: 4 вкладки с текстом на очень узких экранах (≤360px) */
.section-tabs { gap: 2px; padding: 4px; }
.section-tab { font-size: 13px; }
}
/* Тач-устройства: hover-«подъёмы» не залипают после тапа */
@media (hover: none) {
.tariff-card:hover,
.tariff-plans .plan-row:hover,
.main-menu button:hover,
.inline-buttons .btn-action:hover,
.inline-buttons .btn-link:hover,
.reaction-btn:hover,
.key-download-btn:hover,
.key-copy-btn:hover,
.input-area button:hover:not(:disabled):not(.attach-btn),
.plan-row .plan-pay-btn:hover:not(:disabled),
.device-buy-btn:hover:not(:disabled),
.device-delete-btn:hover:not(:disabled),
.payment-modal .pm-btn:hover:not(:disabled),
.auth-form button:hover:not(:disabled),
.fv-topup-btn:hover,
.fv-generate-btn:hover:not(:disabled),
.fv-model-card:hover { transform: none; }
}