/* =====================================================================
v34-pages.css — per-page стили v34. Каждая страница в namespace
`.v34-{prefix}`. Подключается ПОСЛЕ legacy и v34-base.css.
===================================================================== */
/* =====================================================================
M01 «Обзор» — .v34-bento
===================================================================== */
.v34-bento {
max-width: 1400px;
margin: 0 auto;
padding-top: var(--s-2, 8px);
}
/* Content factory editorial lane */
.v34-cf { --cf-accent:#8b7cf6; }
.v34-cf-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; background:linear-gradient(135deg,rgba(108,92,231,.15),rgba(0,206,201,.06)),var(--bg-card); }
.v34-cf-hero h2 { margin:5px 0 6px; font-size:26px; }
.v34-cf-hero h2 span { color:var(--cf-accent); font-family:var(--font-mono,monospace); font-size:14px; text-transform:uppercase; }
.v34-cf-hero p { margin:0; color:var(--text-secondary); max-width:760px; font-size:13px; line-height:1.55; }
.v34-cf-kicker { color:var(--text-muted); text-transform:uppercase; letter-spacing:.13em; font-size:10px; font-weight:700; }
.v34-cf-actions,.v34-cf-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.v34-cf-actions input,.v34-cf-toolbar select { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border); border-radius:9px; padding:8px 10px; font:inherit; font-size:12px; }
.v34-cf-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.v34-cf-stats .v34-cs-card { padding:14px 16px; }
.v34-cf-stats span { display:block; color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.v34-cf-stats strong { display:block; margin-top:7px; font-size:18px; font-family:var(--font-mono,monospace); }
.v34-cf-toolbar { margin-bottom:14px; }
.v34-cf-queue { display:flex; flex-direction:column; gap:14px; }
.v34-cf-package { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--bg-secondary); }
.v34-cf-package-head { display:grid; grid-template-columns:auto minmax(160px,1fr) auto auto; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.v34-cf-package-head input { width:16px; height:16px; }
.v34-cf-package-title { font-weight:650; font-size:13px; }
.v34-cf-package-meta { color:var(--text-muted); font-size:11px; font-family:var(--font-mono,monospace); }
.v34-cf-status { border-radius:999px; padding:4px 8px; background:rgba(108,92,231,.14); color:#b8afff; font-size:10px; text-transform:uppercase; font-weight:700; }
.v34-cf-package-body { display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.15fr); gap:14px; padding:14px; }
.v34-cf-copy textarea { width:100%; min-height:180px; resize:vertical; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--text-primary); padding:12px; font:13px/1.5 var(--font-sans,system-ui); }
.v34-cf-copy-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.v34-cf-note { color:var(--text-muted); font-size:10px; }
.v34-cf-media { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.v34-cf-slide { position:relative; min-height:150px; border-radius:10px; overflow:hidden; background:var(--bg-card); border:1px solid var(--border); }
.v34-cf-slide img { width:100%; height:100%; min-height:150px; object-fit:cover; display:block; }
.v34-cf-slide span { position:absolute; left:7px; top:7px; background:rgba(10,14,24,.82); color:white; border-radius:6px; padding:3px 6px; font-size:9px; text-transform:uppercase; }
.v34-cf-slide button { position:absolute; right:7px; bottom:7px; border:0; border-radius:7px; background:rgba(10,14,24,.85); color:white; padding:5px 7px; font-size:10px; cursor:pointer; }
.v34-cf-private { margin-top:10px; padding:9px 10px; border:1px dashed var(--border); border-radius:9px; color:var(--text-muted); font-size:10px; }
.v34-cf-review { display:grid; gap:5px; }
.v34-cf-review-critical { color:var(--danger,#ff6b6b); }
@media(max-width:1100px){.v34-cf-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.v34-cf-package-body{grid-template-columns:1fr}.v34-cf-hero{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.v34-cf-stats{grid-template-columns:1fr}.v34-cf-package-head{grid-template-columns:auto 1fr}.v34-cf-package-meta,.v34-cf-status{grid-column:2}.v34-cf-media{grid-template-columns:repeat(2,minmax(0,1fr))}}
.v34-bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--s-5, 20px);
}
.v34-bento .v34-b-reach { grid-column: span 7; grid-row: span 2; }
.v34-bento .v34-b-queue { grid-column: span 5; }
.v34-bento .v34-b-health { grid-column: span 5; }
.v34-bento .v34-b-hot { grid-column: span 8; }
.v34-bento .v34-b-channels { grid-column: span 4; }
.v34-bento .v34-b-feed { grid-column: span 12; }
@media (max-width: 1100px) {
.v34-bento .v34-bento-grid { grid-template-columns: repeat(6, 1fr); }
.v34-bento .v34-b-reach,
.v34-bento .v34-b-hot,
.v34-bento .v34-b-feed { grid-column: span 6; grid-row: auto; }
.v34-bento .v34-b-queue,
.v34-bento .v34-b-health { grid-column: span 3; }
.v34-bento .v34-b-channels { grid-column: span 6; }
}
/* ---- Reach ---- */
.v34-bento .v34-reach-tabs {
display: flex; gap: 4px;
background: var(--bg-input);
padding: 3px;
border-radius: var(--r-sm, 8px);
width: fit-content;
}
.v34-bento .v34-reach-tab {
padding: 6px 14px; font-size: 12px;
color: var(--text-secondary);
border-radius: 6px;
cursor: pointer;
border: none; background: none;
font-family: inherit;
transition: all var(--t-fast, 120ms) var(--ease-out);
}
.v34-bento .v34-reach-tab.active {
background: var(--bg-card);
color: var(--text-primary);
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.v34-bento .v34-reach-stack {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-6, 24px);
margin-bottom: var(--s-6, 24px);
}
.v34-bento .v34-rb-label {
font-size: 11px; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--text-muted);
display: flex; align-items: center; gap: 6px;
margin-bottom: var(--s-2, 8px);
}
.v34-bento .v34-swatch { width: 10px; height: 10px; border-radius: 3px; }
.v34-bento .v34-rb-num {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 56px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
}
.v34-bento .v34-rb-num.content { background: var(--grad-content); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.v34-bento .v34-rb-num.ads { background: var(--grad-ads); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.v34-bento .v34-rb-delta {
display: inline-flex;
align-items: center; gap: 4px;
margin-top: var(--s-2, 8px);
font-size: 12px; color: var(--success);
font-family: var(--font-mono, monospace);
font-weight: 500;
}
.v34-bento .v34-rb-delta.down { color: var(--danger); }
.v34-bento .v34-spark-wrap {
width: 100%;
height: 140px;
position: relative;
cursor: crosshair;
}
.v34-bento .v34-spark-wrap-sm { height: 90px; }
.v34-bento .v34-spark-wrap canvas { display: block; }
.v34-bento .v34-bento-chart-section { margin-top: 10px; }
.v34-bento .v34-bento-chart-section:first-of-type { margin-top: 0; }
.v34-bento .v34-bento-chart-sub-label {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 4px;
font-family: var(--font-mono, monospace);
letter-spacing: 0.02em;
}
/* ---- Queue ---- */
.v34-bento .v34-queue-num {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 64px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
background: var(--grad-queue);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: var(--s-2, 8px);
}
.v34-bento .v34-queue-sub { color: var(--text-secondary); font-size: 13px; margin-bottom: var(--s-5, 20px); }
.v34-bento .v34-queue-slots {
display: flex; flex-direction: column;
gap: var(--s-3, 12px);
margin-top: var(--s-5, 20px);
}
.v34-bento .v34-slot-row {
display: grid;
grid-template-columns: 88px 1fr 50px;
align-items: center;
gap: var(--s-3, 12px);
}
.v34-bento .v34-slot-name {
font-size: 12px;
color: var(--text-secondary);
display: flex; align-items: center; gap: 6px;
}
.v34-bento .v34-slot-bar {
height: 6px;
background: var(--bg-input);
border-radius: 3px;
overflow: hidden;
}
.v34-bento .v34-slot-fill {
height: 100%;
border-radius: 3px;
transition: width 1.2s var(--ease-out);
}
.v34-bento .v34-slot-num {
font-family: var(--font-mono, monospace);
font-size: 12px;
color: var(--text-secondary);
text-align: right;
}
.v34-bento .v34-slot-dot { width: 8px; height: 8px; border-radius: 50%; }
/* ---- Health ---- */
.v34-bento .v34-health-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-3, 12px);
margin-top: var(--s-2, 8px);
}
.v34-bento .v34-health-item {
background: var(--bg-input);
border-radius: var(--r-md, 14px);
padding: var(--s-4, 16px);
display: flex;
align-items: center;
gap: var(--s-3, 12px);
}
.v34-bento .v34-health-ico {
width: 36px; height: 36px;
border-radius: 10px;
display: grid; place-items: center;
flex-shrink: 0;
}
.v34-bento .v34-health-ico.ok { background: var(--success-bg); color: var(--success); }
.v34-bento .v34-health-ico.warn { background: var(--warning-bg); color: var(--warning); }
.v34-bento .v34-health-ico.err { background: var(--danger-bg); color: var(--danger); }
.v34-bento .v34-health-meta {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.v34-bento .v34-health-val {
font-size: 15px;
color: var(--text-primary);
font-weight: 500;
margin-top: 2px;
}
/* ---- Hot posts ---- */
.v34-bento .v34-hot-list {
display: flex; flex-direction: column;
gap: var(--s-3, 12px);
}
.v34-bento .v34-hot-row {
display: grid;
grid-template-columns: 48px 1fr auto auto;
align-items: center;
gap: var(--s-4, 16px);
padding: var(--s-4, 16px);
background: var(--bg-input);
border-radius: var(--r-md, 14px);
border: 1px solid transparent;
transition: all var(--t-base) var(--ease-out);
}
.v34-bento .v34-hot-row:hover {
background: var(--bg-card-hover);
border-color: var(--border-hover);
transform: translateX(2px);
}
.v34-bento .v34-hot-thumb {
width: 48px; height: 48px;
border-radius: 10px;
background: var(--grad-viral);
display: grid; place-items: center;
font-family: var(--font-display, 'Onest', sans-serif);
font-weight: 700;
color: #fff; font-size: 16px;
flex-shrink: 0;
}
.v34-bento .v34-hot-thumb.t2 { background: var(--grad-content); }
.v34-bento .v34-hot-thumb.t3 { background: var(--grad-ads); }
.v34-bento .v34-hot-name { font-size: 14px; color: var(--text-primary); font-weight: 500; }
.v34-bento .v34-hot-meta {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 2px;
font-family: var(--font-mono, monospace);
}
.v34-bento .v34-hot-stat { text-align: right; }
.v34-bento .v34-hot-v {
font-family: var(--font-mono, monospace);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.v34-bento .v34-hot-delta {
font-size: 11px;
color: var(--success);
font-family: var(--font-mono, monospace);
margin-top: 2px;
}
.v34-bento .v34-promo-btn {
background: var(--accent-glow);
border: 1px solid transparent;
color: var(--accent-text);
padding: 8px 14px;
border-radius: var(--r-sm, 8px);
font-size: 12px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: all var(--t-fast) var(--ease-out);
white-space: nowrap;
}
.v34-bento .v34-promo-btn:hover {
background: var(--accent);
color: #fff;
box-shadow: var(--sh-glow);
}
/* ---- Channels ---- */
.v34-bento .v34-ch-list {
display: flex; flex-direction: column;
gap: var(--s-3, 12px);
}
.v34-bento .v34-ch-row {
display: flex;
align-items: center;
gap: var(--s-3, 12px);
padding: var(--s-3, 12px);
border-radius: var(--r-sm, 8px);
background: var(--bg-input);
width: 100%;
text-align: left;
border: 1px solid transparent;
cursor: pointer;
transition: border-color 150ms, transform 150ms, background-color 150ms;
font: inherit;
color: inherit;
}
.v34-bento button.v34-ch-row { font-family: inherit; }
.v34-bento .v34-ch-row:hover {
border-color: rgba(124,92,255,0.35);
transform: translateX(2px);
background: rgba(124,92,255,0.04);
}
.v34-bento .v34-ch-row > div:nth-child(2) { flex: 1; min-width: 0; }
.v34-bento .v34-ch-mark {
width: 32px; height: 32px;
border-radius: 8px;
display: grid; place-items: center;
font-weight: 700;
font-size: 12px;
flex-shrink: 0;
color: #fff;
}
.v34-bento .v34-ch-mark.tg { background: linear-gradient(135deg, #38a8e6, #1d7fc7); }
.v34-bento .v34-ch-mark.vk { background: linear-gradient(135deg, #4a76a8, #5181b8); }
.v34-bento .v34-ch-mark.bc { background: var(--grad-queue); }
.v34-bento .v34-ch-name { font-size: 13.5px; color: var(--text-primary); font-weight: 500; }
.v34-bento .v34-ch-stat {
font-size: 11.5px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
margin-top: 2px;
}
.v34-bento .v34-ch-status { margin-left: auto; }
/* ---- Feed ---- */
.v34-bento .v34-feed-list { display: flex; flex-direction: column; }
.v34-bento .v34-feed-row {
display: grid;
grid-template-columns: 80px 32px 1fr auto;
align-items: center;
gap: var(--s-4, 16px);
padding: var(--s-3, 12px) var(--s-2, 8px);
border-bottom: 1px solid var(--border);
font-size: 13px;
transition: background var(--t-fast) var(--ease-out);
}
.v34-bento .v34-feed-row:last-child { border: none; }
.v34-bento .v34-feed-row:hover { background: var(--bg-input); }
.v34-bento .v34-feed-time {
font-family: var(--font-mono, monospace);
font-size: 11.5px;
color: var(--text-muted);
}
.v34-bento .v34-feed-ico {
width: 26px; height: 26px;
border-radius: 7px;
display: grid; place-items: center;
flex-shrink: 0;
font-size: 13px;
}
.v34-bento .v34-feed-ico.ok { background: var(--success-bg); color: var(--success); }
.v34-bento .v34-feed-ico.err { background: var(--danger-bg); color: var(--danger); }
.v34-bento .v34-feed-ico.info { background: var(--info-bg); color: var(--info); }
.v34-bento .v34-feed-ico.viral { background: var(--accent-glow); color: var(--accent-text); }
.v34-bento .v34-feed-t1 { color: var(--text-primary); }
.v34-bento .v34-feed-t2 {
color: var(--text-muted);
font-size: 11.5px;
margin-top: 1px;
}
.v34-bento .v34-feed-meta {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
}
/* ---- Mobile (<= 768px) ---- */
@media (max-width: 768px) {
.v34-bento .v34-bento-grid { grid-template-columns: 1fr; gap: var(--s-3, 12px); }
.v34-bento .v34-b-reach,
.v34-bento .v34-b-queue,
.v34-bento .v34-b-health,
.v34-bento .v34-b-hot,
.v34-bento .v34-b-channels,
.v34-bento .v34-b-feed { grid-column: span 1; grid-row: auto; }
.v34-bento .v34-card { padding: var(--s-4, 16px); }
.v34-bento .v34-rb-num { font-size: 38px; }
.v34-bento .v34-queue-num { font-size: 44px; }
.v34-bento .v34-spark-wrap { height: 100px; }
.v34-bento .v34-slot-row { grid-template-columns: 70px 1fr 50px; gap: var(--s-2, 8px); }
.v34-bento .v34-health-grid { grid-template-columns: 1fr 1fr; gap: var(--s-2, 8px); }
.v34-bento .v34-health-item { padding: var(--s-3, 12px); gap: var(--s-2, 8px); }
.v34-bento .v34-health-ico { width: 32px; height: 32px; }
.v34-bento .v34-health-val { font-size: 13px; }
.v34-bento .v34-hot-row { grid-template-columns: 40px 1fr auto; gap: var(--s-3, 12px); padding: var(--s-3, 12px); }
.v34-bento .v34-promo-btn { display: none; }
.v34-bento .v34-hot-thumb { width: 40px; height: 40px; font-size: 14px; }
.v34-bento .v34-feed-row { grid-template-columns: 60px 26px 1fr; gap: var(--s-2, 8px); padding: var(--s-2, 8px) 4px; font-size: 12px; }
.v34-bento .v34-feed-meta { display: none; }
}
@media (max-width: 420px) {
.v34-bento .v34-rb-num { font-size: 32px; }
.v34-bento .v34-queue-num { font-size: 38px; }
.v34-bento .v34-health-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
M02 «Охват» — .v34-cock (Monitoring Cockpit)
===================================================================== */
.v34-cock { padding: 0 !important; }
/* ---- Page head ---- */
.v34-cock .v34-cock-head {
padding: var(--s-6, 24px);
border-bottom: 1px solid var(--border);
background: var(--bg-base, #0a0a0f);
}
.v34-cock .v34-cock-title-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-5, 20px);
flex-wrap: wrap; gap: var(--s-4, 16px);
}
.v34-cock .v34-cock-title h1 {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 32px;
font-weight: 700;
letter-spacing: -0.025em;
line-height: 1.1;
}
.v34-cock .v34-cock-accent {
background: var(--grad-content);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.v34-cock[data-cock-type="ads"] .v34-cock-accent {
background: var(--grad-ads);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.v34-cock .v34-cock-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
font-family: var(--font-mono, monospace);
}
/* ---- Seg control ---- */
.v34-cock .v34-seg-control,
.v34-cock-chart-head .v34-seg-control {
display: inline-flex;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 3px;
gap: 2px;
}
.v34-seg-btn {
padding: 6px 14px;
font-size: 12.5px;
border-radius: var(--r-sm, 8px);
background: none; border: none;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: all var(--t-fast) var(--ease-out);
font-family: inherit;
}
.v34-seg-btn:hover { color: var(--text-primary); }
.v34-seg-btn.active { background: var(--bg-input); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.v34-seg-btn.active.content { color: #00ffaa; }
.v34-seg-btn.active.ads { color: #ff6b9d; }
.v34-seg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* ---- Filters ---- */
.v34-cock .v34-cock-filters {
display: flex; align-items: center; gap: var(--s-3, 12px);
flex-wrap: wrap;
}
.v34-cock .v34-filter-chip,
.v34-swaga .v34-filter-chip {
display: inline-flex; align-items: center; gap: var(--s-2, 8px);
padding: 6px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-pill, 999px);
font-size: 12px;
cursor: pointer;
color: var(--text-secondary);
transition: all var(--t-fast) var(--ease-out);
}
.v34-cock .v34-filter-chip:hover,
.v34-swaga .v34-filter-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-cock .v34-filter-chip.live,
.v34-swaga .v34-filter-chip.live { color: var(--success); border-color: var(--success-bg); background: var(--success-bg); }
.v34-cock .v34-filter-chip.active,
.v34-swaga .v34-filter-chip.active { background: var(--accent-glow); color: var(--accent-text); border-color: transparent; }
.v34-cock .v34-filter-chip svg,
.v34-swaga .v34-filter-chip svg { width: 14px; height: 14px; }
.v34-cock .v34-date-range,
.v34-swaga .v34-date-range {
display: inline-flex; align-items: center; gap: var(--s-2, 8px);
padding: 6px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
font-size: 12px;
font-family: var(--font-mono, monospace);
color: var(--text-secondary);
}
.v34-cock .v34-date-sep,
.v34-swaga .v34-date-sep { color: var(--text-muted); margin-left: 4px; }
.v34-cock .v34-date-suffix,
.v34-swaga .v34-date-suffix { color: var(--text-muted); }
.v34-cock .v34-filter-sep,
.v34-swaga .v34-filter-sep { width: 1px; height: 24px; background: var(--border); margin: 0 var(--s-2, 8px); }
.v34-cock .v34-cock-btn-sm,
.v34-swaga .v34-cock-btn-sm {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
font-family: inherit;
transition: all var(--t-fast) var(--ease-out);
}
.v34-cock .v34-cock-btn-sm:hover,
.v34-swaga .v34-cock-btn-sm:hover { color: var(--text-primary); border-color: var(--border-hover); }
/* ---- Stat strip ---- */
.v34-cock .v34-stat-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-4, 16px);
margin-top: var(--s-5, 20px);
}
.v34-cock .v34-stat {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: var(--s-4, 16px) var(--s-5, 20px);
position: relative;
overflow: hidden;
}
.v34-cock .v34-stat::before {
content: ''; position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: var(--grad-content);
opacity: 0.7;
}
.v34-cock[data-cock-type="ads"] .v34-stat::before { background: var(--grad-ads); }
.v34-cock .v34-stat.queue::before { background: var(--grad-queue); }
.v34-cock .v34-stat.viral::before { background: var(--grad-viral); }
.v34-cock .v34-stat.health::before { background: var(--grad-health, var(--grad-content)); }
.v34-cock .v34-stat-lbl {
font-size: 10.5px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
.v34-cock .v34-stat-v {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 28px; font-weight: 700;
letter-spacing: -0.02em; margin-top: 4px; line-height: 1.1;
color: var(--text-primary);
}
.v34-cock .v34-stat-d {
font-family: var(--font-mono, monospace);
font-size: 11px; color: var(--success);
margin-top: 4px;
display: flex; align-items: center; gap: 4px;
}
.v34-cock .v34-stat-d.warn { color: var(--warning); }
/* ---- Body grid (center + right) ---- */
.v34-cock .v34-cock-body {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--s-5, 20px);
padding: var(--s-6, 24px);
}
@media (max-width: 1100px) {
.v34-cock .v34-cock-body { grid-template-columns: 1fr; }
}
.v34-cock .v34-cock-center { display: flex; flex-direction: column; gap: var(--s-5, 20px); min-width: 0; }
.v34-cock .v34-cock-right { display: flex; flex-direction: column; gap: var(--s-5, 20px); }
/* ---- Chart card ---- */
.v34-cock .v34-cock-chart-card { padding: var(--s-5, 20px); }
.v34-cock .v34-cock-chart-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--s-4, 16px);
flex-wrap: wrap; gap: var(--s-3, 12px);
}
.v34-cock .v34-cock-chart-legend {
display: flex; gap: var(--s-4, 16px);
font-size: 12px; color: var(--text-secondary);
}
.v34-cock .v34-cock-chart-legend span {
display: inline-flex; align-items: center; gap: 6px;
}
.v34-cock .v34-cock-sw { width: 10px; height: 10px; border-radius: 3px; }
.v34-cock .v34-cock-chart-area {
position: relative;
height: 240px;
}
.v34-cock .v34-cock-chart-area-sm { height: 160px; }
.v34-cock .v34-cock-chart-area canvas { width: 100% !important; height: 100% !important; }
.v34-cock .v34-cock-chart-section {
margin-top: var(--s-4, 16px);
}
.v34-cock .v34-cock-chart-section:first-of-type { margin-top: 0; }
.v34-cock .v34-cock-chart-sub-label {
font-size: 11.5px;
color: var(--text-muted);
margin-bottom: 6px;
font-family: var(--font-mono, monospace);
}
.v34-cock .v34-cock-chart-total {
margin-top: 4px;
font-family: var(--font-mono, monospace);
font-size: 22px;
font-weight: 700;
color: var(--accent, #7c5cff);
letter-spacing: -0.01em;
}
/* ---- Table card ---- */
.v34-cock .v34-cock-table-card { padding: 0; overflow: hidden; }
.v34-cock .v34-cock-table-head {
display: flex; align-items: center; justify-content: space-between;
padding: var(--s-4, 16px) var(--s-5, 20px);
border-bottom: 1px solid var(--border);
}
.v34-cock .v34-cock-table-tools {
display: flex; align-items: center; gap: var(--s-3, 12px);
font-size: 12px;
}
.v34-cock .v34-cock-search {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
padding: 6px 10px;
font-size: 12px;
color: var(--text-primary);
width: 180px;
font-family: inherit;
}
.v34-cock .v34-cock-search:focus { outline: none; border-color: var(--border-focus, var(--accent)); }
.v34-cock .v34-cock-table-count {
color: var(--text-muted);
font-family: var(--font-mono, monospace);
font-size: 11px;
}
.v34-cock .v34-cock-dt {
display: grid;
grid-template-columns: 32px 36px minmax(280px, 2fr) 90px 100px 100px 110px;
font-size: 13px;
}
.v34-cock .v34-cock-th, .v34-cock .v34-cock-td {
padding: var(--s-3, 12px) var(--s-4, 16px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
}
.v34-cock .v34-cock-th {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 600;
background: var(--bg-elevated, var(--bg-input));
cursor: pointer;
}
.v34-cock .v34-cock-th:hover { color: var(--text-primary); }
.v34-cock .v34-cock-arr { font-family: var(--font-mono, monospace); margin-left: 4px; opacity: 0.6; }
.v34-cock .v34-cock-row { display: contents; cursor: pointer; }
.v34-cock .v34-cock-row:hover .v34-cock-td { background: var(--bg-input); }
.v34-cock .v34-cock-row.sel .v34-cock-td { background: var(--accent-glow); }
.v34-cock .v34-cock-thumb {
width: 28px; height: 28px;
border-radius: 7px;
display: grid; place-items: center;
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 11px;
font-weight: 700;
color: #fff;
}
.v34-cock .v34-cock-rank {
display: inline-grid; place-items: center;
min-width: 28px; padding: 0 6px; height: 26px;
border-radius: 7px;
font-family: var(--font-mono, monospace);
font-size: 12px; font-weight: 700;
color: var(--text-secondary);
background: var(--bg-input);
border: 1px solid var(--border);
}
.v34-cock .v34-cock-th.sortable { cursor: pointer; user-select: none; }
.v34-cock .v34-cock-th.sortable:hover { color: var(--text-primary); }
.v34-cock .v34-cock-th.sortable.active { color: var(--accent, #7c5cff); }
.v34-cock .v34-cock-th.sortable.active .v34-cock-arr { opacity: 1; color: var(--accent, #7c5cff); }
.v34-cock .v34-cock-segment-wrap {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 10px; border-radius: var(--r-md, 14px);
background: var(--bg-card-hover, #1c1c28); border: 1px solid var(--border);
font-size: 12px; color: var(--text-secondary);
}
.v34-cock-segment-select {
background: transparent; border: none; color: var(--text-primary);
font-family: inherit; font-size: 12px; cursor: pointer; outline: none;
padding: 2px 4px;
}
.v34-cock-segment-select option { background: var(--bg-card, #15151f); color: var(--text-primary); }
.v34-filter-chip[data-cock-vph].active,
.v34-filter-chip[data-cock-range].active { background: var(--accent-glow, rgba(108,92,231,.18)); border-color: var(--accent, #7c5cff); color: var(--text-primary); }
.v34-cock-custom-picker {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 12px 14px; margin: 8px 0 0;
background: var(--bg-card-hover, #1c1c28);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
}
.v34-cock-custom-picker[hidden] { display: none; }
.v34-cock-custom-picker label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.v34-cock-custom-picker input[type="date"] {
background: var(--bg-card, #15151f); border: 1px solid var(--border); border-radius: var(--r-sm, 8px);
padding: 6px 10px; color: var(--text-primary); font-family: var(--font-mono, monospace); font-size: 12px;
color-scheme: dark;
}
.v34-cock-custom-picker input[type="date"]:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-cock-custom-hint { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cock-btn-primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff !important; border-color: transparent !important; }
.v34-cock-event-empty {
padding: 22px 16px; text-align: center;
color: var(--text-muted); font-size: 12px; line-height: 1.5;
border: 1px dashed var(--border); border-radius: var(--r-md, 14px); margin: 8px 0;
}
.v34-cock-legend-hint { color: var(--text-muted); font-size: 11px; font-style: italic; margin-left: 6px; }
.v34-cock .v34-cock-name { font-weight: 500; color: var(--text-primary); margin-bottom: 2px; }
.v34-cock .v34-cock-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cock .v34-cock-td.r { justify-content: flex-end; font-family: var(--font-mono, monospace); }
.v34-cock .v34-cock-v { color: var(--text-primary); font-weight: 500; }
.v34-cock .v34-cock-delta { color: var(--success); font-size: 11.5px; }
.v34-cock .v34-cock-delta.warm { color: var(--warning); }
.v34-cock .v34-cock-delta.cold { color: var(--text-muted); }
.v34-cock .v34-cock-promo {
background: var(--accent-glow);
color: var(--accent-text);
border: none;
padding: 5px 10px;
border-radius: var(--r-sm, 8px);
font-size: 11.5px;
cursor: pointer;
font-family: inherit;
transition: all var(--t-fast) var(--ease-out);
}
.v34-cock .v34-cock-promo:hover { background: var(--accent); color: #fff; box-shadow: var(--sh-glow); }
.v34-cock .v34-cock-promo.viral {
background: linear-gradient(135deg, rgba(255,92,122,0.2), rgba(183,148,246,0.2));
color: #ff8da8;
}
.v34-cock .v34-cock-promo.viral:hover { background: var(--grad-viral); color: #fff; }
/* Контент-фёрст: кнопка «Добавить Ads» (ожидает добавления рекламы) */
.v34-cock .v34-cock-promo.v34-cock-cf {
background: rgba(34,197,94,0.16);
color: #34d27f;
font-weight: 600;
}
.v34-cock .v34-cock-promo.v34-cock-cf:hover { background: #22c55e; color: #fff; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.v34-cock .v34-cock-cb {
width: 16px; height: 16px;
border: 1.5px solid var(--border-hover);
border-radius: 4px;
cursor: pointer;
display: grid; place-items: center;
flex-shrink: 0;
transition: all var(--t-fast) var(--ease-out);
background: transparent;
}
.v34-cock .v34-cock-cb.on { background: var(--accent); border-color: var(--accent); }
.v34-cock .v34-cock-cb.on::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
/* ---- Right column: live feed ---- */
.v34-cock .v34-cock-feed-card {
display: flex; flex-direction: column;
flex: 1; min-height: 480px;
position: sticky; top: calc(68px + var(--s-5, 20px));
padding: 0;
overflow: hidden;
}
.v34-cock .v34-cock-feed-head {
padding: var(--s-4, 16px) var(--s-5, 20px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.v34-cock .v34-cock-feed-filter {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
}
.v34-cock .v34-cock-feed-list {
flex: 1;
overflow-y: auto;
padding: var(--s-2, 8px) 0;
max-height: calc(100vh - 280px);
}
.v34-cock .v34-cock-event {
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--s-3, 12px);
padding: var(--s-3, 12px) var(--s-5, 20px);
border-bottom: 1px solid rgba(35, 35, 51, 0.5);
font-size: 12.5px;
position: relative;
}
.v34-cock .v34-cock-event:last-child { border: none; }
.v34-cock .v34-cock-event-ico {
width: 24px; height: 24px;
border-radius: 6px;
display: grid; place-items: center;
font-size: 11px;
flex-shrink: 0;
}
.v34-cock .v34-cock-event-ico.ok { background: var(--success-bg); color: var(--success); }
.v34-cock .v34-cock-event-ico.viral { background: var(--accent-glow); color: var(--accent-text); }
.v34-cock .v34-cock-event-ico.warn { background: var(--warning-bg); color: var(--warning); }
.v34-cock .v34-cock-event-ico.err { background: var(--danger-bg); color: var(--danger); }
.v34-cock .v34-cock-event-ico.info { background: var(--info-bg); color: var(--info); }
.v34-cock .v34-cock-event-ts { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-muted); margin-bottom: 2px; }
.v34-cock .v34-cock-event-t1 { color: var(--text-primary); line-height: 1.4; }
.v34-cock .v34-cock-event-t2 { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-cock .v34-cock-event.fresh::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--accent);
animation: cockFreshFade 4s ease-out forwards;
}
@keyframes cockFreshFade { from { opacity: 1; } to { opacity: 0; } }
/* ---- Action bar (bottom sticky) ---- */
.v34-cock-action-bar {
position: fixed;
bottom: 20px;
left: calc(240px + (100% - 240px) / 2);
transform: translateX(-50%);
background: var(--bg-elevated, var(--bg-card));
border: 1px solid var(--border-hover);
border-radius: var(--r-pill, 999px);
padding: 6px 6px 6px 20px;
box-shadow: var(--sh-card-hover), var(--sh-glow);
display: flex; align-items: center; gap: var(--s-4, 16px);
z-index: 50;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
backdrop-filter: blur(20px);
}
.v34-cock-action-bar.show {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-4px);
}
body.collapsed .v34-cock-action-bar { left: calc(64px + (100% - 64px) / 2); }
.v34-cock-action-bar .v34-cock-ab-count { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); }
.v34-cock-action-bar .v34-cock-ab-count strong { color: var(--accent-text); margin-right: 4px; }
.v34-cock-action-bar .v34-cock-ab-sep { width: 1px; height: 22px; background: var(--border); }
.v34-cock-action-bar .v34-cock-ab-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
font-size: 12.5px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
color: var(--text-secondary);
cursor: pointer;
font-family: inherit;
transition: all var(--t-fast) var(--ease-out);
}
.v34-cock-action-bar .v34-cock-ab-btn:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-card); }
.v34-cock-action-bar .v34-cock-ab-btn.icon { padding: 8px; width: 36px; justify-content: center; }
/* ---- Mobile (<= 768px) — Top-100 table + filters + action-bar ----
bugfix 2026-05-10: на mobile сохраняем все ключевые элементы:
- таблица: ранг + название + охват + Δ/час + кнопка «Продвинуть»
- фильтр-чипы: переносятся на несколько строк (wrap), не скроллим
- sticky action-bar (bulk «Превратить в рекламу»): full-width у нижнего края с wrap кнопок
ВАЖНО: эти правила — единственный источник правды для cock-mobile. Конфликтующие
блоки в @720px и @420px удалены ранее. */
@media (max-width: 768px) {
.v34-cock .v34-cock-head { padding: var(--s-4, 16px); }
.v34-cock .v34-stat-strip { grid-template-columns: repeat(2, 1fr); }
.v34-cock .v34-cock-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-cock .v34-cock-chart-area { height: 220px; }
.v34-cock .v34-cock-feed-card { position: static; min-height: 360px; max-height: 460px; }
/* --- Filter row: wrap, без horizontal-scroll --- */
.v34-cock .v34-cock-filters {
flex-wrap: wrap !important;
overflow-x: visible !important;
padding: 0 !important;
margin: 0 !important;
gap: 6px !important;
}
/* Inline style="margin-left:auto" на Экспорт CSV — сбрасываем чтобы кнопка была в потоке */
.v34-cock .v34-cock-filters > div[style*="margin-left:auto"] {
margin-left: 0 !important;
margin-top: 4px;
}
.v34-cock .v34-cock-filters .v34-filter-sep {
display: none;
}
.v34-cock .v34-cock-segment-wrap {
width: 100%;
justify-content: space-between;
}
.v34-cock .v34-date-range { font-size: 11px; padding: 5px 10px; }
.v34-cock .v34-filter-chip { font-size: 11px; padding: 5px 10px; }
/* --- Top-100 таблица: горизонтальный скролл.
- Убираем колонку «#» (rank) — экономия места
- 6 колонок: cb + название + время + охват + Δ/час + кнопка
- Header (.v34-cock-table-head с поиском/чипом/счётчиком) sticky-слева,
НЕ уезжает при горизонтальном скролле */
.v34-cock .v34-cock-table-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
}
.v34-cock .v34-cock-dt {
grid-template-columns: 32px minmax(240px, 2fr) 90px 100px 100px 110px !important;
min-width: 660px;
}
/* Скрываем колонку «#» (rank) — 2-й th и 2-й td в строках */
.v34-cock .v34-cock-dt > .v34-cock-th:nth-child(2),
.v34-cock .v34-cock-row > .v34-cock-td:nth-child(2) {
display: none !important;
}
/* Sticky-table-head: остаётся прижатым к левому краю viewport при свайпе */
.v34-cock .v34-cock-table-head {
position: sticky;
left: 0;
z-index: 3;
width: 100%;
max-width: 100vw;
box-sizing: border-box;
background: var(--bg-card);
flex-direction: column;
align-items: stretch;
gap: 8px;
border-bottom: 1px solid var(--border);
}
.v34-cock .v34-cock-table-tools {
flex-wrap: wrap;
gap: 8px;
}
.v34-cock .v34-cock-search {
flex: 1 1 auto;
width: auto;
min-width: 0;
}
/* Скроллбар-индикатор внизу */
.v34-cock .v34-cock-table-card::-webkit-scrollbar { height: 6px; }
.v34-cock .v34-cock-table-card::-webkit-scrollbar-track {
background: rgba(255,255,255,0.04);
}
.v34-cock .v34-cock-table-card::-webkit-scrollbar-thumb {
background: rgba(124,92,255,0.45);
border-radius: 3px;
}
.v34-cock .v34-cock-table-card::-webkit-scrollbar-thumb:hover {
background: rgba(124,92,255,0.65);
}
/* --- Sticky action-bar (bulk «Превратить в рекламу»): full-width у низа экрана.
Базовая правила использует left:calc(240px + ...) translateX(-50%) и
body.collapsed override — оба выгоняют bar за экран. Перекрываем !important.
Включая class-shown selector чтобы перебить .show.transform. */
.v34-cock-action-bar,
body .v34-cock-action-bar,
body.collapsed .v34-cock-action-bar {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
transform: none !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px !important;
border-radius: 14px !important;
}
.v34-cock-action-bar.show,
body .v34-cock-action-bar.show,
body.collapsed .v34-cock-action-bar.show {
transform: translateY(0) !important;
}
.v34-cock-action-bar .v34-cock-ab-count {
flex: 1 1 100%;
text-align: center;
font-size: 11.5px;
padding: 2px 0;
}
.v34-cock-action-bar .v34-cock-ab-sep { display: none !important; }
.v34-cock-action-bar .v34-tb-publish,
.v34-cock-action-bar .v34-cock-ab-btn {
flex: 1 1 calc(50% - 4px);
min-width: 0;
white-space: nowrap;
text-align: center;
justify-content: center;
font-size: 11px !important;
padding: 8px 4px !important;
}
.v34-cock-action-bar .v34-tb-publish {
flex: 1 1 100%;
}
.v34-cock-action-bar .v34-cock-ab-btn.icon {
flex: 0 0 36px;
width: 36px;
}
}
@media (max-width: 480px) {
/* Узкие экраны: action-bar — все кнопки в столбец */
.v34-cock-action-bar .v34-tb-publish,
.v34-cock-action-bar .v34-cock-ab-btn {
flex: 1 1 100% !important;
font-size: 11.5px !important;
}
.v34-cock-action-bar .v34-cock-ab-btn.icon {
flex: 0 0 100% !important;
width: 100% !important;
}
}
/* =====================================================================
M06 «SWAGA Redirect» — .v34-swaga
===================================================================== */
.v34-swaga { padding: 0 !important; }
.v34-swaga .v34-swaga-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); background: var(--bg-base, #0a0a0f); }
.v34-swaga .v34-swaga-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; margin-bottom: var(--s-5, 20px); }
.v34-swaga h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-swaga-accent { background: var(--grad-health, var(--grad-content)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-swaga-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-swaga-ok { color: var(--success); }
.v34-swaga-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: var(--success-bg);
color: var(--success);
border-radius: var(--r-pill, 999px);
font-size: 12px; font-weight: 500;
font-family: var(--font-mono, monospace);
}
.v34-swaga-pill .pulse-dot { background: var(--success); }
.v34-swaga-pill.warn { background: var(--warning-bg, rgba(255,170,0,.12)); color: var(--warning, #ffaa00); }
.v34-swaga-pill.warn .pulse-dot { background: var(--warning, #ffaa00); }
.v34-swaga-pill.bad { background: var(--danger-bg, rgba(255,80,80,.12)); color: var(--danger, #ff5050); }
.v34-swaga-pill.bad .pulse-dot { background: var(--danger, #ff5050); }
.v34-swaga-view-tabs { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; gap: 2px; }
.v34-swaga-vt {
padding: 7px 14px; border: none; background: transparent;
border-radius: var(--r-sm, 8px);
font-size: 12.5px; color: var(--text-secondary);
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: all var(--t-fast) var(--ease-out);
font-family: inherit;
}
.v34-swaga-vt:hover { color: var(--text-primary); }
.v34-swaga-vt.active { background: var(--bg-input); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-swaga-vt svg { width: 13px; height: 13px; }
.v34-swaga-filters { display: flex; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap; }
.v34-swaga-mode-bar { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); }
.v34-swaga-mt { padding: 6px 12px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 12px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--t-fast) var(--ease-out); font-family: inherit; }
.v34-swaga-mt .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.v34-swaga-mt.active { background: var(--bg-input); color: var(--text-primary); }
.v34-swaga-mt.active.all .dot { background: var(--text-secondary); }
.v34-swaga-mt.active.web .dot { background: var(--info); box-shadow: 0 0 6px var(--info); }
.v34-swaga-mt.active.bot .dot { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.v34-swaga-mt.active.bot2 .dot { background: #ff8c42; box-shadow: 0 0 6px #ff8c42; }
.v34-swaga-mt.active.vpn .dot { background: #b794f6; box-shadow: 0 0 6px #b794f6; }
.v34-swaga-mt .ct { font-family: var(--font-mono, monospace); font-size: 11px; opacity: .7; margin-left: 2px; }
.v34-swaga-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4, 16px); margin-top: var(--s-5, 20px); }
.v34-swaga-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px) var(--s-5, 20px); position: relative; overflow: hidden; }
.v34-swaga-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .8; }
.v34-swaga-stat.visits::before { background: var(--grad-content); }
.v34-swaga-stat.conv::before { background: var(--grad-health, var(--grad-content)); }
.v34-swaga-stat.cr::before { background: var(--grad-queue); }
.v34-swaga-stat.rev::before { background: var(--grad-ads); }
.v34-swaga-stat.err::before { background: linear-gradient(135deg, var(--success), #22d3ee); }
.v34-swaga-stat.err.alert::before { background: linear-gradient(135deg, var(--danger), var(--warning)); }
.v34-swaga-body { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-5, 20px); padding: var(--s-6, 24px); }
@media (max-width: 1100px) { .v34-swaga-body { grid-template-columns: 1fr; } }
.v34-swaga-center { display: flex; flex-direction: column; gap: var(--s-5, 20px); min-width: 0; }
.v34-swaga-right { display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-swaga-scard { padding: var(--s-5, 20px); }
.v34-swaga-scard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-swaga-tip { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-swaga-chart-area { position: relative; height: 240px; }
.v34-swaga-chart-area canvas { width: 100% !important; height: 100% !important; }
.v34-swaga-chart-legend { display: flex; gap: var(--s-4, 16px); font-size: 12px; color: var(--text-secondary); }
.v34-swaga-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.v34-swaga-sw { width: 10px; height: 10px; border-radius: 3px; }
.v34-swaga-series-toggle { display: inline-flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; }
.v34-swaga-series-toggle button { padding: 5px 10px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 11.5px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease-out); }
.v34-swaga-series-toggle button:hover { color: var(--text-primary); }
.v34-swaga-series-toggle button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* UTM-группа chip-bar (multi-select) */
.v34-swaga-utm-row { display: flex; align-items: center; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-5, 20px); border-top: 1px solid var(--border); flex-wrap: wrap; }
.v34-swaga-utm-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono, monospace); flex-shrink: 0; }
.v34-swaga-utm-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.v34-swaga-utm-chip { padding: 5px 12px; border: 1px solid var(--border); background: transparent; border-radius: var(--r-pill, 999px); font-size: 11.5px; color: var(--text-secondary); cursor: pointer; font-family: var(--font-mono, monospace); transition: all var(--t-fast) var(--ease-out); display: inline-flex; align-items: center; gap: 6px; }
.v34-swaga-utm-chip:hover { background: var(--bg-input); color: var(--text-primary); }
.v34-swaga-utm-chip.active { background: var(--info); color: #0a0a0f; border-color: var(--info); font-weight: 600; }
.v34-swaga-utm-chip .ct { font-size: 10px; opacity: .7; }
.v34-swaga-utm-chip.active .ct { opacity: .9; }
/* UTM split toggle (checkbox) внутри chart head */
.v34-swaga-utm-split-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none; font-family: var(--font-mono, monospace); }
.v34-swaga-utm-split-toggle input { accent-color: var(--info); cursor: pointer; }
.v34-swaga-utm-split-toggle:hover { color: var(--text-primary); }
.v34-swaga-utm-topn { display: inline-flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; }
.v34-swaga-utm-topn button { padding: 5px 10px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 11.5px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease-out); }
.v34-swaga-utm-topn button:hover { color: var(--text-primary); }
.v34-swaga-utm-topn button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Chart view tabs (По дням / По часам) — same look as series-toggle */
.v34-swaga-chart-view-tabs { display: inline-flex; gap: 2px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; }
.v34-swaga-chart-view-tabs button { padding: 6px 12px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 12px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease-out); display: inline-flex; align-items: center; gap: 6px; }
.v34-swaga-chart-view-tabs button:hover { color: var(--text-primary); }
.v34-swaga-chart-view-tabs button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Day tabs (Все дни / 22 мая / 23 мая / …) — horizontal scroll */
.v34-swaga-chart-day-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 var(--s-3, 12px); margin: 0 0 var(--s-3, 12px); border-bottom: 1px solid var(--border); }
.v34-swaga-chart-day-tabs::-webkit-scrollbar { height: 6px; }
.v34-swaga-chart-day-tabs::-webkit-scrollbar-thumb { background: var(--bg-input); border-radius: 3px; }
.v34-swaga-day-tab { flex-shrink: 0; padding: 5px 12px; border: 1px solid var(--border); background: transparent; border-radius: var(--r-pill, 999px); font-size: 11.5px; color: var(--text-secondary); cursor: pointer; font-family: var(--font-mono, monospace); transition: all var(--t-fast) var(--ease-out); white-space: nowrap; }
.v34-swaga-day-tab:hover { background: var(--bg-input); color: var(--text-primary); }
.v34-swaga-day-tab.active { background: var(--info); color: #0a0a0f; border-color: var(--info); font-weight: 600; }
.v34-swaga-mb-bar { display: flex; height: 28px; border-radius: var(--r-md, 14px); overflow: hidden; margin-top: var(--s-4, 16px); }
.v34-swaga-mb-bar > div { display: grid; place-items: center; font-size: 11px; font-family: var(--font-mono, monospace); font-weight: 600; color: rgba(255,255,255,.92); transition: filter var(--t-fast) var(--ease-out); white-space: nowrap; min-width: 0; overflow: hidden; }
.v34-swaga-mb-bar > div:hover { filter: brightness(1.15); }
.v34-swaga-mb-bar .web { background: var(--info); }
.v34-swaga-mb-bar .bot { background: var(--warning); color: #2a2a3a; }
.v34-swaga-mb-bar .vpn { background: #b794f6; }
.v34-swaga-mb-bar .bot2 { background: #ff8c42; }
.v34-swaga-mb-legend { display: flex; gap: var(--s-4, 16px); margin-top: var(--s-3, 12px); flex-wrap: wrap; font-size: 11.5px; color: var(--text-secondary); }
.v34-swaga-mb-legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); }
.v34-swaga-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5, 20px); }
@media (max-width: 700px) { .v34-swaga-row2 { grid-template-columns: 1fr; } }
.v34-swaga-geo-list { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-swaga-geo-row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: var(--s-3, 12px); }
.v34-swaga-geo-name { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); }
.v34-swaga-geo-flag { font-size: 16px; }
.v34-swaga-geo-bar { height: 8px; background: var(--bg-input); border-radius: 4px; overflow: hidden; }
.v34-swaga-geo-fill { height: 100%; border-radius: 4px; background: var(--grad-content); }
.v34-swaga-geo-fill.alt { background: var(--grad-queue); }
.v34-swaga-geo-fill.alt2 { background: var(--grad-ads); }
.v34-swaga-geo-fill.alt3 { background: var(--grad-health, var(--grad-content)); }
.v34-swaga-geo-num { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-secondary); text-align: right; }
.v34-swaga-lend-table { display: flex; flex-direction: column; max-height: 540px; overflow-y: auto; }
.v34-swaga-lend-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--s-3, 12px); padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.v34-swaga-lend-row.v34-swaga-lend-selectable { grid-template-columns: auto 1fr auto auto; padding-left: var(--s-2, 8px); padding-right: var(--s-2, 8px); margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background var(--t-fast) var(--ease-out); user-select: none; }
.v34-swaga-lend-row.v34-swaga-lend-selectable:hover { background: var(--bg-input); }
.v34-swaga-lend-row.v34-swaga-lend-selectable.is-selected { background: rgba(0, 212, 255, .07); }
.v34-swaga-lend-row.v34-swaga-lend-selectable.is-selected:hover { background: rgba(0, 212, 255, .12); }
.v34-swaga-lend-row:last-child { border-bottom: 0; }
.v34-swaga-lend-check { display: flex; align-items: center; }
.v34-swaga-lend-cbox { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 11px; color: var(--text-primary); background: var(--bg-card); transition: all var(--t-fast) var(--ease-out); }
.v34-swaga-lend-row.is-selected .v34-swaga-lend-cbox { background: var(--info); border-color: var(--info); color: #0a0a0f; font-weight: 700; }
.v34-swaga-lend-name { font-family: var(--font-mono, monospace); color: var(--text-primary); display: flex; align-items: center; gap: 8px; min-width: 0; }
.v34-swaga-lend-ico { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-input); display: grid; place-items: center; flex-shrink: 0; }
.v34-swaga-lend-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-swaga-lend-cell { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-secondary); text-align: right; min-width: 60px; }
.v34-swaga-lend-cell .v { color: var(--text-primary); font-weight: 500; }
.v34-swaga-lend-cell .d { color: var(--success); font-size: 10.5px; margin-top: 2px; }
.v34-swaga-lend-cell .d.warn { color: var(--warning); }
/* UTM-метки · переходы за период (utm_content) */
.v34-swaga-utmt-list { display: flex; flex-direction: column; max-height: 540px; overflow-y: auto; }
.v34-swaga-utmt-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3, 12px); padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.v34-swaga-utmt-row:last-child { border-bottom: 0; }
.v34-swaga-utmt-name { font-family: var(--font-mono, monospace); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v34-swaga-utmt-row.empty .v34-swaga-utmt-name { color: var(--text-muted); }
.v34-swaga-utmt-val { font-family: var(--font-mono, monospace); font-size: 13px; font-weight: 600; color: var(--text-primary); text-align: right; min-width: 60px; }
/* Domain drill-down */
.v34-swaga-dd-body { display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.v34-swaga-dd-sum { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3, 12px); background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); }
@media (max-width: 900px) { .v34-swaga-dd-sum { grid-template-columns: repeat(2, 1fr); } }
.v34-swaga-dd-sum-cell .lbl { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono, monospace); }
.v34-swaga-dd-sum-cell .v { font-size: 22px; color: var(--text-primary); font-weight: 600; font-family: var(--font-mono, monospace); margin-top: 4px; }
.v34-swaga-dd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: var(--s-3, 12px); }
.v34-swaga-dd-card { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-swaga-dd-head { display: flex; flex-direction: column; gap: 4px; }
.v34-swaga-dd-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono, monospace); color: var(--text-primary); font-weight: 600; font-size: 14px; }
.v34-swaga-dd-srvb { font-size: 10px; font-weight: 400; padding: 2px 6px; border-radius: 4px; background: var(--bg-card); color: var(--text-muted); }
.v34-swaga-dd-sub { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-swaga-dd-modebar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--bg-card); }
.v34-swaga-dd-modebar .seg { transition: width var(--t-fast) var(--ease-out); }
.v34-swaga-dd-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 12px; }
.v34-swaga-dd-m { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-family: var(--font-mono, monospace); }
.v34-swaga-dd-m .lbl { color: var(--text-secondary); }
.v34-swaga-dd-m .v { color: var(--text-primary); font-weight: 500; }
.v34-swaga-dd-m.is-muted .lbl, .v34-swaga-dd-m.is-muted .v { opacity: .35; }
.v34-swaga-health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3, 12px); }
@media (max-width: 700px) { .v34-swaga-health-grid { grid-template-columns: repeat(2, 1fr); } }
.v34-swaga-h-item { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); display: flex; align-items: center; gap: var(--s-3, 12px); }
.v34-swaga-h-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.v34-swaga-h-ico.ok { background: var(--success-bg); color: var(--success); }
.v34-swaga-h-ico.warn { background: var(--warning-bg); color: var(--warning); }
.v34-swaga-h-ico.err { background: var(--danger-bg); color: var(--danger); }
.v34-swaga-h-ico.info { background: var(--info-bg); color: var(--info); }
.v34-swaga-h-meta { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.v34-swaga-h-val { font-size: 14px; color: var(--text-primary); font-weight: 500; margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-swaga-feed-card { display: flex; flex-direction: column; height: calc(100vh - 88px - var(--s-6, 24px)); padding: 0; overflow: hidden; position: sticky; top: calc(68px + var(--s-5, 20px)); }
.v34-swaga-feed-head { padding: var(--s-4, 16px) var(--s-5, 20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.v34-swaga-feed-filter { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-swaga-feed-list { flex: 1; overflow-y: auto; padding: var(--s-2, 8px) 0; min-height: 0; }
.v34-swaga-visit { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-5, 20px); border-bottom: 1px solid rgba(35,35,51,.5); font-size: 12.5px; position: relative; }
.v34-swaga-visit:last-child { border: none; }
.v34-swaga-visit-ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; font-family: var(--font-mono, monospace); font-weight: 700; }
.v34-swaga-visit-ico.web { background: var(--info-bg); color: var(--info); }
.v34-swaga-visit-ico.bot { background: var(--warning-bg); color: var(--warning); }
.v34-swaga-visit-ico.bot2 { background: rgba(255,140,66,.15); color: #ff8c42; }
.v34-swaga-visit-ico.vpn { background: rgba(183,148,246,.15); color: #b794f6; }
.v34-swaga-visit .v34-swaga-visit-body { min-width: 0; }
.v34-swaga-visit-ts { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-muted); }
.v34-swaga-visit-t1 { color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; margin-top: 2px; }
.v34-swaga-visit-t1 .lend { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--accent-text); }
.v34-swaga-visit-t2 { color: var(--text-muted); font-size: 11px; margin-top: 3px; font-family: var(--font-mono, monospace); }
.v34-swaga-visit.fresh::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); animation: cockFreshFade 4s ease-out forwards; }
.v34-swaga-visit .conv-tag { font-size: 9.5px; padding: 1px 5px; background: var(--success-bg); color: var(--success); border-radius: 3px; font-family: var(--font-mono, monospace); font-weight: 600; }
.v34-swaga-raw {
background: var(--bg-input);
border-radius: var(--r-md, 14px);
padding: var(--s-3, 12px);
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--text-secondary);
max-height: 360px;
overflow: auto;
white-space: pre-wrap;
margin: 0;
}
@media (max-width: 768px) {
.v34-swaga .v34-swaga-head { padding: var(--s-4, 16px); }
.v34-swaga h1 { font-size: 22px; }
.v34-swaga-strip { grid-template-columns: repeat(2, 1fr); }
.v34-swaga-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-swaga-feed-card { position: static; height: auto; min-height: 360px; max-height: 600px; }
}
/* =====================================================================
M03 «Реклама» — .v34-post (Posting)
===================================================================== */
.v34-post { padding: 0 0 100px 0 !important; }
.v34-post-head { padding: var(--s-6, 24px) var(--s-6, 24px) var(--s-5, 20px); border-bottom: 1px solid var(--border); background: var(--bg-base, #0a0a0f); }
.v34-post-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-post-title h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-post-accent { background: var(--grad-ads); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-post-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-post-summary { display: flex; gap: var(--s-6, 24px); }
.v34-post-sumitem .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.v34-post-sumitem .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; }
/* Sticky slot bar */
.v34-post-slotbar {
position: sticky;
top: 68px;
z-index: 6;
padding: var(--s-3, 12px) var(--s-6, 24px);
background: rgba(10, 10, 15, .8);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: var(--s-4, 16px);
flex-wrap: wrap;
}
.v34-post-slot-tabs { display: inline-flex; gap: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 4px; }
.v34-post-slot-tab {
padding: 8px 16px;
border-radius: var(--r-sm, 8px);
background: transparent; border: none;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-family: inherit;
transition: all var(--t-fast) var(--ease-out);
}
.v34-post-slot-tab:hover { color: var(--text-primary); }
.v34-post-slot-tab .ico { width: 16px; height: 16px; display: grid; place-items: center; font-size: 14px; }
.v34-post-slot-tab .count { font-family: var(--font-mono, monospace); font-size: 11px; background: var(--bg-input); padding: 1px 6px; border-radius: var(--r-pill, 999px); color: var(--text-muted); }
.v34-post-slot-tab.active.morning { background: rgba(255,184,77,.16); color: #ffb84d; box-shadow: inset 0 0 0 1px rgba(255,184,77,.3); }
.v34-post-slot-tab.active.day { background: rgba(77,171,255,.16); color: #4dabff; box-shadow: inset 0 0 0 1px rgba(77,171,255,.3); }
.v34-post-slot-tab.active.night { background: rgba(183,148,246,.18); color: #b794f6; box-shadow: inset 0 0 0 1px rgba(183,148,246,.3); }
.v34-post-slot-tab.active.all-day { background: rgba(0,212,170,.16); color: #00d4aa; box-shadow: inset 0 0 0 1px rgba(0,212,170,.3); }
/* 4.4(в): Слоты «Комбинатор» в модале редактирования креатива */
.v34-post-cre-slot-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.v34-post-cre-slot-row .lbl { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); min-width: 60px; }
.v34-post-cre-slot-row input { flex: 1; }
/* COMMUNITIES §1.3: viral-badge в строке списка сообществ */
.v34-cm-viral { margin-left: 6px; font-size: 12px; vertical-align: middle; filter: drop-shadow(0 0 4px rgba(255,107,107,.5)); }
/* CLEANER §6.10: список задач очистки (pending+running+done) */
.v34-cl-tasks { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.v34-cl-task-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm, 8px); }
.v34-cl-task-status { font-size: 10.5px; padding: 3px 8px; border-radius: var(--r-pill, 999px); font-weight: 600; text-align: center; }
.v34-cl-task-status.done { color: var(--success); background: rgba(0,212,170,.14); }
.v34-cl-task-status.pending { color: var(--warning); background: rgba(255,184,77,.14); }
.v34-cl-task-status.running { color: var(--info); background: rgba(77,171,255,.14); }
.v34-cl-task-status.err { color: var(--danger); background: rgba(239,68,68,.12); }
.v34-cl-task-name { font-size: 12px; color: var(--text-primary); font-weight: 500; font-family: var(--font-mono, monospace); }
.v34-cl-task-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
/* PARSER §6.7: AI-блок в карточке поста (score+verdict+reason) */
.v34-search-card-ai { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0 0; border-top: 1px dashed var(--border); margin-top: 6px; }
.v34-search-card-ai .ai-score { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill, 999px); font-family: var(--font-mono, monospace); }
.v34-search-card-ai .ai-score.top { background: rgba(34,197,94,.18); color: var(--success); }
.v34-search-card-ai .ai-score.good { background: rgba(77,171,255,.18); color: var(--info); }
.v34-search-card-ai .ai-score.mid { background: rgba(255,184,77,.18); color: var(--warning); }
.v34-search-card-ai .ai-score.low { background: rgba(239,68,68,.16); color: var(--danger); }
.v34-search-card-ai .ai-verdict { font-size: 11px; color: var(--text-secondary); }
.v34-search-card-ai .ai-reason { font-size: 11px; color: var(--text-muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* PARSER §6.7: per-community stats строкой под чипами параметров задачи */
.v34-search-comm-stats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 11px; }
.v34-search-comm-stats .lbl { color: var(--text-muted); margin-right: 4px; }
.v34-search-comm-stat { padding: 3px 7px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-pill, 999px); color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.v34-search-comm-stat.muted { opacity: 0.55; }
.v34-search-comm-stat.err { color: var(--danger); border-color: rgba(239,68,68,.3); }
/* PARSER §6.6: error-status badge для задач */
.v34-search-task-status.error { background: var(--danger, #ef4444); box-shadow: 0 0 6px var(--danger, #ef4444); }
/* PARSER §6.9: кнопка удаления задачи в списке слева */
.v34-search-task { position: relative; }
.v34-search-task-del { position: absolute; top: 8px; right: 8px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--r-sm, 8px); font-size: 12px; opacity: 0; transition: all var(--t-fast, 120ms); }
.v34-search-task:hover .v34-search-task-del { opacity: 0.7; }
.v34-search-task-del:hover { opacity: 1 !important; color: var(--danger); background: rgba(239,68,68,.1); }
/* 1.2: модал «Слоты в HH:00» — таблица сообществ с кликабельным именем и точным временем */
.v34-cs-hour-list { display: flex; flex-direction: column; gap: 6px; }
.v34-cs-hour-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-sm, 8px); }
.v34-cs-hour-row .name { color: var(--text-primary); font-size: 13px; font-weight: 500; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v34-cs-hour-row .name:hover { color: var(--accent, #6c5ce7); text-decoration: underline; }
.v34-cs-hour-row .cid { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: 11px; }
.v34-cs-hour-row .time { color: var(--text-secondary); font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; padding: 3px 8px; background: var(--bg-card); border-radius: var(--r-pill, 999px); }
/* 5.2: модал «Новая задача поиска» — динамический список сообществ + AND/OR */
.v34-search-new-comm-row { display: grid; grid-template-columns: 30px 1fr 130px auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.v34-search-new-comm-row .lbl { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); text-align: center; }
.v34-search-new-kwmode-bar { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); }
.v34-search-new-kwmode-bar button { padding: 6px 12px; }
.v34-search-new-kwmode-bar button.active { background: var(--accent-glow); color: var(--accent-text); border-color: transparent; }
/* 4.3: модал истории задач рекламы */
.v34-post-hist-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); align-items: center; }
.v34-post-hist-row:last-child { border-bottom: none; }
.v34-post-hist-status { font-size: 11px; padding: 4px 8px; border-radius: var(--r-pill, 999px); text-align: center; font-weight: 600; }
.v34-post-hist-status.done { color: var(--success); background: var(--success-bg, rgba(0,212,170,.12)); }
.v34-post-hist-status.pending { color: var(--warning); background: rgba(255,184,77,.12); }
.v34-post-hist-name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.v34-post-hist-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.v34-post-hist-actions { display: flex; gap: 6px; }
.v34-post-hist-actions button { font-size: 11.5px; padding: 6px 10px; }
/* 2026-05-11: batch-группировка «Весь день» — родительская строка + свёрнутые child'ы */
.v34-post-hist-batch {
border-bottom: 1px solid var(--border);
}
.v34-post-hist-batch:last-child { border-bottom: none; }
.v34-post-hist-batch-head {
background: linear-gradient(135deg, rgba(124,92,255,.06), rgba(183,148,246,.02));
cursor: pointer;
transition: background 120ms;
border-bottom: none !important;
}
.v34-post-hist-batch-head:hover {
background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(183,148,246,.04));
}
.v34-post-hist-batch-head .v34-post-hist-name { color: rgba(183,148,246,.95); font-weight: 600; }
.v34-post-hist-arrow {
display: inline-block;
transition: transform 180ms;
font-size: 12px;
}
.v34-post-hist-batch-children {
background: rgba(0,0,0,0.16);
border-top: 1px solid var(--border);
padding: 4px 0;
}
.v34-post-hist-batch-children .v34-post-hist-row {
grid-template-columns: 30px 1fr auto;
padding: 8px 14px 8px 30px;
border-bottom: 1px solid rgba(255,255,255,.03);
font-size: 12px;
background: transparent;
}
.v34-post-hist-batch-children .v34-post-hist-row:last-child { border-bottom: none; }
.v34-post-hist-batch-children .v34-post-hist-status {
font-size: 12px;
padding: 2px 0;
min-width: 22px;
background: transparent !important;
}
.v34-post-hist-batch-children .v34-post-hist-name { font-size: 12px; font-weight: 500; }
.v34-post-hist-batch-children .v34-post-hist-meta { font-size: 10.5px; }
.v34-post-hist-batch-children .v34-post-hist-actions button {
font-size: 11px; padding: 4px 8px;
}
.v34-post-hist-batch-expand {
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-muted) !important;
padding: 4px 8px !important;
}
.v34-post-hist-batch-expand:hover {
color: var(--text-primary) !important;
border-color: rgba(124,92,255,.4) !important;
}
/* Batch в очереди (правый сайдбар) */
.v34-post-q-item.v34-post-q-batch {
border: 1px solid rgba(124,92,255,.30);
background: linear-gradient(135deg, rgba(124,92,255,.05), rgba(183,148,246,.02));
}
.v34-post-q-item.v34-post-q-batch .v34-post-q-name {
color: rgba(183,148,246,.95);
font-weight: 600;
}
.v34-post-subslots { display: inline-flex; gap: 4px; padding-left: var(--s-3, 12px); border-left: 1px solid var(--border); }
.v34-post-subslot {
padding: 6px 12px;
border-radius: var(--r-sm, 8px);
background: var(--bg-card); border: 1px solid var(--border);
cursor: pointer;
font-size: 12px; font-family: var(--font-mono, monospace);
color: var(--text-secondary);
display: inline-flex; align-items: center; gap: 6px;
transition: all var(--t-fast) var(--ease-out);
}
.v34-post-subslot:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-post-subslot.active { background: var(--accent-glow); color: var(--accent-text); border-color: transparent; }
.v34-post-subslot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.v34-post-subslot.active .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.v34-post-spacer { flex: 1; }
.v34-post-add-btn {
background: linear-gradient(135deg, var(--accent), #9d7cff);
color: #fff; border: none;
padding: 8px 14px;
border-radius: var(--r-md, 14px);
font-size: 13px; font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
box-shadow: 0 4px 12px var(--accent-glow);
transition: all var(--t-fast) var(--ease-out);
font-family: inherit;
}
.v34-post-add-btn:hover { box-shadow: 0 6px 20px var(--accent-glow), var(--sh-glow); transform: translateY(-1px); }
/* Body */
.v34-post-body {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--s-5, 20px);
padding: var(--s-6, 24px) var(--s-6, 24px) calc(80px + var(--s-6, 24px));
}
@media (max-width: 1100px) { .v34-post-body { grid-template-columns: 1fr; } }
.v34-post-creatives { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5, 20px); }
@media (max-width: 720px) { .v34-post-creatives { grid-template-columns: 1fr; } }
.v34-post-cre {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--r-lg, 20px);
padding: var(--s-5, 20px);
display: flex; flex-direction: column; gap: var(--s-3, 12px);
transition: all var(--t-base) var(--ease-out);
position: relative; overflow: hidden;
}
.v34-post-cre::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-ads); opacity: .7; transform: scaleX(.4); transform-origin: left; transition: transform var(--t-base) var(--ease-out); }
.v34-post-cre:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--sh-card-hover); }
.v34-post-cre:hover::before { transform: scaleX(1); }
.v34-post-cre-head { display: flex; align-items: center; justify-content: space-between; }
.v34-post-cre-num { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-post-cre-num .badge { width: 22px; height: 22px; background: var(--grad-ads); border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; font-family: var(--font-display, 'Onest', sans-serif); }
.v34-post-cre-actions { display: flex; gap: 4px; }
.v34-post-cre-btn { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; transition: all var(--t-fast) var(--ease-out); }
.v34-post-cre-btn:hover { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
.v34-post-cre-btn.danger:hover { color: var(--danger); border-color: var(--danger-bg); }
.v34-post-cre-btn svg { width: 14px; height: 14px; }
.v34-post-cre-text {
font-size: 13.5px; line-height: 1.5; color: var(--text-primary);
background: var(--bg-input);
border-radius: var(--r-md, 14px);
padding: var(--s-4, 16px);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.v34-post-cre-attach { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.v34-post-cre-attach .icon { width: 22px; height: 22px; border-radius: 6px; background: var(--bg-input); display: grid; place-items: center; }
.v34-post-cre-foot { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); }
.v34-post-cre-foot .domain { font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.v34-post-add-tile {
border: 2px dashed var(--border-hover);
background: transparent;
border-radius: var(--r-lg, 20px);
padding: var(--s-5, 20px);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--s-3, 12px);
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
transition: all var(--t-base) var(--ease-out);
min-height: 220px;
font-family: inherit;
}
.v34-post-add-tile:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-glow); transform: translateY(-2px); }
.v34-post-add-tile .plus { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); display: grid; place-items: center; font-size: 22px; font-weight: 300; color: var(--accent-text); transition: all var(--t-base) var(--ease-out); }
.v34-post-add-tile:hover .plus { background: var(--accent); color: #fff; box-shadow: var(--sh-glow); }
.v34-post-right { display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-post-queue-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 20px);
display: flex; flex-direction: column;
position: sticky; top: calc(68px + 64px);
}
.v34-post-queue-head { padding: var(--s-4, 16px) var(--s-5, 20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.v34-post-queue-title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-post-queue-more {
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
background: transparent;
border: 1px solid var(--border);
padding: 5px 10px;
border-radius: var(--r-sm, 8px);
font-family: inherit;
transition: all var(--t-fast, 120ms) var(--ease-out);
}
.v34-post-queue-more:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-input); }
.v34-post-queue-list { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.v34-post-q-item {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center; gap: var(--s-3, 12px);
padding: var(--s-3, 12px) var(--s-4, 16px);
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background var(--t-fast) var(--ease-out);
}
.v34-post-q-item:hover { background: var(--bg-input); }
.v34-post-q-item:last-child { border: none; }
.v34-post-q-thumb { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; font-size: 12px; color: #fff; }
.v34-post-q-info { min-width: 0; }
.v34-post-q-name { font-size: 13px; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-post-q-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-post-q-when { text-align: right; font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-secondary); }
.v34-post-q-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 12px; }
/* I21: cancel-кнопка для items очереди */
.v34-post-q-cancel {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--r-pill, 999px);
color: var(--text-muted);
cursor: pointer;
width: 24px; height: 24px;
font-size: 13px; line-height: 1;
margin-left: var(--s-2, 8px);
transition: all var(--t-fast, 120ms);
}
.v34-post-q-cancel:hover { color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.v34-post-tip { padding: var(--s-5, 20px); }
.v34-post-tip-h { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; margin-bottom: var(--s-3, 12px); }
.v34-post-tip-b { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
/* Sticky bottom post bar */
.v34-post-bar {
position: fixed;
left: 240px; right: 0; bottom: 0;
background: rgba(18, 18, 26, .92);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border-top: 1px solid var(--border-hover);
padding: var(--s-4, 16px) var(--s-6, 24px);
display: flex; align-items: center; gap: var(--s-4, 16px);
z-index: 30;
flex-wrap: wrap;
}
body.collapsed .v34-post-bar { left: 64px; }
.v34-post-field {
display: inline-flex; align-items: center; gap: var(--s-2, 8px);
background: var(--bg-card); border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 8px 12px;
font-size: 13px; font-family: var(--font-mono, monospace);
cursor: pointer; color: var(--text-primary);
transition: all var(--t-fast) var(--ease-out);
}
.v34-post-field:hover { border-color: var(--border-hover); }
.v34-post-field svg { width: 14px; height: 14px; color: var(--text-muted); }
.v34-post-field .lbl { color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; font-weight: 600; }
.v34-post-strategy { display: inline-flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; gap: 2px; }
.v34-post-strategy button { padding: 6px 12px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 12px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease-out); }
.v34-post-strategy button:hover { color: var(--text-primary); }
.v34-post-strategy button.active { background: var(--bg-input); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-post-grow { flex: 1; min-width: 0; }
.v34-post-meta { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-post-publish-btn {
background: linear-gradient(135deg, var(--accent), #9d7cff);
color: #fff; border: none;
padding: 12px 22px;
border-radius: var(--r-md, 14px);
font-size: 14px; font-weight: 600;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 4px 14px var(--accent-glow);
transition: all var(--t-fast) var(--ease-out);
font-family: inherit;
}
.v34-post-publish-btn:hover { box-shadow: 0 6px 24px var(--accent-glow), var(--sh-glow); transform: translateY(-1px); }
/* I22: dry-run preview кнопка — outline-стиль рядом с publish */
.v34-post-preview-btn {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 12px 18px;
border-radius: var(--r-md, 14px);
font-size: 14px; font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
margin-right: 8px;
transition: all var(--t-fast) var(--ease-out);
font-family: inherit;
}
.v34-post-preview-btn:hover { border-color: var(--accent); color: var(--accent-text, #b8a4ff); }
.v34-post-preview-btn:disabled { opacity: 0.55; cursor: wait; }
/* Скрываем post-bar когда не на странице posting */
body:not(.on-posting) .v34-post-bar { display: none; }
@media (max-width: 768px) {
.v34-post-head { padding: var(--s-4, 16px); }
.v34-post-title h1 { font-size: 22px; }
.v34-post-summary { gap: var(--s-4, 16px); }
.v34-post-summary .v { font-size: 18px; }
.v34-post-body { padding: var(--s-4, 16px); padding-bottom: 140px; gap: var(--s-4, 16px); }
.v34-post-creatives { grid-template-columns: 1fr; gap: var(--s-3, 12px); }
.v34-post-queue-card { position: static; }
.v34-post-bar { left: 0; padding: var(--s-3, 12px) var(--s-4, 16px); gap: var(--s-2, 8px); }
.v34-post-grow { display: none; }
body.collapsed .v34-post-bar { left: 0; }
}
/* =====================================================================
M05 «Promote Wizard» — .v34-wiz (модалка cross-cutting)
===================================================================== */
.v34-wiz-backdrop {
position: fixed; inset: 0;
background: rgba(5, 5, 10, .72);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
z-index: 200;
display: none;
align-items: center; justify-content: center;
padding: var(--s-6, 24px);
overflow-y: auto;
}
.v34-wiz-backdrop.open { display: flex; animation: v34WizFade 200ms var(--ease-out); }
@keyframes v34WizFade { from { opacity: 0; } to { opacity: 1; } }
.v34-wiz {
width: 760px; max-width: 100%;
background: var(--bg-card);
border: 1px solid var(--border-hover);
border-radius: var(--r-2xl, 36px);
box-shadow: var(--sh-card-hover), var(--sh-glow);
display: flex; flex-direction: column;
max-height: 90vh;
overflow: hidden;
animation: v34WizIn 350ms var(--ease-spring);
}
@keyframes v34WizIn {
from { transform: translateY(20px) scale(.95); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.v34-wiz-head { padding: var(--s-5, 20px) var(--s-6, 24px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-wiz-title { font-family: var(--font-display, 'Onest', sans-serif); font-size: 20px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--s-2, 8px); }
.v34-wiz-title .ico { font-size: 22px; }
.v34-wiz-close {
margin-left: auto;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--bg-input); border: 1px solid var(--border);
color: var(--text-muted);
cursor: pointer;
display: grid; place-items: center;
transition: all var(--t-fast) var(--ease-out);
}
.v34-wiz-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-wiz-stepper { display: flex; padding: 0 var(--s-6, 24px); margin-top: var(--s-4, 16px); margin-bottom: calc(var(--s-5, 20px) * -1); gap: 0; }
.v34-wiz-step { flex: 1; display: flex; align-items: center; gap: var(--s-3, 12px); cursor: pointer; padding: var(--s-3, 12px) 0; border-bottom: 2px solid var(--border); transition: all var(--t-base) var(--ease-out); }
.v34-wiz-step:hover { border-bottom-color: var(--border-hover); }
.v34-wiz-step.active { border-bottom-color: var(--accent); }
.v34-wiz-step.done { border-bottom-color: var(--success); }
.v34-wiz-step .num { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; transition: all var(--t-base) var(--ease-out); }
.v34-wiz-step.active .num { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-glow); }
.v34-wiz-step.done .num { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.v34-wiz-step .lbl { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.v34-wiz-step.active .lbl { color: var(--text-primary); }
.v34-wiz-step.done .lbl { color: var(--success); }
.v34-wiz-step .desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; font-family: var(--font-mono, monospace); }
.v34-wiz-body { padding: var(--s-8, 32px) var(--s-6, 24px) var(--s-6, 24px); overflow-y: auto; flex: 1; }
.v34-wiz-pane { display: none; }
.v34-wiz-pane.active { display: block; animation: v34WizStepIn 250ms var(--ease-out); }
@keyframes v34WizStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.v34-wiz-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; margin-bottom: var(--s-3, 12px); display: flex; align-items: center; gap: 6px; margin-top: var(--s-5, 20px); }
.v34-wiz-section-label:first-child { margin-top: 0; }
.v34-wiz-source {
background: var(--bg-input); border: 1px solid var(--border);
border-radius: var(--r-lg, 20px);
padding: var(--s-5, 20px);
display: grid; grid-template-columns: 80px 1fr;
gap: var(--s-5, 20px);
}
.v34-wiz-source-thumb { width: 80px; height: 80px; border-radius: var(--r-md, 14px); background: var(--grad-viral); display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; color: #fff; }
.v34-wiz-from { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.v34-wiz-source-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.v34-wiz-source-text { color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; margin-top: var(--s-3, 12px); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.v34-wiz-source-stats { display: flex; gap: var(--s-5, 20px); padding: var(--s-4, 16px) 0; border-bottom: 1px solid var(--border); margin: var(--s-5, 20px) 0; }
.v34-wiz-stat .v { font-family: var(--font-mono, monospace); font-size: 18px; font-weight: 600; color: var(--text-primary); }
.v34-wiz-stat .v.reach { color: #00d4ff; }
.v34-wiz-stat .v.delta { color: var(--success); }
.v34-wiz-stat .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.v34-wiz-toggles { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-wiz-toggle-row { display: flex; align-items: center; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-4, 16px); background: var(--bg-input); border-radius: var(--r-md, 14px); border: 1px solid transparent; cursor: pointer; transition: all var(--t-fast) var(--ease-out); }
.v34-wiz-toggle-row:hover { border-color: var(--border); }
.v34-wiz-toggle-row.on { background: var(--accent-glow); border-color: rgba(124,92,255,.3); }
.v34-wiz-toggle { width: 36px; height: 20px; background: var(--border); border-radius: var(--r-pill, 999px); position: relative; flex-shrink: 0; transition: background var(--t-fast) var(--ease-out); }
.v34-wiz-toggle::after { content:''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform var(--t-fast) var(--ease-spring); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-wiz-toggle-row.on .v34-wiz-toggle { background: var(--accent); }
.v34-wiz-toggle-row.on .v34-wiz-toggle::after { transform: translateX(16px); }
.v34-wiz-toggle-row .t { font-size: 13.5px; color: var(--text-primary); font-weight: 500; }
.v34-wiz-toggle-row .s { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.v34-wiz-ai-bar { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px) var(--s-4, 16px); display: flex; align-items: center; gap: var(--s-3, 12px); margin-bottom: var(--s-5, 20px); font-size: 12.5px; font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.v34-wiz-ai-bar .ico { width: 22px; height: 22px; border-radius: 6px; background: var(--accent-glow); display: grid; place-items: center; color: var(--accent-text); flex-shrink: 0; }
.v34-wiz-vars-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4, 16px); }
@media (max-width: 600px) { .v34-wiz-vars-grid { grid-template-columns: 1fr; } }
.v34-wiz-variant {
background: var(--bg-input); border: 1.5px solid var(--border);
border-radius: var(--r-lg, 20px);
padding: var(--s-4, 16px);
display: flex; flex-direction: column; gap: var(--s-3, 12px);
cursor: pointer;
transition: all var(--t-base) var(--ease-out);
position: relative;
}
.v34-wiz-variant:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.v34-wiz-variant.sel { border-color: var(--accent); background: linear-gradient(135deg, rgba(124,92,255,.08), rgba(183,148,246,.04)); }
.v34-wiz-variant.sel::before {
content: '✓';
position: absolute; top: 12px; right: 12px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--accent); color: #fff;
display: grid; place-items: center;
font-size: 12px; font-weight: 700;
box-shadow: 0 0 0 3px var(--accent-glow);
}
.v34-wiz-var-head { display: flex; align-items: center; gap: var(--s-2, 8px); }
.v34-wiz-var-style { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; padding: 3px 8px; border-radius: var(--r-pill, 999px); font-family: var(--font-mono, monospace); }
.v34-wiz-var-style.emo { background: rgba(255,107,157,.16); color: #ff8da8; }
.v34-wiz-var-style.sell { background: rgba(0,212,255,.16); color: #00d4ff; }
.v34-wiz-var-style.native { background: rgba(0,214,143,.16); color: var(--success); }
.v34-wiz-var-style.prov { background: rgba(255,184,77,.16); color: var(--warning); }
.v34-wiz-var-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.v34-wiz-summary {
background: linear-gradient(135deg, var(--accent-glow), transparent);
border: 1px solid rgba(124,92,255,.3);
border-radius: var(--r-lg, 20px);
padding: var(--s-5, 20px);
display: grid; grid-template-columns: 1fr auto;
gap: var(--s-4, 16px);
margin-bottom: var(--s-6, 24px);
}
.v34-wiz-summary .head { font-size: 11px; color: var(--accent-text); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.v34-wiz-summary .name { font-family: var(--font-display, 'Onest', sans-serif); font-size: 18px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
.v34-wiz-summary .desc { font-size: 13px; color: var(--text-secondary); margin-top: 6px; }
.v34-wiz-summary .est .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.v34-wiz-summary .est .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 24px; font-weight: 700; background: var(--grad-content); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.v34-wiz-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4, 16px); }
@media (max-width: 600px) { .v34-wiz-field-grid { grid-template-columns: 1fr; } }
.v34-wiz-field { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.v34-wiz-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-wiz-field input, .v34-wiz-field select { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); font-family: inherit; }
.v34-wiz-field input:focus, .v34-wiz-field select:focus { outline: none; border-color: var(--accent); }
.v34-wiz-slot-pick { display: inline-flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 4px; gap: 2px; }
.v34-wiz-slot-pick button { flex: 1; padding: 8px 12px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 12.5px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease-out); }
.v34-wiz-slot-pick button:hover { color: var(--text-primary); }
.v34-wiz-slot-pick button.active.morning { background: rgba(255,184,77,.16); color: #ffb84d; }
.v34-wiz-slot-pick button.active.day { background: rgba(77,171,255,.16); color: #4dabff; }
.v34-wiz-slot-pick button.active.night { background: rgba(183,148,246,.18); color: #b794f6; }
.v34-wiz-success { text-align: center; padding: var(--s-12, 48px) var(--s-6, 24px); display: flex; flex-direction: column; align-items: center; gap: var(--s-5, 20px); }
.v34-wiz-success-ico { width: 96px; height: 96px; border-radius: 50%; background: var(--success-bg); border: 2px solid var(--success); display: grid; place-items: center; color: var(--success); font-size: 44px; animation: v34WizBounce 600ms var(--ease-spring); }
@keyframes v34WizBounce { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.v34-wiz-success h2 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 28px; font-weight: 700; letter-spacing: -.025em; }
.v34-wiz-success p { color: var(--text-secondary); max-width: 380px; line-height: 1.55; }
.v34-wiz-foot { padding: var(--s-4, 16px) var(--s-6, 24px); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--s-3, 12px); background: var(--bg-elevated, var(--bg-input)); }
.v34-wiz-step-counter { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); margin: 0 auto; }
.v34-wiz-btn {
padding: 9px 16px;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--text-primary);
border-radius: var(--r-md, 14px);
font-size: 13px; font-family: inherit;
cursor: pointer;
transition: all var(--t-fast) var(--ease-out);
}
.v34-wiz-btn:hover:not([disabled]) { border-color: var(--border-hover); }
.v34-wiz-btn[disabled] { opacity: .4; cursor: not-allowed; }
.v34-wiz-btn.primary { background: linear-gradient(135deg, var(--accent), #9d7cff); border-color: transparent; color: #fff; }
.v34-wiz-btn.primary:hover { box-shadow: 0 4px 14px var(--accent-glow); }
.v34-wiz-btn.run { background: linear-gradient(135deg, var(--accent), #ff6b9d); padding: 11px 22px; }
@media (max-width: 768px) {
.v34-wiz-backdrop { padding: 0; }
.v34-wiz { max-height: 100vh; height: 100vh; border-radius: 0; max-width: 100vw; }
.v34-wiz-head { padding: var(--s-4, 16px) var(--s-5, 20px); }
.v34-wiz-stepper { padding: 0 var(--s-5, 20px); margin-top: var(--s-3, 12px); margin-bottom: calc(var(--s-4, 16px) * -1); gap: var(--s-2, 8px); }
.v34-wiz-body { padding: var(--s-6, 24px) var(--s-5, 20px) var(--s-5, 20px); }
}
/* =====================================================================
M07 «Боты» (unified) — .v34-bots
===================================================================== */
.v34-bots { padding: 0 !important; }
.v34-bots-head { padding: var(--s-6, 24px) var(--s-6, 24px) 0; border-bottom: 1px solid var(--border); background: var(--bg-base, #0a0a0f); }
.v34-bots-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; padding-bottom: var(--s-5, 20px); }
.v34-bots h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-bots-accent { background: var(--grad-queue); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-bots-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
/* Primary platform tabs: Telegram / ВКонтакте (E1.redesign 2026-05-10) */
.v34-bots-platform-tabs {
display: flex;
gap: 8px;
padding: 4px;
background: rgba(255,255,255,0.025);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
margin-bottom: 12px;
width: fit-content;
}
.v34-bots-platform {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-sm, 8px);
color: var(--text-muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background-color 180ms, color 180ms, border-color 180ms;
}
.v34-bots-platform:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.v34-bots-platform.active {
color: var(--text-primary);
background: var(--bg-card);
border-color: var(--border);
box-shadow: 0 1px 3px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.v34-bots-platform[data-bots-platform="tg"].active { box-shadow: 0 1px 3px rgba(56,168,230,0.18), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 0 #38a8e6; }
.v34-bots-platform[data-bots-platform="vk"].active { box-shadow: 0 1px 3px rgba(81,129,184,0.2), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -2px 0 #5181b8; }
.v34-bots-platform-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22);
transition: filter 180ms;
flex-shrink: 0;
}
.v34-bots-platform-mark svg { width: 16px; height: 16px; display: block; }
.v34-bots-platform-mark.tg { background: linear-gradient(135deg, #38a8e6, #1d7fc7); }
.v34-bots-platform-mark.vk { background: linear-gradient(135deg, #4a76a8, #5181b8); }
.v34-bots-platform:not(.active) .v34-bots-platform-mark { filter: grayscale(0.4) brightness(0.82); }
.v34-bots-platform:hover .v34-bots-platform-mark { filter: none; }
.v34-bots-platform-name { letter-spacing: 0.005em; }
.v34-bots-ch-tabs { display: flex; gap: var(--s-2, 8px); margin-bottom: -1px; flex-wrap: wrap; }
.v34-bots-ch {
padding: 10px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-bottom: 1px solid transparent;
border-radius: var(--r-md, 14px) var(--r-md, 14px) 0 0;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
font-family: inherit;
transition: all var(--t-fast) var(--ease-out);
}
.v34-bots-ch:hover { color: var(--text-primary); }
.v34-bots-ch.active { background: var(--bg-card); color: var(--text-primary); border-bottom-color: var(--bg-card); position: relative; z-index: 1; box-shadow: 0 -2px 0 var(--accent) inset; }
.v34-bots-ch .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.v34-bots-ch[data-bots-ch="tg"].active .dot { background: #38a8e6; box-shadow: 0 0 6px #38a8e6; }
.v34-bots-ch[data-bots-ch="vk"].active .dot { background: #4a76a8; box-shadow: 0 0 6px #4a76a8; }
.v34-bots-ch[data-bots-ch="sender"].active .dot { background: #b794f6; box-shadow: 0 0 6px #b794f6; }
.v34-bots-ch[data-bots-ch="comments"].active .dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
/* E1.redesign: subtab mark больше не нужен (платформа выделена в primary-tabs).
Селекторы оставлены для backward-compat если где-то остались. */
.v34-bots-ch-mark { display: none; }
.v34-bots-ch[hidden] { display: none !important; }
.v34-bots-ch .ct { font-family: var(--font-mono, monospace); font-size: 11px; opacity: .7; background: var(--bg-input); padding: 1px 6px; border-radius: var(--r-pill, 999px); }
.v34-bots-body { padding: var(--s-6, 24px); }
.v34-bots-pane { display: none; }
.v34-bots-pane.active { display: block; animation: v34BotsPaneIn 200ms var(--ease-out); }
@keyframes v34BotsPaneIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.v34-bots-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4, 16px); }
@media (max-width: 700px) { .v34-bots-strip { grid-template-columns: repeat(2, 1fr); } }
.v34-bots-stat { padding: var(--s-4, 16px) var(--s-5, 20px); position: relative; overflow: hidden; }
.v34-bots-stat .lbl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.v34-bots-stat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; color: var(--text-primary); }
.v34-bots-webhook { display: flex; align-items: center; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-4, 16px); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--text-secondary); }
.v34-bots-webhook .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.v34-bots-webhook .lbl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; flex-shrink: 0; }
.v34-bots-webhook .copy-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 5px 10px; border-radius: var(--r-sm, 8px); font-size: 11px; cursor: pointer; font-family: inherit; transition: all var(--t-fast) var(--ease-out); flex-shrink: 0; }
.v34-bots-webhook .copy-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-bots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4, 16px); }
.v34-bots-list { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.v34-bots-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-bots-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: var(--s-4, 16px);
display: flex; flex-direction: column; gap: var(--s-3, 12px);
transition: border-color var(--t-fast) var(--ease-out);
}
.v34-bots-card:hover { border-color: var(--border-hover); }
.v34-bots-card-head { display: flex; align-items: center; gap: var(--s-3, 12px); }
.v34-bots-avatar { width: 36px; height: 36px; border-radius: 9px; background: var(--grad-brand); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.v34-bots-card-name { font-size: 13.5px; color: var(--text-primary); font-weight: 500; }
.v34-bots-card-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-bots-card-status { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success); }
.v34-bots-card-status.warn { background: var(--warning); box-shadow: 0 0 6px var(--warning); }
.v34-bots-card-status.err { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
/* I34: webhook URL block + edit/delete actions */
.v34-bots-card-info { flex: 1; min-width: 0; }
.v34-bots-card-wh {
margin-top: var(--s-2, 8px);
padding: 6px 10px;
background: var(--bg-input);
border-radius: var(--r-sm, 6px);
display: flex;
align-items: center;
gap: var(--s-2, 8px);
font-size: 11px;
overflow: hidden;
}
.v34-bots-wh-label { color: var(--text-muted); flex-shrink: 0; }
.v34-bots-wh-url {
flex: 1;
color: var(--text-secondary);
font-family: var(--font-mono, monospace);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.v34-bots-wh-copy {
background: transparent; border: 1px solid var(--border);
color: var(--text-muted); cursor: pointer;
border-radius: var(--r-sm, 6px); padding: 2px 8px; font-size: 12px;
}
.v34-bots-wh-copy:hover { color: var(--accent); border-color: var(--accent); }
.v34-bots-card-actions {
margin-top: var(--s-2, 8px); display: flex; gap: var(--s-2, 8px); justify-content: flex-end;
}
.v34-bots-action-btn {
background: var(--bg-input); border: 1px solid var(--border);
color: var(--text-secondary); cursor: pointer;
border-radius: var(--r-sm, 6px); padding: 4px 10px; font-size: 11.5px;
font-family: inherit;
transition: all var(--t-fast, 120ms);
}
.v34-bots-action-btn:hover { border-color: var(--accent); color: var(--accent-text, #b8a4ff); }
.v34-bots-action-btn.danger:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
@media (max-width: 768px) {
.v34-bots-head { padding: var(--s-4, 16px) var(--s-4, 16px) 0; }
.v34-bots h1 { font-size: 22px; }
.v34-bots-body { padding: var(--s-4, 16px); }
.v34-bots-strip { grid-template-columns: repeat(2, 1fr); }
.v34-bots-grid { grid-template-columns: 1fr; }
}
/* =====================================================================
M04 «Поиск контента» — .v34-search
===================================================================== */
.v34-search { min-height: 100%; }
.v34-search.active { display: flex; flex-direction: column; }
.v34-search-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-search-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-search h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-search-accent { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-search-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-search-summary { display: flex; gap: var(--s-6, 24px); }
.v34-search-sumitem .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; line-height: 1; }
.v34-search-sumitem .v.v-content { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-search-sumitem .v.v-viral { background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-search-sumitem .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; }
.v34-search-body { display: grid; grid-template-columns: 300px 1fr; gap: var(--s-5, 20px); padding: var(--s-6, 24px); align-items: start; }
.v34-search-rail { position: sticky; top: calc(68px + var(--s-6, 24px)); display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-search-new-btn {
display: flex; align-items: center; justify-content: center; gap: var(--s-2, 8px);
padding: 12px;
border-radius: var(--r-md, 14px);
background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff);
color: #fff;
border: none;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3));
transition: all var(--t-fast, 120ms) var(--ease-out);
font-family: inherit;
}
.v34-search-new-btn .ico { font-size: 16px; line-height: 1; }
.v34-search-new-btn:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); transform: translateY(-1px); }
.v34-search-rail-section { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; padding: var(--s-3, 12px) var(--s-2, 8px) var(--s-1, 4px); }
.v34-search-tasks { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.v34-search-task-empty { padding: var(--s-4, 16px); text-align: center; color: var(--text-muted); font-size: 12.5px; font-family: var(--font-mono, monospace); }
/* I29: empty-state CTA */
.v34-search-task-empty-cta {
margin-top: var(--s-3, 12px);
background: var(--accent-glow, rgba(124,92,255,.15));
color: var(--accent-text, #b8a4ff);
border: 1px solid var(--accent, #7c5cff);
border-radius: var(--r-pill, 999px);
padding: 8px 14px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
transition: all var(--t-fast, 120ms);
}
.v34-search-task-empty-cta:hover { background: var(--accent, #7c5cff); color: #fff; }
.v34-search-task {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: var(--s-3, 12px) var(--s-4, 16px);
cursor: pointer;
transition: all var(--t-fast, 120ms) var(--ease-out);
position: relative;
}
.v34-search-task:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.v34-search-task.selected { border-color: transparent; background: var(--accent-glow, rgba(124,92,255,.12)); }
.v34-search-task.selected::before { content: ''; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; background: var(--accent, #7c5cff); border-radius: 3px; }
.v34-search-task-head { display: flex; align-items: center; gap: var(--s-2, 8px); margin-bottom: 4px; }
.v34-search-task-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-disabled, #666); }
.v34-search-task-status.active { background: var(--success, #22c55e); box-shadow: 0 0 8px var(--success, #22c55e); animation: v34SearchPulse 1.8s ease-out infinite; }
.v34-search-task-status.done { background: var(--info, #4dabff); }
.v34-search-task-status.queued { background: var(--warning, #ffb84d); }
@keyframes v34SearchPulse { 0% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }
.v34-search-task-title { font-size: 13px; color: var(--text-primary); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-search-task-cnt { display: flex; gap: var(--s-3, 12px); font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.v34-search-task-cnt .num { color: var(--text-secondary); }
.v34-search-task-progress { height: 3px; background: var(--bg-input); border-radius: 2px; margin-top: var(--s-2, 8px); overflow: hidden; }
.v34-search-task-progress-fill { height: 100%; background: var(--success, #22c55e); border-radius: 2px; transition: width var(--t-slow, 320ms) var(--ease-out); }
.v34-search-results { display: flex; flex-direction: column; gap: var(--s-4, 16px); min-width: 0; }
.v34-search-task-header {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 18px);
padding: var(--s-5, 20px);
}
.v34-search-task-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-search-task-info { min-width: 0; }
.v34-search-task-info h2 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.v34-search-task-info .v34-search-task-meta { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.v34-search-task-actions { display: flex; gap: var(--s-2, 8px); flex-wrap: wrap; }
.v34-search-task-btn {
background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary);
padding: 7px 12px; border-radius: var(--r-sm, 8px); font-size: 12px; font-family: inherit; cursor: pointer;
transition: all var(--t-fast, 120ms) var(--ease-out);
}
.v34-search-task-btn:hover:not([disabled]) { border-color: var(--border-hover); color: var(--text-primary); }
.v34-search-task-btn[disabled] { opacity: .45; cursor: not-allowed; }
.v34-search-task-params { display: flex; flex-wrap: wrap; gap: var(--s-2, 8px); margin-top: var(--s-4, 16px); }
.v34-search-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--bg-input); border-radius: var(--r-pill, 999px); font-size: 11.5px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.v34-search-chip .lbl { color: var(--text-muted); }
.v34-search-chip.ai { background: var(--accent-glow, rgba(124,92,255,.15)); color: var(--accent-text, #b8a4ff); }
.v34-search-chip.warn { background: var(--warn-bg, rgba(255,176,32,.15)); color: var(--warn-text, #ffb020); }
.v34-search-filter-bar {
background: rgba(22, 22, 31, 0.92);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
border-radius: var(--r-lg, 18px);
padding: var(--s-4, 16px) var(--s-5, 20px);
display: flex; align-items: center; gap: var(--s-4, 16px);
flex-wrap: wrap;
position: sticky;
top: calc(68px + var(--s-3, 12px));
z-index: 4;
}
.v34-search-search-input {
background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px);
padding: 6px 10px 6px 12px;
flex: 1; min-width: 200px; max-width: 360px;
display: flex; align-items: center;
}
.v34-search-search-input input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: inherit; }
.v34-search-topn { display: inline-flex; align-items: center; gap: var(--s-3, 12px); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 6px 10px 6px 12px; }
.v34-search-topn .lbl { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-search-topn input[type="range"] { width: 80px; accent-color: var(--accent, #7c5cff); }
.v34-search-topn .v { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--accent-text, #b8a4ff); min-width: 18px; text-align: center; font-weight: 600; }
.v34-search-sort { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 7px 10px; font-size: 12.5px; color: var(--text-primary); font-family: inherit; cursor: pointer; }
.v34-search-sort:focus { outline: none; border-color: var(--border-focus, var(--accent)); }
.v34-search-rescount { margin-left: auto; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-search-rescount strong { color: var(--text-primary); font-weight: 600; }
/* 2026-05-15 (v34.89): чекбокс «Дубликаты» в toolbar результатов. */
.v34-search-dup-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
user-select: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.v34-search-dup-toggle:hover {
border-color: rgba(124,92,255,0.40);
}
.v34-search-dup-toggle input[type="checkbox"] { cursor: pointer; }
.v34-search-dup-toggle .v34-search-dup-count {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
color: var(--text-muted);
}
/* Метка ДУБЛЬ на карточке поста */
.v34-search-card-dup {
margin-left: auto;
padding: 2px 7px;
background: rgba(239,68,68,0.12);
color: #ef4444;
border: 1px solid rgba(239,68,68,0.28);
border-radius: 999px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-mono, monospace);
cursor: help;
}
.v34-search-card-dup-mode {
opacity: 0.82;
border-color: rgba(239,68,68,0.28) !important;
}
.v34-search-card-dup-mode:hover { opacity: 1; }
.v34-search-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4, 16px); }
.v34-search-empty { grid-column: 1 / -1; padding: var(--s-6, 24px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-search-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 18px);
padding: var(--s-4, 16px);
display: flex; flex-direction: column; gap: var(--s-3, 12px);
transition: all var(--t-base, 200ms) var(--ease-out);
position: relative;
cursor: pointer;
overflow: hidden;
min-width: 0;
}
.v34-search-card:hover { border-color: var(--border-hover); transform: translateY(-2px); box-shadow: var(--sh-card-hover, 0 8px 24px rgba(0,0,0,.35)); }
.v34-search-card.sel { border-color: transparent; box-shadow: 0 0 0 2px var(--accent, #7c5cff), var(--sh-card, 0 4px 16px rgba(0,0,0,.3)); }
.v34-search-card.sel::before { content: ''; position: absolute; inset: 0; background: var(--accent-glow, rgba(124,92,255,.10)); pointer-events: none; }
.v34-search-card-comm { display: flex; align-items: center; gap: var(--s-2, 8px); font-size: 11.5px; color: var(--text-secondary); font-family: var(--font-mono, monospace); position: relative; z-index: 2; min-width: 0; }
.v34-search-card-thumb { width: 22px; height: 22px; border-radius: 6px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: #fff; font-size: 10px; flex-shrink: 0; }
.v34-search-card-name { color: var(--text-primary); font-weight: 500; font-family: var(--font-ui, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.v34-search-card-text { font-size: 13px; line-height: 1.5; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; position: relative; z-index: 2; overflow-wrap: anywhere; }
.v34-search-card-attach { display: flex; gap: 4px; position: relative; z-index: 2; }
.v34-search-card-attach .thumb { flex: 1; aspect-ratio: 16 / 9; border-radius: var(--r-sm, 8px); background: var(--bg-input); position: relative; overflow: hidden; }
.v34-search-card-attach .thumb.t1 { background: linear-gradient(135deg, #6366f1, #ec4899); }
.v34-search-card-attach .thumb.t2 { background: linear-gradient(135deg, #00d4ff, #00ffaa); }
.v34-search-card-attach .thumb.t3 { background: linear-gradient(135deg, #ff6b9d, #ffb84d); }
.v34-search-card-attach .thumb.t4 { background: linear-gradient(135deg, #b794f6, #7c5cff); }
.v34-search-card-attach .thumb.t5 { background: linear-gradient(135deg, #4ade80, #22d3ee); }
.v34-search-card-attach .thumb.t6 { background: linear-gradient(135deg, #fdcb6e, #e17055); }
.v34-search-card-attach .badge { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono, monospace); }
.v34-search-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2, 8px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); position: relative; z-index: 2; }
.v34-search-card-stats .stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v34-search-card-stats .stat .v { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); font-weight: 500; }
.v34-search-card-stats .stat .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.v34-search-card-stats .stat .v.reach { color: #00d4ff; }
.v34-search-card-stats .stat .v.delta { color: var(--success, #22c55e); font-size: 11px; }
.v34-search-card-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); position: relative; z-index: 2; gap: var(--s-2, 8px); min-width: 0; }
.v34-search-card-foot > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v34-search-card-foot .actions { display: flex; gap: 4px; }
.v34-search-card-foot .ico-btn { width: 26px; height: 26px; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; font-size: 12px; transition: all var(--t-fast, 120ms) var(--ease-out); }
.v34-search-card-foot .ico-btn:hover { background: var(--bg-input); color: var(--text-primary); border-color: var(--border); }
.v34-search-card-foot .ico-btn.promo:hover { color: var(--accent-text, #b8a4ff); border-color: rgba(124,92,255,.4); background: var(--accent-glow, rgba(124,92,255,.12)); }
.v34-search-checkbox { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-hover); background: rgba(10,10,15,.6); backdrop-filter: blur(6px); cursor: pointer; display: grid; place-items: center; z-index: 3; opacity: 0; transition: all var(--t-fast, 120ms) var(--ease-out); }
.v34-search-card:hover .v34-search-checkbox, .v34-search-card.sel .v34-search-checkbox { opacity: 1; }
.v34-search-checkbox.on { background: var(--accent, #7c5cff); border-color: var(--accent, #7c5cff); opacity: 1; }
.v34-search-checkbox.on::after { content: '✓'; color: #fff; font-size: 12px; font-weight: 700; }
.v34-search-action-bar {
position: fixed;
bottom: var(--s-5, 20px);
left: calc(240px + (100% - 240px) / 2);
transform: translateX(-50%) translateY(8px);
background: var(--bg-elevated, #1a1a24);
border: 1px solid var(--border-hover);
border-radius: var(--r-pill, 999px);
padding: 6px 6px 6px var(--s-5, 20px);
box-shadow: var(--sh-card-hover, 0 8px 24px rgba(0,0,0,.4)), var(--sh-glow, 0 0 24px rgba(124,92,255,.18));
display: flex; align-items: center; gap: var(--s-3, 12px);
z-index: 50;
opacity: 0; pointer-events: none;
transition: opacity var(--t-base, 200ms) var(--ease-out), transform var(--t-base, 200ms) var(--ease-out);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.v34-search-action-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-4px); }
.v34-search-action-bar .count { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.v34-search-action-bar .count strong { color: var(--accent-text, #b8a4ff); margin-right: 4px; }
.v34-search-action-bar .sep { width: 1px; height: 22px; background: var(--border); }
.v34-search-ab-hint { font-size: 11.5px; color: var(--text-muted, var(--text-secondary)); opacity: .75; white-space: nowrap; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--border); }
.v34-search-ab-btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); padding: 8px 14px; border-radius: var(--r-pill, 999px); font-size: 12.5px; font-family: inherit; cursor: pointer; white-space: nowrap; transition: all var(--t-fast, 120ms) var(--ease-out); }
.v34-search-ab-btn:hover { background: var(--bg-input); color: var(--text-primary); }
.v34-search-ab-btn.primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); }
.v34-search-ab-btn.primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); }
.v34-search-ab-btn.promo { color: var(--accent-text, #b8a4ff); }
.v34-search-ab-close { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: all var(--t-fast, 120ms) var(--ease-out); }
.v34-search-ab-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
@media (max-width: 1100px) {
.v34-search-body { grid-template-columns: 1fr; }
.v34-search-rail { position: static; flex-direction: row; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.v34-search-rail > * { flex-shrink: 0; }
.v34-search-rail-section { display: none; }
.v34-search-tasks { flex-direction: row; }
.v34-search-task { min-width: 220px; }
}
@media (max-width: 768px) {
.v34-search-head { padding: var(--s-4, 16px); }
.v34-search h1 { font-size: 22px; }
.v34-search-summary { gap: var(--s-4, 16px); }
.v34-search-sumitem .v { font-size: 18px; }
.v34-search-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-search-task-info h2 { font-size: 18px; }
.v34-search-filter-bar { padding: var(--s-3, 12px); top: 56px; }
.v34-search-rescount { margin-left: 0; width: 100%; order: 5; }
.v34-search-topn { width: 100%; }
.v34-search-grid { grid-template-columns: 1fr; gap: var(--s-3, 12px); }
.v34-search-action-bar {
left: var(--s-3, 12px); right: var(--s-3, 12px);
bottom: var(--s-3, 12px);
transform: translateY(8px);
border-radius: var(--r-lg, 18px);
padding: var(--s-3, 12px);
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
align-items: stretch;
}
.v34-search-action-bar.show { transform: translateY(-2px); }
.v34-search-action-bar .count { grid-column: 1 / 3; align-self: center; padding-left: 4px; font-size: 12.5px; }
.v34-search-action-bar .sep { display: none; }
.v34-search-action-bar .v34-search-ab-close { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; }
.v34-search-action-bar .v34-search-ab-btn.primary { grid-column: 1 / -1; padding: 11px; font-size: 13px; }
.v34-search-action-bar .v34-search-ab-btn:not(.primary) { padding: 9px 8px; font-size: 11px; min-width: 0; text-align: center; }
}
/* =====================================================================
M10 «Аналитика unified» — .v34-an
===================================================================== */
.v34-an { min-height: 100%; }
.v34-an.active { display: flex; flex-direction: column; }
.v34-an-head { padding: var(--s-6, 24px) var(--s-6, 24px) 0; border-bottom: 1px solid var(--border); }
.v34-an-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; padding-bottom: var(--s-5, 20px); }
.v34-an h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-an-accent { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-an-summary { display: flex; gap: var(--s-6, 24px); }
.v34-an-sumitem .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; line-height: 1; }
.v34-an-sumitem .v.v-content { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-sumitem .v.v-viral { background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-sumitem .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; }
.v34-an-sub-tabs { display: flex; gap: var(--s-2, 8px); margin-bottom: -1px; flex-wrap: wrap; }
.v34-an-tab { padding: 12px 18px; border: none; background: transparent; border-bottom: 2px solid transparent; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-an-tab:hover { color: var(--text-primary); }
.v34-an-tab.active { color: var(--text-primary); border-bottom-color: var(--accent, #7c5cff); }
.v34-an-body { padding: var(--s-6, 24px); display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-an-pane { display: none; flex-direction: column; gap: var(--s-5, 20px); }
.v34-an-pane.active { display: flex; animation: v34AnPaneIn 250ms var(--ease-out); }
@keyframes v34AnPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.v34-an-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-an-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-an-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-an-card-meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
/* Filters */
.v34-an-filters { display: flex; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap; }
.v34-an-range { display: inline-flex; align-items: center; gap: var(--s-2, 8px); padding: 7px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); font-size: 12.5px; font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.v34-an-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-pill, 999px); font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-an-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-an-chip.active { background: var(--accent-glow, rgba(124,92,255,.12)); color: var(--accent-text, #b8a4ff); border-color: transparent; }
.v34-an-chip.live { background: var(--success-bg, rgba(34,197,94,.12)); color: var(--success, #22c55e); border-color: transparent; }
.v34-an-sep { width: 1px; height: 24px; background: var(--border); margin: 0 var(--s-2, 8px); }
/* I13: date-picker inputs */
.v34-an-date {
font: inherit;
font-size: 12px;
color: var(--text-primary);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-pill, 999px);
padding: 6px 12px;
cursor: pointer;
color-scheme: dark;
}
.v34-an-date:hover { border-color: var(--border-hover); }
.v34-an-date:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-an-date-sep { color: var(--text-muted); font-size: 12px; padding: 0 2px; }
/* I14: hourly bar-chart (24 bars) */
.v34-an-hourly {
display: grid;
grid-template-columns: repeat(24, 1fr);
gap: 4px;
align-items: end;
height: 200px;
padding: 12px 0 32px;
position: relative;
}
.v34-an-hourly .bar {
background: linear-gradient(180deg, var(--accent, #7c5cff), rgba(124, 92, 255, 0.4));
border-radius: 4px 4px 0 0;
min-height: 2px;
position: relative;
transition: opacity 200ms;
}
.v34-an-hourly .bar:hover { opacity: 0.85; }
.v34-an-hourly .bar.peak { background: linear-gradient(180deg, #ff6b9d, rgba(255, 107, 157, 0.4)); }
/* I16: projection card */
.v34-an-projection {
margin-top: var(--s-5, 20px);
padding: var(--s-4, 16px);
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
background: linear-gradient(135deg, rgba(124, 92, 255, 0.04), rgba(0, 212, 255, 0.04));
}
.v34-an-proj-head {
font-size: 12px;
color: var(--accent-text, #b8a4ff);
font-weight: 600;
margin-bottom: var(--s-3, 12px);
}
.v34-an-proj-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--s-3, 12px);
}
.v34-an-proj-card {
padding: var(--s-3, 12px);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
}
.v34-an-proj-card .label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.v34-an-proj-card .value {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-an-proj-card .meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.v34-an-hourly .bar .bar-label {
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
white-space: nowrap;
}
/* Heatmap */
.v34-an-hm-card { padding: var(--s-6, 24px); }
.v34-an-hm-grid { display: grid; grid-template-columns: 60px repeat(24, 1fr); gap: 3px; font-family: var(--font-mono, monospace); }
.v34-an-hm-grid .day { color: var(--text-muted); display: grid; place-items: center; font-size: 12px; }
.v34-an-hm-grid .hour-head { color: var(--text-muted); text-align: center; font-size: 10px; padding: 2px 0; }
.v34-an-hm-grid .cell { aspect-ratio: 1; border-radius: 4px; background: var(--bg-input); transition: all var(--t-fast, 120ms); cursor: pointer; position: relative; }
.v34-an-hm-grid .cell:hover { transform: scale(1.18); z-index: 5; box-shadow: var(--sh-card, 0 4px 16px rgba(0,0,0,.3)); }
.v34-an-hm-grid .cell.l1 { background: rgba(124,92,255,.16); }
.v34-an-hm-grid .cell.l2 { background: rgba(124,92,255,.34); }
.v34-an-hm-grid .cell.l3 { background: rgba(124,92,255,.55); }
.v34-an-hm-grid .cell.l4 { background: rgba(124,92,255,.78); }
.v34-an-hm-grid .cell.l5 { background: rgba(124,92,255,.95); }
.v34-an-hm-grid .cell.peak { box-shadow: inset 0 0 0 2px var(--warning, #ffb84d); }
.v34-an-hm-legend { display: flex; gap: var(--s-3, 12px); align-items: center; font-size: 11px; color: var(--text-muted); margin-top: var(--s-4, 16px); font-family: var(--font-mono, monospace); flex-wrap: wrap; }
.v34-an-hm-legend .scale { display: flex; gap: 3px; }
.v34-an-hm-legend .scale > div { width: 16px; height: 16px; border-radius: 3px; }
.v34-an-hm-legend .scale .b0 { background: var(--bg-input); }
.v34-an-hm-legend .scale .b1 { background: rgba(124,92,255,.16); }
.v34-an-hm-legend .scale .b2 { background: rgba(124,92,255,.34); }
.v34-an-hm-legend .scale .b3 { background: rgba(124,92,255,.55); }
.v34-an-hm-legend .scale .b4 { background: rgba(124,92,255,.78); }
.v34-an-hm-legend .scale .b5 { background: rgba(124,92,255,.95); }
.v34-an-hm-legend .peak-info { margin-left: auto; }
.v34-an-hm-legend .peak-info strong { color: var(--text-primary); font-family: var(--font-mono, monospace); }
.v34-an-opt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3, 12px); margin-top: var(--s-4, 16px); }
.v34-an-opt-card { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); border: 1px solid var(--border); }
.v34-an-opt-card.peak { border-color: rgba(255,184,77,.4); background: rgba(255,184,77,.06); }
.v34-an-opt-card .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-an-opt-card .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; margin-top: 4px; }
.v34-an-opt-card .meta { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-family: var(--font-mono, monospace); }
/* Network */
.v34-an-network-svg { background: var(--bg-input); border-radius: var(--r-lg, 18px); height: 320px; position: relative; overflow: hidden; display: grid; place-items: center; }
.v34-an-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-an-hint { font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); margin-top: var(--s-3, 12px); }
.v34-an-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5, 20px); }
/* Donor list (shared between Donors / Network clusters / ER) */
.v34-an-donor-list { display: flex; flex-direction: column; }
.v34-an-donor-row { display: grid; grid-template-columns: 36px 1fr 90px 80px; gap: var(--s-3, 12px); align-items: center; padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.v34-an-donor-row:last-child { border: none; }
.v34-an-donor-row .thumb { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: #fff; font-size: 11px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-an-donor-row .name { color: var(--text-primary); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v34-an-donor-row .name .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-an-donor-row .v { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); text-align: right; font-weight: 500; }
.v34-an-donor-row .delta { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--success, #22c55e); text-align: right; }
.v34-an-donor-row .delta.warn { color: var(--warning, #ffb84d); }
.v34-an-donor-row .delta.muted { color: var(--text-muted); }
/* Engagement */
.v34-an-eng-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4, 16px); }
.v34-an-eng-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px) var(--s-5, 20px); position: relative; overflow: hidden; }
.v34-an-eng-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .8; }
.v34-an-eng-card.likes::before { background: linear-gradient(135deg, #ff6b9d, #ffb84d); }
.v34-an-eng-card.comments::before { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); }
.v34-an-eng-card.shares::before { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-an-eng-card.saves::before { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); }
.v34-an-eng-card .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-an-eng-card .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 26px; font-weight: 700; margin-top: 4px; line-height: 1.1; }
.v34-an-eng-card .v.g-likes { background: linear-gradient(135deg, #ff6b9d, #ffb84d); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-eng-card .v.g-comm { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-eng-card .v.g-shares { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-eng-card .v.g-saves { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-an-eng-card .d { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--success, #22c55e); margin-top: 4px; }
@media (max-width: 900px) {
.v34-an-row-2 { grid-template-columns: 1fr; }
.v34-an-eng-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.v34-an-head { padding: var(--s-4, 16px) var(--s-4, 16px) 0; }
.v34-an h1 { font-size: 22px; }
.v34-an-summary { gap: var(--s-4, 16px); }
.v34-an-sumitem .v { font-size: 18px; }
.v34-an-sub-tabs { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px); -webkit-overflow-scrolling: touch; }
.v34-an-tab { flex-shrink: 0; padding: 10px 14px; font-size: 12.5px; }
.v34-an-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-an-card, .v34-an-hm-card { padding: var(--s-4, 16px); }
.v34-an-hm-grid { font-size: 8px; gap: 2px; }
.v34-an-hm-grid .day { font-size: 10px; }
.v34-an-hm-grid .hour-head { font-size: 8px; }
.v34-an-filters { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px); -webkit-overflow-scrolling: touch; }
.v34-an-filters > * { flex-shrink: 0; }
}
/* =====================================================================
M09 «Контент-система» — .v34-cs
===================================================================== */
.v34-cs { min-height: 100%; }
.v34-cs.active { display: flex; flex-direction: column; }
.v34-cs-head { padding: var(--s-6, 24px) var(--s-6, 24px) 0; border-bottom: 1px solid var(--border); }
.v34-cs-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; padding-bottom: var(--s-5, 20px); }
.v34-cs h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-cs-accent { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cs-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-cs-summary { display: flex; gap: var(--s-6, 24px); }
.v34-cs-sumitem .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; line-height: 1; }
.v34-cs-sumitem .v.v-content { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cs-sumitem .v.v-success { color: var(--success, #22c55e); }
.v34-cs-sumitem .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; }
.v34-cs-sub-tabs { display: flex; gap: var(--s-2, 8px); margin-bottom: -1px; flex-wrap: wrap; }
.v34-cs-tab { padding: 12px 18px; border: none; background: transparent; border-bottom: 2px solid transparent; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-cs-tab:hover { color: var(--text-primary); }
.v34-cs-tab.active { color: var(--text-primary); border-bottom-color: var(--accent, #7c5cff); }
.v34-cs-tab .ct { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); padding: 1px 6px; background: var(--bg-input); border-radius: var(--r-pill, 999px); }
.v34-cs-tab.active .ct { background: var(--accent-glow, rgba(124,92,255,.12)); color: var(--accent-text, #b8a4ff); }
.v34-cs-body { padding: var(--s-6, 24px); display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-cs-pane { display: none; flex-direction: column; gap: var(--s-5, 20px); }
.v34-cs-pane.active { display: flex; animation: v34CsPaneIn 250ms var(--ease-out); }
@keyframes v34CsPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.v34-cs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-cs-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-cs-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-cs-card-head .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cs-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-cs-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 14px; border-radius: var(--r-md, 14px); font-size: 12.5px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-cs-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-cs-btn-primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); }
.v34-cs-btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); color: #fff; }
.v34-cs-field { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.v34-cs-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-cs-field input, .v34-cs-field select, .v34-cs-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); font-family: inherit; }
.v34-cs-field textarea { min-height: 110px; resize: vertical; line-height: 1.5; font-family: var(--font-mono, monospace); font-size: 12.5px; }
.v34-cs-field input:focus, .v34-cs-field select:focus, .v34-cs-field textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-cs-field-hint { font-size: 12px; color: var(--text-muted); }
.v34-cs-field-hint code { font-family: var(--font-mono, monospace); background: var(--bg-input); padding: 1px 6px; border-radius: 4px; }
/* IMPORT */
.v34-cs-import-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-5, 20px); }
.v34-cs-import-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3, 12px); align-content: start; }
.v34-cs-istat { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px) var(--s-4, 16px); }
.v34-cs-istat .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-cs-istat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; margin-top: 2px; line-height: 1.1; }
.v34-cs-istat .v.g-success { color: var(--success, #22c55e); }
.v34-cs-istat .v.g-warn { color: var(--warning, #ffb84d); }
.v34-cs-istat .v.muted { color: var(--text-muted); }
.v34-cs-import-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3, 12px); padding-top: var(--s-4, 16px); margin-top: var(--s-4, 16px); border-top: 1px solid var(--border); flex-wrap: wrap; }
.v34-cs-import-foot .meta { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-muted); flex: 1; min-width: 240px; }
.v34-cs-import-foot .actions { display: flex; gap: var(--s-3, 12px); align-items: center; flex-wrap: wrap; }
.v34-cs-checkbox-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; }
.v34-cs-checkbox-row input { accent-color: var(--accent, #7c5cff); }
/* SCHEDULE */
.v34-cs-sched-grid { display: grid; grid-template-columns: 60px repeat(24, 1fr); gap: 2px; font-family: var(--font-mono, monospace); font-size: 9px; }
.v34-cs-sched-grid .day { color: var(--text-muted); display: grid; place-items: center; font-size: 11px; }
.v34-cs-sched-grid .hour-head { color: var(--text-muted); text-align: center; font-size: 9px; padding: 2px 0; }
.v34-cs-sched-grid .cell { aspect-ratio: 1; border-radius: 3px; background: var(--bg-input); transition: filter var(--t-fast, 120ms); cursor: pointer; }
.v34-cs-sched-grid .cell:hover { filter: brightness(1.4); }
.v34-cs-sched-grid .cell.l1 { background: rgba(0,212,255,.18); }
.v34-cs-sched-grid .cell.l2 { background: rgba(0,212,255,.4); }
.v34-cs-sched-grid .cell.l3 { background: rgba(0,212,255,.65); }
.v34-cs-sched-grid .cell.l4 { background: rgba(0,212,255,.9); }
.v34-cs-legend { display: flex; gap: var(--s-3, 12px); align-items: center; font-size: 11px; color: var(--text-muted); margin-top: var(--s-3, 12px); font-family: var(--font-mono, monospace); flex-wrap: wrap; }
.v34-cs-legend .scale { display: flex; gap: 2px; }
.v34-cs-legend .scale > div { width: 14px; height: 14px; border-radius: 3px; }
.v34-cs-legend .scale .b0 { background: var(--bg-input); }
.v34-cs-legend .scale .b1 { background: rgba(0,212,255,.18); }
.v34-cs-legend .scale .b2 { background: rgba(0,212,255,.4); }
.v34-cs-legend .scale .b3 { background: rgba(0,212,255,.65); }
.v34-cs-legend .scale .b4 { background: rgba(0,212,255,.9); }
.v34-cs-legend .peak-info { margin-left: auto; }
.v34-cs-legend .peak-info strong { color: var(--text-primary); font-family: var(--font-mono, monospace); }
/* POOLS */
.v34-cs-pool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3, 12px); margin-bottom: var(--s-4, 16px); }
.v34-cs-pmini { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px) var(--s-4, 16px); position: relative; overflow: hidden; }
.v34-cs-pmini::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.v34-cs-pmini.viral::before { background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); }
.v34-cs-pmini.strong::before { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); }
.v34-cs-pmini.mid::before { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-cs-pmini.weak::before { background: linear-gradient(135deg, var(--text-muted), var(--border)); }
/* I24: weak pool по умолчанию приглушён (opacity), при .show-weak — на pane'е — становится полным */
[data-cs-pane="pools"] .v34-cs-pmini.weak { opacity: 0.55; transition: opacity var(--t-fast, 120ms); }
[data-cs-pane="pools"].show-weak .v34-cs-pmini.weak { opacity: 1; outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
/* I24: schedule cell hover-подсказка для clickable */
.v34-cs-sched-grid .cell[data-cs-sched-h]:hover { outline: 2px solid var(--accent, #7c5cff); outline-offset: -2px; cursor: pointer; }
.v34-cs-pmini.new::before { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); }
.v34-cs-pmini .name { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.v34-cs-pmini .count { font-family: var(--font-display, 'Onest', sans-serif); font-size: 28px; font-weight: 700; line-height: 1.1; margin-top: 2px; }
.v34-cs-pmini .count.v-viral { background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cs-pmini .count.v-content { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cs-pmini .count.v-queue { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cs-pmini .count.v-health { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cs-pmini .count.muted { color: var(--text-secondary); }
.v34-cs-pmini .desc { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono, monospace); }
.v34-cs-pool-summary { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.v34-cs-pool-summary strong { color: var(--text-primary); font-family: var(--font-mono, monospace); }
.v34-cs-pool-foot { margin-top: var(--s-4, 16px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3, 12px); }
/* I25: queue filter + export toolbar */
.v34-cs-q-toolbar {
display: flex;
gap: var(--s-2, 8px);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--s-3, 12px);
padding-bottom: var(--s-3, 12px);
border-bottom: 1px solid var(--border);
}
.v34-cs-q-fld {
font: inherit;
font-size: 12px;
color: var(--text-primary);
background: var(--bg-input, #14141b);
border: 1px solid var(--border);
border-radius: var(--r-md, 8px);
padding: 6px 10px;
min-width: 130px;
}
.v34-cs-q-fld:focus { outline: none; border-color: var(--accent, #7c5cff); }
input.v34-cs-q-fld { flex: 1 1 200px; min-width: 200px; }
.v34-cs-pool-foot .meta { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cs-link { color: var(--accent-text, #b8a4ff); cursor: pointer; }
/* QUEUE */
.v34-cs-queue-table { display: flex; flex-direction: column; }
.v34-cs-q-row { display: grid; grid-template-columns: 70px 36px 1fr 90px 80px auto; gap: var(--s-3, 12px); align-items: center; padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); font-size: 13px; min-width: 0; }
.v34-cs-q-row:first-child { padding-top: 0; }
.v34-cs-q-row:last-child { border-bottom: none; }
.v34-cs-q-row .time { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-muted); }
.v34-cs-q-row .thumb { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: #fff; font-size: 11px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-cs-q-row .name { color: var(--text-primary); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v34-cs-q-row .name .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-cs-q-row .pool { font-family: var(--font-mono, monospace); font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill, 999px); }
.v34-cs-q-row .pool.viral { background: rgba(255,92,122,.16); color: #ff8da8; }
.v34-cs-q-row .pool.strong { background: rgba(0,212,255,.16); color: #00d4ff; }
.v34-cs-q-row .pool.mid { background: rgba(183,148,246,.18); color: #b794f6; }
.v34-cs-q-row .pool.weak { background: var(--bg-input); color: var(--text-muted); }
.v34-cs-q-row .pool.new { background: rgba(0,184,148,.16); color: #00d8a8; }
.v34-cs-q-done { color: var(--success, #00b894); font-size: 13px; }
.v34-cs-q-pending { color: var(--text-muted); font-size: 12px; }
.v34-cs-q-row .slot { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-secondary); }
/* MANUAL */
.v34-cs-manual-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4, 16px); }
.v34-cs-manual-col { display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.v34-cs-manual-foot { display: flex; justify-content: flex-end; gap: var(--s-3, 12px); margin-top: var(--s-5, 20px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--border); }
/* RATING */
.v34-cs-rating-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-4, 16px); }
.v34-cs-rating-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-4, 16px); }
.v34-cs-rating-card .head { display: flex; align-items: center; gap: var(--s-2, 8px); margin-bottom: var(--s-3, 12px); }
.v34-cs-rating-card .badge { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: #fff; font-size: 12px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-cs-rating-card .name { font-size: 13px; font-weight: 600; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v34-cs-rating-card .sub { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cs-rating-card .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2, 8px); padding-top: var(--s-3, 12px); margin-top: var(--s-3, 12px); border-top: 1px solid var(--border); }
.v34-cs-rating-card .stats .s { display: flex; flex-direction: column; gap: 1px; }
.v34-cs-rating-card .stats .s .v { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); font-weight: 500; }
.v34-cs-rating-card .stats .s .v.tier-A { color: var(--success, #22c55e); }
.v34-cs-rating-card .stats .s .v.tier-B { color: var(--info, #4dabff); }
.v34-cs-rating-card .stats .s .v.tier-C { color: var(--warning, #ffb84d); }
.v34-cs-rating-card .stats .s .v.tier-D { color: var(--danger, #ef4444); }
.v34-cs-rating-card .stats .s .l { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 1000px) {
.v34-cs-import-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
.v34-cs-manual-form { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.v34-cs-head { padding: var(--s-4, 16px) var(--s-4, 16px) 0; }
.v34-cs h1 { font-size: 22px; }
.v34-cs-summary { gap: var(--s-4, 16px); }
.v34-cs-sumitem .v { font-size: 18px; }
.v34-cs-sub-tabs { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px); -webkit-overflow-scrolling: touch; }
.v34-cs-tab { flex-shrink: 0; padding: 10px 14px; font-size: 12.5px; }
.v34-cs-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-cs-card { padding: var(--s-4, 16px); }
.v34-cs-sched-grid { font-size: 8px; }
.v34-cs-q-row { grid-template-columns: 50px 28px 1fr auto; }
.v34-cs-q-row .pool, .v34-cs-q-row .slot { display: none; }
}
/* =====================================================================
M11 «Сообщества» — .v34-cm
===================================================================== */
.v34-cm { min-height: 100%; }
.v34-cm.active { display: flex; flex-direction: column; }
.v34-cm-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-cm-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; margin-bottom: var(--s-5, 20px); }
.v34-cm h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-cm-accent { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cm-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-cm-summary { display: flex; gap: var(--s-6, 24px); }
.v34-cm-sumitem .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; line-height: 1; }
.v34-cm-sumitem .v.v-success { color: var(--success, #22c55e); }
.v34-cm-sumitem .v.v-warning { color: var(--warning, #ffb84d); }
.v34-cm-sumitem .v.v-muted { color: var(--text-muted); }
.v34-cm-sumitem .l { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; font-weight: 600; }
.v34-cm-filters { display: flex; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap; }
.v34-cm-search {
background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px);
padding: 8px 12px 8px 36px; font-size: 13px; color: var(--text-primary); width: 280px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: 12px center; background-size: 14px;
font-family: inherit;
}
.v34-cm-search:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-pill, 999px); font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-cm-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-cm-chip.active { background: var(--accent-glow, rgba(124,92,255,.12)); color: var(--accent-text, #b8a4ff); border-color: transparent; }
.v34-cm-chip .ct { font-family: var(--font-mono, monospace); font-size: 11px; opacity: .7; padding: 1px 6px; background: var(--bg-input); border-radius: var(--r-pill, 999px); }
.v34-cm-chip.active .ct { background: rgba(124,92,255,.2); color: var(--accent-text, #b8a4ff); opacity: 1; }
.v34-cm-body { display: grid; grid-template-columns: 1fr 360px; gap: var(--s-5, 20px); padding: var(--s-6, 24px); align-items: start; }
.v34-cm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); }
.v34-cm-card-head { padding: var(--s-4, 16px) var(--s-5, 20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-cm-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-cm-card-head .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cm-list { padding: var(--s-3, 12px); }
.v34-cm-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-cm-row {
display: grid;
grid-template-columns: 32px 40px 1fr 110px 60px 36px;
gap: var(--s-3, 12px);
align-items: center;
padding: 10px var(--s-3, 12px);
border-radius: var(--r-md, 14px);
cursor: pointer;
transition: background var(--t-fast, 120ms);
border: 1px solid transparent;
min-width: 0;
}
.v34-cm-row:hover { background: var(--bg-input); }
.v34-cm-row.sel { background: var(--accent-glow, rgba(124,92,255,.12)); border-color: rgba(124,92,255,.3); }
.v34-cm-row .checkbox { width: 16px; height: 16px; border: 1.5px solid var(--border-hover); border-radius: 4px; cursor: pointer; display: grid; place-items: center; transition: all var(--t-fast, 120ms); flex-shrink: 0; }
.v34-cm-row .checkbox.on { background: var(--accent, #7c5cff); border-color: var(--accent, #7c5cff); }
.v34-cm-row .checkbox.on::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
.v34-cm-row .thumb { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: #fff; font-size: 12px; flex-shrink: 0; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-cm-row .info { min-width: 0; }
.v34-cm-row .name { font-size: 13.5px; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-cm-row .info .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-cm-row .v { font-family: var(--font-mono, monospace); font-size: 12.5px; color: var(--text-secondary); text-align: right; line-height: 1.3; }
.v34-cm-row .v strong { color: var(--text-primary); font-weight: 500; }
.v34-cm-row .tier { font-family: var(--font-mono, monospace); font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill, 999px); text-align: center; justify-self: center; }
.v34-cm-row .tier.A { background: rgba(0,214,143,.16); color: var(--success, #22c55e); }
.v34-cm-row .tier.B { background: rgba(77,171,255,.16); color: var(--info, #4dabff); }
.v34-cm-row .tier.C { background: rgba(255,92,122,.16); color: var(--danger, #ef4444); }
.v34-cm-row .tier.off { background: var(--bg-input); color: var(--text-muted); }
.v34-cm-row .more { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--r-sm, 8px); }
.v34-cm-row .more:hover { background: var(--bg-input); color: var(--text-primary); }
.v34-cm-detail { position: sticky; top: calc(68px + var(--s-6, 24px)); display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.v34-cm-dp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-cm-dp-head { display: flex; align-items: center; gap: var(--s-3, 12px); margin-bottom: var(--s-4, 16px); }
.v34-cm-dp-thumb { width: 56px; height: 56px; border-radius: 14px; background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); display: grid; place-items: center; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: #fff; font-size: 18px; flex-shrink: 0; }
.v34-cm-dp-name { font-family: var(--font-display, 'Onest', sans-serif); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.v34-cm-dp-link { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-cm-dp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3, 12px); padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); margin-bottom: var(--s-3, 12px); }
.v34-cm-dp-stat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 18px; font-weight: 700; line-height: 1.1; }
.v34-cm-dp-stat .v.g-viral { background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cm-dp-stat .v.g-success { color: var(--success, #22c55e); }
.v34-cm-dp-stat .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; font-weight: 600; }
.v34-cm-dp-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 12.5px; gap: var(--s-3, 12px); }
.v34-cm-dp-row .k { color: var(--text-muted); }
.v34-cm-dp-row .v { color: var(--text-primary); font-family: var(--font-mono, monospace); font-weight: 500; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v34-cm-dp-row .v.tier-A { color: var(--success, #22c55e); }
.v34-cm-dp-row .v.tier-B { color: var(--info, #4dabff); }
.v34-cm-dp-row .v.tier-C { color: var(--danger, #ef4444); }
.v34-cm-dp-actions { display: flex; gap: var(--s-2, 8px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); margin-top: var(--s-3, 12px); }
.v34-cm-dp-actions .v34-cm-btn { flex: 1; padding: 8px; font-size: 12px; }
.v34-cm-add-card {
background: linear-gradient(135deg, var(--accent-glow, rgba(124,92,255,.12)), transparent);
border: 1px solid rgba(124,92,255,.3);
border-radius: var(--r-lg, 18px);
padding: var(--s-5, 20px);
}
.v34-cm-add-card .head { font-size: 11px; color: var(--accent-text, #b8a4ff); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.v34-cm-add-card h3 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 18px; font-weight: 700; margin-top: 4px; }
.v34-cm-add-card textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 12.5px; color: var(--text-primary); width: 100%; min-height: 80px; resize: vertical; font-family: var(--font-mono, monospace); margin-top: var(--s-3, 12px); }
.v34-cm-add-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-3, 12px); flex-wrap: wrap; gap: var(--s-2, 8px); }
.v34-cm-add-card .foot .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cm-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: var(--r-md, 14px); font-size: 12px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-cm-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-cm-btn.primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); padding: 7px 14px; }
.v34-cm-btn.primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); color: #fff; }
.v34-cm-btn.close { width: 32px; height: 32px; border-radius: 50%; padding: 0; font-size: 16px; line-height: 1; }
.v34-cm-action-bar {
position: fixed;
bottom: var(--s-5, 20px);
left: calc(240px + (100% - 240px) / 2);
transform: translateX(-50%) translateY(8px);
background: var(--bg-elevated, #1a1a24);
border: 1px solid var(--border-hover);
border-radius: var(--r-pill, 999px);
padding: 6px 6px 6px var(--s-5, 20px);
box-shadow: var(--sh-card-hover, 0 8px 24px rgba(0,0,0,.4)), var(--sh-glow, 0 0 24px rgba(124,92,255,.18));
display: flex; align-items: center; gap: var(--s-3, 12px);
z-index: 50;
opacity: 0; pointer-events: none;
transition: opacity var(--t-base, 200ms) var(--ease-out), transform var(--t-base, 200ms) var(--ease-out);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.v34-cm-action-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(-4px); }
.v34-cm-action-bar .count { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.v34-cm-action-bar .count strong { color: var(--accent-text, #b8a4ff); margin-right: 4px; }
.v34-cm-action-bar .sep { width: 1px; height: 22px; background: var(--border); }
@media (max-width: 1100px) {
.v34-cm-body { grid-template-columns: 1fr; }
.v34-cm-detail { position: static; }
}
@media (max-width: 768px) {
.v34-cm-head { padding: var(--s-4, 16px); }
.v34-cm h1 { font-size: 22px; }
.v34-cm-summary { gap: var(--s-4, 16px); }
.v34-cm-sumitem .v { font-size: 18px; }
.v34-cm-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-cm-filters { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px) 4px; -webkit-overflow-scrolling: touch; }
.v34-cm-filters > * { flex-shrink: 0; }
.v34-cm-search { width: 200px; }
.v34-cm-row { grid-template-columns: 28px 36px 1fr 50px 30px; gap: var(--s-2, 8px); padding: 8px var(--s-3, 12px); }
.v34-cm-row .v { display: none; }
.v34-cm-action-bar { left: var(--s-3, 12px); right: var(--s-3, 12px); transform: translateY(8px); border-radius: var(--r-lg, 18px); flex-wrap: wrap; padding: var(--s-3, 12px); bottom: var(--s-3, 12px); }
.v34-cm-action-bar.show { transform: translateY(-2px); }
.v34-cm-action-bar .count { width: 100%; }
.v34-cm-action-bar .sep { display: none; }
.v34-cm-action-bar .v34-cm-btn { flex: 1; min-width: 0; padding: 9px 6px; font-size: 11.5px; text-align: center; }
}
/* =====================================================================
M12 «VK Токены» — .v34-tk
===================================================================== */
.v34-tk { min-height: 100%; }
.v34-tk.active { display: flex; flex-direction: column; }
.v34-tk-head { padding: var(--s-6, 24px) var(--s-6, 24px) 0; border-bottom: 1px solid var(--border); }
.v34-tk-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; padding-bottom: var(--s-5, 20px); }
.v34-tk h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-tk-accent { background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-tk-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-tk-cat-tabs { display: flex; gap: var(--s-2, 8px); margin-bottom: -1px; flex-wrap: wrap; }
.v34-tk-cat-tab { padding: 12px 16px; border: none; background: transparent; border-bottom: 2px solid transparent; font-size: 13px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-tk-cat-tab:hover { color: var(--text-primary); }
.v34-tk-cat-tab.active { color: var(--text-primary); border-bottom-color: var(--accent, #7c5cff); }
.v34-tk-cat-tab .ct { font-family: var(--font-mono, monospace); font-size: 10.5px; padding: 1px 6px; background: var(--bg-input); color: var(--text-muted); border-radius: var(--r-pill, 999px); }
.v34-tk-cat-tab.active .ct { background: var(--accent-glow, rgba(124,92,255,.12)); color: var(--accent-text, #b8a4ff); }
.v34-tk-cat-tab .ct.bad { background: rgba(239,68,68,.16); color: var(--danger, #ef4444); margin-left: 4px; }
.v34-tk-cat-tab .ct[hidden] { display: none; }
.v34-tk-body { padding: var(--s-6, 24px); display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-tk-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-tk-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-tk-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-tk-card-head .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-tk-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-tk-hint { font-size: 11.5px; color: var(--text-muted); margin-top: var(--s-3, 12px); font-family: var(--font-mono, monospace); }
.v34-tk-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 6px 12px; border-radius: var(--r-md, 14px); font-size: 12px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); white-space: nowrap; }
.v34-tk-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-tk-btn-primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); padding: 8px 16px; }
.v34-tk-btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); color: #fff; }
/* DASH grid (7 categories) */
.v34-tk-dash-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-3, 12px); }
.v34-tk-dash-cat { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px); border: 1px solid var(--border); cursor: pointer; transition: all var(--t-fast, 120ms); }
.v34-tk-dash-cat:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.v34-tk-dash-cat.active { border-color: var(--accent, #7c5cff); background: var(--accent-glow, rgba(124,92,255,.12)); }
.v34-tk-dash-cat .name { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; }
.v34-tk-dash-cat .n { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; line-height: 1.1; margin-top: 4px; }
.v34-tk-dash-cat .n.g-ads { background: var(--grad-ads, linear-gradient(135deg,#ff6b9d,#ff8c42)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-tk-dash-cat .n.g-content { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-tk-dash-cat .n.g-health { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-tk-dash-cat .n .bad { color: var(--danger, #ef4444); font-size: 14px; margin-left: 4px; }
/* STAT strip */
.v34-tk-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4, 16px); }
.v34-tk-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px) var(--s-5, 20px); position: relative; overflow: hidden; }
.v34-tk-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); opacity: .8; }
.v34-tk-stat.bad::before { background: linear-gradient(135deg, var(--danger, #ef4444), var(--warning, #ffb84d)); }
.v34-tk-stat.proxy::before { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); }
.v34-tk-stat.usage::before { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-tk-stat .lbl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.v34-tk-stat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; }
.v34-tk-stat .v.g-bad { color: var(--danger, #ef4444); }
.v34-tk-stat .v.g-content { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-tk-stat .v.g-queue { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-tk-stat .d { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--success, #22c55e); margin-top: 4px; }
.v34-tk-stat .d.g-warn { color: var(--warning, #ffb84d); }
/* ADD row */
/* Фаза Ш-6б (2026-05-10): кнопки стэкаются и центрируются по середине textarea (а не по нижнему краю). */
.v34-tk-add-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4, 16px); align-items: center; }
.v34-tk-add-row textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 12px; color: var(--text-primary); width: 100%; min-height: 100px; resize: vertical; font-family: var(--font-mono, monospace); }
.v34-tk-add-row textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-tk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5, 20px); }
/* Tokens list */
.v34-tk-list { display: flex; flex-direction: column; }
.v34-tk-row { display: grid; grid-template-columns: 22px 8px 1fr 130px 70px auto; gap: var(--s-3, 12px); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; font-family: var(--font-mono, monospace); min-width: 0; }
.v34-tk-row:last-child { border: none; }
.v34-tk-row-sel { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.v34-tk-row-sel input { width: 14px; height: 14px; accent-color: var(--accent, #7c5cff); cursor: pointer; }
.v34-tk-row-sel-spacer { display: inline-block; }
.v34-tk-row .status { width: 8px; height: 8px; border-radius: 50%; background: var(--text-disabled, #666); }
.v34-tk-row .status.ok { background: var(--success, #22c55e); box-shadow: 0 0 6px var(--success, #22c55e); }
.v34-tk-row .status.warn { background: var(--warning, #ffb84d); }
.v34-tk-row .status.bad { background: var(--danger, #ef4444); }
.v34-tk-row .id { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v34-tk-row .id .meta { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-tk-row .v { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-secondary); text-align: right; line-height: 1.3; }
.v34-tk-row .v strong { color: var(--text-primary); }
.v34-tk-row .v.warn { color: var(--warning, #ffb84d); }
.v34-tk-row .v.bad { color: var(--danger, #ef4444); }
.v34-tk-row .v.muted { color: var(--text-muted); }
/* Kebab button + popover menu */
.v34-tk-kebab { width: 28px; height: 28px; border-radius: var(--r-sm, 8px); background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; transition: all var(--t-fast, 120ms); display: inline-flex; align-items: center; justify-content: center; }
.v34-tk-kebab:hover, .v34-tk-kebab:focus { background: var(--bg-card-hover, #1c1c28); border-color: var(--border-hover); color: var(--text-primary); outline: none; }
.v34-tk-kebab-menu { background: var(--bg-card, #15151f); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 6px; min-width: 180px; box-shadow: 0 12px 32px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; z-index: 9200; animation: v34TkKebabIn 140ms ease-out; }
.v34-tk-kebab-item { background: transparent; border: none; color: var(--text-secondary); padding: 8px 12px; border-radius: var(--r-sm, 8px); cursor: pointer; font-size: 12.5px; text-align: left; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-tk-kebab-item:hover { background: var(--bg-card-hover, #1c1c28); color: var(--text-primary); }
@keyframes v34TkKebabIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* Bulk-toolbar above active list */
.v34-tk-toolbar { display: flex; align-items: center; gap: var(--s-2, 8px); flex-wrap: wrap; }
.v34-tk-toolbar .meta { margin-right: var(--s-2, 8px); }
.v34-tk-bulk-bar { display: flex; align-items: center; gap: var(--s-2, 8px); padding: 8px 12px; margin: 0 0 12px 0; background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(124,92,255,.04)); border: 1px solid rgba(124,92,255,.25); border-radius: var(--r-md, 14px); font-size: 12px; flex-wrap: wrap; animation: v34TkBulkIn 180ms ease-out; }
.v34-tk-bulk-bar[hidden] { display: none; }
.v34-tk-bulk-info { color: var(--text-secondary); margin-right: auto; }
.v34-tk-bulk-info strong { color: var(--accent, #7c5cff); }
@keyframes v34TkBulkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
/* Add-row: две кнопки рядом */
/* Фаза Ш-6б: всегда столбик, центрированы по высоте textarea, кнопки одинаковой ширины. */
.v34-tk-add-buttons { display: flex; gap: 10px; align-items: stretch; flex-direction: column; justify-content: center; min-width: 200px; }
.v34-tk-add-buttons > .v34-tk-btn { min-width: 200px; }
/* btn-сайзы и варианты */
.v34-tk-btn.sm { padding: 5px 10px; font-size: 11.5px; }
.v34-tk-btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.v34-tk-btn.ghost:hover { background: var(--bg-card-hover, #1c1c28); color: var(--text-primary); border-color: var(--border-hover); }
.v34-tk-btn-danger { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.35); color: var(--danger, #ef4444); }
.v34-tk-btn-danger:hover { background: rgba(239,68,68,.18); color: #fff; border-color: var(--danger, #ef4444); }
@media (max-width: 1100px) {
.v34-tk-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.v34-tk-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.v34-tk-stat-strip { grid-template-columns: repeat(2, 1fr); }
.v34-tk-add-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.v34-tk-head { padding: var(--s-4, 16px) var(--s-4, 16px) 0; }
.v34-tk h1 { font-size: 22px; }
.v34-tk-cat-tabs { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px); -webkit-overflow-scrolling: touch; }
.v34-tk-cat-tab { flex-shrink: 0; padding: 10px 12px; font-size: 12px; }
.v34-tk-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-tk-card { padding: var(--s-4, 16px); }
.v34-tk-stat .v { font-size: 22px; }
.v34-tk-row { grid-template-columns: 22px 8px 1fr auto; }
.v34-tk-row .v { display: none; }
}
/* =====================================================================
Settings · Proxies pane (.v34-set-proxy-*) и Token Pool pane (.v34-set-tp-*)
===================================================================== */
.v34-set-proxy-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.v34-set-proxy-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--s-3, 12px); align-items: center; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); font-size: 11.5px; font-family: var(--font-mono, monospace); }
.v34-set-proxy-row .ip { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.v34-set-proxy-row .meta { color: var(--text-muted); font-size: 10.5px; }
.v34-set-proxy-add { margin-top: 12px; }
.v34-set-proxy-cat { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 14px; margin: 10px 0; }
.v34-set-proxy-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.v34-set-proxy-cat-head strong { font-size: 13px; color: var(--text-primary); }
.v34-set-proxy-cat-head .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-set-proxy-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 8px; margin-bottom: 10px; }
/* 6.2б: min-width:0 + box-sizing — без них password-input с длинным значением выпирает за грид-cell. */
.v34-set-proxy-grid input { background: var(--bg-card, #15151f); border: 1px solid var(--border); border-radius: var(--r-sm, 8px); padding: 8px 10px; color: var(--text-primary); font-family: var(--font-mono, monospace); font-size: 12px; min-width: 0; width: 100%; box-sizing: border-box; }
.v34-set-proxy-grid input:focus { outline: none; border-color: var(--accent, #7c5cff); }
/* 29.09.2026: строка провайдера целиком — во всю ширину над четырьмя полями (и на узком экране). */
.v34-set-proxy-grid.v34-set-proxy-line { grid-template-columns: 1fr; margin-bottom: 8px; }
.v34-set-proxy-cat-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 700px) {
.v34-set-proxy-grid { grid-template-columns: 1fr 1fr; }
.v34-set-proxy-row { grid-template-columns: 1fr auto; row-gap: 6px; }
.v34-set-proxy-row .meta { grid-column: 1 / -1; }
}
/* Token Pool · minimums grid + priority list */
.v34-set-tp-mins { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.v34-set-tp-min label { display: block; }
.v34-set-tp-cur { color: var(--text-muted); font-size: 10.5px; font-family: var(--font-mono, monospace); }
.v34-set-tp-def { color: var(--warning, #ffb84d); font-size: 10.5px; font-family: var(--font-mono, monospace); margin-left: 6px; }
.v34-set-tp-pri { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.v34-set-tp-pri-item { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); font-size: 13px; }
.v34-set-tp-pri-item .ord { color: var(--text-muted); font-family: var(--font-mono, monospace); font-weight: 600; text-align: center; }
.v34-set-tp-pri-item .lbl { color: var(--text-primary); }
.v34-set-tp-pri-actions { display: flex; gap: 8px; margin-top: 8px; }
/* =====================================================================
M13 «Чистка сообществ» — .v34-cl
===================================================================== */
.v34-cl { min-height: 100%; }
.v34-cl.active { display: flex; flex-direction: column; }
.v34-cl-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-cl-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-cl h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-cl-accent { background: linear-gradient(135deg, var(--danger, #ef4444), var(--warning, #ffb84d)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cl-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-cl-warn-banner { background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(255,184,77,.08)); border: 1px solid rgba(239,68,68,.3); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px) var(--s-4, 16px); margin-top: var(--s-4, 16px); font-size: 12.5px; color: var(--text-secondary); display: flex; align-items: center; gap: var(--s-3, 12px); }
.v34-cl-warn-banner strong { color: var(--text-primary); }
.v34-cl-warn-ico { font-size: 18px; color: var(--danger, #ef4444); flex-shrink: 0; }
.v34-cl-body { padding: var(--s-6, 24px); display: grid; grid-template-columns: 1fr 360px; gap: var(--s-5, 20px); align-items: start; padding-bottom: 100px; }
.v34-cl-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-cl-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-cl-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-cl-field { display: flex; flex-direction: column; gap: var(--s-2, 8px); margin-bottom: var(--s-4, 16px); }
.v34-cl-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-cl-field input, .v34-cl-field select, .v34-cl-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); font-family: inherit; }
.v34-cl-field input:focus, .v34-cl-field select:focus, .v34-cl-field textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-cl-field textarea { min-height: 80px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.5; }
.v34-cl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4, 16px); }
.v34-cl-field-row .v34-cl-field { margin-bottom: 0; }
.v34-cl-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-cl-picker { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px); max-height: 220px; overflow-y: auto; }
.v34-cl-pick-empty { padding: var(--s-4, 16px); text-align: center; color: var(--text-muted); font-size: 12.5px; font-family: var(--font-mono, monospace); }
.v34-cl-pick-row { display: flex; align-items: center; gap: var(--s-2, 8px); padding: 5px 8px; border-radius: var(--r-sm, 8px); cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }
.v34-cl-pick-row:hover { background: var(--bg-card); color: var(--text-primary); }
.v34-cl-pick-row.on { color: var(--accent-text, #b8a4ff); }
.v34-cl-pick-row .check { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-hover); flex-shrink: 0; display: grid; place-items: center; transition: all var(--t-fast, 120ms); }
.v34-cl-pick-row.on .check { background: var(--accent, #7c5cff); border-color: var(--accent, #7c5cff); }
.v34-cl-pick-row.on .check::after { content: '✓'; color: #fff; font-size: 10px; }
.v34-cl-pick-foot { display: flex; align-items: center; gap: var(--s-2, 8px); margin-top: var(--s-2, 8px); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.v34-cl-pick-foot .v34-cl-pick-count { margin-left: auto; font-family: var(--font-mono, monospace); }
.v34-cl-pick-foot .v34-cl-pick-count strong { color: var(--text-primary); }
.v34-cl-btn-mini { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 5px 10px; border-radius: var(--r-sm, 8px); font-size: 11.5px; cursor: pointer; font-family: inherit; }
.v34-cl-btn-mini:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-cl-strict { display: flex; align-items: center; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-4, 16px); background: var(--bg-input); border-radius: var(--r-md, 14px); border: 1px solid var(--border); margin-bottom: var(--s-4, 16px); }
.v34-cl-strict .label { font-size: 13px; flex: 1; }
.v34-cl-strict .label .strong { font-weight: 500; color: var(--text-primary); }
.v34-cl-strict .label .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.v34-cl-toggle { width: 36px; height: 20px; background: var(--border); border-radius: var(--r-pill, 999px); position: relative; cursor: pointer; flex-shrink: 0; transition: background var(--t-fast, 120ms); }
.v34-cl-toggle.on { background: var(--danger, #ef4444); }
.v34-cl-toggle::after { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform var(--t-fast, 120ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-cl-toggle.on::after { transform: translateX(16px); }
.v34-cl-type-tabs { display: inline-flex; gap: 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; flex-wrap: wrap; }
.v34-cl-type-tabs button { padding: 6px 12px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 12px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-cl-type-tabs button:hover { color: var(--text-primary); }
.v34-cl-type-tabs button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-cl-right { display: flex; flex-direction: column; gap: var(--s-4, 16px); position: sticky; top: calc(68px + var(--s-6, 24px)); }
.v34-cl-rules { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-cl-rule { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); }
.v34-cl-rule .name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.v34-cl-rule .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #22c55e); box-shadow: 0 0 6px var(--success, #22c55e); }
.v34-cl-rule .dot.warn { background: var(--warning, #ffb84d); box-shadow: 0 0 6px var(--warning, #ffb84d); }
.v34-cl-rule .dot.off { background: var(--text-disabled, #666); box-shadow: none; }
.v34-cl-rule .meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono, monospace); line-height: 1.5; }
.v34-cl-rule .stats { display: flex; gap: var(--s-3, 12px); margin-top: var(--s-3, 12px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); }
.v34-cl-rule .stats .s { font-size: 11px; }
.v34-cl-rule .stats .s .v { font-family: var(--font-mono, monospace); color: var(--text-primary); font-weight: 500; font-size: 12.5px; }
.v34-cl-rule .stats .s .v.on { color: var(--success, #22c55e); }
.v34-cl-rule .stats .s .v.off { color: var(--warning, #ffb84d); }
.v34-cl-rule .stats .s .l { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.v34-cl-action-bar {
position: fixed;
bottom: var(--s-5, 20px);
left: calc(240px + (100% - 240px) / 2);
transform: translateX(-50%);
background: var(--bg-elevated, #1a1a24);
border: 2px solid var(--danger, #ef4444);
border-radius: var(--r-pill, 999px);
padding: 6px 6px 6px var(--s-5, 20px);
box-shadow: var(--sh-card-hover, 0 8px 24px rgba(0,0,0,.4)), 0 0 32px rgba(239,68,68,.18);
display: flex; align-items: center; gap: var(--s-3, 12px);
z-index: 50;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.v34-cl-action-bar .estimate { font-family: var(--font-mono, monospace); font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.v34-cl-action-bar .estimate strong { color: var(--danger, #ef4444); margin-right: 4px; }
.v34-cl-preview-btn { background: linear-gradient(135deg, var(--danger, #ef4444), #ff8da8); color: #fff; border: none; padding: 10px 18px; border-radius: var(--r-pill, 999px); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-cl-preview-btn:hover { box-shadow: 0 6px 20px rgba(239,68,68,.4); transform: translateY(-1px); color: #fff; }
.v34-cl-preview-btn .ico { font-size: 14px; }
.v34-cl-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--s-4, 16px); }
.v34-cl-modal-overlay.open { display: flex; animation: v34ClFadeIn 200ms; }
@keyframes v34ClFadeIn { from { opacity: 0; } to { opacity: 1; } }
.v34-cl-modal { width: 600px; max-width: 100%; max-height: 85vh; background: var(--bg-card); border: 1px solid var(--danger, #ef4444); border-radius: var(--r-lg, 18px); display: flex; flex-direction: column; box-shadow: var(--sh-card-hover, 0 8px 24px rgba(0,0,0,.4)), 0 0 60px rgba(239,68,68,.2); overflow: hidden; }
.v34-cl-m-head { padding: var(--s-5, 20px) var(--s-6, 24px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--s-3, 12px); }
.v34-cl-m-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(239,68,68,.16); color: var(--danger, #ef4444); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.v34-cl-m-title { font-family: var(--font-display, 'Onest', sans-serif); font-size: 20px; font-weight: 700; }
.v34-cl-m-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.v34-cl-m-body { flex: 1; overflow-y: auto; padding: var(--s-5, 20px) var(--s-6, 24px); }
.v34-cl-m-summary { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); margin-bottom: var(--s-4, 16px); font-family: var(--font-mono, monospace); font-size: 13px; }
.v34-cl-m-summary .row { display: flex; justify-content: space-between; padding: 4px 0; }
.v34-cl-m-summary .row .k { color: var(--text-muted); }
.v34-cl-m-summary .row .v { color: var(--text-primary); font-weight: 500; }
.v34-cl-m-summary .row .v.danger { color: var(--danger, #ef4444); }
.v34-cl-m-summary .row .v.success { color: var(--success, #22c55e); }
.v34-cl-m-list-title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; margin-bottom: var(--s-3, 12px); }
.v34-cl-m-post { padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s-3, 12px); align-items: center; }
.v34-cl-m-post:last-child { border: none; }
.v34-cl-m-post .thumb { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; font-size: 11px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); }
.v34-cl-m-post .info { font-size: 12.5px; min-width: 0; }
.v34-cl-m-post .info .t1 { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-cl-m-post .info .t2 { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-cl-m-post .meta { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-muted); }
.v34-cl-m-foot { padding: var(--s-4, 16px) var(--s-6, 24px); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap; }
.v34-cl-m-confirm { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 200px; }
.v34-cl-m-confirm strong { color: var(--danger, #ef4444); }
.v34-cl-m-actions { display: flex; gap: var(--s-2, 8px); }
.v34-cl-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 14px; border-radius: var(--r-md, 14px); font-size: 12.5px; cursor: pointer; font-family: inherit; }
.v34-cl-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-cl-btn-danger { background: linear-gradient(135deg, var(--danger, #ef4444), #ff8da8); color: #fff; border: none; padding: 10px 18px; border-radius: var(--r-md, 14px); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-cl-btn-danger:hover { box-shadow: 0 4px 14px rgba(239,68,68,.4); transform: translateY(-1px); color: #fff; }
@media (max-width: 1100px) {
.v34-cl-body { grid-template-columns: 1fr; }
.v34-cl-right { position: static; }
}
@media (max-width: 600px) {
.v34-cl-field-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.v34-cl-head { padding: var(--s-4, 16px); }
.v34-cl h1 { font-size: 22px; }
.v34-cl-body { padding: var(--s-4, 16px); padding-bottom: 100px; gap: var(--s-4, 16px); }
.v34-cl-card { padding: var(--s-4, 16px); }
.v34-cl-action-bar { left: var(--s-3, 12px); right: var(--s-3, 12px); transform: none; border-radius: var(--r-lg, 18px); flex-wrap: wrap; padding: var(--s-3, 12px); bottom: var(--s-3, 12px); }
.v34-cl-action-bar .estimate { width: 100%; text-align: center; }
.v34-cl-preview-btn { flex: 1; justify-content: center; }
}
/* =====================================================================
M14 «История» — .v34-hi
===================================================================== */
.v34-hi { min-height: 100%; }
.v34-hi.active { display: flex; flex-direction: column; }
.v34-hi-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-hi-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; margin-bottom: var(--s-5, 20px); }
.v34-hi h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-hi-accent { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-hi-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-hi-filters { display: flex; align-items: center; gap: var(--s-3, 12px); flex-wrap: wrap; }
.v34-hi-range { display: inline-flex; align-items: center; gap: var(--s-2, 8px); padding: 7px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); font-size: 12.5px; font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.v34-hi-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-pill, 999px); font-size: 12px; cursor: pointer; color: var(--text-secondary); transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-hi-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.v34-hi-chip.active { background: var(--accent-glow, rgba(124,92,255,.12)); color: var(--accent-text, #b8a4ff); border-color: transparent; }
.v34-hi-sep { width: 1px; height: 24px; background: var(--border); margin: 0 var(--s-2, 8px); }
.v34-hi-body { padding: var(--s-6, 24px); display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-hi-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4, 16px); }
.v34-hi-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px) var(--s-5, 20px); position: relative; overflow: hidden; }
.v34-hi-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: .8; }
.v34-hi-stat.total::before { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#00ffaa)); }
.v34-hi-stat.ok::before { background: linear-gradient(135deg, var(--success, #22c55e), #22d3ee); }
.v34-hi-stat.err::before { background: linear-gradient(135deg, var(--danger, #ef4444), #ff8da8); }
.v34-hi-stat.skip::before { background: linear-gradient(135deg, var(--warning, #ffb84d), #fdcb6e); }
.v34-hi-stat .lbl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.v34-hi-stat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; }
.v34-hi-stat .v.g-success { color: var(--success, #22c55e); }
.v34-hi-stat .v.g-danger { color: var(--danger, #ef4444); }
.v34-hi-stat .v.g-warn { color: var(--warning, #ffb84d); }
.v34-hi-stat .d { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--success, #22c55e); margin-top: 4px; }
.v34-hi-stat .d.g-danger { color: var(--danger, #ef4444); }
.v34-hi-stat .d.g-warn { color: var(--warning, #ffb84d); }
.v34-hi-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); }
.v34-hi-card-head { padding: var(--s-4, 16px) var(--s-5, 20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-hi-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-hi-card-head .actions { display: flex; gap: var(--s-2, 8px); }
.v34-hi-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-hi-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 7px 12px; border-radius: var(--r-md, 14px); font-size: 12px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-hi-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-hi-timeline { display: flex; flex-direction: column; }
.v34-hi-day-group {
padding: var(--s-3, 12px) var(--s-5, 20px); border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: var(--s-3, 12px);
background: var(--bg-elevated, #1a1a24);
position: sticky; top: 68px; z-index: 2;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.v34-hi-day-group .date { font-family: var(--font-display, 'Onest', sans-serif); font-size: 14px; font-weight: 600; }
.v34-hi-day-group .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-hi-day-group .summary { margin-left: auto; display: flex; gap: var(--s-3, 12px); font-family: var(--font-mono, monospace); font-size: 11.5px; }
.v34-hi-day-group .summary .ok { color: var(--success, #22c55e); }
.v34-hi-day-group .summary .err { color: var(--danger, #ef4444); }
.v34-hi-day-group .summary .skip { color: var(--warning, #ffb84d); }
.v34-hi-row {
display: grid;
grid-template-columns: 80px 28px 1fr 90px 90px 24px;
gap: var(--s-3, 12px);
align-items: center;
padding: var(--s-3, 12px) var(--s-5, 20px);
border-bottom: 1px solid var(--border);
font-size: 13px;
cursor: pointer;
transition: background var(--t-fast, 120ms);
min-width: 0;
}
.v34-hi-row:hover { background: var(--bg-input); }
.v34-hi-row .time { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-muted); }
.v34-hi-row .ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; }
.v34-hi-row .ico.ok { background: rgba(34,197,94,.16); color: var(--success, #22c55e); }
.v34-hi-row .ico.err { background: rgba(239,68,68,.16); color: var(--danger, #ef4444); }
.v34-hi-row .ico.skip { background: rgba(255,184,77,.16); color: var(--warning, #ffb84d); }
.v34-hi-row .info { min-width: 0; }
.v34-hi-row .info .name { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-hi-row .info .meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-hi-row .v { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-secondary); text-align: right; line-height: 1.3; }
.v34-hi-row .v strong { color: var(--text-primary); }
.v34-hi-row .v.danger { color: var(--danger, #ef4444); }
.v34-hi-row .pill { font-family: var(--font-mono, monospace); font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill, 999px); text-align: center; justify-self: center; }
.v34-hi-row .pill.viral { background: rgba(255,92,122,.16); color: #ff8da8; }
.v34-hi-row .pill.strong { background: rgba(0,212,255,.16); color: #00d4ff; }
.v34-hi-row .pill.mid { background: rgba(183,148,246,.18); color: #b794f6; }
.v34-hi-row .pill.ad { background: rgba(255,107,157,.18); color: #ff6b9d; }
.v34-hi-row .pill.err { background: rgba(239,68,68,.16); color: var(--danger, #ef4444); }
.v34-hi-row .arrow { color: var(--text-muted); opacity: .5; text-align: center; }
/* Detail modal */
.v34-hi-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); backdrop-filter: blur(8px); z-index: 100; display: none; align-items: center; justify-content: center; padding: var(--s-4, 16px); }
.v34-hi-modal-overlay.open { display: flex; animation: v34HiFadeIn 200ms; }
@keyframes v34HiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.v34-hi-modal { width: 560px; max-width: 100%; max-height: 85vh; background: var(--bg-card); border: 1px solid var(--border-hover); border-radius: var(--r-lg, 18px); display: flex; flex-direction: column; box-shadow: var(--sh-card-hover, 0 8px 24px rgba(0,0,0,.4)); overflow: hidden; }
.v34-hi-m-head { padding: var(--s-5, 20px) var(--s-6, 24px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--s-3, 12px); }
.v34-hi-m-thumb { width: 44px; height: 44px; border-radius: 11px; background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); display: grid; place-items: center; color: #fff; font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.v34-hi-m-title { font-family: var(--font-display, 'Onest', sans-serif); font-size: 18px; font-weight: 700; }
.v34-hi-m-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-hi-m-close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; }
.v34-hi-m-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-hi-m-body { flex: 1; overflow-y: auto; padding: var(--s-5, 20px) var(--s-6, 24px); }
.v34-hi-m-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3, 12px); margin-bottom: var(--s-5, 20px); }
.v34-hi-m-stat { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px) var(--s-4, 16px); }
.v34-hi-m-stat .l { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-hi-m-stat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; margin-top: 2px; line-height: 1.1; }
.v34-hi-m-stat .v.success { color: var(--success, #22c55e); }
.v34-hi-m-stat .v.danger { color: var(--danger, #ef4444); }
.v34-hi-m-stat .v.muted { color: var(--text-muted); }
.v34-hi-m-list-title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; margin-bottom: var(--s-3, 12px); }
.v34-hi-m-row { padding: 8px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 28px 1fr auto; gap: var(--s-3, 12px); align-items: center; font-size: 12.5px; }
.v34-hi-m-row:last-child { border: none; }
.v34-hi-m-row .ico { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; }
.v34-hi-m-row .ico.ok { background: rgba(34,197,94,.16); color: var(--success, #22c55e); }
.v34-hi-m-row .ico.err { background: rgba(239,68,68,.16); color: var(--danger, #ef4444); }
.v34-hi-m-row .name { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-hi-m-row .reach { font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-secondary); }
.v34-hi-m-row .reach.err { color: var(--danger, #ef4444); }
@media (max-width: 700px) {
.v34-hi-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.v34-hi-head { padding: var(--s-4, 16px); }
.v34-hi h1 { font-size: 22px; }
.v34-hi-filters { overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(var(--s-4, 16px) * -1); padding: 0 var(--s-4, 16px) 4px; -webkit-overflow-scrolling: touch; }
.v34-hi-filters > * { flex-shrink: 0; }
.v34-hi-stat .v { font-size: 22px; }
.v34-hi-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-hi-row { grid-template-columns: 28px 1fr 24px; padding: var(--s-3, 12px) var(--s-4, 16px); gap: var(--s-2, 8px); }
.v34-hi-row .time, .v34-hi-row .v, .v34-hi-row .pill { display: none; }
.v34-hi-day-group { padding: var(--s-3, 12px) var(--s-4, 16px); top: 56px; }
.v34-hi-day-group .summary { display: none; }
}
/* =====================================================================
M16 «AI Комментарии» — .v34-cmt
===================================================================== */
.v34-cmt { min-height: 100%; }
.v34-cmt.active { display: flex; flex-direction: column; }
.v34-cmt-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-cmt-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-cmt h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-cmt-accent { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cmt-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-cmt-sub strong { color: var(--text-primary); }
.v34-cmt-body { padding: var(--s-6, 24px); display: flex; flex-direction: column; gap: var(--s-5, 20px); }
.v34-cmt-hero {
background: linear-gradient(135deg, var(--accent-glow, rgba(124,92,255,.12)), transparent), var(--bg-card);
border: 1px solid rgba(124,92,255,.3);
border-radius: var(--r-lg, 18px);
padding: var(--s-5, 20px) var(--s-6, 24px);
display: grid; grid-template-columns: 1fr auto; gap: var(--s-4, 16px); align-items: center;
}
.v34-cmt-hero .head { font-size: 11px; color: var(--accent-text, #b8a4ff); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.v34-cmt-hero h2 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; }
.v34-cmt-hero .desc { font-size: 13px; color: var(--text-secondary); margin-top: 6px; line-height: 1.5; }
.v34-cmt-toggle-large {
width: 56px; height: 30px; background: var(--accent, #7c5cff);
border-radius: var(--r-pill, 999px); position: relative; cursor: pointer;
flex-shrink: 0; box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.4));
transition: background var(--t-fast, 120ms);
}
.v34-cmt-toggle-large.off { background: var(--border); box-shadow: none; }
.v34-cmt-toggle-large::after {
content: ''; position: absolute; width: 22px; height: 22px;
border-radius: 50%; background: #fff; top: 4px; left: 30px;
transition: left var(--t-fast, 120ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.v34-cmt-toggle-large.off::after { left: 4px; }
.v34-cmt-stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4, 16px); }
.v34-cmt-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px) var(--s-5, 20px); position: relative; overflow: hidden; }
.v34-cmt-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); opacity: .8; }
.v34-cmt-stat .lbl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.v34-cmt-stat .v { font-family: var(--font-display, 'Onest', sans-serif); font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; line-height: 1.1; }
.v34-cmt-stat .v.g-health { background: var(--grad-health, linear-gradient(135deg,#22c55e,#4ade80)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cmt-stat .v.g-ads { background: var(--grad-ads, linear-gradient(135deg,#ff6b9d,#ff8c42)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-cmt-stat .d { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--success, #22c55e); margin-top: 4px; }
.v34-cmt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-cmt-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-cmt-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-cmt-card-head .meta { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cmt-empty { padding: var(--s-5, 20px); text-align: center; color: var(--text-muted); font-size: 13px; font-family: var(--font-mono, monospace); }
.v34-cmt-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5, 20px); }
/* Style picker */
.v34-cmt-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3, 12px); }
.v34-cmt-style-card { background: var(--bg-input); border: 1.5px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); cursor: pointer; transition: all var(--t-base, 200ms); position: relative; }
.v34-cmt-style-card:hover { border-color: var(--border-hover); }
.v34-cmt-style-card.sel { border-color: var(--accent, #7c5cff); background: linear-gradient(135deg, var(--accent-glow, rgba(124,92,255,.12)), transparent); }
.v34-cmt-style-card.sel::before { content: '✓'; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent, #7c5cff); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.v34-cmt-style-card .name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.v34-cmt-style-card .desc { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.v34-cmt-style-card .ctr { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-secondary); margin-top: var(--s-2, 8px); padding-top: var(--s-2, 8px); border-top: 1px solid var(--border); }
.v34-cmt-style-card .ctr strong { color: var(--text-primary); }
/* Form */
.v34-cmt-field { display: flex; flex-direction: column; gap: var(--s-2, 8px); margin-bottom: var(--s-4, 16px); }
.v34-cmt-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-cmt-field input, .v34-cmt-field select, .v34-cmt-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); font-family: inherit; }
.v34-cmt-field input:focus, .v34-cmt-field select:focus, .v34-cmt-field textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-cmt-field textarea { min-height: 100px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 12.5px; }
.v34-cmt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4, 16px); margin-bottom: var(--s-4, 16px); }
.v34-cmt-field-row .v34-cmt-field { margin-bottom: 0; }
.v34-cmt-hint { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cmt-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 14px; border-radius: var(--r-md, 14px); font-size: 12.5px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-cmt-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-cmt-btn-primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); padding: 10px 16px; width: 100%; margin-top: var(--s-3, 12px); }
.v34-cmt-btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); color: #fff; }
/* Hourly chart */
.v34-cmt-chart { height: 140px; padding-left: 30px; position: relative; }
.v34-cmt-chart svg { width: 100%; height: 100%; }
.v34-cmt-chart-y { position: absolute; left: 0; top: 0; bottom: 12px; width: 30px; display: flex; flex-direction: column; justify-content: space-between; font-size: 9.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-cmt-chart-x { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono, monospace); margin-top: 4px; padding-left: 30px; }
.v34-cmt-chart-meta { font-size: 12.5px; color: var(--text-secondary); margin-top: var(--s-3, 12px); font-family: var(--font-mono, monospace); }
.v34-cmt-chart-meta strong { color: var(--text-primary); }
/* Comment stream */
.v34-cmt-list { display: flex; flex-direction: column; }
.v34-cmt-row { padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 28px 1fr; gap: var(--s-3, 12px); font-size: 12.5px; }
.v34-cmt-row:last-child { border: none; }
.v34-cmt-row .ico { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-glow, rgba(124,92,255,.12)); color: var(--accent-text, #b8a4ff); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.v34-cmt-row .ts { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-muted); }
.v34-cmt-row .body .t1 { color: var(--text-primary); margin-top: 2px; line-height: 1.5; }
.v34-cmt-row .body .meta { display: inline-flex; gap: var(--s-2, 8px); margin-top: 4px; font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--text-muted); flex-wrap: wrap; }
.v34-cmt-row .body .meta .lk { color: var(--success, #22c55e); }
@media (max-width: 1000px) {
.v34-cmt-row-2 { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.v34-cmt-stat-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.v34-cmt-field-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.v34-cmt-head { padding: var(--s-4, 16px); }
.v34-cmt h1 { font-size: 22px; }
.v34-cmt-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-cmt-card, .v34-cmt-hero { padding: var(--s-4, 16px); }
.v34-cmt-hero { grid-template-columns: 1fr; gap: var(--s-3, 12px); }
.v34-cmt-stat-strip { gap: var(--s-3, 12px); }
.v34-cmt-stat .v { font-size: 22px; }
}
/* =====================================================================
2026-05-10: v34-cbs — Полная панель настроек бота
7 секций с полями настроек (toggle/range/select/number).
===================================================================== */
.v34-cbs-shell {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 18px);
overflow: hidden;
}
.v34-cbs-head {
padding: 18px 20px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(183,148,246,0.03));
}
.v34-cbs-title h3 {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
.v34-cbs-sub {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
font-family: var(--font-mono, monospace);
}
.v34-cbs-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.v34-cbs-grid {
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.v34-cbs-foot {
padding: 12px 20px;
border-top: 1px solid var(--border);
background: rgba(0,0,0,0.10);
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
}
.v34-cbs-section {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
overflow: hidden;
}
.v34-cbs-section[open] {
border-color: rgba(124,92,255,0.30);
}
.v34-cbs-section-head {
padding: 12px 16px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
list-style: none;
user-select: none;
transition: background 120ms;
}
.v34-cbs-section-head::-webkit-details-marker { display: none; }
.v34-cbs-section-head:hover { background: rgba(124,92,255,0.04); }
.v34-cbs-section-icon {
font-size: 16px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: 7px;
background: rgba(124,92,255,0.08);
}
.v34-cbs-section-title {
font-size: 13.5px;
font-weight: 600;
color: var(--text-primary);
flex: 1;
}
.v34-cbs-section-arrow {
font-size: 11px;
color: var(--text-muted);
transition: transform 180ms;
}
.v34-cbs-section[open] .v34-cbs-section-arrow {
transform: rotate(180deg);
}
.v34-cbs-section-body {
padding: 4px 16px 14px;
border-top: 1px solid rgba(255,255,255,0.04);
}
.v34-cbs-field {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
min-height: 44px;
}
.v34-cbs-field:last-child { border-bottom: none; }
.v34-cbs-field-stack {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.v34-cbs-label {
font-size: 12.5px;
color: var(--text-secondary, #b8bcc8);
flex: 1;
min-width: 0;
}
.v34-cbs-input-num {
width: 100px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
color: var(--text-primary);
font-family: var(--font-mono, monospace);
text-align: right;
transition: border-color 120ms;
}
.v34-cbs-input-num:focus {
outline: none;
border-color: rgba(124,92,255,0.6);
}
.v34-cbs-select {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 6px 10px;
font-size: 12px;
color: var(--text-primary);
font-family: inherit;
cursor: pointer;
min-width: 160px;
transition: border-color 120ms;
}
.v34-cbs-select:focus {
outline: none;
border-color: rgba(124,92,255,0.6);
}
.v34-cbs-toggle {
position: relative;
cursor: pointer;
display: inline-block;
flex-shrink: 0;
}
.v34-cbs-toggle input {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.v34-cbs-toggle-track {
display: inline-block;
width: 38px; height: 22px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
transition: background 180ms, border-color 180ms;
position: relative;
}
.v34-cbs-toggle-thumb {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
background: var(--text-muted);
border-radius: 50%;
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms;
}
.v34-cbs-toggle input:checked + .v34-cbs-toggle-track {
background: linear-gradient(135deg, #7c5cff, #b794f6);
border-color: transparent;
}
.v34-cbs-toggle input:checked + .v34-cbs-toggle-track .v34-cbs-toggle-thumb {
transform: translateX(16px);
background: #fff;
}
.v34-cbs-range-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.v34-cbs-range-wrap input[type="range"] {
width: 130px;
accent-color: #7c5cff;
}
.v34-cbs-range-val {
font-size: 12px;
color: var(--accent, #7c5cff);
font-family: var(--font-mono, monospace);
font-weight: 600;
min-width: 32px;
text-align: right;
}
.v34-cbs-divider {
margin: 14px 0 6px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.04);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--text-muted);
font-weight: 600;
}
.v34-cbs-hint {
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
padding: 4px 0 8px;
}
.v34-cbs-hint-warn { color: var(--warning, #f59e0b); }
.v34-cbs-chain {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.v34-cbs-chain-btn {
padding: 6px 12px;
border-radius: 8px;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--text-secondary);
font-family: inherit;
transition: all 120ms;
}
.v34-cbs-chain-btn.on {
background: linear-gradient(135deg, #7c5cff, #b794f6);
color: #fff;
border-color: transparent;
}
.v34-cbs-chain-btn.off:hover {
border-color: var(--border-hover);
color: var(--text-primary);
}
@media (max-width: 720px) {
.v34-cbs-head { padding: 14px; flex-direction: column; align-items: stretch; }
.v34-cbs-actions { width: 100%; }
.v34-cbs-actions > * { flex: 1; }
.v34-cbs-grid { padding: 14px; }
.v34-cbs-section-body { padding: 4px 12px 12px; }
.v34-cbs-field { gap: 10px; flex-wrap: wrap; }
.v34-cbs-input-num { width: 90px; }
.v34-cbs-select { min-width: 140px; }
.v34-cbs-range-wrap input[type="range"] { width: 100px; }
}
/* =====================================================================
M17 «Утилиты · микро-операции» — .v34-mc
===================================================================== */
.v34-mc { min-height: 100%; }
.v34-mc.active { display: flex; flex-direction: column; }
.v34-mc-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-mc-title h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 28px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-mc-accent { background: var(--grad-brand, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-mc-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
.v34-mc-tool-tabs { display: flex; gap: var(--s-2, 8px); margin-top: var(--s-5, 20px); margin-bottom: -1px; flex-wrap: wrap; }
.v34-mc-tab { padding: 12px 18px; border: none; background: transparent; border-bottom: 2px solid transparent; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all var(--t-fast, 120ms); font-family: inherit; }
.v34-mc-tab:hover { color: var(--text-primary); }
.v34-mc-tab.active { color: var(--text-primary); border-bottom-color: var(--accent, #7c5cff); }
.v34-mc-body { padding: var(--s-6, 24px); display: flex; flex-direction: column; gap: var(--s-5, 20px); max-width: 800px; }
.v34-mc-pane { display: none; flex-direction: column; gap: var(--s-5, 20px); }
.v34-mc-pane.active { display: flex; animation: v34McPaneIn 250ms var(--ease-out); }
@keyframes v34McPaneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.v34-mc-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-mc-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-2, 8px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-mc-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-mc-card-desc { font-size: 12.5px; color: var(--text-secondary); margin-bottom: var(--s-4, 16px); line-height: 1.5; max-width: 600px; }
.v34-mc-card-desc code { font-family: var(--font-mono, monospace); background: var(--bg-input); padding: 1px 5px; border-radius: 4px; }
.v34-mc-link { color: var(--accent-text, #b8a4ff); cursor: pointer; }
.v34-mc-empty { padding: var(--s-4, 16px); text-align: center; color: var(--text-muted); font-size: 12.5px; font-family: var(--font-mono, monospace); }
.v34-mc-field { display: flex; flex-direction: column; gap: var(--s-2, 8px); margin-bottom: var(--s-4, 16px); }
.v34-mc-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-mc-field input, .v34-mc-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); font-family: inherit; }
.v34-mc-field input:focus, .v34-mc-field textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-mc-field textarea { min-height: 100px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.5; }
.v34-mc-edit-textarea { font-family: inherit !important; min-height: 140px !important; font-size: 13.5px !important; }
.v34-mc-hint { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-mc-hint code { font-family: var(--font-mono, monospace); background: var(--bg-input); padding: 1px 5px; border-radius: 4px; }
.v34-mc-row-end { display: flex; justify-content: flex-end; margin-bottom: var(--s-4, 16px); }
.v34-mc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-4, 16px); border-top: 1px solid var(--border); margin-top: var(--s-3, 12px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-mc-foot .meta { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-mc-foot .meta code { font-family: var(--font-mono, monospace); background: var(--bg-input); padding: 1px 5px; border-radius: 4px; }
.v34-mc-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 14px; border-radius: var(--r-md, 14px); font-size: 12.5px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-mc-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-mc-btn-primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; border: none; padding: 10px 18px; border-radius: var(--r-md, 14px); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: all var(--t-fast, 120ms); box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); }
.v34-mc-btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); transform: translateY(-1px); color: #fff; }
.v34-mc-btn-danger { background: linear-gradient(135deg, var(--danger, #ef4444), #ff8da8); color: #fff; border: none; padding: 10px 18px; border-radius: var(--r-md, 14px); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-mc-btn-danger:hover { box-shadow: 0 4px 14px rgba(239,68,68,.4); transform: translateY(-1px); color: #fff; }
/* DELETE — tasks list */
.v34-mc-tasks { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
/* EDIT preview */
.v34-mc-edit-preview { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); display: flex; gap: var(--s-3, 12px); }
.v34-mc-edit-preview[hidden] { display: none; }
.v34-mc-edit-thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)); display: grid; place-items: center; color: #fff; font-weight: 700; font-family: var(--font-display, 'Onest', sans-serif); font-size: 14px; flex-shrink: 0; }
.v34-mc-edit-info .name { font-size: 13.5px; font-weight: 600; }
.v34-mc-edit-info .meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-mc-edit-text { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-top: var(--s-3, 12px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); }
/* ADD-COMM rows */
.v34-mc-cf-list { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-mc-cf-row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: var(--s-3, 12px);
align-items: center;
padding: var(--s-3, 12px);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
}
.v34-mc-cf-row .num { font-family: var(--font-display, 'Onest', sans-serif); font-weight: 700; color: var(--text-muted); font-size: 14px; text-align: center; }
.v34-mc-cf-row input { background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 13.5px; font-family: var(--font-mono, monospace); }
.v34-mc-cf-row .del-btn { width: 28px; height: 28px; border-radius: 7px; background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; transition: all var(--t-fast, 120ms); font-size: 14px; }
.v34-mc-cf-row .del-btn:hover { color: var(--danger, #ef4444); background: rgba(239,68,68,.16); }
.v34-mc-add-row-btn { padding: 10px; background: transparent; border: 2px dashed var(--border); border-radius: var(--r-md, 14px); color: var(--text-muted); cursor: pointer; font-size: 13px; font-family: inherit; transition: all var(--t-fast, 120ms); display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--s-3, 12px); width: 100%; }
.v34-mc-add-row-btn:hover { border-color: var(--accent, #7c5cff); color: var(--accent-text, #b8a4ff); }
@media (max-width: 768px) {
.v34-mc-head { padding: var(--s-4, 16px); }
.v34-mc-title h1 { font-size: 20px; }
.v34-mc-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-mc-card { padding: var(--s-4, 16px); }
.v34-mc-tool-tabs { overflow-x: auto; flex-wrap: nowrap; margin: var(--s-3, 12px) calc(var(--s-4, 16px) * -1) 0; padding: 0 var(--s-4, 16px); -webkit-overflow-scrolling: touch; }
.v34-mc-tab { flex-shrink: 0; padding: 10px 14px; font-size: 12.5px; }
}
/* =====================================================================
M15 «Постинг историй» — .v34-st
===================================================================== */
.v34-st { min-height: 100%; }
.v34-st.active { display: flex; flex-direction: column; }
.v34-st-head { padding: var(--s-6, 24px); border-bottom: 1px solid var(--border); }
.v34-st-title { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-st h1 { font-family: var(--font-display, 'Onest', sans-serif); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.v34-st-accent { background: var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.v34-st-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); }
/* Фаза Т (2026-05-10): aside расширен до 380px (был 320px), Preview увеличен ×2.5×. */
.v34-st-body { padding: var(--s-6, 24px); display: grid; grid-template-columns: 1fr 380px; gap: var(--s-5, 20px); align-items: start; }
/* Tasks-card теперь под формой (Фаза Т-6б), а не в правой aside. */
.v34-st-tasks-card { grid-column: 1; grid-row: 2; }
.v34-st-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg, 18px); padding: var(--s-5, 20px); }
.v34-st-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4, 16px); flex-wrap: wrap; gap: var(--s-3, 12px); }
.v34-st-card-head .title { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 600; }
.v34-st-card-head .title.ads { color: #ff8da8; }
.v34-st-empty { padding: var(--s-4, 16px); text-align: center; color: var(--text-muted); font-size: 12.5px; font-family: var(--font-mono, monospace); }
.v34-st-type-tabs { display: inline-flex; gap: 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; margin-bottom: var(--s-5, 20px); }
.v34-st-type-tabs button { padding: 8px 16px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 13px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); display: inline-flex; align-items: center; gap: 6px; }
.v34-st-type-tabs button:hover { color: var(--text-primary); }
.v34-st-type-tabs button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-st-field { display: flex; flex-direction: column; gap: var(--s-2, 8px); margin-bottom: var(--s-4, 16px); }
.v34-st-field label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.v34-st-field input, .v34-st-field select, .v34-st-field textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 10px 12px; font-size: 13.5px; color: var(--text-primary); font-family: inherit; }
.v34-st-field input:focus, .v34-st-field select:focus, .v34-st-field textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-st-field textarea { min-height: 80px; resize: vertical; }
.v34-st-hint { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
.v34-st-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4, 16px); }
.v34-st-field-row .v34-st-field { margin-bottom: var(--s-4, 16px); }
.v34-st-pill-group { display: flex; gap: 4px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: 3px; flex-wrap: wrap; }
.v34-st-pill-group button { padding: 7px 14px; border: none; background: transparent; border-radius: var(--r-sm, 8px); font-size: 12.5px; color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-st-pill-group button:hover { color: var(--text-primary); }
.v34-st-pill-group button.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.v34-st-ads-card { background: var(--bg-input); border: 1px solid rgba(255,107,157,.3); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); margin-top: var(--s-3, 12px); margin-bottom: var(--s-4, 16px); }
.v34-st-foot { display: flex; justify-content: flex-end; gap: var(--s-3, 12px); padding-top: var(--s-5, 20px); border-top: 1px solid var(--border); margin-top: var(--s-5, 20px); flex-wrap: wrap; }
.v34-st-btn { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); padding: 8px 14px; border-radius: var(--r-md, 14px); font-size: 12.5px; cursor: pointer; font-family: inherit; transition: all var(--t-fast, 120ms); }
.v34-st-btn:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-st-btn-primary { background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff); color: #fff; border: none; padding: 10px 18px; border-radius: var(--r-md, 14px); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; transition: all var(--t-fast, 120ms); box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,.3)); }
.v34-st-btn-primary:hover { box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,.5)); transform: translateY(-1px); color: #fff; }
/* Right column */
.v34-st-right { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: var(--s-4, 16px); position: sticky; top: calc(68px + var(--s-6, 24px)); }
.v34-st-preview-card { padding: var(--s-5, 20px); }
/* Фаза Т-6а: Preview переключён в column-layout — крупная рамка сверху, инфо снизу. */
.v34-st-preview { background: var(--bg-input); border-radius: var(--r-md, 14px); padding: var(--s-5, 20px); display: flex; flex-direction: column; gap: var(--s-4, 16px); align-items: center; text-align: center; }
.v34-st-frame {
width: 240px; aspect-ratio: 9 / 16;
border-radius: 14px;
background: linear-gradient(180deg, var(--grad-viral, linear-gradient(135deg,#ff6b9d,#ffb84d)), var(--grad-queue, linear-gradient(135deg,#7c5cff,#9d7cff)));
position: relative; overflow: hidden; flex-shrink: 0;
box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
/* Фаза Т-6а: пропорции pseudo-элементов адаптированы под крупную рамку 240×~427. */
.v34-st-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px; background: linear-gradient(180deg, rgba(0,0,0,.5), transparent); }
.v34-st-frame::after { content: ''; position: absolute; bottom: 30px; left: 16px; right: 16px; height: 50px; background: rgba(255,255,255,.95); border-radius: 12px; }
.v34-st-frame .btn-overlay { position: absolute; bottom: 40px; left: 16px; right: 16px; height: 30px; display: grid; place-items: center; font-size: 14px; color: #1a1a26; font-weight: 600; z-index: 2; }
.v34-st-preview-info .name { font-size: 15px; color: var(--text-primary); font-weight: 600; }
.v34-st-preview-info .meta { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-family: var(--font-mono, monospace); line-height: 1.6; }
.v34-st-tasks { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-st-task-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-4, 16px); }
.v34-st-task-card .head { display: flex; align-items: center; gap: var(--s-2, 8px); }
.v34-st-task-card .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success, #22c55e); box-shadow: 0 0 6px var(--success, #22c55e); flex-shrink: 0; animation: v34StPulse 1.8s ease-out infinite; }
.v34-st-task-card .dot.warn { background: var(--warning, #ffb84d); box-shadow: 0 0 6px var(--warning, #ffb84d); }
.v34-st-task-card .dot.info { background: var(--info, #4dabff); box-shadow: 0 0 6px var(--info, #4dabff); }
@keyframes v34StPulse { 0% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }
.v34-st-task-card .name { font-size: 13px; color: var(--text-primary); font-weight: 500; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-st-task-card .meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-family: var(--font-mono, monospace); }
.v34-st-task-card .progress { height: 4px; background: var(--bg-card); border-radius: 2px; margin-top: var(--s-3, 12px); overflow: hidden; }
.v34-st-task-card .progress .fill { height: 100%; background: var(--success, #22c55e); border-radius: 2px; transition: width var(--t-slow, 320ms) var(--ease-out); }
.v34-st-task-card .progress .fill.warn { background: var(--warning, #ffb84d); }
/* F1+F3+F10: карточка задачи в правой панели — две строки header'а, отдельные мета-блоки.
Раньше карточки были тесные (одна строка с name + status + ellipsis) — расширили до 5-row layout. */
.v34-st-tasks { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.v34-st-task-card { padding: var(--s-4, 14px) !important; display: flex; flex-direction: column; gap: 6px; }
.v34-st-task-card.is-done { opacity: 0.65; }
.v34-st-task-card.is-done:hover { opacity: 0.9; }
.v34-st-task-row1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v34-st-task-type { font-size: 12.5px; color: var(--text-primary); font-weight: 600; }
.v34-st-task-status { font-size: 10.5px; padding: 3px 9px; border-radius: var(--r-pill, 999px); font-weight: 600; white-space: nowrap; }
.v34-st-task-status.done { color: var(--success); background: rgba(0,212,170,.14); }
.v34-st-task-status.pending { color: var(--warning); background: rgba(255,184,77,.14); }
.v34-st-task-time { font-size: 12px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.v34-st-task-meta { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.v34-st-task-meta .sep { color: var(--text-muted); opacity: .5; }
.v34-st-task-result { font-size: 12px; color: var(--text-secondary); padding-top: 6px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 8px; }
.v34-st-task-result .ok { color: var(--success); font-weight: 600; }
.v34-st-task-result .bad { color: var(--danger); font-weight: 600; }
.v34-st-task-result.warn { color: var(--danger); }
.v34-st-task-result a { color: var(--accent, #6c5ce7); text-decoration: none; margin-left: auto; font-size: 11px; }
.v34-st-task-result a:hover { text-decoration: underline; }
.v34-st-task-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.v34-st-task-btn {
background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
padding: 5px 10px; border-radius: var(--r-sm, 8px); font-size: 12px; cursor: pointer;
font-family: inherit; transition: all var(--t-fast, 120ms);
}
.v34-st-task-btn:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-input); }
.v34-st-task-btn.danger { color: var(--danger); border-color: rgba(239,68,68,.3); }
.v34-st-task-btn.danger:hover { background: rgba(239,68,68,.12); border-color: var(--danger); }
.v34-st-task-card .progress .fill.info { background: var(--info, #4dabff); }
@media (max-width: 1100px) {
.v34-st-body { grid-template-columns: 1fr; }
.v34-st-right { position: static; grid-column: auto; grid-row: auto; }
/* Фаза Т-6б: на узких экранах tasks-card идёт автопотоком после формы. */
.v34-st-tasks-card { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
.v34-st-field-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.v34-st-head { padding: var(--s-4, 16px); }
.v34-st h1 { font-size: 22px; }
.v34-st-body { padding: var(--s-4, 16px); gap: var(--s-4, 16px); }
.v34-st-card { padding: var(--s-4, 16px); }
}
/* ---------- F03a: Posting creative edit-modal + DnD reorder ---------- */
.v34-post-cre-modal-ov.open { z-index: 220; }
.v34-post-cre-modal { width: 640px; max-width: 100%; border-color: var(--accent, #6c5ce7) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 60px rgba(108,92,231,.20) !important; }
.v34-post-cre-modal-body { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; }
.v34-post-cre-modal-lbl { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin: 0 0 4px; }
.v34-post-cre-modal-lbl .hint { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.v34-post-cre-modal-ta,
.v34-post-cre-modal-input {
width: 100%;
background: var(--bg-input, rgba(255,255,255,.04));
border: 1px solid var(--border, rgba(255,255,255,.08));
color: var(--text-primary);
font: inherit;
font-size: 13px;
line-height: 1.5;
padding: 9px 11px;
border-radius: 8px;
transition: border-color 120ms ease, background 120ms ease;
box-sizing: border-box;
resize: vertical;
}
.v34-post-cre-modal-ta:focus,
.v34-post-cre-modal-input:focus {
outline: none;
border-color: var(--accent, #6c5ce7);
background: rgba(108,92,231,.06);
}
.v34-post-cre-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v34-post-cre-modal-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none; }
.v34-post-cre-modal-check input { accent-color: var(--accent, #6c5ce7); }
.v34-post-cre-modal-save { background: var(--accent, #6c5ce7) !important; border-color: var(--accent, #6c5ce7) !important; color: #fff !important; }
.v34-post-cre-modal-save:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
.v34-post-cre-modal-grid { grid-template-columns: 1fr; }
}
.v34-post-cre[draggable="true"] { cursor: grab; }
.v34-post-cre.is-dragging { opacity: .55; cursor: grabbing; }
.v34-post-cre.is-drop-target { outline: 2px dashed var(--accent, #6c5ce7); outline-offset: 4px; }
/* F05: общий v34.confirm() preview-modal — переиспользует .v34-cl-modal-overlay структуру */
/* z-index: 9500 чтобы confirm был выше adCreator (.v34-ad-backdrop = 9000) и его product-editor (=9100). */
.v34-confirm-ov.open { z-index: 9500; }
.v34-confirm-modal { width: 560px; max-width: 100%; }
.v34-confirm-ov.v34-confirm-info .v34-confirm-modal { border-color: var(--accent, #6c5ce7) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 60px rgba(108,92,231,.18) !important; }
.v34-confirm-ov.v34-confirm-warn .v34-confirm-modal { border-color: var(--warning, #fdcb6e) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 60px rgba(253,203,110,.20) !important; }
.v34-confirm-ov.v34-confirm-danger .v34-confirm-modal { border-color: var(--danger, #ef4444) !important; box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 60px rgba(239,68,68,.20) !important; }
.v34-confirm-ov.v34-confirm-info #v34ConfirmIcon { background: rgba(108,92,231,.18); color: var(--accent, #6c5ce7); }
.v34-confirm-ov.v34-confirm-warn #v34ConfirmIcon { background: rgba(253,203,110,.20); color: var(--warning, #fdcb6e); }
.v34-confirm-ov.v34-confirm-danger #v34ConfirmIcon { background: rgba(239,68,68,.18); color: var(--danger, #ef4444); }
.v34-confirm-list {
display: flex; flex-direction: column; gap: 6px;
max-height: 320px; overflow-y: auto;
padding: 4px 2px;
}
.v34-confirm-row {
background: var(--bg-input, rgba(255,255,255,.04));
border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 8px;
padding: 8px 12px;
font-size: 12.5px;
color: var(--text-primary);
word-break: break-all;
}
.v34-confirm-row-text { line-height: 1.45; }
.v34-confirm-row-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.v34-confirm-empty,
.v34-confirm-more { font-size: 12px; color: var(--text-muted); text-align: center; padding: 8px 0; }
.v34-confirm-ov.v34-confirm-info #v34ConfirmOk { background: var(--accent, #6c5ce7) !important; border-color: var(--accent, #6c5ce7) !important; color: #fff !important; }
.v34-confirm-ov.v34-confirm-warn #v34ConfirmOk { background: var(--warning, #fdcb6e) !important; border-color: var(--warning, #fdcb6e) !important; color: #1a1a1a !important; }
.v34-confirm-ov.v34-confirm-danger #v34ConfirmOk { background: var(--danger, #ef4444) !important; border-color: var(--danger, #ef4444) !important; color: #fff !important; }
.v34-confirm-ov #v34ConfirmOk:hover { filter: brightness(1.08); }
/* F03b: hidden inputs (date/time pickers triggered programmatically) + loading state */
.v34-post-hidden-input {
position: fixed;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.v34-post-publish-btn.is-loading,
.v34-post-publish-btn[disabled] {
opacity: .65;
cursor: progress;
pointer-events: none;
}
/* F15: M15 Stories — template select + delete button (injected via JS) */
.v34-st-tpl-select {
background: var(--surface-2, #1c1c1e);
color: var(--text-1, #f1f1f1);
border: 1px solid var(--border, #2c2c2e);
border-radius: 8px;
padding: 6px 10px;
font-size: 13px;
margin-right: 8px;
max-width: 200px;
}
.v34-st-tpl-del {
margin-right: 8px;
padding: 6px 10px;
}
.v34-st-tpl-del[disabled] { opacity: .4; cursor: not-allowed; }
/* F17: Cmd+K command palette */
.v34-cmdk-ov {
position: fixed; inset: 0;
background: rgba(0, 0, 0, .55);
backdrop-filter: blur(2px);
z-index: 240;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
.v34-cmdk-ov.is-open { display: flex; }
.v34-cmdk-modal {
background: var(--surface-1, #1c1c1e);
color: var(--text-1, #f1f1f1);
border: 1px solid var(--border, #2c2c2e);
border-radius: 14px;
width: min(640px, 92vw);
max-height: 70vh;
box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
display: flex;
flex-direction: column;
overflow: hidden;
}
.v34-cmdk-input-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--border, #2c2c2e);
}
.v34-cmdk-icon { font-size: 16px; opacity: .65; }
.v34-cmdk-input {
flex: 1;
background: transparent;
border: 0;
outline: 0;
color: inherit;
font-size: 15px;
padding: 4px 0;
}
.v34-cmdk-hint {
font-size: 11px;
background: var(--surface-2, #252528);
color: var(--text-3, #888);
padding: 2px 7px;
border-radius: 5px;
border: 1px solid var(--border, #2c2c2e);
}
.v34-cmdk-list {
overflow-y: auto;
padding: 6px;
flex: 1;
}
.v34-cmdk-section {
padding: 8px 10px 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--text-3, #888);
}
.v34-cmdk-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
}
.v34-cmdk-row:hover,
.v34-cmdk-row.is-active {
background: var(--surface-2, #252528);
}
.v34-cmdk-row-icon { width: 18px; text-align: center; opacity: .55; }
.v34-cmdk-row-label { flex: 1; }
.v34-cmdk-row-hint {
font-size: 11px;
color: var(--text-3, #888);
}
.v34-cmdk-empty {
padding: 24px;
text-align: center;
color: var(--text-3, #888);
font-size: 13px;
}
.v34-cmdk-foot {
display: flex;
gap: 14px;
padding: 8px 14px;
border-top: 1px solid var(--border, #2c2c2e);
font-size: 11px;
color: var(--text-3, #888);
background: var(--surface-2, #252528);
}
body.v34-cmdk-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.v34-cmdk-ov { backdrop-filter: none; }
}
/* F19: mobile audit fixes — applied 2026-05-05. */
/* FIX-2: универсальный horizontal-scroll для tab/filter стрипов (P3,P4,P11,P12,P13,P14,P15). */
@media (max-width: 1100px) {
.v34-cs-sub-tabs,
.v34-cm-filters,
.v34-hi-filters,
.v34-tk-cat-tabs,
.v34-an-sub-tabs,
.v34-an-filters,
.v34-mc-tool-tabs,
.v34-post-slotbar {
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.v34-cs-sub-tabs > *,
.v34-cm-filters > *,
.v34-hi-filters > *,
.v34-tk-cat-tabs > *,
.v34-an-sub-tabs > *,
.v34-an-filters > *,
.v34-mc-tool-tabs > *,
.v34-post-slotbar > * {
flex-shrink: 0;
}
}
/* FIX-3: bento-grid → 1 колонка на phone, перебивает span/row из @1100 (P1). */
@media (max-width: 768px) {
section.page.v34-bento .v34-bento-grid {
grid-template-columns: 1fr;
gap: 12px;
}
section.page.v34-bento .v34-bento-grid > * {
grid-column: 1 / -1;
grid-row: auto;
}
}
/* FIX-4 (legacy): consolidated в новый @media 768/480 для cock-таблицы выше.
Оставляем только parser rail max-width часть. */
@media (max-width: 420px) {
.v34-search-rail { max-width: 100vw; }
.v34-search-rail > * { max-width: 70vw; }
}
/* FIX-5: word-wrap на длинных строках + analytics fold (P9, P10). */
@media (max-width: 768px) {
.v34-tg-bot .url,
.v34-post-q-name,
.v34-cm-card .meta,
.v34-cm-card .name {
word-break: break-word;
overflow-wrap: anywhere;
}
.v34-an-pane { overflow-x: auto; }
.v34-an-heatmap-grid { min-width: 460px; }
}
/* F20: Network graph SVG inner. Контейнер .v34-an-network-svg уже определён выше. */
.v34-an-net-svg-inner {
width: 100%;
max-width: 480px;
height: auto;
display: block;
}
.v34-an-net-svg-inner circle { transition: fill-opacity .15s ease; cursor: default; }
.v34-an-net-svg-inner circle:hover { fill-opacity: 1; }
/* F21: Bots toolbar (injected via JS in M07 page-tgbots). */
.v34-bots-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.v34-bots-tb-btn {
background: var(--surface-2, #1c1c1e);
color: var(--text-1, #f1f1f1);
border: 1px solid var(--border, #2c2c2e);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
transition: background .15s ease;
}
.v34-bots-tb-btn:hover { background: var(--surface-3, #2c2c2e); }
.v34-bots-tb-btn[disabled] { opacity: .5; cursor: progress; }
.v34-bots-tb-primary {
background: var(--accent, #7c5cff);
border-color: var(--accent, #7c5cff);
color: #fff;
}
.v34-bots-tb-primary:hover { filter: brightness(1.08); background: var(--accent, #7c5cff); }
@media (max-width: 768px) {
.v34-bots-tb-btn { min-height: 44px; padding: 10px 14px; }
}
/* =====================================================================
M08 «Настройки системы» — v34 design tokens (rewrite 2026-05-10).
9 sub-tabs + sticky save-bar. Все цвета/радиусы/типографика — в v34-стиле.
===================================================================== */
.v34-set { min-height: 100%; }
.v34-set.active { display: flex; flex-direction: column; }
.v34-set-head {
padding: var(--s-6, 24px) var(--s-6, 24px) 0;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(124,92,255,0.06), rgba(183,148,246,0.02));
}
.v34-set-title-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s-4, 16px);
margin-bottom: var(--s-5, 20px);
flex-wrap: wrap;
}
.v34-set-title-row h1 {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 28px;
font-weight: 700;
margin: 0;
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--text-primary);
}
.v34-set-accent {
background: var(--grad-brand, linear-gradient(135deg, #7c5cff, #b794f6));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.v34-set-sub {
font-size: 12.5px;
color: var(--text-muted);
margin-top: 6px;
font-family: var(--font-mono, monospace);
}
.v34-set-summary {
display: flex;
align-items: center;
gap: var(--s-2, 8px);
}
.v34-set-reload {
background: var(--bg-input);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 8px 14px;
font-size: 12.5px;
cursor: pointer;
font-family: inherit;
transition: all 120ms;
}
.v34-set-reload:hover {
background: var(--bg-card-hover);
color: var(--text-primary);
border-color: var(--border-hover);
}
.v34-set-sub-tabs {
display: flex;
gap: var(--s-2, 8px);
margin-bottom: -1px;
flex-wrap: wrap;
}
.v34-set-tab {
background: transparent;
border: 1px solid transparent;
border-bottom: 2px solid transparent;
color: var(--text-muted);
padding: 10px 14px;
font-size: 12.5px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
border-radius: 8px 8px 0 0;
transition: color 120ms, background 120ms, border-color 120ms;
display: inline-flex;
align-items: center;
gap: 6px;
}
.v34-set-tab:hover {
color: var(--text-primary);
background: rgba(124,92,255,0.04);
}
.v34-set-tab.active {
color: var(--text-primary);
background: var(--bg-card);
border-color: var(--border);
border-bottom-color: var(--bg-card);
}
.v34-set-body {
padding: var(--s-6, 24px);
padding-bottom: 100px;
}
.v34-set-pane { display: none; }
.v34-set-pane.active {
display: block;
animation: v34SetPaneIn 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes v34SetPaneIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.v34-set-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 18px);
padding: var(--s-6, 24px);
max-width: 820px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
overflow: hidden;
}
/* 2026-05-13 (v34.75): subtle inner glow для глубины. */
.v34-set-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(120% 60% at 0% 0%, rgba(124,92,255,0.06), transparent 50%);
pointer-events: none;
}
.v34-set-card > * { position: relative; }
.v34-set-section {
margin: var(--s-6, 24px) 0 var(--s-3, 12px);
padding-top: var(--s-5, 20px);
border-top: 1px solid rgba(255,255,255,0.06);
position: relative;
}
.v34-set-section:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
/* 2026-05-13 (v34.75): gradient-полоска слева у заголовка секции. */
.v34-set-section h3 {
font-size: 12px;
font-weight: 700;
margin: 0 0 8px;
color: var(--text-secondary, #d4d4dc);
text-transform: uppercase;
letter-spacing: 0.12em;
position: relative;
padding-left: 14px;
}
.v34-set-section h3::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px;
height: 16px;
background: linear-gradient(180deg, #7c5cff 0%, #b794f6 100%);
border-radius: 2px;
}
.v34-set-hint {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.55;
margin-top: 6px;
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border-left: 2px solid rgba(124,92,255,0.30);
border-radius: 0 6px 6px 0;
}
.v34-set-hint code {
background: rgba(124,92,255,0.10);
color: #b794f6;
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
}
.v34-set-field {
margin-bottom: var(--s-4, 16px);
}
.v34-set-field label {
display: block;
font-size: 11.5px;
color: var(--text-secondary, #d4d4dc);
margin-bottom: 7px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.v34-set-input {
width: 100%;
box-sizing: border-box;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 11px 14px;
font-size: 13px;
resize: vertical;
font-family: inherit;
transition: border-color 180ms cubic-bezier(0.16,1,0.3,1), background 180ms, box-shadow 180ms;
}
.v34-set-input:hover:not(:focus):not(:disabled) {
border-color: rgba(124,92,255,0.30);
}
.v34-set-input:focus {
outline: none;
border-color: var(--accent, #7c5cff);
background: var(--bg-card);
box-shadow: 0 0 0 3px rgba(124,92,255,0.15);
}
.v34-set-input:disabled,
.v34-set-input[readonly] {
opacity: 0.6;
cursor: not-allowed;
}
.v34-set-mono {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
line-height: 1.5;
}
.v34-set-empty {
padding: var(--s-6, 24px);
text-align: center;
color: var(--text-muted);
font-size: 12.5px;
position: relative;
}
.v34-set-empty::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
margin-right: 8px;
vertical-align: -2px;
border-radius: 50%;
border: 2px solid rgba(124,92,255,0.20);
border-top-color: #7c5cff;
animation: v34-set-spin 0.8s linear infinite;
}
@keyframes v34-set-spin {
to { transform: rotate(360deg); }
}
/* 2026-05-13 (v34.75): универсальные утилиты для контента panes. */
.v34-set-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
}
.v34-set-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px 16px;
}
.v34-set-grid-2 .v34-set-field,
.v34-set-grid-3 .v34-set-field {
margin-bottom: 0;
}
.v34-set-stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin: 0 0 20px;
padding: 12px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 14px;
}
.v34-set-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.v34-set-stat-label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
font-weight: 600;
}
.v34-set-stat-value {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
font-feature-settings: 'tnum';
background: linear-gradient(135deg, #fff 0%, #b794f6 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.v34-set-stat-value.muted {
background: none;
-webkit-text-fill-color: var(--text-muted);
font-size: 14px;
}
.v34-set-pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
background: rgba(255,255,255,0.05);
color: var(--text-muted);
border: 1px solid var(--border);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.v34-set-pill.ok { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.30); }
.v34-set-pill.warn { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.30); }
.v34-set-pill.err { background: rgba(239,68,68,0.10); color: #ef4444; border-color: rgba(239,68,68,0.28); }
.v34-set-pill.info { background: rgba(56,189,248,0.12); color: #38bdf8; border-color: rgba(56,189,248,0.30); }
.v34-set-savebar {
position: fixed;
bottom: 0; left: 0; right: 0;
background: linear-gradient(180deg, rgba(20,20,30,0.94), rgba(15,15,22,0.98));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--border);
padding: 12px 24px;
display: none;
z-index: 50;
box-shadow: 0 -10px 32px rgba(0,0,0,0.45);
}
.v34-set-savebar.is-open { display: block; }
.v34-set-savebar-inner {
display: flex;
align-items: center;
gap: 12px;
max-width: 760px;
margin: 0 auto;
}
.v34-set-savebar-meta {
flex: 1;
font-size: 12.5px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
}
.v34-set-savebar-discard,
.v34-set-savebar-save {
border-radius: var(--r-md, 14px);
padding: 9px 18px;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--border);
font-family: inherit;
transition: all 120ms;
}
.v34-set-savebar-discard {
background: transparent;
color: var(--text-muted);
}
.v34-set-savebar-discard:hover {
color: var(--text-primary);
border-color: var(--border-hover);
}
.v34-set-savebar-save {
background: linear-gradient(135deg, var(--accent, #7c5cff), #b794f6);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 14px rgba(124,92,255,0.35);
}
.v34-set-savebar-save:hover {
filter: brightness(1.10);
box-shadow: 0 6px 20px rgba(124,92,255,0.50);
}
/* Optional UI inside renderForm: chips, badges, table-like rows */
.v34-set-card .v34-set-row,
.v34-set-card .v34-set-actions {
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
.v34-set-card .v34-set-actions button {
background: var(--bg-input);
color: var(--text-secondary);
border: 1px solid var(--border);
padding: 7px 12px;
border-radius: var(--r-sm, 8px);
font-size: 12px;
cursor: pointer;
font-family: inherit;
transition: all 120ms;
}
.v34-set-card .v34-set-actions button:hover {
color: var(--text-primary);
border-color: var(--border-hover);
}
/* Mobile */
@media (max-width: 768px) {
.v34-set-head { padding: var(--s-4, 16px); }
.v34-set-body { padding: var(--s-4, 16px); padding-bottom: 110px; }
.v34-set-card { padding: var(--s-4, 16px); border-radius: var(--r-md, 14px); }
.v34-set-title-row h1 { font-size: 22px; }
.v34-set-tab {
padding: 8px 10px;
font-size: 11.5px;
flex-shrink: 0;
}
.v34-set-sub-tabs {
overflow-x: auto;
flex-wrap: nowrap;
margin: 0 calc(var(--s-4, 16px) * -1);
padding: 0 var(--s-4, 16px) 0;
-webkit-overflow-scrolling: touch;
}
.v34-set-savebar { padding: 10px 14px; }
.v34-set-savebar-inner { gap: 8px; flex-wrap: wrap; }
.v34-set-savebar-meta {
flex: 1 1 100%;
order: -1;
font-size: 11.5px;
}
.v34-set-savebar-discard,
.v34-set-savebar-save {
flex: 1;
padding: 10px;
}
}
/* H06: Communities row «⋯» popover */
.v34-cm-pop {
position: absolute;
z-index: 9000;
min-width: 220px;
background: var(--bg-card, #16161f);
border: 1px solid var(--border, #2a2a3a);
border-radius: var(--radius, 12px);
box-shadow: 0 10px 28px rgba(0,0,0,.45);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
}
.v34-cm-pop.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.v34-cm-pop-btn {
background: transparent;
border: none;
color: var(--text-primary, #e8e8f0);
font-family: inherit;
font-size: 13px;
text-align: left;
padding: 9px 12px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 100ms ease;
}
.v34-cm-pop-btn:hover { background: var(--bg-card-hover, #1c1c28); }
.v34-cm-pop-btn:focus-visible { outline: 2px solid var(--accent, #6c5ce7); outline-offset: -2px; }
.v34-cm-pop-btn[data-variant="danger"] { color: var(--danger, #e17055); }
.v34-cm-pop-ico { width: 16px; text-align: center; opacity: .85; }
/* H07: Cleaner «+ Создать правило» form-modal */
.v34-cl-rule-ov {
position: fixed;
inset: 0;
background: rgba(10,10,15,.65);
backdrop-filter: blur(4px);
z-index: 9100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.v34-cl-rule-ov.open { display: flex; }
.v34-cl-rule-modal {
background: var(--bg-card, #16161f);
border: 1px solid var(--border, #2a2a3a);
border-radius: 16px;
width: 100%;
max-width: 540px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.v34-cl-rule-head {
padding: 20px 24px 12px;
border-bottom: 1px solid var(--border, #2a2a3a);
}
.v34-cl-rule-title { font-size: 16px; font-weight: 600; color: var(--text-primary, #e8e8f0); }
.v34-cl-rule-sub { margin-top: 4px; font-size: 12px; color: var(--text-muted, #555568); }
.v34-cl-rule-body {
padding: 16px 24px;
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
}
.v34-cl-rule-row { display: flex; flex-direction: column; gap: 6px; }
.v34-cl-rule-row label { font-size: 11px; color: var(--text-muted, #555568); text-transform: uppercase; letter-spacing: .04em; }
.v34-cl-rule-row input[type="text"],
.v34-cl-rule-row input[type="number"],
.v34-cl-rule-row input[type="password"],
.v34-cl-rule-row input[type="email"],
.v34-cl-rule-row input[type="url"],
.v34-cl-rule-row input[type="date"],
.v34-cl-rule-row input[type="time"],
.v34-cl-rule-row input[type="datetime-local"],
.v34-cl-rule-row input[type="search"],
.v34-cl-rule-row select,
.v34-cl-rule-row textarea {
background: var(--bg-input, #1a1a26);
border: 1px solid var(--border, #2a2a3a);
border-radius: 8px;
color: var(--text-primary, #e8e8f0);
font-family: inherit;
font-size: 13px;
padding: 9px 12px;
-webkit-text-fill-color: var(--text-primary, #e8e8f0);
}
.v34-cl-rule-row input::placeholder,
.v34-cl-rule-row textarea::placeholder { color: var(--text-muted, #6a6a7e); opacity: 0.7; }
/* Chrome/Safari автозаполнение перекрашивает фон поля → принудительно держим тёмный */
.v34-cl-rule-row input:-webkit-autofill,
.v34-cl-rule-row input:-webkit-autofill:hover,
.v34-cl-rule-row input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 30px var(--bg-input, #1a1a26) inset !important;
-webkit-text-fill-color: var(--text-primary, #e8e8f0) !important;
caret-color: var(--text-primary, #e8e8f0) !important;
}
.v34-cl-rule-row textarea { resize: vertical; min-height: 64px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.v34-cl-rule-row input:focus,
.v34-cl-rule-row select:focus,
.v34-cl-rule-row textarea:focus { outline: 2px solid var(--accent, #6c5ce7); outline-offset: -1px; }
.v34-cl-rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v34-cl-rule-checkbox-row { display: flex; align-items: center; gap: 8px; }
.v34-cl-rule-checkbox-row input { accent-color: var(--accent, #6c5ce7); }
.v34-cl-rule-checkbox-row label { text-transform: none; font-size: 13px; color: var(--text-primary, #e8e8f0); letter-spacing: 0; }
.v34-cl-rule-foot {
padding: 14px 24px 18px;
display: flex;
justify-content: flex-end;
gap: 8px;
border-top: 1px solid var(--border, #2a2a3a);
}
.v34-cl-rule-foot .btn-cancel,
.v34-cl-rule-foot .btn-save {
font-family: inherit;
font-size: 13px;
font-weight: 500;
padding: 9px 16px;
border-radius: 8px;
cursor: pointer;
border: 1px solid var(--border, #2a2a3a);
transition: background 100ms ease;
}
.v34-cl-rule-foot .btn-cancel { background: transparent; color: var(--text-secondary, #8888a0); }
.v34-cl-rule-foot .btn-cancel:hover { background: var(--bg-card-hover, #1c1c28); }
.v34-cl-rule-foot .btn-save { background: var(--accent, #6c5ce7); color: #fff; border-color: var(--accent, #6c5ce7); font-weight: 600; }
.v34-cl-rule-foot .btn-save:hover { background: var(--accent-hover, #7f6ff0); }
.v34-cl-rule-foot .btn-save:disabled { opacity: .55; cursor: not-allowed; }
.v34-cl-rule-err { color: var(--danger, #e17055); font-size: 12px; padding-left: 24px; }
/* ============================================================
adCreator — реальный flow интеграции рекламы (wall.edit) + креатив с нуля.
Заменяет .v34-wiz-* (mock Promote Wizard).
============================================================ */
.v34-ad-backdrop {
position: fixed; inset: 0; z-index: 9000;
background: rgba(8, 8, 14, .82); backdrop-filter: blur(8px);
display: none; align-items: center; justify-content: center; padding: 24px;
overflow-y: auto;
}
.v34-ad-backdrop.open { display: flex; animation: v34AdFade 200ms ease-out; }
@keyframes v34AdFade { from { opacity: 0 } to { opacity: 1 } }
.v34-ad-modal {
position: relative;
width: min(960px, 100%); max-height: calc(100vh - 48px);
background: var(--bg-card, #15151f); border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 16px;
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.v34-ad-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
flex-shrink: 0;
}
.v34-ad-title { display: flex; gap: 10px; align-items: center; font-size: 17px; font-weight: 600; color: var(--text-primary, #fff); }
.v34-ad-title .ico { font-size: 22px; }
.v34-ad-close {
width: 32px; height: 32px; border-radius: 8px; border: 0; cursor: pointer;
background: transparent; color: var(--text-muted, #8888a0);
display: flex; align-items: center; justify-content: center;
transition: background 150ms ease;
}
.v34-ad-close:hover { background: var(--bg-card-hover, #1c1c28); color: var(--text-primary, #fff); }
.v34-ad-tabs {
display: flex; gap: 0; padding: 0 20px;
border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
flex-shrink: 0;
}
.v34-ad-tab {
padding: 14px 18px; border: 0; background: transparent;
color: var(--text-muted, #8888a0); font-size: 13.5px; font-weight: 500;
cursor: pointer; border-bottom: 2px solid transparent;
transition: color 150ms ease, border-color 150ms ease;
}
.v34-ad-tab:hover { color: var(--text-primary, #fff); }
.v34-ad-tab.active { color: var(--accent, #6c5ce7); border-bottom-color: var(--accent, #6c5ce7); }
.v34-ad-stepper {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: 10px; padding: 14px 20px;
border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
flex-shrink: 0;
}
.v34-ad-step {
display: flex; gap: 10px; align-items: center;
padding: 8px 12px; border-radius: 10px;
background: var(--bg-card-hover, #1c1c28);
opacity: .55; transition: opacity 150ms ease, background 150ms ease;
}
.v34-ad-step.active { opacity: 1; background: linear-gradient(135deg, rgba(108,92,231,.18), rgba(108,92,231,.06)); border: 1px solid rgba(108,92,231,.3); }
.v34-ad-step.done { opacity: .9; }
.v34-ad-step .num {
width: 26px; height: 26px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600;
background: var(--bg-card, #15151f); color: var(--text-muted, #8888a0);
}
.v34-ad-step.active .num { background: var(--accent, #6c5ce7); color: #fff; }
.v34-ad-step.done .num { background: var(--success, #00d4ff); color: #fff; }
.v34-ad-step .lbl { font-size: 12.5px; font-weight: 600; color: var(--text-primary, #fff); }
.v34-ad-step .desc { font-size: 11px; color: var(--text-muted, #8888a0); }
.v34-ad-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.v34-ad-mode { display: block; }
.v34-ad-mode[hidden] { display: none; }
.v34-ad-pane { display: none; }
.v34-ad-pane.active { display: block; animation: v34AdPaneIn 200ms ease-out; }
@keyframes v34AdPaneIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.v34-ad-section-label {
font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--text-muted, #8888a0); margin: 14px 0 8px;
}
.v34-ad-section-label:first-child { margin-top: 0; }
.v34-ad-section-hint { font-size: 12px; color: var(--text-muted, #8888a0); margin: -4px 0 10px; }
.v34-ad-source {
display: grid; grid-template-columns: 56px 1fr; gap: 14px;
padding: 14px; border-radius: 12px; background: var(--bg-card-hover, #1c1c28);
}
.v34-ad-source-thumb {
width: 56px; height: 56px; border-radius: 12px; background: var(--accent, #6c5ce7);
display: flex; align-items: center; justify-content: center;
font-weight: 600; color: #fff; font-size: 14px;
}
.v34-ad-source-info { min-width: 0; }
.v34-ad-source-from { font-size: 11.5px; color: var(--text-muted, #8888a0); margin-bottom: 4px; }
.v34-ad-source-from strong { color: var(--accent, #6c5ce7); }
.v34-ad-source-name { font-size: 14px; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 6px; }
.v34-ad-source-text { font-size: 13px; color: var(--text-secondary, #aaa); white-space: pre-wrap; max-height: 100px; overflow-y: auto; }
.v34-ad-source-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px;
}
.v34-ad-stat {
padding: 12px; border-radius: 10px;
background: var(--bg-card-hover, #1c1c28);
text-align: center;
}
.v34-ad-stat .v { font-size: 18px; font-weight: 600; color: var(--text-primary, #fff); font-variant-numeric: tabular-nums; }
.v34-ad-stat .v.reach { background: var(--grad-content, linear-gradient(135deg,#00d4ff,#0099cc)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.v34-ad-stat .l { font-size: 11px; color: var(--text-muted, #8888a0); margin-top: 2px; }
.v34-ad-token-row {
display: flex; gap: 12px; align-items: center; justify-content: space-between;
margin-top: 14px; padding: 12px; border-radius: 10px;
background: var(--bg-card-hover, #1c1c28); border: 1px dashed var(--border, rgba(255,255,255,.08));
}
.v34-ad-token-info .lbl { font-size: 11px; color: var(--text-muted, #8888a0); }
.v34-ad-token-info .lbl .hint { font-size: 10.5px; color: var(--text-muted, #8888a0); font-weight: 400; }
.v34-ad-token-info .val { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-primary, #fff); }
.v34-ad-token-picker { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.v34-ad-token-select {
width: 100%; max-width: 100%;
background: var(--bg-card, #15151f); border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 8px; padding: 8px 10px; color: var(--text-primary, #fff);
font-family: var(--font-mono, monospace); font-size: 11.5px;
cursor: pointer; transition: border-color 120ms ease;
}
.v34-ad-token-select:focus { outline: none; border-color: var(--accent, #6c5ce7); }
.v34-ad-token-select:disabled { opacity: .55; cursor: not-allowed; }
.v34-ad-source-warn {
margin-top: 10px; padding: 10px 12px; border-radius: 8px;
background: rgba(225, 112, 85, .12); border: 1px solid rgba(225, 112, 85, .35);
color: var(--danger, #e17055); font-size: 12.5px;
}
.v34-ad-source-warn[hidden] { display: none; }
.v34-ad-product-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.v34-ad-product-row .v34-ad-select { flex: 1; min-width: 200px; }
.v34-ad-product-meta { font-size: 12px; color: var(--text-muted, #8888a0); margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--bg-card-hover, #1c1c28); }
.v34-ad-modal input,
.v34-ad-modal select,
.v34-ad-modal textarea,
.v34-ad-product-editor input,
.v34-ad-product-editor select,
.v34-ad-product-editor textarea {
width: 100%; padding: 9px 12px; border-radius: 8px;
background: var(--bg-card, #15151f); border: 1px solid var(--border, rgba(255,255,255,.1));
color: var(--text-primary, #fff); font-size: 13.5px; font-family: inherit;
box-sizing: border-box;
}
.v34-ad-modal input[type=checkbox] { width: 14px; height: 14px; padding: 0; box-shadow: none; }
.v34-ad-modal textarea, .v34-ad-product-editor textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
/* Native select: chevron + visible value text */
.v34-ad-modal select,
.v34-ad-product-editor select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
cursor: pointer;
}
.v34-ad-modal select option,
.v34-ad-product-editor select option {
background: #15151f; color: #fff;
}
.v34-ad-modal input::placeholder, .v34-ad-modal textarea::placeholder,
.v34-ad-product-editor input::placeholder, .v34-ad-product-editor textarea::placeholder {
color: var(--text-muted, #8888a0); opacity: .65;
}
.v34-ad-modal input:focus, .v34-ad-modal select:focus, .v34-ad-modal textarea:focus,
.v34-ad-product-editor input:focus, .v34-ad-product-editor select:focus, .v34-ad-product-editor textarea:focus {
outline: 0; border-color: var(--accent, #6c5ce7);
box-shadow: 0 0 0 3px rgba(108, 92, 231, .15);
}
/* Compact select для select#v34AdVariants/#v34AdScratchVariants — не растягиваем на всю ширину */
.v34-ad-field select#v34AdVariants,
.v34-ad-field select#v34AdScratchVariants {
max-width: 140px;
}
/* Error в результатах генерации */
.v34-ad-error {
padding: 24px 20px; text-align: center;
border-radius: 12px;
background: rgba(225, 112, 85, .08);
border: 1px dashed rgba(225, 112, 85, .35);
color: var(--danger, #e17055);
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.v34-ad-error .ico { font-size: 28px; }
.v34-ad-error .msg { font-size: 13px; line-height: 1.45; max-width: 460px; color: var(--text-primary, #fff); }
.v34-ad-ai-row { display: flex; gap: 14px; flex-wrap: wrap; }
.v34-ad-chk {
display: inline-flex; gap: 8px; align-items: center; cursor: pointer;
padding: 8px 12px; border-radius: 8px; background: var(--bg-card-hover, #1c1c28);
font-size: 13px; color: var(--text-primary, #fff);
user-select: none;
}
.v34-ad-chk:hover { background: var(--bg-card, #252535); }
.v34-ad-chk input { width: 14px; height: 14px; accent-color: var(--accent, #6c5ce7); }
.v34-ad-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.v34-ad-field label { display: block; font-size: 11.5px; color: var(--text-muted, #8888a0); margin-bottom: 6px; font-weight: 500; }
.v34-ad-loader {
padding: 60px 20px; text-align: center; color: var(--text-muted, #8888a0);
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.v34-ad-loader[hidden] { display: none; }
.v34-ad-spinner {
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid rgba(108, 92, 231, .15); border-top-color: var(--accent, #6c5ce7);
animation: v34AdSpin 800ms linear infinite;
}
@keyframes v34AdSpin { to { transform: rotate(360deg) } }
.v34-ad-loader .lbl { font-size: 13px; }
.v34-ad-variants { display: flex; flex-direction: column; gap: 10px; }
.v34-ad-variant {
padding: 14px; border-radius: 12px;
background: var(--bg-card-hover, #1c1c28); border: 1px solid var(--border, rgba(255,255,255,.06));
transition: border-color 150ms ease, background 150ms ease;
}
.v34-ad-variant.best { border-color: var(--success, #00d4ff); }
.v34-ad-variant.selected { border-color: var(--accent, #6c5ce7); background: linear-gradient(135deg, rgba(108,92,231,.12), rgba(108,92,231,.04)); }
.v34-ad-variant-head {
display: flex; gap: 10px; align-items: center; justify-content: space-between;
margin-bottom: 8px; flex-wrap: wrap;
}
.v34-ad-variant-tag {
font-size: 10.5px; font-weight: 600; text-transform: uppercase;
padding: 3px 8px; border-radius: 6px;
background: rgba(108, 92, 231, .2); color: var(--accent, #6c5ce7);
}
.v34-ad-variant-tag.openai { background: rgba(0,212,255,.18); color: #00d4ff; }
.v34-ad-variant-tag.grok { background: rgba(255,107,157,.18); color: #ff6b9d; }
.v34-ad-variant-tag.claude { background: rgba(183,148,246,.18); color: #b794f6; }
.v34-ad-variant-score {
font-family: var(--font-mono, monospace); font-size: 11.5px; color: var(--text-muted, #8888a0);
}
.v34-ad-variant-score strong { color: var(--text-primary, #fff); }
.v34-ad-variant-score.high strong { color: var(--success, #00d4ff); }
.v34-ad-variant-score.low strong { color: var(--warning, #ff9f43); }
.v34-ad-variant-text {
font-size: 13px; line-height: 1.5; color: var(--text-secondary, #aaa);
white-space: pre-wrap; max-height: 200px; overflow-y: auto;
padding: 10px; border-radius: 8px; background: var(--bg-card, #15151f);
margin-bottom: 10px;
}
.v34-ad-variant-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.v34-ad-readonly {
padding: 10px 12px; border-radius: 8px;
background: var(--bg-card-hover, #1c1c28); border: 1px solid var(--border, rgba(255,255,255,.06));
font-size: 13px; line-height: 1.5; color: var(--text-secondary, #aaa);
white-space: pre-wrap; max-height: 280px; overflow-y: auto;
min-height: 80px;
}
.v34-ad-attach-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.v34-ad-attach-item {
display: flex; gap: 10px; align-items: center; padding: 8px 12px;
border-radius: 8px; background: var(--bg-card-hover, #1c1c28);
font-family: var(--font-mono, monospace); font-size: 12.5px;
}
.v34-ad-attach-item .type {
padding: 2px 7px; border-radius: 5px; background: var(--accent, #6c5ce7);
color: #fff; font-size: 10.5px; text-transform: uppercase; font-weight: 600;
font-family: inherit;
}
.v34-ad-attach-item .id { flex: 1; color: var(--text-primary, #fff); }
.v34-ad-attach-item .rm {
width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
background: rgba(225, 112, 85, .15); color: var(--danger, #e17055);
display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.v34-ad-attach-item .rm:hover { background: rgba(225, 112, 85, .3); }
.v34-ad-attach-empty { padding: 14px; text-align: center; color: var(--text-muted, #8888a0); font-size: 12.5px; border: 1px dashed var(--border, rgba(255,255,255,.08)); border-radius: 8px; }
.v34-ad-attach-add { display: flex; gap: 8px; }
.v34-ad-attach-add input { flex: 1; }
.v34-ad-mode-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.v34-ad-mode-row label { font-size: 12px; color: var(--text-muted, #8888a0); }
.v34-ad-mode-btn {
padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,.1));
background: var(--bg-card, #15151f); color: var(--text-secondary, #aaa);
font-size: 12px; cursor: pointer; transition: all 150ms ease;
}
.v34-ad-mode-btn.active { background: var(--accent, #6c5ce7); color: #fff; border-color: var(--accent, #6c5ce7); }
.v34-ad-mode-btn:hover:not(.active) { background: var(--bg-card-hover, #1c1c28); }
.v34-ad-success {
padding: 40px 20px; text-align: center;
}
.v34-ad-success-ico {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(0, 212, 255, .15); color: var(--success, #00d4ff);
display: inline-flex; align-items: center; justify-content: center;
font-size: 32px; margin-bottom: 14px;
}
.v34-ad-success h2 { font-size: 22px; margin: 0 0 8px; color: var(--text-primary, #fff); }
.v34-ad-success p { font-size: 13.5px; color: var(--text-muted, #8888a0); margin: 0 0 14px; }
.v34-ad-success-link { color: var(--accent, #6c5ce7); font-size: 13.5px; text-decoration: none; }
.v34-ad-success-link:hover { text-decoration: underline; }
.v34-ad-foot {
display: flex; gap: 12px; align-items: center; justify-content: space-between;
padding: 14px 20px; border-top: 1px solid var(--border, rgba(255,255,255,.06));
flex-shrink: 0;
}
.v34-ad-counter { font-size: 12px; color: var(--text-muted, #8888a0); font-family: var(--font-mono, monospace); }
.v34-ad-btn {
padding: 9px 16px; border-radius: 8px; border: 1px solid var(--border, rgba(255,255,255,.1));
background: var(--bg-card, #15151f); color: var(--text-primary, #fff);
font-size: 13px; font-weight: 500; cursor: pointer; transition: all 150ms ease;
font-family: inherit;
}
.v34-ad-btn:hover:not(:disabled) { background: var(--bg-card-hover, #1c1c28); }
.v34-ad-btn:disabled { opacity: .45; cursor: not-allowed; }
.v34-ad-btn.primary { background: var(--accent, #6c5ce7); border-color: var(--accent, #6c5ce7); color: #fff; }
.v34-ad-btn.primary:hover:not(:disabled) { background: var(--accent-hover, #7f6ff0); }
.v34-ad-btn.ghost { background: transparent; }
.v34-ad-btn.ghost:hover:not(:disabled) { background: var(--bg-card-hover, #1c1c28); }
.v34-ad-btn.danger { color: var(--danger, #e17055); border-color: rgba(225, 112, 85, .35); }
.v34-ad-btn.danger:hover:not(:disabled) { background: rgba(225, 112, 85, .12); }
.v34-ad-btn.sm { padding: 6px 11px; font-size: 12px; }
/* ============================================================
2026-05-11: ad-modal mobile responsive (≤768px / ≤480px)
Решение: вертикальная компоновка. Stepper сжимаем в полоску из
нумерованных кружков (label остаётся только у active-шага); все
grid-2 → 1 col; кнопки/инпуты full-width.
============================================================ */
@media (max-width: 768px) {
.v34-ad-backdrop { padding: 6px; align-items: flex-start; }
.v34-ad-modal {
width: 100%;
max-height: calc(100vh - 12px);
border-radius: 12px;
}
.v34-ad-head { padding: 12px 14px; }
.v34-ad-title { font-size: 15px; gap: 8px; }
.v34-ad-title .ico { font-size: 18px; }
.v34-ad-tabs { padding: 0 8px; }
.v34-ad-tab {
padding: 12px 8px;
font-size: 12.5px;
flex: 1;
text-align: center;
white-space: nowrap;
}
/* Stepper: компактные кружки. Active с полным label, остальные — только номер */
.v34-ad-stepper {
display: flex !important;
gap: 6px;
padding: 10px 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
grid-auto-flow: unset;
grid-auto-columns: unset;
grid-template-columns: none !important;
scrollbar-width: none;
}
.v34-ad-stepper::-webkit-scrollbar { display: none; }
.v34-ad-step {
flex: 0 0 auto;
padding: 6px 8px;
gap: 6px;
min-width: 0;
}
.v34-ad-step .num {
width: 22px; height: 22px;
font-size: 11px;
flex-shrink: 0;
}
.v34-ad-step .lbl,
.v34-ad-step .desc {
display: none;
}
.v34-ad-step.active {
flex: 1 1 auto;
max-width: 70%;
}
.v34-ad-step.active .lbl {
display: block;
font-size: 12px;
line-height: 1.2;
}
.v34-ad-step.active .desc {
display: block;
font-size: 10px;
line-height: 1.2;
}
/* Body — полная ширина viewport, никакого сжатия */
.v34-ad-body {
padding: 14px 14px 20px;
}
/* Все grids в 1 колонку */
.v34-ad-grid2 {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Source-card: thumb меньше */
.v34-ad-source {
grid-template-columns: 44px 1fr !important;
gap: 10px !important;
padding: 12px;
}
.v34-ad-source-thumb {
width: 44px; height: 44px;
font-size: 12px;
}
.v34-ad-source-name { font-size: 13px; }
.v34-ad-source-text { font-size: 12px; max-height: 80px; }
.v34-ad-source-stats {
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px;
}
.v34-ad-stat { padding: 8px 6px; }
.v34-ad-stat .v { font-size: 14px; }
.v34-ad-stat .l { font-size: 10px; }
/* Token row + product row stack */
.v34-ad-token-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.v34-ad-token-row .v34-ad-btn { width: 100%; }
.v34-ad-product-row {
gap: 6px;
}
.v34-ad-product-row .v34-ad-select {
flex: 1 1 100%;
min-width: 0;
}
/* AI-row checkboxes wrap nicely */
.v34-ad-ai-row {
gap: 10px;
}
.v34-ad-ai-row .v34-ad-chk {
flex: 0 0 auto;
}
/* Attach-add stacks */
.v34-ad-attach-add {
flex-direction: column;
gap: 6px;
}
.v34-ad-attach-add input { width: 100%; }
.v34-ad-attach-add .v34-ad-btn { width: 100%; }
/* Mode-row wraps */
.v34-ad-mode-row {
flex-wrap: wrap;
gap: 6px;
}
/* Foot: buttons stack */
.v34-ad-foot {
flex-direction: column-reverse;
align-items: stretch;
gap: 8px;
padding: 12px 14px;
}
.v34-ad-counter {
text-align: center;
font-size: 11px;
}
/* Inputs/selects/textareas full width */
.v34-ad-modal input,
.v34-ad-modal select,
.v34-ad-modal textarea {
width: 100%;
box-sizing: border-box;
}
.v34-ad-modal input[type=checkbox] { width: 14px; }
/* Footer buttons full-width */
.v34-ad-foot .v34-ad-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.v34-ad-head { padding: 10px 12px; }
.v34-ad-title { font-size: 14px; }
.v34-ad-tab { padding: 10px 6px; font-size: 11.5px; }
.v34-ad-body { padding: 12px 12px 16px; }
.v34-ad-section-label { font-size: 10.5px; margin: 10px 0 6px; }
/* Stepper still single-row but tighter */
.v34-ad-stepper { padding: 8px 12px; gap: 4px; }
.v34-ad-step { padding: 5px 6px; gap: 4px; }
.v34-ad-step .num { width: 20px; height: 20px; font-size: 10.5px; }
.v34-ad-step.active .lbl { font-size: 11.5px; }
.v34-ad-step.active .desc { font-size: 9.5px; }
/* Stats compact */
.v34-ad-stat .v { font-size: 12.5px; }
.v34-ad-stat .l { font-size: 9.5px; }
}
/* Inline product editor — compact centered overlay поверх ad-modal'а.
z-index: 9100 (выше .v34-ad-backdrop=9000, ниже .v34-confirm-ov=9500 и .v34-toast-host=9700).
Card с собственным max-width=720px чтобы не покрывать весь modal. */
.v34-ad-product-editor {
position: fixed; inset: 0; z-index: 9100;
background: rgba(8, 8, 14, .72);
backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 24px;
overflow-y: auto;
}
.v34-ad-product-editor[hidden] { display: none; }
.v34-ad-product-editor-card {
background: var(--bg-card, #15151f);
border: 1px solid var(--border, rgba(255,255,255,.08));
border-radius: 16px;
width: min(720px, 100%);
max-height: calc(100vh - 48px);
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.v34-ad-product-editor-card .v34-ad-body { flex: 1; overflow-y: auto; }
.v34-ad-examples { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.v34-ad-example {
padding: 12px; border-radius: 10px;
background: var(--bg-card-hover, #1c1c28); border: 1px solid var(--border, rgba(255,255,255,.06));
}
.v34-ad-example-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.v34-ad-example-head .lbl { font-size: 11.5px; color: var(--accent, #6c5ce7); font-weight: 600; }
.v34-ad-example-head .rm {
width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
background: rgba(225, 112, 85, .15); color: var(--danger, #e17055);
display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.v34-ad-example-head .rm:hover { background: rgba(225, 112, 85, .3); }
.v34-ad-example .v34-ad-field + .v34-ad-field { margin-top: 8px; }
/* ============================================================
Phase 2: Ads Hub — sidebar-раздел «Рекламная интеграция».
3 таба верхнего уровня + sub-tabs внутри Generation/Settings.
Переиспользует .v34-ad-* (input/select/button/variant/etc.) как базовые стили.
============================================================ */
.v34-ads-hub { padding: 24px 28px; max-width: 1200px; }
.v34-ads-hub-head { margin-bottom: 18px; }
.v34-ads-hub-title h1 {
margin: 0 0 6px; font-size: 22px; font-weight: 600;
color: var(--text-primary, #fff);
display: flex; align-items: center; gap: 10px;
}
.v34-ads-hub-title h1 .ico { font-size: 22px; }
.v34-ads-hub-sub { margin: 0; font-size: 13px; color: var(--text-muted, #8888a0); max-width: 720px; line-height: 1.5; }
.v34-ads-hub-tabs {
display: flex; gap: 0; padding: 0;
border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
margin-bottom: 18px;
}
.v34-ads-hub-tab {
padding: 12px 18px; border: 0; background: transparent;
color: var(--text-muted, #8888a0); font-size: 13.5px; font-weight: 500;
cursor: pointer; border-bottom: 2px solid transparent;
transition: color 150ms ease, border-color 150ms ease;
font-family: inherit;
}
.v34-ads-hub-tab:hover { color: var(--text-primary, #fff); }
.v34-ads-hub-tab.active { color: var(--accent, #6c5ce7); border-bottom-color: var(--accent, #6c5ce7); }
.v34-ads-hub-pane { display: none; }
.v34-ads-hub-pane.active { display: block; animation: v34AdPaneIn 200ms ease-out; }
/* === ИНТЕГРАЦИЯ — top section (URL load) === */
.v34-ads-section { margin-bottom: 18px; }
.v34-ads-section-label {
font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
color: var(--text-muted, #8888a0); margin: 0 0 8px;
}
.v34-ads-section-hint { font-size: 12.5px; color: var(--text-muted, #8888a0); margin: -4px 0 10px; line-height: 1.45; }
.v34-ads-loadrow {
display: flex; gap: 8px; align-items: center;
margin-bottom: 8px;
}
.v34-ads-loadrow input {
flex: 1; padding: 10px 12px; border-radius: 8px;
background: var(--bg-card, #15151f); border: 1px solid var(--border, rgba(255,255,255,.1));
color: var(--text-primary, #fff); font-size: 13.5px; font-family: inherit;
}
.v34-ads-loadrow input:focus {
outline: 0; border-color: var(--accent, #6c5ce7);
box-shadow: 0 0 0 3px rgba(108, 92, 231, .15);
}
.v34-ads-int-status {
margin-top: 8px; padding: 12px 14px; border-radius: 10px;
font-size: 13px; line-height: 1.5;
}
.v34-ads-int-status.ok { background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.25); color: var(--text-primary, #fff); }
.v34-ads-int-status.warn { background: rgba(253,203,110,.08); border: 1px solid rgba(253,203,110,.25); color: var(--text-primary, #fff); }
.v34-ads-int-status.err { background: rgba(225,112,85,.08); border: 1px solid rgba(225,112,85,.25); color: var(--danger, #e17055); }
/* 2026-05-11: status block с CTA-кнопкой (VK API fallback) */
.v34-ads-int-status-text { margin-bottom: 10px; }
.v34-ads-int-status-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.v34-ads-int-status-hint {
font-size: 11.5px;
color: var(--text-muted, #8888a0);
line-height: 1.45;
flex: 1 1 200px;
min-width: 0;
}
@media (max-width: 600px) {
.v34-ads-int-status-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.v34-ads-int-status-actions .v34-ad-btn { width: 100%; }
.v34-ads-int-status-hint { flex: 1 1 auto; }
}
.v34-ads-int-flow {
margin-top: 18px;
padding: 18px; border-radius: 14px;
background: var(--bg-card, #15151f); border: 1px solid var(--border, rgba(255,255,255,.06));
}
.v34-ads-int-flow .v34-ad-stepper {
grid-template-columns: repeat(4, 1fr); padding: 0 0 14px;
border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
margin-bottom: 14px;
}
.v34-ads-int-flow .v34-ad-foot {
margin-top: 14px; padding: 14px 0 0;
border-top: 1px solid var(--border, rgba(255,255,255,.06));
}
/* === SUB-TABS (Generation, Settings) === */
.v34-ads-subtabs {
display: flex; gap: 0;
margin-bottom: 16px;
border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.v34-ads-subtab {
padding: 10px 14px; border: 0; background: transparent;
color: var(--text-muted, #8888a0); font-size: 12.5px; font-weight: 500;
cursor: pointer; border-bottom: 2px solid transparent;
transition: color 150ms ease, border-color 150ms ease;
font-family: inherit;
}
.v34-ads-subtab:hover { color: var(--text-primary, #fff); }
.v34-ads-subtab.active { color: var(--accent, #6c5ce7); border-bottom-color: var(--accent, #6c5ce7); }
.v34-ads-subpane { display: none; }
.v34-ads-subpane.active { display: block; animation: v34AdPaneIn 200ms ease-out; }
/* === GENERATION GENERATOR === */
.v34-ads-gen-actions { margin-top: 14px; }
.v34-ads-gen-results {
margin-top: 22px; padding: 18px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(108,92,231,.06), rgba(108,92,231,.02));
border: 1px solid rgba(108,92,231,.22);
box-shadow: 0 4px 18px rgba(0,0,0,.18);
animation: v34AdPaneIn 220ms ease-out;
}
.v34-ads-gen-results[hidden] { display: none; }
.v34-ads-gen-results-head {
display: flex; flex-direction: column; gap: 4px;
padding-bottom: 12px; margin-bottom: 14px;
border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.v34-ads-gen-results-title {
display: flex; align-items: center; gap: 10px;
font-size: 15px; font-weight: 600; color: var(--text-primary, #fff);
}
.v34-ads-gen-results-title .ico { font-size: 18px; }
.v34-ads-gen-results-count {
margin-left: auto;
font-size: 11.5px; font-weight: 600;
padding: 3px 9px; border-radius: 999px;
background: rgba(108,92,231,.22); color: #b794f6;
}
.v34-ads-gen-results-hint { font-size: 12px; color: var(--text-muted, #8888a0); }
/* === GENERATION TEMPLATES LIST === */
.v34-ads-tpl-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.v34-ads-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.v34-ads-tpl-card {
padding: 14px 16px; border-radius: 12px;
background: var(--bg-card-hover, #1c1c28); border: 1px solid var(--border, rgba(255,255,255,.06));
display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
.v34-ads-tpl-card-info .name { font-size: 14px; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 4px; }
.v34-ads-tpl-card-info .meta { font-size: 12px; color: var(--text-muted, #8888a0); }
.v34-ads-tpl-card-actions { display: flex; gap: 6px; }
.v34-ads-tpl-empty { padding: 24px; text-align: center; color: var(--text-muted, #8888a0); border: 1px dashed var(--border, rgba(255,255,255,.08)); border-radius: 10px; }
/* === SETTINGS PANES === */
.v34-ads-set-actions {
display: flex; gap: 12px; align-items: center;
margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--border, rgba(255,255,255,.06));
}
.v34-ads-set-status { font-size: 12px; color: var(--text-muted, #8888a0); }
.v34-ads-set-status.ok { color: var(--success, #00d4ff); }
.v34-ads-set-status.err { color: var(--danger, #e17055); }
/* Inputs внутри ads-hub — те же правила что для adCreator (наследуем dark theme) */
.v34-ads-hub input,
.v34-ads-hub select,
.v34-ads-hub textarea {
width: 100%; padding: 9px 12px; border-radius: 8px;
background: var(--bg-card, #15151f); border: 1px solid var(--border, rgba(255,255,255,.1));
color: var(--text-primary, #fff); font-size: 13.5px; font-family: inherit;
box-sizing: border-box;
}
.v34-ads-hub input[type=checkbox] { width: 14px; height: 14px; padding: 0; box-shadow: none; }
.v34-ads-hub textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.v34-ads-hub select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
cursor: pointer;
}
.v34-ads-hub select option { background: #15151f; color: #fff; }
.v34-ads-hub input::placeholder, .v34-ads-hub textarea::placeholder { color: var(--text-muted, #8888a0); opacity: .65; }
.v34-ads-hub input:focus, .v34-ads-hub select:focus, .v34-ads-hub textarea:focus {
outline: 0; border-color: var(--accent, #6c5ce7);
box-shadow: 0 0 0 3px rgba(108, 92, 231, .15);
}
.v34-ads-hub .v34-ad-grid2 select#v34AdsIntVariants,
.v34-ads-hub .v34-ad-grid2 select#v34AdsGenVariants,
.v34-ads-hub .v34-ad-grid2 select#v34AdsSetIntVariants,
.v34-ads-hub .v34-ad-grid2 select#v34AdsSetGenVariants {
max-width: 140px;
}
/* =====================================================================
M07-TG.redesign (2026-05-10) — приведение TG-pane в mockup-стиль
(07_bots-unified.html). Namespace .v34-tg-*. Всё что .v34-bots-tg-* —
legacy остатки для совместимости (можно удалить когда убедимся, что
ничего не отвалилось).
===================================================================== */
/* Stat strip — TG-голубой gradient на верху каждой карточки */
.v34-tg-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-4, 16px);
margin-bottom: var(--s-4, 16px);
}
@media (max-width: 700px) { .v34-tg-strip { grid-template-columns: repeat(2, 1fr); } }
.v34-tg-stat {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
padding: 14px 16px;
position: relative;
overflow: hidden;
}
.v34-tg-stat::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(135deg, #38a8e6, #1d7fc7);
opacity: 0.85;
}
.v34-tg-stat .lbl {
font-size: 10.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.v34-tg-stat .v {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 26px;
font-weight: 700;
letter-spacing: -0.02em;
margin-top: 4px;
line-height: 1.1;
color: var(--text-primary);
}
.v34-tg-stat.accent .v {
background: linear-gradient(135deg, #38a8e6, #4dabff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.v34-tg-stat .d {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
}
.v34-tg-stat .d.up { color: var(--success, #22c55e); }
.v34-tg-stat .d.dn { color: var(--danger, #ef4444); }
/* Generic scard */
.v34-tg-scard {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 12px);
padding: var(--s-5, 20px);
margin-bottom: var(--s-4, 16px);
}
.v34-tg-scard-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--s-4, 16px);
flex-wrap: wrap;
gap: var(--s-3, 12px);
}
.v34-tg-scard-head .title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
font-weight: 600;
}
.v34-tg-scard-head .actions {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
/* Pulse "alive" indicator */
.v34-tg-pulse {
font-size: 11px;
color: var(--success, #22c55e);
font-family: var(--font-mono, monospace);
display: inline-flex;
align-items: center;
gap: 5px;
}
.v34-tg-pulse .dot {
width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
animation: v34-tg-pulse-anim 1.6s infinite;
}
@keyframes v34-tg-pulse-anim {
0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 0.85; }
50% { box-shadow: 0 0 0 4px transparent; opacity: 1; }
}
.v34-tg-pulse.warn { color: var(--warning, #eab308); }
.v34-tg-pulse.err { color: var(--danger, #ef4444); }
/* Webhook row */
.v34-tg-webhook-row {
display: flex;
align-items: center;
gap: var(--s-3, 12px);
padding: 10px 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
font-family: var(--font-mono, monospace);
font-size: 12.5px;
color: var(--text-secondary);
}
.v34-tg-webhook-row .lbl {
font-size: 10.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
flex-shrink: 0;
}
.v34-tg-webhook-row .url {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
}
.v34-tg-webhook-hint {
font-size: 11.5px;
color: var(--text-muted);
margin-top: 8px;
font-family: var(--font-mono, monospace);
}
.v34-tg-webhook-hint code {
background: var(--bg-input);
padding: 1px 5px;
border-radius: 3px;
font-size: 11px;
}
/* Buttons */
.v34-tg-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: var(--r-sm, 6px);
padding: 7px 12px;
font-size: 12.5px;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease-out;
line-height: 1;
}
.v34-tg-btn:hover {
border-color: var(--border-hover);
color: var(--text-primary);
background: var(--bg-card-hover, var(--bg-input));
}
.v34-tg-btn.sm { padding: 5px 10px; font-size: 11.5px; }
.v34-tg-btn.xs { padding: 4px 8px; font-size: 11px; }
.v34-tg-btn.primary {
background: var(--accent, #7c5cff);
color: #fff;
border-color: var(--accent, #7c5cff);
}
.v34-tg-btn.primary:hover {
box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,0.3));
background: var(--accent, #7c5cff);
color: #fff;
}
.v34-tg-btn.danger { color: var(--danger, #ef4444); }
.v34-tg-btn.danger:hover { border-color: var(--danger, #ef4444); }
.v34-tg-btn.ghost { border-color: transparent; }
.v34-tg-btn.ghost:hover { border-color: var(--border-hover); }
.v34-tg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Inputs */
.v34-tg-input {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12.5px;
font-family: inherit;
line-height: 1;
}
.v34-tg-input:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-tg-input.sm { padding: 5px 8px; font-size: 11.5px; height: 28px; box-sizing: border-box; }
select.v34-tg-input { padding-right: 22px; }
/* Chip group (segmented) */
.v34-tg-chip-group {
display: inline-flex;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 2px;
gap: 1px;
}
.v34-tg-chip {
background: transparent;
border: none;
color: var(--text-muted);
border-radius: 4px;
padding: 4px 10px;
font-size: 11.5px;
font-family: inherit;
cursor: pointer;
line-height: 1.2;
transition: all 0.12s;
}
.v34-tg-chip:hover { color: var(--text-primary); }
.v34-tg-chip.active {
background: var(--accent, #7c5cff);
color: #fff;
}
/* Empty state */
.v34-tg-empty {
text-align: center;
color: var(--text-muted);
font-size: 12.5px;
padding: 24px 12px;
font-family: var(--font-mono, monospace);
}
/* ===== BOTS LIST (grouped by category) ===== */
.v34-tg-bots-host {
display: flex;
flex-direction: column;
gap: var(--s-5, 20px);
}
.v34-tg-cat-section { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-tg-cat-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3, 12px);
flex-wrap: wrap;
padding: 6px 0;
border-bottom: 1px dashed var(--border);
}
.v34-tg-cat-section-head .nm {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-primary);
font-weight: 600;
}
.v34-tg-cat-section-head .nm .ico { margin-right: 6px; opacity: 0.7; }
.v34-tg-cat-section-head .ct {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
margin-left: 8px;
font-weight: 400;
}
.v34-tg-cat-section-head .stats-mini {
margin-left: auto;
margin-right: 8px;
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.v34-tg-cat-section-head .stats-mini b { color: var(--text-primary); font-weight: 600; }
.v34-tg-bot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--s-4, 16px);
}
.v34-tg-bot-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-lg, 12px);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
transition: all 0.18s ease-out;
position: relative;
}
.v34-tg-bot-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: var(--sh-card, 0 8px 20px rgba(0,0,0,0.25));
}
.v34-tg-bot-card.disabled { opacity: 0.55; }
.v34-tg-bot-card.disabled:hover { transform: none; }
.v34-tg-bot-head {
display: flex;
align-items: center;
gap: 12px;
}
.v34-tg-bot-avatar {
width: 40px;
height: 40px;
border-radius: 12px;
display: grid;
place-items: center;
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-weight: 700;
color: white;
font-size: 14px;
flex-shrink: 0;
background: linear-gradient(135deg, #38a8e6, #1d7fc7);
}
.v34-tg-bot-info { flex: 1; min-width: 0; }
.v34-tg-bot-info .name {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v34-tg-bot-info .handle {
font-size: 11.5px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v34-tg-bot-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
font-size: 10.5px;
font-family: var(--font-mono, monospace);
font-weight: 600;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.v34-tg-bot-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v34-tg-bot-status.on { background: rgba(34,197,94,0.18); color: #22c55e; }
.v34-tg-bot-status.off { background: rgba(148,163,184,0.18); color: #94a3b8; }
.v34-tg-bot-status.err { background: rgba(239,68,68,0.18); color: #ef4444; }
.v34-tg-bot-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.v34-tg-bot-stats .s { display: flex; flex-direction: column; gap: 1px; }
.v34-tg-bot-stats .s .v {
font-family: var(--font-mono, monospace);
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.v34-tg-bot-stats .s .v.danger { color: var(--danger, #ef4444); }
.v34-tg-bot-stats .s .v.warning { color: var(--warning, #eab308); }
.v34-tg-bot-stats .s .v.success { color: var(--success, #22c55e); }
.v34-tg-bot-stats .s .l {
font-size: 9.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.v34-tg-bot-actions {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.v34-tg-bot-actions button {
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: var(--r-sm, 6px);
padding: 6px 4px;
font-size: 11px;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 3px;
transition: all 0.15s ease-out;
white-space: nowrap;
}
.v34-tg-bot-actions button:hover {
border-color: var(--border-hover);
color: var(--text-primary);
background: var(--bg-card);
}
.v34-tg-bot-actions button.danger:hover {
color: var(--danger, #ef4444);
border-color: rgba(239,68,68,0.4);
}
.v34-tg-bot-webhook-pill {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9.5px;
padding: 1px 5px;
border-radius: 3px;
font-family: var(--font-mono, monospace);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-left: 6px;
}
.v34-tg-bot-webhook-pill.ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.v34-tg-bot-webhook-pill.err { background: rgba(239,68,68,0.15); color: #ef4444; }
/* Add-bot dashed card */
.v34-tg-bot-add-card {
border: 2px dashed var(--border-hover);
background: transparent;
border-radius: var(--r-lg, 12px);
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
cursor: pointer;
color: var(--text-muted);
font-size: 12.5px;
transition: all 0.18s ease-out;
min-height: 175px;
font-family: inherit;
}
.v34-tg-bot-add-card:hover {
border-color: var(--accent, #7c5cff);
color: var(--accent, #7c5cff);
background: var(--accent-glow, rgba(124,92,255,0.08));
transform: translateY(-2px);
}
.v34-tg-bot-add-card .plus {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg-card);
border: 1px solid var(--border);
display: grid; place-items: center;
font-size: 18px;
color: var(--accent, #7c5cff);
}
/* ===== KPI row + chart (Stats / History) ===== */
.v34-tg-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 14px;
}
@media (max-width: 700px) { .v34-tg-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.v34-tg-kpi-row .kpi {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 10px 12px;
}
.v34-tg-kpi-row .kpi .lbl {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.v34-tg-kpi-row .kpi .v {
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin-top: 3px;
line-height: 1.1;
color: var(--text-primary);
}
.v34-tg-kpi-row .kpi .v.success { color: var(--success, #22c55e); }
.v34-tg-kpi-row .kpi .v.danger { color: var(--danger, #ef4444); }
.v34-tg-chart-host { position: relative; height: 280px; }
.v34-tg-chart-host canvas { max-height: 280px; }
.v34-tg-chart-host.history { height: 240px; }
.v34-tg-chart-host.history canvas { max-height: 240px; }
/* Per-bot mini list (M07-TG.redesign 2026-05-10: + 24h sparkline) */
.v34-tg-perbot-host {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.v34-tg-perbot-host .pb {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 10px 6px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
font-size: 11.5px;
font-family: var(--font-mono, monospace);
transition: border-color 0.15s, transform 0.15s;
}
.v34-tg-perbot-host .pb:hover {
border-color: rgba(56,168,230,0.45);
transform: translateY(-1px);
}
.v34-tg-perbot-host .pb .head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.v34-tg-perbot-host .pb .nm {
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11.5px;
font-weight: 500;
}
.v34-tg-perbot-host .pb .counts {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.v34-tg-perbot-host .pb .vs { color: var(--success, #22c55e); font-weight: 600; }
.v34-tg-perbot-host .pb .vk { color: var(--danger, #ef4444); }
.v34-tg-perbot-host .pb .spark {
display: block;
width: 100%;
height: 22px;
opacity: 0.85;
transition: opacity 0.15s;
}
.v34-tg-perbot-host .pb:hover .spark { opacity: 1; }
.v34-tg-perbot-host-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text-muted);
font-size: 11.5px;
padding: 8px;
font-family: var(--font-mono, monospace);
font-style: italic;
}
/* ===== Categories tabs ===== */
.v34-tg-cat-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.v34-tg-cat-tab {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-secondary);
border-radius: 999px;
padding: 5px 14px;
font-size: 12px;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.12s;
}
.v34-tg-cat-tab:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-tg-cat-tab.active {
background: var(--accent, #7c5cff);
color: #fff;
border-color: var(--accent, #7c5cff);
}
.v34-tg-cat-tab .ct {
font-family: var(--font-mono, monospace);
font-size: 10px;
opacity: 0.8;
}
.v34-tg-cat-form {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
padding: var(--s-4, 16px);
}
.v34-tg-cat-empty {
text-align: center;
color: var(--text-muted);
font-size: 12px;
padding: 24px 12px;
font-family: var(--font-mono, monospace);
font-style: italic;
border: 1px dashed var(--border);
border-radius: var(--r-md, 10px);
}
/* ===== Global / Category form sections ===== */
.v34-tg-global-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 14px;
}
@media (max-width: 1100px) { .v34-tg-global-grid { grid-template-columns: 1fr; } }
.v34-tg-section {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
overflow: hidden;
}
.v34-tg-section-head {
padding: 9px 12px;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
font-weight: 600;
}
.v34-tg-section-body { padding: 12px; }
.v34-tg-section-body label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
font-size: 11px;
color: var(--text-muted);
}
.v34-tg-section-body label > span {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 10px;
}
.v34-tg-section-body label.cb {
flex-direction: row;
align-items: center;
gap: 6px;
}
.v34-tg-section-body label.cb input[type="checkbox"] { accent-color: var(--accent, #7c5cff); }
.v34-tg-proxy-test-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px dashed var(--border);
flex-wrap: wrap;
}
.v34-tg-proxy-test-row .v34-tg-btn { display: inline-flex; align-items: center; gap: 6px; }
.v34-tg-proxy-test-row .v34-tg-btn .ic { font-size: 13px; line-height: 1; }
.v34-tg-proxy-test-hint {
font-size: 10.5px;
color: var(--text-muted);
flex: 1;
min-width: 200px;
line-height: 1.45;
}
.v34-tg-section-body input[type="text"],
.v34-tg-section-body input[type="number"],
.v34-tg-section-body input[type="password"],
.v34-tg-section-body textarea {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
}
.v34-tg-section-body input:focus,
.v34-tg-section-body textarea:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-tg-section-body textarea { resize: vertical; min-height: 60px; }
/* Sticky save bar at bottom of card */
.v34-tg-savebar {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--s-3, 12px);
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid var(--border);
}
.v34-tg-savebar .hint {
font-size: 11px;
color: var(--text-muted);
margin-right: auto;
font-family: var(--font-mono, monospace);
}
.v34-tg-fs-hint {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
}
/* Inheritance highlighting in per-bot cascade */
.v34-tg-section-body input.inherited,
.v34-tg-section-body textarea.inherited {
opacity: 0.6;
font-style: italic;
}
/* =====================================================================
M07-TG.add-modal (2026-05-10) — красивая форма добавления TG-бота.
Custom overlay (не formModal) с секциями, подсказками, eye-toggle
для пароля, collapsible welcome.
===================================================================== */
.v34-tg-add-overlay {
position: fixed; inset: 0;
background: rgba(8,8,12,0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 2300;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity 0.2s ease-out;
}
.v34-tg-add-overlay.open { opacity: 1; pointer-events: auto; }
.v34-tg-add-modal {
background: linear-gradient(180deg, rgba(28,28,40,0.98), rgba(20,20,30,0.98));
border: 1px solid var(--border, #2a2a3a);
border-radius: 18px;
width: min(640px, 100%);
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,92,255,0.08);
animation: v34-tg-add-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes v34-tg-add-in {
from { transform: translateY(20px) scale(0.96); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
/* Header */
.v34-tg-add-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid var(--border, #2a2a3a);
background: linear-gradient(135deg, rgba(56,168,230,0.05), rgba(29,127,199,0.02));
}
.v34-tg-add-icon {
width: 44px; height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #38a8e6, #1d7fc7);
display: grid; place-items: center;
font-size: 22px;
box-shadow: 0 4px 14px rgba(56,168,230,0.35);
flex-shrink: 0;
}
.v34-tg-add-title h3 {
margin: 0;
font-family: var(--font-display, 'Space Grotesk', sans-serif);
font-size: 18px;
font-weight: 700;
color: var(--text-primary, #e8e8f0);
letter-spacing: -0.01em;
}
.v34-tg-add-title p {
margin: 4px 0 0;
font-size: 11.5px;
color: var(--text-muted, #6a6a7e);
line-height: 1.5;
}
.v34-tg-add-title p code {
background: var(--bg-input, #1a1a26);
padding: 1px 5px;
border-radius: 3px;
font-size: 10.5px;
color: var(--text-secondary, #a8a8b8);
}
.v34-tg-add-close {
background: transparent;
border: none;
color: var(--text-muted, #6a6a7e);
width: 32px; height: 32px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
display: grid; place-items: center;
transition: all 0.15s;
flex-shrink: 0;
}
.v34-tg-add-close:hover { background: var(--bg-input, #1a1a26); color: var(--text-primary, #e8e8f0); }
/* Body */
.v34-tg-add-body {
flex: 1;
overflow-y: auto;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Section */
.v34-tg-add-section {
background: rgba(255,255,255,0.015);
border: 1px solid var(--border, #2a2a3a);
border-radius: 12px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.v34-tg-add-section.collapsible { padding: 0; gap: 0; overflow: hidden; }
.v34-tg-add-section.collapsible .v34-tg-add-section-head {
cursor: pointer;
padding: 12px 14px;
user-select: none;
transition: background 0.15s;
}
.v34-tg-add-section.collapsible .v34-tg-add-section-head:hover { background: rgba(255,255,255,0.02); }
.v34-tg-add-section.collapsible .v34-tg-add-section-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.2s ease-out;
padding: 0 14px;
display: flex; flex-direction: column; gap: 12px;
}
.v34-tg-add-section.collapsible.open .v34-tg-add-section-body {
max-height: 600px;
padding: 0 14px 14px;
}
.v34-tg-add-section.collapsible .caret { transition: transform 0.2s; display: inline-block; }
.v34-tg-add-section.collapsible.open .caret { transform: rotate(180deg); }
.v34-tg-add-section-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: var(--text-primary, #e8e8f0);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.v34-tg-add-section-head em {
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
font-size: 11px;
color: var(--text-muted, #6a6a7e);
margin-left: 6px;
}
/* Grid 2-col */
.v34-tg-add-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media (max-width: 600px) { .v34-tg-add-grid { grid-template-columns: 1fr; } }
/* Field */
.v34-tg-add-field {
display: flex;
flex-direction: column;
gap: 5px;
}
.v34-tg-add-field .lab {
font-size: 11px;
color: var(--text-secondary, #a8a8b8);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.v34-tg-add-field .lab em {
font-style: normal;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--text-muted, #6a6a7e);
margin-left: 4px;
}
.v34-tg-add-field .hint {
font-size: 10.5px;
color: var(--text-muted, #6a6a7e);
margin-top: 1px;
font-family: var(--font-mono, monospace);
}
.v34-tg-add-field .hint code {
background: var(--bg-input, #1a1a26);
padding: 1px 4px;
border-radius: 3px;
}
.v34-tg-add-field .hint b {
color: var(--accent, #7c5cff);
font-weight: 600;
}
.v34-tg-add-field input[type="text"],
.v34-tg-add-field input[type="password"],
.v34-tg-add-field select,
.v34-tg-add-field textarea {
background: var(--bg-input, #1a1a26);
border: 1px solid var(--border, #2a2a3a);
color: var(--text-primary, #e8e8f0);
-webkit-text-fill-color: var(--text-primary, #e8e8f0);
border-radius: 8px;
padding: 10px 12px;
font-family: inherit;
font-size: 13px;
transition: border-color 0.15s, box-shadow 0.15s;
width: 100%;
box-sizing: border-box;
}
.v34-tg-add-field input::placeholder,
.v34-tg-add-field textarea::placeholder { color: var(--text-muted, #6a6a7e); opacity: 0.7; }
.v34-tg-add-field input:focus,
.v34-tg-add-field select:focus,
.v34-tg-add-field textarea:focus {
outline: none;
border-color: var(--accent, #7c5cff);
box-shadow: 0 0 0 3px rgba(124,92,255,0.15);
}
.v34-tg-add-field input:-webkit-autofill,
.v34-tg-add-field input:-webkit-autofill:hover,
.v34-tg-add-field input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 30px var(--bg-input, #1a1a26) inset !important;
-webkit-text-fill-color: var(--text-primary, #e8e8f0) !important;
caret-color: var(--text-primary, #e8e8f0) !important;
}
.v34-tg-add-field textarea { resize: vertical; min-height: 70px; font-family: var(--font-mono, monospace); font-size: 12.5px; line-height: 1.5; }
/* Eye-toggle для password */
.v34-tg-add-input-wrap {
position: relative;
display: flex;
}
.v34-tg-add-input-wrap input {
flex: 1;
padding-right: 40px !important;
}
.v34-tg-add-eye {
position: absolute;
right: 4px; top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
font-size: 16px;
color: var(--text-muted, #6a6a7e);
cursor: pointer;
width: 32px; height: 32px;
border-radius: 6px;
display: grid; place-items: center;
transition: all 0.12s;
}
.v34-tg-add-eye:hover { color: var(--accent, #7c5cff); background: rgba(124,92,255,0.08); }
/* Error block */
.v34-tg-add-err {
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
color: #ef4444;
padding: 10px 12px;
border-radius: 8px;
font-size: 12px;
font-family: var(--font-mono, monospace);
}
/* Footer */
.v34-tg-add-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 20px;
border-top: 1px solid var(--border, #2a2a3a);
background: rgba(0,0,0,0.15);
}
.v34-tg-add-foot .hint {
font-size: 11px;
color: var(--text-muted, #6a6a7e);
font-family: var(--font-mono, monospace);
}
.v34-tg-add-foot .actions { display: flex; gap: 8px; }
.v34-tg-add-foot .v34-tg-btn .spin { margin-left: 4px; display: inline-block; animation: v34-spin 1s linear infinite; }
@keyframes v34-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
/* === LEGACY (kept for back-compat — can be removed in next pass) === */
.v34-bots-tg-cardhead {
margin-bottom: var(--s-3, 12px);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3, 12px);
flex-wrap: wrap;
}
.v34-bots-tg-controls {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.v34-bots-tg-input,
.v34-bots-tg-select {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 8px;
font-size: 12px;
height: 28px;
font-family: var(--font-mono, monospace);
}
.v34-bots-tg-select { padding-right: 6px; }
.v34-bots-tg-input:focus,
.v34-bots-tg-select:focus { outline: none; border-color: var(--accent); }
.v34-bots-tg-period.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.v34-bots-tg-kpi {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-3, 12px);
margin: var(--s-3, 12px) 0;
}
@media (max-width: 700px) { .v34-bots-tg-kpi { grid-template-columns: repeat(2, 1fr); } }
.v34-bots-tg-kpi > div {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
}
.v34-bots-tg-kpi .lbl {
font-size: 10.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.v34-bots-tg-kpi .v {
font-size: 22px;
font-family: var(--font-mono, monospace);
margin-top: 4px;
color: var(--text-primary);
}
.v34-bots-tg-kpi .v.success { color: var(--success); }
.v34-bots-tg-kpi .v.danger { color: var(--danger); }
.v34-bots-tg-chart-area {
position: relative;
height: 280px;
margin-top: var(--s-3, 12px);
}
.v34-bots-tg-chart-area canvas { max-height: 280px; }
.v34-bots-tg-perbot {
margin-top: var(--s-3, 12px);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
font-size: 11px;
font-family: var(--font-mono, monospace);
}
.v34-bots-tg-perbot .pb {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 8px;
display: flex;
justify-content: space-between;
gap: 6px;
}
.v34-bots-tg-perbot .pb .nm { color: var(--text-primary); }
.v34-bots-tg-perbot .pb .vs { color: var(--success); }
.v34-bots-tg-perbot .pb .vk { color: var(--danger); margin-left: 6px; }
.v34-bots-tg-perbot-empty {
grid-column: 1 / -1;
text-align: center;
color: var(--text-muted);
font-size: 11px;
padding: 6px;
}
/* Categories card */
.v34-bots-tg-cat-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: var(--s-3, 12px);
}
.v34-bots-tg-cat-tab {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
color: var(--text-secondary);
cursor: pointer;
font-family: var(--font-mono, monospace);
}
.v34-bots-tg-cat-tab:hover { color: var(--text-primary); border-color: var(--border-hover); }
.v34-bots-tg-cat-tab.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.v34-bots-tg-cat-tab .ct {
margin-left: 6px;
font-size: 10px;
opacity: 0.75;
}
.v34-bots-tg-cat-form {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: var(--s-4, 16px);
}
/* Global settings + Category form share grid */
.v34-bots-tg-global-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4, 16px);
}
@media (max-width: 1100px) { .v34-bots-tg-global-grid { grid-template-columns: 1fr; } }
.v34-bots-tg-fs {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
background: var(--bg-input);
}
.v34-bots-tg-fs > legend {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
padding: 0 4px;
font-weight: 600;
}
.v34-bots-tg-fs label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: var(--text-muted);
margin-bottom: 8px;
}
.v34-bots-tg-fs label > span {
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.v34-bots-tg-fs label.v34-bots-tg-cb {
flex-direction: row;
align-items: center;
gap: 6px;
}
.v34-bots-tg-fs label.v34-bots-tg-cb input[type="checkbox"] {
accent-color: var(--accent);
}
.v34-bots-tg-fs input[type="text"],
.v34-bots-tg-fs input[type="number"],
.v34-bots-tg-fs input[type="password"],
.v34-bots-tg-fs input[type="email"],
.v34-bots-tg-fs input[type="url"],
.v34-bots-tg-fs input[type="search"],
.v34-bots-tg-fs input[type="tel"],
.v34-bots-tg-fs textarea,
.v34-bots-tg-fs select {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 8px;
font-size: 12px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
-webkit-text-fill-color: var(--text-primary);
}
.v34-bots-tg-fs select {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 26px;
cursor: pointer;
}
.v34-bots-tg-fs select option { background: var(--bg-card); color: var(--text-primary); }
.v34-bots-tg-fs input:-webkit-autofill,
.v34-bots-tg-fs input:-webkit-autofill:hover,
.v34-bots-tg-fs input:-webkit-autofill:focus,
.v34-bots-tg-fs textarea:-webkit-autofill {
-webkit-text-fill-color: var(--text-primary);
-webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
transition: background-color 5000s ease-in-out 0s;
}
.v34-bots-tg-fs textarea { resize: vertical; min-height: 60px; }
.v34-bots-tg-fs input:focus,
.v34-bots-tg-fs textarea:focus,
.v34-bots-tg-fs select:focus { outline: none; border-color: var(--accent); }
/* Inheritance highlighting (per-bot config / category form). */
.v34-bots-tg-fs input.inherited,
.v34-bots-tg-fs textarea.inherited {
opacity: 0.55;
font-style: italic;
}
.v34-bots-tg-global-actions {
margin-top: var(--s-4, 16px);
display: flex;
justify-content: flex-end;
gap: 8px;
}
/* Inline pill — used in TG card meta + form labels for inheritance source. */
.v34-tg-inh-pill {
display: inline-block;
font-size: 10px;
padding: 1px 5px;
border-radius: 4px;
margin-left: 6px;
color: var(--text-muted);
background: var(--bg-input);
border: 1px solid var(--border);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.v34-tg-ret-pill {
display: inline-block;
font-size: 10.5px;
padding: 1px 6px;
border-radius: 4px;
margin-left: 4px;
font-family: var(--font-mono, monospace);
font-weight: 600;
}
.v34-tg-ret-pill.ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.v34-tg-ret-pill.warn { background: rgba(234,179,8,0.18); color: #eab308; }
.v34-tg-ret-pill.bad { background: rgba(239,68,68,0.15); color: #ef4444; }
/* Card extra action buttons (⚙ ⚡ 🔍) — те же стили что Edit/Delete. */
.v34-bots-action-btn.subtle { color: var(--text-secondary); }
.v34-bots-action-btn.subtle:hover { color: var(--accent); }
/* =====================================================================
v34.kbEditor — multi-row inline-keyboard editor.
Используется в global welcome / category welcome / TG-broadcast.
===================================================================== */
.v34-kb-editor {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.v34-kb-empty {
font-size: 11px;
color: var(--text-muted);
text-align: center;
padding: 8px 4px;
font-style: italic;
}
.v34-kb-row {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.v34-kb-row-head {
display: grid;
grid-template-columns: 2fr 70px 28px;
gap: 4px;
}
/* 2026-05-13 (v34.78): когда есть color-select, добавляем 4-ю колонку для него. */
.v34-kb-editor[data-kb-with-color="1"] .v34-kb-row-head {
grid-template-columns: 2fr 60px 130px 28px;
}
.v34-kb-row-head input,
.v34-kb-row-head select {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 5px;
padding: 3px 6px;
font-size: 11px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
}
.v34-kb-row-head select.kb-color {
cursor: pointer;
padding: 3px 4px;
}
.v34-kb-row-head select.kb-color:focus {
outline: none;
border-color: var(--accent, #7c5cff);
}
/* Цветовая подсветка ряда по data-color (JS обновляет атрибут при change). */
.v34-kb-row[data-color="positive"] { border-left: 3px solid #22c55e; }
.v34-kb-row[data-color="negative"] { border-left: 3px solid #ef4444; }
.v34-kb-row[data-color="primary"] { border-left: 3px solid #38bdf8; }
/* Mobile: color-select переезжает на 2-ю строку */
@media (max-width: 600px) {
.v34-kb-editor[data-kb-with-color="1"] .v34-kb-row-head {
grid-template-columns: 2fr 60px 28px;
row-gap: 6px;
}
.v34-kb-editor[data-kb-with-color="1"] .v34-kb-row-head select.kb-color {
grid-column: 1 / -1;
}
}
.v34-kb-urls {
display: flex;
flex-direction: column;
gap: 3px;
}
.v34-kb-url-row {
display: flex;
gap: 4px;
}
.v34-kb-url-row input {
flex: 1;
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 5px;
padding: 3px 6px;
font-size: 11px;
font-family: var(--font-mono, monospace);
min-width: 0;
}
.v34-kb-mini-btn {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text-secondary);
cursor: pointer;
font-size: 11px;
padding: 3px 8px;
line-height: 1.2;
}
.v34-kb-mini-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.v34-kb-mini-btn.danger:hover {
border-color: var(--danger);
color: var(--danger);
}
.v34-kb-add {
align-self: flex-start;
background: transparent;
border: 1px dashed var(--border);
color: var(--text-secondary);
border-radius: 6px;
padding: 5px 12px;
cursor: pointer;
font-size: 11px;
font-family: var(--font-mono, monospace);
}
.v34-kb-add:hover { color: var(--accent); border-color: var(--accent); }
/* TG-stats preset on date input — выровнять иконку. */
.v34-bots-tg-input[type="date"] { min-width: 130px; }
/* Webhook diag modal — список строк выводится монопространственно. */
.v34-tg-diag-list {
font-family: var(--font-mono, monospace);
font-size: 11px;
line-height: 1.6;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px 10px;
max-height: 60vh;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
}
.v34-tg-diag-list .row { display: flex; gap: 6px; }
.v34-tg-diag-list .lbl { color: var(--text-muted); min-width: 110px; flex-shrink: 0; }
.v34-tg-diag-list .val { color: var(--text-primary); }
.v34-tg-diag-list .val.ok { color: var(--success); }
.v34-tg-diag-list .val.bad { color: var(--danger); }
/* =====================================================================
M07-VK: VK-боты — sub-tabs / users-table / sources-table / logs.
===================================================================== */
.v34-vk-subtabs {
display: flex;
gap: 4px;
margin-top: var(--s-4, 16px);
border-bottom: 1px solid var(--border);
padding-bottom: 0;
flex-wrap: wrap;
}
.v34-vk-subtab {
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-muted);
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.v34-vk-subtab:hover { color: var(--text-primary); }
.v34-vk-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.v34-vk-subpane { display: none; }
.v34-vk-subpane.active { display: block; }
/* VK action buttons row на карточках бота. Кнопки: 🔌 toggle / 🧪 test / 🧩 templates / ✎ / ✕ */
.v34-bots-card-actions .v34-bots-action-btn[data-vk-toggle]{ background: var(--bg-input); }
.v34-bots-card-actions .v34-bots-action-btn[data-vk-toggle].active {
background: rgba(34,197,94,0.15);
color: #22c55e;
border-color: rgba(34,197,94,0.4);
}
/* Sources table */
.v34-vk-sources-content {
margin-top: var(--s-3, 12px);
}
.v34-vk-sources-table {
width: 100%;
border-collapse: collapse;
font-size: 11.5px;
font-family: var(--font-mono, monospace);
}
.v34-vk-sources-table th,
.v34-vk-sources-table td {
padding: 6px 8px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.v34-vk-sources-table th {
color: var(--text-muted);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
background: var(--bg-input);
}
.v34-vk-sources-table tr:hover td { background: var(--bg-input); }
.v34-vk-sources-table .num { text-align: right; color: var(--text-primary); }
.v34-vk-sources-table .ref-cell {
max-width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-vk-sources-table .ref-cell .ref-tag {
display: inline-block;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 4px;
padding: 1px 5px;
font-size: 10px;
margin-right: 4px;
color: var(--text-secondary);
}
/* Users table */
.v34-vk-users-content {
margin-top: var(--s-3, 12px);
overflow-x: auto;
}
.v34-vk-users-table {
width: 100%;
border-collapse: collapse;
font-size: 11.5px;
font-family: var(--font-mono, monospace);
}
.v34-vk-users-table th,
.v34-vk-users-table td {
padding: 6px 8px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: top;
white-space: nowrap;
}
.v34-vk-users-table th {
color: var(--text-muted);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
background: var(--bg-input);
position: sticky;
top: 0;
z-index: 1;
}
.v34-vk-users-table tr:hover td { background: var(--bg-input); }
.v34-vk-users-table .name-cell { color: var(--text-primary); }
.v34-vk-peer-link {
display: inline-flex;
align-items: baseline;
gap: 3px;
color: #5181b8;
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color 150ms, color 150ms;
}
.v34-vk-peer-link:hover { color: #6d9bc9; border-bottom-color: rgba(81,129,184,0.5); }
.v34-vk-peer-link.name { color: var(--text-primary); }
.v34-vk-peer-link.name:hover { color: #6d9bc9; }
.v34-vk-peer-link .ext { font-size: 9.5px; opacity: 0.6; }
.v34-vk-users-table .ref-cell {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
}
.v34-vk-users-table .pill {
display: inline-block;
font-size: 9.5px;
padding: 1px 4px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.v34-vk-users-table .pill.sub { background: rgba(34,197,94,0.15); color: #22c55e; }
.v34-vk-users-table .pill.blk { background: rgba(239,68,68,0.15); color: #ef4444; }
.v34-vk-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 11px;
color: var(--text-muted);
}
/* Logs viewer */
.v34-vk-logs-content {
margin-top: var(--s-3, 12px);
max-height: 540px;
overflow-y: auto;
font-size: 11px;
font-family: var(--font-mono, monospace);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
}
.v34-vk-log-entry {
display: grid;
grid-template-columns: 145px 56px 110px 1fr;
gap: 8px;
padding: 4px 8px;
border-bottom: 1px solid var(--border);
}
.v34-vk-log-entry:hover { background: var(--bg-input); }
.v34-vk-log-entry .ts { color: var(--text-muted); white-space: nowrap; }
.v34-vk-log-entry .typ { font-weight: 600; text-transform: uppercase; font-size: 10px; padding: 1px 5px; border-radius: 3px; text-align: center; }
.v34-vk-log-entry .typ.in { background: rgba(96,165,250,0.15); color: #60a5fa; }
.v34-vk-log-entry .typ.out { background: rgba(34,197,94,0.15); color: #22c55e; }
.v34-vk-log-entry .typ.error { background: rgba(239,68,68,0.18); color: #ef4444; }
.v34-vk-log-entry .typ.system{ background: rgba(168,85,247,0.15); color: #a855f7; }
.v34-vk-log-entry .typ.confirmation,
.v34-vk-log-entry .typ.message_allow,
.v34-vk-log-entry .typ.message_deny { background: var(--bg-input); color: var(--text-secondary); }
.v34-vk-log-entry .who { color: var(--text-secondary); }
.v34-vk-log-entry .msg { color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
/* VK Templates editor (custom modal) */
.v34-vk-tpl-overlay {
position: fixed; inset: 0;
background: rgba(8,8,12,0.72);
backdrop-filter: blur(4px);
z-index: 2200;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity 0.18s;
}
.v34-vk-tpl-overlay.open { opacity: 1; pointer-events: auto; }
.v34-vk-tpl-modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
width: min(960px, 100%);
max-height: 86vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.v34-vk-tpl-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.v34-vk-tpl-head .ttl { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.v34-vk-tpl-head .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.v34-vk-tpl-body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 0;
flex: 1;
overflow: hidden;
min-height: 460px;
}
@media (max-width: 800px) { .v34-vk-tpl-body { grid-template-columns: 1fr; } }
.v34-vk-tpl-list {
border-right: 1px solid var(--border);
overflow-y: auto;
padding: 10px;
background: var(--bg-input);
}
.v34-vk-tpl-list-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
margin-bottom: 6px;
cursor: pointer;
}
.v34-vk-tpl-list-item:hover { border-color: var(--border-hover); }
.v34-vk-tpl-list-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.v34-vk-tpl-list-item .id { font-size: 11px; color: var(--text-primary); font-weight: 600; font-family: var(--font-mono, monospace); }
.v34-vk-tpl-list-item .meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; font-family: var(--font-mono, monospace); }
.v34-vk-tpl-add {
width: 100%;
background: transparent;
border: 1px dashed var(--border);
color: var(--text-secondary);
padding: 7px;
border-radius: 8px;
cursor: pointer;
font-size: 11px;
font-family: var(--font-mono, monospace);
}
.v34-vk-tpl-add:hover { color: var(--accent); border-color: var(--accent); }
.v34-vk-tpl-form {
overflow-y: auto;
padding: 16px;
}
.v34-vk-tpl-form .empty {
text-align: center;
color: var(--text-muted);
font-size: 12px;
padding: 40px;
font-style: italic;
}
.v34-vk-tpl-form fieldset { margin-bottom: 12px; }
.v34-vk-tpl-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v34-vk-tpl-foot {
border-top: 1px solid var(--border);
padding: 10px 18px;
display: flex;
justify-content: space-between;
gap: 8px;
}
.v34-vk-tpl-foot .left,
.v34-vk-tpl-foot .right { display: flex; gap: 8px; }
.v34-vk-tpl-rotation {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px;
}
.v34-vk-tpl-rotation textarea {
width: 100%;
min-height: 60px;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 5px;
padding: 5px 7px;
font-size: 11px;
font-family: var(--font-mono, monospace);
resize: vertical;
}
/* =====================================================================
M08-S: Settings — UI Layout Editor / AI chips / tier summary / info-card
===================================================================== */
/* AI-chain chips (П.20) */
.v34-set-aichain {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin: 10px 0;
}
.v34-set-aichain-chip {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-input);
border: 2px solid var(--border);
border-radius: 8px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
cursor: grab;
user-select: none;
transition: transform 0.1s, box-shadow 0.1s;
}
.v34-set-aichain-chip:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.v34-set-aichain-chip.dragging { opacity: 0.5; }
.v34-set-aichain-chip[data-provider="openai"] { border-color: #10a37f; color: #10a37f; }
.v34-set-aichain-chip[data-provider="grok"] { border-color: #ffffff; color: var(--text-primary); }
.v34-set-aichain-chip[data-provider="claude"] { border-color: #cc785c; color: #cc785c; }
.v34-set-aichain-chip .pos {
background: var(--bg-card);
color: var(--text-muted);
border-radius: 50%;
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono, monospace);
}
.v34-set-aichain-chip .lbl { flex: 1; }
.v34-set-aichain-chip .grab { font-size: 14px; color: var(--text-muted); cursor: grab; }
.v34-set-aichain-chip button {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 13px;
padding: 2px 4px;
}
.v34-set-aichain-chip button:hover { color: var(--accent); }
.v34-set-aichain-status {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
margin-top: 4px;
}
/* Tier summary card (П.22) */
.v34-set-tier-summary {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 14px;
}
@media (max-width: 700px) { .v34-set-tier-summary { grid-template-columns: repeat(2, 1fr); } }
.v34-set-tier-summary > div {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
text-align: center;
}
.v34-set-tier-summary .lbl {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
font-weight: 600;
}
.v34-set-tier-summary .v {
font-size: 22px;
font-family: var(--font-mono, monospace);
margin-top: 4px;
color: var(--text-primary);
}
.v34-set-tier-summary .badge {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
line-height: 20px;
margin-right: 4px;
color: #fff;
text-align: center;
}
.v34-set-tier-summary .badge.A { background: #22c55e; }
.v34-set-tier-summary .badge.B { background: #eab308; }
.v34-set-tier-summary .badge.C { background: #94a3b8; }
.v34-set-tier-summary .badge.viral { background: #ec4899; }
.v34-set-tier-summary .badge.grace { background: #a855f7; }
/* Info card (П.23) */
.v34-set-info-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: 8px;
padding: 12px 14px;
margin-top: 14px;
font-size: 11.5px;
color: var(--text-secondary);
line-height: 1.5;
}
.v34-set-info-card h4 {
margin: 0 0 8px 0;
font-size: 12px;
color: var(--text-primary);
}
.v34-set-info-card dl {
margin: 0;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4px 12px;
}
@media (max-width: 700px) { .v34-set-info-card dl { grid-template-columns: 1fr; } }
.v34-set-info-card dt {
color: var(--text-primary);
font-family: var(--font-mono, monospace);
font-weight: 600;
font-size: 11px;
}
.v34-set-info-card dd { margin: 0; color: var(--text-muted); font-size: 11px; }
/* AI tab hint linking to M16 (П.19) */
.v34-set-link-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
margin-top: 14px;
display: flex;
align-items: flex-start;
gap: 10px;
}
.v34-set-link-card .ico { font-size: 18px; }
.v34-set-link-card .body { flex: 1; font-size: 11.5px; color: var(--text-secondary); }
.v34-set-link-card .body strong { color: var(--text-primary); }
.v34-set-link-card a {
color: var(--accent);
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.v34-set-link-card a:hover { text-decoration: underline; }
/* UI Layout Editor (П.18) */
.v34-set-ule-toolbar {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
align-items: center;
}
.v34-set-ule-status {
margin-left: auto;
font-size: 11px;
color: var(--warning, #eab308);
font-family: var(--font-mono, monospace);
font-style: italic;
}
.v34-set-ule-status.clean { color: var(--success, #22c55e); }
.v34-set-ule-mobile {
background: rgba(234,179,8,0.15);
border: 1px solid rgba(234,179,8,0.4);
color: #eab308;
padding: 12px;
border-radius: 8px;
font-size: 12px;
text-align: center;
}
.v34-set-ule-preview {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px;
max-width: 380px;
}
.ule-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px;
margin-bottom: 6px;
transition: opacity 0.15s, border-color 0.15s;
}
.ule-section.dragging { opacity: 0.5; }
.ule-section.drop-before { border-top: 2px solid var(--accent); }
.ule-section.drop-after { border-bottom: 2px solid var(--accent); }
.ule-section.drop-into { box-shadow: 0 0 0 2px var(--accent); }
.ule-section-header {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
color: var(--text-primary);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: grab;
}
.ule-drag-handle {
color: var(--text-muted);
font-size: 14px;
cursor: grab;
}
.ule-collapse-toggle {
margin-left: auto;
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-input);
color: var(--text-muted);
cursor: pointer;
text-transform: none;
letter-spacing: normal;
font-weight: 500;
}
.ule-collapse-toggle:hover { color: var(--text-primary); }
.ule-collapse-toggle.on { background: rgba(234,179,8,0.18); color: #eab308; }
.ule-section-body {
padding: 4px 4px 4px 16px;
display: flex;
flex-direction: column;
gap: 3px;
}
.ule-page {
display: flex;
align-items: center;
gap: 6px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 5px;
padding: 4px 8px;
cursor: grab;
font-size: 12px;
color: var(--text-secondary);
transition: opacity 0.15s, border-color 0.15s;
}
.ule-page:hover { color: var(--text-primary); }
.ule-page.dragging { opacity: 0.5; }
.ule-page.drop-before { border-top: 2px solid var(--accent); }
.ule-page.drop-after { border-bottom: 2px solid var(--accent); }
.ule-page-label { flex: 1; }
.ule-page svg.nav-icon,
.ule-page .nav-icon { width: 14px; height: 14px; }
.ule-empty-placeholder {
text-align: center;
color: var(--text-muted);
font-size: 10.5px;
padding: 8px;
border: 1px dashed var(--border);
border-radius: 5px;
font-style: italic;
}
/* =====================================================================
M07-Sender (TIER 2): status palette + priority emoji + per-comm progress
+ custom form modal с multi-select communities + kbEditor.
===================================================================== */
/* П.29: палитра статусов + priority */
.v34-snd-status-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
padding: 1px 7px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
font-family: var(--font-mono, monospace);
}
.v34-snd-status-pill .dot {
width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.v34-snd-status-pill.pending { background: rgba(148,163,184,0.18); color: #94a3b8; }
.v34-snd-status-pill.pending .dot { background: #94a3b8; }
.v34-snd-status-pill.running { background: rgba(34,197,94,0.15); color: #22c55e; animation: v34-snd-pulse 1.6s infinite; }
.v34-snd-status-pill.running .dot { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.v34-snd-status-pill.sleeping { background: rgba(139,92,246,0.18); color: #8b5cf6; }
.v34-snd-status-pill.sleeping .dot { background: #8b5cf6; }
.v34-snd-status-pill.paused { background: rgba(234,179,8,0.18); color: #eab308; }
.v34-snd-status-pill.paused .dot { background: #eab308; }
.v34-snd-status-pill.completed { background: rgba(34,197,94,0.10); color: #15803d; }
.v34-snd-status-pill.completed .dot { background: #22c55e; opacity: 0.6; }
.v34-snd-status-pill.cancelled { background: rgba(148,163,184,0.10); color: var(--text-muted); }
.v34-snd-status-pill.cancelled .dot { background: var(--text-muted); }
.v34-snd-status-pill.error { background: rgba(239,68,68,0.18); color: #ef4444; }
.v34-snd-status-pill.error .dot { background: #ef4444; }
@keyframes v34-snd-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.v34-snd-prio {
display: inline-block;
font-size: 11px;
margin-right: 2px;
}
.v34-snd-prio.p1 { color: #eab308; }
.v34-snd-prio.p2 { color: #ef4444; }
/* Card meta lines + progress bar */
.v34-snd-card-progress {
margin-top: 6px;
}
.v34-snd-progress-bar {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
height: 8px;
overflow: hidden;
margin-top: 4px;
}
.v34-snd-progress-fill {
background: linear-gradient(90deg, #22c55e, #4ade80);
height: 100%;
transition: width 0.3s ease;
}
.v34-snd-progress-meta {
display: flex;
justify-content: space-between;
font-size: 10.5px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
margin-top: 3px;
}
.v34-snd-progress-meta .err { color: #ef4444; }
/* П.31: per-community details (expand/collapse) */
.v34-snd-comm-toggle {
background: transparent;
border: 1px dashed var(--border);
color: var(--text-muted);
border-radius: 5px;
padding: 3px 8px;
cursor: pointer;
font-size: 10.5px;
font-family: var(--font-mono, monospace);
margin-top: 6px;
}
.v34-snd-comm-toggle:hover { color: var(--accent); border-color: var(--accent); }
.v34-snd-comm-list {
margin-top: 6px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px;
font-size: 11px;
font-family: var(--font-mono, monospace);
max-height: 280px;
overflow-y: auto;
}
.v34-snd-comm-row {
display: grid;
grid-template-columns: 100px 1fr 80px;
gap: 8px;
padding: 4px 6px;
border-bottom: 1px dashed var(--border);
align-items: center;
}
.v34-snd-comm-row:last-child { border-bottom: none; }
.v34-snd-comm-row .cid { color: var(--text-secondary); }
.v34-snd-comm-row .pcell { display: flex; align-items: center; gap: 6px; }
.v34-snd-comm-row .pbar {
flex: 1;
height: 6px;
background: var(--bg-card);
border-radius: 3px;
overflow: hidden;
}
.v34-snd-comm-row .pbar > div {
height: 100%;
background: #22c55e;
}
.v34-snd-comm-row .pnum { color: var(--text-primary); font-size: 10.5px; }
.v34-snd-comm-row .ststxt { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.v34-snd-comm-row .ststxt.completed { color: #22c55e; }
.v34-snd-comm-row .ststxt.running { color: #22c55e; }
.v34-snd-comm-row .ststxt.error { color: #ef4444; }
.v34-snd-comm-row .ststxt.pending { color: var(--text-muted); }
/* П.27/30/28: Sender form modal (custom overlay) */
.v34-snd-form-overlay {
position: fixed; inset: 0;
background: rgba(8,8,12,0.72);
backdrop-filter: blur(4px);
z-index: 2200;
display: flex; align-items: center; justify-content: center;
padding: 24px;
opacity: 0; pointer-events: none;
transition: opacity 0.18s;
}
.v34-snd-form-overlay.open { opacity: 1; pointer-events: auto; }
.v34-snd-form-modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
width: min(820px, 100%);
max-height: 88vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.v34-snd-form-head {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.v34-snd-form-head .ttl { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.v34-snd-form-head .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.v34-snd-form-body {
flex: 1;
overflow-y: auto;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.v34-snd-form-body label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.v34-snd-form-body label > span.lab { font-weight: 600; }
.v34-snd-form-body input[type="text"],
.v34-snd-form-body input[type="datetime-local"],
.v34-snd-form-body input[type="time"],
.v34-snd-form-body input[type="number"],
.v34-snd-form-body select,
.v34-snd-form-body textarea {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
}
.v34-snd-form-body textarea { resize: vertical; min-height: 80px; }
.v34-snd-form-body input:focus,
.v34-snd-form-body select:focus,
.v34-snd-form-body textarea:focus { outline: none; border-color: var(--accent); }
.v34-snd-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v34-snd-form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .v34-snd-form-row, .v34-snd-form-row.three { grid-template-columns: 1fr; } }
/* П.27: multi-select communities */
.v34-snd-comms-search {
display: flex; gap: 6px; align-items: center;
margin-bottom: 6px;
}
.v34-snd-comms-search .meta {
margin-left: auto;
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
}
.v34-snd-comms-search .meta b { color: var(--text-primary); }
.v34-snd-comms-list {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
max-height: 200px;
overflow-y: auto;
padding: 4px;
}
.v34-snd-comms-row {
display: grid;
grid-template-columns: 24px 100px 1fr 80px;
gap: 8px;
padding: 4px 8px;
align-items: center;
border-radius: 4px;
font-size: 11px;
font-family: var(--font-mono, monospace);
cursor: pointer;
}
.v34-snd-comms-row:hover { background: var(--bg-card); }
.v34-snd-comms-row .cid { color: var(--text-secondary); }
.v34-snd-comms-row .users { color: var(--text-primary); text-align: right; }
.v34-snd-comms-row .nm { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v34-snd-comms-row.no-token { opacity: 0.5; }
.v34-snd-comms-row.no-token .users::after { content: ' (нет токена)'; font-size: 9px; color: #ef4444; }
.v34-snd-comms-actions {
display: flex; gap: 6px; margin-bottom: 6px;
}
.v34-snd-comms-actions button {
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 4px 10px;
border-radius: 5px;
cursor: pointer;
font-size: 11px;
}
.v34-snd-comms-actions button:hover { color: var(--accent); border-color: var(--accent); }
.v34-snd-form-foot {
border-top: 1px solid var(--border);
padding: 10px 18px;
display: flex;
justify-content: space-between;
gap: 8px;
}
.v34-snd-form-foot .left,
.v34-snd-form-foot .right { display: flex; gap: 8px; }
.v34-snd-form-err {
color: #ef4444;
font-size: 11px;
padding: 6px 10px;
background: rgba(239,68,68,0.1);
border-radius: 5px;
margin-top: 4px;
display: none;
}
.v34-snd-form-err.shown { display: block; }
/* ============================================================ */
/* M07-VK.redesign · 2026-05-10 */
/* Полный редизайн VK-секции в стиле .v34-vk-*. Зеркалит TG- */
/* паттерны (.v34-tg-*), но с VK-синим акцентом #4a76a8. */
/* ============================================================ */
.v34-vk-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
padding: 14px;
background: linear-gradient(135deg, rgba(74,118,168,0.10), rgba(81,129,184,0.04));
border: 1px solid rgba(74,118,168,0.22);
border-radius: var(--r-md, 10px);
position: relative;
overflow: hidden;
}
.v34-vk-strip::before {
content: "";
position: absolute; left: 0; top: 0; right: 0; height: 2px;
background: linear-gradient(90deg, #4a76a8 0%, #5181b8 50%, #4a76a8 100%);
}
.v34-vk-stat {
background: var(--bg-card);
border-radius: var(--r-sm, 8px);
padding: 12px 14px;
border: 1px solid var(--border);
transition: border-color 200ms;
}
.v34-vk-stat:hover { border-color: rgba(81,129,184,0.4); }
.v34-vk-stat .lbl {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 6px;
}
.v34-vk-stat .v {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
line-height: 1;
}
.v34-vk-stat .d {
font-size: 10.5px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.3;
}
.v34-vk-stat.accent .v { background: linear-gradient(135deg, #4a76a8, #5181b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.v34-vk-scard {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
margin-top: 14px;
overflow: hidden;
}
.v34-vk-scard-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
flex-wrap: wrap;
}
.v34-vk-scard-head .ttl {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.v34-vk-scard-head .sub {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 400;
}
.v34-vk-scard-body { padding: 16px; }
.v34-vk-webhook-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(74,118,168,0.06);
border: 1px dashed rgba(74,118,168,0.3);
border-radius: var(--r-sm, 8px);
flex-wrap: wrap;
}
.v34-vk-webhook-row .lbl {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 700;
}
.v34-vk-webhook-row .url {
flex: 1;
min-width: 240px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11.5px;
color: var(--text-primary);
word-break: break-all;
}
.v34-vk-webhook-row .copy-btn {
padding: 6px 12px;
border-radius: var(--r-sm, 6px);
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text-primary);
font-size: 11px;
cursor: pointer;
transition: border-color 150ms, color 150ms;
}
.v34-vk-webhook-row .copy-btn:hover { border-color: #5181b8; color: #6d9bc9; }
.v34-vk-webhook-row .hint {
flex-basis: 100%;
font-size: 10.5px;
color: var(--text-muted);
line-height: 1.45;
}
.v34-vk-subtabs-row {
display: flex;
gap: 6px;
margin-top: 14px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.v34-vk-subtabs-row .v34-vk-subtab {
background: transparent;
border: 1px solid transparent;
border-bottom: none;
border-top-left-radius: var(--r-sm, 6px);
border-top-right-radius: var(--r-sm, 6px);
padding: 8px 14px;
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
transition: color 150ms, background-color 150ms, border-color 150ms;
margin-bottom: -1px;
}
.v34-vk-subtabs-row .v34-vk-subtab:hover { color: var(--text-primary); background: rgba(81,129,184,0.05); }
.v34-vk-subtabs-row .v34-vk-subtab.active {
color: var(--text-primary);
background: var(--bg-card);
border-color: var(--border);
border-bottom-color: var(--bg-card);
box-shadow: 0 -2px 0 #5181b8 inset;
font-weight: 600;
}
.v34-vk-bot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.v34-vk-bot-card {
background: linear-gradient(180deg, rgba(74,118,168,0.04), transparent);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
padding: 14px;
transition: border-color 200ms, transform 200ms, box-shadow 200ms;
display: flex;
flex-direction: column;
gap: 12px;
}
.v34-vk-bot-card:hover {
border-color: rgba(81,129,184,0.5);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(74,118,168,0.16);
}
.v34-vk-bot-head {
display: flex;
align-items: center;
gap: 11px;
}
.v34-vk-bot-avatar {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #4a76a8, #5181b8);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.02em;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22);
}
.v34-vk-bot-info { flex: 1; min-width: 0; }
.v34-vk-bot-info .name {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 2px;
}
.v34-vk-bot-info .handle {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-vk-bot-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: var(--r-pill, 999px);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
flex-shrink: 0;
}
.v34-vk-bot-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.v34-vk-bot-status.on { background: rgba(34,197,94,0.12); color: #4ade80; }
.v34-vk-bot-status.on .dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.v34-vk-bot-status.off { background: rgba(120,120,140,0.12); color: var(--text-muted); }
.v34-vk-bot-status.off .dot { background: var(--text-muted); }
.v34-vk-bot-status.err { background: rgba(239,68,68,0.12); color: #f87171; }
.v34-vk-bot-status.err .dot { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.v34-vk-bot-stats {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
padding: 10px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.v34-vk-bot-stats .stat-cell { text-align: center; }
.v34-vk-bot-stats .stat-cell .v {
font-size: 16px;
font-weight: 700;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: var(--text-primary);
line-height: 1;
margin-bottom: 4px;
}
.v34-vk-bot-stats .stat-cell .l {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
}
.v34-vk-bot-wh {
display: flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: var(--text-muted);
background: rgba(120,120,140,0.06);
border-radius: var(--r-sm, 6px);
padding: 6px 8px;
}
.v34-vk-bot-wh .lbl { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; flex-shrink: 0; }
.v34-vk-bot-wh code {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: var(--text-primary);
}
.v34-vk-bot-wh .copy {
background: transparent;
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
color: var(--text-muted);
cursor: pointer;
font-size: 11px;
transition: color 150ms, border-color 150ms;
}
.v34-vk-bot-wh .copy:hover { color: #5181b8; border-color: #5181b8; }
.v34-vk-bot-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
}
.v34-vk-bot-actions .v34-vk-act {
padding: 7px 10px;
border-radius: var(--r-sm, 6px);
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text-primary);
font-size: 11.5px;
cursor: pointer;
text-align: center;
transition: background-color 150ms, border-color 150ms, color 150ms, transform 150ms;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.v34-vk-bot-actions .v34-vk-act:hover { border-color: #5181b8; color: #fff; background: rgba(81,129,184,0.16); transform: translateY(-1px); }
.v34-vk-bot-actions .v34-vk-act.toggle.active { border-color: rgba(34,197,94,0.4); color: #4ade80; }
.v34-vk-bot-actions .v34-vk-act.toggle.active:hover { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #4ade80; }
.v34-vk-bot-actions .v34-vk-act.danger { color: #f87171; }
.v34-vk-bot-actions .v34-vk-act.danger:hover { border-color: #ef4444; background: rgba(239,68,68,0.12); color: #fca5a5; }
.v34-vk-bot-actions .v34-vk-act.full { grid-column: span 2; }
.v34-vk-add-card {
background: transparent;
border: 2px dashed var(--border);
border-radius: var(--r-md, 10px);
min-height: 188px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--text-muted);
cursor: pointer;
transition: border-color 200ms, color 200ms, background-color 200ms;
padding: 16px;
text-align: center;
}
.v34-vk-add-card:hover {
border-color: #5181b8;
color: #6d9bc9;
background: rgba(81,129,184,0.04);
}
.v34-vk-add-card .plus {
font-size: 28px;
line-height: 1;
font-weight: 300;
margin-bottom: 4px;
}
.v34-vk-add-card .lab { font-size: 12.5px; font-weight: 600; }
.v34-vk-add-card .sub { font-size: 10.5px; opacity: 0.8; }
.v34-vk-cardhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.v34-vk-cardhead .ttl {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.v34-vk-controls {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.v34-vk-select,
.v34-vk-input {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 6px 10px;
color: var(--text-primary);
font-size: 11.5px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
-webkit-text-fill-color: var(--text-primary);
transition: border-color 150ms;
}
.v34-vk-select { padding-right: 26px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.v34-vk-select option { background: var(--bg-card); color: var(--text-primary); }
.v34-vk-select:focus,
.v34-vk-input:focus { outline: none; border-color: #5181b8; }
.v34-vk-chip {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 5px 11px;
color: var(--text-muted);
font-size: 11.5px;
cursor: pointer;
transition: color 150ms, border-color 150ms, background-color 150ms;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-vk-chip:hover { color: var(--text-primary); border-color: rgba(81,129,184,0.45); }
.v34-vk-chip.active {
background: rgba(81,129,184,0.18);
border-color: #5181b8;
color: #fff;
font-weight: 600;
}
.v34-vk-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 6px 12px;
color: var(--text-primary);
font-size: 11.5px;
cursor: pointer;
transition: border-color 150ms, background-color 150ms, color 150ms;
}
.v34-vk-btn:hover { border-color: #5181b8; color: #fff; background: rgba(81,129,184,0.16); }
.v34-vk-btn.primary { background: linear-gradient(135deg, #4a76a8, #5181b8); border-color: transparent; color: #fff; font-weight: 600; }
.v34-vk-btn.primary:hover { filter: brightness(1.12); border-color: transparent; }
.v34-vk-btn.sm { padding: 4px 9px; font-size: 11px; }
.v34-vk-btn.ghost { background: transparent; }
.v34-vk-btn.ghost:hover { background: rgba(81,129,184,0.08); }
.v34-vk-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 14px;
}
.v34-vk-kpi-row.cols-5 { grid-template-columns: repeat(5, 1fr); }
.v34-vk-kpi-row .kpi {
background: rgba(81,129,184,0.05);
border: 1px solid rgba(81,129,184,0.18);
border-radius: var(--r-sm, 8px);
padding: 10px 12px;
}
.v34-vk-kpi-row .kpi .l {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 4px;
}
.v34-vk-kpi-row .kpi .v {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
line-height: 1;
}
.v34-vk-kpi-row .kpi .v.danger { color: #f87171; }
.v34-vk-chart-host {
height: 220px;
background: rgba(0,0,0,0.16);
border-radius: var(--r-sm, 8px);
padding: 10px;
border: 1px solid var(--border);
}
.v34-vk-chart-host canvas { max-height: 200px; }
.v34-vk-pagination {
display: flex;
align-items: center;
gap: 10px;
justify-content: center;
margin-top: 14px;
font-size: 11px;
color: var(--text-muted);
}
.v34-vk-pagination button {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 5px 12px;
color: var(--text-primary);
font-size: 11px;
cursor: pointer;
transition: border-color 150ms, color 150ms;
}
.v34-vk-pagination button:hover:not(:disabled) { border-color: #5181b8; color: #fff; }
.v34-vk-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.v34-vk-empty {
text-align: center;
padding: 28px 16px;
color: var(--text-muted);
font-size: 12px;
}
.v34-vk-logs-content { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; }
/* ============================================================ */
/* Г · 2026-05-10 — TG-рассылка inline form + tasks split */
/* namespace .v34-tg-bc-* */
/* ============================================================ */
.v34-tg-bc-form {
background: linear-gradient(135deg, rgba(56,168,230,0.08), rgba(29,127,199,0.03));
border: 1px solid rgba(56,168,230,0.22);
border-radius: var(--r-md, 10px);
margin-top: 14px;
overflow: hidden;
position: relative;
}
.v34-tg-bc-form::before {
content: "";
position: absolute; left: 0; top: 0; right: 0; height: 2px;
background: linear-gradient(90deg, #38a8e6 0%, #1d7fc7 50%, #38a8e6 100%);
}
.v34-tg-bc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(56,168,230,0.14);
flex-wrap: wrap;
}
.v34-tg-bc-head .ttl {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.v34-tg-bc-head .sub {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 400;
}
.v34-tg-bc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 16px;
}
@media (max-width: 880px) {
.v34-tg-bc-grid { grid-template-columns: 1fr; }
}
.v34-tg-bc-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
overflow: hidden;
}
.v34-tg-bc-section-head {
padding: 8px 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
border-bottom: 1px solid var(--border);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 700;
}
.v34-tg-bc-section-body { padding: 12px; }
.v34-tg-bc-section-body label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
font-size: 11px;
color: var(--text-muted);
}
.v34-tg-bc-section-body label > span {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 10px;
}
.v34-tg-bc-section-body label:last-child { margin-bottom: 0; }
.v34-tg-bc-section-body input[type="text"],
.v34-tg-bc-section-body input[type="number"],
.v34-tg-bc-section-body input[type="search"],
.v34-tg-bc-section-body input[type="datetime-local"],
.v34-tg-bc-section-body input[type="time"],
.v34-tg-bc-section-body textarea,
.v34-tg-bc-section-body select {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
-webkit-text-fill-color: var(--text-primary);
transition: border-color 150ms;
}
.v34-tg-bc-section-body input:focus,
.v34-tg-bc-section-body textarea:focus,
.v34-tg-bc-section-body select:focus { outline: none; border-color: #38a8e6; }
.v34-tg-bc-section-body select {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 26px;
cursor: pointer;
}
.v34-tg-bc-section-body select option { background: var(--bg-card); color: var(--text-primary); }
.v34-tg-bc-section-body textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.v34-tg-bc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v34-tg-bc-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.v34-tg-bc-row-2 label,
.v34-tg-bc-row-3 label { margin-bottom: 0; }
/* Multi-select ботов с «Все» */
.v34-tg-bc-bots-search {
width: 100%;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 11.5px;
font-family: var(--font-mono, monospace);
margin-bottom: 8px;
box-sizing: border-box;
-webkit-text-fill-color: var(--text-primary);
transition: border-color 150ms;
}
.v34-tg-bc-bots-search:focus { outline: none; border-color: #38a8e6; }
.v34-tg-bc-bots-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.v34-tg-bc-bots-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.v34-tg-bc-mini-btn {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 4px;
padding: 3px 8px;
color: var(--text-primary);
font-size: 10.5px;
cursor: pointer;
transition: border-color 120ms, color 120ms;
}
.v34-tg-bc-mini-btn:hover { border-color: #38a8e6; color: #fff; }
.v34-tg-bc-bots-counter {
font-size: 10.5px;
color: var(--text-muted);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-tg-bc-bots-counter b { color: #38a8e6; font-weight: 700; }
/* E3.redesign 2026-05-10: компактная сетка bot-chips (вместо вертикального списка) */
.v34-tg-bc-bots-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 6px;
max-height: 320px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
background: var(--bg-input);
padding: 8px;
}
.v34-tg-bc-bots-grid::-webkit-scrollbar { width: 6px; }
.v34-tg-bc-bots-grid::-webkit-scrollbar-thumb { background: rgba(56,168,230,0.3); border-radius: 3px; }
.v34-tg-bc-bot-chip {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 8px;
padding: 7px 8px;
border-radius: var(--r-sm, 6px);
cursor: pointer;
transition: background-color 120ms, border-color 120ms, transform 120ms;
font-size: 11px;
color: var(--text-primary);
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
user-select: none;
position: relative;
}
.v34-tg-bc-bot-chip:hover { background: rgba(56,168,230,0.06); border-color: rgba(56,168,230,0.3); transform: translateY(-1px); }
.v34-tg-bc-bot-chip.checked {
background: linear-gradient(135deg, rgba(56,168,230,0.18), rgba(29,127,199,0.10));
border-color: rgba(56,168,230,0.55);
}
.v34-tg-bc-bot-chip.inactive { opacity: 0.55; }
.v34-tg-bc-bot-chip input[type="checkbox"] { position: absolute; left: -9999px; }
.v34-tg-bc-bot-chip .avatar {
width: 28px; height: 28px;
border-radius: 6px;
background: linear-gradient(135deg, #38a8e6, #1d7fc7);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 10.5px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22);
flex-shrink: 0;
}
.v34-tg-bc-bot-chip:not(.checked) .avatar { filter: grayscale(0.4) brightness(0.85); }
.v34-tg-bc-bot-chip .info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.v34-tg-bc-bot-chip .info .tag {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
font-weight: 600;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-tg-bc-bot-chip .info .subs {
font-size: 9.5px;
color: var(--text-muted);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-tg-bc-bot-chip .check {
width: 18px; height: 18px;
border-radius: 5px;
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: transparent;
transition: background-color 120ms, border-color 120ms, color 120ms;
flex-shrink: 0;
}
.v34-tg-bc-bot-chip.checked .check {
background: linear-gradient(135deg, #38a8e6, #1d7fc7);
border-color: transparent;
color: #fff;
font-weight: 700;
}
/* Foot bar формы */
.v34-tg-bc-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid rgba(56,168,230,0.14);
background: rgba(0,0,0,0.18);
flex-wrap: wrap;
}
.v34-tg-bc-foot .summary {
font-size: 11px;
color: var(--text-muted);
flex: 1;
min-width: 200px;
}
.v34-tg-bc-foot .summary b { color: var(--text-primary); }
.v34-tg-bc-err {
color: #f87171;
font-size: 11px;
padding: 6px 10px;
background: rgba(239,68,68,0.1);
border-radius: 5px;
margin-top: 4px;
display: none;
}
.v34-tg-bc-err.shown { display: block; }
/* Tasks split */
.v34-tg-bc-tasks-group {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
margin-top: 14px;
overflow: hidden;
}
.v34-tg-bc-tasks-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
user-select: none;
transition: background-color 150ms;
flex-wrap: wrap;
}
.v34-tg-bc-tasks-head:hover { background: rgba(255,255,255,0.02); }
.v34-tg-bc-tasks-head .ttl {
font-size: 12.5px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.v34-tg-bc-tasks-head .ttl .badge {
background: rgba(56,168,230,0.16);
color: #6cc8f5;
border-radius: var(--r-pill, 999px);
padding: 1px 9px;
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-tg-bc-tasks-head .ttl .badge.muted { background: rgba(120,120,140,0.16); color: var(--text-muted); }
.v34-tg-bc-tasks-head .toggle {
color: var(--text-muted);
font-size: 14px;
transition: transform 200ms;
}
.v34-tg-bc-tasks-group.collapsed .toggle { transform: rotate(-90deg); }
.v34-tg-bc-tasks-body {
padding: 0 16px 14px;
border-top: 1px solid var(--border);
padding-top: 14px;
}
.v34-tg-bc-tasks-group.collapsed .v34-tg-bc-tasks-body { display: none; }
.v34-tg-bc-tasks-empty { text-align: center; padding: 18px; color: var(--text-muted); font-size: 11.5px; }
/* ============================================================ */
/* 2026-05-11: v34-bc-card — переписан task-card для broadcasts */
/* информативнее: progress, status badge, prio, bots, text */
/* ============================================================ */
.v34-bc-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 14px 16px;
margin-bottom: 8px;
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color 120ms, background 120ms;
position: relative;
}
.v34-bc-card:hover { border-color: var(--border-hover); }
/* Левая полоска цвета статуса */
.v34-bc-card::before {
content: '';
position: absolute;
left: 0; top: 14px; bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--text-muted);
opacity: 0.5;
}
.v34-bc-card-active::before { background: linear-gradient(180deg, #4ade80, #22c55e); opacity: 1; box-shadow: 0 0 8px rgba(34,197,94,0.4); }
.v34-bc-card-pending::before { background: linear-gradient(180deg, #fbbf24, #f59e0b); opacity: 0.8; }
.v34-bc-card-scheduled::before { background: linear-gradient(180deg, #7c5cff, #b794f6); opacity: 0.8; }
.v34-bc-card-done::before { background: var(--text-muted); opacity: 0.4; }
.v34-bc-card-err::before { background: linear-gradient(180deg, #ef4444, #dc2626); opacity: 1; }
.v34-bc-card-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.v34-bc-card-status-badge {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 12px;
line-height: 1.4;
}
.v34-bc-card-status-badge.active { background: rgba(34,197,94,0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.30); }
.v34-bc-card-status-badge.pending { background: rgba(251,191,36,0.16); color: #fbbf24; border: 1px solid rgba(251,191,36,0.30); }
.v34-bc-card-status-badge.scheduled { background: rgba(124,92,255,0.16); color: #b794f6; border: 1px solid rgba(124,92,255,0.30); }
.v34-bc-card-status-badge.done { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }
.v34-bc-card-status-badge.err { background: rgba(239,68,68,0.16); color: #ef4444; border: 1px solid rgba(239,68,68,0.30); }
.v34-bc-card-id {
font-family: var(--font-mono, monospace);
font-size: 11px;
color: var(--text-muted);
}
.v34-bc-prio {
font-size: 10.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
margin-left: auto;
}
.v34-bc-prio.urgent { background: rgba(239,68,68,0.16); color: #ef4444; border: 1px solid rgba(239,68,68,0.30); }
.v34-bc-prio.high { background: rgba(251,191,36,0.16); color: #fbbf24; border: 1px solid rgba(251,191,36,0.30); }
.v34-bc-card-text {
font-size: 13px;
color: var(--text-primary);
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
}
.v34-bc-card-bots {
font-size: 11.5px;
color: var(--text-secondary, #b8bcc8);
font-family: var(--font-mono, monospace);
}
.v34-bc-bots-more { color: var(--text-muted); }
.v34-bc-muted { color: var(--text-muted); }
.v34-bc-card-extras {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
line-height: 1.4;
}
/* Progress bar для active */
.v34-bc-progress {
margin: 4px 0 0;
}
.v34-bc-progress-bar {
height: 6px;
border-radius: 3px;
background: rgba(255,255,255,0.06);
overflow: hidden;
position: relative;
}
.v34-bc-progress-fill {
height: 100%;
background: linear-gradient(90deg, #4ade80, #22c55e);
border-radius: 3px;
transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 8px rgba(34,197,94,0.4);
}
.v34-bc-progress-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 4px;
font-family: var(--font-mono, monospace);
display: flex;
gap: 4px;
align-items: baseline;
flex-wrap: wrap;
}
.v34-bc-progress-meta .ok { color: var(--success, #22c55e); font-weight: 600; }
.v34-bc-progress-meta .err { color: var(--danger, #ef4444); }
.v34-bc-progress-meta strong { color: var(--text-primary); }
.v34-bc-stats {
font-size: 11.5px;
font-family: var(--font-mono, monospace);
color: var(--text-muted);
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.v34-bc-stats .ok { color: var(--success, #22c55e); }
.v34-bc-stats .err { color: var(--danger, #ef4444); }
.v34-bc-card-actions {
margin-top: 4px;
display: flex;
gap: 6px;
justify-content: flex-end;
flex-wrap: wrap;
}
.v34-bc-act-btn {
background: var(--bg-card);
border: 1px solid var(--border);
color: var(--text-secondary);
cursor: pointer;
border-radius: var(--r-sm, 6px);
padding: 5px 11px;
font-size: 11.5px;
font-family: inherit;
transition: all 120ms;
}
.v34-bc-act-btn:hover { border-color: var(--accent, #7c5cff); color: var(--accent-text, #b8a4ff); }
.v34-bc-act-btn.danger:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-bc-act-btn.primary {
background: linear-gradient(135deg, rgba(34,197,94,0.18), rgba(34,197,94,0.10));
border-color: rgba(34,197,94,0.40);
color: #4ade80;
font-weight: 600;
}
.v34-bc-act-btn.primary:hover {
background: linear-gradient(135deg, rgba(34,197,94,0.30), rgba(34,197,94,0.18));
border-color: rgba(34,197,94,0.60);
color: #6ee7a0;
}
/* 2026-05-11: pause-reason блок в карточке */
.v34-bc-pause-reason {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: rgba(251,191,36,0.08);
border: 1px solid rgba(251,191,36,0.24);
border-radius: 8px;
font-size: 11.5px;
line-height: 1.4;
}
.v34-bc-pause-ico {
font-size: 14px;
flex-shrink: 0;
}
.v34-bc-pause-text {
color: #fbbf24;
word-break: break-word;
min-width: 0;
}
/* 2026-05-11: error breakdown в карточке */
.v34-bc-err-breakdown {
padding: 6px 0;
border-top: 1px dashed rgba(239,68,68,0.20);
border-bottom: 1px dashed rgba(239,68,68,0.20);
display: flex;
flex-direction: column;
gap: 4px;
}
.v34-bc-err-pills {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.v34-bc-err-pill {
background: rgba(239,68,68,0.10);
color: #ef4444;
border: 1px solid rgba(239,68,68,0.24);
border-radius: 8px;
padding: 2px 8px;
font-size: 10.5px;
font-family: var(--font-mono, monospace);
font-weight: 600;
cursor: help;
}
.v34-bc-err-pill:hover {
border-color: rgba(239,68,68,0.50);
}
.v34-bc-err-last {
font-size: 10.5px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
line-height: 1.4;
overflow-wrap: anywhere;
}
.v34-bc-err-last code {
color: #ef4444;
background: rgba(239,68,68,0.08);
padding: 1px 4px;
border-radius: 3px;
}
/* Section header — расширенный счётчик с totals */
.v34-tg-bc-tasks-head .ttl .badge {
white-space: normal;
line-height: 1.6;
}
@media (max-width: 768px) {
.v34-bc-card { padding: 12px 14px; padding-left: 16px; }
.v34-bc-card-top { gap: 6px; }
.v34-bc-prio { margin-left: 0; }
.v34-bc-card-actions { justify-content: stretch; }
.v34-bc-act-btn { flex: 1; text-align: center; }
}
/* ============================================================ */
/* Д · 2026-05-10 — VK-рассылка inline form + tasks split */
/* namespace .v34-vk-bc-* (зеркалит .v34-tg-bc-* в VK-синем) */
/* ============================================================ */
.v34-vk-bc-form {
background: linear-gradient(135deg, rgba(74,118,168,0.10), rgba(81,129,184,0.04));
border: 1px solid rgba(74,118,168,0.22);
border-radius: var(--r-md, 10px);
margin-top: 14px;
overflow: hidden;
position: relative;
}
.v34-vk-bc-form::before {
content: "";
position: absolute; left: 0; top: 0; right: 0; height: 2px;
background: linear-gradient(90deg, #4a76a8 0%, #5181b8 50%, #4a76a8 100%);
}
.v34-vk-bc-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(74,118,168,0.16);
flex-wrap: wrap;
}
.v34-vk-bc-head .ttl {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.v34-vk-bc-head .sub {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 400;
}
.v34-vk-bc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 16px;
}
@media (max-width: 880px) {
.v34-vk-bc-grid { grid-template-columns: 1fr; }
}
.v34-vk-bc-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
overflow: hidden;
}
.v34-vk-bc-section-head {
padding: 8px 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
border-bottom: 1px solid var(--border);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 700;
}
.v34-vk-bc-section-body { padding: 12px; }
.v34-vk-bc-section-body label {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px;
font-size: 11px;
color: var(--text-muted);
}
.v34-vk-bc-section-body label > span {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 10px;
}
.v34-vk-bc-section-body label:last-child { margin-bottom: 0; }
.v34-vk-bc-section-body input[type="text"],
.v34-vk-bc-section-body input[type="number"],
.v34-vk-bc-section-body input[type="search"],
.v34-vk-bc-section-body input[type="datetime-local"],
.v34-vk-bc-section-body input[type="time"],
.v34-vk-bc-section-body textarea,
.v34-vk-bc-section-body select {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
-webkit-text-fill-color: var(--text-primary);
transition: border-color 150ms;
}
.v34-vk-bc-section-body input:focus,
.v34-vk-bc-section-body textarea:focus,
.v34-vk-bc-section-body select:focus { outline: none; border-color: #5181b8; }
.v34-vk-bc-section-body select {
appearance: none;
-webkit-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
background-position: calc(100% - 14px) calc(50% - 2px), calc(100% - 9px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 26px;
cursor: pointer;
}
.v34-vk-bc-section-body select option { background: var(--bg-card); color: var(--text-primary); }
.v34-vk-bc-section-body textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.v34-vk-bc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v34-vk-bc-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.v34-vk-bc-row-2 label,
.v34-vk-bc-row-3 label { margin-bottom: 0; }
/* Multi-select сообществ */
.v34-vk-bc-comms-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.v34-vk-bc-comms-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.v34-vk-bc-comms-counter {
font-size: 10.5px;
color: var(--text-muted);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-vk-bc-comms-counter b { color: #5181b8; font-weight: 700; }
.v34-vk-bc-comms-search {
width: 100%;
margin-bottom: 6px;
}
.v34-vk-bc-comms-list {
max-height: 220px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
background: var(--bg-input);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
}
.v34-vk-bc-comms-list::-webkit-scrollbar { width: 6px; }
.v34-vk-bc-comms-list::-webkit-scrollbar-thumb { background: rgba(81,129,184,0.32); border-radius: 3px; }
.v34-vk-bc-comm-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 4px;
cursor: pointer;
transition: background-color 120ms;
font-size: 11.5px;
color: var(--text-primary);
}
.v34-vk-bc-comm-row:hover { background: rgba(81,129,184,0.08); }
.v34-vk-bc-comm-row.checked { background: rgba(81,129,184,0.12); }
.v34-vk-bc-comm-row input[type="checkbox"] { accent-color: #5181b8; cursor: pointer; flex-shrink: 0; }
.v34-vk-bc-comm-row .comm-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 11px;
}
.v34-vk-bc-comm-row .comm-meta {
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
flex-shrink: 0;
}
.v34-vk-bc-comm-row .comm-meta.no-tok { color: #f87171; }
.v34-vk-bc-mini-btn {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 4px;
padding: 3px 8px;
color: var(--text-primary);
font-size: 10.5px;
cursor: pointer;
transition: border-color 120ms, color 120ms;
}
.v34-vk-bc-mini-btn:hover { border-color: #5181b8; color: #fff; }
/* Foot bar */
.v34-vk-bc-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid rgba(74,118,168,0.16);
background: rgba(0,0,0,0.18);
flex-wrap: wrap;
}
.v34-vk-bc-foot .summary {
font-size: 11px;
color: var(--text-muted);
flex: 1;
min-width: 200px;
}
.v34-vk-bc-foot .summary b { color: var(--text-primary); }
.v34-vk-bc-err {
color: #f87171;
font-size: 11px;
padding: 6px 10px;
background: rgba(239,68,68,0.1);
border-radius: 5px;
margin: 0 16px 14px;
display: none;
}
.v34-vk-bc-err.shown { display: block; }
/* Tasks split */
.v34-vk-bc-tasks-group {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
margin-top: 14px;
overflow: hidden;
}
.v34-vk-bc-tasks-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
cursor: pointer;
user-select: none;
transition: background-color 150ms;
flex-wrap: wrap;
}
.v34-vk-bc-tasks-head:hover { background: rgba(255,255,255,0.02); }
.v34-vk-bc-tasks-head .ttl {
font-size: 12.5px;
font-weight: 700;
color: var(--text-primary);
display: flex;
align-items: center;
gap: 8px;
}
.v34-vk-bc-tasks-head .ttl .badge {
background: rgba(81,129,184,0.16);
color: #6d9bc9;
border-radius: var(--r-pill, 999px);
padding: 1px 9px;
font-size: 10.5px;
font-weight: 700;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-vk-bc-tasks-head .ttl .badge.muted { background: rgba(120,120,140,0.16); color: var(--text-muted); }
.v34-vk-bc-tasks-head .toggle {
color: var(--text-muted);
font-size: 14px;
transition: transform 200ms;
}
.v34-vk-bc-tasks-group.collapsed .toggle { transform: rotate(-90deg); }
.v34-vk-bc-tasks-body {
padding: 0 16px 14px;
border-top: 1px solid var(--border);
padding-top: 14px;
}
.v34-vk-bc-tasks-group.collapsed .v34-vk-bc-tasks-body { display: none; }
.v34-vk-bc-tasks-empty { text-align: center; padding: 18px; color: var(--text-muted); font-size: 11.5px; }
/* E2.redesign 2026-05-10: collapsible-обёртка для TG-карт (Глобальные настройки и пр.) */
.v34-tg-collapse-wrap .v34-tg-collapse-head { cursor: pointer; user-select: none; transition: background-color 150ms; }
.v34-tg-collapse-wrap .v34-tg-collapse-head:hover { background: rgba(56,168,230,0.04); }
.v34-tg-collapse-wrap .v34-tg-collapse-toggle {
color: var(--text-muted);
font-size: 13px;
transition: transform 200ms;
margin-left: 6px;
}
.v34-tg-collapse-wrap.collapsed .v34-tg-collapse-toggle { transform: rotate(-90deg); }
.v34-tg-collapse-wrap.collapsed .v34-tg-collapse-body { display: none; }
.v34-tg-collapse-hint {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 400;
margin-left: 8px;
}
/* E2.redesign 2026-05-10: TG per-bot Config modal — namespace .v34-tg-cfg-* */
.v34-tg-cfg-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.v34-tg-cfg-overlay.open { opacity: 1; pointer-events: auto; }
.v34-tg-cfg-modal {
background: linear-gradient(180deg, var(--bg-card), var(--bg-input));
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
width: 100%;
max-width: 720px;
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
transform: scale(0.97);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v34-tg-cfg-overlay.open .v34-tg-cfg-modal { transform: scale(1); }
.v34-tg-cfg-head {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(56,168,230,0.10), rgba(29,127,199,0.04));
position: relative;
}
.v34-tg-cfg-head::before {
content: "";
position: absolute; left: 0; top: 0; right: 0; height: 2px;
background: linear-gradient(90deg, #38a8e6 0%, #1d7fc7 50%, #38a8e6 100%);
}
.v34-tg-cfg-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #38a8e6, #1d7fc7);
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.22);
flex-shrink: 0;
}
.v34-tg-cfg-title { flex: 1; min-width: 0; }
.v34-tg-cfg-title h3 {
margin: 0 0 4px;
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
}
.v34-tg-cfg-handle {
color: #6cc8f5;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-weight: 600;
}
.v34-tg-cfg-title p {
margin: 0;
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
}
.v34-tg-cfg-title b { color: var(--text-primary); }
.v34-tg-cfg-close {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: border-color 150ms, color 150ms;
}
.v34-tg-cfg-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-tg-cfg-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 14px;
}
.v34-tg-cfg-body::-webkit-scrollbar { width: 6px; }
.v34-tg-cfg-body::-webkit-scrollbar-thumb { background: rgba(56,168,230,0.3); border-radius: 3px; }
.v34-tg-cfg-section {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
overflow: hidden;
}
.v34-tg-cfg-section-head {
padding: 9px 14px;
background: linear-gradient(180deg, rgba(56,168,230,0.06), transparent);
border-bottom: 1px solid var(--border);
font-size: 11.5px;
font-weight: 700;
color: var(--text-primary);
}
.v34-tg-cfg-section-hint {
font-size: 10px;
color: var(--text-muted);
font-weight: 400;
margin-left: 6px;
text-transform: none;
letter-spacing: 0;
}
.v34-tg-cfg-grid {
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
}
.v34-tg-cfg-field {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: var(--text-muted);
margin: 0;
}
.v34-tg-cfg-field.full { grid-column: 1 / -1; }
.v34-tg-cfg-field .lab {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.v34-tg-cfg-field input[type="text"],
.v34-tg-cfg-field input[type="password"],
.v34-tg-cfg-field textarea {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
-webkit-text-fill-color: var(--text-primary);
transition: border-color 150ms;
}
.v34-tg-cfg-field input:focus,
.v34-tg-cfg-field textarea:focus { outline: none; border-color: #38a8e6; }
.v34-tg-cfg-field textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.v34-tg-cfg-inh-hint {
font-size: 10px;
color: var(--text-muted);
line-height: 1.4;
padding: 2px 0;
}
.v34-tg-cfg-inh-hint code {
background: rgba(56,168,230,0.08);
color: #6cc8f5;
padding: 1px 5px;
border-radius: 3px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10px;
}
.v34-tg-cfg-inh-empty {
font-size: 10px;
color: var(--text-muted);
font-style: italic;
opacity: 0.7;
}
.v34-tg-cfg-foot {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-top: 1px solid var(--border);
background: rgba(0,0,0,0.18);
flex-wrap: wrap;
}
.v34-tg-cfg-legend {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 200px;
flex-wrap: wrap;
}
.v34-tg-cfg-src {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: var(--r-pill, 999px);
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-tg-cfg-src.src-bot { background: rgba(56,168,230,0.16); color: #6cc8f5; }
.v34-tg-cfg-src.src-cat { background: rgba(124,92,255,0.16); color: #b8a4ff; }
.v34-tg-cfg-src.src-glb { background: rgba(34,197,94,0.16); color: #4ade80; }
.v34-tg-cfg-src.src-none { background: rgba(120,120,140,0.16); color: var(--text-muted); }
@media (max-width: 600px) {
.v34-tg-cfg-grid { grid-template-columns: 1fr; }
}
/* З.bugfix 2026-05-10: Health popovers — детализация для каждого индикатора. */
.v34-bento .v34-health-item {
background: rgba(255,255,255,0.02);
border: 1px solid transparent;
border-radius: var(--r-sm, 8px);
padding: 10px;
text-align: left;
cursor: pointer;
transition: border-color 150ms, background-color 150ms, transform 150ms;
font: inherit;
color: inherit;
display: flex;
align-items: center;
gap: 10px;
}
.v34-bento .v34-health-item:hover {
border-color: rgba(124,92,255,0.35);
background: rgba(124,92,255,0.04);
transform: translateY(-1px);
}
.v34-hp-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.v34-hp-overlay.open { opacity: 1; pointer-events: auto; }
.v34-hp-pop {
background: linear-gradient(180deg, var(--bg-card), var(--bg-input));
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
width: 100%;
max-width: 540px;
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
transform: scale(0.97);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v34-hp-overlay.open .v34-hp-pop { transform: scale(1); }
.v34-hp-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.v34-hp-title {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary);
}
.v34-hp-close {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 26px; height: 26px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.v34-hp-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-hp-body {
flex: 1;
overflow-y: auto;
padding: 14px 18px;
display: flex;
flex-direction: column;
gap: 10px;
}
.v34-hp-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 320px;
overflow-y: auto;
padding: 4px;
background: rgba(0,0,0,0.16);
border-radius: var(--r-sm, 6px);
}
.v34-hp-row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 4px;
background: var(--bg-card);
font-size: 11.5px;
}
.v34-hp-row .v34-hp-dot {
width: 18px; height: 18px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 10.5px;
color: #fff;
flex-shrink: 0;
}
.v34-hp-row.ok .v34-hp-dot { background: rgba(34,197,94,0.85); }
.v34-hp-row.warn .v34-hp-dot { background: rgba(255,176,0,0.85); }
.v34-hp-row.err .v34-hp-dot { background: rgba(239,68,68,0.85); }
.v34-hp-row .v34-hp-lbl { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.v34-hp-row .v34-hp-meta { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: 10.5px; }
.v34-hp-summary { font-size: 12px; color: var(--text-primary); padding: 8px 10px; background: rgba(124,92,255,0.06); border-radius: var(--r-sm, 6px); }
.v34-hp-summary b { color: #b8a4ff; }
.v34-hp-alert {
padding: 10px 12px;
border-radius: var(--r-sm, 6px);
font-size: 11.5px;
line-height: 1.45;
}
.v34-hp-alert.ok { background: rgba(34,197,94,0.10); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.v34-hp-alert.warn { background: rgba(255,176,0,0.10); color: #ffd166; border: 1px solid rgba(255,176,0,0.25); }
.v34-hp-alert.err { background: rgba(239,68,68,0.10); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.v34-hp-alert b { color: inherit; font-weight: 700; }
.v34-hp-alert a, .v34-hp-hint a { color: inherit; text-decoration: underline; cursor: pointer; }
.v34-hp-hint {
font-size: 10.5px;
color: var(--text-muted);
line-height: 1.5;
padding: 6px 10px;
}
.v34-hp-hint code {
background: rgba(255,255,255,0.04);
padding: 1px 5px;
border-radius: 3px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: #a8a8c8;
}
.v34-hp-empty { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.v34-hp-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.v34-hp-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: var(--r-sm, 6px);
background: var(--bg-input);
border: 1px solid var(--border);
color: var(--text-primary);
font-size: 11.5px;
cursor: pointer;
text-decoration: none;
font-weight: 600;
transition: border-color 150ms, color 150ms, background-color 150ms;
}
.v34-hp-btn:hover { border-color: rgba(124,92,255,0.5); color: #fff; background: rgba(124,92,255,0.12); }
.v34-hp-btn.primary { background: linear-gradient(135deg, #7c5cff, #b794f6); color: #fff; border-color: transparent; }
.v34-hp-btn.primary:hover { filter: brightness(1.12); }
/* И.bugfix 2026-05-10: Hot Posts threshold chips + Show-All overlay */
.v34-hot-thr-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 400;
margin-left: 8px;
}
.v34-hot-thr-label #v34HotThresholdLabel {
color: #b794f6;
font-weight: 700;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-hot-thr-chips {
display: flex;
gap: 4px;
margin-top: 8px;
flex-wrap: wrap;
}
.v34-hot-chip {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 4px 10px;
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: border-color 150ms, color 150ms, background-color 150ms;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-hot-chip:hover { color: var(--text-primary); border-color: rgba(124,92,255,0.5); }
.v34-hot-chip.active {
background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(183,148,246,0.10));
border-color: rgba(124,92,255,0.6);
color: #fff;
}
button.v34-card-action {
background: transparent;
border: 1px solid transparent;
cursor: pointer;
font: inherit;
color: var(--accent, #7c5cff);
transition: color 150ms;
}
button.v34-card-action:hover { color: #b794f6; text-decoration: underline; }
/* Hot-All overlay */
.v34-hot-all-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.v34-hot-all-overlay.open { opacity: 1; pointer-events: auto; }
.v34-hot-all-modal {
background: linear-gradient(180deg, var(--bg-card), var(--bg-input));
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
width: 100%;
max-width: 820px;
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
transform: scale(0.97);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v34-hot-all-overlay.open .v34-hot-all-modal { transform: scale(1); }
.v34-hot-all-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(183,148,246,0.04));
}
.v34-hot-all-head .ttl {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.v34-hot-all-head .sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.v34-hot-all-close {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.v34-hot-all-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-hot-all-filters {
display: flex;
gap: 12px;
align-items: flex-end;
padding: 14px 20px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.16);
flex-wrap: wrap;
}
.v34-hot-all-filters label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: var(--text-muted);
}
.v34-hot-all-filters label > span {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 10px;
}
.v34-hot-all-filters input,
.v34-hot-all-filters select {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
min-width: 140px;
}
.v34-hot-all-filters input:focus,
.v34-hot-all-filters select:focus { outline: none; border-color: rgba(124,92,255,0.6); }
.v34-hot-all-apply {
background: linear-gradient(135deg, #7c5cff, #b794f6);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: var(--r-sm, 6px);
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: filter 150ms;
}
.v34-hot-all-apply:hover { filter: brightness(1.12); }
.v34-hot-all-meta {
padding: 8px 20px;
font-size: 11px;
color: var(--text-muted);
background: rgba(0,0,0,0.08);
font-family: var(--font-mono, monospace);
}
.v34-hot-all-body {
flex: 1;
overflow-y: auto;
padding: 14px 20px;
display: flex;
flex-direction: column;
gap: 8px;
}
.v34-hot-all-row {
display: grid;
grid-template-columns: 36px 36px 1fr auto auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
transition: border-color 150ms, transform 150ms;
}
.v34-hot-all-row:hover {
border-color: rgba(124,92,255,0.4);
transform: translateX(2px);
}
.v34-hot-all-rank {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
}
.v34-hot-all-empty {
text-align: center;
padding: 36px 16px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.6;
}
/* К.bugfix 2026-05-10: Feed-Full overlay (Полный журнал) */
.v34-ff-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.v34-ff-overlay.open { opacity: 1; pointer-events: auto; }
.v34-ff-modal {
background: linear-gradient(180deg, var(--bg-card), var(--bg-input));
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
width: 100%;
max-width: 900px;
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,0.45);
transform: scale(0.97);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v34-ff-overlay.open .v34-ff-modal { transform: scale(1); }
.v34-ff-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(183,148,246,0.04));
}
.v34-ff-head .ttl {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.v34-ff-head .sub {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.5;
}
.v34-ff-head .sub code {
background: rgba(255,255,255,0.05);
padding: 1px 5px;
border-radius: 3px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-ff-close {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.v34-ff-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-ff-filters {
display: flex;
gap: 10px;
align-items: flex-end;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.16);
flex-wrap: wrap;
}
.v34-ff-filters label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
color: var(--text-muted);
}
.v34-ff-filters label > span {
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
font-size: 10px;
}
.v34-ff-filters input,
.v34-ff-filters select {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-mono, monospace);
min-width: 130px;
}
.v34-ff-filters input:focus,
.v34-ff-filters select:focus { outline: none; border-color: rgba(124,92,255,0.6); }
.v34-ff-apply {
background: linear-gradient(135deg, #7c5cff, #b794f6);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: var(--r-sm, 6px);
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: filter 150ms;
}
.v34-ff-apply:hover { filter: brightness(1.12); }
.v34-ff-meta {
padding: 8px 20px;
font-size: 11px;
color: var(--text-muted);
background: rgba(0,0,0,0.08);
font-family: var(--font-mono, monospace);
}
.v34-ff-body {
flex: 1;
overflow-y: auto;
padding: 8px 20px;
}
.v34-ff-empty {
text-align: center;
padding: 36px 16px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.6;
}
.v34-ff-row {
display: grid;
grid-template-columns: auto 26px 1fr auto auto;
align-items: start;
gap: 10px;
padding: 9px 12px;
border-radius: var(--r-sm, 6px);
transition: background-color 120ms;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.v34-ff-row:hover { background: rgba(124,92,255,0.04); }
.v34-ff-time {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
color: var(--text-muted);
white-space: nowrap;
line-height: 1.4;
}
.v34-ff-ico {
width: 22px; height: 22px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.v34-ff-ico.ok { background: rgba(34,197,94,0.85); }
.v34-ff-ico.info { background: rgba(124,92,255,0.85); }
.v34-ff-ico.viral { background: linear-gradient(135deg, #f97316, #ef4444); }
.v34-ff-ico.err { background: rgba(239,68,68,0.85); }
.v34-ff-text { min-width: 0; }
.v34-ff-t1 { font-size: 12px; color: var(--text-primary); line-height: 1.4; }
.v34-ff-t2 { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.v34-ff-meta-pill {
background: rgba(255,255,255,0.05);
color: var(--text-muted);
padding: 1px 6px;
border-radius: 3px;
font-size: 10px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-ff-kind {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
color: rgba(124,92,255,0.7);
background: rgba(124,92,255,0.06);
padding: 1px 6px;
border-radius: 3px;
align-self: center;
}
/* ===== Фаза О-1а (2026-05-10): cock-detail modal — детальная карточка поста/сторис ===== */
/* Кликабельно ТОЛЬКО имя сообщества — не весь ряд (правка 2026-05-10). */
.v34-cock-name { cursor: pointer; transition: color 120ms; }
.v34-cock-name:hover { color: rgba(183,148,246,0.95); }
.v34-cock-link {
color: rgba(125,211,252,0.85);
text-decoration: none;
border-bottom: 1px dashed rgba(125,211,252,0.4);
transition: color 120ms, border-color 120ms;
}
.v34-cock-link:hover { color: #7dd3fc; border-bottom-color: #7dd3fc; }
.v34-cdt-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 1100;
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
overflow-y: auto;
}
.v34-cdt-overlay.open { opacity: 1; pointer-events: auto; }
.v34-cdt-modal {
background: linear-gradient(180deg, var(--bg-card), var(--bg-input));
border: 1px solid var(--border);
border-radius: var(--r-md, 12px);
width: 100%;
max-width: 980px;
max-height: calc(100vh - 48px);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
transform: scale(0.97);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.v34-cdt-overlay.open .v34-cdt-modal { transform: scale(1); }
.v34-cdt-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(125,211,252,0.04));
}
.v34-cdt-head-l { min-width: 0; flex: 1; }
.v34-cdt-ttl {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.4;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-cdt-sub { font-size: 11px; }
.v34-cdt-vk {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: rgba(125,211,252,0.85);
text-decoration: none;
font-size: 11px;
}
.v34-cdt-vk:hover { color: #7dd3fc; }
.v34-cdt-close {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.v34-cdt-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-cdt-meta {
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.16);
}
.v34-cdt-meta-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.v34-cdt-meta-l {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11.5px;
color: var(--text-secondary, #b8bcc8);
line-height: 1.5;
}
.v34-cdt-mlbl {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
font-weight: 600;
}
.v34-cdt-meta-r {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.v34-cdt-pill {
background: rgba(124,92,255,0.10);
border: 1px solid rgba(124,92,255,0.25);
border-radius: 14px;
padding: 4px 10px;
font-size: 11px;
color: var(--text-secondary, #b8bcc8);
}
.v34-cdt-pill b { color: var(--text-primary); font-weight: 700; }
.v34-cdt-period {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 12px 20px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.10);
}
.v34-cdt-period-loading { color: var(--text-muted); font-size: 11px; padding: 4px 0; }
.v34-cdt-chip {
background: var(--bg-input);
color: var(--text-secondary, #b8bcc8);
border: 1px solid var(--border);
border-radius: 14px;
padding: 5px 11px;
font-size: 11px;
cursor: pointer;
transition: border-color 120ms, color 120ms, background 120ms;
}
.v34-cdt-chip:hover { border-color: rgba(124,92,255,0.5); color: var(--text-primary); }
.v34-cdt-chip.active {
background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(183,148,246,0.18));
border-color: rgba(124,92,255,0.6);
color: var(--text-primary);
font-weight: 600;
}
.v34-cdt-charts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid var(--border);
}
.v34-cdt-chart-box {
background: rgba(0,0,0,0.20);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 12px 14px 10px;
height: 320px;
display: flex;
flex-direction: column;
min-width: 0; /* критично для grid + Chart.js, иначе canvas overflow */
}
.v34-cdt-chart-box canvas { flex: 1; min-height: 0; min-width: 0; }
.v34-cdt-modal { max-width: 1180px; }
/* Адаптив: на узких экранах графики в столбик и компактнее. */
@media (max-width: 920px) {
.v34-cdt-charts { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
.v34-cdt-chart-box { height: 280px; }
.v34-cdt-overlay { padding: 12px; }
}
@media (max-width: 560px) {
.v34-cdt-overlay { padding: 4px; }
.v34-cdt-modal { border-radius: 8px; max-height: calc(100vh - 8px); }
.v34-cdt-charts { padding: 10px; gap: 8px; }
.v34-cdt-chart-box { height: 220px; padding: 8px 10px 6px; }
.v34-cdt-head { padding: 12px 14px; }
.v34-cdt-meta { padding: 10px 14px; }
.v34-cdt-period { padding: 10px 14px; }
.v34-cdt-table-wrap { padding: 12px 14px; }
.v34-cdt-tr { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 4px; padding: 6px 8px; font-size: 10.5px; }
.v34-cdt-table[data-cdt-stories="1"] .v34-cdt-tr,
.v34-cdt-tr.v34-cdt-stories { grid-template-columns: 1.4fr repeat(4, 1fr); }
}
/* --- bugfix 2026-05-11: cdt-modal scroll ---
На mobile весь modal должен скроллиться как одна страница (а не только история мониторинга).
Базовый layout: head/meta/period/charts фиксированы + .v34-cdt-table-wrap flex:1 overflow-y:auto.
На mobile: убираем внутренний scroll table-wrap, modal сам становится scroll-контейнером. */
@media (max-width: 920px) {
.v34-cdt-overlay {
align-items: flex-start;
}
.v34-cdt-modal {
overflow-y: auto !important;
overflow-x: hidden;
max-height: 100vh !important;
height: auto;
-webkit-overflow-scrolling: touch;
}
.v34-cdt-head {
position: sticky;
top: 0;
z-index: 2;
background: linear-gradient(180deg, rgba(20,20,30,0.96), rgba(20,20,30,0.92));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.v34-cdt-table-wrap {
flex: 0 0 auto !important;
overflow-y: visible !important;
max-height: none !important;
}
}
.v34-cdt-chart-ttl {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 6px;
}
/* canvas-rule перенесён выше с добавлением min-width: 0 (исправление overflow на mobile). */
.v34-cdt-table-wrap {
flex: 1;
overflow-y: auto;
padding: 14px 20px 18px;
}
.v34-cdt-table-ttl {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 8px;
}
.v34-cdt-table { display: flex; flex-direction: column; gap: 1px; }
.v34-cdt-tr {
display: grid;
grid-template-columns: 1.6fr repeat(5, 1fr);
gap: 8px;
padding: 8px 10px;
background: rgba(255,255,255,0.02);
border-radius: 4px;
font-size: 11.5px;
color: var(--text-secondary, #b8bcc8);
}
.v34-cdt-tr.v34-cdt-th {
background: rgba(124,92,255,0.08);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
font-weight: 600;
}
.v34-cdt-tr .r { text-align: right; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.v34-cdt-tr .gpos { color: #4ade80; font-weight: 600; }
.v34-cdt-tr .gwarm { color: #fbbf24; }
.v34-cdt-tr .gcold { color: var(--text-muted); }
.v34-cdt-empty {
text-align: center;
padding: 32px 16px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.6;
}
/* Сторис: 5 колонок (нет reposts/comments). */
.v34-cdt-tr.v34-cdt-stories,
.v34-cdt-table[data-cdt-stories="1"] .v34-cdt-tr {
grid-template-columns: 1.6fr repeat(4, 1fr);
}
/* ===== Фаза Ч (2026-05-10): VK Боты — date inputs + sources search ===== */
.v34-vk-date {
width: 130px;
padding: 6px 8px;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 11px;
font-family: var(--font-mono, monospace);
}
.v34-vk-date:focus { outline: none; border-color: rgba(124,92,255,0.55); }
.v34-vk-sources-search-row {
margin-bottom: 12px;
padding: 0;
}
/* ===== Фаза Ц (2026-05-10): page-comments — внутренние вкладки ===== */
#page-comments .v34-cmt-tabs {
display: flex;
gap: 4px;
padding: 12px 16px 0;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.10);
margin-bottom: 12px;
flex-wrap: wrap;
}
.v34-cmt-tab {
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
padding: 8px 14px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
border-radius: 6px 6px 0 0;
transition: color 120ms, background 120ms, border-color 120ms;
}
.v34-cmt-tab:hover { color: var(--text-primary); background: rgba(124,92,255,0.04); }
.v34-cmt-tab.active {
background: var(--bg-card);
color: var(--text-primary);
border-color: var(--border);
border-bottom-color: var(--bg-card);
margin-bottom: -1px;
}
.v34-cmt-tab-pane[hidden] { display: none; }
.v34-cmt-hist-list {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 8px;
}
.v34-cmt-hist-row {
display: grid;
grid-template-columns: 26px 130px 180px 1fr;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.025);
border-radius: 4px;
font-size: 11.5px;
align-items: start;
color: var(--text-secondary, #b8bcc8);
}
.v34-cmt-hist-ico {
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(124,92,255,0.18);
color: rgba(124,92,255,0.95);
text-align: center;
line-height: 22px;
font-size: 11px;
font-weight: 700;
}
.v34-cmt-hist-time {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
color: var(--text-muted);
}
.v34-cmt-hist-kind {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10px;
color: rgba(124,92,255,0.85);
background: rgba(124,92,255,0.06);
padding: 1px 8px;
border-radius: 3px;
align-self: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.v34-cmt-hist-text { min-width: 0; }
.v34-cmt-hist-text .t1 { color: var(--text-primary); font-size: 12px; line-height: 1.4; font-weight: 500; }
.v34-cmt-hist-text .t2 { color: var(--text-muted); font-size: 10.5px; line-height: 1.4; margin-top: 2px; }
/* ===== bugfix 2026-05-10: page-comments tasks pane — v34 look для legacy markup ===== */
#page-comments .v34-cmt-tab-pane {
padding: 16px 20px 24px;
}
#page-comments .v34-cmt-tab-pane .page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
padding: 0;
border-bottom: none;
}
#page-comments .v34-cmt-tab-pane .page-header h2 {
font-family: var(--font-display, 'Onest', sans-serif);
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.01em;
}
#page-comments .v34-cmt-tab-pane .page-header p {
font-size: 12px;
color: var(--text-muted);
margin: 4px 0 0;
line-height: 1.5;
}
#page-comments .v34-cmt-tab-pane .card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg, 18px);
padding: var(--s-5, 20px);
margin-bottom: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
#page-comments .v34-cmt-tab-pane .card-title {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 14px;
}
#page-comments .v34-cmt-tab-pane .form-group {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 14px;
}
#page-comments .v34-cmt-tab-pane .form-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
#page-comments .v34-cmt-tab-pane .form-input,
#page-comments .v34-cmt-tab-pane .form-textarea {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-md, 14px);
padding: 10px 12px;
font-size: 13px;
color: var(--text-primary);
font-family: inherit;
width: 100%;
box-sizing: border-box;
}
#page-comments .v34-cmt-tab-pane .form-textarea {
min-height: 90px;
resize: vertical;
font-family: var(--font-mono, monospace);
font-size: 12px;
line-height: 1.5;
}
#page-comments .v34-cmt-tab-pane .form-input:focus,
#page-comments .v34-cmt-tab-pane .form-textarea:focus {
outline: none;
border-color: var(--accent, #7c5cff);
}
#page-comments .v34-cmt-tab-pane .btn {
border-radius: var(--r-md, 14px);
padding: 9px 16px;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text-secondary);
font-family: inherit;
transition: all 120ms;
}
#page-comments .v34-cmt-tab-pane .btn:hover {
color: var(--text-primary);
border-color: var(--border-hover);
}
#page-comments .v34-cmt-tab-pane .btn-primary {
background: linear-gradient(135deg, var(--accent, #7c5cff), #9d7cff);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 14px var(--accent-glow, rgba(124,92,255,0.30));
}
#page-comments .v34-cmt-tab-pane .btn-primary:hover {
box-shadow: 0 6px 20px var(--accent-glow, rgba(124,92,255,0.50));
color: #fff;
}
#page-comments .v34-cmt-tab-pane .btn-outline {
background: transparent;
border-color: var(--border);
}
#page-comments .v34-cmt-tab-pane .btn-danger {
background: rgba(239,68,68,0.10);
color: #ef4444;
border-color: rgba(239,68,68,0.30);
}
#page-comments .v34-cmt-tab-pane .btn-danger:hover {
background: rgba(239,68,68,0.18);
color: #ef4444;
}
#page-comments .v34-cmt-tab-pane .btn-sm {
padding: 5px 10px !important;
font-size: 11px !important;
}
#page-comments .v34-cmt-tab-pane select.form-input {
cursor: pointer;
}
/* Mobile: page-header в tasks pane становится столбцом, поля грид-столбцов схлопываются */
@media (max-width: 720px) {
#page-comments .v34-cmt-tab-pane { padding: 12px 14px 18px; }
#page-comments .v34-cmt-tab-pane .page-header { flex-direction: column; align-items: flex-start; }
#page-comments .v34-cmt-tab-pane .page-header h2 { font-size: 18px; }
#page-comments .v34-cmt-tab-pane .card { padding: 14px; border-radius: 14px; }
/* Inline grid 1fr 1fr 1fr → одна колонка для полей задачи */
#page-comments .v34-cmt-tab-pane .card > div[style*="grid-template-columns:1fr 1fr 1fr"],
#page-comments .v34-cmt-tab-pane .card > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
#page-comments .v34-cmt-tab-pane .card > div[style*="grid-template-columns:1fr 1fr"],
#page-comments .v34-cmt-tab-pane .card > div[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
#page-comments .v34-cmt-tabs { padding: 10px 10px 0; gap: 2px; }
.v34-cmt-tab { padding: 7px 10px; font-size: 11.5px; }
/* В мобиле строки в карточке задачи перестают наезжать */
#page-comments .v34-cmt-tab-pane .card > div[style*="display:flex"][style*="flex-wrap:wrap"] {
flex-direction: column !important;
align-items: flex-start !important;
}
#page-comments .v34-cmt-tab-pane .card > div[style*="display:flex"] [style*="margin-left:auto"] {
margin-left: 0 !important;
}
}
/* В мобиле hist-row (история) тоже перестраивается в столбец */
@media (max-width: 720px) {
.v34-cmt-hist-row {
grid-template-columns: 24px 1fr;
grid-template-rows: auto auto;
gap: 6px 10px;
}
.v34-cmt-hist-time { grid-column: 2; font-size: 10px; }
.v34-cmt-hist-kind { grid-column: 2; grid-row: 2; justify-self: start; }
.v34-cmt-hist-text { grid-column: 1 / -1; }
}
/* ===== Фаза Х (2026-05-10): topbar — clickable «Главное» + urgent bell ===== */
.v34-crumb-home {
background: transparent;
border: none;
padding: 0;
color: var(--text-muted);
font: inherit;
cursor: pointer;
transition: color 120ms;
}
.v34-crumb-home:hover { color: var(--text-primary); }
.v34-tb-btn-icon { position: relative; }
.v34-tb-btn-icon.has-urgent {
border-color: rgba(239,68,68,0.55) !important;
color: #ef4444;
animation: v34UrgentPulse 1.6s ease-in-out infinite;
}
@keyframes v34UrgentPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.30); }
50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
.v34-tb-bell-badge {
position: absolute;
top: -4px; right: -4px;
background: linear-gradient(135deg, #ef4444, #f97316);
color: #fff;
border-radius: 10px;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 2px 6px rgba(239,68,68,0.45);
}
.v34-urgent-popover {
position: fixed;
z-index: 1200;
width: 380px;
max-width: calc(100vw - 16px);
background: linear-gradient(180deg, var(--bg-card), var(--bg-input));
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: 0 18px 48px rgba(0,0,0,0.55);
overflow: hidden;
animation: v34UrgPopIn 180ms cubic-bezier(0.16,1,0.3,1);
}
@keyframes v34UrgPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.v34-urg-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(249,115,22,0.04));
}
.v34-urg-ttl {
font-weight: 600;
color: var(--text-primary);
font-size: 13px;
display: flex;
gap: 8px;
align-items: center;
}
.v34-urg-count {
background: rgba(239,68,68,0.18);
color: #ef4444;
border: 1px solid rgba(239,68,68,0.4);
padding: 1px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
}
.v34-urg-close {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
width: 26px; height: 26px;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
display: flex; align-items: center; justify-content: center;
}
.v34-urg-close:hover { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); }
.v34-urg-list { padding: 6px 8px; max-height: 360px; overflow-y: auto; }
.v34-urg-empty {
padding: 24px 16px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.6;
text-align: center;
}
.v34-urg-row {
display: grid;
grid-template-columns: 70px 1fr 28px;
gap: 8px;
padding: 8px 10px;
align-items: start;
border-radius: 6px;
transition: background 120ms;
}
.v34-urg-row + .v34-urg-row { border-top: 1px solid rgba(255,255,255,0.04); }
.v34-urg-row:hover { background: rgba(239,68,68,0.04); }
.v34-urg-row.v34-urg-read { opacity: 0.45; }
.v34-urg-meta {
display: flex;
flex-direction: column;
gap: 1px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 10px;
color: var(--text-muted);
}
.v34-urg-text { min-width: 0; }
.v34-urg-t1 { font-size: 12px; color: var(--text-primary); font-weight: 500; line-height: 1.4; }
.v34-urg-t2 { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.v34-urg-kind {
display: inline-block;
margin-top: 4px;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: 9.5px;
color: rgba(239,68,68,0.85);
background: rgba(239,68,68,0.10);
padding: 1px 6px;
border-radius: 3px;
}
.v34-urg-mark {
background: rgba(34,197,94,0.10);
border: 1px solid rgba(34,197,94,0.40);
color: #4ade80;
width: 24px;
height: 24px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
line-height: 22px;
text-align: center;
padding: 0;
transition: background 120ms;
}
.v34-urg-mark:hover { background: rgba(34,197,94,0.22); }
.v34-urg-foot {
padding: 10px 14px;
border-top: 1px solid var(--border);
background: rgba(0,0,0,0.18);
text-align: center;
}
.v34-urg-foot .v34-an-btn-primary { width: 100%; }
.v34-urg-journal-modal { max-width: 720px; }
.v34-urg-journal-tools {
display: flex;
gap: 8px;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.v34-urg-journal-body {
padding: 8px 12px 14px;
overflow-y: auto;
flex: 1;
max-height: 60vh;
}
/* ===== Фаза У (2026-05-10): кликабельные строки горящих постов ===== */
.v34-bento .v34-hot-row[data-bento-hot-pkey],
.v34-hot-all-row[data-bento-hot-pkey] { cursor: pointer; }
.v34-bento .v34-hot-row[data-bento-hot-pkey]:hover { background: rgba(124,92,255,0.06); }
.v34-hot-all-row[data-bento-hot-pkey]:hover { background: rgba(124,92,255,0.06); }
/* Promote-кнопка не должна выделяться cursor parent'а — её собственный pointer есть. */
.v34-bento .v34-hot-row .v34-promo-btn,
.v34-hot-all-row .v34-promo-btn { cursor: pointer; }
/* ===== bugfix 2026-05-10: hot-all modal — стили для строк/кнопок ===== */
/* Без этого элементы внутри overlay рендерятся «голыми» (белые кнопки, нечитаемый текст). */
.v34-hot-all-row .v34-hot-thumb {
width: 36px; height: 36px;
border-radius: 8px;
background: linear-gradient(135deg, #7c5cff, #b794f6);
display: grid; place-items: center;
font-family: var(--font-display, 'Onest', sans-serif);
font-weight: 700;
color: #fff; font-size: 12px;
flex-shrink: 0;
}
.v34-hot-all-row .v34-hot-info { min-width: 0; }
.v34-hot-all-row .v34-hot-name {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-hot-all-row .v34-hot-meta {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
font-family: var(--font-mono, monospace);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-hot-all-row .v34-hot-stat { text-align: right; }
.v34-hot-all-row .v34-hot-v {
font-family: var(--font-mono, monospace);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.v34-hot-all-row .v34-hot-delta {
font-size: 10.5px;
color: var(--success, #22c55e);
font-family: var(--font-mono, monospace);
margin-top: 2px;
}
.v34-hot-all-row .v34-promo-btn {
background: linear-gradient(135deg, #7c5cff, #b794f6);
border: 1px solid transparent;
color: #fff;
padding: 7px 12px;
border-radius: var(--r-sm, 8px);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: filter 150ms, transform 150ms;
white-space: nowrap;
}
.v34-hot-all-row .v34-promo-btn:hover {
filter: brightness(1.12);
transform: translateY(-1px);
}
/* ===== Фаза С (2026-05-10): real photo/video thumbnails в результатах поиска ===== */
.v34-search-card-attach-real {
display: flex;
gap: 6px;
margin: 8px 0;
}
.v34-search-card-thumb-img {
width: 84px;
height: 84px;
border-radius: 8px;
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.04);
border: 1px solid var(--border);
position: relative;
flex-shrink: 0;
}
.v34-search-card-thumb-img.v34-search-card-thumb-more {
background: linear-gradient(135deg, rgba(124,92,255,0.20), rgba(183,148,246,0.10));
display: flex;
align-items: center;
justify-content: center;
}
.v34-search-card-thumb-more .badge {
background: rgba(0,0,0,0.55);
color: #fff;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.v34-search-card-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
background: rgba(0,0,0,0.30);
border-radius: 8px;
text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* ===== Фаза Р-4г (2026-05-10): Community rating redesign ===== */
.v34-cs-rating-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; padding: 12px 0; }
.v34-cs-rt-card {
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.10));
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
padding: 12px;
}
.v34-cs-rt-card.v34-cs-rt-low { border-color: rgba(239,68,68,0.45); }
.v34-cs-rt-card.v34-cs-rt-warn { border-color: rgba(251,191,36,0.40); }
.v34-cs-rt-head {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.v34-cs-rt-badge {
width: 36px; height: 36px;
background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(183,148,246,0.18));
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
color: rgba(183,148,246,0.95);
font-size: 13px;
flex-shrink: 0;
}
.v34-cs-rt-name { flex: 1; min-width: 0; }
.v34-cs-rt-link {
color: var(--text-primary);
font-weight: 600;
font-size: 13px;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.v34-cs-rt-link:hover { color: rgba(183,148,246,0.95); }
.v34-cs-rt-sub {
display: flex;
gap: 6px;
align-items: center;
margin-top: 4px;
font-size: 11px;
color: var(--text-muted);
}
.v34-cs-rt-viral {
color: #f97316;
background: rgba(249,115,22,0.12);
border: 1px solid rgba(249,115,22,0.3);
padding: 1px 6px;
border-radius: 8px;
font-size: 10px;
font-weight: 600;
}
.v34-cs-rt-bar {
height: 5px;
background: rgba(255,255,255,0.06);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.v34-cs-rt-bar-fill {
height: 100%;
background: linear-gradient(90deg, #4ade80, #22d3ee);
transition: width 200ms ease;
}
.v34-cs-rt-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.v34-cs-rt-stats .s { display: flex; flex-direction: column; gap: 2px; }
.v34-cs-rt-stats .v {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: var(--text-primary);
font-weight: 700;
font-size: 13px;
}
.v34-cs-rt-stats .l {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.v34-cs-rt-pools {
display: flex;
gap: 8px;
flex-wrap: wrap;
font-size: 10px;
color: var(--text-muted);
}
.v34-cs-rt-pools span {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
padding: 2px 7px;
border-radius: 8px;
}
.v34-cs-rt-pools b {
color: var(--text-primary);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
margin-right: 2px;
}
/* ===== Фаза Р-4в (2026-05-10): Manual posting viz ===== */
.v34-cs-mviz { padding: 4px 0; max-height: 480px; overflow-y: auto; }
.v34-cs-mviz-head, .v34-cs-mviz-row {
display: grid;
grid-template-columns: 38px 1fr 70px 90px 90px;
gap: 10px;
padding: 6px 12px;
border-radius: 4px;
align-items: center;
font-size: 11.5px;
}
.v34-cs-mviz-head {
background: rgba(124,92,255,0.08);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
font-weight: 600;
}
.v34-cs-mviz-row { background: rgba(255,255,255,0.02); margin-bottom: 1px; color: var(--text-secondary, #b8bcc8); }
.v34-cs-mviz-row .rank {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
color: rgba(124,92,255,0.85);
font-weight: 700;
}
.v34-cs-mviz-row .name {
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-cs-mviz-row .r { text-align: right; font-family: var(--font-mono, monospace); }
.v34-cs-mviz-row.v34-cs-pu-low {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
}
/* ===== Фаза Р-4б (2026-05-10): Per-community pool usage list ===== */
.v34-cs-pu-toolbar {
display: flex;
gap: 8px;
align-items: center;
padding: 10px 0;
flex-wrap: wrap;
}
.v34-cs-pu-list {
display: flex;
flex-direction: column;
gap: 1px;
margin-top: 6px;
}
.v34-cs-pu-row {
display: grid;
grid-template-columns: 2.4fr 0.7fr 0.7fr 0.7fr 0.7fr 0.9fr 0.7fr;
gap: 10px;
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border-radius: 4px;
font-size: 11.5px;
align-items: center;
color: var(--text-secondary, #b8bcc8);
}
.v34-cs-pu-row.v34-cs-pu-th {
background: rgba(124,92,255,0.08);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
font-weight: 600;
}
.v34-cs-pu-row .r {
text-align: right;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-cs-pu-row.v34-cs-pu-low {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.25);
}
.v34-cs-pu-row.v34-cs-pu-warn {
background: rgba(251,191,36,0.06);
border: 1px solid rgba(251,191,36,0.18);
}
.v34-cs-pu-name {
color: var(--text-primary);
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: center;
}
.v34-cs-pu-row .v-viral { color: #f97316; }
.v34-cs-pu-row .v-strong { color: #4ade80; }
.v34-cs-pu-row .v-mid { color: #93c5fd; }
.v34-cs-pu-row .v-new { color: #b794f6; }
.v34-cs-pu-row .v-total { color: var(--text-primary); font-weight: 600; }
.v34-cs-pu-row.v34-cs-pu-low .v-total { color: #ef4444; font-weight: 700; }
.v34-cs-pu-viral {
margin-left: 8px;
padding: 1px 6px;
border-radius: 3px;
font-size: 9.5px;
background: rgba(249,115,22,0.15);
color: #f97316;
border: 1px solid rgba(249,115,22,0.3);
}
/* ===== Фаза Р-4а (2026-05-10): Smart-schedule preview modal ===== */
.v34-ssm-modal { max-width: 880px; }
.v34-ssm-body {
flex: 1;
overflow-y: auto;
padding: 12px 20px;
}
.v34-ssm-tools {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.v34-ssm-comm {
background: rgba(255,255,255,0.025);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 8px;
}
.v34-ssm-comm-head {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
align-items: center;
}
.v34-ssm-comm-name {
color: var(--text-primary);
font-weight: 600;
font-size: 12.5px;
}
.v34-ssm-comm-ct {
color: var(--text-muted);
font-size: 10.5px;
padding: 2px 8px;
background: rgba(124,92,255,0.10);
border-radius: 10px;
}
.v34-ssm-row {
display: grid;
grid-template-columns: 18px 80px 1fr 24px 1fr 80px;
gap: 10px;
align-items: center;
padding: 6px 8px;
border-radius: 4px;
font-size: 11.5px;
color: var(--text-secondary, #b8bcc8);
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-ssm-row:hover { background: rgba(255,255,255,0.025); }
.v34-ssm-cb {
width: 16px; height: 16px;
border: 2px solid var(--border);
border-radius: 3px;
cursor: pointer;
transition: background 120ms, border-color 120ms;
}
.v34-ssm-cb.on {
background: linear-gradient(135deg, #7c5cff, #b794f6);
border-color: rgba(124,92,255,0.95);
}
.v34-ssm-slot {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
color: var(--text-muted);
}
.v34-ssm-cur, .v34-ssm-prop {
display: flex;
flex-direction: column;
gap: 1px;
font-size: 11px;
}
.v34-ssm-cur .muted, .v34-ssm-prop .muted { color: var(--text-muted); font-size: 10px; }
.v34-ssm-prop { color: var(--text-primary); }
.v34-ssm-arrow {
color: rgba(124,92,255,0.7);
font-weight: 700;
text-align: center;
}
.v34-ssm-imp {
text-align: right;
font-weight: 700;
font-size: 12px;
}
.v34-ssm-imp.imp-big { color: #4ade80; }
.v34-ssm-imp.imp-mid { color: #fbbf24; }
.v34-ssm-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-top: 1px solid var(--border);
background: rgba(0,0,0,0.18);
gap: 12px;
}
.v34-ssm-foot-l { color: var(--text-muted); font-size: 11px; }
.v34-ssm-foot-r { display: flex; gap: 8px; }
/* ===== Фаза П-3в (2026-05-10): Doors content donors redesign ===== */
.v34-don-filters { gap: 8px; flex-wrap: wrap; }
.v34-don-search,
.v34-don-sort {
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--r-sm, 6px);
padding: 7px 10px;
font-size: 12px;
min-width: 180px;
}
.v34-don-search:focus, .v34-don-sort:focus { outline: none; border-color: rgba(124,92,255,0.6); }
.v34-don-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 12px;
padding: 12px 0;
}
.v34-don-card {
display: flex;
gap: 12px;
padding: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(0,0,0,0.10));
border: 1px solid var(--border);
border-radius: var(--r-md, 10px);
cursor: pointer;
transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.v34-don-card:hover {
border-color: rgba(124,92,255,0.4);
transform: translateY(-1px);
box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.v34-don-card.selected {
border-color: rgba(124,92,255,0.85);
background: linear-gradient(180deg, rgba(124,92,255,0.10), rgba(0,0,0,0.10));
box-shadow: 0 0 0 2px rgba(124,92,255,0.25);
}
.v34-don-card-l {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.v34-don-cb {
width: 18px; height: 18px;
border: 2px solid var(--border);
border-radius: 4px;
transition: background 120ms, border-color 120ms;
}
.v34-don-cb.on {
background: linear-gradient(135deg, #7c5cff, #b794f6);
border-color: rgba(124,92,255,0.95);
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.20);
}
.v34-don-thumb {
width: 44px; height: 44px;
background: linear-gradient(135deg, rgba(124,92,255,0.25), rgba(183,148,246,0.18));
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 14px;
color: rgba(183,148,246,0.95);
}
.v34-don-card-c { flex: 1; min-width: 0; }
.v34-don-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.v34-don-name {
color: var(--text-primary);
font-weight: 600;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.v34-don-tier {
flex-shrink: 0;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.v34-don-tier-A { background: rgba(34,197,94,0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.35); }
.v34-don-tier-B { background: rgba(125,211,252,0.16); color: #7dd3fc; border: 1px solid rgba(125,211,252,0.35); }
.v34-don-tier-C { background: rgba(251,191,36,0.16); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35); }
.v34-don-tier-D { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }
.v34-don-stats {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-bottom: 8px;
}
.v34-don-stat {
display: flex;
flex-direction: column;
gap: 1px;
font-size: 10px;
color: var(--text-muted);
}
.v34-don-stat .lbl {
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 9px;
}
.v34-don-stat .val {
color: var(--text-primary);
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.v34-don-qs-bar {
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 3px;
overflow: hidden;
margin-bottom: 4px;
}
.v34-don-qs-fill { height: 100%; transition: width 200ms ease; }
.v34-don-qs-A { background: linear-gradient(90deg, #22c55e, #4ade80); }
.v34-don-qs-B { background: linear-gradient(90deg, #7dd3fc, #93c5fd); }
.v34-don-qs-C { background: linear-gradient(90deg, #fbbf24, #fde047); }
.v34-don-qs-D { background: rgba(255,255,255,0.18); }
.v34-don-qs-label { font-size: 10.5px; color: var(--text-muted); }
.v34-don-vklink {
color: rgba(125,211,252,0.85);
font-family: var(--font-mono, monospace);
text-decoration: none;
}
.v34-don-vklink:hover { color: #7dd3fc; }
.v34-don-actbar {
position: sticky;
bottom: 12px;
margin-top: 12px;
background: linear-gradient(135deg, rgba(124,92,255,0.18), rgba(183,148,246,0.10));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(124,92,255,0.45);
border-radius: var(--r-md, 10px);
padding: 10px 16px;
display: none;
align-items: center;
justify-content: space-between;
gap: 12px;
z-index: 50;
}
.v34-don-actbar.show { display: flex; }
.v34-don-actbar-l { color: var(--text-primary); font-size: 13px; }
.v34-don-actbar-l strong { color: var(--text-primary); font-weight: 700; font-size: 16px; margin-right: 4px; }
.v34-don-actbar-r { display: flex; gap: 8px; }
.v34-an-btn-primary {
background: linear-gradient(135deg, #7c5cff, #b794f6);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: var(--r-sm, 6px);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: opacity 120ms;
}
.v34-an-btn-primary:hover { opacity: 0.92; }
/* ===== Фаза П-3д (2026-05-10): AdStories analytics list ===== */
.v34-as-list { display: flex; flex-direction: column; gap: 1px; }
.v34-as-row {
display: grid;
grid-template-columns: 2.4fr 0.6fr 0.9fr 0.9fr 0.7fr 0.7fr 1fr;
gap: 12px;
padding: 10px 14px;
background: rgba(255,255,255,0.025);
border-radius: 4px;
font-size: 12px;
color: var(--text-secondary, #b8bcc8);
align-items: center;
}
.v34-as-row.v34-as-th {
background: rgba(124,92,255,0.08);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 10px;
font-weight: 600;
}
.v34-as-row .r { text-align: right; font-family: var(--font-mono, 'JetBrains Mono', monospace); }
.v34-as-cr { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v34-as-rank {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-weight: 700;
color: rgba(124,92,255,0.85);
font-size: 11px;
flex-shrink: 0;
}
.v34-as-cr-info { min-width: 0; flex: 1; }
.v34-as-cr-file {
color: var(--text-primary);
font-weight: 600;
font-size: 12.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v34-as-cr-folder {
color: var(--text-muted);
font-size: 10.5px;
margin-top: 2px;
}
.as-ctr-pos { color: #4ade80; }
.as-ctr-warm { color: #fbbf24; }
.as-ctr-cold { color: var(--text-muted); }
.v34-as-period { font-size: 10.5px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
/* ===== Фаза О-1б (2026-05-10): Edited-бейдж в Top-100 ===== */
.v34-cock-edited {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(34,197,94,0.20), rgba(34,197,94,0.10));
border: 1px solid rgba(34,197,94,0.45);
color: #4ade80;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: 1px;
}
/* ===== TZ R7 (2026-09-28): статус наблюдения поста и страницы таблицы Охвата ===== */
.v34-cock-track { font-size: 10.5px; white-space: nowrap; }
.v34-cock-track.stale { color: var(--warning); }
.v34-cock-track.closed { color: var(--text-muted); }
.v34-cock-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 0 4px;
}
.v34-cock-pager[hidden] { display: none; }
.v34-cock-pager .v34-an-chip[disabled] { opacity: 0.4; cursor: default; }
.v34-cock-pager-info { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono, monospace); }
/* =====================================================================
bugfix 2026-05-10: comprehensive mobile responsive (#4-#11)
Все правки сгруппированы здесь для лёгкого аудита.
Брейкпоинты: 900 (планшет), 720 (мобильный landscape), 480 (мобильный portrait).
===================================================================== */
/* ----- #4a: topbar urgent popover держится в пределах экрана ----- */
@media (max-width: 480px) {
.v34-urgent-popover {
position: fixed !important;
top: 60px !important;
left: 8px !important;
right: 8px !important;
width: auto !important;
max-width: none !important;
}
.v34-urg-list { max-height: calc(100vh - 240px); }
.v34-urg-row { grid-template-columns: 1fr; gap: 6px; }
.v34-urg-meta { flex-direction: row; gap: 8px; }
.v34-urg-mark { align-self: flex-start; }
}
/* ----- #4c: hot-all-modal mobile ----- */
@media (max-width: 720px) {
.v34-hot-all-overlay { padding: 10px; }
.v34-hot-all-modal { max-width: 100%; max-height: calc(100vh - 20px); }
.v34-hot-all-head { padding: 12px 14px; }
.v34-hot-all-head .ttl { font-size: 14px; }
.v34-hot-all-filters {
gap: 8px;
padding: 10px 14px;
flex-direction: column;
align-items: stretch;
}
.v34-hot-all-filters label { width: 100%; }
.v34-hot-all-filters input,
.v34-hot-all-filters select { min-width: 0; width: 100%; }
.v34-hot-all-apply { width: 100%; padding: 10px; }
.v34-hot-all-meta { padding: 6px 14px; font-size: 10.5px; }
.v34-hot-all-body { padding: 10px 12px; }
.v34-hot-all-row {
grid-template-columns: 28px 32px 1fr;
grid-template-rows: auto auto auto;
gap: 6px 8px;
padding: 10px;
}
.v34-hot-all-row .v34-hot-all-rank { grid-column: 1; grid-row: 1; align-self: center; }
.v34-hot-all-row .v34-hot-thumb { grid-column: 2; grid-row: 1; }
.v34-hot-all-row .v34-hot-info { grid-column: 3; grid-row: 1; min-width: 0; }
.v34-hot-all-row .v34-hot-stat {
grid-column: 1 / -1; grid-row: 2;
text-align: left;
display: flex; gap: 12px; align-items: baseline;
padding-left: 4px;
}
.v34-hot-all-row .v34-promo-btn {
grid-column: 1 / -1; grid-row: 3;
width: 100%;
padding: 8px;
}
}
/* ----- #4d: full journal (feed-full) modal mobile ----- */
@media (max-width: 720px) {
.v34-ff-overlay { padding: 10px; }
.v34-ff-modal { max-width: 100%; max-height: calc(100vh - 20px); }
.v34-ff-head { padding: 12px 14px; }
.v34-ff-head .ttl { font-size: 14px; }
.v34-ff-filters {
gap: 8px;
padding: 10px 14px;
flex-direction: column;
align-items: stretch;
}
.v34-ff-filters label { width: 100%; }
.v34-ff-filters input,
.v34-ff-filters select { min-width: 0; width: 100%; }
.v34-ff-apply { width: 100%; padding: 10px; }
.v34-ff-meta { padding: 6px 14px; font-size: 10.5px; }
.v34-ff-body { padding: 6px 10px; }
.v34-ff-row {
grid-template-columns: 24px 1fr;
grid-template-rows: auto auto auto;
gap: 4px 10px;
padding: 10px;
}
.v34-ff-time { grid-column: 1 / -1; grid-row: 1; font-size: 10px; }
.v34-ff-ico { grid-column: 1; grid-row: 2; }
.v34-ff-text { grid-column: 2; grid-row: 2; }
.v34-ff-meta-pill,
.v34-ff-kind {
grid-column: 1 / -1; grid-row: 3;
align-self: start;
font-size: 9.5px;
justify-self: start;
}
}
/* ----- #5a, 5b: Reach (mon-content/mon-ads) — table-head + extras ----
Filters/cock-dt/action-bar — см. объединённое правило @768px / @480px выше. */
@media (max-width: 720px) {
.v34-cock .v34-cock-table-head {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.v34-cock .v34-cock-table-tools { flex-wrap: wrap; }
.v34-cock .v34-cock-search { width: 100%; box-sizing: border-box; }
}
/* ----- #6a: Heatmap fits viewport ----- */
@media (max-width: 900px) {
.v34-an-hm-grid {
font-size: 9px;
}
.v34-an-hm-grid .v34-an-hm-cell {
min-width: auto;
}
}
@media (max-width: 720px) {
/* Уменьшаем cell-размер чтобы помещаться */
.v34-an-hm-card { padding: 12px; }
.v34-an-hm-grid { font-size: 8px; }
}
/* ----- #6b, 6c: Donors filters/list/action mobile ----- */
@media (max-width: 720px) {
.v34-don-filters {
flex-direction: column;
align-items: stretch !important;
gap: 8px !important;
overflow-x: visible !important;
flex-wrap: wrap !important;
}
.v34-don-filters > * {
width: 100%;
flex-shrink: 1 !important;
}
.v34-don-filters input,
.v34-don-filters select { min-width: 0; box-sizing: border-box; }
/* Sticky action bar для multi-select snap-on-bottom */
.v34-don-action-bar {
position: sticky !important;
bottom: 8px;
z-index: 5;
}
.v34-don-grid,
[data-an-pane="donors"] .v34-an-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.v34-don-card,
[data-an-pane="donors"] .v34-an-card {
padding: 14px !important;
}
}
/* ----- #6d: AdStories pane mobile ----- */
@media (max-width: 720px) {
[data-an-pane="adstories"] .v34-an-card { padding: 14px; }
.v34-as-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.v34-as-row > * {
text-align: left !important;
justify-self: stretch !important;
}
}
/* ----- #7a: Content schedule preview mobile ----- */
@media (max-width: 720px) {
.v34-cs-shell { padding: 12px; }
.v34-cs-pane[data-cs-pane="schedule"] {
overflow-x: auto;
}
.v34-cs-preview-grid,
.v34-cs-schedule-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* ----- #7b: Pools list (v34CsPuList) mobile ----- */
@media (max-width: 720px) {
.v34-cs-pu-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v34-cs-pu-row {
grid-template-columns: minmax(120px, 1fr) repeat(4, 60px) 70px !important;
font-size: 11px;
gap: 6px !important;
}
.v34-cs-pu-row > * { padding: 6px 4px !important; }
.v34-cs-pu-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ----- #7c: Manual posting target communities mobile ----- */
@media (max-width: 720px) {
.v34-cs-mviz-grid,
.v34-cs-mviz-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.v34-cs-mviz-card { padding: 12px !important; }
}
/* ----- #7d: Rating filters/list mobile ----- */
@media (max-width: 720px) {
.v34-cs-rt-filters,
[data-cs-pane="rating"] .v34-an-filters {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
overflow-x: visible !important;
}
.v34-cs-rt-filters > *,
[data-cs-pane="rating"] .v34-an-filters > * {
width: 100% !important;
}
.v34-cs-rt-list,
[data-cs-pane="rating"] .v34-an-card {
padding: 12px !important;
}
.v34-cs-rt-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
}
/* ----- #8a: Ads post-slot-tabs vertical stack on mobile ----- */
@media (max-width: 720px) {
.v34-post-slot-tabs {
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
gap: 4px !important;
}
.v34-post-slot-tabs > * {
flex: 1 1 calc(50% - 4px);
min-width: 0;
text-align: center;
font-size: 11.5px !important;
padding: 8px 6px !important;
}
}
/* ----- #8b: Ads task history mobile ----- */
@media (max-width: 720px) {
.v34-post-task-row,
.v34-post-history-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
padding: 12px !important;
}
.v34-post-history-list .meta { flex-wrap: wrap; gap: 6px; font-size: 10.5px; }
}
/* ----- #9a: Search rail no horizontal scroll on tablet ----- */
@media (max-width: 720px) {
.v34-search-rail {
position: static !important;
flex-direction: row;
overflow-x: auto;
flex-wrap: nowrap;
gap: 6px;
padding: 8px 0;
-webkit-overflow-scrolling: touch;
}
.v34-search-rail-section {
position: sticky; left: 0;
background: var(--bg);
font-size: 10px;
padding: 4px 8px;
}
.v34-search-rail > * { flex-shrink: 0; }
/* Грид результатов в одну колонку */
.v34-search-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* ----- #9b: Search task header compact mobile ----- */
@media (max-width: 720px) {
.v34-search-task-header { padding: 12px; }
.v34-search-task-info h2 { font-size: 16px; }
.v34-search-task-info .v34-search-task-meta { font-size: 11px; margin-top: 4px; }
.v34-search-task-row { gap: 8px; }
.v34-search-task-actions {
width: 100%;
flex-wrap: wrap;
}
.v34-search-task-actions > * {
flex: 1 1 calc(50% - 4px);
min-width: 0;
font-size: 11.5px;
padding: 7px 8px;
text-align: center;
}
.v34-search-task-params {
gap: 4px;
margin-top: 8px;
}
.v34-search-task-params .v34-search-chip { font-size: 10.5px; padding: 4px 8px; }
}
/* ----- #10: Stories mobile ----- */
@media (max-width: 720px) {
.v34-st-shell,
[id="page-stories"] { padding: 12px; }
.v34-st-card { padding: 14px !important; }
.v34-st-grid,
.v34-st-tasks,
.v34-st-prev-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.v34-st-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.v34-st-stats {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.v34-st-stats { grid-template-columns: 1fr !important; }
}
/* ----- #11: Communities mobile ----- */
@media (max-width: 720px) {
.v34-cm-shell,
[id="page-communities"] { padding: 12px; }
.v34-cm-card,
.v34-cm-row {
padding: 12px !important;
}
.v34-cm-grid,
.v34-cm-list {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.v34-cm-row {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.v34-cm-filters {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.v34-cm-filters > * { width: 100% !important; }
.v34-cm-stats {
grid-template-columns: repeat(2, 1fr) !important;
}
.v34-cm-add-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
}
@media (max-width: 480px) {
.v34-cm-stats { grid-template-columns: 1fr !important; }
}
/* ============================================================
2026-05-11: mobile fixes for Analytics / Content / Ads / Communities
- все сетки 24h heatmap → горизонтальный скролл (cells остаются читаемыми)
- Donors/AdStories → 1 col card grid
- Content cs-card schedule/manual → horizontal scroll или 1 col
- Ads post-slotbar → вертикально, history-row stack
- Communities cm-row + cm-body → реструктуризация
============================================================ */
@media (max-width: 768px) {
/* --- 1. ANALYTICS --- */
/* Heatmap: вместо сжатия — гор. скролл с min-width.
На 360px viewport 24 cells × 12px + label 60 = 348px, слишком тесно.
Делаем min-width 540px и горизонтальный скролл внутри карточки. */
.v34-an-hm-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: var(--s-3, 12px) !important;
}
.v34-an-hm-grid {
min-width: 540px;
font-size: 9px;
gap: 2px;
}
.v34-an-hm-grid .day { font-size: 10px; }
.v34-an-hm-grid .hour-head { font-size: 9px; }
.v34-an-hm-legend { padding: 0 8px; flex-wrap: wrap; }
/* Donors card grid → 1 col, card padding tighter */
.v34-don-grid {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.v34-don-card {
padding: 12px !important;
}
.v34-don-name { font-size: 13px; }
.v34-don-filters {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.v34-don-filters > * { width: 100%; }
.v34-don-search,
.v34-don-sort { min-width: 0 !important; }
/* AdStories list — стак вертикально */
[data-an-pane="adstories"] .v34-an-card { padding: 12px; }
[data-an-pane="adstories"] .v34-as-list,
[data-an-pane="adstories"] .v34-an-donor-list { display: flex; flex-direction: column; gap: 4px; }
[data-an-pane="adstories"] .v34-an-donor-row,
[data-an-pane="adstories"] .v34-as-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
padding: 10px 8px !important;
border-bottom: 1px solid var(--border);
}
[data-an-pane="adstories"] .v34-an-donor-row .v,
[data-an-pane="adstories"] .v34-an-donor-row .delta,
[data-an-pane="adstories"] .v34-as-row > * { text-align: left !important; }
/* Engagement (если кто-то его вернёт) — 2 cols */
.v34-an-eng-grid { grid-template-columns: repeat(2, 1fr) !important; }
.v34-an-eng-card .v { font-size: 22px; }
/* an-row-2 в столбик уже сделан в @900px — здесь его подкрепляем */
.v34-an-row-2 { grid-template-columns: 1fr !important; gap: 14px !important; }
/* --- 2. CONTENT SCHEDULE --- */
/* Schedule heatmap: аналогично analytics — горизонтальный скролл */
.v34-cs-pane[data-cs-pane="schedule"] .v34-cs-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 12px !important;
}
.v34-cs-sched-grid {
min-width: 540px;
font-size: 8px;
gap: 2px;
}
.v34-cs-sched-grid .day { font-size: 10px; }
.v34-cs-sched-grid .hour-head { font-size: 8px; }
.v34-cs-legend {
flex-wrap: wrap;
gap: 8px;
font-size: 10.5px;
}
.v34-cs-pool-foot {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.v34-cs-pool-foot .v34-cs-btn { width: 100%; }
/* --- 3. CONTENT MANUAL --- */
/* Manual form: source select + date в 1 col */
.v34-cs-manual-form {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.v34-cs-manual-foot {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.v34-cs-manual-foot .v34-cs-btn { width: 100%; }
/* «Целевые сообщества · превью раздачи» список */
.v34-cs-mviz {
display: flex;
flex-direction: column;
gap: 6px;
}
.v34-cs-mviz-row,
.v34-cs-mviz > * {
grid-template-columns: 1fr !important;
gap: 6px !important;
padding: 10px !important;
}
.v34-cs-mviz .name { font-size: 13px; word-break: break-word; }
.v34-cs-mviz .meta { font-size: 11px; }
/* --- 4a. ADS — post-slotbar вертикально --- */
.v34-post-slotbar {
position: static; /* убираем sticky чтобы tabs не залипали */
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: 12px 14px !important;
background: var(--bg-card);
border-bottom: 1px solid var(--border);
}
.v34-post-slot-tabs {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 6px;
background: transparent;
border: none;
padding: 0;
}
.v34-post-slot-tab {
padding: 10px 12px !important;
font-size: 12px;
justify-content: center;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm, 8px);
}
.v34-post-slot-tab .count {
background: transparent;
padding: 0;
}
.v34-post-slotbar > :not(.v34-post-slot-tabs) {
width: 100%;
}
/* --- 4b. ADS — history modal rows --- */
.v34-post-hist-modal-ov .v34-cl-modal { max-width: 100% !important; width: calc(100% - 12px) !important; }
.v34-post-hist-modal-ov .v34-cl-m-body { padding: 12px 14px !important; }
.v34-post-hist-modal-ov .v34-cl-m-head { padding: 14px 16px !important; }
.v34-post-hist-modal-ov .v34-cl-m-foot { padding: 12px 14px !important; }
.v34-post-hist-row {
grid-template-columns: 1fr !important;
gap: 8px !important;
padding: 12px !important;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 8px;
}
.v34-post-hist-status { justify-self: start; }
.v34-post-hist-actions {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 6px;
width: 100%;
}
.v34-post-hist-actions button { width: 100%; padding: 8px !important; }
/* --- 5. COMMUNITIES — полная переработка mobile --- */
.v34-cm-head { padding: 14px !important; }
.v34-cm h1 { font-size: 20px; }
.v34-cm-title-row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.v34-cm-summary {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 8px !important;
width: 100%;
}
.v34-cm-sumitem { text-align: center; }
.v34-cm-sumitem .v { font-size: 18px; }
.v34-cm-filters {
overflow-x: auto;
flex-wrap: nowrap !important;
margin: 0 -14px;
padding: 0 14px 4px;
-webkit-overflow-scrolling: touch;
}
.v34-cm-filters > * { flex-shrink: 0; }
.v34-cm-search {
width: auto !important;
min-width: 220px;
flex: 1 1 220px;
}
/* Body: одна колонка (detail-card уходит ниже списка) */
.v34-cm-body {
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 14px !important;
}
/* Detail-card: не sticky на mobile */
.v34-cm-detail {
position: static !important;
top: auto !important;
}
/* Row: card-layout — checkbox+thumb+name на верх, остальное (tier/count/more) на низ */
.v34-cm-row {
grid-template-columns: 24px 40px 1fr auto !important;
grid-template-rows: auto auto !important;
gap: 6px 10px !important;
padding: 12px !important;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 12px;
margin-bottom: 6px;
}
.v34-cm-row > .checkbox {
grid-row: 1; grid-column: 1;
align-self: center;
}
.v34-cm-row > .thumb {
grid-row: 1; grid-column: 2;
}
.v34-cm-row > .info {
grid-row: 1; grid-column: 3 / -1;
min-width: 0;
}
.v34-cm-row > .v {
grid-row: 2; grid-column: 1 / 3;
text-align: left !important;
font-size: 11.5px;
}
.v34-cm-row > .tier {
grid-row: 2; grid-column: 3;
justify-self: start !important;
}
.v34-cm-row > .more {
grid-row: 2; grid-column: 4;
justify-self: end;
}
.v34-cm-row .name { font-size: 13.5px; }
.v34-cm-row .info .meta { font-size: 10.5px; }
/* Card-head padding tighter */
.v34-cm-card-head { padding: 12px 14px !important; }
.v34-cm-list { padding: 8px !important; }
/* Detail-card стак сверху-вниз */
.v34-cm-dp-card { padding: 14px !important; }
.v34-cm-dp-stats { grid-template-columns: repeat(2, 1fr) !important; }
/* Action bar для bulk-выделения сообществ */
.v34-cm-action-bar,
body .v34-cm-action-bar,
body.collapsed .v34-cm-action-bar {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
transform: none !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px !important;
border-radius: 14px !important;
}
.v34-cm-action-bar.show,
body .v34-cm-action-bar.show,
body.collapsed .v34-cm-action-bar.show {
transform: translateY(0) !important;
}
}
@media (max-width: 480px) {
/* Heatmap: ещё компактнее но всё ещё гор. скролл */
.v34-an-hm-grid { min-width: 460px; }
.v34-cs-sched-grid { min-width: 460px; }
/* Communities summary — в столбец */
.v34-cm-summary { grid-template-columns: 1fr 1fr 1fr !important; }
.v34-cm-sumitem .v { font-size: 16px; }
/* Slot-tabs в 1 col */
.v34-post-slot-tabs { grid-template-columns: 1fr !important; }
/* Donors thumb меньше */
.v34-don-thumb { width: 36px !important; height: 36px !important; }
}
/* =====================================================================
M08 Settings — bento-hub + editor refresh (v34.74, 2026-05-13)
===================================================================== */
/* BENTO HUB — главный экран Settings: 9 карточек-конфигов с key-метриками. */
.v34-set-hub {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px 0 24px;
max-width: 1100px;
}
/* 2026-05-13 (v34.77): фикс specificity — авторский display:grid перебивал [hidden] из user-agent CSS,
из-за чего hub оставался видимым при открытии editor'а. Теперь оба контейнера корректно скрываются. */
.v34-set-hub[hidden],
.v34-set-editor[hidden] {
display: none !important;
}
.v34-set-hub-card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 16px 18px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
overflow: hidden;
min-height: 132px;
}
.v34-set-hub-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, var(--hub-grad-from, rgba(124,92,255,0.06)) 0%, transparent 60%);
pointer-events: none;
opacity: 0.9;
}
.v34-set-hub-card:hover {
transform: translateY(-2px);
border-color: rgba(124,92,255,0.45);
box-shadow: 0 14px 32px rgba(124,92,255,0.18);
}
.v34-set-hub-card:active { transform: translateY(0); }
.v34-set-hub-card--wide { grid-column: span 2; }
/* Цвет-акцент per category — задаёт ::before градиент через CSS var. */
.v34-set-hub-card--sec { --hub-grad-from: rgba(239,68,68,0.10); }
.v34-set-hub-card--ai { --hub-grad-from: rgba(124,92,255,0.10); }
.v34-set-hub-card--tg { --hub-grad-from: rgba(56,189,248,0.10); }
.v34-set-hub-card--tiers { --hub-grad-from: rgba(251,191,36,0.10); }
.v34-set-hub-card--viral { --hub-grad-from: rgba(244,114,182,0.12); }
.v34-set-hub-card--vloop { --hub-grad-from: rgba(236,72,153,0.12); }
.v34-set-hub-card--pools { --hub-grad-from: rgba(34,197,94,0.10); }
.v34-set-hub-card--proxies { --hub-grad-from: rgba(99,102,241,0.10); }
.v34-set-hub-card--tokens { --hub-grad-from: rgba(245,158,11,0.10); }
.v34-set-hub-card--ui { --hub-grad-from: rgba(20,184,166,0.10); }
.v34-set-hub-top {
position: relative;
display: flex;
gap: 12px;
align-items: flex-start;
}
.v34-set-hub-ico {
flex-shrink: 0;
width: 38px;
height: 38px;
display: grid;
place-items: center;
font-size: 20px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
border-radius: 10px;
}
.v34-set-hub-titles {
min-width: 0;
}
.v34-set-hub-title {
font-size: 15px;
font-weight: 600;
color: var(--text);
line-height: 1.25;
margin-bottom: 2px;
}
.v34-set-hub-desc {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.35;
}
.v34-set-hub-bottom {
position: relative;
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.v34-set-hub-status {
font-size: 10.5px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
background: rgba(255,255,255,0.05);
color: var(--text-muted);
border: 1px solid var(--border);
}
.v34-set-hub-status.ok { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.30); }
.v34-set-hub-status.warn { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.30); }
.v34-set-hub-status.empty { background: rgba(239,68,68,0.10); color: #ef4444; border-color: rgba(239,68,68,0.28); }
.v34-set-hub-status.info { background: rgba(56,189,248,0.12); color: #38bdf8; border-color: rgba(56,189,248,0.30); }
.v34-set-hub-metric {
font-size: 11.5px;
color: var(--text-muted);
font-family: var(--font-mono, monospace);
overflow-wrap: anywhere;
text-align: right;
flex: 1 1 auto;
}
.v34-set-hub-metric b {
color: var(--text);
font-weight: 700;
}
/* EDITOR — открывается по клику на карточку (hub скрывается). */
.v34-set-editor {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 12px;
animation: v34-set-editor-fadein 0.18s ease;
}
@keyframes v34-set-editor-fadein {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.v34-set-editor-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 12px;
position: sticky;
top: 0;
z-index: 5;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.v34-set-back {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text);
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
transition: background 0.15s ease, border-color 0.15s ease;
}
.v34-set-back:hover {
background: rgba(124,92,255,0.10);
border-color: rgba(124,92,255,0.45);
}
.v34-set-editor-crumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.v34-set-crumb-ico {
font-size: 16px;
}
.v34-set-crumb-title {
font-weight: 600;
color: var(--text);
}
/* SAVEBAR — улучшения визуала (gradient-stripe + blur + icon). */
.v34-set-savebar {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.v34-set-savebar-stripe {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #7c5cff 0%, #b794f6 100%);
border-radius: 0 2px 2px 0;
}
.v34-set-savebar-ico {
font-size: 16px;
color: #fbbf24;
margin-right: 2px;
}
/* RESPONSIVE: 2 cols на 900-1200, 1 col < 700 */
@media (max-width: 1100px) {
.v34-set-hub { grid-template-columns: repeat(2, 1fr); }
.v34-set-hub-card--wide { grid-column: span 2; }
}
@media (max-width: 700px) {
.v34-set-hub { grid-template-columns: 1fr; gap: 12px; padding: 12px 0 16px; }
.v34-set-hub-card--wide { grid-column: span 1; }
.v34-set-hub-card { min-height: auto; }
}
/* =====================================================================
AI Phase 2 — UI редактор провайдеров и use cases (v34.85, 2026-05-15)
===================================================================== */
/* Master toggle (большой переключатель внизу секции «Мастер-выключатель») */
.v34-set-ai-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 12.5px;
color: var(--text-secondary);
}
.v34-set-ai-toggle.big {
padding: 10px 14px;
background: rgba(124,92,255,0.06);
border: 1px solid rgba(124,92,255,0.20);
border-radius: 12px;
font-size: 14px;
color: var(--text);
}
.v34-set-ai-toggle input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }
.v34-set-ai-toggle.big b { font-weight: 700; color: #7c5cff; }
/* Provider card */
.v34-set-ai-provider {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
margin: 12px 0;
}
.v34-set-ai-provider-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.v34-set-ai-provider-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
flex-wrap: wrap;
}
.v34-set-ai-provider-title .ico { font-size: 18px; }
.v34-set-ai-provider-title strong { color: var(--text); }
/* Proxy block внутри провайдера */
.v34-set-ai-proxy-block {
background: rgba(255,255,255,0.02);
border: 1px dashed var(--border);
border-radius: 10px;
padding: 10px 12px;
margin: 10px 0;
}
.v34-set-ai-proxy-head {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 8px;
font-weight: 600;
}
.v34-set-ai-proxy-row {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 12px;
}
.v34-set-ai-proxy-row code {
color: var(--text);
background: rgba(124,92,255,0.10);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-mono, monospace);
}
.v34-set-ai-proxy-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
.v34-set-ai-proxy-edit-row {
display: grid;
grid-template-columns: 1.4fr 80px 1.3fr 1fr 28px;
gap: 6px;
}
.v34-set-ai-proxy-edit-row input {
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 5px 8px;
font-size: 11.5px;
font-family: var(--font-mono, monospace);
width: 100%;
box-sizing: border-box;
}
.v34-set-ai-proxy-edit-row input:focus {
outline: none;
border-color: var(--accent, #7c5cff);
}
/* Test row */
.v34-set-ai-test-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
.v34-set-ai-test-row select {
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 8px;
font-size: 12px;
min-width: 200px;
cursor: pointer;
}
.v34-set-ai-test-row select:focus { outline: none; border-color: var(--accent, #7c5cff); }
.v34-set-ai-test-result {
font-size: 11px;
font-family: var(--font-mono, monospace);
color: var(--text-muted);
}
.v34-set-ai-test-result.ok { color: #22c55e; }
.v34-set-ai-test-result.warn { color: #fbbf24; }
/* Use case block */
.v34-set-ai-usecase {
background: rgba(255,255,255,0.02);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
margin: 10px 0;
}
.v34-set-ai-uc-head {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 10px;
}
.v34-set-ai-uc-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text);
}
.v34-set-ai-uc-title .ico { font-size: 16px; }
.v34-set-ai-uc-desc { font-size: 11.5px; color: var(--text-muted); }
.v34-set-ai-uc-default {
font-size: 11px;
color: var(--text-muted);
margin-bottom: 10px;
padding: 4px 0;
border-bottom: 1px dashed var(--border);
}
.v34-set-ai-uc-default b { color: var(--text); font-family: var(--font-mono, monospace); }
.v34-set-ai-chain-list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
.v34-set-ai-chain-item {
display: grid;
grid-template-columns: 32px 1fr auto 28px 28px 28px;
gap: 8px;
align-items: center;
padding: 8px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12.5px;
}
.v34-set-ai-chain-item .pos {
color: var(--text-muted);
font-family: var(--font-mono, monospace);
font-weight: 700;
text-align: center;
}
.v34-set-ai-chain-item .lbl { color: var(--text); }
.v34-set-ai-chain-btn {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border);
color: var(--text-muted);
width: 28px;
height: 26px;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
transition: background 0.15s ease, color 0.15s ease;
}
.v34-set-ai-chain-btn:hover {
background: rgba(124,92,255,0.10);
color: var(--text);
}
.v34-set-ai-chain-btn.danger:hover { background: rgba(239,68,68,0.10); color: #ef4444; }
.v34-set-ai-chain-item .spacer { width: 28px; }
.v34-set-ai-uc-add select {
background: var(--bg-input);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
width: 100%;
cursor: pointer;
}
.v34-set-ai-uc-add select:focus { outline: none; border-color: var(--accent, #7c5cff); }
/* 2026-05-15 (v34.86): локальный селект модели в Ads-Hub / adCreator */
.v34-ad-hint {
font-size: 11px;
color: var(--text-muted);
line-height: 1.4;
margin-top: 6px;
}
.v34-ad-hint code {
background: rgba(124,92,255,0.10);
color: #b794f6;
padding: 1px 5px;
border-radius: 4px;
font-family: var(--font-mono, monospace);
}
.v34-ad-details {
background: rgba(255,255,255,0.02);
border: 1px dashed var(--border);
border-radius: 8px;
padding: 8px 12px;
margin: 12px 0;
}
.v34-ad-details summary {
cursor: pointer;
font-size: 12px;
color: var(--text-muted);
user-select: none;
padding: 2px 0;
}
.v34-ad-details summary:hover { color: var(--text); }
.v34-ad-details[open] summary { margin-bottom: 8px; }
@media (max-width: 600px) {
.v34-set-ai-proxy-edit-row { grid-template-columns: 1fr 1fr 28px; row-gap: 6px; }
.v34-set-ai-proxy-edit-row input:nth-child(3),
.v34-set-ai-proxy-edit-row input:nth-child(4) { grid-column: span 2; }
.v34-set-ai-chain-item { grid-template-columns: 24px 1fr 28px 28px 28px; }
.v34-set-ai-chain-item .v34-set-pill { display: none; }
}
/* ==================== Контент-фёрст реклама ==================== */
/* Чип в карточке креатива (редактор постинга) */
.v34-cf-chip {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
background: rgba(34,197,94,0.16);
color: #34d27f;
vertical-align: middle;
}
/* Тумблер контент-фёрст в модалке редактора */
.v34-cf-toggle { align-items: flex-start; }
.v34-cf-toggle .hint { display: block; margin-top: 2px; font-weight: 400; }
/* Модалка подтверждения «Добавить Ads» */
.v34-cf-modal { max-width: 600px; }
.v34-cf-meta {
margin-bottom: 12px;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted, #9aa);
}
.v34-cf-meta b { color: var(--text, #eee); }
.v34-cf-preview {
max-height: 280px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
padding: 12px 14px;
border: 1px solid var(--border, rgba(255,255,255,0.1));
border-radius: var(--r-sm, 8px);
background: var(--bg-elev, rgba(255,255,255,0.03));
font-size: 13px;
line-height: 1.55;
color: var(--text, #eee);
}
.v34-cf-note {
margin-top: 10px;
font-size: 11.5px;
color: var(--warning, #f0b429);
}
/* ============================================================
W2: Виральная петля (settings pane) — тумблеры fast-track / авто-сторис / boost
============================================================ */
.v34-vlp-block {
margin-top: 14px;
padding: 14px 16px;
border: 1px solid var(--border, rgba(255,255,255,0.10));
border-radius: var(--r-md, 14px);
background: rgba(255,255,255,0.015);
transition: border-color 180ms, background 180ms, box-shadow 180ms;
}
.v34-vlp-block.on {
border-color: rgba(236,72,153,0.38);
background: rgba(236,72,153,0.05);
box-shadow: 0 0 0 3px rgba(236,72,153,0.08);
}
.v34-vlp-head {
display: flex;
align-items: center;
gap: 12px;
}
.v34-vlp-titles { flex: 1 1 auto; min-width: 0; }
.v34-vlp-titles .t {
font-size: 13.5px;
font-weight: 700;
color: var(--text-primary, #eee);
}
.v34-vlp-titles .d {
font-size: 11.5px;
color: var(--text-muted);
line-height: 1.45;
margin-top: 3px;
}
.v34-vlp-state {
flex: 0 0 auto;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.v34-vlp-block.on .v34-vlp-state { color: #ec4899; }
/* toggle switch */
.v34-vlp-toggle {
flex: 0 0 auto;
position: relative;
display: inline-block;
width: 42px;
height: 24px;
cursor: pointer;
}
.v34-vlp-toggle input {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.v34-vlp-switch {
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid var(--border, rgba(255,255,255,0.14));
transition: background 180ms, border-color 180ms;
}
.v34-vlp-switch::before {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: #cbd5e1;
transition: transform 180ms cubic-bezier(0.16,1,0.3,1), background 180ms;
}
.v34-vlp-toggle input:checked + .v34-vlp-switch {
background: rgba(236,72,153,0.55);
border-color: rgba(236,72,153,0.65);
}
.v34-vlp-toggle input:checked + .v34-vlp-switch::before {
transform: translateX(18px);
background: #fff;
}
.v34-vlp-toggle input:focus-visible + .v34-vlp-switch {
box-shadow: 0 0 0 3px rgba(236,72,153,0.25);
}
.v34-vlp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
margin-top: 14px;
}
.v34-vlp-field label {
display: block;
font-size: 11px;
color: var(--text-secondary, #d4d4dc);
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.v34-vlp-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
flex-wrap: wrap;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.v34-vlp-foot-hint {
flex: 1 1 auto;
font-size: 11.5px;
color: var(--text-muted);
}
@media (max-width: 640px) {
.v34-vlp-grid { grid-template-columns: 1fr; }
}
/* ============================================================
W2: AI-скоринг контента (content page · scores tab)
============================================================ */
.v34-cs-scores-table {
display: flex;
flex-direction: column;
overflow-x: auto;
}
.v34-cs-scores-row {
display: grid;
grid-template-columns: 72px 78px 1.1fr 0.9fr 1.5fr 1.8fr;
gap: 10px;
align-items: center;
padding: 9px 10px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
font-size: 12.5px;
color: var(--text-primary, #eee);
min-width: 720px;
}
.v34-cs-scores-row .r { text-align: center; }
.v34-cs-scores-head {
position: sticky;
top: 0;
background: var(--bg-card, #12161f);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
color: var(--text-muted);
z-index: 1;
}
.v34-cs-scores-row .cid {
font-family: var(--font-mono, monospace);
font-size: 11.5px;
color: var(--text-secondary, #cbd5e1);
}
.v34-cs-scores-row .hook,
.v34-cs-scores-row .reasons {
font-size: 11.5px;
color: var(--text-secondary, #cbd5e1);
line-height: 1.4;
}
.v34-cs-scores-row .reasons { color: var(--text-muted); }
.v34-cs-scores-row:not(.v34-cs-scores-head):hover {
background: rgba(255,255,255,0.02);
}
.v34-cs-score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
padding: 3px 8px;
border-radius: 999px;
font-weight: 700;
font-size: 12px;
font-feature-settings: 'tnum';
border: 1px solid transparent;
}
.v34-cs-score-badge.hi { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.35); }
.v34-cs-score-badge.good { background: rgba(132,204,22,0.14); color: #a3e635; border-color: rgba(132,204,22,0.32); }
.v34-cs-score-badge.mid { background: rgba(251,191,36,0.14); color: #fbbf24; border-color: rgba(251,191,36,0.32); }
.v34-cs-score-badge.low { background: rgba(239,68,68,0.13); color: #f87171; border-color: rgba(239,68,68,0.30); }
.v34-cs-score-badge.na { background: rgba(255,255,255,0.05); color: var(--text-muted); border-color: var(--border, rgba(255,255,255,0.10)); }
/* ============================================================
W2: Авто-расписание по данным (content page · schedule tab)
============================================================ */
.v34-cs-schedauto {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px 28px;
margin-top: 14px;
padding: 14px 16px;
border: 1px solid var(--border, rgba(255,255,255,0.10));
border-radius: var(--r-sm, 10px);
background: rgba(124,92,255,0.04);
}
.v34-cs-auto-toggle {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
flex: 1 1 320px;
}
.v34-cs-auto-toggle input {
position: absolute;
opacity: 0;
width: 0; height: 0;
}
.v34-cs-auto-switch {
flex: 0 0 auto;
position: relative;
width: 42px;
height: 24px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid var(--border, rgba(255,255,255,0.14));
transition: background 180ms, border-color 180ms;
}
.v34-cs-auto-switch::before {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: #cbd5e1;
transition: transform 180ms cubic-bezier(0.16,1,0.3,1), background 180ms;
}
.v34-cs-auto-toggle input:checked + .v34-cs-auto-switch {
background: rgba(124,92,255,0.55);
border-color: rgba(124,92,255,0.65);
}
.v34-cs-auto-toggle input:checked + .v34-cs-auto-switch::before {
transform: translateX(18px);
background: #fff;
}
.v34-cs-auto-toggle input:focus-visible + .v34-cs-auto-switch {
box-shadow: 0 0 0 3px rgba(124,92,255,0.25);
}
.v34-cs-auto-txt {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: var(--text-primary, #eee);
}
.v34-cs-auto-txt .hint {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
.v34-cs-auto-explore {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1 1 260px;
min-width: 220px;
}
.v34-cs-auto-explore label {
font-size: 11.5px;
color: var(--text-secondary, #d4d4dc);
font-weight: 600;
}
.v34-cs-auto-explore input[type="range"] {
width: 100%;
accent-color: #7c5cff;
cursor: pointer;
}
.v34-cs-auto-explore .hint {
font-size: 11px;
color: var(--text-muted);
}
/* ============================================================
W2: Аудитория-сегмент в форме VK-рассылки (sender · createSenderTask)
============================================================ */
.v34-vk-bc-aud-cb {
display: flex;
align-items: flex-start;
gap: 9px;
cursor: pointer;
font-size: 12px;
color: var(--text-secondary, #d4d4dc);
line-height: 1.4;
margin: 4px 0;
}
.v34-vk-bc-aud-cb input[type="checkbox"] {
margin-top: 1px;
width: 16px;
height: 16px;
flex: 0 0 auto;
accent-color: #4c8dff;
cursor: pointer;
}
.v34-vk-bc-aud-fields {
margin-top: 10px;
padding: 12px 14px;
border: 1px dashed rgba(76,141,255,0.30);
border-radius: var(--r-sm, 10px);
background: rgba(76,141,255,0.04);
display: flex;
flex-direction: column;
gap: 10px;
}
.v34-vk-bc-aud-fields[hidden] { display: none; }
/* ============================================================
W2: Welcome-цепочки (drip) — TG-боты (getBotFlows/saveBotFlows)
============================================================ */
.v34-tg-flows-host {
display: flex;
flex-direction: column;
gap: 12px;
}
.v34-tg-flow {
border: 1px solid var(--border, rgba(255,255,255,0.10));
border-radius: var(--r-sm, 10px);
background: rgba(255,255,255,0.015);
overflow: hidden;
transition: border-color 180ms, background 180ms;
}
.v34-tg-flow.on {
border-color: rgba(56,189,248,0.38);
background: rgba(56,189,248,0.05);
}
.v34-tg-flow-head {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}
.v34-tg-flow-name {
font-size: 13px;
font-weight: 700;
color: var(--text-primary, #eee);
display: flex;
align-items: baseline;
gap: 8px;
}
.v34-tg-flow-name .id {
font-family: var(--font-mono, monospace);
font-size: 10.5px;
font-weight: 400;
color: var(--text-muted);
}
/* toggle switch (TG accent) */
.v34-tg-flow-toggle {
position: relative;
flex: 0 0 auto;
width: 42px;
height: 24px;
cursor: pointer;
}
.v34-tg-flow-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.v34-tg-flow-switch {
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid var(--border, rgba(255,255,255,0.14));
transition: background 180ms, border-color 180ms;
}
.v34-tg-flow-switch::before {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
border-radius: 50%;
background: #cbd5e1;
transition: transform 180ms cubic-bezier(0.16,1,0.3,1), background 180ms;
}
.v34-tg-flow-toggle input:checked + .v34-tg-flow-switch {
background: rgba(56,189,248,0.55);
border-color: rgba(56,189,248,0.65);
}
.v34-tg-flow-toggle input:checked + .v34-tg-flow-switch::before {
transform: translateX(18px);
background: #fff;
}
.v34-tg-flow-body {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.v34-tg-flow-body label.fl {
display: flex;
flex-direction: column;
gap: 5px;
}
.v34-tg-flow-body label.fl > span {
font-size: 11px;
color: var(--text-secondary, #d4d4dc);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.v34-tg-flow-body textarea {
width: 100%;
box-sizing: border-box;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 11px;
font-size: 12.5px;
font-family: inherit;
resize: vertical;
}
.v34-tg-flow-steps {
display: flex;
flex-direction: column;
gap: 8px;
}
.v34-tg-flow-steps-empty {
font-size: 11.5px;
color: var(--text-muted);
padding: 6px 2px;
}
.v34-tg-flow-step {
border: 1px solid var(--border, rgba(255,255,255,0.08));
border-radius: 8px;
padding: 9px 10px;
background: rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
gap: 7px;
}
.v34-tg-flow-step-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
font-size: 11.5px;
color: var(--text-secondary, #d4d4dc);
}
.v34-tg-flow-step-top .off input {
width: 62px;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 3px 6px;
font-size: 12px;
margin: 0 3px;
}
.v34-tg-flow-step-top label.cb {
display: inline-flex;
align-items: center;
gap: 5px;
cursor: pointer;
}
.v34-tg-flow-step-del {
margin-left: auto;
background: rgba(239,68,68,0.10);
color: #f87171;
border: 1px solid rgba(239,68,68,0.28);
border-radius: 6px;
width: 24px;
height: 24px;
cursor: pointer;
font-size: 12px;
line-height: 1;
}
.v34-tg-flow-step-del:hover { background: rgba(239,68,68,0.20); }
/* ============================================================
W2 (F15): опрос в форме ручного контент-постинга (content · manual)
============================================================ */
.v34-cs-manual-poll {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: 4px;
padding: 10px 12px;
border: 1px dashed var(--border, rgba(255,255,255,0.12));
border-radius: var(--r-sm, 10px);
background: rgba(255,255,255,0.015);
}
.v34-cs-poll-cb {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 12.5px;
color: var(--text-secondary, #d4d4dc);
white-space: nowrap;
}
.v34-cs-poll-cb input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: #7c5cff;
cursor: pointer;
}
.v34-cs-poll-input {
flex: 1 1 240px;
min-width: 180px;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 7px 11px;
font-size: 12.5px;
font-family: inherit;
}
.v34-cs-poll-input:disabled { opacity: 0.5; cursor: not-allowed; }
/* ==================== «Онлайн аудитории» (page-online, .v34-onl) ==================== */
/* ВАЖНО: display только на .active — безусловный display на корне секции
перебил бы .page{display:none} из index.html (страница видна на всех вкладках) */
.v34-onl.active { display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.v34-onl-head { display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.v34-onl-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4, 16px); flex-wrap: wrap; }
.v34-onl-title h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.v34-onl-accent { background: linear-gradient(90deg, #00d99a, #7dd3fc); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.v34-onl-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.v34-onl-controls { display: flex; align-items: center; gap: var(--s-2, 8px); flex-wrap: wrap; }
.v34-onl-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px; cursor: pointer; user-select: none;
font-size: 12px; color: var(--text-secondary);
background: var(--bg-card); border: 1px solid var(--border);
transition: border-color .15s, background .15s, color .15s;
}
.v34-onl-chip:hover { border-color: var(--accent, #7c5cff); color: var(--text-primary); }
.v34-onl-chip.active { background: var(--accent-glow, rgba(108,92,231,.18)); border-color: var(--accent, #7c5cff); color: var(--text-primary); }
.v34-onl-chip.ovl.active { background: rgba(0,217,154,.12); border-color: #00d99a; }
.v34-onl-chipsep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.v34-onl-pulse { width: 7px; height: 7px; border-radius: 50%; background: #00d99a; animation: v34-onl-pulse 1.6s infinite; }
@keyframes v34-onl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.v34-onl-datechip { position: relative; }
.v34-onl-datechip input[type="date"] {
background: transparent; border: 0; color: var(--text-secondary);
font-size: 12px; font-family: inherit; width: 110px; cursor: pointer;
}
.v34-onl-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3, 12px); }
.v34-onl-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius, 12px); padding: 14px 16px; }
.v34-onl-stat-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 6px; }
.v34-onl-stat-v { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.v34-onl-stat-v.accent { background: linear-gradient(90deg, #00d99a, #7dd3fc); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.v34-onl-stat.warn .v34-onl-stat-v { color: var(--warning, #ffaa00); }
.v34-onl-stat-d { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.v34-onl-body { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-4, 16px); align-items: start; }
.v34-onl-chart-card { min-height: 420px; display: flex; flex-direction: column; }
.v34-onl-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3, 12px); margin-bottom: var(--s-3, 12px); }
.v34-onl-chart-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.v34-onl-src-select {
background: var(--bg-input, var(--bg-card)); color: var(--text-secondary);
border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
padding: 6px 10px; font-size: 12px; font-family: inherit; max-width: 240px;
}
.v34-onl-chart-area { position: relative; flex: 1; min-height: 340px; }
.v34-onl-chart-area canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.v34-onl-empty {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px;
color: var(--text-muted); font-size: 13px;
}
.v34-onl-empty[hidden] { display: none; } /* явный display:flex перебивает UA-стиль [hidden] */
.v34-onl-empty-ico { font-size: 34px; }
.v34-onl-empty-hint { font-size: 11px; opacity: .7; }
.v34-onl-side { display: flex; flex-direction: column; gap: var(--s-4, 16px); }
.v34-onl-src-note { font-size: 10.5px; color: var(--text-muted); }
.v34-onl-sources { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; margin: 0 -6px; }
.v34-onl-src-row {
display: flex; align-items: center; gap: 7px;
padding: 6px 8px; border-radius: var(--radius-sm, 8px); cursor: pointer;
font-size: 12px; transition: background .12s;
}
.v34-onl-src-row:hover { background: var(--bg-input, rgba(255,255,255,.04)); }
.v34-onl-src-row.active { background: rgba(0,217,154,.10); box-shadow: inset 2px 0 0 #00d99a; }
.v34-onl-src-ico { flex-shrink: 0; font-size: 11px; }
.v34-onl-src-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.v34-onl-src-online { font-weight: 600; color: #00d99a; }
.v34-onl-src-total { color: var(--text-muted); font-size: 10.5px; }
.v34-onl-src-bar { flex-shrink: 0; width: 46px; height: 4px; border-radius: 2px; background: var(--bg-input, rgba(255,255,255,.06)); overflow: hidden; }
.v34-onl-src-bar i { display: block; height: 100%; background: linear-gradient(90deg, #00d99a, #7dd3fc); border-radius: 2px; }
.v34-onl-hyg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2, 8px); margin-bottom: var(--s-3, 12px); }
.v34-onl-hyg-cell {
background: var(--bg-input, rgba(255,255,255,.03)); border-radius: var(--radius-sm, 8px);
padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.v34-onl-hyg-cell b { font-size: 17px; font-weight: 700; }
.v34-onl-hyg-cell span { font-size: 10.5px; color: var(--text-muted); }
.v34-onl-hyg-cell.ok b { color: #00d99a; }
.v34-onl-hyg-log { display: flex; flex-direction: column; gap: 2px; }
.v34-onl-hyg-log-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); padding: 3px 2px; border-top: 1px solid var(--border); }
.v34-onl-muted { color: var(--text-muted); font-size: 12px; padding: 6px 2px; }
@media (max-width: 1100px) {
.v34-onl-body { grid-template-columns: 1fr; }
.v34-onl-stats { grid-template-columns: repeat(2, 1fr); }
}
/* =====================================================================
«Генератор расписания» — .v34-sg-* (assets/schedule-grid.js)
Каркас мастера — готовые .v34-wiz-* и .v34-cs-*; здесь только недостающее.
Оверлей намеренно НЕ .v34-wiz-backdrop: глобальный Escape из v34.js
закрыл бы его мимо модуля (черновик, возврат фокуса).
===================================================================== */
.v34-sg-backdrop {
position: fixed; inset: 0;
background: rgba(5, 5, 10, .72);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
z-index: 200;
display: none;
align-items: center; justify-content: center;
padding: var(--s-6, 24px);
overflow-y: auto;
}
.v34-sg-backdrop.open { display: flex; animation: v34WizFade 200ms var(--ease-out); }
/* Мелкий, но содержательный текст модуля (ID, подписи, подсказки, пейджеры, строки карточки): токен с
контрастом не ниже 4.5:1 на всех подложках модуля. --text-muted панели даёт ~2.6:1 и годится только для декора. */
.v34-sg-backdrop, .v34-sg-card, .v34-sg-legacy { --v34-sg-text-soft: #a3a3b8; }
.v34-sg-backdrop .v34-cs-field-hint, .v34-sg-backdrop .v34-wiz-section-label, .v34-sg-backdrop .v34-wiz-step-counter,
.v34-sg-backdrop .v34-wiz-step .desc, .v34-sg-backdrop .v34-cs-field label, .v34-sg-backdrop .v34-cs-empty,
.v34-sg-card .v34-cs-empty, .v34-sg-legacy > .v34-cs-card-head .meta,
.v34-sg-backdrop .v34-wiz-close, .v34-sg-backdrop .v34-wiz-step:not(.active):not(.done) .num { color: var(--v34-sg-text-soft); }
.v34-sg-backdrop [hidden], .v34-sg-card [hidden] { display: none !important; }
.v34-sg-wiz { width: 820px; }
.v34-sg-wiz.v34-sg-wide { width: 960px; }
/* Длинный заголовок сценария («Изменить расписание · «…»») переносится РЯДОМ с «✕», а не выталкивает его на свою строку:
у хоста .v34-wiz-head стоит flex-wrap: wrap, а max-content-база заголовка занимала всю строку. */
.v34-sg-backdrop .v34-wiz-head { flex-wrap: nowrap; align-items: flex-start; }
.v34-sg-backdrop .v34-wiz-close { flex-shrink: 0; }
.v34-sg-title { margin: 0; min-width: 0; min-height: 32px; flex: 1 1 0; overflow-wrap: anywhere; }
.v34-sg-title:focus, .v34-sg-step-title:focus { outline: none; }
.v34-sg-title:focus-visible, .v34-sg-step-title:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 4px; border-radius: 6px; }
.v34-sg-scroll { min-height: 0; }
.v34-sg-pane { display: flex; flex-direction: column; gap: var(--s-4, 16px); min-width: 0; }
.v34-sg-step-title { margin: 0; font-family: var(--font-display, 'Onest', sans-serif); font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); }
/* Кнопки внутри модуля: видимый фокус и выключенное состояние, которых нет у .v34-cs-btn / .v34-wiz-btn. */
.v34-sg-backdrop button:focus-visible, .v34-sg-card button:focus-visible,
.v34-sg-backdrop input:focus-visible, .v34-sg-backdrop select:focus-visible { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.v34-sg-backdrop .v34-cs-btn[disabled], .v34-sg-card .v34-cs-btn[disabled] { opacity: .4; cursor: not-allowed; }
/* Пейджер на время загрузки страницы: кнопка остаётся в фокусе (aria-disabled), а не выключается. */
.v34-sg-backdrop .v34-cs-btn[aria-disabled="true"] { opacity: .55; cursor: progress; }
.v34-sg-btn-danger { color: var(--danger, #ff5c7a); border-color: rgba(255, 92, 122, .35); }
.v34-sg-btn-danger:hover { color: #fff; background: var(--danger-bg, rgba(255, 92, 122, .12)); border-color: var(--danger, #ff5c7a); }
.v34-sg-btn-inline { padding: 4px 10px; font-size: 12px; margin-left: var(--s-2, 8px); }
.v34-sg-link { background: none; border: none; padding: 2px 4px; font: inherit; font-size: 12.5px; color: var(--accent-text, #b3a0ff); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* ---- stepper ---- */
.v34-sg-stepper-host { flex-shrink: 0; }
.v34-sg-stepper { list-style: none; margin-block: var(--s-4, 16px) 0; padding-block: 0; }
.v34-wiz-stepper.v34-sg-stepper { margin-bottom: 0; }
.v34-sg-step-item { flex: 1; min-width: 0; display: flex; }
.v34-sg-step { width: 100%; min-width: 0; background: none; border: none; border-bottom: 2px solid var(--border); font: inherit; color: inherit; text-align: left; }
.v34-sg-step[disabled] { cursor: default; opacity: .55; }
.v34-sg-step[disabled]:hover { border-bottom-color: var(--border); }
.v34-sg-step-text { display: flex; flex-direction: column; min-width: 0; }
.v34-sg-step-text .lbl, .v34-sg-step-text .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---- fields, errors, messages ---- */
.v34-sg-field { min-width: 0; }
.v34-sg-field input, .v34-sg-field select { width: 100%; min-width: 0; box-sizing: border-box; }
.v34-sg-field input[type="time"], .v34-sg-field input[type="date"] { color-scheme: dark; }
.v34-sg-backdrop [aria-invalid="true"] { border-color: var(--danger, #ff5c7a); }
.v34-sg-backdrop input[type="checkbox"][aria-invalid="true"], .v34-sg-backdrop input[type="radio"][aria-invalid="true"] { outline: 1px solid var(--danger, #ff5c7a); outline-offset: 1px; }
.v34-sg-field-error { font-size: 12.5px; line-height: 1.45; color: var(--danger, #ff5c7a); }
.v34-sg-fieldset { border: none; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.v34-sg-fieldset > legend { padding: 0; margin: 0 0 var(--s-3, 12px); float: left; width: 100%; }
.v34-sg-fieldset > legend + * { clear: both; }
.v34-sg-note { font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--r-md, 14px); padding: 10px 14px; overflow-wrap: anywhere; }
.v34-sg-note.info { border-left-color: var(--info, #4dabff); }
.v34-sg-note.ok { border-left-color: var(--success, #00d68f); color: var(--text-primary); }
.v34-sg-note.warn { border-left-color: var(--warning, #ffb84d); color: var(--text-primary); }
.v34-sg-note.error { border-left-color: var(--danger, #ff5c7a); color: var(--text-primary); background: var(--danger-bg, rgba(255, 92, 122, .12)); }
.v34-sg-status { font-size: 14px; font-weight: 500; }
.v34-sg-hint { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md, 14px); padding: var(--s-3, 12px) var(--s-4, 16px); }
.v34-sg-foot { flex-direction: column; align-items: stretch; flex-shrink: 0; }
.v34-sg-foot-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px) var(--s-3, 12px); }
.v34-sg-foot-buttons .v34-wiz-step-counter { margin: 0 auto 0 0; }
.v34-sg-foot-gap { flex: 1 1 0; }
.v34-sg-msg { font-size: 13px; line-height: 1.45; padding: 8px 12px; border-radius: var(--r-sm, 8px); border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); overflow-wrap: anywhere; max-height: 30vh; overflow-y: auto; }
.v34-sg-msg.error { border-color: var(--danger, #ff5c7a); background: var(--danger-bg, rgba(255, 92, 122, .12)); color: var(--text-primary); }
.v34-sg-msg.warn { border-color: var(--warning, #ffb84d); color: var(--text-primary); }
.v34-sg-msg.ok { border-color: var(--success, #00d68f); color: var(--text-primary); }
/* ---- step 1: communities ---- */
.v34-sg-search { width: 100%; box-sizing: border-box; min-width: 0; padding: 10px 12px; font-size: 13.5px; }
input.v34-cs-q-fld.v34-sg-search { flex: 0 0 auto; min-width: 0; }
.v34-sg-chips, .v34-sg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px); }
.v34-sg-counter { font-size: 12px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); margin-left: auto; }
.v34-sg-list { max-height: min(300px, 38vh); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--bg-input); }
.v34-sg-list > .v34-cs-btn { display: block; margin: 0 auto var(--s-4, 16px); }
.v34-sg-comm { display: flex; align-items: center; gap: var(--s-3, 12px); padding: 8px 12px; border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0; }
.v34-sg-comm:last-child { border-bottom: none; }
.v34-sg-comm:hover { background: var(--bg-card-hover, rgba(255, 255, 255, .03)); }
.v34-sg-comm input { accent-color: var(--accent, #7c5cff); flex-shrink: 0; width: 16px; height: 16px; }
.v34-sg-comm-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-2, 8px); min-width: 0; flex: 1; }
.v34-sg-comm-name { font-size: 13.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.v34-sg-comm-id { font-size: 11px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); }
.v34-sg-comm-why { flex-basis: 100%; font-size: 12px; color: var(--warning, #ffb84d); }
.v34-sg-comm:has(input:focus-visible) { background: var(--accent-glow, rgba(124, 92, 255, .18)); }
.v34-sg-list-hint { margin-top: calc(-1 * var(--s-1, 4px)); }
.v34-sg-comm.blocked { cursor: default; }
.v34-sg-comm.blocked .v34-sg-comm-name { color: var(--v34-sg-text-soft); }
/* ---- step 2: days, radio cards ---- */
.v34-sg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2, 8px); }
.v34-sg-day { position: relative; display: block; cursor: pointer; }
.v34-sg-day input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.v34-sg-day span { display: block; text-align: center; padding: 10px 0; border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--bg-input); font-size: 13px; color: var(--text-secondary); transition: all var(--t-fast, 150ms) var(--ease-out); }
.v34-sg-day input:checked + span { background: var(--accent-glow, rgba(124, 92, 255, .18)); border-color: var(--accent, #7c5cff); color: var(--text-primary); font-weight: 600; }
.v34-sg-day input:focus-visible + span { outline: 2px solid var(--accent, #7c5cff); outline-offset: 2px; }
.v34-sg-day input[aria-invalid="true"] + span { border-color: var(--danger, #ff5c7a); }
.v34-sg-cards { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.v34-sg-card-option { display: flex; align-items: flex-start; gap: var(--s-3, 12px); padding: var(--s-3, 12px) var(--s-4, 16px); border: 1.5px solid var(--border); border-radius: var(--r-md, 14px); background: var(--bg-input); cursor: pointer; transition: border-color var(--t-fast, 150ms) var(--ease-out); }
.v34-sg-card-option:hover { border-color: var(--border-hover); }
.v34-sg-card-option:has(input:checked) { border-color: var(--accent, #7c5cff); background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(183, 148, 246, .04)); }
.v34-sg-card-option input { accent-color: var(--accent, #7c5cff); margin-top: 3px; flex-shrink: 0; }
.v34-sg-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v34-sg-card-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.v34-sg-card-sub { font-size: 12px; line-height: 1.45; color: var(--v34-sg-text-soft); }
/* ---- step 3 / 4: totals, summary ---- */
.v34-sg-totals, .v34-sg-summary, .v34-sg-facts { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--bg-input); overflow: hidden; }
.v34-sg-total-line, .v34-sg-sum-row, .v34-sg-fact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s-3, 12px); padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13px; min-width: 0; }
.v34-sg-total-line:last-child, .v34-sg-sum-row:last-child, .v34-sg-fact:last-child { border-bottom: none; }
.v34-sg-total-line .l, .v34-sg-sum-row .l, .v34-sg-fact .l { flex: 0 0 210px; max-width: 100%; color: var(--v34-sg-text-soft); font-size: 12px; }
.v34-sg-total-line .v, .v34-sg-sum-row .v, .v34-sg-fact .v { flex: 1 1 200px; min-width: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.v34-sg-sum-row .l { flex-basis: 120px; }
/* ---- result window ---- */
.v34-sg-scroll > * + * { margin-top: var(--s-4, 16px); }
.v34-sg-notes { display: flex; flex-direction: column; gap: var(--s-2, 8px); }
.v34-sg-notes:empty, .v34-sg-facts:empty { display: none; }
/* Кнопка свёртки фактов живёт только на узком экране (см. max-width: 600px): там часы должны быть на первом экране результата. */
.v34-sg-facts-toggle { display: none; }
.v34-sg-block { display: flex; flex-direction: column; gap: var(--s-3, 12px); min-width: 0; }
.v34-sg-block .v34-wiz-section-label { margin: var(--s-2, 8px) 0 0; }
.v34-sg-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3, 12px); }
.v34-sg-places, .v34-sg-conflicts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md, 14px); background: var(--bg-input); overflow: hidden; }
.v34-sg-place { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px) var(--s-3, 12px); padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.v34-sg-place:last-child, .v34-sg-conflict:last-child { border-bottom: none; }
.v34-sg-place .time { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 600; color: var(--text-primary); min-width: 48px; }
.v34-sg-place .ord { font-size: 11.5px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); }
.v34-sg-place input[type="time"] { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm, 8px); padding: 6px 8px; color: var(--text-primary); font: inherit; color-scheme: dark; }
.v34-sg-place.edited { background: var(--warning-bg, rgba(255, 184, 77, .12)); }
.v34-sg-empty { padding: 12px 14px; font-size: 12.5px; color: var(--v34-sg-text-soft); }
/* Неудачная загрузка страницы часов / общей сетки / гистограммы: причина и «Повторить» на месте данных. */
.v34-sg-failed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2, 8px) var(--s-3, 12px); color: var(--text-primary); border-left: 3px solid var(--danger, #ff5c7a); background: var(--danger-bg, rgba(255, 92, 122, .12)); }
div.v34-sg-failed { border-radius: var(--r-md, 14px); }
.v34-sg-failed-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.v34-sg-kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: var(--r-pill, 999px); font-family: var(--font-mono, monospace); }
.v34-sg-kind.content, .v34-sg-slot.content .kind { background: rgba(0, 212, 255, .16); color: #00d4ff; }
.v34-sg-kind.ad, .v34-sg-slot.ad .kind { background: rgba(255, 107, 157, .16); color: #ff8da8; }
.v34-sg-nextday, .v34-sg-edited, .v34-sg-slot .next { font-size: 11px; padding: 2px 8px; border-radius: var(--r-pill, 999px); background: rgba(183, 148, 246, .18); color: #b794f6; }
.v34-sg-edited { background: var(--warning-bg, rgba(255, 184, 77, .12)); color: var(--warning, #ffb84d); }
.v34-sg-conflict { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.v34-sg-conflict .where { font-size: 12px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); overflow-wrap: anywhere; }
.v34-sg-conflict .why { color: var(--text-primary); overflow-wrap: anywhere; }
.v34-sg-conflict .hint { font-size: 12px; color: var(--success, #00d68f); }
.v34-sg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2, 8px); }
.v34-sg-pager-text { font-size: 12px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); }
.v34-sg-gridbox, .v34-sg-histbox { display: flex; flex-direction: column; gap: var(--s-2, 8px); min-width: 0; }
.v34-sg-gridline { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s-3, 12px); padding: 8px 0; border-bottom: 1px solid var(--border); align-items: start; }
.v34-sg-gridline .name { font-size: 12.5px; color: var(--text-primary); overflow-wrap: anywhere; }
.v34-sg-slots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.v34-sg-slot { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border: 1px solid var(--border); border-radius: var(--r-pill, 999px); font-size: 12px; background: var(--bg-input); }
.v34-sg-slot .time { font-family: var(--font-mono, monospace); color: var(--text-primary); }
.v34-sg-slot .kind { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: var(--r-pill, 999px); }
.v34-sg-slot .next { font-size: 10px; }
.v34-sg-bars { display: flex; flex-direction: column; gap: 4px; }
.v34-sg-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 48px; gap: var(--s-2, 8px); align-items: center; font-size: 12px; font-family: var(--font-mono, monospace); color: var(--text-secondary); }
.v34-sg-bar .track { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.v34-sg-bar .fill { display: block; height: 100%; border-radius: 5px; background: var(--accent, #7c5cff); }
.v34-sg-bar .count { text-align: right; color: var(--text-primary); }
/* ---- карточка на вкладке «Расписание» и блок старого генератора ---- */
.v34-sg-card .v34-cs-card-head { margin-bottom: var(--s-3, 12px); }
.v34-sg-body { display: flex; flex-direction: column; gap: var(--s-3, 12px); min-width: 0; }
.v34-sg-grids { display: flex; flex-direction: column; }
.v34-sg-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3, 12px); padding: var(--s-3, 12px) 0; border-bottom: 1px solid var(--border); min-width: 0; }
.v34-sg-grid:last-child { border-bottom: none; }
.v34-sg-grid-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 520px; }
.v34-sg-grid-name { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.v34-sg-grid-meta { font-size: 12px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); overflow-wrap: anywhere; }
.v34-sg-grid-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Строка статуса: плашка и рядом настройки ИМЕННО этой версии («действует с …» — действующей, «смена с …» — запланированной). */
.v34-sg-grid-status { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v34-sg-grid-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-2, 8px); min-width: 0; }
.v34-sg-grid-line .v34-sg-pill { flex-shrink: 0; }
.v34-sg-pill { font-size: 11.5px; padding: 3px 10px; border-radius: var(--r-pill, 999px); border: 1px solid var(--border); color: var(--text-secondary); }
.v34-sg-pill.ok { background: var(--success-bg, rgba(0, 214, 143, .12)); color: var(--success, #00d68f); border-color: transparent; }
.v34-sg-pill.warn { background: var(--warning-bg, rgba(255, 184, 77, .12)); color: var(--warning, #ffb84d); border-color: transparent; }
.v34-sg-pill.off { background: var(--danger-bg, rgba(255, 92, 122, .12)); color: var(--danger, #ff5c7a); border-color: transparent; }
.v34-sg-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3, 12px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); }
.v34-sg-card-meta { font-size: 12px; color: var(--v34-sg-text-soft); font-family: var(--font-mono, monospace); overflow-wrap: anywhere; min-width: 0; }
.v34-sg-legacy { margin-top: var(--s-5, 20px); padding-top: var(--s-4, 16px); border-top: 1px solid var(--border); }
.v34-sg-legacy .v34-cs-card-head { margin-bottom: 0; }
@media (min-width: 769px) {
.v34-sg-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.v34-sg-facts .v34-sg-fact .l { flex-basis: 110px; }
.v34-sg-facts .v34-sg-fact:nth-child(odd) { border-right: 1px solid var(--border); }
.v34-sg-facts .v34-sg-fact:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 768px) {
.v34-sg-backdrop { padding: 0; align-items: stretch; }
.v34-sg-wiz, .v34-sg-wiz.v34-sg-wide { width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
.v34-sg-foot-buttons .v34-wiz-btn { min-height: 44px; }
/* Плашка режима V0 (fixed, справа внизу) иначе закрывает кнопки полноэкранного мастера. */
.v34-sg-banner-gap .v34-sg-foot { padding-bottom: calc(var(--s-4, 16px) + 40px); }
}
@media (max-width: 600px) {
.v34-sg-step-text .desc { display: none; }
.v34-sg-step:not(.active) .v34-sg-step-text { display: none; }
.v34-sg-step-item { flex: 0 0 auto; }
.v34-sg-step-item:has(.active) { flex: 1 1 auto; }
.v34-sg-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v34-sg-total-line .l, .v34-sg-sum-row .l { flex-basis: 100%; }
.v34-sg-fact .l { flex-basis: 104px; }
.v34-sg-facts-toggle { display: block; width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.v34-sg-facts.folded { display: none; }
.v34-sg-facts-toggle::after { content: ' ▾'; }
.v34-sg-facts-toggle[aria-expanded="true"]::after { content: ' ▴'; }
.v34-sg-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Поиск скрыт (сообществ ≤ 8) — выбор сообщества занимает всю строку, день и тип встают парой под ним. */
.v34-sg-controls > [hidden] + .v34-sg-field { grid-column: 1 / -1; }
.v34-sg-gridline { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.v34-sg-bar { grid-template-columns: 86px minmax(0, 1fr) 36px; }
.v34-sg-counter { margin-left: 0; flex-basis: 100%; }
.v34-sg-foot-buttons .v34-wiz-btn { flex: 1 1 auto; }
.v34-sg-foot-buttons .v34-wiz-step-counter { display: none; }
.v34-sg-foot-gap { display: none; }
}
@media (max-width: 359px) {
/* Две колонки уже не вмещают подпись «Поиск сообщества» в одну строку — поля снова встают столбцом. */
.v34-sg-controls { grid-template-columns: minmax(0, 1fr); }
}