/* ============================================================
COVERPRESS admin — admin.css
Шаг 1: скелет (сайдбар + контент + заглушка)
Палитра/радиусы/анимации — из docs/tz-admin-adaptation.md §6
============================================================ */
@font-face {
font-family: "Inter";
src: url("../../public/fonts/inter.woff2") format("woff2-variations"),
url("../../public/fonts/inter.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fredoka";
src: url("../../public/fonts/fredoka.ttf") format("truetype-variations"),
url("../../public/fonts/fredoka.ttf") format("truetype");
font-weight: 300 700;
font-style: normal;
font-display: swap;
}
:root {
--bg: #fafafa;
--surface: #ffffff;
--text: #111111;
--text-2: #666666;
--text-3: #999999;
--border: #e5e5e5;
--border-soft: #f0f0f0;
--accent: #FF6B47;
--accent-hover: #E85A37;
--accent-active: #D14A2A;
--accent-tint: rgba(255, 107, 71, 0.08);
--accent-tint-strong: rgba(255, 107, 71, 0.14);
--turquoise: #1FB6C3;
--r-pill: 100px;
--r-card-lg: 24px;
--r-card: 16px;
--r-input: 12px;
--r-sm: 8px;
--sidebar-w: 264px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.2s var(--ease);
--t-mid: 0.3s var(--ease);
}
/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
img, svg { display: block; }
/* ============ Логотип (брендовый, из docs/brand.md) ============ */
.brand { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 2px; }
.logo-cover {
font-family: "Fredoka", "Inter", sans-serif;
font-weight: 700;
font-variation-settings: "wdth" 110;
letter-spacing: -0.01em;
color: var(--accent);
line-height: 1;
}
.logo-press {
font-family: "Inter", sans-serif;
font-weight: 600;
font-style: italic;
letter-spacing: -0.01em;
color: var(--turquoise);
line-height: 1;
transform: translateY(1px);
}
/* ============ Каркас ============ */
.app {
display: flex;
min-height: 100vh;
}
/* ============ Сайдбар ============ */
.sidebar {
width: var(--sidebar-w);
flex-shrink: 0;
background: var(--surface);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
}
.sidebar-header {
padding: 20px 20px 16px;
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar-header .logo {
font-size: 22px;
display: inline-flex;
align-items: baseline;
}
.sidebar-header .logo .logo-press { font-size: 17px; }
.sidebar-burger {
display: none;
width: 32px;
height: 32px;
border-radius: var(--r-sm);
color: var(--text-2);
align-items: center;
justify-content: center;
transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-burger:hover { background: var(--accent-tint); color: var(--accent); }
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 16px 12px 24px;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.nav-group { margin-bottom: 18px; }
.nav-group:last-child { margin-bottom: 0; }
.nav-group-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-3);
padding: 0 12px 8px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: 10px;
color: var(--text-2);
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.nav-item:hover {
background: var(--accent-tint);
color: var(--text);
}
.nav-item.active {
background: var(--accent-tint-strong);
color: var(--accent);
font-weight: 600;
}
.nav-item .nav-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.sidebar-footer {
padding: 14px 20px 20px;
border-top: 1px solid var(--border-soft);
color: var(--text-3);
font-size: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar-footer .ver { font-variant-numeric: tabular-nums; }
/* ============ Контент ============ */
.content {
flex: 1;
min-width: 0;
padding: 32px 40px 64px;
max-width: 1400px;
}
.page-head {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 24px;
}
.page-title {
font-size: 28px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.page-sub {
font-size: 14px;
color: var(--text-3);
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-card);
padding: 28px;
}
.placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 320px;
text-align: center;
padding: 48px 24px;
color: var(--text-3);
}
.placeholder-icon {
width: 56px;
height: 56px;
margin-bottom: 16px;
color: var(--accent);
opacity: 0.6;
}
.placeholder-title {
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.placeholder-text {
font-size: 14px;
max-width: 380px;
}
/* ============ Кнопки ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 20px;
border-radius: var(--r-pill);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); transform: translateY(1px); }
.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
background: var(--surface);
color: var(--text);
border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--text-3); }
/* ============ Settings — копия 1:1 из botix-pro settings.php ============ */
.socials-card { padding: 24px; }
.socials-card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text); }
.socials-card-subtitle { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.social-row {
display: grid;
grid-template-columns: 56px 130px 1fr 130px 150px 36px 28px;
gap: 10px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.social-row:last-of-type { border-bottom: none; }
.icon-preview {
width: 56px; height: 56px;
background: var(--bg);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
position: relative;
overflow: hidden;
cursor: pointer;
transition: background 0.15s;
}
.icon-preview:hover { background: #ececee; }
.icon-preview svg, .icon-preview img {
width: 24px; height: 24px;
fill: currentColor;
transition: transform 0.15s;
object-fit: contain;
pointer-events: none;
}
.icon-preview .size-badge {
position: absolute;
bottom: 2px; right: 4px;
font-size: 9px;
color: var(--text-2);
font-variant-numeric: tabular-nums;
background: var(--surface);
padding: 1px 4px;
border-radius: 4px;
pointer-events: none;
}
.icon-preview .upload-hint {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
font-size: 18px;
opacity: 0; transition: opacity 0.15s;
background: rgba(0,0,0,0.04);
border-radius: 10px;
pointer-events: none;
}
.icon-preview:hover .upload-hint { opacity: 1; }
.icon-preview input[type=file] { display: none; }
.name-input {
padding: 8px 10px;
font-size: 14px;
font-weight: 500;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: transparent;
color: var(--text);
font-family: inherit;
width: 100%;
transition: background 0.15s, border-color 0.15s;
}
.name-input:hover { background: var(--bg); }
.name-input:focus {
outline: none;
background: var(--surface);
border-color: var(--accent);
}
.prefix-input {
display: flex;
align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
overflow: hidden;
transition: border-color 0.15s;
}
.prefix-input:focus-within { border-color: var(--accent); }
.prefix-input .prefix-static,
.prefix-input .prefix-edit {
padding: 0 10px;
display: flex; align-items: center;
font-size: 13px;
color: var(--text-2);
background: var(--bg);
border-right: 1px solid var(--border);
white-space: nowrap;
user-select: none;
min-height: 36px;
}
.prefix-input .prefix-edit {
padding: 0 8px;
border: none;
background: var(--bg);
color: var(--text-2);
font-family: inherit;
min-width: 110px;
text-align: right;
outline: none;
border-right: 1px solid var(--border);
user-select: text;
}
.prefix-input input.username {
flex: 1;
padding: 8px 12px;
font-size: 14px;
border: none;
background: transparent;
outline: none;
font-family: inherit;
color: var(--text);
min-width: 0;
}
.icon-upload-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 500;
color: var(--text);
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
white-space: nowrap;
}
.icon-upload-btn:hover { border-color: var(--accent); color: var(--accent); }
.icon-upload-btn svg { width: 14px; height: 14px; fill: currentColor; }
.icon-upload-btn input[type=file] { display: none; }
.size-control { display: flex; flex-direction: column; gap: 4px; }
.size-control-head {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px;
color: var(--text-2);
}
.size-value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.size-range {
width: 100%; height: 4px;
-webkit-appearance: none; appearance: none;
background: #E5E5EA;
border-radius: 2px;
outline: none;
cursor: pointer;
}
.size-range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
cursor: pointer;
}
.size-range::-moz-range-thumb {
width: 16px; height: 16px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
cursor: pointer;
}
.switch {
position: relative; display: inline-block;
width: 36px; height: 22px;
flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
position: absolute; inset: 0;
background: #E5E5EA;
border-radius: 11px;
cursor: pointer;
transition: background 0.2s;
}
.switch-slider::before {
content: "";
position: absolute;
height: 18px; width: 18px;
left: 2px; top: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
transition: transform 0.2s;
}
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(14px); }
.btn-remove {
width: 28px; height: 28px;
border-radius: 6px;
background: transparent;
border: none;
color: var(--text-2);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.btn-remove:hover { background: #FEE2E2; color: #DC2626; }
.btn-remove svg { width: 14px; height: 14px; fill: currentColor; }
.btn-remove[disabled] {
opacity: 0.3;
cursor: not-allowed;
}
.btn-remove[disabled]:hover { background: transparent; color: var(--text-2); }
.add-row {
display: flex; align-items: center; gap: 8px;
padding: 16px 0 4px;
color: var(--accent);
font-size: 14px;
font-weight: 500;
cursor: pointer;
background: none;
border: none;
font-family: inherit;
transition: opacity 0.15s;
}
.add-row:hover { opacity: 0.7; }
.add-row svg { width: 18px; height: 18px; fill: currentColor; }
.form-actions {
display: flex; justify-content: flex-end; gap: 8px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.row-headers {
display: grid;
grid-template-columns: 56px 130px 1fr 130px 150px 36px 28px;
gap: 10px;
padding: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-2);
border-bottom: 1px solid var(--border);
}
.toast {
position: fixed; bottom: 24px; right: 24px;
padding: 12px 18px;
background: var(--text);
color: #fff;
border-radius: 10px;
font-size: 14px;
box-shadow: 0 6px 24px rgba(0,0,0,0.2);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
z-index: 1000;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast.is-error { background: #DC2626; }
/* Блок «Платёжные карты» — симметричен блоку соцсетей */
.payments-card { padding: 24px; margin-top: 24px; }
.payments-card-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.payments-card-subtitle { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.payments-preview { margin-bottom: 20px; }
.payments-preview-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.3px; color: var(--text-2); margin-bottom: 8px;
}
.payments-preview-bg {
background: #fff; border: 1px solid var(--border); border-radius: 10px;
padding: 16px 20px; display: flex; align-items: center;
justify-content: flex-end; min-height: 48px;
}
.payments-preview-cards {
display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap;
}
.payments-preview-card {
display: inline-flex; align-items: center; justify-content: center;
height: calc(28px * var(--icon-scale, 1)); width: auto; line-height: 1;
}
.payments-preview-card svg, .payments-preview-card img {
height: 100%; width: auto; object-fit: contain; display: block;
}
.payments-preview-empty {
font-size: 12px; color: var(--text-2); font-style: italic;
}
.payment-row {
display: grid;
grid-template-columns: 64px 130px 1fr 130px 150px 36px 28px;
gap: 10px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.payment-row:last-of-type { border-bottom: none; }
.card-preview {
width: 64px; height: 40px;
background: var(--bg);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
position: relative;
overflow: hidden;
cursor: pointer;
transition: background 0.15s;
}
.card-preview:hover { background: #ececee; }
.card-preview svg, .card-preview img {
width: 40px; height: 24px;
transition: transform 0.15s;
object-fit: contain;
pointer-events: none;
}
.card-preview .size-badge {
position: absolute;
bottom: 2px; right: 4px;
font-size: 9px;
color: var(--text-2);
font-variant-numeric: tabular-nums;
background: var(--surface);
padding: 1px 4px;
border-radius: 4px;
pointer-events: none;
}
.card-preview .upload-hint {
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text-2);
font-size: 18px;
opacity: 0; transition: opacity 0.15s;
background: rgba(0,0,0,0.04);
border-radius: 6px;
pointer-events: none;
}
.card-preview:hover .upload-hint { opacity: 1; }
.card-preview input[type=file] { display: none; }
.url-input {
padding: 8px 12px;
font-size: 13px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--surface);
color: var(--text);
font-family: inherit;
width: 100%;
outline: none;
transition: border-color 0.15s;
}
.url-input:focus { border-color: var(--accent); }
.url-input::placeholder { color: var(--text-2); }
.row-headers-payments {
display: grid;
grid-template-columns: 64px 130px 1fr 130px 150px 36px 28px;
gap: 10px;
padding: 0 0 8px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-2);
border-bottom: 1px solid var(--border);
}
@media (max-width: 800px) {
.row-headers,
.row-headers-payments { display: none; }
.social-row {
grid-template-columns: 56px 1fr 36px 28px;
grid-template-rows: auto auto auto;
gap: 8px 10px;
padding: 16px 0;
}
.social-row .icon-preview { grid-column: 1 / 2; grid-row: 1 / 4; }
.social-row .name-input { grid-column: 2 / 3; grid-row: 1 / 2; padding-left: 0; }
.social-row .switch { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; }
.social-row .btn-remove { grid-column: 4 / 5; grid-row: 1 / 2; }
.prefix-input { grid-column: 2 / 5; grid-row: 2 / 3; }
.social-row .controls-stack {
grid-column: 2 / 5;
grid-row: 3 / 4;
display: flex; gap: 12px; align-items: center;
}
.payment-row {
grid-template-columns: 64px 1fr 36px 28px;
grid-template-rows: auto auto auto;
gap: 8px 10px;
padding: 16px 0;
}
.payment-row .card-preview { grid-column: 1 / 2; grid-row: 1 / 4; }
.payment-row .name-input { grid-column: 2 / 3; grid-row: 1 / 2; padding-left: 0; }
.payment-row .switch { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; }
.payment-row .btn-remove { grid-column: 4 / 5; grid-row: 1 / 2; }
.url-input { grid-column: 2 / 5; grid-row: 2 / 3; }
.payment-row .controls-stack {
grid-column: 2 / 5;
grid-row: 3 / 4;
display: flex; gap: 12px; align-items: center;
}
.icon-upload-btn-wrap { flex: 0 0 auto; }
.size-control { flex: 1; min-width: 0; }
}
@media (min-width: 801px) {
.controls-stack { display: contents; }
}
/* ============ Адаптеры стилей ============ */
.adapters-card { padding: 24px; }
.adapters-card-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 20px;
}
.adapters-card-title { font-size: 17px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.adapters-card-subtitle { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.adapters-card-subtitle code {
background: var(--bg); padding: 1px 5px; border-radius: 4px;
font-size: 12px; font-family: ui-monospace, Menlo, monospace;
}
.adapters-summary {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px;
}
.adapters-summary-item {
background: var(--bg); border-radius: 10px; padding: 14px;
}
.adapters-summary-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 6px;
}
.adapters-summary-value {
font-size: 24px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums; line-height: 1;
}
.adapters-table-wrap { overflow-x: auto; }
.adapters-table {
width: 100%; border-collapse: collapse; font-size: 13px;
}
.adapters-table thead th {
text-align: left; padding: 10px 12px;
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-2);
background: var(--bg); border-bottom: 1px solid var(--border);
}
.adapters-table tbody td {
padding: 12px; border-bottom: 1px solid var(--border-soft);
vertical-align: middle;
}
.adapters-table tbody tr:hover { background: var(--bg); }
.adapters-table .col-slug {
font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-2);
}
.adapters-table .col-num { font-variant-numeric: tabular-nums; text-align: center; }
.adapters-table .col-score { font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
/* Статусы адаптера */
.adapter-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 100px;
font-size: 12px; font-weight: 600;
}
.adapter-status::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.adapter-status--ready { background: #ecfdf5; color: #15803d; }
.adapter-status--ready::before { background: #16a34a; }
.adapter-status--training { background: #fff7ed; color: #c2410c; }
.adapter-status--training::before { background: #ea580c; animation: pulse 1.5s ease-in-out infinite; }
.adapter-status--planned { background: var(--bg); color: var(--text-2); }
.adapter-status--planned::before { background: var(--text-3); }
.adapter-status--quarantine { background: #fef2f2; color: #b91c1c; }
.adapter-status--quarantine::before { background: #dc2626; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.adapters-table .btn-row {
padding: 5px 12px; font-size: 12px; font-weight: 500;
background: transparent; border: 1px solid var(--border);
color: var(--text); border-radius: 100px; cursor: pointer;
transition: border-color var(--t-fast), color var(--t-fast);
}
.adapters-table .btn-row:hover { border-color: var(--accent); color: var(--accent); }
.adapters-table .btn-row[disabled] { opacity: 0.4; cursor: not-allowed; }
.adapters-table .col-date { color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.adapters-table .col-dash { color: var(--text-3); }
.adapters-footer {
margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);
font-size: 12.5px; color: var(--text-2);
}
.adapters-footer code {
background: var(--bg); padding: 1px 5px; border-radius: 4px;
font-family: ui-monospace, Menlo, monospace; font-size: 12px;
}
@media (max-width: 800px) {
.adapters-summary { grid-template-columns: repeat(2, 1fr); }
.adapters-card-head { flex-direction: column; }
}
/* ============ GPU-сервер ============ */
.gpu-status-card {
padding: 28px;
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
}
.gpu-status-main { flex: 1; min-width: 0; }
.gpu-status-indicator {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-2); margin-bottom: 10px;
}
.gpu-status-indicator .gpu-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-3);
}
.gpu-status-indicator.running { color: #15803d; }
.gpu-status-indicator.running .gpu-dot {
background: #16a34a;
box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18);
animation: pulse 2s ease-in-out infinite;
}
.gpu-status-indicator.starting { color: #c2410c; }
.gpu-status-indicator.starting .gpu-dot {
background: #ea580c; animation: pulse 1s ease-in-out infinite;
}
.gpu-status-indicator.stopped { color: var(--text-2); }
.gpu-status-indicator.error { color: #b91c1c; }
.gpu-status-indicator.error .gpu-dot { background: #dc2626; }
.gpu-status-title {
font-size: 22px; font-weight: 600; color: var(--text);
letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 8px;
}
.gpu-status-meta {
font-size: 13.5px; color: var(--text-2); line-height: 1.6;
}
.gpu-status-meta b {
color: var(--text); font-variant-numeric: tabular-nums;
}
.gpu-status-actions {
display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
}
.gpu-status-actions .btn { min-width: 180px; justify-content: flex-start; }
/* GPU history table re-uses .adapters-table стили */
.result-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 100px;
font-size: 12px; font-weight: 600;
}
.result-pill--ok { background: #ecfdf5; color: #15803d; }
.result-pill--partial { background: #fff7ed; color: #c2410c; }
.result-pill--failed { background: #fef2f2; color: #b91c1c; }
.result-pill--manual { background: #eef2ff; color: #4338ca; }
@media (max-width: 800px) {
.gpu-status-card { flex-direction: column; align-items: stretch; }
.gpu-status-actions { flex-direction: row; }
.gpu-status-actions .btn { flex: 1; min-width: 0; justify-content: center; }
}
/* ============ Очередь генераций ============ */
.queue-eta {
flex-shrink: 0; text-align: right;
padding: 12px 18px; background: var(--bg);
border-radius: 12px; min-width: 200px;
}
.queue-eta-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 4px;
}
.queue-eta-value {
font-size: 20px; font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums; line-height: 1;
}
.queue-styles-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.queue-style-card {
background: var(--bg); border-radius: 10px; padding: 14px;
display: flex; align-items: center; gap: 12px;
}
.queue-style-card-icon {
width: 40px; height: 40px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--accent);
}
.queue-style-card-info { flex: 1; min-width: 0; }
.queue-style-card-name {
font-size: 13.5px; font-weight: 600; color: var(--text);
margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.queue-style-card-meta {
font-size: 12px; color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.queue-style-card-count {
font-size: 22px; font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.queue-empty {
padding: 32px; text-align: center;
font-size: 13px; color: var(--text-3);
background: var(--bg); border-radius: 10px;
}
/* Tabs */
.queue-tabs {
display: flex; gap: 4px; border-bottom: 1px solid var(--border);
}
.queue-tab {
padding: 10px 16px; background: transparent;
border: none; border-bottom: 2px solid transparent;
font-size: 13.5px; font-weight: 500; color: var(--text-2);
cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
font-family: inherit; margin-bottom: -1px;
transition: color var(--t-fast), border-color var(--t-fast);
}
.queue-tab:hover { color: var(--text); }
.queue-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.queue-tab-count {
background: var(--bg); color: var(--text-2);
padding: 1px 8px; border-radius: 100px;
font-size: 11px; font-weight: 700;
font-variant-numeric: tabular-nums;
}
.queue-tab--active .queue-tab-count { background: var(--accent-tint); color: var(--accent); }
.tariff-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 2px 8px; border-radius: 100px;
font-size: 11px; font-weight: 600;
}
.tariff-pill--standard { background: var(--bg); color: var(--text-2); }
.tariff-pill--express { background: #fff7ed; color: #c2410c; }
.tariff-pill--express::before { content: "🚀"; }
.wait-time { font-variant-numeric: tabular-nums; font-size: 12.5px; }
.wait-time--ok { color: var(--text-2); }
.wait-time--warning { color: #ea580c; font-weight: 600; }
.wait-time--breach { color: #dc2626; font-weight: 700; }
/* ============ Тест-генерация ============ */
.testgen-layout {
display: grid; grid-template-columns: 420px 1fr; gap: 20px;
}
.testgen-form-card, .testgen-result-card { padding: 24px; }
.testgen-field { margin-bottom: 14px; }
.testgen-label {
display: block; font-size: 12px; font-weight: 600;
color: var(--text-2); margin-bottom: 6px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.testgen-input, .testgen-select, .testgen-textarea {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
font-size: 13.5px; font-family: inherit;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.testgen-input:focus, .testgen-select:focus, .testgen-textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-tint);
}
.testgen-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.testgen-row { display: flex; gap: 10px; }
.testgen-go { width: 100%; margin-top: 8px; padding: 12px 24px; font-size: 14px; }
.testgen-go[disabled] { opacity: 0.6; cursor: progress; }
.testgen-hint {
margin-top: 16px; padding: 12px;
background: var(--bg); border-radius: 10px;
font-size: 12px; line-height: 1.6; color: var(--text-2);
}
.testgen-hint code {
background: var(--surface); padding: 1px 5px; border-radius: 4px;
font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text);
}
.testgen-link {
background: none; border: none; color: var(--accent);
cursor: pointer; font-size: 12px; padding: 0 4px;
text-decoration: underline;
}
.testgen-results {
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px; min-height: 280px;
}
.testgen-placeholder {
grid-column: 1/-1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 60px 20px; color: var(--text-3); text-align: center;
background: var(--bg); border-radius: 12px;
}
.testgen-placeholder p { margin-top: 12px; font-size: 13.5px; }
.testgen-result-item {
background: var(--bg); border-radius: 12px; overflow: hidden;
display: flex; flex-direction: column;
}
.testgen-result-item.is-loading {
display: flex; align-items: center; justify-content: center;
min-height: 280px; flex-direction: column; gap: 12px;
}
.testgen-result-item.is-loading .spinner {
width: 32px; height: 32px; border-radius: 50%;
border: 3px solid var(--border); border-top-color: var(--accent);
animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.testgen-result-item img { width: 100%; height: auto; display: block; background: #eee; }
.testgen-result-item-meta {
padding: 10px 12px; font-size: 11.5px; color: var(--text-2);
font-family: ui-monospace, Menlo, monospace;
display: flex; justify-content: space-between; align-items: center;
}
.testgen-result-item-meta b { color: var(--text); font-weight: 600; }
.testgen-result-item.is-error {
background: #fef2f2; color: #b91c1c;
padding: 24px; text-align: center; font-size: 13px;
}
.testgen-history { display: flex; flex-direction: column; gap: 6px; }
.testgen-history-empty {
padding: 20px; text-align: center; color: var(--text-3);
font-size: 13px; background: var(--bg); border-radius: 10px;
}
.testgen-history-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; background: var(--bg); border-radius: 8px;
font-size: 12.5px; color: var(--text-2);
font-family: ui-monospace, Menlo, monospace;
}
.testgen-history-row .h-time { width: 70px; color: var(--text-3); flex-shrink: 0; }
.testgen-history-row .h-style { color: var(--accent); width: 200px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.testgen-history-row .h-prompt { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
.testgen-history-row .h-duration { color: var(--text-2); flex-shrink: 0; }
@media (max-width: 1000px) {
.testgen-layout { grid-template-columns: 1fr; }
}
/* ============ Логи и метрики ============ */
.logs-window-switch {
display: inline-flex; gap: 4px;
background: var(--bg); padding: 4px; border-radius: 10px;
}
.logs-window-btn {
padding: 6px 12px; background: transparent; border: none;
border-radius: 6px; font-size: 12.5px; font-weight: 500;
color: var(--text-2); cursor: pointer; font-family: inherit;
transition: background var(--t-fast), color var(--t-fast);
}
.logs-window-btn:hover { color: var(--text); }
.logs-window-btn--active { background: var(--surface); color: var(--accent); font-weight: 600; }
.logs-chart {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 2px; height: 140px; padding: 0 4px;
}
.logs-chart-bar {
flex: 1; min-width: 0; background: var(--accent-tint);
border-radius: 4px 4px 0 0; position: relative;
transition: background var(--t-fast);
}
.logs-chart-bar:hover { background: var(--accent); }
.logs-chart-bar[data-tip]:hover::after {
content: attr(data-tip);
position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
background: var(--text); color: #fff; padding: 4px 10px;
border-radius: 6px; font-size: 11px; white-space: nowrap;
font-family: ui-monospace, Menlo, monospace; z-index: 10;
margin-bottom: 4px;
}
.logs-list { display: flex; flex-direction: column; gap: 4px; max-height: 480px; overflow-y: auto; }
.logs-row {
display: grid; grid-template-columns: 130px 70px 90px 1fr;
gap: 10px; padding: 6px 12px; background: var(--bg);
border-radius: 6px; font-size: 12px;
font-family: ui-monospace, Menlo, monospace;
align-items: center;
}
.logs-row .l-time { color: var(--text-3); }
.logs-row .l-level {
padding: 1px 6px; border-radius: 4px; text-align: center;
font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.logs-row .l-level--info { background: #eff6ff; color: #1d4ed8; }
.logs-row .l-level--warning { background: #fff7ed; color: #c2410c; }
.logs-row .l-level--error { background: #fef2f2; color: #b91c1c; }
.logs-row .l-source { color: var(--text-2); }
.logs-row .l-message { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; }
/* ============ Стили (curator workflow) ============ */
.styles-tabs {
display: flex; gap: 0; border-bottom: 1px solid var(--border);
padding: 0 12px;
}
.styles-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 18px; background: transparent;
border: none; border-bottom: 2px solid transparent;
font-size: 13.5px; font-weight: 500; color: var(--text-2);
cursor: pointer; font-family: inherit; margin-bottom: -1px;
transition: color var(--t-fast), border-color var(--t-fast);
}
.styles-tab:hover { color: var(--text); }
.styles-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.styles-tab-count {
background: var(--bg); color: var(--text-2);
padding: 1px 9px; border-radius: 100px;
font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.styles-tab--active .styles-tab-count { background: var(--accent-tint); color: var(--accent); }
.styles-tab-panels { padding: 24px; }
.styles-panel-head { margin-bottom: 20px; }
/* Фильтры discovery */
.styles-filters { display: flex; flex-direction: column; gap: 12px; }
.styles-filter-row { display: flex; gap: 12px; flex-wrap: wrap; }
.styles-filter-group {
display: flex; flex-direction: column; gap: 6px;
min-width: 180px; flex: 1;
}
.styles-filter-label {
font-size: 11px; font-weight: 600; color: var(--text-2);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* Сетка карточек */
.styles-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.styles-grid--review { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.style-card {
background: var(--bg); border-radius: 12px; overflow: hidden;
display: flex; flex-direction: column;
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.style-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.style-card-preview {
aspect-ratio: 1; width: 100%;
background: linear-gradient(135deg, #e5e5ea, #cbd5e1);
display: flex; align-items: center; justify-content: center;
color: var(--text-3); position: relative; overflow: hidden;
}
.style-card-preview img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.style-card-badge {
position: absolute; top: 8px; right: 8px;
padding: 3px 8px; border-radius: 100px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.04em;
}
.style-card-badge--published { background: rgba(22,163,74,0.92); color: #fff; }
.style-card-badge--hidden { background: rgba(100,116,139,0.92); color: #fff; }
.style-card-badge--commercial { background: rgba(22,163,74,0.92); color: #fff; }
.style-card-badge--restricted { background: rgba(220,38,38,0.92); color: #fff; }
.style-card-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.style-card-title {
font-size: 14px; font-weight: 600; color: var(--text);
line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.style-card-meta {
font-size: 11.5px; color: var(--text-2);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-variant-numeric: tabular-nums;
}
.style-card-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.style-card-source {
font-size: 10px; font-weight: 700; padding: 2px 6px;
border-radius: 4px; text-transform: uppercase;
letter-spacing: 0.04em;
}
.style-card-source--civitai { background: #fde68a; color: #92400e; }
.style-card-source--huggingface { background: #fce7f3; color: #9f1239; }
.style-card-source--manual { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
.style-card-source--vova { background: #dbeafe; color: #1e40af; }
.style-card-license {
font-size: 11px; padding: 2px 8px; border-radius: 100px;
display: inline-flex; align-items: center; gap: 4px;
}
.style-card-license--ok { background: #ecfdf5; color: #15803d; }
.style-card-license--warn { background: #fff7ed; color: #c2410c; }
.style-card-license--block { background: #fef2f2; color: #b91c1c; }
.style-card-actions {
display: flex; gap: 6px; padding: 12px 14px; padding-top: 0;
border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 12px;
}
.style-card-actions .btn-row { flex: 1; font-size: 12px; padding: 6px 10px; text-align: center; }
.style-card-actions .btn-accept { background: var(--accent); color: #fff; border-color: var(--accent); }
.style-card-actions .btn-accept:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.style-card-actions .btn-reject { color: #b91c1c; }
.style-card-actions .btn-reject:hover { border-color: #dc2626; color: #dc2626; }
/* Чек-листы проверок */
.style-checks {
display: flex; flex-direction: column; gap: 4px;
font-size: 11.5px; color: var(--text-2);
}
.style-check { display: flex; align-items: center; gap: 6px; }
.style-check svg { width: 12px; height: 12px; flex-shrink: 0; }
.style-check--ok { color: #15803d; }
.style-check--warn { color: #c2410c; }
.style-check--fail { color: #b91c1c; }
/* VOVA progress 8 stages */
.style-vova-progress {
display: flex; gap: 3px; padding: 8px 14px;
}
.style-vova-stage {
flex: 1; height: 4px; border-radius: 2px;
background: var(--border);
}
.style-vova-stage--done { background: #16a34a; }
.style-vova-stage--current { background: #ea580c; animation: pulse 1.5s ease-in-out infinite; }
/* Empty state */
.styles-empty {
grid-column: 1/-1;
text-align: center; padding: 60px 24px;
background: var(--bg); border-radius: 12px;
color: var(--text-3);
}
.styles-empty svg { width: 48px; height: 48px; opacity: 0.4; margin-bottom: 12px; }
.styles-empty-title { font-size: 15px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.styles-empty-text { font-size: 13px; }
/* ============ Теги ============ */
.tags-style-selector {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding-top: 8px;
}
.tags-progress {
display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px;
}
.tags-progress-label { font-size: 12px; color: var(--text-2); font-weight: 600; }
.tags-progress-value {
font-size: 13px; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums; min-width: 70px;
}
.tags-progress-bar {
flex: 1; height: 6px; background: var(--bg);
border-radius: 100px; overflow: hidden; max-width: 240px;
}
.tags-progress-fill {
height: 100%; background: linear-gradient(90deg, var(--accent), #16a34a);
border-radius: 100px; transition: width 0.4s var(--ease);
}
.tags-groups {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px; margin-top: 20px;
}
.tags-group {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 18px;
display: flex; flex-direction: column; min-height: 400px;
}
.tags-group-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 14px; padding-bottom: 12px;
border-bottom: 1px solid var(--border-soft);
}
.tags-group-title {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; color: var(--text);
}
.tags-group-dot { width: 8px; height: 8px; border-radius: 50%; }
.tags-group-count {
background: var(--bg); padding: 1px 8px; border-radius: 100px;
font-size: 11px; font-weight: 700; color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.tags-list {
display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start;
}
.tag-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px 5px 12px; border-radius: 100px;
background: var(--bg); border: 1px solid var(--border);
font-size: 12.5px; color: var(--text);
transition: border-color var(--t-fast), background var(--t-fast);
}
.tag-pill:hover { border-color: var(--accent); background: var(--accent-tint); }
.tag-pill[contenteditable] {
outline: none; cursor: text;
border-color: var(--accent); background: var(--accent-tint);
}
.tag-pill-delete {
background: none; border: none; color: var(--text-3);
cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1;
border-radius: 50%; width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
}
.tag-pill-delete:hover { background: #fef2f2; color: #dc2626; }
.tag-empty {
width: 100%; text-align: center; padding: 24px 12px;
color: var(--text-3); font-size: 12.5px;
background: var(--bg); border-radius: 8px;
border: 1px dashed var(--border);
}
/* Модалка */
.modal-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.5);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: 20px;
}
.modal-window {
background: var(--surface); border-radius: var(--r-card-lg);
width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto;
box-shadow: 0 32px 80px rgba(0,0,0,0.32);
}
.modal-head {
padding: 20px 24px; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center;
}
.modal-close {
background: none; border: none; font-size: 18px; cursor: pointer;
color: var(--text-2); padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-body { padding: 24px; }
@media (max-width: 900px) {
.tags-groups { grid-template-columns: 1fr; }
}
/* ============ Описания ============ */
.desc-preview {
margin-top: 20px; padding: 16px;
background: linear-gradient(135deg, var(--accent-tint), rgba(31, 182, 195, 0.1));
border-radius: 12px;
}
.desc-preview-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-2); margin-bottom: 8px;
}
.desc-preview-box {
background: var(--surface); padding: 14px 18px;
border-radius: 10px; font-size: 14px; line-height: 1.6;
color: var(--text); font-style: italic;
border-left: 3px solid var(--accent);
}
.desc-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 12px;
}
.desc-card {
background: var(--bg); border-radius: 10px; padding: 14px 16px;
display: flex; flex-direction: column; gap: 8px;
border: 1px solid transparent; transition: border-color var(--t-fast);
}
.desc-card:hover { border-color: var(--border); }
.desc-card-text {
font-size: 13px; line-height: 1.5; color: var(--text);
outline: none; min-height: 50px;
}
.desc-card-text[contenteditable] {
background: var(--surface); border-radius: 6px;
padding: 8px 10px; margin: -8px -10px;
}
.desc-card-footer {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: var(--text-3);
border-top: 1px solid var(--border-soft); padding-top: 8px;
}
.desc-card-charcount { font-variant-numeric: tabular-nums; }
.desc-card-charcount.warn { color: #ea580c; font-weight: 600; }
.desc-card-charcount.over { color: #dc2626; font-weight: 700; }
.desc-card-actions { display: flex; gap: 4px; }
.desc-card-actions button {
background: none; border: none; cursor: pointer;
padding: 2px 6px; border-radius: 4px;
color: var(--text-3); font-size: 11px;
transition: color var(--t-fast), background var(--t-fast);
}
.desc-card-actions .desc-edit:hover { color: var(--accent); background: var(--accent-tint); }
.desc-card-actions .desc-delete:hover { color: #dc2626; background: #fef2f2; }
/* ============ Темы ============ */
.themes-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.theme-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
display: flex; flex-direction: column; gap: 6px;
cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.theme-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 12px rgba(255, 107, 71, 0.08);
}
.theme-card-name {
font-size: 13.5px; font-weight: 600; color: var(--text);
line-height: 1.3;
}
.theme-card-meta {
display: flex; align-items: center; gap: 8px;
font-size: 11px; color: var(--text-2);
font-variant-numeric: tabular-nums;
}
.theme-card-wcount {
display: inline-flex; align-items: center; gap: 4px;
}
.theme-card-default {
display: inline-flex; align-items: center; gap: 4px;
padding: 1px 8px; border-radius: 100px;
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
background: var(--accent-tint); color: var(--accent);
}
.theme-card-empty-wc { color: var(--text-3); font-style: italic; }
/* ============ Пакеты ============ */
.pack-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 100px;
font-size: 12px; font-weight: 600;
}
.pack-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pack-status--ready { background: #ecfdf5; color: #15803d; }
.pack-status--ready::before { background: #16a34a; }
.pack-status--delivered { background: var(--bg); color: var(--text-2); }
.pack-status--delivered::before { background: var(--text-3); }
.pack-status--expiring { background: #fff7ed; color: #c2410c; }
.pack-status--expiring::before { background: #ea580c; }
.pack-status--expired { background: #fef2f2; color: #b91c1c; }
.pack-status--expired::before { background: #dc2626; }
.packs-actions { display: inline-flex; gap: 4px; }
.packs-actions .btn-row { padding: 4px 10px; font-size: 11.5px; }
/* ============ Заказы ============ */
.orders-filters {
display: flex; gap: 12px; flex-wrap: wrap;
}
.order-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 100px;
font-size: 11.5px; font-weight: 600;
}
.order-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.order-status--created { background: var(--bg); color: var(--text-2); }
.order-status--created::before { background: var(--text-3); }
.order-status--paid { background: #fff7ed; color: #c2410c; }
.order-status--paid::before { background: #ea580c; }
.order-status--generating { background: #eff6ff; color: #1d4ed8; }
.order-status--generating::before { background: #2563eb; animation: pulse 1.5s ease-in-out infinite; }
.order-status--delivered { background: #ecfdf5; color: #15803d; }
.order-status--delivered::before { background: #16a34a; }
.order-status--failed { background: #fef2f2; color: #b91c1c; }
.order-status--failed::before { background: #dc2626; }
.order-status--refunded { background: #f5f3ff; color: #6d28d9; }
.order-status--refunded::before { background: #7c3aed; }
/* Модалка деталей заказа */
.order-details-row {
display: grid; grid-template-columns: 160px 1fr;
gap: 12px; padding: 10px 0;
border-bottom: 1px solid var(--border-soft);
font-size: 13.5px;
}
.order-details-row:last-child { border-bottom: none; }
.order-details-label {
color: var(--text-2); font-weight: 500;
text-transform: uppercase; font-size: 11px;
letter-spacing: 0.04em; padding-top: 2px;
}
.order-details-value { color: var(--text); }
.order-details-value code {
background: var(--bg); padding: 1px 6px; border-radius: 4px;
font-size: 12px;
}
.order-details-timeline {
display: flex; flex-direction: column; gap: 8px;
background: var(--bg); border-radius: 10px; padding: 12px 14px;
font-size: 12.5px;
}
.order-details-timeline-step {
display: flex; align-items: center; gap: 8px;
}
.order-details-timeline-step::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--accent); flex-shrink: 0;
}
.order-details-timeline-step.is-pending::before { background: var(--border); }
.order-details-timeline-step.is-pending { color: var(--text-3); }
.order-details-timeline-step b { color: var(--text); font-variant-numeric: tabular-nums; }
/* ============ Лиды (1:1 BOTIX leads.php) ============ */
.leads-card { padding: 24px; }
/* --- Tabs статусов --- */
.leads-status-tabs {
display: flex; gap: 4px; margin-top: 18px; margin-bottom: 16px;
border-bottom: 1px solid var(--border); padding-bottom: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.leads-status-tab {
padding: 10px 18px; border: none; background: none;
font-size: 13px; font-weight: 500; color: var(--text-2);
cursor: pointer; position: relative; transition: color var(--t-fast);
border-bottom: 2px solid transparent; margin-bottom: -1px;
white-space: nowrap; flex-shrink: 0;
font-family: inherit;
}
.leads-status-tab:hover { color: var(--text); }
.leads-status-tab--active {
color: var(--text); border-bottom-color: var(--accent); font-weight: 600;
}
.leads-tab-count {
display: inline-block; min-width: 18px; height: 18px; line-height: 18px;
text-align: center; border-radius: 9px; font-size: 11px; font-weight: 600;
margin-left: 6px; padding: 0 5px;
}
.leads-tab-count--new { background: #fff4e6; color: #c2410c; }
.leads-tab-count--contacted { background: #eff6ff; color: #1d4ed8; }
.leads-tab-count--converted { background: #ecfdf5; color: #15803d; }
.leads-tab-count--rejected { background: #fef2f2; color: #b91c1c; }
/* --- Toolbar (поиск) --- */
.leads-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.leads-search {
display: flex; align-items: center; gap: 8px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; padding: 8px 12px; flex: 1; max-width: 360px;
}
.leads-search input {
border: none; background: none; outline: none; font-size: 14px;
color: var(--text); width: 100%; font-family: inherit;
}
.leads-search svg { flex-shrink: 0; color: var(--text-3); }
/* --- Таблица --- */
#leads-table tbody tr { cursor: pointer; }
.leads-row-source {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 100px;
font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.leads-row-source::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.leads-row-source--checkout_abandon { background: #fff7ed; color: #c2410c; }
.leads-row-source--checkout_abandon::before { background: #ea580c; }
.leads-row-source--landing_form { background: #eff6ff; color: #1d4ed8; }
.leads-row-source--landing_form::before { background: #2563eb; }
.leads-row-source--messenger_inquiry { background: #f5f3ff; color: #6d28d9; }
.leads-row-source--messenger_inquiry::before { background: #7c3aed; }
.leads-row-source--manual { background: var(--bg); color: var(--text-2); }
.leads-row-source--manual::before { background: var(--text-3); }
.leads-row-style-name { font-weight: 500; color: var(--text); }
.leads-row-project {
font-size: 12px; color: var(--text-2); margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px;
}
.leads-row-empty-style { color: var(--text-3); font-style: italic; font-size: 12.5px; }
.leads-row-contact-name { font-weight: 500; }
.leads-row-contact-meta { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
/* --- Empty-state --- */
.leads-empty {
padding: 60px 40px; text-align: center; color: var(--text-3);
}
.leads-empty svg { opacity: .3; margin-bottom: 12px; }
.leads-empty p { font-size: 14px; font-weight: 500; margin: 0; }
/* --- Card-модалка лида --- */
.lead-card-statusbar { margin-bottom: 18px; }
.lead-status-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px; border-radius: 100px;
font-size: 12px; font-weight: 600;
}
.lead-status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lead-status-pill--new { background: #fff4e6; color: #c2410c; }
.lead-status-pill--new::before { background: #ea580c; }
.lead-status-pill--contacted { background: #eff6ff; color: #1d4ed8; }
.lead-status-pill--contacted::before { background: #2563eb; animation: pulse 1.5s ease-in-out infinite; }
.lead-status-pill--converted { background: #ecfdf5; color: #15803d; }
.lead-status-pill--converted::before { background: #16a34a; }
.lead-status-pill--rejected { background: #fef2f2; color: #b91c1c; }
.lead-status-pill--rejected::before { background: #dc2626; }
.lead-card-section { margin-bottom: 16px; }
.lead-card-section-title {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 8px;
}
.lead-card-row {
display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px;
}
.lead-card-label { font-size: 12px; color: var(--text-2); width: 90px; flex-shrink: 0; }
.lead-card-value { font-size: 13.5px; color: var(--text); word-break: break-word; flex: 1; }
.lead-card-value a { color: var(--accent); text-decoration: none; }
.lead-card-value a:hover { text-decoration: underline; }
.lead-card-value code {
background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.lead-card-status-select {
display: flex; gap: 6px; flex-wrap: wrap;
}
.lead-card-status-btn {
padding: 6px 14px; border-radius: 10px; border: 1px solid var(--border);
background: var(--surface); font-size: 12px; font-weight: 500; cursor: pointer;
transition: all var(--t-fast); font-family: inherit; color: var(--text-2);
}
.lead-card-status-btn:hover { border-color: var(--text-2); color: var(--text); }
.lead-card-status-btn--active { color: #fff; border-color: transparent; font-weight: 600; }
.lead-card-status-btn--active.lead-card-status-btn--new { background: #ea580c; }
.lead-card-status-btn--active.lead-card-status-btn--contacted { background: #2563eb; }
.lead-card-status-btn--active.lead-card-status-btn--converted { background: #16a34a; }
.lead-card-status-btn--active.lead-card-status-btn--rejected { background: #dc2626; }
.lead-card-date {
font-size: 12px; color: var(--text-3); margin-top: 14px;
padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.lead-card-actions {
display: flex; gap: 10px; margin-top: 18px;
}
.lead-card-actions .btn { flex: 1; justify-content: center; }
.lead-card-delete-btn {
background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca;
}
.lead-card-delete-btn:hover { background: #fee2e2; }
/* --- Add-модалка лида --- */
.lead-add-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.lead-add-field { margin-bottom: 14px; }
.lead-add-field label {
display: block; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-2); margin-bottom: 6px;
}
.lead-add-actions {
display: flex; gap: 10px; margin-top: 18px;
}
.lead-add-actions .btn { flex: 1; justify-content: center; }
@media (max-width: 700px) {
.leads-col-mob-hide { display: none; }
.lead-add-row { grid-template-columns: 1fr; }
.lead-card-row { flex-direction: column; gap: 4px; }
.lead-card-label { width: auto; }
.leads-card .adapters-card-head { flex-direction: column; align-items: stretch; gap: 12px; }
}
/* ============ Финансы (1:1 BOTIX finance.php) ============ */
/* Шапка раздела */
.finance-page-h {
display: flex; align-items: center; gap: 12px;
margin-bottom: 22px; flex-wrap: wrap;
}
.finance-import-btn { flex-shrink: 0; }
.finance-upd { font-size: 12.5px; color: var(--text-3); flex: 1; min-width: 0; }
.finance-upd b { color: var(--text); font-weight: 600; }
.finance-acquiring-mini {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: var(--r-sm);
background: #eff4ff; color: #2563eb;
text-decoration: none; transition: background var(--t-fast); flex-shrink: 0;
}
.finance-acquiring-mini:hover { background: #dbe7ff; }
/* Inline action-bar */
.finance-action-bar {
display: none; align-items: center; gap: 12px; margin-left: auto;
}
.finance-action-bar.is-show { display: inline-flex; }
.fin-ab-text {
font-size: 11px; color: var(--text-2); line-height: 1.2;
display: inline-flex; align-items: baseline; gap: 4px;
}
.fin-ab-text b {
color: var(--text); font-weight: 700;
font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
.fin-ab-sum { display: inline-flex; align-items: baseline; gap: 4px; }
.fin-ab-sum::before { content: '·'; color: var(--border); margin: 0 4px; font-size: 12px; }
.fin-ab-confirm {
background: #16a34a; color: #fff; border: none;
border-radius: var(--r-sm); padding: 8px 16px;
font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; gap: 6px;
box-shadow: 0 2px 6px rgba(22,163,74,.25);
transition: background var(--t-fast), transform .12s;
}
.fin-ab-confirm:hover { background: #15803d; transform: translateY(-1px); }
.fin-ab-clear {
background: var(--bg); color: var(--text); border: none;
border-radius: var(--r-sm); padding: 8px 12px;
font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.fin-ab-clear:hover { background: var(--border-soft); }
/* KPI 5 карточек */
.fin-kpi-row {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 10px; margin-bottom: 20px;
}
.fin-kpi-card {
border-radius: 14px; padding: 12px 14px;
display: flex; justify-content: space-between; align-items: center;
min-width: 0; text-decoration: none; color: inherit;
}
.fin-kpi-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .3px;
}
.fin-kpi-hint { font-size: 10.5px; margin-top: 2px; }
.fin-kpi-value {
font-size: 24px; font-weight: 700;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fin-kpi-cur { font-size: 14px; font-weight: 500; margin-left: 1px; }
.fin-kpi-card--pos { background: #ecfdf3; }
.fin-kpi-card--pos .fin-kpi-label,
.fin-kpi-card--pos .fin-kpi-hint { color: #6aab72; }
.fin-kpi-card--pos .fin-kpi-value { color: #16a34a; }
.fin-kpi-card--warn { background: #fef7ed; }
.fin-kpi-card--warn .fin-kpi-label,
.fin-kpi-card--warn .fin-kpi-hint { color: #c9915a; }
.fin-kpi-card--warn .fin-kpi-value { color: #d97706; }
.fin-kpi-card--info { background: #eff4ff; }
.fin-kpi-card--info .fin-kpi-label,
.fin-kpi-card--info .fin-kpi-hint { color: #7b96c4; }
.fin-kpi-card--info .fin-kpi-value { color: #2563eb; }
.fin-kpi-card--neut { background: #ecedef; }
.fin-kpi-card--neut .fin-kpi-label,
.fin-kpi-card--neut .fin-kpi-hint { color: var(--text-2); }
.fin-kpi-card--neut .fin-kpi-value { color: var(--text); }
.fin-kpi-card--refund { background: #fef2f2; border: 1px solid rgba(229,57,53,.20); }
.fin-kpi-card--refund .fin-kpi-label,
.fin-kpi-card--refund .fin-kpi-hint { color: #b91c1c; }
.fin-kpi-card--refund .fin-kpi-value { color: #dc2626; }
.fin-kpi-card--refund.has-work { animation: fin-kpi-refund-pulse 1.8s ease-out infinite; }
@keyframes fin-kpi-refund-pulse {
0% { box-shadow: 0 0 0 0 rgba(229,57,53,.35); }
70% { box-shadow: 0 0 0 10px rgba(229,57,53,0); }
100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}
@media (max-width: 1100px) { .fin-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
.fin-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.fin-kpi-card { padding: 10px 12px; }
.fin-kpi-hint { display: none; }
.fin-kpi-cur { display: none; }
.fin-kpi-value { font-size: 22px; }
}
/* Filters bar (chips) */
.fin-filters-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.fin-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fin-chip {
padding: 7px 14px; border-radius: 10px;
border: 1px solid var(--border); background: var(--surface);
font-size: 12.5px; font-weight: 500; color: var(--text);
cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.fin-chip:hover { border-color: var(--accent); }
.fin-chip--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.fin-chip-cnt { font-weight: 700; opacity: .85; }
.fin-filter-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
/* Pay-grid (карточки платежей в 2 колонки) */
.fin-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .fin-pay-grid { grid-template-columns: 1fr; } }
.fin-pay-card {
border-radius: 12px; padding: 12px 14px;
cursor: pointer; transition: filter var(--t-fast);
display: grid;
grid-template-columns: 24px 130px 1fr 110px auto;
align-items: center; gap: 14px; font-size: 13.5px;
}
.fin-pay-card:hover { filter: brightness(.97); }
.fin-pay-card--pending { background: #fefae0; }
.fin-pay-card--succeeded { background: #ecfdf3; }
.fin-pay-card--failed { background: #fef2f2; color: #5b1f1f; }
.fin-pay-card--expired { background: #fef2f2; }
.fin-pay-card--review { background: #fef7ed; }
.fin-pay-card--checked { background: #ecfdf3 !important; }
.fin-pay-num { font-family: 'SF Mono', Menlo, monospace; font-weight: 600; font-size: 12px; opacity: .7; }
.fin-pay-tariff {
font-weight: 500; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.fin-pay-method { font-size: 11.5px; color: var(--text-2); }
.fin-pay-amount {
font-weight: 700; font-variant-numeric: tabular-nums;
text-align: right; white-space: nowrap;
}
.fin-pay-amount .cur { font-weight: 500; opacity: .55; margin-left: 2px; }
.fin-pay-review-note {
display: block; grid-column: 2 / -1;
color: #d97706; font-size: 11px; margin-top: 2px;
}
.fin-receipt-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 100px;
font-size: 11px; font-weight: 500; white-space: nowrap;
}
.fin-receipt-badge--done { background: #ecfdf3; color: #16a34a; }
.fin-receipt-badge--pending { background: #fefae0; color: #92400e; }
.fin-receipt-badge--failed { background: #fef2f2; color: #dc2626; }
/* Apple-style checkbox */
.fin-cb {
width: 20px; height: 20px;
border: 1.5px solid #d2d2d7; border-radius: 6px;
background: #fff; cursor: pointer;
appearance: none; -webkit-appearance: none;
transition: background var(--t-fast), border-color var(--t-fast);
position: relative; flex-shrink: 0; margin: 0;
}
.fin-cb:hover { border-color: var(--accent); }
.fin-cb:checked { background: var(--accent); border-color: var(--accent); }
.fin-cb:checked::after {
content: ''; position: absolute;
left: 5px; top: 1px;
width: 6px; height: 11px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.fin-empty-state { padding: 40px 20px; text-align: center; color: var(--text-3); font-size: 13px; }
/* Импорт выписки модалка */
.fin-import-drop {
border: 2px dashed var(--border);
border-radius: 12px; padding: 38px 20px;
text-align: center; cursor: pointer; color: var(--text-3);
transition: border-color var(--t-fast), background var(--t-fast);
}
.fin-import-drop:hover { border-color: var(--accent); background: var(--accent-tint); }
.fin-import-drop-title { font-size: 14px; font-weight: 600; margin-top: 10px; color: var(--text); }
.fin-import-drop-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }
#fin-import-result { margin-top: 14px; font-size: 13px; }
/* Модалка деталей платежа */
.fin-dm-status {
flex-shrink: 0; padding: 4px 12px;
border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
}
.fin-dm-status--active { background: #d1f7e0; color: #16a34a; }
.fin-dm-status--blocked { background: #fde0e0; color: #dc2626; }
.fin-dm-section + .fin-dm-section { margin-top: 16px; }
.fin-dm-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .3px;
color: var(--text-2); margin-bottom: 10px;
}
.fin-dm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fin-dm-tile {
border-radius: 10px; padding: 10px 12px;
font-size: 13px; font-weight: 500;
text-align: center; line-height: 1.3; word-break: break-word;
}
.fin-dm-tile--gray { background: #dddee2; color: #48484a; }
.fin-dm-tile--blue { background: #d6e4ff; color: #2563eb; }
.fin-dm-tile--green { background: #d1f7e0; color: #16a34a; }
.fin-dm-tile--orange { background: #fdebd0; color: #d97706; }
.fin-dm-tile--red { background: #fde0e0; color: #dc2626; }
.fin-dm-review-note {
margin-bottom: 10px; padding: 8px 12px;
background: #fef7ed; border-radius: 8px;
color: #d97706; font-size: 12px;
}
.fin-dm-doc-purpose {
margin-top: 8px; padding: 8px 12px;
background: var(--bg); border-radius: 8px;
font-size: 12px; color: var(--text-2);
}
.fin-dm-receipt-row {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px; background: var(--bg);
border-radius: 10px; font-size: 13px;
}
.fin-dm-actions {
padding: 14px 24px; border-top: 1px solid var(--border);
display: flex; gap: 8px;
}
.fin-dm-actions .btn { flex: 1; justify-content: center; padding: 10px 14px; }
.fin-dm-confirm { background: #D1FAE5; color: #047857; }
.fin-dm-confirm:hover { background: #a7f3d0; }
.fin-dm-cancel { background: #FEE2E2; color: #DC2626; }
.fin-dm-cancel:hover { background: #fecaca; }
.fin-dm-pdf { background: var(--bg); color: var(--text); flex: 0 0 auto; padding: 10px 14px; }
.fin-dm-pdf:hover { background: var(--border-soft); }
.fin-modal-foot {
display: flex; gap: 8px; justify-content: flex-end;
padding: 14px 24px; border-top: 1px solid var(--border);
}
/* ============ Заявки на возврат (refund sections в Финансах) ============ */
.refund-section { margin: 18px 0; }
.refund-section-h {
display: flex; align-items: baseline; gap: 10px;
margin-bottom: 10px;
}
.refund-section-h h2 {
margin: 0; font-size: 15px; font-weight: 600;
color: var(--text); letter-spacing: -.2px;
}
.refund-archive-h { cursor: pointer; }
.refund-archive-chev {
margin-left: 6px; color: var(--text-3);
transition: transform var(--t-fast);
}
.refund-section--open .refund-archive-chev { transform: rotate(180deg); }
.refund-count {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px; border-radius: 999px;
color: #fff; font-size: 12px; font-weight: 700;
}
.refund-count--pending { background: #dc2626; box-shadow: 0 2px 8px rgba(229,57,53,.35); }
.refund-count--wip { background: #d97706; box-shadow: 0 2px 8px rgba(217,119,6,.35); }
.refund-count--archive { background: var(--text-2); }
.refund-table-wrap {
background: var(--surface); border-radius: 12px; overflow: hidden;
}
.refund-wrap--pending { border: 1px solid rgba(229,57,53,.20); }
.refund-wrap--wip { border: 1px solid rgba(217,119,6,.20); }
.refund-wrap--archive { border: 1px solid var(--border); }
.refund-table { width: 100%; border-collapse: collapse; }
.refund-table th {
padding: 9px 12px; text-align: left;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .4px;
color: var(--text-2); background: var(--bg);
border-bottom: 1px solid var(--border-soft);
}
.refund-table tbody tr { background: #fef2f2; }
.refund-table tbody tr:hover { background: #fee2e2; }
.refund-table td {
padding: 13px 12px; font-size: 13px;
color: #7f1d1d; border-bottom: 1px solid rgba(229,57,53,.10);
vertical-align: top;
}
.refund-table tbody tr:last-child td { border-bottom: none; }
.refund-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: #b91c1c; }
.refund-reason {
font-size: 12.5px; color: #991b1b;
line-height: 1.45; max-width: 360px;
}
.refund-meta { font-size: 12px; color: #a36b6b; }
.refund-actions { white-space: nowrap; text-align: right; }
.refund-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 8px 14px; border-radius: 8px;
font-size: 13px; font-weight: 600;
border: none; cursor: pointer; font-family: inherit;
transition: transform .12s, box-shadow var(--t-fast), background var(--t-fast);
}
.refund-btn:hover { transform: translateY(-1px); }
.refund-btn-approve {
background: #16a34a; color: #fff;
box-shadow: 0 2px 6px rgba(22,163,74,.30);
}
.refund-btn-approve:hover { background: #15803d; }
.refund-btn-reject {
background: #dc2626; color: #fff; margin-left: 6px;
box-shadow: 0 2px 6px rgba(220,38,38,.30);
}
.refund-btn-reject:hover { background: #b91c1c; }
.refund-btn-mark {
background: #d97706; color: #fff;
box-shadow: 0 2px 6px rgba(217,119,6,.30);
}
.refund-btn-mark:hover { background: #b45309; }
.refund-section-hint {
margin: 8px 4px 0; font-size: 11.5px;
color: var(--text-3); line-height: 1.5;
}
/* «В работе» — оранжевые строки */
.refund-table-wip tbody tr { background: #fef7ed; }
.refund-table-wip tbody tr:hover { background: #fdebd0; }
.refund-table-wip td { color: #92400e; border-bottom-color: rgba(217,119,6,.12); }
.refund-table-wip .refund-amount { color: #b45309; }
.refund-table-wip .refund-reason,
.refund-table-wip .refund-meta { color: #b45309; }
/* Архив — нейтральная */
.refund-table-archive tbody tr { background: var(--surface); }
.refund-table-archive tbody tr:hover { background: var(--bg); }
.refund-table-archive td {
color: var(--text); border-bottom: 1px solid var(--border-soft);
}
.refund-archive-status {
display: inline-block; padding: 3px 9px;
border-radius: 999px; font-size: 11px; font-weight: 600;
}
.refund-archive-status--approved { background: #d1fae5; color: #047857; }
.refund-archive-status--rejected { background: #f3f4f6; color: #6b7280; }
/* Модалка одобрения возврата (богатая, 720px) */
.refund-approve-loading {
text-align: center; padding: 40px 20px; color: var(--text-3);
}
.refund-approve-text-label {
margin: 0 0 8px; font-size: 13px; color: var(--text-2);
}
.refund-approve-payment { margin-top: 20px; }
.refund-approve-pay-row {
display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start;
}
.refund-approve-qr-col { flex: 0 0 260px; text-align: center; }
.refund-approve-payer-col { flex: 1; min-width: 260px; }
.refund-approve-qr-title,
.refund-approve-payer-title,
.refund-approve-purpose-title {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .4px;
margin-bottom: 8px;
}
.refund-approve-qr-title { color: var(--text-2); }
.refund-approve-payer-title { color: #b91c1c; }
.refund-approve-purpose-title { color: var(--text-2); }
.refund-approve-qr {
width: 240px; height: 240px;
border-radius: 12px; border: 1px solid var(--border);
background: #fff;
}
.refund-approve-qr-error {
padding: 24px 16px;
background: #fef2f2; border: 1px solid #fecaca;
border-radius: 12px;
color: #991b1b; font-size: 12px; line-height: 1.5;
max-width: 240px; margin: 0 auto;
}
.refund-approve-bankfile {
display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
padding: 8px 14px; background: #eff4ff; color: #2563eb;
border-radius: 8px; text-decoration: none;
font-size: 12.5px; font-weight: 600;
}
.refund-approve-bankfile-hint {
font-size: 11px; color: var(--text-3); margin-top: 4px; max-width: 240px;
}
.refund-approve-qr-hint {
font-size: 11px; color: var(--text-3); margin-top: 6px;
}
.refund-approve-payer-details {
background: #fef2f2; border: 1px solid #fecaca;
border-radius: 10px; padding: 12px 14px;
font-size: 12.5px; line-height: 1.7; color: #7f1d1d;
margin-bottom: 12px;
font-family: monospace; white-space: pre-wrap;
}
.refund-approve-purpose {
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px;
font-size: 12px; line-height: 1.5;
color: var(--text); font-family: monospace;
word-break: break-word; cursor: pointer;
}
.refund-approve-pay-hint {
margin: 14px 0 0; font-size: 11.5px;
color: var(--text-3); line-height: 1.5;
}
.refund-approve-note-block { margin-top: 14px; }
.refund-approve-note-label {
margin: 0 0 6px; font-size: 12px; color: var(--text-2);
}
/* Mobile @640px для финансов */
@media (max-width: 640px) {
.finance-page-h { gap: 10px; }
.fin-pay-card {
grid-template-columns: 22px 1fr auto;
gap: 8px; padding: 10px 12px; font-size: 13px;
}
.fin-pay-num { grid-column: 2; grid-row: 1; }
.fin-pay-method { display: none; }
.fin-pay-tariff { grid-column: 2; grid-row: 2; }
.fin-pay-amount { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-size: 14px; }
.fin-pay-amount .cur { display: none; }
.fin-dm-tiles { grid-template-columns: repeat(2, 1fr); }
.refund-table thead th { padding: 7px 8px; font-size: 10px; }
.refund-table tbody td { padding: 9px 8px; font-size: 12.5px; }
.refund-approve-qr { width: 200px; height: 200px; }
.refund-approve-pay-row { flex-direction: column; }
}
/* ============ Эквайринг (1:1 BOTIX finance-acquiring.php) ============ */
.acq { max-width: 760px; margin: 0 auto; }
.acq-page-h {
display: flex; align-items: baseline; justify-content: flex-end;
margin-bottom: 22px; padding: 0 4px;
}
.acq-back {
font-size: 13px; color: var(--text); text-decoration: underline;
text-decoration-color: var(--border); text-underline-offset: 2px;
}
.acq-group { margin: 0 4px 24px; }
.acq-group-h {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .5px;
color: var(--text-2); padding: 0 4px 8px;
}
.acq-tile {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; margin-bottom: 10px; overflow: hidden;
transition: border-color var(--t-fast);
}
.acq-tile--active {
border-color: rgba(22,163,74,.30); background: rgba(22,163,74,.08);
}
.acq-tile-h {
display: flex; align-items: center; gap: 12px;
padding: 16px 18px; cursor: pointer;
}
.acq-tile-h:hover { background: rgba(0,0,0,.015); }
.acq-tile--active .acq-tile-h:hover { background: rgba(22,163,74,.04); }
.acq-tile-name {
font-size: 15px; font-weight: 600; flex: 1; color: var(--text);
}
.acq-tile-state {
font-size: 12px; color: var(--text-2); font-weight: 500;
}
.acq-tile--active .acq-tile-state { color: #16a34a; font-weight: 600; }
.acq-tile-chev {
color: var(--text-3); font-size: 12px;
transition: transform var(--t-fast);
}
.acq-tile--open .acq-tile-chev { transform: rotate(180deg); }
.acq-tile-body {
display: none; padding: 4px 18px 18px;
border-top: 1px solid var(--border); background: var(--surface);
}
.acq-tile--open .acq-tile-body { display: block; }
.acq-instr {
margin: 14px 0; padding: 12px 14px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 10px;
}
.acq-instr-ttl {
font-size: 12px; font-weight: 600; color: var(--text-2);
text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
}
.acq-instr ol {
margin: 0; padding-left: 20px;
font-size: 13px; line-height: 1.6; color: var(--text);
}
.acq-instr ol li { margin-bottom: 4px; }
.acq-instr a {
color: var(--text); text-decoration: underline;
text-decoration-color: var(--border); text-underline-offset: 2px;
}
.acq-instr code {
font-family: ui-monospace, monospace; font-size: 12px;
background: var(--bg); padding: 1px 5px; border-radius: 4px;
}
.acq-field { margin: 12px 0; }
.acq-field label {
display: block; font-size: 13px; font-weight: 500;
color: var(--text); margin-bottom: 6px;
}
.acq-field input,
.acq-field select {
width: 100%; padding: 10px 12px;
font-size: 14px; font-family: inherit;
border: 1.5px solid var(--border); border-radius: 8px;
background: #fff; color: var(--text); outline: none;
box-sizing: border-box;
}
.acq-field input:focus,
.acq-field select:focus { border-color: var(--text); }
.acq-webhook {
margin: 12px 0; padding: 12px 14px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--bg);
}
.acq-webhook-h {
font-size: 12px; font-weight: 600;
color: var(--text); margin-bottom: 6px;
}
.acq-webhook-where {
font-weight: 400; font-size: 11px;
color: var(--text-2); display: block; margin-top: 4px;
}
.acq-webhook-h a {
color: var(--text); text-decoration: underline;
text-decoration-color: var(--border); text-underline-offset: 2px;
}
.acq-copy-line {
display: flex; align-items: stretch;
border: 1px solid var(--border); border-radius: 8px;
overflow: hidden; background: #fff;
}
.acq-copy-line code {
flex: 1; padding: 9px 11px;
font-family: ui-monospace, monospace; font-size: 12px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text);
}
.acq-copy-line button {
border: none; border-left: 1px solid var(--border);
background: var(--bg); color: var(--text);
padding: 0 14px; font-size: 12px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.acq-copy-line button:hover { background: var(--border-soft); }
.acq-copy-line button.is-done { background: #d1f7e0; color: #16a34a; }
.acq-test-result {
margin: 12px 0; padding: 10px 14px;
border-radius: 8px; font-size: 13px;
display: flex; align-items: center; gap: 8px;
}
.acq-test-result--ok { background: #d1f7e0; color: #15803d; border: 1px solid rgba(22,163,74,.30); }
.acq-test-result--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.acq-test-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.acq-test-result--ok .acq-test-dot { background: #16a34a; }
.acq-test-result--err .acq-test-dot { background: #dc2626; }
.acq-tile-actions {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
}
.acq-btn {
border: none; cursor: pointer;
padding: 9px 16px; font-size: 13px; font-weight: 600;
border-radius: 8px; font-family: inherit;
}
.acq-btn--primary { background: #16a34a; color: #fff; }
.acq-btn--primary:hover { background: #15803d; }
.acq-btn--primary[disabled] { opacity: .35; cursor: not-allowed; }
.acq-btn--ghost { background: var(--bg); color: var(--text); }
.acq-btn--ghost:hover { background: var(--border-soft); }
.acq-btn--danger { background: transparent; color: #dc2626; }
.acq-btn--danger:hover { background: #fef2f2; }
/* Расчётные счета — список */
.acq-list {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
.acq-bank-row {
display: grid; grid-template-columns: 1fr auto; gap: 12px;
align-items: center; padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.acq-bank-row:last-child { border-bottom: none; }
.acq-bank-row--primary { background: var(--bg); }
.acq-bank-title { font-size: 14px; font-weight: 500; color: var(--text); }
.acq-bank-acc {
font-size: 12px; color: var(--text-2);
margin-top: 2px; font-variant-numeric: tabular-nums;
}
.acq-bank-tag { font-size: 11px; color: var(--text-2); font-weight: 500; }
.acq-bank-row--primary .acq-bank-tag { color: var(--text); font-weight: 600; }
.acq-list-footer {
padding: 10px 16px; border-top: 1px solid var(--border);
background: var(--bg); font-size: 12px;
}
.acq-bank-empty {
padding: 24px 16px; text-align: center;
color: var(--text-3); font-size: 13px;
}
/* Toast эквайринга */
.acq-toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: var(--text); color: #fff;
padding: 10px 20px; border-radius: 10px;
font-size: 13px; opacity: 0;
transition: opacity var(--t-fast); pointer-events: none; z-index: 1500;
}
.acq-toast.is-show { opacity: 1; }
.acq-toast.is-err { background: #dc2626; }
@media (max-width: 540px) {
.acq-tile-actions { flex-direction: column; }
.acq-tile-actions .acq-btn { width: 100%; }
}
/* ============ Email-рассылки (1:1 BOTIX email-notifications.php) ============ */
/* Tabs */
.em-tabs {
display: flex; gap: 0;
border-bottom: 2px solid var(--border);
margin-bottom: 20px;
}
.em-tab {
padding: 10px 20px; font-size: 14px; font-weight: 500;
color: var(--text-2); background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -2px;
cursor: pointer; font-family: inherit;
transition: color var(--t-fast), border-color var(--t-fast);
}
.em-tab:hover { color: var(--text); }
.em-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Сетка карточек шаблонов */
.em-tpl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.em-tpl-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 20px;
transition: border-color var(--t-fast);
}
.em-tpl-card:hover { border-color: var(--accent); }
.em-tpl-card-header {
display: flex; justify-content: space-between;
align-items: flex-start; margin-bottom: 8px;
}
.em-tpl-card-title { font-size: 15px; font-weight: 600; color: var(--text); }
.em-tpl-card-desc { font-size: 12px; color: var(--text-2); margin-bottom: 12px; line-height: 1.4; }
.em-tpl-card-subject {
font-size: 12px; color: var(--text-2); margin-bottom: 16px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-tpl-card-subject strong { color: var(--text); font-weight: 500; }
.em-tpl-card-footer { display: flex; gap: 8px; }
.em-tpl-card-footer .btn { flex: 1; justify-content: center; padding: 6px 10px; font-size: 12.5px; }
.em-tpl-card--disabled { opacity: .55; }
.em-badge {
display: inline-block; padding: 2px 8px;
border-radius: 6px; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .3px;
}
.em-badge--custom { background: var(--accent); color: #fff; opacity: .9; }
.em-badge--disabled { background: var(--border); color: var(--text-2); }
.em-info-block {
margin-top: 24px; padding: 18px 20px;
background: var(--bg); border-radius: 12px;
font-size: 13px; color: var(--text-2); line-height: 1.55;
}
.em-info-block h4 { margin: 0 0 10px; font-size: 13px; color: var(--text); font-weight: 600; }
.em-info-block p { margin: 0 0 6px; }
.em-info-block p:last-child { margin: 0; }
.em-info-block code {
background: var(--surface); padding: 1px 6px; border-radius: 4px;
font-size: 12px; color: var(--accent);
}
/* Редактор шаблона */
.em-edit-head {
display: flex; justify-content: space-between;
align-items: center; margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.em-edit-desc { font-size: 12px; color: var(--text-2); margin: 4px 0 0; }
.em-edit-head-right { display: flex; align-items: center; gap: 10px; }
.em-edit-row {
display: grid; grid-template-columns: 1fr 300px; gap: 20px;
}
.em-toolbar {
background: var(--bg); padding: 8px 12px;
border-radius: 8px; border: 1px solid var(--border);
margin-bottom: 8px;
display: flex; flex-wrap: wrap; gap: 4px;
}
.em-toolbar button {
padding: 4px 10px; font-size: 11px;
border: 1px solid var(--border); border-radius: 4px;
background: var(--surface); color: var(--text);
cursor: pointer; font-family: inherit;
}
.em-toolbar button:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.em-editor { font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.em-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.em-hint code {
background: var(--bg); padding: 1px 5px; border-radius: 4px;
font-family: ui-monospace, monospace; font-size: 11px;
}
.em-active-check {
display: flex; align-items: center; gap: 8px;
margin: 16px 0; cursor: pointer; font-size: 14px; color: var(--text);
}
.em-active-check input { width: 18px; height: 18px; }
.em-edit-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.em-edit-sidebar { display: flex; flex-direction: column; gap: 12px; }
.em-side-card {
background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 16px;
}
.em-side-card h4 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.em-side-card ul { list-style: none; padding: 0; margin: 0; }
.em-side-card li { padding: 3px 0; font-size: 12px; }
.em-side-card code {
color: var(--accent); font-size: 12px;
font-family: ui-monospace, monospace;
}
.em-side-card p { margin: 0 0 8px; font-size: 12px; color: var(--text-2); }
.em-side-test-row {
display: flex; gap: 6px; align-items: stretch;
}
.em-side-test-row input { flex: 1; padding: 7px 10px; font-size: 12.5px; }
.em-side-test-row button { white-space: nowrap; padding: 7px 12px; font-size: 12.5px; }
.em-side-card--warn { border-color: #fed7aa; }
.em-side-card--warn h4 { color: #ea580c; }
/* Очередь */
.em-actions-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.em-queue-table .em-q-status {
display: inline-block; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 600;
}
.em-q-status--pending { background: #fef7ed; color: #c2410c; }
.em-q-status--sent { background: #ecfdf3; color: #16a34a; }
.em-q-status--failed { background: #fef2f2; color: #b91c1c; }
.em-q-error-row td {
padding: 4px 12px 10px;
font-size: 11px; color: #b91c1c;
background: #fef2f2;
}
.em-empty-state {
padding: 60px 20px; text-align: center; color: var(--text-3);
}
.em-empty-state svg { opacity: .3; margin-bottom: 12px; }
.em-empty-state p { font-size: 14px; margin: 0; }
/* Настройки */
.em-config-note {
background: var(--accent-tint);
color: var(--accent); padding: 12px 16px;
border-radius: 8px; font-size: 13px; margin-bottom: 16px;
line-height: 1.5;
}
.em-config-note code {
background: rgba(0,0,0,0.05); padding: 1px 5px;
border-radius: 4px; font-size: 12px;
}
.em-settings-section {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 20px; margin-bottom: 16px;
}
.em-settings-section h3 { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--text); }
.em-settings-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
/* Тест */
.em-test-result {
margin-top: 16px; padding: 12px 16px;
border-radius: 8px; font-size: 13px;
}
.em-test-result--ok { background: #ecfdf3; color: #15803d; border: 1px solid #86efac; }
.em-test-result--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
/* Превью-модалка email */
.em-preview-frame {
width: 100%; height: 70vh; min-height: 480px;
border: none; display: block;
background: #fff;
}
@media (max-width: 900px) {
.em-edit-row { grid-template-columns: 1fr; }
.em-settings-grid { grid-template-columns: 1fr; }
}
/* ============ Почта (Apple Mail-стиль, 1:1 BOTIX email/index.php) ============ */
/* Контейнер 3 колонок */
.mail-app {
display: flex; height: calc(100vh - 80px); min-height: 600px;
background: var(--surface);
font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
color: var(--text);
border: 1px solid var(--border);
border-radius: 14px;
overflow: hidden;
}
.mail-resize-handle {
width: 5px; flex-shrink: 0; cursor: col-resize;
background: transparent;
transition: background var(--t-fast);
position: relative; z-index: 10;
}
.mail-resize-handle:hover, .mail-resize-handle.is-active { background: rgba(31, 182, 195, .25); }
.mail-col-head {
display: flex; align-items: center; gap: 8px;
padding: 0 14px; border-bottom: 1px solid var(--border);
height: 48px; flex-shrink: 0;
}
.mail-col-title {
font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.005em;
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-col-meta {
font-size: 11px; color: var(--text-3);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mail-tb-btn {
background: transparent; border: none; padding: 6px 8px;
border-radius: 6px; cursor: pointer; color: var(--text-2);
font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
font-family: inherit;
}
.mail-tb-btn:hover:not(:disabled) { background: rgba(0,0,0,.06); color: var(--text); }
.mail-tb-btn:disabled { opacity: .4; cursor: default; }
.mail-tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
/* Кнопка-back для mobile */
.mail-back-btn { display: none; align-items: center; justify-content: center;
width: 32px; height: 32px; border: none; background: transparent;
color: var(--accent); cursor: pointer; padding: 0; flex-shrink: 0;
}
/* Колонка 1: Папки */
.mail-folders {
width: 240px; flex-shrink: 0; background: var(--bg);
display: flex; flex-direction: column; min-width: 60px;
}
.mail-folders-scroll {
flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0;
}
.mail-folders-grp {
padding: 10px 16px 4px;
font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-3); font-weight: 600; white-space: nowrap;
}
.mail-f-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 16px; cursor: pointer;
color: var(--text); font-size: 13px;
border-left: 3px solid transparent;
background: transparent; border-top: none; border-right: none; border-bottom: none;
font-family: inherit; width: 100%; text-align: left; white-space: nowrap;
overflow: hidden;
}
.mail-f-item:hover { background: rgba(0,0,0,.03); }
.mail-f-item.is-active {
background: var(--accent-tint);
border-left-color: var(--accent);
color: var(--accent); font-weight: 600;
}
.mail-f-item .ic { font-size: 14px; width: 20px; flex-shrink: 0; text-align: center; }
.mail-f-item.is-active .ic { color: var(--accent); }
.mail-f-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.mail-f-item .cnt-pair {
display: inline-flex; align-items: center; gap: 6px;
flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.mail-f-item .cnt-total {
font-size: 11px; color: var(--text-3); font-weight: 500;
}
.mail-f-item.is-active .cnt-total { color: var(--accent); }
.mail-f-item .cnt-total.is-zero { display: none; }
.mail-f-item .cnt-unread {
font-size: 11px; color: #fff;
background: #dc2626; border-radius: 10px;
padding: 1px 7px; font-weight: 600; line-height: 1.3;
}
.mail-f-item .cnt-unread.is-zero { display: none; }
.mail-f-item.is-drop-target {
background: var(--accent-tint);
outline: 2px dashed var(--accent); outline-offset: -2px;
}
/* Колонка 2: Список писем */
.mail-list {
width: 380px; flex-shrink: 0;
display: flex; flex-direction: column; min-width: 60px;
background: var(--surface); border-left: 1px solid var(--border);
}
.mail-search {
padding: 8px 12px; border-bottom: 1px solid var(--border);
position: relative;
}
.mail-search-row { display: flex; align-items: center; gap: 6px; }
.mail-search input {
flex: 1; width: auto; padding: 6px 10px 6px 28px;
border: none; background: var(--bg); border-radius: 6px;
font-size: 12px; color: var(--text); font-family: inherit;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: 8px center;
}
.mail-search input:focus { outline: 1px solid var(--accent); }
.mail-search-help-btn {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: var(--surface);
border-radius: 50%; color: var(--text-3);
cursor: pointer; font-size: 11px; padding: 0; font-family: inherit;
}
.mail-search-help-btn:hover { color: var(--accent); border-color: var(--accent); }
.mail-search-help {
margin-top: 6px; padding: 8px 10px;
background: var(--bg); border: 1px solid var(--border);
border-radius: 6px; font-size: 11px; color: var(--text-2); line-height: 1.55;
}
.mail-search-help code {
background: var(--surface); border: 1px solid var(--border);
border-radius: 3px; padding: 1px 5px;
font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
color: var(--text);
}
.mail-search-help b { color: var(--text); font-weight: 600; }
/* Чипы фильтров */
.mail-chips {
display: flex; gap: 6px; padding: 0 12px 8px;
overflow-x: auto; flex-shrink: 0;
}
.mail-chip {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border: 1px solid var(--border);
background: var(--surface); color: var(--text-2);
border-radius: 999px; font-size: 12px; font-weight: 500;
cursor: pointer; white-space: nowrap;
transition: all var(--t-fast); position: relative;
font-family: inherit;
}
.mail-chip:hover { background: var(--bg); }
.mail-chip--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mail-chip[data-tip]::after {
content: attr(data-tip);
position: absolute; bottom: calc(100% + 6px); left: 50%;
transform: translateX(-50%);
background: var(--text); color: #fff;
font-size: 11px; font-weight: 500; padding: 4px 8px;
border-radius: 6px; white-space: nowrap;
pointer-events: none; opacity: 0;
transition: opacity var(--t-fast);
}
.mail-chip[data-tip]:hover::after { opacity: 1; }
.mail-list-wrap {
position: relative; flex: 1;
display: flex; flex-direction: column; min-height: 0;
}
.mail-active-filter {
padding: 8px 12px 6px; border-bottom: 1px solid var(--border);
background: var(--accent-tint);
}
.mail-bulk-bar {
position: absolute; top: 0; left: 0; right: 0;
display: flex; align-items: center; gap: 6px;
padding: 8px 12px; background: var(--surface);
border-bottom: 1px solid var(--border);
box-shadow: 0 2px 6px rgba(0,0,0,.06);
z-index: 5; font-size: 13px;
}
.mail-bulk-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 6px;
border-radius: 11px; background: var(--text); color: #fff;
font-size: 12px; font-weight: 600;
margin-right: 6px; flex-shrink: 0;
}
.mail-list-items {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.mail-row {
padding: 10px 14px 10px 28px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; cursor: pointer;
position: relative; transition: background var(--t-fast);
}
.mail-row:hover { background: var(--bg); }
.mail-row.is-unread::before {
content: ""; position: absolute; left: 12px; top: 18px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
}
/* Плитки по типу отправителя */
.mail-row.sender-government { background: #fee2e2; border-color: #fca5a5; }
.mail-row.sender-user { background: #d1fae5; border-color: #86efac; }
.mail-row.sender-government:hover { background: #fecaca; }
.mail-row.sender-user:hover { background: #bbf7d0; }
/* Selected */
.mail-row.is-selected, .mail-row.is-selected:hover {
background: var(--accent-tint); border-color: var(--accent);
}
.mail-row .mail-check {
position: absolute; left: 8px; top: 14px;
width: 14px; height: 14px;
border: 1.5px solid var(--border); border-radius: 3px;
background: var(--surface); cursor: pointer;
opacity: 0; transition: opacity var(--t-fast);
display: flex; align-items: center; justify-content: center;
}
.mail-row:hover .mail-check, .mail-row.is-checked .mail-check,
.mail-list.has-selection .mail-check { opacity: 1; }
.mail-row.is-checked .mail-check {
background: var(--accent); border-color: var(--accent);
}
.mail-row.is-checked .mail-check::after {
content: "✓"; color: #fff; font-size: 10px; line-height: 1;
}
.mail-row .mail-top {
display: flex; justify-content: space-between; align-items: baseline;
gap: 8px; margin-bottom: 2px;
}
.mail-row .mail-from {
font-weight: 600; font-size: 13px; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row.is-unread .mail-from { font-weight: 700; }
.mail-row .mail-date {
font-size: 11px; color: var(--text-3); flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.mail-row.is-unread .mail-date { color: var(--accent); font-weight: 600; }
.mail-row .mail-subj {
font-size: 12.5px; color: var(--text-2);
margin-bottom: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row.is-unread .mail-subj { color: var(--text); font-weight: 600; }
.mail-row .mail-snippet {
font-size: 12px; color: var(--text-3);
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
line-height: 1.35;
}
.mail-row .mail-acct {
display: inline-block; font-size: 10px;
color: var(--text-3); background: var(--bg);
padding: 1px 6px; border-radius: 4px;
margin-right: 6px; vertical-align: middle;
}
.mail-thread-count {
color: var(--text-3); font-weight: 500; font-size: 12px; margin-left: 2px;
}
.mail-row.is-unread .mail-thread-count { color: var(--accent); }
/* Звёздочка */
.mail-row-star {
position: absolute; right: 10px; bottom: 10px;
background: transparent; border: none; padding: 2px;
cursor: pointer; font-size: 14px; line-height: 1;
color: rgba(60,60,67,.30); border-radius: 4px;
transition: color var(--t-fast), background var(--t-fast);
}
.mail-row-star:hover { background: rgba(0,0,0,.05); color: #FFA500; }
.mail-row-star.is-on { color: #FFA500; }
/* VIP-бейдж */
.mail-vip-star { color: #FFA500; font-size: 13px; margin-right: 4px; vertical-align: middle; }
/* Колонка 3: Открытое письмо */
.mail-view {
flex: 1; display: flex; flex-direction: column; min-width: 0;
background: var(--surface); border-left: 1px solid var(--border);
}
.mail-failed-bar {
padding: 10px 14px;
background: #fef2f2; border-bottom: 1px solid #fecaca;
color: #991b1b; font-size: 13px;
}
.mail-toolbar {
display: flex; align-items: center; gap: 4px;
padding: 8px 16px; border-bottom: 1px solid var(--border);
background: var(--bg); height: 48px; flex-shrink: 0;
overflow-x: auto;
}
.mail-view-body {
flex: 1; display: flex; flex-direction: column;
min-height: 0; overflow-y: auto;
}
.mail-msg { padding: 24px 32px; }
.mail-msg-subj {
font-size: 22px; font-weight: 700;
letter-spacing: -.01em; margin: 0 0 14px;
color: var(--text);
}
.mail-msg-head {
display: flex; align-items: flex-start; gap: 12px;
padding-bottom: 14px; border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.mail-avatar {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 15px;
}
.mail-msg-meta { flex: 1; min-width: 0; }
.mail-msg-from { font-size: 14px; font-weight: 600; color: var(--text); }
.mail-msg-from .em { color: var(--text-3); font-weight: 400; font-size: 12px; margin-left: 6px; }
.mail-msg-to { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mail-msg-date { font-size: 12px; color: var(--text-3); flex-shrink: 0; text-align: right; }
.mail-msg-body {
font-size: 14px; line-height: 1.6; color: var(--text);
}
.mail-msg-body p { margin: 0 0 12px; }
/* Карточка отправителя */
.mail-sender-card {
margin: 0 0 12px; padding: 8px 10px; border-radius: 8px;
}
.mail-sender-card.sender-government { background: #fee2e2; }
.mail-sender-card.sender-user { background: #d1fae5; }
.mail-sender-card.sender-unknown { background: var(--bg); }
.mail-sender-card-h {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px; flex-wrap: wrap;
}
.mail-sender-card-h strong {
font-size: 13px; color: var(--text);
font-family: ui-monospace, Menlo, monospace;
}
.mail-stats-row {
display: flex; flex-wrap: wrap; gap: 3px; margin: 0;
}
.mail-stat-tile {
display: inline-flex; align-items: center; gap: 5px;
border-radius: 6px; padding: 3px 8px;
background: rgba(255,255,255,.7); color: #48484a;
white-space: nowrap; font-size: 12px; line-height: 1.3;
}
.mail-stat-tile .ic { font-size: 12px; color: var(--text-3); }
.mail-stat-tile .v { font-weight: 600; color: var(--text); }
.mail-stat-tile.t-info { background: #d6e4ff; }
.mail-stat-tile.t-info .v { color: #1e40af; }
.mail-stat-tile.t-ok { background: #d1fae5; }
.mail-stat-tile.t-ok .v { color: #15803d; }
.mail-stat-tile.t-warn { background: #fdebd0; }
.mail-stat-tile.t-warn .v { color: #b45309; }
.mail-stat-tile.t-danger { background: #fde0e0; }
.mail-stat-tile.t-danger .v { color: #b91c1c; }
/* SPF/DKIM бейдж */
.mail-auth-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 4px;
font-size: 11px; font-weight: 600; margin-left: 8px;
}
.mail-auth-badge--pass { background: #d1fae5; color: #047857; }
.mail-auth-badge--fail { background: #fde0e0; color: #b91c1c; }
.mail-auth-badge--mixed { background: #fef7ed; color: #c2410c; }
/* Кнопка VIP */
.mail-sender-vip-btn {
display: inline-flex; align-items: center; gap: 4px;
margin-left: auto; padding: 3px 9px; border-radius: 6px;
font-size: 11px; font-weight: 600;
border: 1px solid; cursor: pointer; font-family: inherit;
background: var(--surface);
}
.mail-sender-vip-btn.add { border-color: var(--accent); color: var(--accent); }
.mail-sender-vip-btn.add:hover { background: var(--accent-tint); }
.mail-sender-vip-btn.remove { border-color: var(--border); color: var(--text-2); }
.mail-sender-vip-btn.remove:hover { background: #fef2f2; color: #b91c1c; border-color: #b91c1c; }
/* Тред: блок одного письма */
.mail-thread-msg { border-bottom: 1px solid var(--border); }
.mail-thread-msg:last-child { border-bottom: none; }
.mail-thread-msg-head {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 20px; cursor: pointer;
transition: background var(--t-fast);
}
.mail-thread-msg-head:hover { background: var(--bg); }
.mail-thread-msg.is-expanded .mail-thread-msg-head { cursor: default; }
.mail-thread-msg.is-expanded .mail-thread-msg-head:hover { background: transparent; }
.mail-thread-msg.is-outbox .mail-thread-msg-head { background: #f0f7ff; }
.mail-thread-msg-who { flex: 1; min-width: 0; }
.mail-thread-msg-who .nm { font-weight: 600; font-size: 13px; color: var(--text); }
.mail-thread-msg-who .em { color: var(--text-3); font-size: 12px; font-weight: 400; margin-left: 4px; }
.mail-thread-msg-date { font-size: 12px; color: var(--text-3); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mail-thread-msg-preview {
padding: 0 20px 4px 68px;
font-size: 12.5px; color: var(--text-3);
overflow: hidden; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.mail-thread-msg.is-expanded .mail-thread-msg-preview { display: none; }
.mail-thread-msg-body {
padding: 4px 20px 20px 20px;
font-size: 14px; line-height: 1.6; color: var(--text);
}
.mail-thread-msg.is-collapsed .mail-thread-msg-body { display: none; }
.mail-thread-header { padding: 16px 20px 12px 20px; border-bottom: 1px solid var(--border); }
.mail-thread-subj { font-size: 20px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.mail-thread-meta { font-size: 12px; color: var(--text-3); }
/* Вложения */
.mail-attachments {
margin-top: 20px; padding-top: 14px;
border-top: 1px solid var(--border);
display: flex; flex-wrap: wrap; gap: 8px;
}
.mail-att {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; background: var(--bg);
border-radius: 8px; font-size: 12px; color: var(--text);
text-decoration: none; cursor: pointer;
border: 1px solid var(--border);
}
.mail-att:hover { background: var(--border-soft); }
/* Reply / Empty */
.mail-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: var(--text-3);
}
.mail-empty-ic { font-size: 48px; margin-bottom: 12px; color: var(--border); }
.mail-empty-t { font-size: 15px; color: var(--text-2); }
/* Compose модалка (Apple Mail style) */
.mail-compose-ov {
position: fixed; inset: 0; background: rgba(0,0,0,.40);
display: flex; align-items: flex-start; justify-content: center;
z-index: 2000; padding: 60px 20px 20px;
overflow-y: auto;
}
.mail-compose-ov[hidden] { display: none; }
.mail-compose {
background: var(--surface); border-radius: 12px;
max-width: 760px; width: 100%;
display: flex; flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,.20);
overflow: hidden;
}
.mail-compose-h {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.mail-compose-h h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.mail-x {
background: none; border: none; font-size: 22px;
color: var(--text-3); cursor: pointer; line-height: 1; padding: 0 4px;
}
.mail-x:hover { color: var(--text); }
.mail-compose-fields {
display: flex; flex-direction: column;
border-bottom: 1px solid var(--border);
}
.mail-compose-field {
display: flex; align-items: center;
border-bottom: 1px solid rgba(0,0,0,.05);
padding: 0 20px; height: 38px;
}
.mail-compose-field:last-child { border-bottom: none; }
.mail-compose-field label {
font-size: 13px; color: var(--text-3);
width: 60px; flex-shrink: 0;
}
.mail-compose-field input, .mail-compose-field select {
flex: 1; border: none; outline: none; background: transparent;
font-family: inherit; font-size: 13px; color: var(--text); padding: 0;
}
.mail-compose-toggles {
display: inline-flex; gap: 10px; margin-left: 8px; flex-shrink: 0;
}
.mail-compose-toggle {
background: none; border: none; color: var(--text-3);
font-size: 11px; cursor: pointer;
padding: 2px 6px; border-radius: 4px; font-family: inherit;
}
.mail-compose-toggle:hover { background: rgba(0,0,0,.05); color: var(--accent); }
.mail-compose-toggle.is-active { color: var(--accent); background: var(--accent-tint); }
.mail-compose-body { padding: 14px 20px; }
.mail-compose-body .mail-rich {
width: 100%; min-height: 280px; max-height: 520px;
overflow-y: auto; border: none; outline: none;
font-family: inherit; font-size: 14px; line-height: 1.55;
color: var(--text); background: transparent;
word-break: break-word;
}
.mail-rich:empty:before {
content: attr(data-placeholder);
color: var(--text-3); pointer-events: none;
}
.mail-rich blockquote {
border-left: 2px solid var(--border);
padding-left: 12px; margin: 8px 0;
color: var(--text-2);
}
.mail-compose-atts {
display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 20px 0;
}
.mail-compose-atts:empty { display: none; padding: 0; }
.mail-compose-att-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; background: var(--bg);
border-radius: 8px; font-size: 12px; color: var(--text);
max-width: 300px;
}
.mail-compose-att-pill .nm {
overflow: hidden; text-overflow: ellipsis;
white-space: nowrap; max-width: 200px;
}
.mail-compose-att-pill .sz { color: var(--text-3); font-size: 11px; }
.mail-compose-att-pill .rm {
background: none; border: none; color: var(--text-3);
cursor: pointer; font-size: 14px; padding: 0 2px;
}
.mail-compose-att-pill .rm:hover { color: #dc2626; }
.mail-compose-att-btn {
background: transparent; border: 1px solid var(--border);
border-radius: 8px; padding: 6px 10px;
font-size: 12px; color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
}
.mail-compose-att-btn:hover { background: var(--bg); }
.mail-compose-att-error {
color: #dc2626; font-size: 12px; padding: 4px 20px 0;
}
.mail-compose-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px; border-top: 1px solid var(--border);
background: var(--bg); gap: 12px; flex-wrap: wrap;
}
.mail-compose-footer-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mail-compose-footer-right { display: flex; gap: 8px; }
.mail-compose-status { font-size: 11px; color: var(--text-3); }
.mail-sig-toggle {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; color: var(--text-2); cursor: pointer;
}
/* Settings модалка */
.mail-settings-tabs {
display: flex;
border-bottom: 1px solid var(--border);
padding: 0 22px;
}
.mail-settings-tab {
background: none; border: none;
padding: 10px 14px; font-size: 13px;
color: var(--text-3); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px;
font-family: inherit;
}
.mail-settings-tab:hover { color: var(--text); }
.mail-settings-tab--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.mail-acc-list, .mail-folder-list, .mail-vip-list, .mail-snippet-list {
border: 1px solid var(--border); border-radius: 10px;
overflow: hidden; margin-bottom: 12px;
}
.mail-acc-row, .mail-folder-row, .mail-vip-item, .mail-snippet-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.mail-acc-row:last-child, .mail-folder-row:last-child,
.mail-vip-item:last-child, .mail-snippet-row:last-child {
border-bottom: none;
}
.mail-acc-info { flex: 1; min-width: 0; }
.mail-acc-email { font-weight: 600; font-size: 13px; color: var(--text); }
.mail-acc-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.mail-acc-form, .mail-folder-form {
margin-top: 12px; padding: 14px;
background: var(--bg); border-radius: 10px;
}
.mail-folder-palette {
display: grid; grid-template-columns: repeat(10, 1fr);
gap: 6px; max-width: 340px;
}
.mail-folder-sw {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid transparent; cursor: pointer;
padding: 0; transition: transform var(--t-fast), border-color var(--t-fast);
}
.mail-folder-sw:hover { transform: scale(1.08); border-color: var(--border); }
.mail-folder-sw.is-active { border-color: var(--text); }
.mail-vip-form {
display: flex; gap: 6px; margin-bottom: 12px; align-items: center; flex-wrap: wrap;
}
.mail-vip-form input { flex: 1; min-width: 140px; }
.mail-vip-item .em {
font-size: 12px; color: var(--text);
font-family: ui-monospace, Menlo, monospace; flex: 1;
}
.mail-vip-item .nm { font-size: 12px; color: var(--text-3); }
.mail-vip-item .x {
background: transparent; border: none; padding: 4px 6px;
cursor: pointer; color: var(--text-3); font-size: 14px;
border-radius: 4px;
}
.mail-vip-item .x:hover { background: #fee2e2; color: #b91c1c; }
/* Snippets picker */
.mail-snippets-picker {
display: flex; flex-direction: column; gap: 6px;
}
.mail-snippet-pick {
text-align: left; padding: 12px 14px;
border: 1px solid var(--border); border-radius: 10px;
background: var(--surface); cursor: pointer;
font-family: inherit; font-size: 13px;
}
.mail-snippet-pick:hover { background: var(--bg); border-color: var(--accent); }
.mail-snippet-pick .title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
.mail-snippet-pick .preview { font-size: 12px; color: var(--text-3); line-height: 1.4; }
/* Help модалка */
.mail-help-nav {
display: flex; gap: 4px; padding: 8px 18px;
border-bottom: 1px solid var(--border); overflow-x: auto;
flex-shrink: 0;
}
.mail-help-nav-btn {
flex-shrink: 0; padding: 6px 12px;
border: none; background: transparent; color: var(--text-2);
border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500;
cursor: pointer; white-space: nowrap;
}
.mail-help-nav-btn:hover { background: var(--bg); color: var(--text); }
.mail-help-nav-btn.is-active { background: var(--accent); color: #fff; }
.mail-help-body h2 { font-size: 16px; font-weight: 600; margin: 0 0 14px; color: var(--text); }
.mail-help-body h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; color: var(--text); }
.mail-help-body h3:first-child { margin-top: 0; }
.mail-help-body p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.mail-help-body ul { margin: 0 0 12px; padding-left: 22px; font-size: 13.5px; line-height: 1.6; }
.mail-help-body li { margin-bottom: 4px; }
.mail-help-body code {
padding: 1px 6px; background: var(--bg); border-radius: 4px;
font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--accent);
}
/* Attachment preview модалка */
.mail-att-prev-ov {
position: fixed; inset: 0;
background: rgba(0,0,0,.65); backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
z-index: 3000; padding: 24px;
}
.mail-att-prev-ov[hidden] { display: none; }
.mail-att-prev {
background: var(--surface); border-radius: 12px;
width: 100%; max-width: 1080px;
height: calc(100vh - 80px);
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.mail-att-prev-h {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.mail-att-prev-ic { font-size: 18px; color: var(--text-3); }
.mail-att-prev-nm {
flex: 1; font-size: 14px; font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-att-prev-meta { font-size: 12px; color: var(--text-3); }
.mail-att-prev-actions { display: flex; gap: 6px; }
.mail-att-prev-btn {
background: transparent; border: 1px solid var(--border);
border-radius: 8px; padding: 6px 12px;
font-size: 12px; color: var(--text);
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
font-family: inherit; text-decoration: none;
}
.mail-att-prev-btn:hover { background: var(--bg); }
.mail-att-prev-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mail-att-prev-btn--primary:hover { background: var(--accent-hover); }
.mail-att-prev-body {
flex: 1; background: var(--text);
display: flex; align-items: center; justify-content: center;
overflow: auto;
}
.mail-att-prev-body iframe {
width: 100%; height: 100%; border: none; background: var(--surface);
}
.mail-att-prev-body img {
max-width: 100%; max-height: 100%; object-fit: contain;
}
/* Mobile @767px — 3-screen Apple Mail */
@media (max-width: 767px) {
.mail-app {
position: relative; height: calc(100vh - 60px);
display: block; border-radius: 0; border: none;
}
.mail-resize-handle { display: none; }
.mail-folders, .mail-list, .mail-view {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; max-height: 100%;
display: none; flex-direction: column;
border: none;
}
body.mail-mv-folders .mail-folders { display: flex; }
body.mail-mv-list .mail-list { display: flex; }
body.mail-mv-msg .mail-view { display: flex; }
.mail-back-btn { display: inline-flex; }
}
/* ============ Уведомления (1:1 BOTIX modules/notifications/*) ============ */
/* Pill важности (используется в таблице + модалке) */
.notif-priority {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 100px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
.notif-priority::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.notif-priority--low { background: var(--bg); color: var(--text-2); }
.notif-priority--low::before { background: var(--text-3); }
.notif-priority--normal { background: #eff6ff; color: #1d4ed8; }
.notif-priority--normal::before { background: #2563eb; }
.notif-priority--high { background: #fff7ed; color: #c2410c; }
.notif-priority--high::before { background: #ea580c; }
.notif-priority--critical { background: #fef2f2; color: #b91c1c; }
.notif-priority--critical::before { background: #dc2626; animation: pulse 1.5s ease-in-out infinite; }
/* Pill типа события */
.notif-type {
display: inline-block; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 500;
background: var(--bg); color: var(--text-2);
font-family: ui-monospace, Menlo, monospace;
}
.notif-type--orders { background: #eff6ff; color: #1d4ed8; }
.notif-type--refunds { background: #fef2f2; color: #b91c1c; }
.notif-type--gpu { background: #fef7ed; color: #c2410c; }
.notif-type--leads { background: #f5f3ff; color: #6d28d9; }
.notif-type--vova { background: #ecfdf3; color: #15803d; }
.notif-type--platform { background: var(--bg); color: var(--text-2); }
/* Канал-pill в журнале доставок */
.notif-channel {
display: inline-block; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
.notif-channel--in_app { background: #eff4ff; color: #2563eb; }
.notif-channel--email { background: #fef7ed; color: #c2410c; }
.notif-channel--telegram { background: #d1f7e0; color: #15803d; }
.notif-channel--sms { background: #f5f3ff; color: #6d28d9; }
/* Статус доставки в журнале */
.notif-log-status {
display: inline-block; padding: 2px 8px;
border-radius: 6px; font-size: 11px; font-weight: 600;
}
.notif-log-status--queued { background: #fefae0; color: #92400e; }
.notif-log-status--sent { background: #eff4ff; color: #1d4ed8; }
.notif-log-status--delivered { background: #ecfdf3; color: #15803d; }
.notif-log-status--failed { background: #fef2f2; color: #b91c1c; }
/* Строка непрочитанного — выделение фоном */
.notif-row-unread { background: rgba(255, 107, 71, 0.04); }
.notif-row-unread td { font-weight: 500; }
.notif-row-unread .notif-title { font-weight: 700; color: var(--text); }
.notif-title { color: var(--text); font-weight: 600; }
.notif-msg-preview {
color: var(--text-3); font-size: 12px;
margin-top: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 360px;
}
/* Каналы доставки в строке (мини-pill'ы) */
.notif-channels-mini {
display: inline-flex; gap: 3px; flex-wrap: wrap;
}
.notif-channels-mini span {
font-size: 10px; padding: 1px 6px; border-radius: 4px;
background: var(--bg); color: var(--text-3); font-weight: 500;
}
.notif-channels-mini span.is-active {
background: var(--accent-tint); color: var(--accent);
}
/* Чекбоксы каналов в таблицах routing/recipients */
.notif-ch-cell { text-align: center; }
.notif-ch-cell input[type="checkbox"] {
width: 16px; height: 16px; cursor: pointer;
accent-color: var(--accent);
}
/* Inline-инпут в таблицах настроек */
.notif-inline-input {
width: 100%; padding: 4px 8px;
border: 1px solid var(--border); border-radius: 6px;
font-family: inherit; font-size: 12.5px; background: var(--surface);
color: var(--text);
}
.notif-inline-input:focus { outline: none; border-color: var(--accent); }
.notif-inline-select {
padding: 4px 8px;
border: 1px solid var(--border); border-radius: 6px;
font-family: inherit; font-size: 12px; background: var(--surface);
color: var(--text); cursor: pointer;
}
/* Кнопки в строке */
.notif-row-actions {
display: inline-flex; gap: 4px;
}
.notif-row-actions .btn-row {
padding: 3px 8px; font-size: 11px;
}
/* Детали уведомления — модалка */
.notif-details-row {
display: grid; grid-template-columns: 140px 1fr;
gap: 12px; padding: 8px 0;
border-bottom: 1px solid var(--border-soft);
font-size: 13px;
}
.notif-details-row:last-child { border-bottom: none; }
.notif-details-label {
color: var(--text-2); font-weight: 500;
text-transform: uppercase; font-size: 10.5px;
letter-spacing: .04em; padding-top: 3px;
}
.notif-details-value { color: var(--text); }
.notif-details-message {
background: var(--bg); padding: 10px 12px;
border-left: 3px solid var(--accent);
border-radius: 8px;
font-size: 13px; line-height: 1.5;
white-space: pre-wrap;
margin: 4px 0;
}
/* Журнал доставок: маленькие плитки каналов в модалке */
.notif-details-deliveries {
display: grid; grid-template-columns: 1fr 1fr;
gap: 6px; margin-top: 6px;
}
.notif-delivery-tile {
background: var(--bg); padding: 8px 10px;
border-radius: 8px; font-size: 11.5px;
display: flex; align-items: center; gap: 6px;
}
.notif-delivery-tile .dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.notif-delivery-tile.is-sent .dot { background: #16a34a; }
.notif-delivery-tile.is-failed .dot { background: #dc2626; }
.notif-delivery-tile.is-queued .dot { background: #c2410c; }
/* ============ Администраторы (1:1 BOTIX admins.php) ============ */
/* Pill роли */
.adm-role {
display: inline-block; padding: 3px 10px;
border-radius: 100px; font-size: 11.5px; font-weight: 600;
}
.adm-role--admin { background: #eff6ff; color: #1d4ed8; }
.adm-role--superadmin { background: #fef2f2; color: #b91c1c; }
/* Статус-точка */
.adm-status-dot {
display: inline-block; width: 8px; height: 8px;
border-radius: 50%; margin-right: 6px;
}
.adm-status-dot--active { background: #16a34a; }
.adm-status-dot--inactive { background: var(--text-3); }
/* Журнал входов: row-failed подсветка */
.adm-log-row--failed { background: rgba(220, 38, 38, 0.04); }
.adm-log-row--failed td { color: #991b1b; }
.adm-log-status--success { color: #16a34a; font-weight: 500; }
.adm-log-status--failed { color: #dc2626; font-weight: 600; }
/* Реквизиты компании: 2 колонки */
.ci-card-section { /* override card padding */ }
.ci-columns {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.ci-subcard {
background: var(--bg); border: 1px solid var(--border);
border-radius: 12px; overflow: hidden;
}
.ci-subcard-title {
padding: 14px 18px 10px; font-size: 11px;
font-weight: 600; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-2);
}
.ci-row {
display: flex; align-items: center;
padding: 0 18px; min-height: 42px;
border-top: 1px solid var(--border-soft);
}
.ci-row:first-of-type { border-top: none; }
.ci-row-label {
font-size: 13.5px; color: var(--text);
min-width: 140px; flex-shrink: 0;
}
.ci-row-value {
flex: 1; text-align: right;
}
.ci-input {
width: 100%; text-align: right; border: none;
background: transparent; font-size: 13.5px;
color: var(--text-2); padding: 10px 0;
font-family: inherit; outline: none;
}
.ci-input::placeholder { color: var(--text-3); }
.ci-input:focus { color: var(--accent); }
.ci-input[type="text"], .ci-input[type="email"] { font-family: inherit; }
select.ci-input { appearance: none; cursor: pointer; }
.ci-row--full {
flex-direction: column; align-items: stretch; padding: 8px 18px;
}
.ci-row--full .ci-row-label {
font-size: 11px; font-weight: 500;
color: var(--text-2); margin-bottom: 2px;
text-transform: uppercase; letter-spacing: .04em;
}
.ci-row--full .ci-input { text-align: left; padding: 4px 0; }
.ci-row-hint {
padding: 0 18px 8px; font-size: 11px; color: var(--text-3);
}
.ci-footer {
display: flex; align-items: center; gap: 12px; margin-top: 18px;
}
@media (max-width: 900px) {
.ci-columns { grid-template-columns: 1fr; }
}
/* Банковские счета (карточки) */
.adm-bank-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 900px) {
.adm-bank-grid { grid-template-columns: 1fr; }
}
.adm-bank-card {
border: 1px solid var(--border); border-radius: 12px;
padding: 16px; position: relative;
background: var(--surface);
cursor: pointer; transition: border-color var(--t-fast);
}
.adm-bank-card:hover { border-color: var(--accent); }
.adm-bank-card--primary {
border-color: rgba(31, 182, 195, 0.4);
background: rgba(31, 182, 195, 0.04);
}
.adm-bank-card .adm-bank-badge {
position: absolute; top: 10px; right: 12px;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: .3px;
padding: 2px 8px; border-radius: 6px;
background: var(--accent-tint); color: var(--accent);
}
.adm-bank-name {
font-size: 15px; font-weight: 600;
color: var(--text); margin-bottom: 8px;
}
.adm-bank-row {
display: flex; justify-content: space-between;
padding: 4px 0; font-size: 12.5px;
border-bottom: 1px solid var(--border-soft);
}
.adm-bank-row:last-of-type { border-bottom: none; }
.adm-bank-row-label { color: var(--text-3); }
.adm-bank-row-value {
color: var(--text); font-variant-numeric: tabular-nums;
font-family: ui-monospace, Menlo, monospace;
}
.adm-bank-actions {
display: flex; gap: 8px; margin-top: 12px;
padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.adm-bank-actions .btn { padding: 5px 12px; font-size: 12px; }
/* Подпись и печать */
.sig-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 900px) {
.sig-grid { grid-template-columns: 1fr; }
}
.sig-slot {
border: 1px solid var(--border); border-radius: 12px;
padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.sig-slot-title {
font-size: 13px; font-weight: 600; color: var(--text);
}
.sig-preview {
background: var(--bg); border-radius: 8px;
min-height: 110px;
display: flex; align-items: center; justify-content: center;
padding: 12px;
}
.sig-preview img { max-height: 120px; max-width: 100%; object-fit: contain; }
.sig-preview-empty {
color: var(--text-3); font-size: 12px;
display: flex; flex-direction: column; gap: 6px;
align-items: center; justify-content: center;
}
.sig-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sig-upload-label {
display: inline-block; padding: 6px 14px;
font-size: 12.5px; font-weight: 500;
border-radius: 6px;
background: var(--accent-tint); color: var(--accent);
cursor: pointer;
}
.sig-upload-label:hover { background: rgba(31, 182, 195, 0.18); }
.sig-delete-btn { padding: 6px 14px; font-size: 12px; }
.sig-meta { font-size: 11px; color: var(--text-3); }
/* Справочник ED807 */
.ed807-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px; margin-bottom: 14px;
}
@media (max-width: 900px) { .ed807-stats { grid-template-columns: 1fr; } }
.ed807-stat {
background: var(--bg); border-radius: 10px; padding: 12px 14px;
}
.ed807-stat-label {
font-size: 11px; color: var(--text-3);
text-transform: uppercase; letter-spacing: .3px;
margin-bottom: 4px;
}
.ed807-stat-value {
font-size: 18px; font-weight: 600; color: var(--text);
font-variant-numeric: tabular-nums;
}
.ed807-stat-sub {
font-size: 11.5px; color: var(--text-3); margin-top: 2px;
}
.ed807-age-fresh { color: #16a34a; }
.ed807-age-warn { color: #d97706; }
.ed807-age-stale { color: #dc2626; }
.ed807-history {
display: grid; gap: 6px;
padding: 10px 14px; background: var(--bg);
border-radius: 10px; margin-bottom: 14px;
}
.ed807-history-row {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--text);
}
.ed807-history-label { color: var(--text-3); flex-shrink: 0; }
.ed807-history-value {
color: var(--text); font-variant-numeric: tabular-nums;
}
.ed807-history-fail .ed807-history-value { color: #dc2626; }
.ed807-actions {
display: flex; align-items: center; gap: 12px;
}
.ed807-result { font-size: 13px; flex: 1; }
.ed807-result.is-ok { color: #16a34a; }
.ed807-result.is-err { color: #dc2626; }
.ed807-help {
font-size: 12px; color: var(--text-3); line-height: 1.55;
padding-top: 14px; margin-top: 14px;
border-top: 1px solid var(--border-soft);
}
.ed807-help p { margin: 0 0 8px; }
.ed807-help b { color: var(--text); font-weight: 600; }
.ed807-help code {
background: var(--bg); padding: 1px 5px; border-radius: 4px;
font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}
/* ============ Документы (1:1 BOTIX knowledge-base.php; адаптация: 2 группы РКН+Минцифры вместо чипов ботов, BOTIX-категории сохранены) ============ */
.docs-card { padding: 24px 28px; }
.docs-title {
font-size: 22px; font-weight: 700; margin-bottom: 8px;
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.docs-title .docs-update-all-btn { display: inline-flex; align-items: center; gap: 8px; }
.docs-subtitle { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; line-height: 1.55; }
.docs-subtitle b { color: var(--text); font-weight: 600; }
/* Чипы групп — аналог bot-chips */
.docs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.docs-chip {
padding: 10px 18px; border-radius: 100px; font-size: 14px; font-weight: 600;
cursor: pointer; border: 1px solid var(--border); background: #fff;
color: var(--text); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
user-select: none; display: inline-flex; align-items: center; gap: 8px;
}
.docs-chip:hover { border-color: var(--accent); color: var(--accent); }
.docs-chip .docs-chip-count {
display: inline-block; min-width: 22px; height: 20px; line-height: 20px;
padding: 0 6px; text-align: center; border-radius: 10px;
font-size: 11px; font-weight: 700;
background: rgba(0,0,0,0.06); color: var(--text-muted);
}
/* Подсветка по статусу публикации (none/sent/done) */
.docs-chip.docs-st-none { background: #f5f5f7; border-color: var(--border); color: var(--text-muted); }
.docs-chip.docs-st-sent { background: rgba(255,159,10,0.08); border-color: rgba(255,159,10,0.3); color: #FF9F0A; }
.docs-chip.docs-st-sent .docs-chip-count { background: rgba(255,159,10,0.14); color: #FF9F0A; }
.docs-chip.docs-st-done { background: rgba(52,199,89,0.08); border-color: rgba(52,199,89,0.3); color: #2DA84E; }
.docs-chip.docs-st-done .docs-chip-count { background: rgba(52,199,89,0.14); color: #2DA84E; }
/* Активный чип — коралл поверх статуса */
.docs-chip.docs-chip-active {
background: var(--accent); color: #fff; border-color: var(--accent);
box-shadow: 0 2px 8px rgba(255,107,71,0.25);
}
.docs-chip.docs-chip-active .docs-chip-count { background: rgba(255,255,255,0.28); color: #fff; }
/* Контент группы */
.docs-group-content { display: block; }
.docs-group-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.docs-group-meta {
font-size: 16px; font-weight: 600; color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.docs-group-stats { font-size: 13px; color: var(--text-muted); }
/* Статус-точка */
.docs-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.docs-status-dot--none { background: #C7C7CC; }
.docs-status-dot--sent { background: #FF9F0A; }
.docs-status-dot--done { background: #2DA84E; }
.docs-status-label { font-size: 13px; font-weight: 500; }
.docs-status-label--none { color: var(--text-muted); }
.docs-status-label--sent { color: #FF9F0A; }
.docs-status-label--done { color: #2DA84E; }
/* AI-тулбар */
.docs-ai-toolbar {
display: flex; gap: 10px; margin-bottom: 20px; padding-bottom: 18px;
border-bottom: 1px solid var(--border);
}
.docs-ai-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; font-size: 14px; font-weight: 600;
border: 1px solid var(--border); background: #fff; color: var(--text);
border-radius: 12px; cursor: pointer; font-family: inherit;
transition: all 0.15s;
}
.docs-ai-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.docs-ai-btn svg { width: 16px; height: 16px; }
/* Категории */
.docs-cat { margin-bottom: 22px; }
.docs-cat-title {
font-size: 14px; font-weight: 700; color: var(--accent);
margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
text-transform: uppercase; letter-spacing: 0.04em;
}
.docs-cat-title-left { display: flex; align-items: center; gap: 8px; }
.docs-cat-title svg { width: 16px; height: 16px; }
.docs-cat-count { font-weight: 400; color: var(--text-muted); font-size: 12px; text-transform: none; letter-spacing: 0; }
.docs-cat-add {
border: 1px solid rgba(255,107,71,0.25); background: rgba(255,107,71,0.06);
color: var(--accent); cursor: pointer; font-family: inherit;
padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; gap: 5px;
}
.docs-cat-add:hover { background: var(--accent); color: #fff; }
.docs-cat-add svg { width: 12px; height: 12px; }
/* Документ-карточка */
.docs-entry {
background: #fff; border-radius: 12px; padding: 14px 18px; margin-bottom: 8px;
border: 1px solid var(--border); transition: border-color 0.15s;
}
.docs-entry:hover { border-color: rgba(255,107,71,0.3); }
.docs-entry-row { display: flex; align-items: flex-start; gap: 12px; }
.docs-entry-main { flex: 1; cursor: pointer; min-width: 0; }
.docs-entry-actions { display: flex; gap: 4px; flex-shrink: 0; }
.docs-entry-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
.docs-entry-preview {
font-size: 12px; color: var(--text-muted); line-height: 1.55;
max-height: 3.2em; overflow: hidden; white-space: pre-line;
word-break: break-word;
}
.docs-entry.docs-entry-expanded .docs-entry-preview { max-height: none; }
.docs-entry-meta { font-size: 11px; color: #AEAEB2; margin-top: 6px; }
.docs-entry-btn {
border: 1px solid var(--border); background: #fff; cursor: pointer;
padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 500;
display: inline-flex; align-items: center; gap: 4px; font-family: inherit;
color: var(--text); transition: all 0.15s;
}
.docs-entry-btn svg { width: 13px; height: 13px; }
.docs-entry-btn--edit:hover { color: var(--accent); border-color: var(--accent); }
.docs-entry-btn--del { color: #DC2626; }
.docs-entry-btn--del:hover { background: #FEE2E2; border-color: #DC2626; }
.docs-add-new-row {
margin-top: 24px; padding-top: 18px;
border-top: 1px solid var(--border);
}
/* Empty-state */
.docs-empty {
text-align: center; padding: 60px 24px; color: var(--text-muted); font-size: 14px;
background: var(--bg); border-radius: 12px; border: 1px dashed var(--border);
}
.docs-empty-icon { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--text-muted); display: block; }
.docs-empty-text { line-height: 1.6; max-width: 520px; margin: 0 auto; }
/* Модалка редактора (общие .kb-modal-overlay/.kb-modal — паттерн из BOTIX) */
.kb-modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999;
display: none; align-items: center; justify-content: center; padding: 24px;
}
.kb-modal-overlay.active { display: flex; }
.kb-modal {
background: #fff; border-radius: 16px; padding: 28px; width: 92vw; max-width: 660px;
box-shadow: 0 24px 80px rgba(0,0,0,0.25);
max-height: 92vh; overflow-y: auto;
}
.kb-modal-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: var(--text); }
.kb-modal-field { margin-bottom: 14px; }
.kb-modal-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.kb-modal-field input,
.kb-modal-field select,
.kb-modal-field textarea {
width: 100%; padding: 11px 14px; border: 1px solid var(--border);
border-radius: 10px; font-size: 14px; font-family: inherit;
box-sizing: border-box; background: #fff; color: var(--text);
}
.kb-modal-field input:focus,
.kb-modal-field select:focus,
.kb-modal-field textarea:focus { outline: none; border-color: var(--accent); }
.kb-modal-field textarea { resize: vertical; min-height: 240px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.55; }
.kb-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.kb-modal-actions #docs-modal-delete-btn { margin-right: auto; color: #DC2626; border-color: rgba(220,38,38,0.3); }
.kb-modal-actions #docs-modal-delete-btn:hover { background: #FEE2E2; }
.docs-modal-counter { font-size: 11px; color: var(--text-muted); margin-top: 6px; text-align: right; }
/* Модалка AI-импорта */
.kb-import-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9999;
display: none; align-items: center; justify-content: center; padding: 24px;
}
.kb-import-overlay.active { display: flex; }
.kb-import-modal {
background: #fff; border-radius: 18px; width: 100%; max-width: 800px;
max-height: 92vh; display: flex; flex-direction: column;
box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}
.kb-import-header {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 26px; border-bottom: 1px solid var(--border);
}
.kb-import-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.kb-import-close {
background: none; border: none; font-size: 32px; line-height: 1;
color: var(--text-muted); cursor: pointer; padding: 0;
width: 36px; height: 36px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
}
.kb-import-close:hover { background: var(--bg); color: var(--text); }
.kb-import-body { padding: 22px 26px; overflow-y: auto; flex: 1; }
.kb-import-section { margin-bottom: 22px; }
.kb-import-section-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px; gap: 8px;
}
.kb-import-section label,
.kb-import-section-head label {
display: block; font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 10px;
}
.kb-import-section-head label { margin: 0; }
.kb-import-copy-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; font-size: 12px; font-weight: 600;
background: var(--accent); color: #fff; border: none; border-radius: 10px;
cursor: pointer; font-family: inherit;
}
.kb-import-copy-btn:hover { background: var(--accent-hover); }
.kb-import-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.55; }
.kb-import-hint code {
background: var(--bg); padding: 1px 6px; border-radius: 5px;
font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}
.kb-import-hint b { color: var(--text); font-weight: 600; }
.kb-import-textarea {
width: 100%; min-height: 280px; padding: 14px;
border: 1px solid var(--border); border-radius: 12px;
font-family: ui-monospace, Menlo, monospace; font-size: 12px;
box-sizing: border-box; resize: vertical; line-height: 1.55;
background: #fff; color: var(--text);
}
.kb-import-textarea:focus { outline: none; border-color: var(--accent); }
.kb-import-tz { background: var(--bg); min-height: 200px; max-height: 260px; }
.kb-import-result {
margin-top: 12px; padding: 14px; border-radius: 10px;
font-size: 13px; line-height: 1.55; max-height: 220px; overflow-y: auto;
display: none;
}
.kb-import-result.docs-import-result-ok { background: rgba(45,168,78,0.08); color: #1B7A36; display: block; }
.kb-import-result.docs-import-result-err { background: rgba(220,38,38,0.06); color: #B91C1C; display: block; }
.kb-import-result .docs-import-warns { margin-top: 8px; font-size: 12px; opacity: 0.85; }
.kb-import-footer {
display: flex; gap: 10px; justify-content: flex-end;
padding: 18px 26px; border-top: 1px solid var(--border);
}
.kb-import-btn {
padding: 11px 22px; font-size: 14px; font-weight: 600;
border-radius: 10px; border: none; cursor: pointer; font-family: inherit;
}
.kb-import-btn--cancel { background: var(--bg); color: var(--text-muted); }
.kb-import-btn--cancel:hover { background: var(--border); color: var(--text); }
.kb-import-btn--submit { background: #2DA84E; color: #fff; }
.kb-import-btn--submit:hover { background: #248A41; }
.kb-import-btn--submit:disabled { opacity: 0.6; cursor: not-allowed; }
/* ============ Роскомнадзор (1:1 BOTIX modules/rkn/, 5 табов: РКН + Минцифра + Журнал + Шаблоны + Реестр) ============ */
.rkn-card { padding: 24px 28px; }
.rkn-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
margin-bottom: 22px; gap: 16px; flex-wrap: wrap;
}
.rkn-page-title { font-size: 22px; font-weight: 700; color: var(--text); }
.rkn-page-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.rkn-export-csv-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Табы */
.rkn-tabs {
display: flex; gap: 0; margin-bottom: 24px;
border-bottom: 2px solid var(--border);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.rkn-tabs::-webkit-scrollbar { display: none; }
.rkn-tab {
padding: 11px 22px; font-size: 14px; font-weight: 500;
color: var(--text-muted); background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -2px;
cursor: pointer; font-family: inherit;
flex-shrink: 0; white-space: nowrap;
transition: color .15s, border-color .15s;
}
.rkn-tab:hover { color: var(--text); }
.rkn-tab.rkn-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
/* ====== Таб 1: Роскомнадзор + Таб 2: Минцифра (общая сетка плиток-карточек документов) ====== */
.rkn-doc-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.rkn-doc-tile {
border: 1px solid var(--border); border-radius: 14px; padding: 20px;
display: flex; flex-direction: column; min-height: 200px; overflow: hidden;
}
.rkn-doc-tile-bg-blue { background: rgba(0,122,255,0.04); }
.rkn-doc-tile-bg-green { background: rgba(52,199,89,0.04); }
.rkn-doc-tile-bg-orange { background: rgba(255,159,10,0.04); }
.rkn-doc-tile-bg-purple { background: rgba(175,82,222,0.04); }
.rkn-doc-tile-bg-red { background: rgba(255,59,48,0.04); }
.rkn-doc-tile-bg-gray { background: rgba(142,142,147,0.04); }
.rkn-doc-tile-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.rkn-doc-tile-icon { font-size: 20px; flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.rkn-doc-tile-icon svg { width: 22px; height: 22px; }
.rkn-doc-tile-title {
font-size: 15px; font-weight: 600; color: var(--text);
min-height: 38px; display: flex; align-items: center;
}
.rkn-doc-tile-meta {
font-size: 12px; color: var(--text-muted); line-height: 1.5; flex: 1;
}
.rkn-doc-tile-actions {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.rkn-doc-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 500;
border: 1px solid var(--border); background: #fff; color: var(--text);
cursor: pointer; font-family: inherit; text-decoration: none;
transition: all 0.15s;
}
.rkn-doc-btn:hover { border-color: var(--accent); color: var(--accent); }
.rkn-doc-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.rkn-doc-btn--primary:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.rkn-doc-btn--disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.rkn-doc-btn svg { width: 13px; height: 13px; }
/* ====== Минцифра — чек-лист 11 шагов подачи ====== */
.rkn-cl-block { margin-bottom: 28px; }
.rkn-cl-header h3 { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text); }
.rkn-cl-progress-card {
background: #fff; border: 1px solid var(--border); border-radius: 14px;
padding: 18px 22px; margin-bottom: 16px;
display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.rkn-cl-progress-meta { flex: 1; min-width: 140px; }
.rkn-cl-progress-meta-title { font-size: 11px; color: var(--text-muted); margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.rkn-cl-progress-meta-value { font-size: 26px; font-weight: 700; color: var(--accent); }
.rkn-cl-progress-bar {
flex: 2; min-width: 220px; height: 10px;
background: var(--bg); border-radius: 999px; overflow: hidden;
}
.rkn-cl-progress-bar-fill {
height: 100%; background: linear-gradient(90deg, var(--accent), #2DA84E);
border-radius: 999px; transition: width 0.4s ease;
}
.rkn-cl-submitted {
background: linear-gradient(135deg, rgba(45,168,78,0.08), rgba(0,122,255,0.06));
border: 1px solid rgba(45,168,78,0.25);
border-radius: 14px; padding: 18px 22px; margin-bottom: 16px;
}
.rkn-cl-submitted-title { font-size: 14px; font-weight: 700; color: #1B7A36; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.rkn-cl-submitted-meta { font-size: 13px; color: var(--text); line-height: 1.7; margin: 0; }
.rkn-cl-submitted-meta b { color: var(--text); font-weight: 600; }
.rkn-cl-submitted-counter {
display: inline-block; padding: 4px 12px; border-radius: 8px;
background: rgba(0,122,255,0.1); color: #0066CC;
font-size: 13px; font-weight: 600; margin-top: 8px;
}
.rkn-cl-steps-toggle {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; border-radius: 10px;
background: #fff; border: 1px solid var(--border);
font-size: 13px; font-weight: 500; color: var(--text);
cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.rkn-cl-steps-toggle:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.rkn-cl-steps-toggle svg { transition: transform 0.2s; }
.rkn-cl-block.rkn-cl-collapsed .rkn-cl-steps-toggle svg { transform: rotate(-90deg); }
.rkn-cl-block.rkn-cl-collapsed .rkn-cl-steps-list { display: none; }
.rkn-cl-steps-list { margin-top: 14px; }
.rkn-cl-step {
background: #fff; border: 1px solid var(--border); border-radius: 14px;
padding: 18px 22px; margin-bottom: 10px;
display: flex; gap: 16px; align-items: flex-start;
transition: border-color 0.2s, background 0.2s;
}
.rkn-cl-step.rkn-cl-done {
background: rgba(45,168,78,0.04);
border-color: rgba(45,168,78,0.25);
}
.rkn-cl-step-checkbox {
width: 28px; height: 28px;
border: 2px solid var(--border); border-radius: 8px;
background: #fff; cursor: pointer;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.rkn-cl-step-checkbox:hover { border-color: var(--accent); }
.rkn-cl-step.rkn-cl-done .rkn-cl-step-checkbox { background: #2DA84E; border-color: #2DA84E; }
.rkn-cl-step.rkn-cl-done .rkn-cl-step-checkbox svg { color: #fff; }
.rkn-cl-step-checkbox svg { width: 14px; height: 14px; color: transparent; transition: color 0.15s; }
.rkn-cl-step-body { flex: 1; min-width: 0; }
.rkn-cl-step-num {
display: inline-block; padding: 2px 10px; border-radius: 6px;
background: rgba(255,107,71,0.1); color: var(--accent);
font-size: 11px; font-weight: 600; margin-bottom: 6px;
}
.rkn-cl-step-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.rkn-cl-step-desc { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 10px; white-space: pre-line; }
.rkn-cl-step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rkn-cl-action {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 8px;
font-size: 13px; font-weight: 500;
text-decoration: none; border: 1px solid var(--border);
background: #fff; color: var(--text);
cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.rkn-cl-action:hover { background: var(--bg); border-color: var(--accent); color: var(--accent); }
.rkn-cl-action svg { width: 13px; height: 13px; }
.rkn-cl-step-note {
margin-top: 10px; padding: 10px 14px;
background: rgba(0,122,255,0.06); border-radius: 8px;
font-size: 12px; line-height: 1.55; color: var(--text-muted);
}
.rkn-cl-final-form {
margin-top: 14px; padding: 14px;
background: var(--bg); border-radius: 10px;
display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.rkn-cl-final-form-field { flex: 1; min-width: 200px; }
.rkn-cl-final-form-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.rkn-cl-final-form-field input {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 14px; font-family: inherit; box-sizing: border-box;
background: #fff;
}
.rkn-cl-final-form-field input:focus { outline: none; border-color: var(--accent); }
.rkn-cl-final-form button {
padding: 10px 22px; background: var(--accent); color: #fff;
border: none; border-radius: 8px;
font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.rkn-cl-final-form button:hover { background: var(--accent-hover); }
.rkn-cl-final-form button:disabled { background: var(--border); cursor: not-allowed; }
/* ====== Таб 3: Журнал согласий ====== */
.rkn-j-row { display: grid; gap: 10px; margin-bottom: 12px; }
.rkn-j-row-4 { grid-template-columns: repeat(4, 1fr); }
.rkn-j-row-7 { grid-template-columns: repeat(7, 1fr); }
.rkn-j-tile {
height: 56px; border-radius: 12px; padding: 0 16px;
display: flex; align-items: center; gap: 10px;
cursor: pointer; opacity: 0.6; transition: opacity 0.15s;
overflow: hidden; text-decoration: none; min-width: 0;
border: none; font-family: inherit;
}
.rkn-j-tile.rkn-j-active { opacity: 1; }
.rkn-j-tile:hover { opacity: 0.85; }
.rkn-j-tile-ic { font-size: 18px; flex-shrink: 0; width: 18px; height: 18px; }
.rkn-j-tile-ic svg { width: 18px; height: 18px; }
.rkn-j-tile-lb { font-size: 12px; font-weight: 500; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rkn-j-tile-vl { font-size: 20px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 1100px) { .rkn-j-tile { padding: 0 12px; gap: 8px; } .rkn-j-tile-lb { font-size: 11px; } }
@media (max-width: 900px) { .rkn-j-tile { padding: 0 10px; } .rkn-j-tile-lb { display: none; } }
@media (max-width: 767px) {
.rkn-j-row-4 { grid-template-columns: repeat(2, 1fr); }
.rkn-j-row-7 { grid-template-columns: repeat(3, 1fr); }
}
.rkn-j-toolbar {
display: flex; align-items: center; gap: 8px;
margin: 16px 0; flex-wrap: wrap;
}
.rkn-j-toolbar input[type="search"] {
height: 38px; width: 280px; padding: 0 12px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 13px; font-family: inherit; background: #fff;
}
.rkn-j-toolbar input[type="search"]:focus { outline: none; border-color: var(--accent); }
.rkn-j-toolbar-btn {
height: 38px; min-width: 38px; padding: 0 12px;
border: 1px solid var(--border); border-radius: 8px;
background: #fff; cursor: pointer; font-family: inherit;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
color: var(--text); font-size: 13px;
}
.rkn-j-toolbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.rkn-j-toolbar-btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.rkn-j-toolbar-btn--accent:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.rkn-j-toolbar-btn svg { width: 14px; height: 14px; }
.rkn-j-toolbar select {
height: 38px; padding: 0 10px; border: 1px solid var(--border);
border-radius: 8px; font-size: 13px; font-family: inherit; background: #fff;
color: var(--text); cursor: pointer;
}
.rkn-j-users-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .rkn-j-users-cols { grid-template-columns: 1fr; } }
.rkn-j-list {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
.rkn-j-list-row {
padding: 12px 16px; cursor: pointer;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
text-decoration: none; color: inherit;
border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.rkn-j-list-row:hover { background: var(--bg); }
.rkn-j-list-row + .rkn-j-list-row { border-top: 1px solid var(--border); }
.rkn-j-list-row-name { font-size: 14px; font-weight: 600; color: var(--text); }
.rkn-j-list-row-email { font-size: 13px; color: var(--text-muted); }
.rkn-j-list-empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* Карточка пользователя (модалка) */
.rkn-user-card-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; }
.rkn-user-card-name { font-size: 20px; font-weight: 700; color: var(--text); }
.rkn-user-card-contacts { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.rkn-user-card-status { padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.rkn-user-card-tiles {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; margin-bottom: 18px;
}
.rkn-user-card-tile {
border-radius: 10px; padding: 10px 14px;
font-size: 13px; font-weight: 500; text-align: center;
word-break: break-word; min-width: 0;
}
.rkn-user-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rkn-user-card-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 480px) { .rkn-user-card-tiles { grid-template-columns: repeat(2, 1fr); } }
/* ====== Таб 4: Шаблоны ответов ====== */
.rkn-tpl-layout {
display: grid; grid-template-columns: 320px 1fr;
gap: 20px; min-height: 500px;
}
@media (max-width: 900px) { .rkn-tpl-layout { grid-template-columns: 1fr; } }
.rkn-tpl-list-title {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text-muted); margin: 0 0 12px;
}
.rkn-tpl-card {
background: #fff; border: 1px solid var(--border);
border-radius: 12px; padding: 14px; margin-bottom: 8px;
cursor: pointer; text-decoration: none; display: block; color: inherit;
transition: all 0.15s;
}
.rkn-tpl-card:hover { border-color: rgba(255,107,71,0.4); }
.rkn-tpl-card.rkn-tpl-active { border-color: var(--accent); background: rgba(255,107,71,0.04); }
.rkn-tpl-card-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 3px; }
.rkn-tpl-card-basis { font-size: 11px; color: var(--accent); margin-bottom: 4px; }
.rkn-tpl-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.rkn-tpl-card-new {
width: 100%; margin-top: 8px; padding: 11px;
border-radius: 12px; border: 2px dashed var(--border);
background: transparent; color: var(--accent);
font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
.rkn-tpl-card-new:hover { border-color: var(--accent); background: rgba(255,107,71,0.04); }
.rkn-tpl-user-card {
background: #fff; border: 1px solid var(--border);
border-radius: 12px; padding: 14px; margin-top: 18px;
}
.rkn-tpl-user-card-title { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin: 0 0 8px; }
.rkn-tpl-user-info { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.rkn-tpl-user-info-name { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.rkn-tpl-empty {
display: flex; align-items: center; justify-content: center;
height: 100%; min-height: 360px;
color: var(--text-muted); font-size: 14px;
background: #fff; border: 1px solid var(--border); border-radius: 14px;
}
.rkn-tpl-actions { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rkn-tpl-actions .rkn-doc-btn--danger { color: #DC2626; border-color: rgba(220,38,38,0.3); margin-left: auto; }
.rkn-tpl-actions .rkn-doc-btn--danger:hover { background: #FEE2E2; }
.rkn-tpl-preview-box {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 28px;
font-size: 14px; line-height: 1.7; color: var(--text);
}
.rkn-tpl-vars-hint {
padding: 10px 14px; font-size: 12px; color: var(--text-muted);
background: rgba(0,122,255,0.05); border-radius: 8px; margin-bottom: 12px;
}
.rkn-tpl-vars-hint code {
background: rgba(0,0,0,0.04); padding: 1px 5px; border-radius: 3px;
font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}
.rkn-tpl-edit-wrap {
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.rkn-tpl-edit-toolbar {
padding: 8px 12px; border-bottom: 1px solid var(--border);
background: var(--bg); display: flex; flex-wrap: wrap; gap: 4px;
}
.rkn-tpl-edit-toolbar button {
padding: 4px 10px; font-size: 11px;
border: 1px solid var(--border); border-radius: 4px;
background: #fff; cursor: pointer; font-family: inherit;
color: var(--text-muted);
}
.rkn-tpl-edit-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.rkn-tpl-edit-content {
padding: 24px; min-height: 420px;
font-size: 14px; line-height: 1.7; color: var(--text); outline: none;
}
.rkn-tpl-modified { font-size: 11px; color: var(--accent); margin-left: 4px; padding: 3px 8px; background: rgba(255,107,71,0.1); border-radius: 6px; }
/* Подсказка для модалки нового шаблона */
.rkn-tpl-new-hint {
font-size: 12px; color: var(--text-muted); padding: 10px 12px;
background: var(--bg); border-radius: 8px; line-height: 1.5;
margin-bottom: 10px;
}
.rkn-tpl-new-hint code {
background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px;
font-family: ui-monospace, Menlo, monospace; font-size: 11px;
}
/* ====== Таб 5: Реестр писем ====== */
.rkn-r-row { display: grid; gap: 10px; margin-bottom: 12px; }
.rkn-r-row-4 { grid-template-columns: repeat(4, 160px); }
@media (max-width: 767px) { .rkn-r-row-4 { grid-template-columns: repeat(2, 1fr); } }
.rkn-r-tile {
width: 160px; height: 56px; border-radius: 12px; padding: 0 16px;
display: flex; align-items: center; gap: 10px;
cursor: pointer; opacity: 0.6; transition: opacity 0.15s;
overflow: hidden; border: none; font-family: inherit;
}
.rkn-r-tile.rkn-r-active { opacity: 1; }
.rkn-r-tile:hover { opacity: 0.85; }
.rkn-r-tile-ic { font-size: 18px; flex-shrink: 0; }
.rkn-r-tile-ic svg { width: 18px; height: 18px; }
.rkn-r-tile-lb { font-size: 12px; font-weight: 500; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rkn-r-tile-vl { font-size: 20px; font-weight: 700; flex-shrink: 0; }
@media (max-width: 767px) { .rkn-r-tile { width: auto; } }
.rkn-r-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 700px) { .rkn-r-cols { grid-template-columns: 1fr; } }
.rkn-r-list { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.rkn-r-item {
padding: 12px 16px; cursor: pointer; display: block;
border: none; background: none; width: 100%; text-align: left; font-family: inherit;
}
.rkn-r-item:hover { filter: brightness(0.97); }
.rkn-r-item + .rkn-r-item { border-top: 1px solid var(--border); }
.rkn-r-item-dt { font-size: 13px; font-weight: 600; color: var(--text); }
.rkn-r-item-who { font-size: 13px; color: var(--text-muted); margin-left: 6px; }
.rkn-r-item-reply { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rkn-r-item-noanswer { font-size: 11px; color: #DC2626; font-weight: 600; margin-top: 2px; }
.rkn-r-green { background: rgba(45,168,78,0.06); }
.rkn-r-red { background: rgba(220,38,38,0.05); }
.rkn-r-list-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }
.rkn-reg-card-meta {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.rkn-reg-card-meta-pill {
border-radius: 10px; padding: 6px 12px;
font-size: 12px; font-weight: 500;
}
.rkn-reg-card-content {
font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 16px;
white-space: pre-line; word-break: break-word;
}
.rkn-reg-card-content-empty { color: var(--text-muted); font-style: italic; }
.rkn-reg-card-file { margin-bottom: 16px; }
.rkn-reg-card-file a {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border-radius: 8px; font-size: 12px;
border: 1px solid var(--border); background: #fff; color: var(--text);
text-decoration: none;
}
.rkn-reg-card-file a:hover { border-color: var(--accent); color: var(--accent); }
.rkn-reg-new-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* ====== Модалка: Оператор ПДн (read-only таблица реквизитов) ====== */
.rkn-operator-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.rkn-operator-table td { padding: 9px 0; vertical-align: top; }
.rkn-operator-table td:first-child { color: var(--text-muted); width: 130px; }
.rkn-operator-table td:last-child { font-weight: 500; color: var(--text); }
.rkn-operator-table tr + tr td { border-top: 1px solid var(--border); }
/* ====== Модалка: Просмотр документа ====== */
.rkn-doc-preview-meta {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: 12px; color: var(--text-muted); margin-bottom: 14px;
padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.rkn-doc-preview-meta b { color: var(--text); font-weight: 600; }
.rkn-doc-preview-body {
max-height: 60vh; overflow-y: auto;
font-size: 14px; line-height: 1.7; color: var(--text);
}
.rkn-doc-preview-body h2 { font-size: 18px; margin: 18px 0 8px; color: var(--text); }
.rkn-doc-preview-body h3 { font-size: 15px; margin: 14px 0 6px; color: var(--text); }
.rkn-doc-preview-body p { margin: 0 0 10px; }
.rkn-doc-preview-body ol, .rkn-doc-preview-body ul { padding-left: 22px; margin: 0 0 10px; }
/* ====== Модалка: Редактор документа (версионирование) ====== */
.rkn-doc-edit-meta {
display: flex; gap: 16px; flex-wrap: wrap;
font-size: 12px; color: var(--text-muted); margin-bottom: 12px;
}
.rkn-doc-edit-meta b { color: var(--text); font-weight: 600; }
.rkn-doc-edit-toolbar {
display: flex; flex-wrap: wrap; gap: 4px;
padding: 8px 12px;
border: 1px solid var(--border); border-bottom: none;
border-radius: 10px 10px 0 0;
background: var(--bg);
}
.rkn-doc-edit-toolbar button {
padding: 5px 11px; font-size: 11px;
border: 1px solid var(--border); border-radius: 5px;
background: #fff; cursor: pointer; font-family: inherit;
color: var(--text-muted);
}
.rkn-doc-edit-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.rkn-doc-edit-content {
min-height: 380px; max-height: 60vh; overflow-y: auto;
padding: 18px;
border: 1px solid var(--border); border-radius: 0 0 10px 10px;
font-size: 14px; line-height: 1.7; color: var(--text); outline: none;
}
.rkn-doc-edit-content h2 { font-size: 18px; margin: 14px 0 8px; }
.rkn-doc-edit-content h3 { font-size: 15px; margin: 12px 0 6px; }
.rkn-doc-edit-content p { margin: 0 0 10px; }
/* ============ Мониторинг (1:1 BOTIX modules/monitoring/HealthMonitor.php — здоровье системы) ============ */
.mon-header {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.mon-title {
font-size: 24px; font-weight: 700;
color: var(--text); margin: 0 0 6px;
letter-spacing: -0.3px;
}
.mon-sub { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.mon-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mon-last-update {
display: flex; flex-direction: column;
padding-right: 12px; margin-right: 4px;
border-right: 1px solid var(--border);
}
.mon-last-update-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); }
.mon-last-update-time { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.mon-header-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
background: #fff; border: 1px solid var(--border); border-radius: 10px;
font-size: 13px; font-weight: 500; color: var(--text);
cursor: pointer; font-family: inherit;
transition: all 0.15s;
}
.mon-header-btn:hover { border-color: var(--accent); color: var(--accent); }
.mon-header-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mon-header-btn--primary:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
/* Общий статус-баннер */
.mon-overall {
padding: 18px 22px; border-radius: 14px;
margin-bottom: 22px;
display: flex; align-items: center; gap: 16px;
font-weight: 600;
}
.mon-overall--ok { background: rgba(45,168,78,0.08); color: #1B7A36; border: 1px solid rgba(45,168,78,0.2); }
.mon-overall--warning { background: rgba(255,159,10,0.08); color: #B45309; border: 1px solid rgba(255,159,10,0.2); }
.mon-overall--critical { background: rgba(220,38,38,0.08); color: #B91C1C; border: 1px solid rgba(220,38,38,0.25); }
.mon-overall-icon { width: 32px; height: 32px; flex-shrink: 0; }
.mon-overall-icon svg { width: 32px; height: 32px; }
.mon-overall-text { flex: 1; }
.mon-overall-title { font-size: 16px; margin-bottom: 2px; }
.mon-overall-meta { font-size: 12px; font-weight: 500; opacity: 0.85; }
/* KPI row (4 плитки) */
.mon-kpi-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 28px;
}
@media (max-width: 900px) { .mon-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.mon-kpi {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 16px 18px;
position: relative; overflow: hidden;
}
.mon-kpi--ok::before, .mon-kpi--warning::before, .mon-kpi--critical::before, .mon-kpi--error::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.mon-kpi--ok::before { background: #2DA84E; }
.mon-kpi--warning::before { background: #FF9F0A; }
.mon-kpi--critical::before { background: #DC2626; }
.mon-kpi--error::before { background: #86868B; }
.mon-kpi-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 10px;
}
.mon-kpi-icon { font-size: 22px; line-height: 1; }
.mon-kpi-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.4px; font-weight: 600;
color: var(--text-muted);
}
.mon-kpi-value {
font-size: 22px; font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums;
letter-spacing: -0.3px;
}
.mon-kpi-detail { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
/* Section labels */
.mon-section-label {
font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted);
margin: 22px 0 12px; padding-left: 4px;
display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
/* Карточка-обёртка */
.mon-card {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
/* Cron-таблица */
.mon-crons-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mon-crons-table th {
text-align: left; padding: 12px 16px;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
color: var(--text-muted); font-weight: 600;
background: var(--bg); border-bottom: 1px solid var(--border);
}
.mon-crons-table td {
padding: 12px 16px; border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.mon-crons-table tr:last-child td { border-bottom: none; }
.mon-crons-table tr:hover td { background: rgba(255,107,71,0.02); }
.mon-cron-label {
font-weight: 600; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.mon-cron-name { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-muted); background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.mon-cron-interval { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mon-cron-last { font-size: 12px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mon-cron-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mon-status-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: 12px;
font-size: 11px; font-weight: 600; white-space: nowrap;
}
.mon-status-pill--ok { background: rgba(45,168,78,0.12); color: #1B7A36; }
.mon-status-pill--warning { background: rgba(255,159,10,0.12); color: #B45309; }
.mon-status-pill--critical { background: rgba(220,38,38,0.12); color: #B91C1C; }
.mon-status-pill--error { background: rgba(134,134,139,0.15); color: #555; }
.mon-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
/* Сервисы — grid карточек */
.mon-services-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.mon-service-card {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 14px 16px;
position: relative; overflow: hidden;
transition: border-color 0.15s, transform 0.15s;
}
.mon-service-card:hover { border-color: rgba(255,107,71,0.3); transform: translateY(-1px); }
.mon-service-card::before {
content: ''; position: absolute; top: 0; left: 0; bottom: 0;
width: 4px;
}
.mon-service-card--ok::before { background: #2DA84E; }
.mon-service-card--warning::before { background: #FF9F0A; }
.mon-service-card--critical::before { background: #DC2626; }
.mon-service-card--unknown::before { background: #C7C7CC; }
.mon-service-head {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px;
}
.mon-service-icon { font-size: 18px; line-height: 1; }
.mon-service-name { font-size: 14px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-service-meta {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
}
.mon-service-detail { font-size: 12px; color: var(--text-muted); }
.mon-service-latency { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mon-service-latency--ok { color: #1B7A36; }
.mon-service-latency--warning { color: #B45309; }
.mon-service-latency--critical { color: #B91C1C; }
/* Журнал проверок */
.mon-log-filter {
appearance: none; -webkit-appearance: none;
height: 30px; padding: 0 28px 0 10px;
border: 1px solid var(--border); border-radius: 8px;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 10px center;
background-size: 10px 6px;
font-size: 12px; font-weight: 500; color: var(--text);
cursor: pointer; font-family: inherit;
text-transform: none; letter-spacing: 0;
}
.mon-log-wrap { padding: 0; }
.mon-log-table-scroll { max-height: 480px; overflow-y: auto; }
.mon-log-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mon-log-table th {
position: sticky; top: 0; z-index: 2;
text-align: left; padding: 10px 14px;
font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px;
color: var(--text-muted); font-weight: 600;
background: var(--bg); border-bottom: 1px solid var(--border);
}
.mon-log-table td {
padding: 10px 14px; border-bottom: 1px solid var(--border);
vertical-align: top;
}
.mon-log-table tr:last-child td { border-bottom: none; }
.mon-log-table tr:hover td { background: rgba(255,107,71,0.02); }
.mon-log-time { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-muted); }
.mon-log-type { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-muted); background: var(--bg); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.mon-log-title { color: var(--text); font-weight: 500; }
.mon-log-value { font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; }
/* Модалка Telegram-отчёта */
.mon-tg-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; line-height: 1.5; }
.mon-tg-text {
width: 100%; min-height: 360px; padding: 14px;
border: 1px solid var(--border); border-radius: 10px;
font-family: ui-monospace, Menlo, monospace; font-size: 12px;
line-height: 1.6; background: var(--bg); color: var(--text);
resize: vertical; box-sizing: border-box;
}
.mon-tg-text:focus { outline: none; border-color: var(--accent); }
/* Модалка настроек */
.mon-set-hint {
font-size: 12px; color: var(--text-muted);
background: var(--bg); padding: 10px 12px;
border-radius: 8px; margin-bottom: 14px; line-height: 1.5;
}
/* ============ Аналитика сайта (1:1 BOTIX site-analytics-dashboard-new.php, 19 виджетов; адаптация под cp_analytics_events) ============ */
.san-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 22px; flex-wrap: wrap;
}
.san-title {
font-size: 24px; font-weight: 700; color: var(--text);
letter-spacing: -0.3px; margin: 0 auto 0 0;
}
.san-header-actions { display: flex; gap: 8px; align-items: center; }
.san-period-select {
appearance: none; -webkit-appearance: none;
height: 36px; padding: 0 32px 0 14px;
border: 1px solid var(--border); border-radius: 10px;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
background-size: 10px 6px;
font-size: 13px; font-weight: 500; color: var(--text);
cursor: pointer; line-height: 1; font-family: inherit;
}
.san-period-select:hover { border-color: var(--accent); }
.san-period-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,71,0.15); }
.san-header-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 36px; padding: 0 14px;
background: #fff; border: 1px solid var(--border); border-radius: 10px;
font-size: 13px; font-weight: 500; color: var(--text);
cursor: pointer; font-family: inherit;
transition: all 0.15s;
}
.san-header-btn:hover { border-color: var(--accent); color: var(--accent); }
.san-section-label {
font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted);
margin: 24px 0 12px; padding-left: 4px;
}
.san-section-label:first-of-type { margin-top: 0; }
.san-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.san-grid-4 { grid-template-columns: repeat(4, 1fr); }
.san-grid-2 { grid-template-columns: repeat(2, 1fr); }
.san-grid-1 { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
.san-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.san-grid-4, .san-grid-2 { grid-template-columns: 1fr; }
}
.san-widget {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 16px 18px;
display: flex; flex-direction: column;
overflow: hidden;
}
.san-w-small { min-height: 110px; }
.san-w-h { margin-bottom: 12px; flex-shrink: 0; }
.san-w-t {
font-size: 12px; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--text-muted);
font-weight: 600;
}
.san-w-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.san-w-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.san-w-val {
font-size: 32px; font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums;
letter-spacing: -0.5px; margin-top: auto; text-align: right;
}
/* Сравнение с периодом (week_cmp / month_cmp): двойной KPI с change */
.san-cmp-row {
display: flex; flex-direction: column; gap: 12px;
}
.san-cmp-item {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0;
}
.san-cmp-item + .san-cmp-item { border-top: 1px solid var(--border); }
.san-cmp-label { font-size: 13px; color: var(--text-muted); }
.san-cmp-vals { display: flex; align-items: center; gap: 12px; }
.san-cmp-current { font-size: 20px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.san-cmp-change {
font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
font-variant-numeric: tabular-nums;
}
.san-cmp-change--up { background: rgba(45,168,78,0.1); color: #1B7A36; }
.san-cmp-change--down { background: rgba(220,38,38,0.1); color: #B91C1C; }
.san-cmp-change--flat { background: var(--bg); color: var(--text-muted); }
/* Line chart (динамика посещений) */
.san-chart-line { min-height: 220px; position: relative; }
.san-chart-line svg { width: 100%; height: 220px; }
.san-chart-legend {
display: flex; gap: 16px; justify-content: center;
font-size: 11px; color: var(--text-muted); margin-top: 8px;
}
.san-chart-legend span::before {
content: ''; display: inline-block;
width: 10px; height: 2px;
margin-right: 6px; vertical-align: middle;
}
.san-chart-legend .san-leg-visitors::before { background: #0066CC; }
.san-chart-legend .san-leg-views::before { background: #2DA84E; }
/* Bar chart (для monthly / seasonality / pages / packages) */
.san-chart-bars {
flex: 1; display: flex; align-items: flex-end; gap: 4px;
min-height: 140px; padding-top: 8px;
}
.san-bar {
flex: 1; border-radius: 4px 4px 0 0;
min-height: 2px; cursor: pointer;
position: relative; transition: opacity 0.2s;
}
.san-bar:hover { opacity: 0.78; }
.san-bar-tip {
display: none; position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%); background: #fff;
border: 1px solid var(--border); border-radius: 6px;
padding: 4px 8px; font-size: 11px; white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10;
color: var(--text); margin-bottom: 4px;
}
.san-bar:hover .san-bar-tip { display: block; }
.san-bar-labels { display: flex; gap: 4px; margin-top: 6px; }
.san-bar-labels span {
flex: 1; text-align: center; font-size: 10px;
color: var(--text-muted);
}
/* Donut chart (для session-dur / returning / scroll / devices) */
.san-chart-donut {
display: flex; align-items: center; gap: 16px;
min-height: 160px;
}
.san-donut-svg { width: 130px; height: 130px; flex-shrink: 0; }
.san-donut-legend { flex: 1; font-size: 12px; min-width: 0; }
.san-donut-leg-item {
display: flex; align-items: center; gap: 8px;
margin-bottom: 6px; line-height: 1.3;
}
.san-donut-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.san-donut-leg-text { flex: 1; }
.san-donut-leg-val { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Top-list (для top-styles / exit-pages) */
.san-top-list {
flex: 1; display: flex; flex-direction: column;
gap: 6px; padding-top: 4px;
}
.san-top-row {
display: flex; align-items: center; gap: 10px;
font-size: 12px;
}
.san-top-rank {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; flex-shrink: 0;
background: var(--bg); color: var(--text-muted);
font-weight: 600; font-size: 11px; border-radius: 50%;
}
.san-top-name {
flex: 0 0 130px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text); font-weight: 500;
}
.san-top-track {
flex: 1; height: 12px; background: var(--bg);
border-radius: 6px; overflow: hidden;
position: relative;
}
.san-top-fill {
height: 100%; border-radius: 6px;
transition: width 0.5s ease;
}
.san-top-count {
flex-shrink: 0; min-width: 36px; text-align: right;
font-weight: 700; font-size: 12px;
color: var(--accent); font-variant-numeric: tabular-nums;
}
/* Воронка конверсии (4 ступени) */
.san-funnel { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.san-funnel-row {
display: flex; align-items: center; gap: 12px;
font-size: 13px;
}
.san-funnel-label { flex: 0 0 110px; color: var(--text); font-weight: 500; }
.san-funnel-track {
flex: 1; height: 22px; background: var(--bg);
border-radius: 11px; overflow: hidden; position: relative;
}
.san-funnel-fill {
height: 100%; border-radius: 11px;
display: flex; align-items: center; justify-content: flex-end;
padding-right: 10px; color: #fff;
font-size: 11px; font-weight: 600;
font-variant-numeric: tabular-nums;
transition: width 0.5s ease;
}
.san-funnel-pct {
flex-shrink: 0; min-width: 44px;
font-size: 11px; font-weight: 600;
color: var(--text-muted); text-align: right;
font-variant-numeric: tabular-nums;
}
/* Просмотры карточек стилей: 3 мини-KPI + line */
.san-style-views-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 8px; margin-bottom: 12px;
}
.san-style-views-stat {
background: var(--bg); border-radius: 10px;
padding: 10px; text-align: center;
}
.san-style-views-stat-label {
font-size: 10px; text-transform: uppercase;
letter-spacing: 0.3px; color: var(--text-muted);
font-weight: 600; margin-bottom: 4px;
}
.san-style-views-stat-val {
font-size: 22px; font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums;
}
/* Средняя цена интереса */
.san-avg-price-block {
display: flex; align-items: center; gap: 24px;
padding: 12px 0;
}
.san-avg-price-num {
font-size: 36px; font-weight: 700;
color: var(--accent); font-variant-numeric: tabular-nums;
letter-spacing: -0.5px;
}
.san-avg-price-hint { font-size: 12px; color: var(--text-muted); flex: 1; line-height: 1.5; }
/* Настройки */
.san-set-hint {
font-size: 12px; color: var(--text-muted);
background: var(--bg); padding: 10px 12px;
border-radius: 8px; margin-bottom: 14px; line-height: 1.5;
}
.san-set-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
/* ============ Аналитика (1:1 BOTIX analytics.php; адаптация: заказы вместо подписок, пакеты вместо тарифов BOTIX) ============ */
.anl-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 22px; flex-wrap: wrap;
}
.anl-title {
font-size: 24px; font-weight: 700; color: var(--text);
letter-spacing: -0.3px; margin: 0 auto 0 0;
}
.anl-period-select {
appearance: none; -webkit-appearance: none;
height: 36px; padding: 0 32px 0 14px;
border: 1px solid var(--border); border-radius: 10px;
background-color: #fff;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
background-size: 10px 6px;
font-size: 13px; font-weight: 500; color: var(--text);
cursor: pointer; line-height: 1; font-family: inherit;
transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.anl-period-select:hover { background-color: var(--bg); border-color: var(--accent); }
.anl-period-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,71,0.15); }
/* Сетка 8 колонок × 80px */
.anl-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 80px;
gap: 12px;
}
.anl-widget {
border-radius: 14px; padding: 12px 14px;
overflow: hidden; display: flex; flex-direction: column;
}
.anl-s1x1 { grid-column: span 1; grid-row: span 1; }
.anl-s4x3 { grid-column: span 4; grid-row: span 3; }
@media (max-width: 1100px) {
.anl-grid { grid-template-columns: repeat(4, 1fr); }
.anl-s4x3 { grid-column: span 4; }
}
@media (max-width: 700px) {
.anl-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 70px; }
.anl-s1x1 { grid-column: span 2; }
.anl-s4x3 { grid-column: span 4; }
}
/* Темы виджетов */
.anl-t-clients { background: rgba(0,122,255,0.07); border: 1px solid rgba(0,122,255,0.12); }
.anl-t-money { background: rgba(45,168,78,0.08); border: 1px solid rgba(45,168,78,0.14); }
.anl-t-act { background: rgba(255,159,10,0.08); border: 1px solid rgba(255,159,10,0.14); }
.anl-t-neutral { background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.03); }
/* Заголовок виджета */
.anl-w-h { margin-bottom: 4px; flex-shrink: 0; }
.anl-w-t {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--text-muted); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.anl-w-hint {
font-size: 10px; color: var(--text-muted);
margin-top: 2px; line-height: 1.2;
}
.anl-s1x1 .anl-w-hint { display: none; }
.anl-s1x1 .anl-w-t { font-size: 10px; letter-spacing: 0.2px; }
/* KPI значение — внизу справа */
.anl-mv {
font-weight: 700; letter-spacing: -0.5px; line-height: 1.1;
font-variant-numeric: tabular-nums;
margin-top: auto; text-align: right;
}
.anl-s1x1 .anl-mv { font-size: 26px; }
.anl-t-clients .anl-mv { color: #0066CC; }
.anl-t-money .anl-mv { color: #2DA84E; }
.anl-t-act .anl-mv { color: #FF9F0A; }
/* Контейнер графика */
.anl-chart-c { flex: 1; min-height: 0; position: relative; margin-top: 4px; display: flex; flex-direction: column; }
/* Bar chart (Заказы по дням) */
.anl-bar-chart { flex: 1; display: flex; align-items: flex-end; gap: 3px; min-height: 0; }
.anl-bar {
flex: 1; border-radius: 4px 4px 0 0;
min-height: 2px; transition: height 0.4s ease;
position: relative; cursor: pointer;
}
.anl-bar:hover { opacity: 0.78; }
.anl-bar-tip {
display: none; position: absolute; bottom: 100%; left: 50%;
transform: translateX(-50%); background: #fff;
border: 1px solid var(--border); border-radius: 6px;
padding: 4px 8px; font-size: 11px; white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10;
color: var(--text);
}
.anl-bar:hover .anl-bar-tip { display: block; }
.anl-bar-labels { display: flex; gap: 3px; margin-top: 4px; }
.anl-bar-labels span { flex: 1; text-align: center; font-size: 9px; color: var(--text-muted); }
/* Donut (Статусы) */
.anl-donut-wrap { display: flex; align-items: center; gap: 14px; flex: 1; min-height: 0; }
.anl-donut { width: 120px; height: 120px; flex-shrink: 0; }
.anl-donut-legend { font-size: 12px; flex: 1; }
.anl-leg-item { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; line-height: 1.3; }
.anl-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.anl-leg-item b { font-variant-numeric: tabular-nums; }
/* Horizontal bars (Пакеты) */
.anl-hbar-list { gap: 8px; padding-top: 4px; justify-content: center; }
.anl-hbar-row { display: flex; align-items: center; gap: 10px; }
.anl-hbar-label { width: 100px; font-size: 12px; color: var(--text); white-space: nowrap; flex-shrink: 0; }
.anl-hbar-track {
flex: 1; height: 20px; background: var(--bg);
border-radius: 10px; position: relative; overflow: hidden;
}
.anl-hbar-fill { height: 100%; border-radius: 10px; transition: width 0.5s ease; }
.anl-hbar-val {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
font-size: 11px; font-weight: 600; color: var(--text);
font-variant-numeric: tabular-nums;
}
/* Revenue/Refunds chart */
.anl-rev-chart {
flex: 1; display: flex; align-items: flex-end;
justify-content: space-around; gap: 12px; min-height: 0; padding-top: 4px;
}
.anl-rev-group { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.anl-rev-bars { display: flex; gap: 3px; align-items: flex-end; height: 130px; }
.anl-rev-bar {
width: 22px; border-radius: 3px 3px 0 0;
min-height: 4px; position: relative; cursor: pointer; transition: opacity 0.2s;
}
.anl-rev-bar:hover { opacity: 0.78; }
.anl-rev-bar:hover .anl-bar-tip { display: block; }
.anl-rev-label { font-size: 10px; color: var(--text-muted); }
.anl-rev-balance { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.anl-rev-balance.anl-pos { color: #2DA84E; }
.anl-rev-balance.anl-neg { color: #DC2626; }
.anl-rev-balance.anl-zero { color: var(--text-muted); }
.anl-rev-legend {
display: flex; gap: 16px; font-size: 11px;
color: var(--text-muted); justify-content: center; padding-top: 4px;
}
.anl-rev-legend span::before {
content: ''; display: inline-block;
width: 8px; height: 8px; border-radius: 2px;
margin-right: 4px; vertical-align: middle;
}
.anl-rev-legend .anl-lg::before { background: #2DA84E; }
.anl-rev-legend .anl-lr::before { background: #DC2626; }
/* Line chart (Динамика выручки) */
.anl-line-wrap { flex: 1; min-height: 0; position: relative; }
.anl-line-wrap svg { width: 100%; height: 100%; }
/* Top styles (вместо географии BOTIX) */
.anl-top-list {
gap: 4px 16px; padding-top: 6px;
align-content: start;
display: flex; flex-direction: column;
overflow-y: auto;
}
.anl-top-item {
display: flex; justify-content: space-between; align-items: center;
padding: 5px 0; font-size: 13px;
border-bottom: 1px solid var(--border);
}
.anl-top-item:last-child { border-bottom: none; }
.anl-top-name {
color: var(--text); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center; gap: 8px;
}
.anl-top-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.anl-top-count {
font-weight: 700; color: var(--accent);
margin-left: 8px; font-size: 14px;
font-variant-numeric: tabular-nums;
}
/* No-data state */
.anl-no-data { color: var(--text-muted); font-size: 12px; text-align: center; padding: 16px 0; }
/* ============ Дашборд KPI (1:1 BOTIX index.php; адаптация под COVERPRESS-сущности: 10 LoRA-стилей вместо ниш-ботов, 4 канала доставки вместо 8 каналов BOTIX) ============ */
.dash-page-header { margin-bottom: 22px; }
.dash-h1 { font-size: 26px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.dash-sub { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.5; }
.dash-alerts { margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.dash-alert {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; border-radius: 12px;
font-size: 13px; font-weight: 500;
}
.dash-alert--warn { background: rgba(255,159,10,0.08); color: #B45309; }
.dash-alert--info { background: rgba(0,122,255,0.06); color: #0066CC; }
.dash-alert--danger { background: rgba(220,38,38,0.08); color: #B91C1C; }
.dash-alert--success { background: rgba(45,168,78,0.08); color: #1B7A36; }
.dash-alert svg { flex-shrink: 0; width: 16px; height: 16px; }
.dash-alert a { color: inherit; text-decoration: underline; margin-left: auto; font-weight: 600; }
.dash-kpi {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-bottom: 28px;
}
.dash-kpi--channels { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .dash-kpi, .dash-kpi--channels { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .dash-kpi, .dash-kpi--channels { grid-template-columns: repeat(2, 1fr); } }
.dash-kpi-card {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 18px 14px;
text-align: center;
transition: border-color 0.15s, transform 0.15s;
}
.dash-kpi-card:hover { border-color: rgba(255,107,71,0.3); transform: translateY(-1px); }
.dash-kpi-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
color: var(--text-muted); margin-bottom: 6px;
}
.dash-kpi-value {
font-size: clamp(20px, 3vw, 30px); font-weight: 700;
color: var(--text); font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.dash-kpi-value-small { font-size: 14px; opacity: 0.4; font-weight: 500; }
.dash-kpi-trend {
font-size: 11px; margin-top: 6px;
display: inline-flex; align-items: center; gap: 4px;
}
.dash-kpi-trend--up { color: #1B7A36; }
.dash-kpi-trend--down { color: #B91C1C; }
.dash-kpi-trend--flat { color: var(--text-muted); }
.dash-section-title {
font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted);
margin-bottom: 12px;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dash-section-title a {
font-size: 12px; font-weight: 500;
text-transform: none; letter-spacing: 0;
color: var(--accent); text-decoration: none;
}
.dash-section-title a:hover { text-decoration: underline; }
/* Реестр 10 стилей — мини-карточки с цветной подложкой */
.dash-styles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 10px;
margin-bottom: 8px;
}
.dash-style-mini {
border-radius: 14px; padding: 14px;
text-decoration: none; color: var(--text);
transition: transform 0.15s, box-shadow 0.15s;
display: block; cursor: pointer;
}
.dash-style-mini:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.dash-style-mini-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 6px; gap: 8px;
}
.dash-style-mini-name { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-style-mini-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-style-mini-cnt {
font-size: 26px; font-weight: 700; line-height: 1;
margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.dash-style-mini-cnt span { font-size: 12px; font-weight: 400; opacity: 0.45; }
.dash-style-mini-meta {
font-size: 11px; opacity: 0.7;
display: flex; justify-content: space-between; gap: 6px;
}
.dash-style-mini-bar {
height: 4px; background: rgba(255,255,255,0.6);
border-radius: 2px; overflow: hidden; margin-top: 8px;
}
.dash-style-mini-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
/* Таблица последних заказов */
.dash-orders-wrap {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
.dash-orders-wrap-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dash-orders-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.dash-orders-table th {
text-align: left; padding: 11px 14px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-muted);
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.dash-orders-table th.dash-orders-th-num { text-align: right; }
.dash-orders-table td {
padding: 11px 14px; font-size: 13px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.dash-orders-table tr:last-child td { border-bottom: none; }
.dash-orders-table tr:hover td { background: rgba(255,107,71,0.02); }
.dash-orders-table td.dash-orders-td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dash-orders-table .dash-orders-id { color: var(--text-muted); font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
.dash-orders-table .dash-orders-contact { font-weight: 600; }
.dash-orders-table .dash-orders-time { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.dash-orders-pill {
display: inline-block; padding: 2px 9px;
border-radius: 12px; font-size: 11px; font-weight: 600;
white-space: nowrap;
}
.dash-orders-pill--created { background: #dddee2; color: #48484a; }
.dash-orders-pill--paid { background: #d6e4ff; color: #2563eb; }
.dash-orders-pill--generating { background: #fdebd0; color: #d97706; }
.dash-orders-pill--delivered { background: #d1f7e0; color: #16a34a; }
.dash-orders-pill--failed { background: #fde0e0; color: #dc2626; }
.dash-orders-pill--refunded { background: #f5d0fe; color: #a21caf; }
.dash-orders-channel-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 9px; border-radius: 12px;
font-size: 11px; font-weight: 600;
}
.dash-orders-channel-pill--telegram { background: rgba(0,122,255,0.12); color: #007AFF; }
.dash-orders-channel-pill--vk { background: rgba(70,128,194,0.12); color: #4680C2; }
.dash-orders-channel-pill--max { background: rgba(255,51,102,0.12); color: #FF3366; }
.dash-orders-channel-pill--sms { background: rgba(52,199,89,0.12); color: #16a34a; }
.dash-orders-channel-pill svg { width: 11px; height: 11px; }
/* ============ Тех. обслуживание (1:1 BOTIX maintenance.php + page-cache.php + broken-links.php + repair.php в 4 табах) ============ */
.mnt-card { padding: 24px 28px; }
.mnt-page-header { margin-bottom: 22px; }
.mnt-page-title { font-size: 22px; font-weight: 700; color: var(--text); }
.mnt-page-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
.mnt-tabs {
display: flex; gap: 0; margin-bottom: 24px;
border-bottom: 2px solid var(--border);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mnt-tabs::-webkit-scrollbar { display: none; }
.mnt-tab {
padding: 11px 22px; font-size: 14px; font-weight: 500;
color: var(--text-muted); background: none; border: none;
border-bottom: 2px solid transparent; margin-bottom: -2px;
cursor: pointer; font-family: inherit;
flex-shrink: 0; white-space: nowrap;
transition: color .15s, border-color .15s;
}
.mnt-tab:hover { color: var(--text); }
.mnt-tab.mnt-tab-active { color: var(--accent); border-bottom-color: var(--accent); }
/* ====== Таб 1: Режим обслуживания ====== */
.mnt-mode-wrap { max-width: 720px; margin: 0 auto; }
.mnt-mode-card {
background: #fff; border: 1px solid var(--border);
border-radius: 16px; padding: 28px;
}
.mnt-mode-status {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px; border-radius: 12px;
margin-bottom: 20px;
}
.mnt-mode-status--off { background: rgba(45,168,78,0.08); color: #1B7A36; }
.mnt-mode-status--on { background: rgba(220,38,38,0.08); color: #B91C1C; }
.mnt-mode-status-dot {
width: 12px; height: 12px; border-radius: 50%;
background: currentColor;
animation: mnt-pulse 2s ease-in-out infinite;
}
@keyframes mnt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.mnt-mode-status-text { font-weight: 600; font-size: 15px; }
.mnt-mode-meta {
background: var(--bg); padding: 14px 18px;
border-radius: 10px; margin-bottom: 16px;
font-size: 14px; color: var(--text);
}
.mnt-mode-meta b { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.mnt-mode-form-field { margin-bottom: 16px; }
.mnt-mode-form-field label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.mnt-mode-form-field textarea {
width: 100%; padding: 12px 14px;
border: 1px solid var(--border); border-radius: 10px;
font-size: 14px; font-family: inherit; resize: vertical; min-height: 90px;
background: #fff; color: var(--text); box-sizing: border-box;
}
.mnt-mode-form-field textarea:focus { outline: none; border-color: var(--accent); }
.mnt-mode-btn {
border: none; padding: 14px 24px; border-radius: 10px;
font-size: 15px; font-weight: 600; cursor: pointer;
width: 100%; font-family: inherit;
}
.mnt-mode-btn--danger { background: #DC2626; color: #fff; }
.mnt-mode-btn--danger:hover { background: #B91C1C; }
.mnt-mode-btn--success { background: #2DA84E; color: #fff; }
.mnt-mode-btn--success:hover { background: #248A41; }
.mnt-mode-warn {
margin-top: 16px; font-size: 13px; color: var(--text-muted);
padding: 12px 14px; background: rgba(255,159,10,0.08);
border-left: 3px solid #FF9F0A; border-radius: 6px; line-height: 1.5;
}
/* ====== Таб 2: Кеш страниц ====== */
.mnt-cache-kpi-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 12px; margin-bottom: 22px;
}
@media (max-width: 800px) { .mnt-cache-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.mnt-cache-kpi {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 16px 18px;
}
.mnt-cache-kpi-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.3px; color: var(--text-muted); margin-bottom: 6px;
}
.mnt-cache-kpi-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mnt-cache-kpi--good .mnt-cache-kpi-value { color: #2DA84E; }
.mnt-cache-kpi--bad .mnt-cache-kpi-value { color: #DC2626; }
.mnt-cache-kpi--info .mnt-cache-kpi-value { color: var(--accent); }
.mnt-cache-section {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 18px 20px; margin-bottom: 20px;
}
.mnt-cache-section-h {
display: flex; justify-content: space-between; align-items: center;
font-size: 15px; font-weight: 600; margin: 0 0 14px; gap: 12px; flex-wrap: wrap;
}
.mnt-cache-status-on { color: #2DA84E; font-weight: 600; }
.mnt-cache-status-off { color: #DC2626; font-weight: 600; }
.mnt-cache-bar-chart {
display: flex; gap: 6px; align-items: flex-end;
height: 90px; padding: 8px 0;
}
.mnt-cache-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mnt-cache-bar-cols { display: flex; gap: 2px; height: 64px; align-items: flex-end; width: 100%; }
.mnt-cache-bar-col { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.mnt-cache-bar-hit { background: #2DA84E; }
.mnt-cache-bar-miss { background: rgba(142,142,147,0.4); }
.mnt-cache-bar-label { font-size: 10px; color: var(--text-muted); }
.mnt-cache-bar-legend { font-size: 11px; color: var(--text-muted); margin-top: 8px; display: flex; gap: 16px; flex-wrap: wrap; }
.mnt-cache-bar-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.mnt-cache-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mnt-cache-table th {
padding: 9px 12px; text-align: left; font-size: 11px;
font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px;
color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.mnt-cache-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
.mnt-cache-table tr:last-child td { border-bottom: none; }
.mnt-cache-table code {
background: var(--bg); padding: 2px 6px; border-radius: 4px;
font-family: ui-monospace, Menlo, monospace; font-size: 12px;
}
.mnt-cache-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; font-size: 13px; font-weight: 500;
border: 1px solid var(--border); border-radius: 8px;
cursor: pointer; font-family: inherit; background: #fff; color: var(--text);
}
.mnt-cache-btn:hover { border-color: var(--accent); color: var(--accent); }
.mnt-cache-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.mnt-cache-btn--primary:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.mnt-cache-btn--danger { background: rgba(220,38,38,0.08); color: #DC2626; border-color: rgba(220,38,38,0.2); }
.mnt-cache-btn--danger:hover { background: rgba(220,38,38,0.15); color: #B91C1C; }
.mnt-cache-empty { padding: 20px; color: var(--text-muted); font-size: 13px; }
.mnt-cache-redis-warn {
background: rgba(220,38,38,0.05); border: 1px solid rgba(220,38,38,0.2);
border-radius: 14px; padding: 16px 20px; margin-bottom: 20px;
color: #B91C1C; font-size: 14px;
}
.mnt-cache-redis-warn b { display: block; margin-bottom: 4px; }
/* ====== Таб 3: 404 Monitor ====== */
.mnt-404-toolbar {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.mnt-404-actions { display: flex; gap: 8px; }
.mnt-404-action-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 16px; font-size: 13px; font-weight: 600;
border: none; border-radius: 8px;
cursor: pointer; font-family: inherit; text-decoration: none;
}
.mnt-404-action-btn--brief { background: var(--accent); color: #fff; }
.mnt-404-action-btn--brief:hover { background: var(--accent-hover); }
.mnt-404-action-btn--zip { background: #2DA84E; color: #fff; }
.mnt-404-action-btn--zip:hover { background: #248A41; }
.mnt-404-action-btn svg { width: 14px; height: 14px; }
.mnt-404-stats {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 12px; margin-bottom: 20px;
}
@media (max-width: 900px) { .mnt-404-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .mnt-404-stats { grid-template-columns: repeat(2, 1fr); } }
.mnt-404-stat-card {
background: #fff; border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
}
.mnt-404-stat-label {
font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px;
font-weight: 600; margin-bottom: 4px;
}
.mnt-404-stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
.mnt-404-stat-desc { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }
.mnt-404-filters {
display: flex; gap: 8px; margin-bottom: 18px;
flex-wrap: wrap; align-items: center;
}
.mnt-404-filter-sep { color: var(--text-muted); font-size: 12px; margin: 0 4px; }
.mnt-404-filter {
padding: 7px 13px; background: #fff;
border: 1px solid var(--border); border-radius: 8px;
color: var(--text); text-decoration: none;
font-size: 13px; font-weight: 500; cursor: pointer;
font-family: inherit;
}
.mnt-404-filter:hover { border-color: var(--accent); color: var(--accent); }
.mnt-404-filter--active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mnt-404-filter--active:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.mnt-404-cleanup-btn {
margin-left: auto; padding: 7px 13px;
background: #fff; border: 1px solid var(--border); border-radius: 8px;
color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: inherit;
}
.mnt-404-cleanup-btn:hover { color: var(--text); border-color: var(--text-muted); }
.mnt-404-table {
width: 100%; background: #fff;
border: 1px solid var(--border); border-radius: 14px;
overflow: hidden; border-collapse: collapse;
}
.mnt-404-table th {
padding: 12px 14px; background: var(--bg);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px;
color: var(--text-muted); text-align: left; font-weight: 600;
}
.mnt-404-table td { padding: 11px 14px; border-top: 1px solid var(--border); font-size: 13px; vertical-align: top; }
.mnt-404-table td.mnt-404-url { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; max-width: 420px; }
.mnt-404-table td.mnt-404-referer { font-size: 11px; color: var(--text-muted); word-break: break-all; max-width: 280px; }
.mnt-404-table .mnt-404-resolved-row { opacity: 0.4; }
.mnt-404-badge {
display: inline-block; padding: 3px 8px; border-radius: 5px;
font-size: 10px; font-weight: 600; color: #fff;
text-transform: uppercase; letter-spacing: 0.3px;
}
.mnt-404-hits { font-weight: 700; font-variant-numeric: tabular-nums; }
.mnt-404-row-btn {
padding: 5px 11px; font-size: 11px;
border: 1px solid var(--border); background: #fff;
border-radius: 6px; cursor: pointer;
color: var(--text); font-family: inherit;
}
.mnt-404-row-btn:hover { border-color: var(--accent); color: var(--accent); }
.mnt-404-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.mnt-brief-hint { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.mnt-brief-textarea {
width: 100%; min-height: 360px; max-height: 60vh; padding: 14px;
border: 1px solid var(--border); border-radius: 10px;
font-family: ui-monospace, Menlo, monospace; font-size: 12px;
line-height: 1.55; background: var(--bg); color: var(--text);
resize: vertical; box-sizing: border-box;
}
.mnt-brief-textarea:focus { outline: none; border-color: var(--accent); }
/* ====== Таб 4: Ремонт компонентов ====== */
.mnt-repair-head {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap; margin-bottom: 18px;
}
.mnt-repair-preview-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 8px;
background: rgba(255,107,71,0.08); color: var(--accent);
border: none; cursor: pointer;
}
.mnt-repair-preview-btn:hover { background: rgba(255,107,71,0.16); }
.mnt-repair-preview-btn svg { width: 16px; height: 16px; }
.mnt-repair-stats { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.mnt-repair-ms {
display: inline-flex; align-items: center; gap: 6px;
border-radius: 8px; padding: 6px 12px; font-weight: 600;
}
.mnt-repair-ms-val { font-size: 16px; font-weight: 700; }
.mnt-repair-ms--gray { background: var(--bg); color: var(--text-muted); }
.mnt-repair-ms--green { background: rgba(45,168,78,0.1); color: #1B7A36; }
.mnt-repair-ms--orange { background: rgba(245,158,11,0.1); color: #B45309; }
.mnt-repair-ms--blue { background: rgba(0,122,255,0.1); color: #0066CC; }
.mnt-repair-ms svg { width: 14px; height: 14px; }
.mnt-repair-section-label {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.3px; color: var(--text-muted);
margin: 16px 0 10px; padding-left: 4px;
}
.mnt-repair-card {
background: #fff; border: 1px solid var(--border);
border-radius: 14px; padding: 10px 14px; margin-bottom: 16px;
}
.mnt-repair-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px;
}
@media (max-width: 1000px) { .mnt-repair-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .mnt-repair-grid { grid-template-columns: 1fr; gap: 0; } }
.mnt-repair-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; border-radius: 10px; margin: 4px 0;
}
.mnt-repair-row--ok { background: rgba(45,168,78,0.06); }
.mnt-repair-row--repair { background: rgba(245,158,11,0.1); }
.mnt-repair-row--assisted { background: rgba(0,122,255,0.07); }
.mnt-repair-row-icon {
width: 28px; height: 28px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.mnt-repair-row-icon svg { width: 20px; height: 20px; }
.mnt-repair-row-icon--ok { color: #2DA84E; }
.mnt-repair-row-icon--repair { color: #F59E0B; }
.mnt-repair-row-icon--assisted { color: #0066CC; }
.mnt-repair-row-name { flex: 1; font-size: 14px; font-weight: 500; }
.mnt-repair-row-name--ok { color: #1B7A36; }
.mnt-repair-row-name--repair { color: #B45309; }
.mnt-repair-row-name--assisted { color: #1d4fd0; }
.mnt-repair-seg {
display: inline-flex; flex-shrink: 0;
gap: 8px; padding: 4px;
background: var(--bg); border-radius: 18px;
border: 1px solid var(--border);
}
.mnt-repair-seg-btn {
width: 24px; height: 24px; border-radius: 50%;
border: none; cursor: pointer; padding: 0;
opacity: 0.35; transition: opacity 0.15s, box-shadow 0.15s;
}
.mnt-repair-seg-btn:hover { opacity: 0.7; }
.mnt-repair-seg-btn[data-state="ok"] { background: #2DA84E; }
.mnt-repair-seg-btn[data-state="repair"] { background: #F59E0B; }
.mnt-repair-seg-btn[data-state="assisted"] { background: #0066CC; }
.mnt-repair-seg-btn.mnt-on-ok { opacity: 1; color: #2DA84E; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.mnt-repair-seg-btn.mnt-on-repair { opacity: 1; color: #F59E0B; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
.mnt-repair-seg-btn.mnt-on-assisted { opacity: 1; color: #0066CC; box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; }
/* Модалка stub preview */
.mnt-stub-preview { text-align: center; padding: 24px 16px; }
.mnt-stub-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 84px; height: 84px; border-radius: 50%;
background: rgba(245,158,11,0.12); color: #F59E0B;
margin-bottom: 20px;
}
.mnt-stub-title-edit {
width: 100%; text-align: center;
font-size: 18px; font-weight: 700;
border: 1px solid transparent; background: transparent;
padding: 6px 10px; border-radius: 8px; color: var(--text);
font-family: inherit; margin-bottom: 10px;
}
.mnt-stub-title-edit:focus { outline: none; border-color: var(--border); background: var(--bg); }
.mnt-stub-subtitle-edit {
width: 100%; text-align: center;
font-size: 14px; color: var(--text-muted); line-height: 1.6;
border: 1px solid transparent; background: transparent;
padding: 6px 10px; border-radius: 8px;
font-family: inherit; resize: vertical; min-height: 60px;
box-sizing: border-box;
}
.mnt-stub-subtitle-edit:focus { outline: none; border-color: var(--border); background: var(--bg); }
.mnt-stub-hint { font-size: 11px; color: var(--text-muted); margin: 12px 0; text-align: center; padding: 0 16px; }
/* ============ Банк изображений (1:1 BOTIX photobank.php, 1723 строки; адаптация COVERPRESS: бот→стиль (LoRA), услуга→тема, watermark COVERpress двухцветный) ============ */
[data-section="photobank"] { display: flex; flex-direction: column; height: calc(100vh - 96px); overflow: hidden; }
.pb-page { display: flex; flex-direction: column; flex: 1; overflow: hidden; background: var(--surface); border-radius: var(--r-card-lg); border: 1px solid var(--border); }
/* Тулбар */
.pb-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: var(--surface);
flex-shrink: 0; flex-wrap: wrap;
}
.pb-select {
height: 36px; padding: 0 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--bg); color: var(--text);
font: 500 13px Inter, system-ui, sans-serif;
outline: none; cursor: pointer; min-width: 160px;
}
.pb-select:focus { border-color: var(--accent); }
.pb-select:disabled { opacity: 0.5; cursor: not-allowed; }
.pb-search-input {
flex: 1; min-width: 200px; height: 36px;
border: 1px solid var(--border); border-radius: var(--r-input);
padding: 0 14px; font-size: 13px;
background: var(--bg); color: var(--text); outline: none;
}
.pb-search-input:focus { border-color: var(--accent); }
.pb-search-btn {
height: 36px; padding: 0 20px; border: none;
border-radius: var(--r-input);
background: var(--accent); color: #fff;
font: 600 13px Inter, system-ui, sans-serif;
cursor: pointer; white-space: nowrap;
transition: background var(--t-fast);
}
.pb-search-btn:hover { background: var(--accent-hover); }
.pb-search-btn:disabled { opacity: 0.5; cursor: default; background: var(--accent); }
.pb-settings-btn {
height: 36px; width: 36px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--bg); color: var(--text-2);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast);
}
.pb-settings-btn:hover { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.pb-rate {
font: 600 11px Inter, system-ui, sans-serif;
color: var(--text-2); white-space: nowrap;
padding: 5px 12px; background: rgba(0,0,0,0.04); border-radius: var(--r-sm);
font-variant-numeric: tabular-nums;
}
.pb-rate--low { background: rgba(255,59,48,0.12); color: #FF3B30; }
/* Инфо-строка */
.pb-info-bar {
display: flex; align-items: center; gap: 12px;
padding: 10px 16px;
font-size: 12px; color: var(--text-2);
border-bottom: 1px solid var(--border-soft);
background: var(--surface);
flex-shrink: 0;
}
.pb-cache-badge {
font: 700 10px Inter, system-ui, sans-serif;
padding: 3px 10px; border-radius: var(--r-sm);
background: rgba(52,199,89,0.12); color: #1d9c3f;
letter-spacing: 0.3px;
}
.pb-pager { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.pb-page-num {
min-width: 30px; height: 28px;
border: 1px solid var(--border); border-radius: 6px;
background: var(--surface); color: var(--text-2);
font: 500 12px Inter, system-ui, sans-serif;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0 8px;
transition: background var(--t-fast), border-color var(--t-fast);
}
.pb-page-num:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.pb-page-num.cached { background: rgba(52,199,89,0.12); border-color: rgba(52,199,89,0.3); color: #1d8a3f; }
.pb-page-num.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pb-page-num.active.cached { background: #34C759; border-color: #34C759; color: #fff; }
.pb-page-dots { font-size: 12px; color: var(--text-3); padding: 0 2px; }
/* Сетка фото */
.pb-grid-area { flex: 1; overflow-y: auto; padding: 14px 16px; }
.pb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.pb-photo {
position: relative;
border-radius: 12px; overflow: hidden;
background: var(--bg-soft, #f0f0f0);
aspect-ratio: 1; cursor: pointer;
}
.pb-photo img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform var(--t-mid);
}
.pb-photo:hover img { transform: scale(1.05); }
.pb-photo__overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.45);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
opacity: 0;
transition: opacity var(--t-fast);
}
.pb-photo:hover .pb-photo__overlay { opacity: 1; }
.pb-photo__dl {
padding: 8px 18px;
background: #fff; color: #1d1d1f;
border: none; border-radius: var(--r-pill);
font: 700 12px Inter, system-ui, sans-serif;
cursor: pointer;
transition: transform var(--t-fast);
}
.pb-photo__dl:hover { transform: scale(1.06); }
.pb-photo__dl:disabled { opacity: 0.5; cursor: default; }
.pb-photo__author {
font-size: 10px; color: rgba(255,255,255,0.9);
text-align: center; line-height: 1.3; padding: 0 6px;
}
.pb-photo__used {
position: absolute; bottom: 6px; left: 6px; right: 6px;
padding: 4px 8px; border-radius: 6px;
font: 700 10px Inter, system-ui, sans-serif;
color: #fff; background: rgba(255,107,71,0.9);
text-align: center; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
pointer-events: none; z-index: 1;
}
.pb-photo.added::after {
content: ''; position: absolute; inset: 0;
border: 3px solid #34C759; border-radius: 12px;
pointer-events: none;
}
.pb-photo.added .pb-photo__dl { background: #34C759; color: #fff; }
/* Скелетоны */
.pb-skeleton {
border-radius: 12px; aspect-ratio: 1;
background: linear-gradient(90deg, #f0f0f0 25%, rgba(0,0,0,0.05) 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: pb-shimmer 1.2s infinite linear;
}
@keyframes pb-shimmer { to { background-position: -200% 0; } }
/* Empty-state */
.pb-empty {
flex: 1;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 14px;
color: var(--text-2); font-size: 14px;
min-height: 280px;
}
.pb-empty svg { opacity: 0.25; }
/* Нижняя лента загруженных */
.pb-downloads-bar {
border-top: 1px solid var(--border);
background: var(--surface);
flex-shrink: 0;
}
.pb-downloads-label {
padding: 8px 16px 0;
font: 700 11px Inter, system-ui, sans-serif;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-2);
}
.pb-downloads-strip {
display: flex; gap: 8px;
padding: 10px 16px 12px;
overflow-x: auto;
}
.pb-dl-thumb {
width: 58px; height: 58px;
border-radius: 8px; overflow: hidden; flex-shrink: 0;
border: 2px solid transparent; cursor: pointer; position: relative;
transition: transform var(--t-fast);
}
.pb-dl-thumb:hover { transform: scale(1.08); }
.pb-dl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-dl-thumb.unprocessed { border-color: #F59E0B; }
.pb-dl-thumb.unprocessed::after {
content: '✎';
position: absolute; top: 2px; right: 2px;
width: 16px; height: 16px;
background: #F59E0B; color: #fff;
font-size: 10px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
.pb-dl-thumb.processed { border-color: #34C759; }
.pb-dl-thumb.processed::after {
content: '✓';
position: absolute; top: 2px; right: 2px;
width: 16px; height: 16px;
background: #34C759; color: #fff;
font-size: 10px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
/* Редактор пост-обработки — full-screen overlay */
.pb-editor-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.95);
z-index: 10000; flex-direction: column;
}
.pb-editor-overlay.active { display: flex; }
.pb-editor-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 22px;
background: rgba(255,255,255,0.06);
color: #fff; flex-shrink: 0;
}
.pb-editor-title { font: 700 14px Inter, system-ui, sans-serif; }
.pb-editor-close {
width: 36px; height: 36px;
border-radius: 10px; border: none;
background: rgba(255,255,255,0.1); color: #fff;
font-size: 22px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
.pb-editor-close:hover { background: rgba(255,59,48,0.6); }
.pb-editor-step { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* Шаг 1: Cropper */
.pb-crop-area {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: 16px; overflow: hidden;
}
.pb-crop-area img { display: block; max-width: 100%; max-height: calc(100vh - 140px); }
/* Cropper.js: серый фон вместо чёрного */
.cropper-bg { background-image: none !important; background-color: #2a2a2a !important; }
.cropper-modal { background: rgba(0,0,0,0.4) !important; }
/* Шаг 2: Watermark — превью + sidebar */
#pbStep2 { flex-direction: row; }
.pb-preview-area {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: 16px; overflow: hidden;
}
.pb-preview-wrap {
position: relative; display: inline-block;
line-height: 0;
box-shadow: 0 4px 32px rgba(0,0,0,0.5);
border-radius: 6px; overflow: visible;
}
.pb-preview-wrap img.pb-preview-img {
display: block;
max-width: calc(100vw - 320px);
max-height: calc(100vh - 140px);
border-radius: 6px;
}
/* Направляющие */
.pb-guide { position: absolute; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.15s; }
.pb-guide.visible { opacity: 1; }
.pb-guide--h { left: 0; right: 0; height: 1px; border-top: 1px dashed rgba(255,107,71,0.8); }
.pb-guide--v { top: 0; bottom: 0; width: 1px; border-left: 1px dashed rgba(255,107,71,0.8); }
/* Перетаскиваемый watermark COVERpress */
.pb-logo-drag {
position: absolute; cursor: grab;
user-select: none; -webkit-user-select: none;
touch-action: none; z-index: 5;
display: inline-block;
line-height: 1;
}
.pb-logo-drag:active { cursor: grabbing; }
.pb-logo-text {
font: 600 0.18em Fredoka, sans-serif;
color: var(--accent);
white-space: nowrap;
letter-spacing: -0.02em;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
display: inline-block;
width: 100%;
text-align: center;
}
.pb-logo-text i {
font: italic 400 1em Inter, sans-serif;
color: var(--turquoise);
font-style: italic;
letter-spacing: -0.01em;
}
/* Sidebar редактора (правая колонка шага 2) */
.pb-editor-sidebar {
width: 280px;
background: var(--surface);
border-left: 1px solid var(--border);
display: flex; flex-direction: column;
padding: 22px; gap: 24px;
flex-shrink: 0; overflow-y: auto;
}
.pb-sidebar-label {
font: 700 12px Inter, system-ui, sans-serif;
color: var(--text); margin-bottom: 8px;
text-transform: uppercase; letter-spacing: 0.4px;
}
.pb-sidebar-section input[type="range"] { width: 100%; accent-color: var(--accent); }
/* Сетка позиционирования 3×3 */
.pb-pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pb-pos-grid button {
width: 100%; aspect-ratio: 1;
border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text-2);
font-size: 16px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast);
}
.pb-pos-grid button:hover {
background: var(--accent-tint); border-color: var(--accent); color: var(--accent);
}
/* Кнопки sidebar */
.pb-sidebar-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.pb-sidebar-btn {
height: 42px; border: none; border-radius: var(--r-input);
font: 600 13px Inter, system-ui, sans-serif;
cursor: pointer; width: 100%;
transition: background var(--t-fast);
}
.pb-sidebar-btn--back { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
.pb-sidebar-btn--back:hover { background: var(--border-soft); color: var(--text); }
.pb-sidebar-btn--save { background: var(--accent); color: #fff; }
.pb-sidebar-btn--save:hover { background: var(--accent-hover); }
.pb-sidebar-btn--save:disabled { opacity: 0.5; cursor: default; }
/* Кнопки редактора (шаг 1 — кроп) */
.pb-editor-actions {
padding: 12px 22px;
background: rgba(255,255,255,0.06);
display: flex; gap: 12px; justify-content: flex-end;
flex-shrink: 0;
}
.pb-editor-btn {
height: 40px; padding: 0 24px;
border: none; border-radius: var(--r-input);
font: 600 13px Inter, system-ui, sans-serif;
cursor: pointer;
transition: background var(--t-fast);
}
.pb-editor-btn--cancel { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); }
.pb-editor-btn--cancel:hover { background: rgba(255,255,255,0.2); }
.pb-editor-btn--save { background: var(--accent); color: #fff; }
.pb-editor-btn--save:hover { background: var(--accent-hover); }
.pb-editor-btn--save:disabled { opacity: 0.5; cursor: default; }
/* Модалка настроек */
.pb-settings-modal {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
z-index: 9500;
align-items: center; justify-content: center;
}
.pb-settings-modal.active { display: flex; }
.pb-settings-box {
background: var(--surface);
border-radius: var(--r-card);
padding: 28px; width: 440px; max-width: 90vw;
max-height: 90vh; overflow-y: auto;
}
.pb-settings-title {
font: 700 17px Inter, system-ui, sans-serif;
margin-bottom: 22px; color: var(--text);
}
.pb-settings-row {
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 18px;
}
.pb-settings-row label {
font: 600 12px Inter, system-ui, sans-serif;
color: var(--text-2);
display: flex; justify-content: space-between; align-items: center;
}
.pb-set-val { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 700; }
.pb-settings-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.pb-settings-row select,
.pb-settings-row input[type="number"] {
height: 38px; border: 1px solid var(--border); border-radius: var(--r-input);
padding: 0 12px; font-size: 13px;
background: var(--bg); color: var(--text);
font-family: inherit; outline: none;
}
.pb-settings-row input[type="number"]:focus,
.pb-settings-row select:focus { border-color: var(--accent); }
.pb-settings-actions {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: 22px;
}
.pb-set-reprocess {
margin-top: 22px; padding-top: 18px;
border-top: 1px dashed var(--border);
}
.pb-set-reprocess-btn {
width: 100%; height: 42px;
background: #F59E0B; color: #fff;
border: none; border-radius: var(--r-input);
font: 600 13px Inter, system-ui, sans-serif;
cursor: pointer;
transition: background var(--t-fast);
}
.pb-set-reprocess-btn:hover { background: #D97706; }
.pb-set-reprocess-btn:disabled { opacity: 0.5; cursor: default; }
.pb-set-reprocess-hint {
font-size: 11px; color: var(--text-2);
margin-top: 8px; line-height: 1.5;
text-align: center;
}
/* ============ SEO (1:1 BOTIX seo.php, 862 строки; адаптация COVERPRESS: 10 LoRA-стилей + 5 юр-документов вместо BOTIX демо-ботов; GA убран как 2026-05-21) ============ */
[data-section="seo"] { padding: 0; }
.seo-page-wrap { background: var(--bg); border-radius: var(--r-card-lg); border: 1px solid var(--border); overflow: hidden; }
.seo-header {
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
padding: 24px 28px 16px;
}
.seo-h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--text); }
.seo-subtitle { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.4; }
.seo-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.seo-icon-btn {
width: 38px; height: 38px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.seo-icon-btn:hover { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
.seo-flash {
margin: 0 28px 12px; padding: 10px 16px;
border-radius: 10px; font-size: 13px;
display: flex; align-items: center; gap: 8px;
}
.seo-flash.success { background: rgba(52,199,89,0.12); color: #1c7c2c; border: 1px solid rgba(52,199,89,0.2); }
.seo-flash.error { background: rgba(255,59,48,0.10); color: #c2261d; border: 1px solid rgba(255,59,48,0.2); }
.seo-flash svg { flex-shrink: 0; }
.seo-mode-tabs {
display: inline-flex; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px; padding: 3px;
}
.seo-mode-tab {
padding: 7px 16px; border: none; border-radius: 8px;
font: 500 13px Inter, system-ui, sans-serif; color: var(--text-2);
background: transparent; cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.seo-mode-tab:hover { color: var(--text); }
.seo-mode-tab.active { background: var(--accent); color: #fff; }
.seo-og-current-page {
display: flex; align-items: center; gap: 18px;
padding: 14px 18px; margin: 0 28px 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card);
}
.seo-og-back {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border: none; border-radius: 8px;
background: var(--bg); color: var(--text-2);
font-size: 13px; cursor: pointer;
transition: background var(--t-fast), color var(--t-fast);
}
.seo-og-back:hover { background: var(--accent-tint); color: var(--accent); }
.seo-og-current-title { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.seo-og-current-label { font: 700 10px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-2); }
.seo-og-current-name { font: 600 18px Inter, system-ui, sans-serif; color: var(--text); }
.seo-og-current-url { font: 12px 'SF Mono', Menlo, monospace; color: var(--text-2); }
.seo-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 0 28px 28px; align-items: start; }
.seo-layout.is-og-mode { grid-template-columns: 1fr; }
.seo-layout.is-og-mode .seopg-nav { display: none; }
/* Левая колонка — список SEO-страниц */
.seopg-nav {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 8px 0;
position: sticky; top: 16px;
max-height: calc(100vh - 64px); overflow-y: auto;
}
.seopg-nav-section { padding: 8px 0; }
.seopg-nav-section + .seopg-nav-section { border-top: 1px solid var(--border-soft); }
.seopg-nav-section-label {
padding: 8px 16px 6px;
font: 700 11px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-2);
}
.seopg-nav-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 9px 16px; border: none; background: none;
font: 14px Inter, system-ui, sans-serif; color: var(--text);
cursor: pointer; text-align: left; width: 100%;
transition: background var(--t-fast);
}
.seopg-nav-item:hover { background: rgba(0,0,0,0.025); }
.seopg-nav-item.active { background: var(--accent-tint); color: var(--accent); font-weight: 500; }
.seopg-nav-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seopg-nav-item .meta { font: 11px 'SF Mono', Menlo, monospace; color: var(--text-2); margin-left: 8px; white-space: nowrap; }
.seopg-nav-item.active .meta { color: var(--accent); opacity: 0.8; }
.seopg-nav-item .meta.noindex {
color: #FF3B30; opacity: 1;
font-weight: 700; font-family: Inter, system-ui, sans-serif;
padding: 1px 6px; border-radius: 4px; background: rgba(255,59,48,0.12);
}
.seo-content { display: flex; flex-direction: column; gap: 16px; }
.seo-content-empty {
padding: 48px; text-align: center; color: var(--text-2);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card);
}
.seo-settings-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); overflow: hidden;
}
/* Hero-карточка: название страницы + OG-превью 16:9 + кнопка редактирования */
.seo-hero-card { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.seo-hero-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.seo-page-name { font: 600 20px Inter, system-ui, sans-serif; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.seo-hero-og {
width: 100%; aspect-ratio: 16/9; border-radius: 12px;
background-size: cover; background-position: center;
background-color: var(--bg);
border: 1px solid var(--border);
position: relative;
display: flex; align-items: center; justify-content: center;
}
.seo-hero-og.empty { color: var(--text-2); font-size: 13px; }
.seo-hero-og-tag {
position: absolute; bottom: 10px; right: 10px;
background: rgba(255,255,255,0.9); color: var(--text-2);
padding: 3px 8px; border-radius: 5px; font: 700 10px Inter, system-ui, sans-serif;
letter-spacing: 0.3px;
}
.seo-og-edit {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px; border: none;
background: var(--accent-tint); color: var(--accent);
border-radius: 8px; font: 500 13px Inter, system-ui, sans-serif;
cursor: pointer; transition: background var(--t-fast);
}
.seo-og-edit:hover { background: var(--accent-tint-strong); }
/* SERP-превью (Яндекс/Google) */
.seo-serp-card { padding: 18px 22px; }
.seo-serp-label {
font: 700 10px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-2); margin-bottom: 12px;
}
.seo-serp-preview { background: var(--bg); border-radius: 10px; padding: 14px 18px; }
.seo-serp-title { color: #1a0dab; font: 17px Inter, system-ui, sans-serif; line-height: 1.25; }
.seo-serp-url { color: #006621; font: 12px 'SF Mono', Menlo, monospace; margin-top: 3px; }
.seo-serp-desc { color: #545454; font: 13px Inter, system-ui, sans-serif; line-height: 1.4; margin-top: 5px; }
/* Сетка цветных плашек-полей */
.seo-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.seo-field {
background: var(--accent-tint); border: 1px solid var(--accent-tint-strong);
border-radius: 10px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.seo-field.full { grid-column: 1 / -1; }
.seo-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seo-field-label {
font: 700 10px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--accent);
}
.seo-field-meta { font: 10px Inter, system-ui, sans-serif; color: var(--text-2); font-variant-numeric: tabular-nums; }
.seo-field-meta.warn { color: #F59E0B; }
.seo-field-meta.danger { color: #FF3B30; font-weight: 600; }
.seo-field-meta.ok { color: #34C759; font-weight: 600; }
.seo-field input.seo-field-input,
.seo-field textarea.seo-field-input {
width: 100%; padding: 6px 0; border: 0;
background: transparent; font-family: inherit;
font-size: 14px; color: var(--text); resize: vertical;
outline: none;
}
.seo-field input.seo-field-input:focus,
.seo-field textarea.seo-field-input:focus {
border-bottom: 1.5px solid var(--accent);
}
.seo-field textarea.seo-field-input { min-height: 48px; line-height: 1.4; }
.seo-field-hint {
font-size: 11px; color: var(--text-2);
margin-top: 4px; line-height: 1.4;
}
.seo-field-readonly { font-size: 14px; color: var(--text); }
.seo-field-readonly.empty { color: var(--text-2); font-style: italic; }
.seo-pill-list { display: flex; flex-wrap: wrap; gap: 5px; }
.seo-pill {
display: inline-block; padding: 2px 9px; border-radius: 999px;
background: rgba(52,199,89,0.12); color: #1c7c2c;
font: 500 11px Inter, system-ui, sans-serif;
}
/* Тумблер видимости в поиске (meta robots) */
.seo-robots-row { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.seo-robots-toggle { position: relative; display: inline-block; width: 52px; height: 32px; flex-shrink: 0; cursor: pointer; }
.seo-robots-toggle input { opacity: 0; width: 0; height: 0; }
.seo-robots-slider {
position: absolute; inset: 0;
background: #34C759; border-radius: 999px;
transition: background var(--t-mid);
}
.seo-robots-slider::before {
content: ""; position: absolute;
top: 2px; left: 2px; width: 28px; height: 28px;
background: #fff; border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
transition: transform var(--t-mid);
}
.seo-robots-toggle input:checked + .seo-robots-slider { background: #FF3B30; }
.seo-robots-toggle input:checked + .seo-robots-slider::before { transform: translateX(20px); }
.seo-robots-info { flex: 1; min-width: 0; }
.seo-robots-info-title { font: 600 13px Inter, system-ui, sans-serif; color: var(--text); margin-bottom: 4px; }
.seo-robots-info-desc { font-size: 11px; color: var(--text-2); line-height: 1.5; }
.seo-robots-info-desc code {
background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px;
font: 10px 'SF Mono', Menlo, monospace;
}
/* Save bar — sticky */
.seo-save-bar {
position: sticky; bottom: 16px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
margin-top: 4px; z-index: 10;
gap: 12px;
}
.seo-save-bar .seo-hint { font-size: 12px; color: var(--text-2); flex: 1; }
.seo-save-bar .seo-changed { color: #F59E0B; font-weight: 600; }
.seo-save-bar .seo-saved { color: #34C759; font-weight: 600; }
/* OG-режим — простая загрузка/автогенерация (og-cards.php не скопирован) */
.seo-og-editor { padding: 24px; }
.seo-og-editor-head { margin-bottom: 18px; }
.seo-og-editor-h2 { font: 600 17px Inter, system-ui, sans-serif; margin: 0 0 6px; color: var(--text); }
.seo-og-editor-hint { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.seo-og-editor-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.seo-og-editor-preview-wrap {
display: flex; flex-direction: column; gap: 8px;
}
.seo-og-editor-preview {
width: 100%; aspect-ratio: 16/9; border-radius: 12px;
background-size: cover; background-position: center;
background-color: var(--bg);
border: 1px solid var(--border);
position: relative;
}
.seo-og-editor-preview-label {
font: 10px 'SF Mono', Menlo, monospace; color: var(--text-2);
text-align: center; letter-spacing: 0.3px;
}
.seo-og-editor-form { display: flex; flex-direction: column; gap: 14px; }
.seo-og-form-row { display: flex; flex-direction: column; gap: 6px; }
.seo-og-form-row label { font: 600 12px Inter, system-ui, sans-serif; color: var(--text-2); }
.seo-og-form-row input,
.seo-og-form-row textarea {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--bg); color: var(--text);
font-family: inherit; font-size: 13px;
outline: none;
}
.seo-og-form-row input:focus,
.seo-og-form-row textarea:focus { border-color: var(--accent); background: var(--surface); }
.seo-og-form-row .seo-og-form-hint { font-size: 11px; color: var(--text-2); line-height: 1.4; }
.seo-og-form-actions { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.seo-og-autogen-btn {
padding: 9px 16px; border: 1px solid var(--accent); border-radius: var(--r-input);
background: var(--accent-tint); color: var(--accent);
font: 600 13px Inter, system-ui, sans-serif; cursor: pointer;
transition: background var(--t-fast);
}
.seo-og-autogen-btn:hover { background: var(--accent-tint-strong); }
.seo-og-info {
margin-top: 12px; padding: 12px 16px;
background: rgba(0,122,255,0.06); border: 1px solid rgba(0,122,255,0.15);
border-radius: 10px;
font-size: 12px; color: var(--text-2); line-height: 1.5;
}
.seo-og-info b { color: var(--text); }
/* Модалка SEO «Аналитика и верификация» */
.seo-modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.4);
align-items: center; justify-content: center; z-index: 9500;
}
.seo-modal-overlay.active { display: flex; }
.seo-modal-box {
width: 480px; max-width: 92vw;
background: var(--bg); border-radius: var(--r-card);
overflow: hidden; max-height: 90vh; display: flex; flex-direction: column;
}
.seo-modal-head {
background: var(--surface); padding: 16px 20px;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--border);
}
.seo-modal-head h3 { font: 600 16px Inter, system-ui, sans-serif; margin: 0; flex: 1; }
.seo-modal-close {
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--text-2);
padding: 4px 10px; border-radius: 6px;
transition: background var(--t-fast), color var(--t-fast);
}
.seo-modal-close:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.seo-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.seo-modal-label { font: 700 11px Inter, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-2); padding: 0 6px 6px; }
.seo-modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.seo-modal-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.seo-modal-row + .seo-modal-row { border-top: 1px solid var(--border-soft); }
.seo-modal-row label { font-size: 12px; color: var(--text-2); }
.seo-modal-row input,
.seo-modal-row textarea {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border); border-radius: 8px;
background: var(--bg); color: var(--text);
font: 14px Inter, system-ui, sans-serif; font-family: inherit;
outline: none;
}
.seo-modal-row input:focus,
.seo-modal-row textarea:focus { border-color: var(--accent); background: var(--surface); }
.seo-modal-row .seo-modal-hint { font-size: 11px; color: var(--text-2); line-height: 1.5; margin-top: 2px; }
.seo-modal-row .seo-modal-hint a { color: var(--accent); }
.seo-modal-row .seo-modal-hint code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; font: 10px 'SF Mono', Menlo, monospace; }
.seo-modal-actions {
display: flex; gap: 10px; justify-content: flex-end;
padding: 6px 6px 0;
}
@media (max-width: 900px) {
.seo-layout { grid-template-columns: 1fr; }
.seopg-nav { position: static; max-height: none; }
.seo-fields-grid { grid-template-columns: 1fr; }
.seo-og-editor-grid { grid-template-columns: 1fr; }
}
/* ============ Бренд (1:1 BOTIX brand.php брендбук-часть; UI-компоненты вынесены в Раздел 29 Дизайн-система; адаптация: PNG-логотип BOTIX → HTML-логотип COVERpress + экспорт SVG/фавиконов) ============ */
[data-section="brand"] { padding: 0; }
.brand-page-wrap { background: var(--bg); border-radius: var(--r-card-lg); border: 1px solid var(--border); overflow: hidden; padding: 28px; }
.brand-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.brand-h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text); }
.brand-subtitle { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.5; max-width: 720px; }
.brand-subtitle a { color: var(--accent); }
.brand-subtitle code { font: 12px 'SF Mono', Menlo, monospace; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; }
.brand-actions { flex-shrink: 0; }
/* Tabs */
.brand-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.brand-nav-btn {
padding: 8px 16px; font: 500 13px Inter, system-ui, sans-serif;
border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--surface); color: var(--text);
cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
}
.brand-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.brand-nav-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Section карточка */
.brand-section { display: flex; flex-direction: column; gap: 18px; }
.brand-section-title {
font: 700 18px Inter, system-ui, sans-serif;
padding-bottom: 10px; margin: 0 0 4px;
border-bottom: 1px solid var(--border-soft);
color: var(--text);
}
.brand-section-desc { font-size: 13px; color: var(--text-2); margin: 0 0 8px; line-height: 1.5; }
.brand-subsection {
font: 600 14px Inter, system-ui, sans-serif;
color: var(--text); margin: 12px 0 8px;
}
.brand-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 22px;
}
/* Логотип — две большие preview-плитки */
.brand-logo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.brand-logo-box {
border: 1px solid var(--border); border-radius: var(--r-card);
padding: 40px; min-height: 160px;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.brand-logo-box-dark { background: #1d1d1f; border-color: #333; }
.brand-logo-box-label {
position: absolute; top: 10px; left: 14px;
font: 600 11px Inter, system-ui, sans-serif;
color: var(--text-2);
text-transform: uppercase; letter-spacing: 0.4px;
}
.brand-logo-box-dark .brand-logo-box-label { color: rgba(255,255,255,0.5); }
/* HTML-логотип COVERpress (двухцветный) — внутри плитки */
.brand-logo-display {
display: inline-flex; align-items: baseline; gap: 2px;
font-size: 56px; line-height: 1;
}
.brand-logo-cover {
font-family: 'Fredoka', 'Inter', sans-serif;
font-weight: 700;
font-variation-settings: 'wdth' 110;
letter-spacing: -0.01em;
color: #FF6B47;
}
.brand-logo-press {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-style: italic;
letter-spacing: -0.01em;
color: #1FB6C3;
transform: translateY(2px);
}
.brand-logo-box-dark .brand-logo-cover { color: #FF8869; }
.brand-logo-box-dark .brand-logo-press { color: #2BD4E2; }
/* Размеры использования (несколько лого разных размеров) */
.brand-sizes-row {
display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap;
padding: 22px; background: var(--bg); border-radius: var(--r-card);
}
.brand-size-item { text-align: center; }
.brand-size-meta {
font: 11px Inter, system-ui, sans-serif;
color: var(--text-2);
margin-top: 8px; display: inline-block;
}
/* Правила */
.brand-rules-list { font-size: 13px; line-height: 1.9; margin: 0; padding-left: 20px; color: var(--text); }
.brand-rules-list li { margin-bottom: 4px; }
.brand-rules-list li strong { color: var(--accent); }
.brand-rules-list code { font: 12px 'SF Mono', Menlo, monospace; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; }
/* Палитра цветов */
.brand-color-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.brand-color-swatch {
border-radius: var(--r-card); overflow: hidden;
border: 1px solid var(--border);
cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.brand-color-swatch:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.brand-color-swatch-fill {
height: 80px; position: relative;
display: flex; align-items: flex-end; justify-content: flex-start;
padding: 8px 10px;
}
.brand-color-swatch-fill.with-border { border-bottom: 1px solid var(--border); }
.brand-color-swatch-var {
font: 10px 'SF Mono', Menlo, monospace;
background: rgba(255,255,255,0.85); color: var(--text);
padding: 2px 6px; border-radius: 4px;
}
.brand-color-swatch-fill.dark-text .brand-color-swatch-var { background: rgba(255,255,255,0.95); }
.brand-color-swatch-fill.light-text .brand-color-swatch-var { background: rgba(0,0,0,0.7); color: #fff; }
.brand-color-swatch-info { padding: 10px 12px; }
.brand-color-swatch-name { font: 600 13px Inter, system-ui, sans-serif; color: var(--text); margin-bottom: 2px; }
.brand-color-swatch-hex {
font: 12px 'SF Mono', Menlo, monospace;
color: var(--text-2);
margin-bottom: 4px;
}
.brand-color-swatch-note { font: 11px Inter, system-ui, sans-serif; color: var(--text-2); line-height: 1.4; }
/* 10 LoRA-стилей в палитре */
.brand-styles-palette {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
}
.brand-style-dot {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface);
}
.brand-style-dot-circle { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.brand-style-dot-name { font: 500 12px Inter, system-ui, sans-serif; color: var(--text); line-height: 1.3; }
/* Типографика */
.brand-typo-table { width: 100%; border-collapse: collapse; }
.brand-typo-row {
display: grid; grid-template-columns: 1fr 240px;
align-items: baseline; gap: 20px;
padding: 14px 0;
border-bottom: 1px solid var(--border-soft);
}
.brand-typo-row:last-child { border: none; }
.brand-typo-sample { min-width: 0; color: var(--text); }
.brand-typo-meta { font: 11px 'SF Mono', Menlo, monospace; color: var(--text-2); text-align: right; }
/* Шрифтовой стек */
.brand-fonts-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.brand-font-card {
padding: 18px; border: 1px solid var(--border); border-radius: var(--r-card);
background: var(--surface);
}
.brand-font-sample { font-size: 28px; line-height: 1.1; margin-bottom: 10px; color: var(--text); }
.brand-font-name { font: 600 13px Inter, system-ui, sans-serif; margin-bottom: 4px; color: var(--text); }
.brand-font-meta { font: 11px 'SF Mono', Menlo, monospace; color: var(--text-2); margin-bottom: 2px; }
.brand-font-license { font: 10px Inter, system-ui, sans-serif; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 8px; }
.brand-font-license a { color: var(--accent); }
/* Модалка экспорта */
.brand-modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.4);
align-items: center; justify-content: center; z-index: 9500;
}
.brand-modal-overlay.active { display: flex; }
.brand-modal-box {
width: 560px; max-width: 92vw;
background: var(--bg); border-radius: var(--r-card);
overflow: hidden; max-height: 90vh; display: flex; flex-direction: column;
}
.brand-modal-head {
background: var(--surface); padding: 16px 22px;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--border);
}
.brand-modal-head h3 { font: 600 16px Inter, system-ui, sans-serif; margin: 0; flex: 1; }
.brand-modal-close {
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--text-2);
padding: 4px 10px; border-radius: 6px;
transition: background var(--t-fast), color var(--t-fast);
}
.brand-modal-close:hover { background: rgba(0,0,0,0.05); color: var(--text); }
.brand-modal-body { padding: 20px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.brand-modal-hint { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.brand-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brand-export-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 16px;
display: flex; flex-direction: column; gap: 10px;
}
.brand-export-card-label {
font: 700 11px Inter, system-ui, sans-serif;
text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-2);
}
.brand-export-preview {
height: 110px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.brand-export-preview--light { background: #fff; border: 1px solid var(--border); }
.brand-export-preview--dark { background: #1d1d1f; }
.brand-export-preview .brand-logo-display { font-size: 32px; }
.brand-export-other { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.brand-export-asset {
display: flex; flex-direction: column; gap: 2px;
padding: 12px 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-input);
cursor: pointer; text-align: left;
transition: background var(--t-fast), border-color var(--t-fast);
}
.brand-export-asset:hover { background: var(--accent-tint); border-color: var(--accent); }
.brand-export-asset-name { font: 600 13px Inter, system-ui, sans-serif; color: var(--text); }
.brand-export-asset-meta { font: 11px Inter, system-ui, sans-serif; color: var(--text-2); }
.brand-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 900px) {
.brand-logo-row { grid-template-columns: 1fr; }
.brand-typo-row { grid-template-columns: 1fr; }
.brand-typo-meta { text-align: left; }
.brand-export-grid { grid-template-columns: 1fr; }
.brand-export-other { grid-template-columns: 1fr; }
}
/* ============ Дизайн-система (UI-компоненты, перенесены из UI-части BOTIX brand.php: 8 секций. BOTIX design-system.php сам — заглушка 41 строка) ============ */
[data-section="design-system"] { padding: 0; }
.ds-page-wrap { background: var(--bg); border-radius: var(--r-card-lg); border: 1px solid var(--border); padding: 28px; }
.ds-header { margin-bottom: 22px; }
.ds-h1 { font: 700 26px Inter, system-ui, sans-serif; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text); }
.ds-subtitle { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.5; max-width: 760px; }
.ds-subtitle a { color: var(--accent); }
/* Anchor-навигация (фиксированная сверху при скролле) */
.ds-nav {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 28px;
padding: 12px 0; border-bottom: 1px solid var(--border-soft);
position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.ds-nav-btn {
padding: 7px 14px; font: 500 13px Inter, system-ui, sans-serif;
border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--surface); color: var(--text);
cursor: pointer; transition: all var(--t-fast); white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
text-decoration: none;
}
.ds-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.ds-nav-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Секция */
.ds-section { margin-bottom: 44px; scroll-margin-top: 80px; }
.ds-section-title {
font: 700 18px Inter, system-ui, sans-serif;
padding-bottom: 10px; margin: 0 0 12px;
border-bottom: 1px solid var(--border-soft);
color: var(--text);
}
.ds-section-desc { font-size: 13px; color: var(--text-2); margin: 0 0 16px; line-height: 1.5; }
.ds-subsection { font: 600 14px Inter, system-ui, sans-serif; color: var(--text); margin: 18px 0 10px; }
.ds-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 22px;
margin-bottom: 14px;
}
/* Демо-ряд (горизонтальный список компонентов) */
.ds-demo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
/* Параметры / код */
.ds-params {
background: var(--bg); border: 1px solid var(--border);
border-radius: 8px; padding: 14px 18px;
font: 12px 'SF Mono', Menlo, monospace;
white-space: pre; overflow-x: auto;
line-height: 1.7; color: var(--text);
}
/* ===== 1. Кнопки ===== */
.ds-btn { font-family: inherit; cursor: pointer; transition: background var(--t-fast); }
.ds-btn-primary {
padding: 9px 22px; font: 600 14px Inter, system-ui, sans-serif;
background: var(--accent); color: #fff;
border: none; border-radius: var(--r-input);
}
.ds-btn-primary:hover { background: var(--accent-hover); }
.ds-btn-secondary {
padding: 9px 18px; font: 500 13px Inter, system-ui, sans-serif;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-input);
}
.ds-btn-secondary:hover { background: var(--bg); border-color: var(--text-2); }
.ds-btn-danger {
padding: 7px 14px; font: 500 12px Inter, system-ui, sans-serif;
background: rgba(255,59,48,0.12); color: #DC2626;
border: none; border-radius: var(--r-input);
}
.ds-btn-danger:hover { background: rgba(255,59,48,0.2); }
.ds-btn-compact {
padding: 6px 14px; font: 500 13px Inter, system-ui, sans-serif;
background: var(--accent); color: #fff;
border: none; border-radius: var(--r-input);
}
.ds-btn-compact:hover { background: var(--accent-hover); }
.ds-btn-toolbar {
padding: 7px 14px; font: 500 13px Inter, system-ui, sans-serif;
border: none; border-radius: var(--r-input);
display: inline-flex; align-items: center; gap: 6px;
}
.ds-btn-toolbar--back { background: var(--bg); color: var(--text); }
.ds-btn-toolbar--back:hover { background: var(--border-soft); }
.ds-btn-toolbar--edit { background: var(--accent-tint); color: var(--accent); }
.ds-btn-toolbar--edit:hover { background: var(--accent-tint-strong); }
.ds-btn-toolbar--delete { background: rgba(255,59,48,0.12); color: #DC2626; }
.ds-btn-toolbar--delete:hover { background: rgba(255,59,48,0.2); }
.ds-pill-group {
display: inline-flex; border-radius: var(--r-input); overflow: hidden;
border: 1px solid var(--border); background: var(--surface);
}
.ds-pill-group button {
padding: 7px 16px; font: 500 13px Inter, system-ui, sans-serif;
border: none; background: var(--surface); color: var(--text);
cursor: pointer; border-right: 1px solid var(--border);
transition: background var(--t-fast);
}
.ds-pill-group button:last-child { border-right: none; }
.ds-pill-group button:hover { background: var(--bg); }
.ds-pill-group button.active { background: var(--accent); color: #fff; }
/* ===== 2. Бейджи ===== */
.ds-badge {
display: inline-block;
padding: 3px 10px; border-radius: 12px;
font: 500 12px Inter, system-ui, sans-serif;
white-space: nowrap;
}
/* Статусы заказов COVERPRESS (по cp_orders.status: created/paid/generating/delivered/failed/refunded) */
.ds-badge--created { background: #F3F4F6; color: #6B7280; }
.ds-badge--paid { background: #DBEAFE; color: #1D4ED8; }
.ds-badge--generating { background: #FEF3C7; color: #D97706; }
.ds-badge--delivered { background: #D1FAE5; color: #047857; }
.ds-badge--failed { background: #FEE2E2; color: #DC2626; }
.ds-badge--refunded { background: #EDE9FE; color: #6D28D9; }
/* Функциональные бейджи (тарифы/каналы доставки COVERPRESS) */
.ds-badge-func {
display: inline-block;
padding: 2px 8px; border-radius: 10px;
font: 500 10px Inter, system-ui, sans-serif;
}
.ds-badge-func--express { background: rgba(220,38,38,0.10); color: #DC2626; }
.ds-badge-func--standard { background: rgba(0,122,255,0.10); color: #0066CC; }
.ds-badge-func--refund { background: rgba(245,158,11,0.10); color: #D97706; }
.ds-badge-func--telegram { background: rgba(59,130,246,0.10); color: #3B82F6; }
.ds-badge-func--vk { background: rgba(70,130,180,0.10); color: #4A90D9; }
.ds-badge-func--max { background: rgba(244,114,182,0.10); color: #DB2777; }
.ds-badge-func--sms { background: rgba(52,199,89,0.10); color: #047857; }
/* Статусы лидов (по cp_leads.status: new/contacted/converted/rejected) */
.ds-lead-status {
display: inline-block;
padding: 7px 16px; border-radius: 10px;
font: 500 12px Inter, system-ui, sans-serif;
}
.ds-lead-status--new { background: #FFF7ED; color: #C2410C; }
.ds-lead-status--contacted { background: #EFF6FF; color: #1D4ED8; }
.ds-lead-status--converted { background: #ECFDF5; color: #047857; }
.ds-lead-status--rejected { background: #FEF2F2; color: #DC2626; }
/* ===== 3. Таблицы ===== */
.ds-table-wrap { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
.ds-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.ds-table th {
padding: 10px 14px;
font: 600 11px Inter, system-ui, sans-serif;
text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-2);
border-bottom: 1px solid rgba(60,60,67,0.08);
text-align: left;
}
.ds-table th.right { text-align: right; }
.ds-table th.center { text-align: center; }
.ds-table td {
padding: 12px 14px;
font: 13px Inter, system-ui, sans-serif;
border-bottom: 1px solid rgba(60,60,67,0.06);
color: var(--text);
}
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table td.right { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ds-table td.center { text-align: center; }
.ds-table td.muted { color: var(--text-2); }
.ds-table td.success { color: #34C759; }
.ds-table .style-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
/* ===== 4. KPI-плитки ===== */
.ds-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ds-kpi {
background: var(--surface); border-radius: 14px;
padding: 18px 16px; text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.ds-kpi-label {
font: 600 11px Inter, system-ui, sans-serif;
text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-2);
min-height: 28px;
margin-bottom: 4px;
}
.ds-kpi-value {
font: 700 28px Inter, system-ui, sans-serif;
font-variant-numeric: tabular-nums;
color: var(--text);
margin-bottom: 4px;
}
.ds-kpi-value--success { color: #34C759; }
.ds-kpi-hint { font: 10px Inter, system-ui, sans-serif; color: var(--text-2); }
/* ===== 5. Модалки ===== */
.ds-modal-demo-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.ds-modal-demo {
width: 220px; border-radius: 14px; overflow: hidden;
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
position: relative;
}
.ds-modal-demo--colored {
padding: 18px 22px 18px 56px; min-height: 130px;
color: #fff; position: relative;
}
.ds-modal-demo--colored::before {
content: ''; position: absolute; top: 20px; left: 20px;
width: 22px; height: 22px;
border-radius: 50%; background: rgba(255,255,255,0.25);
border: 2px solid rgba(255,255,255,0.5);
}
.ds-modal-demo--colored.delivered { background: #6BBF8A; }
.ds-modal-demo--colored.paid { background: #93C5FD; }
.ds-modal-demo--colored.failed { background: #F87171; }
.ds-modal-demo-title { font: 600 14px Inter, system-ui, sans-serif; color: #fff; margin-bottom: 8px; }
.ds-modal-demo-amount { font: 700 22px Inter, system-ui, sans-serif; letter-spacing: -0.5px; color: #fff; }
.ds-modal-demo-meta { font: 12px Inter, system-ui, sans-serif; color: rgba(255,255,255,0.75); margin-top: 4px; }
.ds-modal-demo--white { background: var(--surface); }
.ds-modal-demo--white-head {
padding: 14px 18px;
}
.ds-modal-demo--white-head.new { background: #EFF6FF; }
.ds-modal-demo--white-head.contacted { background: #FFFBEB; }
.ds-modal-demo--white-head.converted { background: #ECFDF5; }
.ds-modal-demo--white-head .name { font: 600 14px Inter, system-ui, sans-serif; color: var(--text); }
.ds-modal-demo--white-head .stage { font: 12px Inter, system-ui, sans-serif; }
.ds-modal-demo--white-head.new .stage { color: #1D4ED8; }
.ds-modal-demo--white-head.contacted .stage { color: #D97706; }
.ds-modal-demo--white-head.converted .stage { color: #047857; }
.ds-modal-demo--white-body { padding: 14px 18px; }
.ds-modal-demo--white-body .meta { font: 12px Inter, system-ui, sans-serif; color: var(--text-2); }
.ds-modal-demo--white-body .amount { font: 600 13px Inter, system-ui, sans-serif; margin-top: 4px; color: var(--text); }
/* ===== 6. Формы ===== */
.ds-form-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 540px;
}
.ds-form-field { display: flex; flex-direction: column; gap: 5px; }
.ds-form-field.full { grid-column: 1 / -1; }
.ds-form-label {
font: 500 12px Inter, system-ui, sans-serif;
color: var(--text-2);
}
.ds-form-input,
.ds-form-textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
font: 14px Inter, system-ui, sans-serif; font-family: inherit;
outline: none; box-sizing: border-box;
transition: border-color var(--t-fast);
}
.ds-form-input:focus,
.ds-form-textarea:focus { border-color: var(--accent); }
.ds-form-textarea { resize: vertical; min-height: 60px; }
.ds-form-checks { display: flex; gap: 18px; align-items: center; margin-top: 14px; }
.ds-form-check {
font: 13px Inter, system-ui, sans-serif;
display: flex; align-items: center; gap: 6px;
cursor: pointer;
}
.ds-form-check input { width: 16px; height: 16px; accent-color: var(--accent); }
/* ===== 7. Dropdowns ===== */
.ds-dropdown-wrap { position: relative; display: inline-block; }
.ds-dropdown-btn {
padding: 8px 16px; font: 500 13px Inter, system-ui, sans-serif;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--r-input);
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
}
.ds-dropdown-btn:hover { border-color: var(--accent); color: var(--accent); }
.ds-dropdown-menu {
position: absolute; top: 100%; left: 0; margin-top: 6px;
background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
z-index: 50; min-width: 200px; overflow: hidden;
}
.ds-dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px;
font: 13px Inter, system-ui, sans-serif; color: var(--text);
cursor: pointer;
border-top: 1px solid var(--border-soft);
transition: background var(--t-fast);
}
.ds-dropdown-item:first-child { border-top: none; }
.ds-dropdown-item:hover { background: var(--accent-tint); color: var(--accent); }
.ds-dropdown-item.active { background: var(--accent-tint-strong); color: var(--accent); }
.ds-dropdown-item .style-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ===== 8. Иконки ===== */
.ds-icons-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.ds-icon-item {
display: flex; flex-direction: column; align-items: center;
width: 76px; text-align: center;
}
.ds-icon-box {
width: 48px; height: 48px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface);
display: flex; align-items: center; justify-content: center;
margin-bottom: 6px;
color: var(--text);
transition: border-color var(--t-fast), color var(--t-fast);
}
.ds-icon-item:hover .ds-icon-box { border-color: var(--accent); color: var(--accent); }
.ds-icon-name { font: 10px 'SF Mono', Menlo, monospace; color: var(--text-2); }
/* Общие правила */
.ds-rules-list {
font: 13px Inter, system-ui, sans-serif;
line-height: 1.9; margin: 0; padding-left: 22px;
color: var(--text);
}
.ds-rules-list li { margin-bottom: 4px; }
.ds-rules-list li strong { color: var(--accent); }
.ds-rules-list code {
font: 11px 'SF Mono', Menlo, monospace;
background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px;
}
@media (max-width: 900px) {
.ds-kpi-grid { grid-template-columns: 1fr; }
.ds-form-grid { grid-template-columns: 1fr; }
.ds-modal-demo { width: 100%; }
}
/* ============ Мобильное меню (1:1 BOTIX mobile-menu.php, 1652 строки; адаптация: 4 роли → 3 (убран client из-за no-account-architecture); палитра superadmin → коралл) ============ */
[data-section="mobile-menu"] { padding: 0; }
.mm-container { background: var(--bg); border-radius: var(--r-card-lg); border: 1px solid var(--border); padding: 24px; max-width: 1400px; }
.mm-header { margin-bottom: 22px; }
.mm-h1 {
font: 700 26px Inter, system-ui, sans-serif; letter-spacing: -0.02em;
margin: 0 0 6px; color: var(--text);
display: flex; align-items: center; gap: 10px;
}
.mm-h1 svg { color: var(--accent); }
.mm-subtitle { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.5; max-width: 800px; }
.mm-subtitle code { font: 11px 'SF Mono', Menlo, monospace; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; }
/* Appearance block */
.mm-appearance {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); margin-bottom: 22px; overflow: hidden;
}
.mm-appearance-header {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 20px;
background: var(--bg); border-bottom: 1px solid var(--border);
}
.mm-appearance-title {
font: 600 15px Inter, system-ui, sans-serif; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.mm-appearance-body {
display: grid; grid-template-columns: 1fr 1fr;
gap: 18px; padding: 20px;
}
.mm-appear-group {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 16px;
}
.mm-appear-label {
font: 600 13px Inter, system-ui, sans-serif; color: var(--text);
margin-bottom: 12px;
}
.mm-appear-fields { display: flex; flex-direction: column; gap: 10px; }
.mm-appear-field {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mm-appear-field label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.mm-appear-input-wrap { display: flex; align-items: center; gap: 6px; }
.mm-appear-input-wrap input {
width: 72px; padding: 7px 10px;
border: 1px solid var(--border); border-radius: 8px;
font-size: 14px; text-align: center;
background: var(--surface); color: var(--text); outline: none;
}
.mm-appear-input-wrap input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-tint);
}
.mm-appear-input-wrap span { font-size: 12px; color: var(--text-3); }
/* Roles grid */
.mm-roles-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px; margin-bottom: 26px;
}
.mm-role-card {
background: var(--role-bg); border: 2px solid var(--role-color);
border-radius: var(--r-card); padding: 16px;
}
.mm-role-header { margin-bottom: 12px; }
.mm-role-badge {
display: inline-block; background: var(--role-color); color: #fff;
padding: 4px 12px; border-radius: var(--r-pill);
font: 600 13px Inter, system-ui, sans-serif;
}
.mm-role-buttons { display: flex; flex-direction: column; gap: 6px; }
.mm-role-btn {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-input);
font: 14px Inter, system-ui, sans-serif; color: var(--text);
cursor: pointer; transition: all var(--t-fast);
}
.mm-role-btn:hover { border-color: var(--role-color); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.mm-role-btn.active {
background: var(--role-color); color: #fff; border-color: var(--role-color);
}
.mm-role-count {
background: rgba(0,0,0,0.08); padding: 2px 10px;
border-radius: var(--r-pill);
font: 600 12px Inter, system-ui, sans-serif;
}
.mm-role-btn.active .mm-role-count {
background: rgba(255,255,255,0.3); color: #fff;
}
/* Editor */
.mm-editor {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); overflow: hidden;
margin-bottom: 22px;
}
.mm-editor-header {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 20px;
background: var(--bg); border-bottom: 1px solid var(--border);
}
.mm-editor-title {
font: 14px Inter, system-ui, sans-serif; color: var(--text-2);
display: flex; align-items: center; gap: 8px;
}
.mm-editor-title strong { color: var(--text); font-weight: 600; }
/* Devices preview */
.mm-devices-preview {
display: flex; flex-wrap: wrap; gap: 20px;
padding: 24px; justify-content: center;
background: linear-gradient(135deg, #1d1d1f 0%, #333 100%);
}
.mm-device-block { display: flex; flex-direction: column; align-items: center; }
.mm-device-header {
display: flex; align-items: center; gap: 8px;
margin-bottom: 12px;
color: #fff; font: 500 13px Inter, system-ui, sans-serif;
}
.mm-device-header svg { width: 16px; height: 16px; opacity: 0.8; }
.mm-device-counter {
background: rgba(255,255,255,0.18);
padding: 2px 10px; border-radius: var(--r-pill);
font: 600 12px Inter, system-ui, sans-serif;
margin-left: 4px;
font-variant-numeric: tabular-nums;
}
.mm-device-counter.overflow {
background: #FF3B30;
animation: mm-pulse-red 1s ease-in-out infinite;
}
@keyframes mm-pulse-red { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.mm-device-setting {
display: flex; align-items: center; gap: 6px;
margin-left: 12px; padding-left: 12px;
border-left: 1px solid rgba(255,255,255,0.2);
}
.mm-device-setting label { font-size: 11px; opacity: 0.7; }
.mm-device-setting input {
width: 52px; padding: 4px 6px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
background: rgba(255,255,255,0.1); color: #fff;
font-size: 12px; text-align: center; outline: none;
}
.mm-device-setting input:focus {
border-color: var(--accent); background: rgba(255,107,71,0.2);
}
.mm-device-frame {
background: #0a0a0a; border-radius: 22px; padding: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.mm-frame-phone { width: 280px; }
.mm-frame-phone-land { width: 420px; }
.mm-frame-tablet { width: 520px; }
.mm-device-screen {
background: var(--bg); border-radius: 14px; padding: 8px;
min-height: 60px;
display: flex; align-items: flex-end;
}
.mm-preview-bar {
display: flex; justify-content: space-around; width: 100%;
background: var(--surface); border-radius: 12px;
padding: 10px 6px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.mm-preview-item {
display: flex; flex-direction: column; align-items: center;
font: 9px Inter, system-ui, sans-serif; color: var(--text-2);
min-width: 0; flex: 1; text-align: center;
}
.mm-preview-item svg {
width: 18px; height: 18px; margin-bottom: 3px;
color: var(--text);
}
.mm-preview-item.active svg { color: var(--accent); }
.mm-preview-item.active { color: var(--accent); font-weight: 600; }
.mm-preview-item span {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%; padding: 0 2px;
}
/* Table */
.mm-table { padding: 0 20px 20px; }
.mm-table-head, .mm-row {
display: grid;
grid-template-columns: 32px 60px 1fr 1fr 110px 100px 100px 40px;
gap: 8px; padding: 12px 8px; align-items: center;
}
.mm-table-head {
font: 600 11px Inter, system-ui, sans-serif;
text-transform: uppercase; letter-spacing: 0.4px;
color: var(--text-2);
border-bottom: 2px solid var(--border);
}
.mm-table-body { min-height: 60px; }
.mm-row {
border-bottom: 1px solid var(--border-soft);
transition: background var(--t-fast);
}
.mm-row:hover { background: var(--bg); }
.mm-row.dragging { opacity: 0.4; background: var(--accent-tint); }
.mm-row.drop-indicator { border-top: 2px solid var(--accent); }
.mm-td-drag { cursor: grab; color: var(--text-3); display: flex; align-items: center; justify-content: center; }
.mm-td-drag:active { cursor: grabbing; }
.mm-icon-btn {
width: 44px; height: 44px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all var(--t-fast);
}
.mm-icon-btn:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.mm-input {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
font: 13px Inter, system-ui, sans-serif; outline: none;
box-sizing: border-box;
}
.mm-input:focus { border-color: var(--accent); }
.mm-select {
width: 100%; padding: 9px 8px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
font: 12px Inter, system-ui, sans-serif; outline: none;
}
.mm-select:focus { border-color: var(--accent); }
.mm-devices-check { display: flex; gap: 4px; }
.mm-dev-cb {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border: 1px solid var(--border); border-radius: 6px;
cursor: pointer; position: relative;
background: var(--surface);
transition: all var(--t-fast);
}
.mm-dev-cb input { position: absolute; opacity: 0; cursor: pointer; }
.mm-dev-cb svg { width: 14px; height: 14px; color: var(--text-3); transition: color var(--t-fast); }
.mm-dev-cb:has(input:checked) { background: var(--accent); border-color: var(--accent); }
.mm-dev-cb:has(input:checked) svg { color: #fff; }
.mm-dev-cb:hover { border-color: var(--accent); }
.mm-dev-cb.overflow {
background: rgba(255,59,48,0.1); border-color: #FF3B30;
}
.mm-dev-cb.overflow svg { color: #FF3B30; }
.mm-dev-cb.overflow:has(input:checked) {
background: #FF3B30; border-color: #FF3B30;
}
.mm-dev-cb.overflow:has(input:checked) svg { color: #fff; }
.mm-del-btn {
width: 32px; height: 32px;
border: none; background: none;
color: #FF3B30; cursor: pointer;
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
transition: background var(--t-fast);
}
.mm-del-btn:hover { background: rgba(255,59,48,0.12); }
.mm-editor-footer {
padding: 16px 20px;
border-top: 1px solid var(--border);
}
/* Empty state */
.mm-empty {
text-align: center; padding: 80px 20px;
color: var(--text-3);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card);
margin-bottom: 22px;
}
.mm-empty svg { width: 48px; height: 48px; margin: 0 auto 16px; display: block; }
/* Library */
.mm-library {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); overflow: hidden;
}
.mm-library-header {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 16px 20px;
background: var(--bg); border-bottom: 1px solid var(--border);
font: 600 15px Inter, system-ui, sans-serif; color: var(--text);
}
.mm-library-role-badge {
padding: 3px 12px; border-radius: var(--r-pill);
font: 600 12px Inter, system-ui, sans-serif; color: #fff;
}
.mm-library-hint {
font: 12px Inter, system-ui, sans-serif; font-weight: 400;
color: var(--text-3); margin-left: auto;
}
.mm-library-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px; padding: 18px;
}
.mm-lib-item {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 12px 8px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-input);
cursor: pointer; text-align: center;
transition: all var(--t-fast);
}
.mm-lib-item:hover { border-color: var(--accent); background: var(--accent-tint); }
.mm-lib-item.added { border-color: #34C759; background: rgba(52,199,89,0.08); }
.mm-lib-item.added::after {
content: '✓'; position: absolute;
/* placeholder — позиционируется выше через transform на родителе */
}
.mm-lib-item svg { width: 22px; height: 22px; color: var(--text); }
.mm-lib-item.added svg { color: #1c7c2c; }
.mm-lib-name { font: 500 12px Inter, system-ui, sans-serif; color: var(--text); }
.mm-lib-item.added .mm-lib-name { color: #1c7c2c; }
/* Icon picker modal */
.mm-icon-modal-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
align-items: center; justify-content: center; z-index: 9500;
}
.mm-icon-modal-overlay.active { display: flex; }
.mm-icon-modal-box {
width: 720px; max-width: 92vw;
background: var(--bg); border-radius: var(--r-card);
overflow: hidden; max-height: 80vh; display: flex; flex-direction: column;
}
.mm-icon-modal-head {
background: var(--surface); padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border);
}
.mm-icon-modal-head h3 { font: 600 16px Inter, system-ui, sans-serif; margin: 0; }
.mm-icon-modal-close {
background: none; border: none; cursor: pointer;
font-size: 22px; line-height: 1; color: var(--text-2);
padding: 4px 10px; border-radius: 6px;
}
.mm-icon-modal-close:hover { background: var(--bg); color: var(--text); }
.mm-icon-modal-body { padding: 16px 20px; overflow-y: auto; }
.mm-icon-modal-body input[type="text"] {
width: 100%; padding: 9px 12px;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
font: 14px Inter, system-ui, sans-serif; outline: none;
margin-bottom: 14px;
}
.mm-icon-modal-body input[type="text"]:focus { border-color: var(--accent); }
.mm-icon-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
gap: 8px;
}
.mm-icon-pick-item {
width: 52px; height: 52px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: var(--r-input);
background: var(--surface); color: var(--text);
cursor: pointer; transition: all var(--t-fast);
}
.mm-icon-pick-item:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
@media (max-width: 1100px) { .mm-frame-tablet { display: none; } }
@media (max-width: 760px) {
.mm-frame-phone-land { display: none; }
.mm-appearance-body { grid-template-columns: 1fr; }
.mm-table-head, .mm-row {
grid-template-columns: 30px 50px 1fr 100px 80px 40px;
}
.mm-table-head .mm-th-url,
.mm-table-head .mm-th-badge,
.mm-row .mm-td-url,
.mm-row .mm-td-badge { display: none; }
}
/* ============ Мобайл ============ */
.sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 90;
opacity: 0;
transition: opacity var(--t-mid);
}
@media (max-width: 900px) {
.sidebar {
position: fixed;
top: 0; left: 0;
transform: translateX(-100%);
z-index: 100;
transition: transform var(--t-mid);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}
body.sidebar-open .sidebar { transform: translateX(0); }
body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; }
.topbar {
display: flex !important;
}
.content {
padding: 16px 16px 48px;
}
}
/* ============ Топбар (только мобайл) ============ */
.topbar {
display: none;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 50;
}
.topbar-burger {
width: 36px;
height: 36px;
border-radius: var(--r-sm);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
}
.topbar-burger:hover { background: var(--accent-tint); color: var(--accent); }
.topbar .logo { font-size: 20px; }
.topbar .logo .logo-press { font-size: 15px; }
/* На мобайле контент-обёртка имеет topbar сверху */
.content-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}