/* ══════════════════════════════════════════════════════
FB Master — Design System
Две темы: светлая (по умолчанию) и тёмная.
Переключение через data-theme на .
══════════════════════════════════════════════════════ */
/* ── CSS Variables ────────────────────────────────── */
:root,
[data-theme="light"] {
--bg: #f5f6fa;
--bg-surface: #ffffff;
--bg-surface-hover: #f0f1f5;
--bg-sidebar: #f8fafc;
--bg-sidebar-hover: #eef2ff;
--text-primary: #1a1a2e;
--text-secondary: #6b7280;
--text-sidebar: #64748b;
--text-sidebar-active: #0f172a;
--sidebar-border: rgba(15, 23, 42, 0.08);
--sidebar-logo: #0f172a;
--sidebar-nav-group: rgba(15, 23, 42, 0.45);
--sidebar-user-name: #0f172a;
--btn-sidebar-bg: rgba(15, 23, 42, 0.06);
--btn-sidebar-bg-hover: rgba(15, 23, 42, 0.11);
--btn-sidebar-fg-hover: #0f172a;
--accent: #4f46e5;
--accent-hover: #4338ca;
--accent-light: #eef2ff;
--success: #059669;
--success-bg: #ecfdf5;
--warning: #d97706;
--warning-bg: #fffbeb;
--error: #dc2626;
--error-bg: #fef2f2;
--border: #e5e7eb;
--border-light: #f3f4f6;
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
--shadow-lg: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
--radius: 8px;
--radius-sm: 6px;
--radius-lg: 12px;
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.8125rem;
--font-size-base: 0.9375rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.375rem;
--font-size-2xl: 1.75rem;
--sidebar-width: 260px;
--header-height: 0px;
}
[data-theme="dark"] {
--bg: #0f0f1a;
--bg-surface: #1a1a2e;
--bg-surface-hover: #252542;
--bg-sidebar: #0a0a14;
--bg-sidebar-hover: #16162b;
--text-primary: #e8e8f0;
--text-secondary: #9ca3af;
--text-sidebar: #9ca3b8;
--text-sidebar-active: #ffffff;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-logo: #ffffff;
--sidebar-nav-group: rgba(255, 255, 255, 0.35);
--sidebar-user-name: #ffffff;
--btn-sidebar-bg: rgba(255, 255, 255, 0.06);
--btn-sidebar-bg-hover: rgba(255, 255, 255, 0.12);
--btn-sidebar-fg-hover: #ffffff;
--accent: #6366f1;
--accent-hover: #818cf8;
--accent-light: #1e1b4b;
--success: #34d399;
--success-bg: #064e3b;
--warning: #fbbf24;
--warning-bg: #78350f;
--error: #f87171;
--error-bg: #7f1d1d;
--border: #2d2d44;
--border-light: #1f1f35;
--shadow-sm: 0 1px 2px rgba(0,0,0,.2);
--shadow: 0 1px 3px rgba(0,0,0,.3);
--shadow-lg: 0 4px 6px rgba(0,0,0,.4);
}
/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-family: var(--font-sans);
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--bg);
color: var(--text-primary);
font-size: var(--font-size-base);
line-height: 1.6;
min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }
/* ── Layout ───────────────────────────────────────── */
.layout {
display: flex;
min-height: 100vh;
width: 100%;
max-width: 100%;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: var(--sidebar-width);
background: var(--bg-sidebar);
border-right: 1px solid var(--sidebar-border);
display: flex;
flex-direction: column;
z-index: 100;
overflow-y: auto;
}
/* Явная ширина: во flex/webview контент иначе мог оставаться «узким» (~ширина контента), справа пустое поле. */
.main-content {
margin-left: var(--sidebar-width);
flex: 1 1 0%;
min-width: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
width: calc(100vw - var(--sidebar-width));
max-width: calc(100vw - var(--sidebar-width));
box-sizing: border-box;
}
/* На всю ширину main-content (раньше .page-body был max-width: 1200px). */
.page-body {
padding: 32px 40px;
flex: 1 1 auto;
max-width: 100%;
width: 100%;
min-width: 0;
box-sizing: border-box;
align-self: stretch;
}
/* Мессенджер (Desktop): JS задаёт пиксельные размеры на хосте и webview;
здесь только базовый layout (overflow:hidden, 100vh). */
body.m2-desktop-page {
height: 100vh;
overflow: hidden;
}
body.m2-desktop-page .layout {
height: 100vh;
min-height: 0;
display: flex;
}
body.m2-desktop-page .main-content {
height: 100vh;
max-height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1 1 0%;
min-height: 0;
/* В desktop webview ширина задаётся flex-родителем, не calc(vw). */
width: auto;
max-width: none;
}
body.m2-desktop-page .page-body {
max-width: none;
padding: 8px 10px 8px;
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1 1 0%;
min-height: 0;
box-sizing: border-box;
}
body.m2-desktop-page .m2-desktop-root {
flex: 1 1 0%;
min-height: 0;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
body.m2-desktop-page .m2-desktop-root > .page-header {
flex-shrink: 0;
}
body.m2-desktop-page .m2-stage {
flex: 1 1 0%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.m2-desktop-page .m2-stage-frame {
flex: 1 1 0%;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
body.m2-desktop-page #m2-webview-host {
flex: 0 0 auto;
}
body.m2-desktop-page .m2-desktop-root > .page-header h1 {
margin-bottom: 0.35rem;
}
body.m2-desktop-page .m2-desktop-root > .page-header .subtitle {
font-size: var(--font-size-sm);
line-height: 1.45;
}
/* ── Sidebar ──────────────────────────────────────── */
.sidebar-header {
padding: 24px 20px 16px;
border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-logo {
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--sidebar-logo);
letter-spacing: -0.02em;
/* Flex-выравнивание чтобы акцентный бокс SOC и слово MASTER стояли ровно
* по центру по вертикали (иначе padding у span-бокса сдвигает baseline). */
display: inline-flex;
align-items: center;
gap: 2px;
}
/* Старое правило `.sidebar-logo span { color: accent }` удалено: оно было легаси
* для FB Master с простым `SOC`. После унификации все workspaces
* используют `.sidebar-logo__mark--*` с явным `color:#fff` — и старое правило
* перекрывало белый цвет SOC акцентным, из-за чего текст сливался с фоном бокса. */
/* Акцентный бокс SOC — фиксированный белый текст с тенями для контраста на всех
* workspaces (особенно важно на LinkedIn/Twitter/Instagram, где фон и текст
* одного цветового тона). */
.sidebar-logo__mark {
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
/* Строка под логотипом (десктоп и веб-кабинет на VPS).
* 2.92: версия теперь inline в .sidebar-logo через .sidebar-logo__version,
* этот класс остаётся для обратной совместимости (на случай legacy шаблонов). */
.sidebar-version-line {
margin-top: 6px;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-sidebar);
opacity: 0.88;
white-space: nowrap;
}
/* 2.92: версия рядом с логотипом, на одной строке. Юзер запросил перенос
* "v2.91" из-под "SOCMASTER" в одну строку с логотипом. */
.sidebar-logo__version {
margin-left: 8px;
font-size: 0.62em;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--text-sidebar);
opacity: 0.75;
white-space: nowrap;
vertical-align: middle;
align-self: center;
}
/* 2.92: блок с лицензией и ID перенесён из sidebar-footer в sidebar-header
* (наверх под логотип) по запросу пользователя. Корректируем отступы под
* новое положение: меньше top-padding, отделитель снизу для визуального
* разделения от nav. */
.sidebar-user--top {
margin-top: 14px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 4px;
}
/* 2.95: гармошка для карточек аккаунтов в "Оформление аккаунтов" и
* "Прогрев аккаунтов" — по запросу пользователя, аналогично fb-accounts. */
.nw-account-card--collapsible {
padding: 0;
}
.nw-account-card--collapsible > .nw-account-card__summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
cursor: pointer;
user-select: none;
border-radius: inherit;
transition: background 0.15s ease;
}
.nw-account-card--collapsible > .nw-account-card__summary:hover {
background: color-mix(in srgb, var(--bg-surface, transparent) 92%, var(--border, #e4e6eb));
}
.nw-account-card--collapsible > .nw-account-card__summary::-webkit-details-marker {
display: none;
}
.nw-account-card--collapsible > .nw-account-card__summary::marker {
display: none;
content: '';
}
.nw-account-card__summary > .nw-account-card__header {
flex: 1 1 auto;
min-width: 0;
}
.nw-account-card__chevron {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: color-mix(in srgb, var(--bg-surface, #fff) 88%, var(--border, #e4e6eb));
color: var(--text-secondary, #888);
transition: transform 0.2s ease, color 0.15s ease;
}
.nw-account-card--collapsible[open] > .nw-account-card__summary .nw-account-card__chevron {
transform: rotate(180deg);
color: var(--text-primary);
}
.nw-account-card--collapsible > .nw-account-card__body {
border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
padding: 16px;
}
.sidebar-logo-version {
font-size: 0.72em;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-sidebar);
opacity: 0.85;
white-space: nowrap;
}
.sidebar-app-version {
margin-top: 10px;
font-size: var(--font-size-xs);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--text-sidebar);
opacity: 0.92;
}
.sidebar-nav {
flex: 1;
padding: 12px 0;
overflow-y: auto;
}
.nav-group {
margin-bottom: 8px;
}
.nav-group-label {
padding: 12px 20px 6px;
font-size: var(--font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--sidebar-nav-group);
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 20px;
font-size: var(--font-size-sm);
color: var(--text-sidebar);
transition: all .15s;
border-left: 3px solid transparent;
}
.nav-item:hover {
background: var(--bg-sidebar-hover);
color: var(--text-sidebar-active);
}
.nav-item.active {
background: var(--bg-sidebar-hover);
color: var(--text-sidebar-active);
border-left-color: var(--accent);
font-weight: 500;
}
.nav-item i {
font-size: 18px;
width: 20px;
text-align: center;
opacity: .7;
}
.nav-item.active i { opacity: 1; }
/* Пункт остаётся в разметке; уберите класс nav-item--sidebar-hidden с ссылки, чтобы снова показать */
.nav-item--sidebar-hidden {
display: none !important;
}
.sidebar-footer {
padding: 16px 20px;
border-top: 1px solid var(--sidebar-border);
}
.sidebar-user {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.sidebar-user img {
width: 32px;
height: 32px;
border-radius: 50%;
}
.sidebar-user-info {
flex: 1;
min-width: 0;
}
.sidebar-user-name {
font-size: var(--font-size-sm);
color: var(--sidebar-user-name);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-user-email {
font-size: var(--font-size-xs);
color: var(--text-sidebar);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-license-lines {
margin: 6px 0 8px;
font-size: 11px;
line-height: 1.4;
color: var(--text-sidebar);
opacity: 0.92;
white-space: normal;
word-break: break-word;
}
.sidebar-license-line {
margin-top: 2px;
}
.sidebar-license-line:first-child {
margin-top: 0;
}
.sidebar-license-line--accent {
color: var(--accent);
font-weight: 500;
}
.sidebar-license-paid {
font-weight: 500;
color: var(--sidebar-user-name);
}
.sidebar-actions {
display: flex;
gap: 8px;
}
.btn-sidebar {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: var(--font-size-xs);
color: var(--text-sidebar);
background: var(--btn-sidebar-bg);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all .15s;
}
.btn-sidebar:hover {
background: var(--btn-sidebar-bg-hover);
color: var(--btn-sidebar-fg-hover);
}
/* ── Page Header ──────────────────────────────────── */
.page-header {
margin-bottom: 32px;
}
.page-header h1 {
font-size: var(--font-size-2xl);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 4px;
}
.page-header .subtitle {
font-size: var(--font-size-base);
color: var(--text-secondary);
}
.page-header-actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
/* Текст заголовка занимает доступную ширину — подзаголовок переносится на всю полосу. */
.page-header-actions > div:first-child {
flex: 1 1 280px;
min-width: 0;
}
/* ── Cards ────────────────────────────────────────── */
.card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.card-body { padding: 24px; }
.card-header {
padding: 20px 24px;
border-bottom: 1px solid var(--border-light);
font-weight: 600;
font-size: var(--font-size-base);
}
/* ── Stats Grid ───────────────────────────────────── */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 32px;
}
.stat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
box-shadow: var(--shadow-sm);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: 4px;
}
.stat-value {
font-size: var(--font-size-2xl);
font-weight: 700;
color: var(--text-primary);
}
/* ── Админ-панель (владелец платформы) ─────────────── */
.admin-hero {
margin-bottom: 20px;
}
.admin-hero__body {
display: flex;
flex-wrap: wrap;
gap: 28px 40px;
align-items: flex-start;
}
.admin-hero__main {
flex: 1;
min-width: 200px;
}
.admin-hero__label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: 6px;
}
.admin-hero__value {
font-size: clamp(2.25rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--accent);
line-height: 1.1;
}
.admin-hero__hint {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-top: 8px;
}
.admin-hero__side {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px 24px;
min-width: min(100%, 320px);
}
.admin-hero-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-hero-stat__label {
font-size: var(--font-size-xs);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
}
.admin-hero-stat__value {
font-size: var(--font-size-xl);
font-weight: 700;
color: var(--text-primary);
}
.admin-hero-stat__hint {
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.admin-quick-links {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.admin-tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px 40px;
}
.admin-tech-dl {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 42%) 1fr;
gap: 8px 16px;
font-size: var(--font-size-sm);
}
.admin-tech-dl dt {
margin: 0;
color: var(--text-secondary);
font-weight: 500;
}
.admin-tech-dl dd {
margin: 0;
color: var(--text-primary);
word-break: break-word;
}
.admin-tech-dd-break code {
word-break: break-all;
white-space: pre-wrap;
}
/* ── Buttons ──────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
font-size: var(--font-size-sm);
font-weight: 500;
font-family: var(--font-sans);
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
min-height: 40px;
}
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn-primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }
.btn-secondary {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-surface-hover); }
/* Ссылки : цвет и :visited не должны выглядеть как обычный текстовый линк */
a.btn.btn-primary,
a.btn.btn-primary:visited {
color: #fff;
}
a.btn.btn-primary:hover {
color: #fff;
}
a.btn.btn-secondary,
a.btn.btn-secondary:visited {
color: var(--text-primary);
}
a.btn.btn-secondary:hover {
color: var(--text-primary);
}
a.btn.btn-danger,
a.btn.btn-danger:visited {
color: #fff;
}
a.btn.btn-danger:hover {
color: #fff;
}
a.btn {
text-decoration: none;
}
.btn-danger {
background: var(--error);
color: #fff;
}
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-sm {
padding: 6px 14px;
font-size: var(--font-size-xs);
min-height: 32px;
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: none;
padding: 6px 10px;
}
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-surface-hover); }
/* ── Forms ────────────────────────────────────────── */
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--text-primary);
margin-bottom: 6px;
}
.form-hint {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-top: 4px;
}
/* Форма «Добавить шаг» — режим агента (/scenarios/…) */
.scenario-step-add-card {
position: relative;
z-index: 1;
isolation: isolate;
}
.scenario-step-add-form__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px 16px;
align-items: start;
}
.scenario-step-add-form__field {
margin-bottom: 0;
}
.scenario-step-add-form__field .form-select,
.scenario-step-add-form__field .form-input {
min-height: 42px;
}
.scenario-step-add-form__hint-below {
margin: 0 0 12px;
max-width: 720px;
}
.scenario-step-add-form__full {
margin-bottom: 16px;
}
.scenario-step-add-form__actions {
padding-top: 4px;
}
@media (max-width: 960px) {
.scenario-step-add-form__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.scenario-step-add-form__grid {
grid-template-columns: 1fr;
}
}
/* Расширенные настройки «Лайк поста» — режим агента */
.scenario-like-settings {
margin: 16px 0 18px;
padding: 16px 18px 18px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
}
.scenario-like-settings__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--font-size-base);
font-weight: 600;
color: var(--text-primary);
}
.scenario-like-settings__fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px 18px;
align-items: start;
margin-top: 12px;
}
.scenario-like-settings__fields .form-group {
margin-bottom: 0;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 10px 14px;
font-size: var(--font-size-base);
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color .15s, box-shadow .15s;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.form-textarea { min-height: 100px; resize: vertical; }
.form-input-file {
padding: 8px 10px;
min-height: 60px;
color: var(--text-secondary);
border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
background:
linear-gradient(180deg, color-mix(in srgb, var(--accent-light) 18%, var(--bg-surface)) 0%, var(--bg-surface) 100%);
box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent) inset;
}
.form-input-file:hover {
border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
background:
linear-gradient(180deg, color-mix(in srgb, var(--accent-light) 26%, var(--bg-surface)) 0%, var(--bg-surface) 100%);
}
.form-input-file::file-selector-button,
.form-input-file::-webkit-file-upload-button {
margin: 0 14px 0 0;
padding: 11px 18px;
min-height: 42px;
border: 1px solid var(--accent);
border-radius: 12px;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: #fff;
font-size: var(--font-size-sm);
font-weight: 700;
font-family: var(--font-sans);
letter-spacing: 0.01em;
box-shadow:
0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.form-input-file:hover::file-selector-button,
.form-input-file:hover::-webkit-file-upload-button {
transform: translateY(-1px);
box-shadow:
0 12px 26px color-mix(in srgb, var(--accent) 30%, transparent),
0 1px 0 rgba(255, 255, 255, 0.24) inset;
filter: saturate(1.05);
}
.form-input-file:focus::file-selector-button,
.form-input-file:focus::-webkit-file-upload-button {
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
/* Кастомный file picker — переводимый текст кнопки и состояния «no file chosen»
(нативный рендерит эти строки на языке браузера). */
.custom-file-input {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 8px 10px;
min-height: 60px;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 12px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--accent-light) 18%, var(--bg-surface)) 0%, var(--bg-surface) 100%);
box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent) inset;
}
.custom-file-input:hover {
border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
}
.custom-file-input__native {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.custom-file-input__btn {
display: inline-flex;
align-items: center;
padding: 11px 18px;
min-height: 42px;
border: 1px solid var(--accent);
border-radius: 12px;
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: #fff;
font-size: var(--font-size-sm);
font-weight: 700;
font-family: var(--font-sans);
letter-spacing: 0.01em;
cursor: pointer;
box-shadow:
0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
user-select: none;
}
.custom-file-input__btn:hover {
transform: translateY(-1px);
box-shadow:
0 12px 26px color-mix(in srgb, var(--accent) 30%, transparent),
0 1px 0 rgba(255, 255, 255, 0.24) inset;
filter: saturate(1.05);
}
.custom-file-input__native:focus + .custom-file-input__btn {
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent),
0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.custom-file-input__name {
color: var(--text-secondary);
font-size: var(--font-size-sm);
word-break: break-all;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
/* Вертикальная колонка: gap из inline-стиля перекрывает значение по умолчанию */
.stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
}
/* ── Tables ───────────────────────────────────────── */
.table-wrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 12px 16px;
font-size: var(--font-size-sm);
}
th {
font-weight: 600;
color: var(--text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: .04em;
border-bottom: 2px solid var(--border);
}
td {
border-bottom: 1px solid var(--border-light);
color: var(--text-primary);
}
tr:hover td {
background: var(--bg-surface-hover);
}
.table-link {
color: var(--accent);
font-weight: 500;
}
.table-actions {
display: flex;
gap: 8px;
}
/* ── Badges ───────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
padding: 2px 10px;
font-size: var(--font-size-xs);
font-weight: 500;
border-radius: 999px;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-error { background: var(--error-bg); color: var(--error); }
.badge-default { background: var(--accent-light); color: var(--accent); }
a.badge {
text-decoration: none;
}
a.badge:hover {
opacity: 0.88;
}
.people-profile-cell {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.people-restricted-badge {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.people-row-num-col {
width: 3rem;
text-align: right;
font-variant-numeric: tabular-nums;
color: var(--text-muted, #8b949e);
font-weight: 500;
}
/* ── Empty State ──────────────────────────────────── */
.empty-state {
text-align: center;
padding: 60px 20px;
}
.empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: .4;
}
.empty-state h3 {
font-size: var(--font-size-lg);
color: var(--text-primary);
margin-bottom: 8px;
}
.empty-state p {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: 24px;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
/* ── Search Bar ───────────────────────────────────── */
.search-bar {
position: relative;
max-width: 360px;
}
.search-bar input {
padding-left: 40px;
}
.search-bar i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
font-size: 16px;
}
/* ── Pagination ───────────────────────────────────── */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 24px;
}
.pagination a,
.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 8px;
font-size: var(--font-size-sm);
border-radius: var(--radius-sm);
color: var(--text-secondary);
border: 1px solid var(--border);
background: var(--bg-surface);
}
.pagination a:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.pagination .active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
/* ── Preset Cards (Speed Settings) ────────────────── */
.preset-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 24px;
}
.preset-card {
border: 2px solid var(--border);
border-radius: var(--radius);
padding: 12px 10px;
cursor: pointer;
transition: all .2s;
text-align: center;
min-width: 0;
}
.preset-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow);
}
.preset-card.selected {
border-color: var(--accent);
background: var(--accent-light);
}
.preset-card h3 {
font-size: var(--font-size-sm);
font-weight: 600;
margin-bottom: 4px;
line-height: 1.25;
}
.preset-card p {
font-size: 0.6875rem;
line-height: 1.35;
color: var(--text-secondary);
margin: 0;
}
.preset-card .preset-icon {
font-size: 22px;
line-height: 1;
margin-bottom: 6px;
}
/* ── Upload Zone ──────────────────────────────────── */
.upload-zone {
border: 2px dashed var(--border);
border-radius: var(--radius-lg);
padding: 48px 24px;
text-align: center;
transition: all .2s;
cursor: pointer;
}
.upload-zone:hover,
.upload-zone.dragover {
border-color: var(--accent);
background: var(--accent-light);
}
.upload-zone i {
font-size: 40px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.upload-zone p {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.upload-zone .upload-hint {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-top: 8px;
}
.upload-zone.is-processing {
opacity: 0.55;
pointer-events: none;
}
.upload-zone.import-zone--ready {
border-color: var(--accent);
background: var(--accent-light);
}
.upload-zone.import-zone--ready > i {
color: var(--accent);
}
/* ── Импорт: выбранные файлы ─────────────────────── */
.import-steps {
font-size: var(--font-size-xs);
color: var(--text-secondary);
margin-bottom: 14px;
padding: 10px 12px;
background: var(--bg-surface-hover);
border-radius: var(--radius);
border: 1px solid var(--border);
line-height: 1.5;
}
.import-steps strong {
color: var(--text-primary);
}
.import-file-panel {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-surface-hover);
}
.import-file-panel[hidden] {
display: none !important;
}
.import-file-panel-title {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--text-primary);
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.import-file-list {
list-style: none;
margin: 0;
padding: 0;
}
.import-file-list li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid var(--border-light);
font-size: var(--font-size-sm);
color: var(--text-primary);
}
.import-file-list li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.import-file-list .ti {
color: var(--accent);
flex-shrink: 0;
margin-top: 2px;
}
.import-file-meta {
font-size: var(--font-size-xs);
color: var(--text-secondary);
font-weight: 400;
}
.import-file-hint {
margin-top: 12px;
font-size: var(--font-size-xs);
color: var(--text-secondary);
line-height: 1.45;
}
.import-file-hint kbd {
font-family: inherit;
font-size: 0.95em;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-primary);
}
/* ── Импорт базы: статусы загрузки ───────────────── */
.import-status {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding: 12px 14px;
border-radius: var(--radius);
font-size: var(--font-size-sm);
font-weight: 500;
line-height: 1.4;
}
.import-status[hidden] {
display: none !important;
}
.import-status--loading {
background: var(--accent-light);
color: var(--accent);
border: 1px solid var(--accent);
}
.import-status--success {
background: var(--success-bg);
color: var(--success);
border: 1px solid var(--success);
}
.import-status--error {
background: var(--error-bg);
color: var(--error);
border: 1px solid var(--error);
}
.import-spinner {
flex-shrink: 0;
width: 18px;
height: 18px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: import-spin 0.7s linear infinite;
}
.import-spinner--on-primary {
border-color: rgba(255, 255, 255, 0.9);
border-right-color: transparent;
}
@keyframes import-spin {
to {
transform: rotate(360deg);
}
}
/* ── Delays Table (Speed Settings) ────────────────── */
.delays-table th,
.delays-table td {
padding: 10px 14px;
}
.delays-table .delay-range {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: var(--font-size-sm);
color: var(--accent);
}
/* ── Login Page ───────────────────────────────────── */
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg);
}
.login-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 48px 40px;
max-width: 420px;
width: 100%;
text-align: center;
}
.login-card h1 {
font-size: var(--font-size-xl);
font-weight: 700;
margin-bottom: 8px;
}
.login-card .login-subtitle {
font-size: var(--font-size-sm);
color: var(--text-secondary);
margin-bottom: 32px;
}
.btn-google {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 24px;
font-size: var(--font-size-base);
font-weight: 500;
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all .15s;
width: 100%;
justify-content: center;
}
.btn-google:hover {
background: var(--bg-surface-hover);
box-shadow: var(--shadow);
}
.btn-google svg {
width: 20px;
height: 20px;
}
.login-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0;
color: var(--text-secondary);
font-size: var(--font-size-xs);
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.login-error {
background: var(--error-bg);
color: var(--error);
padding: 10px 16px;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
margin-bottom: 20px;
}
/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
.sidebar { width: 100%; position: relative; height: auto; }
.main-content {
margin-left: 0;
width: 100%;
max-width: 100%;
}
.page-body { padding: 20px 16px; }
.preset-grid { grid-template-columns: 1fr; gap: 12px; }
.preset-card { padding: 14px 12px; }
.preset-card p { font-size: var(--font-size-xs); }
.form-row { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Animations ───────────────────────────────────── */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.card, .stat-card { animation: fadeIn .25s ease-out; }
/* ── Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
/* ── File Input ───────────────────────────────────── */
.file-input-hidden { display: none; }
/* ── Toolbar ──────────────────────────────────────── */
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
/* В тулбаре строка поиска тянется по ширине карточки (не фиксированные 360px). */
.toolbar .search-bar {
max-width: none;
flex: 1 1 260px;
min-width: 0;
}
/* ── Уже контактировали: фильтры в одну линию ─────── */
.contacted-toolbar-form {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-bottom: 4px;
}
.contacted-search-field {
position: relative;
flex: 1 1 200px;
min-width: 0;
max-width: min(100%, 440px);
}
.contacted-search-field .form-input {
width: 100%;
padding-left: 40px;
}
.contacted-search-field > i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
font-size: 16px;
pointer-events: none;
}
.contacted-toolbar-form .btn-primary {
flex-shrink: 0;
}
.contacted-account-group {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.contacted-account-group label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
white-space: nowrap;
margin: 0;
}
.contacted-account-group .form-input,
.contacted-account-group select.form-input {
min-width: 11rem;
}
@media (min-width: 768px) {
.contacted-account-group {
margin-left: auto;
}
}
@media (max-width: 767px) {
.contacted-account-group {
width: 100%;
}
.contacted-account-group select.form-input {
flex: 1;
min-width: 0;
}
}
/* Кнопка «Снять отметку» в таблице */
.btn-contacted-unmark {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: var(--font-size-xs);
font-weight: 500;
line-height: 1.2;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-primary);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-contacted-unmark:hover {
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent);
}
.btn-contacted-unmark i {
font-size: 1rem;
opacity: 0.9;
}
/* Чекбоксы «уже отправлено в кампании» (рассылка) */
input.outreach-done-checkbox {
width: 1.05rem;
height: 1.05rem;
margin: 0;
border-radius: 4px;
border: 1px solid var(--border);
background: var(--bg-surface);
accent-color: var(--accent);
cursor: pointer;
vertical-align: middle;
}
input.outreach-done-checkbox:disabled {
opacity: 0.45;
cursor: not-allowed;
}
th.outreach-done-col-chk {
vertical-align: middle;
}
/* ── FAQ (аккордеон) ─────────────────────────────── */
.faq-accordion {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 52rem;
}
.faq-item {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.faq-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
cursor: pointer;
list-style: none;
font-weight: 600;
color: var(--text-primary);
user-select: none;
transition: background 0.15s ease;
}
.faq-summary::-webkit-details-marker {
display: none;
}
.faq-summary:hover {
background: var(--bg-surface-hover);
}
.faq-question {
flex: 1;
min-width: 0;
text-align: left;
line-height: 1.45;
font-size: var(--font-size-base);
}
.faq-chevron {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-secondary);
transition: transform 0.2s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.faq-chevron i {
font-size: 1.1rem;
}
.faq-item[open] .faq-chevron {
transform: rotate(90deg);
border-color: var(--accent);
background: var(--accent-light);
color: var(--accent);
}
.faq-answer {
padding: 0 18px 18px;
padding-top: 0;
border-top: 1px solid transparent;
color: var(--text-secondary);
font-size: var(--font-size-sm);
line-height: 1.65;
}
.faq-item[open] .faq-answer {
border-top-color: var(--border-light);
padding-top: 14px;
margin-top: 0;
}
.faq-answer p + p {
margin-top: 0.75rem;
}
.faq-answer code {
font-size: 0.9em;
padding: 0.1em 0.35em;
border-radius: 4px;
background: var(--bg);
border: 1px solid var(--border);
}
.faq-answer ol.faq-steps {
margin: 0.5rem 0 0.35rem;
padding-left: 1.35rem;
color: var(--text-secondary);
}
.faq-answer ol.faq-steps li {
margin-bottom: 0.45rem;
}
.faq-answer ol.faq-steps li:last-child {
margin-bottom: 0;
}
/* ── Модальное подтверждение (вместо window.confirm) ── */
body.fb-confirm-modal-open {
overflow: hidden;
}
.fb-confirm-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.fb-confirm-modal[hidden] {
display: none !important;
}
.fb-confirm-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.48);
backdrop-filter: blur(3px);
}
[data-theme="dark"] .fb-confirm-modal__backdrop {
background: rgba(0, 0, 0, 0.62);
}
.fb-confirm-modal__panel {
position: relative;
width: 100%;
max-width: 420px;
padding: 24px 24px 20px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
animation: fb-confirm-in 0.2s ease-out;
}
@keyframes fb-confirm-in {
from {
opacity: 0;
transform: translateY(-8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.fb-confirm-modal__title {
margin: 0 0 10px;
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.fb-confirm-modal__message {
margin: 0 0 22px;
font-size: var(--font-size-base);
color: var(--text-secondary);
line-height: 1.55;
white-space: pre-wrap;
}
.fb-confirm-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
/* Админка: фильтры по статусу ключей доступа */
.ak-keys-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px 16px;
}
.ak-keys-header__title {
font-weight: 600;
}
.ak-status-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.ak-filter-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: var(--font-size-xs);
font-weight: 500;
border: 1px solid var(--border);
color: var(--text-secondary);
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ak-filter-pill:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.ak-filter-pill--active {
background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
color: var(--text-primary);
font-weight: 600;
}
.ak-filter-count {
opacity: 0.75;
font-weight: 500;
}
.ak-filter-pill--active .ak-filter-count {
opacity: 0.9;
}
/* Модальное окно удаления ключа доступа (HTML dialog) */
.ak-delete-dialog {
border: none;
border-radius: var(--radius);
padding: 0;
max-width: 32rem;
width: calc(100vw - 2rem);
background: var(--bg-surface);
color: var(--text-primary);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.ak-delete-dialog::backdrop {
background: rgba(0, 0, 0, 0.45);
}
.ak-delete-dialog__form {
padding: 22px 24px;
}
.ak-delete-dialog__title {
margin: 0 0 12px;
font-size: var(--font-size-md);
}
.ak-delete-dialog__text {
margin: 0 0 16px;
font-size: var(--font-size-sm);
line-height: 1.55;
color: var(--text-secondary);
}
.ak-delete-dialog__consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 20px;
font-size: var(--font-size-sm);
line-height: 1.45;
}
.ak-delete-dialog__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
/* ── NOWPayments: карточка заказа в платформенной админке ── */
.ak-np-row > td {
border-top: 0 !important;
}
.ak-np-card {
margin: 4px 8px 12px;
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.ak-np-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--border);
}
.ak-np-card__title {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
}
.ak-np-card__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px 18px;
}
.ak-np-card__field {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ak-np-card__field--wide {
grid-column: 1 / -1;
}
.ak-np-card__label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.ak-np-card__value {
font-size: 0.88rem;
color: var(--text-primary);
word-break: break-all;
background: transparent;
padding: 0;
margin: 0;
}
.ak-np-card__value--copy {
cursor: copy;
display: inline-block;
padding: 4px 6px;
border-radius: 4px;
background: var(--bg-surface);
border: 1px dashed transparent;
transition: border-color 0.12s ease, background 0.12s ease;
}
.ak-np-card__value--copy:hover {
border-color: var(--border);
background: var(--bg-surface-hover);
}
.ak-note-form .ak-note-input {
width: 100%;
padding: 6px 8px;
border-radius: 6px;
font-family: inherit;
}
/* ── Прогрев аккаунтов: карточки по аккаунту ── */
.nw-accounts-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.nw-account-card {
border: 1px solid var(--border);
box-shadow:
0 1px 0 rgba(0, 0, 0, 0.05),
0 10px 28px rgba(0, 0, 0, 0.07);
}
.nw-account-card .card-body {
padding-top: 18px;
padding-bottom: 18px;
}
.nw-account-card__header {
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-light);
}
.nw-account-card__title {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 10px 14px;
}
.nw-account-card__name {
font-size: var(--font-size-md);
letter-spacing: -0.01em;
word-break: break-word;
}
.nw-account-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
}
.nw-account-card__grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(11rem, 0.85fr);
gap: 18px 24px;
align-items: start;
}
.nw-account-card__sec-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin-bottom: 8px;
opacity: 0.9;
}
.nw-account-card__preset {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed var(--border);
}
.nw-account-card__preset .nw-preset-preview {
margin: 0;
}
.nw-col-plan {
font-size: var(--font-size-sm);
line-height: 1.5;
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.nw-plan-summary {
opacity: 0.92;
margin-top: 4px;
}
.nw-plan-meta {
margin-top: 6px;
}
.nw-plan-totals {
margin-top: 8px;
font-size: 11px;
line-height: 1.45;
opacity: 0.88;
word-break: break-word;
}
.nw-plan-totals-label {
opacity: 0.75;
}
.nw-plan-placeholder {
color: var(--text-secondary);
font-size: var(--font-size-sm);
}
.nw-actions-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.nw-actions-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.nw-inline-form {
display: inline-block;
}
.nw-preset-preview {
margin: 0;
padding: 12px 16px;
width: 100%;
max-width: none;
box-sizing: border-box;
font-size: var(--font-size-sm);
line-height: 1.55;
border: 1px solid var(--border);
word-break: break-word;
overflow-wrap: anywhere;
}
.nw-preset-preview .nw-preset-title {
font-weight: 600;
margin: 0 0 6px;
}
.nw-preset-preview .nw-preset-bullets {
margin: 0;
padding-left: 1.15rem;
}
.nw-preset-preview .nw-preset-bullets li {
margin-bottom: 6px;
}
.nw-preset-preview .nw-preset-bullets li:last-child {
margin-bottom: 0;
}
/* «Вручную: готов» — явная кнопка (не сливается с текстом как btn-ghost) */
button.nw-btn-manual-ready {
font-weight: 600;
min-width: 9.5rem;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
background: color-mix(in srgb, var(--accent) 16%, var(--bg-surface));
}
button.nw-btn-manual-ready:hover {
background: color-mix(in srgb, var(--accent) 26%, var(--bg-surface));
}
button.nw-btn-remove-warmup {
font-weight: 500;
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-secondary);
}
button.nw-btn-remove-warmup:hover {
color: var(--danger);
border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface));
}
.nw-hidden-warmup-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
}
.nw-hidden-warmup-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
}
.nw-hidden-warmup-row:last-child {
border-bottom: none;
}
.nw-hidden-warmup-name {
font-weight: 500;
word-break: break-word;
}
@media (max-width: 900px) {
body.page-nw-warming .page-body {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 768px) {
.nw-account-card__grid {
grid-template-columns: 1fr;
}
.nw-account-card__badges {
justify-content: flex-start;
}
}