:root {
    --bg: #0c0e14;
    --bg2: #11141c;
    --bg3: #161a24;
    --border: #1e2433;
    --border2: #2a3144;
    --text: #d4dae6;
    --muted: #6b7589;
    --primary: #5b6af0;
    --green: #22c55e;
    --red: #ef4444;
    --yellow: #eab308;
    --flow-bg: #151922;
    --flow-head: #1a2030;
    --flow-border: #2d3548;
    --flow-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 14px rgba(0,0,0,.28);
    --sidebar-w: 200px;
    --sidebar-w-collapsed: 52px;
    --sidebar-bg: #151a28;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.05);
    --sidebar-bg-active: var(--primary);
    --sidebar-bg-active-hover: #6875f5;
    --sidebar-border: #1e2438;
    --sidebar-text: #939bb0;
    --sidebar-text-hover: #e8ebf2;
    --sidebar-text-active: #ffffff;
    --sidebar-accent: var(--primary);
    --sidebar-brand: #f2f4f8;
    --radius: 6px;
    --accent: var(--primary);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
    --scrollbar-track: #11141c;
    --scrollbar-thumb: #2a3144;
    --scrollbar-thumb-hover: #3d465c;
    color-scheme: dark;
}

/* Scrollbars — dark theme (default) */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-track);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

* { box-sizing: border-box; margin: 0; }

body {
    font: 13px/1.5 var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover,
a.btn-link:hover,
a.act-icon:hover,
a.act-icon.act-stats:hover,
a.preset:hover,
a.report-tab:hover,
a.camp-tab:hover,
a.offer-dash-name:hover,
a.row-link:hover,
a.btn-tg:hover,
a.pill-btn:hover,
a.btn-icon:hover,
a.copy-btn:hover,
a.stats-link-filter:hover,
button.btn:hover,
button.btn-link:hover,
.side-nav a:hover {
    text-decoration: none;
}
.muted { color: var(--muted); }
.small { font-size: 11px; }
.c-green { color: var(--green); }
.c-red { color: var(--red); }
.r, .num { text-align: right; font-variant-numeric: tabular-nums; }
.c { text-align: center; }
.c.num { font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }
.ell { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dim { opacity: .45; }
.mono-sm, code { font: 11px/1.45 var(--mono); background: var(--bg2); padding: 1px 5px; border-radius: 3px; }

/* ---- App shell ---- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: width 0.2s ease, padding 0.2s ease;
}
.app.sidebar-collapsed,
html.sidebar-collapsed-init .app {
    --sidebar-w: var(--sidebar-w-collapsed);
}
.app.sidebar-collapsed .sidebar,
html.sidebar-collapsed-init .app .sidebar {
    width: var(--sidebar-w-collapsed);
    padding: 14px 6px;
}
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .brand-text,
html.sidebar-collapsed-init .app .nav-label,
html.sidebar-collapsed-init .app .brand-text {
    display: none;
}
.app.sidebar-collapsed .brand,
html.sidebar-collapsed-init .app .brand {
    text-align: center;
    padding: 4px 0 16px;
}
.app.sidebar-collapsed .brand-short,
html.sidebar-collapsed-init .app .brand-short {
    display: inline-block;
}
.app.sidebar-collapsed .side-nav a,
html.sidebar-collapsed-init .app .side-nav a {
    justify-content: center;
    padding: 8px 6px;
    gap: 0;
}
.app.sidebar-collapsed .side-footer,
html.sidebar-collapsed-init .app .side-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.app.sidebar-collapsed .side-add-btn,
html.sidebar-collapsed-init .app .side-add-btn {
    width: 34px;
    min-width: 34px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app.sidebar-collapsed .side-add-icon,
html.sidebar-collapsed-init .app .side-add-icon {
    font-size: 16px;
    line-height: 1;
}
.app.sidebar-collapsed .side-logout,
html.sidebar-collapsed-init .app .side-logout {
    margin-top: 0;
    padding: 6px;
}
.brand {
    font-size: 15px;
    font-weight: 700;
    color: var(--sidebar-brand);
    padding: 2px 8px 18px;
    display: block;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.brand:hover { text-decoration: none; color: var(--sidebar-brand); }
.brand-short { color: var(--sidebar-brand); }
.logo, .brand-text { color: var(--sidebar-accent); }

.side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; }
.side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-icon {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    opacity: 0.82;
}
.side-nav a:hover { background: var(--sidebar-bg-hover); color: var(--sidebar-text-hover); text-decoration: none; }
.side-nav a:hover .nav-icon { opacity: 1; }
.side-nav a.active {
    background: var(--sidebar-bg-active);
    color: var(--sidebar-text-active);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
.side-nav a.active:hover { background: var(--sidebar-bg-active-hover); color: var(--sidebar-text-active); }
.side-nav a.active .nav-icon { opacity: 1; color: var(--sidebar-text-active); }

.side-footer { padding-top: 14px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; }
.sidebar .side-add-btn.btn-primary {
    gap: 4px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--sidebar-text-hover);
}
.sidebar .side-add-btn.btn-primary:hover {
    filter: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--sidebar-text-active);
}
.side-add-icon { font-weight: 700; }
.side-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    font-size: 11px;
    color: var(--sidebar-text);
    margin-top: 10px;
}
.side-logout:hover { color: #ff8a8a; text-decoration: none; }

/* Профит-индикатор слева от названия (кампании / офферы) */
td[data-col="name"].profit-bar-plus { box-shadow: inset 3px 0 0 var(--green); }
td[data-col="name"].profit-bar-minus { box-shadow: inset 3px 0 0 var(--red); }
.compact-grid-table td[data-col="name"] { position: relative; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    position: sticky;
    top: 0;
    z-index: 10;
}
.sidebar-toggle {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    font-size: 14px;
    color: var(--muted);
}
.sidebar-toggle:hover { color: var(--text); background: var(--bg3); }
.app.sidebar-collapsed .sidebar-toggle,
html.sidebar-collapsed-init .app .sidebar-toggle { transform: rotate(180deg); }
.page-title { font-size: 14px; font-weight: 600; margin: 0; min-width: 0; flex: 1; letter-spacing: -0.02em; }
.kpi-val { letter-spacing: -0.02em; }
.page-bar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.currency-toggle {
    display: inline-flex;
    border: 1px solid var(--border2);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg3);
}
.currency-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 10px;
    cursor: pointer;
}
.currency-toggle-btn:hover { color: var(--text); background: var(--bg2); }
.currency-toggle-btn.active {
    color: var(--text);
    background: var(--accent);
}
.theme-toggle { font-size: 15px; }
.content { padding: 10px 14px; flex: 1; }
.auth-page-wrap { min-height: 100vh; }

/* ---- Toolbar ---- */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; }
.toolbar-left { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.btn-refresh {
    font-size: 16px;
    line-height: 1;
    min-width: 32px;
    padding: 0 10px;
}
.btn-refresh.is-spinning { animation: spin-refresh 0.8s linear infinite; }
@keyframes spin-refresh { to { transform: rotate(360deg); } }
.sep { color: var(--border2); }

/* ---- Filters ---- */
.filter-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 12px;
}
.filter-panel-compact {
    padding: 6px 10px;
    margin-bottom: 8px;
}
.filter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.filter-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.filter-search-field {
    margin: 0;
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 280px;
}
.filter-search-field input,
.filter-search-input {
    width: 100%;
    min-width: 180px;
    height: 28px;
    margin-top: 3px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 12px;
}
.filter-search-input:focus {
    outline: none;
    border-color: var(--primary);
}
.filter-search-input::-webkit-search-cancel-button {
    cursor: pointer;
}
.filter-panel-compact .filter-presets { margin-bottom: 0; flex: 1; min-width: 0; }
.filter-panel-compact .filter-grid { gap: 6px 10px; }
.filter-presets { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.filter-panel-compact .f-label input,
.filter-panel-compact .f-label select {
    height: 26px;
    margin-top: 2px;
}
.preset {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--bg3);
    text-decoration: none;
}
.preset:hover { color: var(--text); border-color: var(--border2); text-decoration: none; }
.preset.active {
    background: rgba(91,106,240,.15);
    border-color: rgba(91,106,240,.4);
    color: #a5b4fc;
}

.camp-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}
.camp-tab {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.camp-tab:hover { color: var(--text); text-decoration: none; }
.camp-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.logs-tabs { align-items: center; }
.logs-total { margin-left: auto; font-size: 11px; padding-right: 4px; }
.logs-table { min-width: 1600px; }
.logs-table .raw-cell { max-width: 220px; font-size: 11px; }
.pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    font-size: 12px;
}
.pager-info { color: var(--muted); }
.alert-err { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #fca5a5; }

.campaign-links { flex-wrap: wrap; }
.campaign-links .copy { display: inline-flex; align-items: center; gap: 4px; }

.alias-block {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.alias-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.alias-head .hint { margin: 0; }
.alias-head #alias-copy-all { margin-left: auto; }
.alias-title { font-size: 12px; font-weight: 600; }
.alias-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.alias-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.alias-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 220px;
}
.alias-code-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 200px;
}
.alias-prefix { color: var(--muted); white-space: nowrap; }
.alias-input {
    flex: 1;
    min-width: 80px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.alias-note-input {
    width: 100%;
    font-size: 11px;
}
.alias-url-copy { cursor: pointer; }
.alias-url-copy .copy-btn { white-space: nowrap; }

.copy-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg3);
    cursor: pointer;
    max-width: 100%;
}
.copy-chip code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.copy-chip:hover { border-color: var(--border2); }

.link-cell { position: relative; }
.link-cell .copy-chip { margin-right: 4px; }
.btn-link.alias-more {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 11px;
    padding: 0 4px;
}
.alias-pop {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 320px;
    padding: 8px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.alias-pop .copy-chip code { max-width: 260px; }
.campaign-links { gap: 6px; }

.filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: flex-end;
}
.f-label { font-size: 11px; color: var(--muted); font-weight: 500; margin: 0; }
.f-label input, .f-label select {
    display: block;
    margin-top: 3px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    min-width: 110px;
}
.f-check { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); padding-bottom: 4px; white-space: nowrap; }
.f-check input { margin: 0; }

.filter-mobile-toggle { display: none; }

.act-favorite { color: var(--muted); }
.act-favorite.is-active {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.1);
}
.act-favorite.is-active:hover { color: #fcd34d; }

.act-fav-form {
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
.act-fav-form button.act-icon {
    font: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

tr.row-favorite > td:first-child {
    box-shadow: inset 3px 0 0 #fbbf24;
}

.offers-table .col-actions { min-width: 118px; }

/* ---- KPI row ---- */
.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.kpi {
    flex: 1;
    min-width: 72px;
    background: var(--bg2);
    padding: 5px 8px;
    text-align: center;
}
.kpi-val { display: block; font-size: 13px; font-weight: 700; line-height: 1.15; }
.kpi-lbl { display: block; font-size: 9px; color: var(--muted); margin-top: 1px; text-transform: uppercase; letter-spacing: .03em; }

/* ---- Panels / cards ---- */
.panel, .card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}
.panel-h, .card h2 {
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    margin: 0;
}
.panel-h-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 10px;
}
.panel-h-split .panel-h-title { min-width: 0; }
.panel-h-split .stats-grid-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.card { padding: 0; }
.card > h2:first-child { border-bottom: 1px solid var(--border); }
.card > *:not(h2):not(.panel-h) { padding: 12px; }
.card-head { padding: 12px; border-bottom: 1px solid var(--border); }
.hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.empty-state { padding: 30px; text-align: center; color: var(--muted); }

.panel-grid { display: grid; grid-template-columns: 1fr 240px; gap: 12px; margin-bottom: 12px; align-items: start; }
.panel-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.panel-main > .panel { margin-bottom: 0; }
.panel-col { display: flex; flex-direction: column; gap: 12px; }
.panel-col .panel { margin-bottom: 0; }

/* ---- Tables ---- */
.table-wrap, .table-scroll { overflow-x: auto; }
.data-table, .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.data-table th, .table th {
    padding: 6px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table td, .table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.data-table tr:last-child td, .table tr:last-child td { border-bottom: none; }
.data-table.compact td, .data-table.compact th { padding: 4px 8px; }
.data-table tfoot tr.grid-totals-row {
    border-top: 1px solid var(--border2);
    background: var(--bg3);
}
.data-table tfoot tr.grid-totals-row td {
    padding-top: 8px;
    padding-bottom: 8px;
    font-weight: 600;
}
[data-theme="light"] .data-table tfoot tr.grid-totals-row {
    background: var(--bg3);
}
.stats-link-table .stats-link-filter { color: inherit; text-decoration: none; }
.stats-link-table .stats-link-filter:hover code { color: var(--accent); }
.stats-link-table tr.row-active { background: rgba(91, 141, 239, 0.12); }
.stats-link-filter-hint { margin: 0 0 10px; }
.data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.data-table tbody tr.spend-edit-row {
    background: transparent;
}
.data-table tbody tr.spend-edit-row:hover {
    background: transparent;
}
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.05); }

.grid-table th,
.grid-table td {
    border-right: 1px solid var(--border);
}
.grid-table th:last-child,
.grid-table td:last-child {
    border-right: none;
}
.grid-table .acts {
    justify-content: center;
}
.grid-table .col-actions {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
    padding: 6px 4px;
    vertical-align: middle;
    text-align: center;
}
.grid-table td.col-actions .acts {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.stats-grid-wrap .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
table.stats-grid {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}
table.stats-grid th,
table.stats-grid td {
    white-space: nowrap;
}
table.stats-grid .c.num {
    overflow: visible;
    text-overflow: clip;
}

.compact-grid-table {
    font-size: 11px;
}
.compact-grid-table th,
.compact-grid-table td {
    vertical-align: middle;
}
.compact-grid-table th {
    padding: 3px 7px;
    font-size: 9px;
    letter-spacing: .03em;
    line-height: 1.2;
}
.compact-grid-table td {
    padding: 2px 7px;
    line-height: 1.25;
}
.compact-grid-table .c.num {
    width: 1%;
    padding-left: 6px;
    padding-right: 6px;
}
.compact-grid-table .col-actions {
    width: 1%;
    min-width: 96px;
    max-width: none;
    padding: 2px 4px;
    text-align: center;
}
.compact-grid-table .col-actions .acts {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
}
.compact-grid-table .act-icon {
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-radius: 3px;
}
.compact-grid-table .act-icon.act-stats .act-stats-ico {
    width: 12px;
    height: 12px;
}
.compact-grid-table th[data-sort]:not([data-sort="none"]) {
    padding-right: 12px;
}

.campaigns-table .col-actions { min-width: 118px; }
.campaigns-table td[data-col="name"] {
    min-width: 120px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.campaigns-table td[data-col="name"] .row-link {
    font-size: 11px;
}
.campaigns-table td[data-col="name"] .tag {
    font-size: 9px;
    padding: 1px 4px;
    margin-left: 4px;
    vertical-align: middle;
}
.campaigns-table td[data-col="link"] {
    min-width: 72px;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.campaigns-table td[data-col="link"] .copy {
    font-size: 10px;
}
.campaigns-table td[data-col="link"] .copy-btn {
    font-size: 10px;
    padding: 0 2px;
}

.offers-table .col-id {
    width: 1%;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 10px;
    color: var(--muted);
}
.offers-table .col-offer {
    min-width: 140px;
    max-width: 260px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}
.offers-table .col-geo {
    width: 1%;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
}
.offers-table .col-partner {
    min-width: 72px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.offers-table .col-stat {
    width: 1%;
    padding-left: 6px;
    padding-right: 6px;
}
.offers-table th.col-offer,
.offers-table td.col-offer { text-align: left; }
.offers-table .offer-name-link {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 11px;
    font-weight: 600;
}
.offers-table .geo-flag-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.offers-table .geo-flag-only .geo-flag-icon {
    width: 16px;
    height: 12px;
    border-radius: 1px;
}
.offers-table .geo-flag-empty { font-size: 10px; }

/* ---- Stats grid (sort / reorder / columns) ---- */
.stats-grid-wrap { min-width: 0; }
.stats-grid-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.stats-grid-cols-wrap { position: relative; }
.stats-grid-cols-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 180px;
    max-height: 280px;
    overflow: auto;
    padding: 6px 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.stats-grid-cols-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}
.stats-grid-cols-menu label:hover { background: rgba(255,255,255,.04); }
.stats-grid-cols-menu input { margin: 0; }
.stats-grid th[data-sort]:not([data-sort="none"]) {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px;
}
.stats-grid th[data-sort]:not([data-sort="none"]):hover { color: var(--text); }
.stats-grid th.sort-asc::after,
.stats-grid th.sort-desc::after {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    opacity: .85;
}
.stats-grid th.sort-asc::after { content: '▲'; }
.stats-grid th.sort-desc::after { content: '▼'; }
.stats-grid th[data-col-fixed] { cursor: default; }
.stats-grid th[draggable="true"] { cursor: grab; }
.stats-grid th.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}
.stats-grid th.col-hidden,
.stats-grid td.col-hidden { display: none; }
.stats-grid th.col-dragging { opacity: .45; }

/* ---- Modal ---- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
}
.modal[hidden] {
    display: none !important;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.modal-dialog {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.modal-dialog-wide { width: min(760px, 100%); }
.camp-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
.modal-body {
    padding: 16px;
}
.modal-close {
    flex-shrink: 0;
}
body.modal-open {
    overflow: hidden;
}
[data-theme="light"] .modal-backdrop {
    background: rgba(15, 23, 42, 0.35);
}
[data-theme="light"] .modal-dialog {
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.row-link { font-weight: 600; color: var(--text); }
.row-link:hover { color: var(--primary); text-decoration: none; }
.acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}
.act-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid var(--border2);
    background: var(--bg3);
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}
.act-icon:hover { color: var(--text); border-color: #3d4660; background: #1e2433; text-decoration: none; }
.act-icon.act-stats {
    color: var(--primary);
    background: rgba(91, 106, 240, .14);
    border-color: rgba(91, 106, 240, .4);
}
.act-icon.act-stats .act-stats-ico {
    display: block;
    flex-shrink: 0;
}
.act-icon.act-stats:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}
.act-icon.act-danger { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }
.act-icon.act-danger:hover { color: #fecaca; background: rgba(239,68,68,.16); }
.act-cell { width: 36px; text-align: center; white-space: nowrap; }
.btn.danger { color: #fca5a5; border-color: rgba(239,68,68,.35); }
.btn.danger:hover { background: rgba(239,68,68,.1); color: #fecaca; }

/* ---- Tags / badges ---- */
.tag, .badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    text-transform: lowercase;
}
.tag-lead, .badge-status-lead { background: rgba(234,179,8,.12); color: var(--yellow); }
.tag-sale, .badge-status-sale, .badge-on { background: rgba(34,197,94,.12); color: var(--green); }
.tag-rebill, .badge-status-rebill { background: rgba(91,106,240,.12); color: var(--primary); }
.tag-rejected, .badge-status-rejected { background: rgba(239,68,68,.12); color: var(--red); }
.tag-pause, .badge-off { background: rgba(234,179,8,.1); color: var(--yellow); }
.tag-warn { background: rgba(249,115,22,.12); color: #fb923c; }
.tag-ok { background: rgba(34,197,94,.12); color: var(--green); }
.logs-inbound-hint { margin: 0 0 10px; font-size: 11px; }

/* ---- Domains ---- */
.domains-toolbar { margin-bottom: 12px; }
.domain-add-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.domain-add-label {
    flex: 1;
    min-width: min(100%, 320px);
    margin: 0;
}
.domain-add-caption {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
}
.domain-add-label input {
    width: 100%;
}
.domains-table .domain-host-link {
    font-weight: 600;
    color: var(--text);
}
.domains-table .domain-host-link:hover { color: var(--primary); text-decoration: none; }
.domain-url-hint { margin-top: 2px; font-size: 10px; }
.domains-table .col-num { width: 90px; text-align: center; }
.domains-table .col-actions { width: 140px; }
.domain-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
.domain-delete-form { display: inline; margin: 0; }
.domain-link-copy,
.domain-base-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
}
.domain-example-code {
    font-size: 11px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.badge-config { background: rgba(91,106,240,.14); color: var(--primary); text-transform: none; }
.badge-extra { background: rgba(148,163,184,.12); color: var(--muted); text-transform: none; }
.domains-setup-body { padding: 12px; }
.domains-steps {
    margin: 0 0 14px;
    padding-left: 20px;
    color: var(--text);
    font-size: 12px;
    line-height: 1.55;
}
.domains-steps li + li { margin-top: 8px; }
.domains-snippet-label { display: block; margin-top: 14px; }
.domains-snippet-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg3);
}
.domains-snippet {
    flex: 1;
    min-width: min(100%, 280px);
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

/* ---- Offer stats charts ---- */
.offer-stats-toolbar .offer-stats-title {
    font-weight: 600;
    font-size: 14px;
}
.offer-stats-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.offer-stats-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.offer-stats-switcher-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.offer-stats-select {
    min-width: min(100%, 320px);
    max-width: min(100%, 420px);
    height: 34px;
    padding: 0 32px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg3);
    cursor: pointer;
}
.offer-stats-select:hover {
    border-color: var(--border2);
}
.offer-stats-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91, 106, 240, 0.25);
}
.offer-stats-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 18, 25, 0.55);
    backdrop-filter: blur(3px);
}
.offer-stats-loader[hidden] {
    display: none !important;
}
.offer-stats-loader-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 220px;
    padding: 22px 28px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.offer-stats-loader-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(91, 106, 240, 0.18);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: offer-stats-spin 0.75s linear infinite;
}
.offer-stats-loader-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
}
html.offer-stats-loading {
    overflow: hidden;
}
@keyframes offer-stats-spin {
    to { transform: rotate(360deg); }
}
[data-theme="light"] .offer-stats-loader {
    background: rgba(248, 250, 252, 0.72);
}
.offer-stats-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.offer-stats-table-panel {
    max-width: 980px;
}
.offer-stats-table-wrap {
    padding: 0 12px 12px;
    overflow-x: auto;
}
.offer-stats-table {
    width: 100%;
    table-layout: fixed;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.offer-stats-table th,
.offer-stats-table td {
    padding: 7px 10px;
    vertical-align: middle;
    white-space: nowrap;
}
.offer-stats-table thead th {
    font-size: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--muted);
}
.offer-stats-table .col-period {
    width: 168px;
    text-align: left;
    font-weight: 500;
}
.offer-stats-table .col-num {
    width: 72px;
    text-align: right;
}
.offer-stats-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}
.offer-stats-table .empty-cell {
    text-align: center;
    padding: 16px;
}
[data-theme="light"] .offer-stats-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.03);
}
.offer-chart-panel .panel-h-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.offer-chart-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}
.offer-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.offer-chart-toggles {
    gap: 14px;
}
.offer-chart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}
.offer-chart-toggle input {
    margin: 0;
    cursor: pointer;
}
.offer-chart-cr-hint {
    display: block;
    padding: 0 12px 6px;
    font-size: 10px;
    color: var(--muted);
}
.offer-chart-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.offer-chart-dot--clicks { background: var(--primary); }
.offer-chart-dot--lead { background: var(--yellow); }
.offer-chart-dot--sale { background: var(--green); }
.offer-chart-wrap {
    padding: 8px 12px 12px;
    min-height: 220px;
}
.offer-chart-wrap svg {
    display: block;
    width: 100%;
    height: auto;
}
.offer-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: var(--muted);
    font-size: 12px;
}
.offer-chart-tooltip {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text);
    font-size: 11px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity .12s ease;
}
.offer-chart-tooltip.is-visible { opacity: 1; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { border-color: var(--border2); text-decoration: none; }
.btn-sm { height: 26px; padding: 0 10px; font-size: 11px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-block { width: 100%; }

/* ---- Forms ---- */
label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 10px; font-weight: 500; }
label .tip { font-weight: 400; font-size: 10px; color: #4a5568; }

input[type=text], input[type=url], input[type=password], input[type=date], input[type=number], select, textarea {
    width: 100%;
    margin-top: 4px;
    height: 30px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-size: 12px;
}
input:focus, select:focus { outline: none; border-color: var(--primary); }
.checkbox, .f-check { display: flex; align-items: center; gap: 6px; color: var(--text); }
.checkbox input { width: auto; margin: 0; height: auto; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-footer { display: flex; gap: 8px; margin-top: 8px; }
.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.page-head h1 { font-size: 15px; margin: 0; }

/* ---- Auth ---- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    position: relative;
    overflow: hidden;
}
.auth-page-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% -20%, rgba(91, 106, 240, 0.22), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 80%, rgba(34, 197, 94, 0.08), transparent 50%),
        radial-gradient(ellipse 40% 35% at 0% 90%, rgba(91, 106, 240, 0.08), transparent 50%),
        var(--bg);
}
.auth-panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 36px 32px 32px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand-mark {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.1;
}
.auth-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.auth-alert { margin-bottom: 18px; }
.auth-form label {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}
.auth-form input {
    display: block;
    width: 100%;
    margin-top: 6px;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
}
.auth-submit { margin-top: 6px; height: 40px; font-size: 13px; border-radius: 8px; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 20px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.btn-tg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    border-radius: 8px;
    background: #2aabee;
    border: 1px solid #2aabee;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.btn-tg:hover { background: #1f95d3; border-color: #1f95d3; color: #fff; text-decoration: none; }
.btn-tg svg { width: 20px; height: 20px; flex-shrink: 0; }
.alert-warn { background: rgba(234,179,8,.08); border-color: rgba(234,179,8,.25); color: #fde68a; }
.auth-uri-wrap { display: block; margin-top: 8px; font-size: 11px; }
.auth-uri { word-break: break-all; display: block; margin-top: 4px; }
.auth-gate { text-align: center; padding: 4px 0; }
.auth-gate-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 50%;
}
.auth-gate h1 { font-size: 18px; color: var(--text); font-weight: 600; margin: 0 0 10px; letter-spacing: -0.02em; }
.auth-gate p { margin-bottom: 18px; font-size: 13px; line-height: 1.5; }
[data-theme="light"] .auth-page-bg {
    background:
        radial-gradient(ellipse 90% 70% at 50% -20%, rgba(91, 106, 240, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 40% at 100% 80%, rgba(34, 197, 94, 0.06), transparent 50%),
        var(--bg);
}
[data-theme="light"] .auth-panel {
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .alert-warn { color: #854d0e; }
.user-cell-compact { display: inline-flex; align-items: center; gap: 8px; }
.user-avatar-sm { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.panel-section + .panel-section { border-top: 1px solid var(--border); }
.inline-form { display: inline; margin: 0; }

/* ---- Alerts ---- */
.alert {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 12px;
    border: 1px solid;
}
.alert { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); color: #fca5a5; }
.alert-ok { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); color: #86efac; }

/* ---- Copy ---- */
.copy { display: inline-flex; align-items: center; gap: 4px; }
.copy-btn {
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--muted);
    cursor: pointer;
    padding: 0 5px;
    font-size: 10px;
    line-height: 18px;
}
.copy-btn:hover { color: var(--text); }
.copy-btn.done { color: var(--green); }

/* ---- Campaign form ---- */
.toolbar .toolbar-left .page-title { font-size: 14px; font-weight: 600; color: var(--text); }
.toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.campaign-settings { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.cs-grid {
    display: grid;
    grid-template-columns: 1fr 160px 150px;
    gap: 12px;
    align-items: end;
}
.cs-field { margin: 0; display: block; }
.cs-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 5px;
}
.cs-label .muted { font-weight: 400; }
.cs-field input,
.cs-field select { margin-top: 0; height: 34px; }

/* toggle switch */
.cs-field-status { display: flex; flex-direction: column; }
.cs-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    transition: background .15s ease, border-color .15s ease;
    flex-shrink: 0;
}
.cs-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .15s ease, background .15s ease;
}
.cs-switch input:checked + .cs-switch-track {
    background: rgba(34,197,94,.25);
    border-color: rgba(34,197,94,.55);
}
.cs-switch input:checked + .cs-switch-track .cs-switch-thumb {
    transform: translateX(18px);
    background: var(--green);
}
.cs-switch-text { font-size: 12px; color: var(--text); font-weight: 500; }

.tip { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.hint { font-size: 11px; color: var(--muted); margin-top: 4px; }

.flows-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 0;
    flex-wrap: wrap;
}
.flows-head-info { min-width: 0; }
.flows-head-title { border: 0 !important; padding: 0 !important; font-size: 13px; }
.flows-head-info .hint { margin-top: 5px; max-width: 460px; }
.flows-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.flows-quick-label { font-size: 11px; margin-right: 2px; }
.flow-day-toggle { margin-top: 10px; margin-bottom: 0; }
.flows-empty {
    margin: 0 14px 14px;
    padding: 22px 14px;
    font-size: 12px;
    text-align: center;
    border: 1px dashed var(--border2);
    border-radius: 8px;
    background: rgba(0,0,0,.1);
}

.form-footer {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
}
.sticky-footer {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    padding-bottom: 16px;
    z-index: 5;
}

/* ---- Flow cards ---- */
.flow-list {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flow-card {
    background: var(--flow-bg);
    border: 1px solid var(--flow-border);
    border-radius: 10px;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow: var(--flow-shadow);
    border-left: 4px solid rgba(91,106,240,.8);
}
.flow-card[data-action="redirect"] {
    border-left-color: rgba(91,106,240,.8);
}
.flow-card[data-action="block"] {
    background: linear-gradient(135deg, rgba(239,68,68,.06) 0%, var(--flow-bg) 38%);
    border-color: rgba(239,68,68,.32);
    border-left-color: rgba(239,68,68,.85);
}
.flow-card-closing {
    border-left-color: rgba(239,68,68,.95);
}
.flow-card-closing .flow-name::after {
    content: 'замыкающий';
    margin-left: 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--red);
    opacity: 0.85;
}
.flow-card[data-expanded="0"] .flow-header { border-bottom: none; }
.flow-card[data-expanded="0"] { opacity: .94; }
.flow-card[data-expanded="0"]:hover { opacity: 1; }

.flow-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--flow-head);
    border-bottom: 1px solid var(--flow-border);
}
.flow-drag { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.flow-num {
    font: 12px var(--mono);
    color: #8b93a8;
    min-width: 26px;
    font-weight: 700;
}
.flow-move { display: flex; flex-direction: column; gap: 2px; }
.flow-move .btn-icon { width: 22px; height: 15px; font-size: 9px; }
.flow-name {
    flex: 1;
    min-width: 100px;
    height: 32px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg);
    border-color: var(--border2);
}
.flow-clicks {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font: 12px var(--mono);
    font-weight: 700;
    color: #a5b4fc;
    background: rgba(91,106,240,.12);
    border: 1px solid rgba(91,106,240,.28);
    border-radius: 999px;
    padding: 3px 10px;
}
.flow-clicks-label { font: 9px var(--font); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.flow-preview {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: #9aa3b8;
    padding: 0 6px;
}
.flow-card[data-action="redirect"] .flow-preview { color: #a5b4fc; }
.flow-card[data-action="block"] .flow-preview { color: #fca5a5; }
.flow-tools { display: flex; gap: 4px; flex-shrink: 0; }

.btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--border2);
    background: var(--bg3);
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-icon:hover { color: var(--text); border-color: #3d4660; background: #1e2433; }
.btn-icon:disabled { opacity: .35; cursor: not-allowed; }
.btn-icon.danger { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.08); }
.btn-icon.danger:hover { background: rgba(239,68,68,.16); }
.btn-icon.btn-copy { color: #93c5fd; border-color: rgba(91,106,240,.35); }
.btn-icon.btn-copy:hover { color: #bfdbfe; background: rgba(91,106,240,.12); }

/* ==== Flow body: IF / THEN blocks ==== */
.flow-body {
    padding: 16px 14px 14px;
    background: rgba(255,255,255,.015);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fblock {
    border: 1px solid var(--flow-border);
    border-radius: 9px;
    background: var(--bg2);
    overflow: hidden;
}
.fblock-h {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: var(--flow-head);
    border-bottom: 1px solid var(--flow-border);
}
.fblock-step {
    flex-shrink: 0;
    min-width: 38px;
    padding: 3px 0;
    border-radius: 5px;
    text-align: center;
    font: 700 11px var(--font);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.fblock-when .fblock-step {
    background: rgba(124,138,255,.16);
    border: 1px solid rgba(124,138,255,.4);
    color: #aab3ff;
}
.fblock-then .fblock-step {
    background: rgba(34,197,94,.16);
    border: 1px solid rgba(34,197,94,.4);
    color: #86efac;
}
.flow-card[data-action="block"] .fblock-then .fblock-step {
    background: rgba(239,68,68,.16);
    border-color: rgba(239,68,68,.4);
    color: #fca5a5;
}
.fblock-title { font-size: 12px; font-weight: 700; color: var(--text); }
.fblock-note { font-size: 10px; margin-left: auto; text-align: right; }
.fblock-b { padding: 14px; display: flex; flex-direction: column; gap: 16px; }

/* conditions grid */
.cond-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cond-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.cond-row-2 { grid-template-columns: 1fr 1fr; }
.cond-cell { margin: 0; min-width: 0; }
.cond-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
}
.cond-cell select,
.cond-cell input { margin-top: 0; height: 32px; }
.rule-conditions { display: flex; flex-direction: column; gap: 14px; }

/* action choice cards */
.action-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid var(--border2);
}
.choice-ic { font-size: 18px; line-height: 1.1; flex-shrink: 0; }
.choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-text strong { font-size: 13px; font-weight: 700; color: var(--text); }
.choice-text small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.choice-card.active {
    background: rgba(91,106,240,.12);
    border-color: rgba(91,106,240,.6);
    box-shadow: inset 0 0 0 1px rgba(91,106,240,.45);
}
.choice-card.active .choice-ic { color: #a5b4fc; }
.choice-card.pill-danger.active {
    background: rgba(239,68,68,.1);
    border-color: rgba(239,68,68,.55);
    box-shadow: inset 0 0 0 1px rgba(239,68,68,.4);
}
.choice-card.pill-danger.active .choice-ic { color: #fca5a5; }

/* offers zone */
.offers-zone {
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 12px;
    background: rgba(0,0,0,.12);
}
.offers-zone-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.offers-zone-head .cond-label { margin: 0; flex: 1; }

/* language controls */
.lang-controls { display: flex; flex-direction: column; gap: 8px; }

.pill-group { margin-bottom: 12px; }
.pill-group:last-child { margin-bottom: 0; }
.pill-label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 5px;
}
.pill-label .muted { font-size: 10px; }
.pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pill-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    background: var(--bg);
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.3;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pill-btn:hover { color: var(--text); border-color: #3d4660; }
.pill-btn.active {
    background: rgba(91,106,240,.18);
    border-color: rgba(91,106,240,.5);
    color: #bcc4ff;
}
.pill-btn.pill-danger.active {
    background: rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.45);
    color: #fca5a5;
}
/* segmented control: connected buttons that fill the row */
.pills.seg { gap: 0; border: 1px solid var(--border2); border-radius: 7px; overflow: hidden; background: var(--bg); }
.pills.seg .pill-btn {
    flex: 1;
    border: 0;
    border-radius: 0;
    border-left: 1px solid var(--border2);
    text-align: center;
    background: transparent;
}
.pills.seg .pill-btn:first-child { border-left: 0; }

.rule-offer-wrap select { margin-top: 0; }
.offer-split-total {
    font: 12px var(--mono);
    font-weight: 700;
    color: #93c5fd;
    min-width: 40px;
    text-align: right;
}
.offer-split-total.is-bad { color: #fca5a5; }
.flow-offers-list { display: flex; flex-direction: column; gap: 7px; }
.offer-split-row {
    display: grid;
    grid-template-columns: 1fr 64px 14px 28px;
    gap: 7px;
    align-items: center;
}
.offer-split-row select,
.offer-split-row input {
    margin: 0;
    height: 32px;
    font-size: 12px;
}
.offer-split-pct { font-size: 12px; color: var(--muted); }
.offer-split-hint { margin-top: 7px; font-size: 10px; line-height: 1.4; }
.btn-add-offer { padding: 3px 10px; font-size: 11px; }

.flow-block-hint {
    display: none;
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    background: rgba(239,68,68,.07);
    border: 1px solid rgba(239,68,68,.22);
    border-radius: 6px;
    color: #fca5a5;
}
.flow-block-hint strong { color: #fecaca; }
.flow-card[data-action="block"] .flow-block-hint { display: block; }

.flow-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.flow-fields-2 { grid-template-columns: 1fr 1fr; margin-top: 9px; }
.ff { margin: 0; }
.ff span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.ff input, .ff select { margin-top: 0; height: 32px; }
.ff .rule-geo { min-width: 0; width: 100%; }

.flow-advanced {
    margin-top: 12px;
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 0 10px 10px;
    background: rgba(0,0,0,.12);
}
.flow-advanced summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
    padding: 9px 0;
    user-select: none;
}
.flow-advanced summary:hover { color: var(--text); }

.flow-lang-block { margin-top: 12px; }
.flow-lang-block.is-any .rule-lang-pick,
.flow-lang-block.is-any .lang-hint { opacity: .45; pointer-events: none; }
.rule-lang-pick {
    width: 100%;
    min-height: 78px;
    margin-top: 6px;
    background: var(--bg);
    border: 1px solid var(--border2);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    padding: 5px;
}
.lang-hint { margin-top: 5px; font-size: 10px; }

.param-value-wrap { display: flex; gap: 6px; }
.param-value-wrap select, .param-value-wrap input { margin-top: 0; flex: 1; }

.offer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.offer-grid-url { grid-column: 1 / -1; }
.offer-cap-fieldset { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.offer-cap-fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.offer-cap-grid {
    margin-top: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.offer-cap-grid-fallback { grid-column: 1 / -1; }
.offer-cap-grid label,
.offer-cap-grid-fallback { min-width: 0; }
.offer-cap-grid select,
.offer-cap-grid input { width: 100%; max-width: 100%; box-sizing: border-box; }
.offer-cap-mode {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.offer-cap-mode-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.offer-cap-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
.offer-cap-mode-option input { margin-top: 3px; flex-shrink: 0; }
.offer-cap-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 6px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
    cursor: help;
}
.offer-cap-icon--active {
    background: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .28);
}
.offer-cap-icon--reached {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .28);
}
.offer-name-link {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    max-width: 100%;
}
.offer-name-text { min-width: 0; }
.offer-row-cap-active { background: rgba(245, 158, 11, .04); }
.offer-row-cap-reached { background: rgba(34, 197, 94, .05); }
.offer-cap-legend { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; margin-right: 12px; }
.offer-cap-legend .offer-cap-icon { margin-left: 0; cursor: default; }
.panel-h-split .offer-cap-legend { flex: 0 0 auto; }
.flow-offer-cap-hints {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.flow-offer-cap-hint {
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    border-left: 3px solid #f59e0b;
    background: rgba(245, 158, 11, .08);
    line-height: 1.45;
    color: var(--text);
}
.flow-offer-cap-hint.is-reached {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, .08);
}
.reports-pivot-filters { margin-bottom: 12px; }

/* ---- Report (Keitaro-style) ---- */
.report-page { display: flex; flex-direction: column; gap: 0; }
.report-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.report-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.03em;
}
.report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.report-tab {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.report-tab:hover {
    color: var(--text);
    background: var(--bg3);
    text-decoration: none;
}
.report-tab.is-active {
    color: var(--text);
    background: var(--bg2);
    border-color: var(--border2);
}
.report-toolbar { margin-bottom: 12px; }
.report-toolbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.report-grouping {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}
.report-group-slot {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.report-group-select {
    width: auto;
    min-width: 120px;
    max-width: 180px;
    height: 32px;
    margin: 0;
    padding: 0 28px 0 10px;
    font-size: 12px;
    border-radius: 6px;
    background: var(--bg2);
}
.report-group-clear {
    position: absolute;
    right: 22px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.report-group-clear:hover { color: var(--text); }
.report-group-arrow {
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
}
.report-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.report-filters-btn { position: relative; }
.report-filters-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
.report-date-select-wrap { margin: 0; }
.report-date-select {
    width: auto;
    min-width: 130px;
    height: 32px;
    margin: 0;
    font-size: 12px;
    border-radius: 6px;
}
.report-custom-dates {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.report-custom-dates.is-hidden { display: none; }
.report-custom-dates input[type=date] {
    width: 132px;
    height: 32px;
    margin: 0;
    font-size: 12px;
}
.report-date-sep { color: var(--muted); font-size: 12px; }
.report-refresh-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: var(--muted);
}
.report-refresh-icon {
    display: inline-block;
    line-height: 1;
    font-size: 18px;
}
.report-refresh-btn:hover { color: var(--text); }
.report-refresh-btn.is-spinning .report-refresh-icon {
    animation: spin-refresh 0.8s linear infinite;
}
.report-status {
    min-height: 18px;
    margin-bottom: 8px;
    font-size: 12px;
}
.report-table-panel { overflow: visible; }
.report-table-panel > .table-wrap { overflow: auto; }
.report-table-headbar { padding: 8px 12px; }
.report-table-hint { font-size: 11px; font-weight: 500; }
.report-table-actions { display: flex; gap: 8px; align-items: center; }
.report-cols-wrap { position: relative; }
.report-cols-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 120;
    min-width: 180px;
    max-height: 320px;
    overflow: auto;
    padding: 6px 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.report-cols-menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 0;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    background: var(--bg);
}
.report-cols-menu label:hover { background: var(--bg2); }
.report-cols-menu input { margin: 0; flex-shrink: 0; }
.report-table-headbar { position: relative; z-index: 10; }
.report-table { font-size: 12px; }
.report-table th,
.report-table td { white-space: nowrap; }
.report-table .col-dim { text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; position: relative; }
.report-table td.profit-bar-plus { box-shadow: inset 3px 0 0 var(--green); }
.report-table td.profit-bar-minus { box-shadow: inset 3px 0 0 var(--red); }
.report-table tfoot td.profit-bar-plus { box-shadow: inset 3px 0 0 var(--green); }
.report-table tfoot td.profit-bar-minus { box-shadow: inset 3px 0 0 var(--red); }
.report-table .col-num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table th[data-sort]:not([data-sort="none"]) {
    cursor: pointer;
    user-select: none;
    padding-right: 16px;
}
.report-table th[data-sort]:not([data-sort="none"]):hover { color: var(--text); }
.report-table th.sort-asc::after,
.report-table th.sort-desc::after {
    position: absolute;
    right: 4px;
    font-size: 9px;
    opacity: .7;
}
.report-table th.sort-asc::after { content: '▲'; }
.report-table th.sort-desc::after { content: '▼'; }
.report-table th[data-sort] { position: relative; }
.report-table .col-hidden { display: none; }
.report-table tfoot td {
    font-weight: 700;
    background: rgba(91, 106, 240, .08);
    border-top: 1px solid var(--border2);
}
.report-filters-body { padding-top: 4px; }
.report-filter-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.report-filter-row {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 130px minmax(220px, 1.6fr) 28px;
    gap: 8px;
    align-items: center;
}
.report-filter-row select,
.report-filter-row input[type=text] {
    height: 34px;
    margin: 0;
    font-size: 12px;
    border-radius: 6px;
}
.report-filter-value {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}
.report-filter-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.report-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg3);
    border: 1px solid var(--border2);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.report-filter-tag-remove {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.report-filter-tag-remove:hover { color: var(--text); }
.report-filter-tags-picker,
.report-filter-text-input {
    width: 110px;
    min-width: 90px;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    background: var(--bg2) !important;
    flex-shrink: 0;
}
.report-filter-text-input {
    flex: 1;
    width: auto;
    min-width: 120px;
}
.report-filter-remove {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.report-filters-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
}
.report-filters-footer-actions { display: flex; gap: 8px; }
.btn-link {
    border: 0;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}
.btn-link:hover { text-decoration: none; }

@media (max-width: 900px) {
    .report-toolbar-main { flex-direction: column; align-items: stretch; }
    .report-toolbar-actions { flex-wrap: wrap; }
    .report-filter-row {
        grid-template-columns: 1fr;
    }
}

.reports-pivot-panel { overflow: hidden; }
.reports-pivot-hint { padding: 0 16px 8px; margin: 0; line-height: 1.45; }
.reports-pivot-status { padding: 0 16px 10px; min-height: 18px; }
.reports-pivot-wrap {
    padding: 0 12px 16px;
    overflow-x: auto;
}
.reports-pivot-wrap .pvtUi {
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
}
.reports-pivot-wrap .pvtAxisContainer,
.reports-pivot-wrap .pvtRendererArea {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.reports-pivot-wrap .pvtAxisContainer li span.pvtAttr {
    background: var(--bg3);
    border: 1px solid var(--border2);
    color: var(--text);
    border-radius: 4px;
    padding: 4px 8px;
}
.reports-pivot-wrap .pvtAxisContainer li span.pvtAttr:hover {
    background: rgba(91, 106, 240, .15);
    border-color: var(--primary);
}
.reports-pivot-wrap table.pvtTable {
    background: var(--bg2);
    color: var(--text);
    font-size: 12px;
}
.reports-pivot-wrap table.pvtTable thead tr th,
.reports-pivot-wrap table.pvtTable tbody tr th {
    background: var(--bg3);
    color: var(--text);
    border-color: var(--border);
}
.reports-pivot-wrap table.pvtTable tbody tr td {
    border-color: var(--border);
    color: var(--text);
}
.reports-pivot-wrap .pvtGrandTotal,
.reports-pivot-wrap .pvtTotal {
    background: rgba(91, 106, 240, .08);
}
.reports-pivot-wrap select {
    background: var(--bg3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.reports-pivot-wrap .ui-sortable-placeholder {
    visibility: visible !important;
    background: rgba(91, 106, 240, .12);
    border: 1px dashed var(--accent);
    border-radius: 4px;
    min-height: 28px;
}
.reports-pivot-wrap .ui-sortable-helper {
    opacity: .92;
}
.reports-builder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.reports-builder-grid .f-label,
.reports-builder-grid .f-check {
    margin: 0;
}
.offer-url-preview-line {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
    word-break: break-all;
}
.offer-url-preview-line code { display: inline; white-space: normal; }
.filter-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; padding: 12px; }
.filter-row label { margin-bottom: 0; }
.filter-row select { width: auto; min-width: 140px; }

.postback-url { word-break: break-all; font-size: 11px; }
.actions { display: flex; gap: 10px; font-size: 11px; }
.actions a { color: var(--muted); }
.actions .danger { color: var(--red); }

/* Legacy stat cards → compact */
.stat-cards { display: contents; }
.stat-cards-4, .stat-cards-6 { display: contents; }
.stat { display: none; }

.spend-cell { white-space: nowrap; }
.spend-cell .btn-icon { margin-left: 4px; vertical-align: middle; }
.spend-tag { margin-left: 4px; font-size: 9px; vertical-align: middle; }
.spend-edit-cell { background: var(--bg2); padding: 6px 10px !important; }
.spend-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
}
.spend-form-inline { max-width: 100%; }
.spend-form-popover { flex-wrap: nowrap; }
.sf-label { margin: 0; font-size: 11px; white-space: nowrap; }
.sf-label input[type=text], .sf-label input[type=date], .sf-label select {
    width: auto;
    min-width: 0;
    max-width: 100px;
    height: 28px;
    font-size: 11px;
}
.sf-label input[type=date] { max-width: 130px; }
.spend-usd-preview { font-size: 11px; white-space: nowrap; }

/* Spend modal */
#campaign-spend-modal .modal-body { padding: 20px 22px 22px; }
#campaign-spend-modal .spend-form-card {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 18px 16px;
    margin-bottom: 22px;
}
#campaign-spend-modal .spend-form-note {
    margin: 0 0 16px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
#campaign-spend-modal .spend-modal-form label { margin-bottom: 0; }
#campaign-spend-modal .spend-modal-form .grid-2 { margin-bottom: 14px; }
#campaign-spend-modal .spend-modal-form input,
#campaign-spend-modal .spend-modal-form select {
    height: 36px;
    border-radius: 6px;
    font-size: 13px;
}
#campaign-spend-modal .spend-rate-wrap { margin-bottom: 14px; }
#campaign-spend-modal .spend-rate-wrap label { margin-bottom: 0; }
#campaign-spend-modal .spend-preview-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 8px;
}
#campaign-spend-modal .spend-preview-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
#campaign-spend-modal .spend-usd-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}
#campaign-spend-modal .spend-days-note { font-size: 12px; }
#campaign-spend-modal .spend-form-actions {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
#campaign-spend-modal .spend-form-actions .btn { min-width: 140px; }
#campaign-spend-modal .spend-section-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
#campaign-spend-modal .spend-empty {
    margin: 0;
    padding: 16px;
    text-align: center;
    font-size: 12px;
    background: var(--bg3);
    border: 1px dashed var(--border);
    border-radius: 8px;
}
#campaign-spend-modal .spend-list-wrap { margin-top: 0; }
#campaign-spend-modal .spend-edit-cell { padding: 14px 16px !important; }
#campaign-spend-modal .spend-inline-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    align-items: end;
}
#campaign-spend-modal .spend-inline-form label { margin-bottom: 0; }
#campaign-spend-modal .spend-inline-form input,
#campaign-spend-modal .spend-inline-form select {
    height: 34px;
    border-radius: 6px;
}
#campaign-spend-modal .spend-inline-preview { grid-column: 1 / -1; padding: 4px 0; }
#campaign-spend-modal .spend-inline-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
}

.spend-form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin-bottom: 10px;
}
.spend-form-add .sf-label { min-width: 120px; }
.spend-list-wrap { margin-top: 14px; }
.spend-days-note { font-size: 10px; }

.panel-h-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.spend-add-details { position: relative; flex-shrink: 0; }
.spend-add-details > summary {
    list-style: none;
    cursor: pointer;
}
.spend-add-details > summary::-webkit-details-marker { display: none; }
.spend-add-details[open] > .spend-form-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    min-width: 420px;
}

.geo-cell { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.geo-flag-icon {
    width: 1.25em;
    height: 1.25em;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.geo-code { font-size: 12px; }
.geo-select-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.geo-select-wrap select { flex: 1; min-width: 0; margin-top: 0 !important; }
.geo-combobox-wrap {
    position: relative;
    flex-wrap: nowrap;
}
.geo-combobox-wrap.is-open {
    z-index: 40;
}
.geo-combobox-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    margin-top: 0 !important;
}
.geo-combobox-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
}
.geo-combobox-list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    max-height: 260px;
    overflow-y: auto;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    padding: 4px;
}
.geo-combobox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 7px 8px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    line-height: 1.3;
    border-radius: 4px;
    cursor: pointer;
}
.geo-combobox-item:hover,
.geo-combobox-item.is-active {
    background: rgba(99, 102, 241, 0.14);
}
.geo-combobox-flag {
    width: 18px;
    height: 13px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.geo-combobox-empty {
    padding: 10px 8px;
    font-size: 12px;
    text-align: center;
}
.geo-select-wrap-sm.geo-combobox-wrap .geo-combobox-input {
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.geo-select-wrap-sm .geo-combobox-list {
    max-height: 220px;
}
.geo-select-flag {
    width: 22px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.geo-select-flag.is-empty { display: none; }
.geo-select-wrap-sm .geo-select-flag { width: 18px; height: 13px; }

/* ---- Light theme ---- */
[data-theme="light"] {
    --bg: #eef1f6;
    --bg2: #ffffff;
    --bg3: #e8ecf4;
    --border: #d7deea;
    --border2: #c3ccdb;
    --text: #1a2233;
    --muted: #647089;
    --primary: #4f5bd5;
    --sidebar-bg: #151a28;
    --sidebar-bg-hover: rgba(255, 255, 255, 0.05);
    --sidebar-bg-active: var(--primary);
    --sidebar-bg-active-hover: #5a66e8;
    --sidebar-border: #1e2438;
    --sidebar-text: #939bb0;
    --sidebar-text-hover: #e8ebf2;
    --sidebar-text-active: #ffffff;
    --sidebar-accent: var(--primary);
    --sidebar-brand: #f2f4f8;
    --flow-bg: #f8f9fc;
    --flow-head: #eef1f7;
    --flow-border: #d5dce8;
    --flow-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.08);
    --scrollbar-track: #e8ecf4;
    --scrollbar-thumb: #c3ccdb;
    --scrollbar-thumb-hover: #a8b3c7;
    color-scheme: light;
}
[data-theme="light"] .side-nav a.active { background: var(--sidebar-bg-active); color: var(--sidebar-text-active); }
[data-theme="light"] .preset.active {
    background: rgba(79, 91, 213, 0.12);
    border-color: rgba(79, 91, 213, 0.35);
    color: var(--primary);
}
[data-theme="light"] .sidebar-backdrop {
    background: rgba(15, 23, 42, 0.35);
}
[data-theme="light"] .data-table tbody tr:nth-child(even) { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .data-table tbody tr:hover { background: rgba(15, 23, 42, 0.06); }
[data-theme="light"] .act-icon:hover,
[data-theme="light"] .btn-icon:hover {
    background: var(--bg3);
    border-color: var(--border2);
}
[data-theme="light"] .flow-card[data-expanded="1"] { box-shadow: var(--flow-shadow); }
[data-theme="light"] .offers-zone { background: rgba(15, 23, 42, 0.03); }
[data-theme="light"] .geo-flag-icon,
[data-theme="light"] .geo-combobox-list {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .geo-combobox-item:hover,
[data-theme="light"] .geo-combobox-item.is-active {
    background: rgba(79, 70, 229, 0.1);
}
[data-theme="light"] .geo-select-flag {
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .spend-add-details[open] > .spend-form-popover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
[data-theme="light"] .flow-preview { color: var(--muted) !important; }
[data-theme="light"] .flow-card[data-action="redirect"] .flow-preview { color: var(--primary) !important; }
[data-theme="light"] .flow-card[data-action="block"] .flow-preview { color: var(--red) !important; }
[data-theme="light"] .pill-btn.active {
    background: rgba(79, 91, 213, 0.14);
    border-color: rgba(79, 91, 213, 0.5);
    color: var(--primary);
}
[data-theme="light"] .pill-btn.pill-danger.active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.45);
    color: #c0392b;
}
[data-theme="light"] .pills.seg { background: var(--bg); }
[data-theme="light"] .choice-card.active { background: rgba(79, 91, 213, 0.1); }
[data-theme="light"] .choice-card.pill-danger.active { background: rgba(239, 68, 68, 0.08); }
[data-theme="light"] .fblock-when .fblock-step { color: #4f5bd5; }
[data-theme="light"] .fblock-then .fblock-step { color: #138a4e; }
[data-theme="light"] .flow-card[data-action="block"] .fblock-then .fblock-step { color: #c0392b; }

.sidebar-backdrop {
    display: none;
}

body.nav-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 90;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .app.mobile-nav-open .sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .app {
        flex-direction: row;
        min-height: 100vh;
    }
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        width: min(280px, 86vw);
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        padding: 14px 10px;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: hidden;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
    }
    .app.mobile-nav-open .sidebar {
        transform: translateX(0);
    }
    .app.sidebar-collapsed .sidebar,
    html.sidebar-collapsed-init .app .sidebar {
        width: min(280px, 86vw);
        padding: 14px 10px;
        display: flex;
    }
    .app.sidebar-collapsed .nav-label,
    .app.sidebar-collapsed .brand-text,
    html.sidebar-collapsed-init .app .nav-label,
    html.sidebar-collapsed-init .app .brand-text {
        display: inline;
    }
    .side-nav {
        flex-direction: column;
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .side-footer {
        display: block;
        width: 100%;
        flex-shrink: 0;
        margin-top: auto;
        padding-top: 12px;
        padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    }
    .side-logout {
        margin-top: 10px;
        margin-bottom: 2px;
        min-height: 36px;
        padding: 8px 10px;
    }
    .main {
        width: 100%;
        min-width: 0;
    }
    .page-bar {
        padding: 6px 10px;
        z-index: 20;
    }
    .content {
        padding: 8px 10px;
    }
    .sidebar-toggle {
        font-size: 16px;
    }
    .app.sidebar-collapsed .sidebar-toggle,
    html.sidebar-collapsed-init .app .sidebar-toggle {
        transform: none;
    }

    .filter-head {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .filter-actions {
        width: 100%;
    }
    .filter-actions .btn {
        flex: 1;
    }
    .filter-search-field,
    .filter-search-field input {
        max-width: none;
        width: 100%;
    }
    .filter-presets {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }
    .filter-mobile-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }
    .filter-panel .filter-grid-collapsible {
        display: none;
    }
    .filter-panel.is-filter-open .filter-grid-collapsible {
        display: flex;
    }
    .filter-panel.is-filter-open .filter-mobile-toggle {
        border-color: rgba(91, 106, 240, 0.45);
        color: #a5b4fc;
    }
    .filter-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .filter-grid .f-label,
    .filter-grid .f-check {
        width: 100%;
    }
    .filter-grid .f-label input,
    .filter-grid .f-label select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    .filter-grid .btn {
        width: 100%;
    }
    .filter-grid > a.btn {
        text-align: center;
    }
    .filter-panel .btn-filter-apply {
        min-height: 44px;
        font-size: 14px;
        padding: 10px 16px;
    }

    .kpi-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .kpi {
        flex: 0 0 auto;
        min-width: 72px;
    }

    .panel-h-split {
        flex-wrap: wrap;
        gap: 6px;
    }
    .panel-h-split .stats-grid-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .stats-grid-wrap .table-wrap {
        margin: 0 -1px;
    }
    .table-scroll-hint {
        display: block;
        font-size: 10px;
        color: var(--muted);
        padding: 4px 8px 6px;
        text-align: center;
    }

    .compact-grid-table .act-icon {
        width: 28px;
        height: 28px;
    }
    .campaigns-table .col-actions {
        min-width: 132px;
    }

    .auth-page { padding: 20px 12px; }
    .auth-panel { padding: 28px 20px 24px; border-radius: 12px; }
    #campaign-spend-modal .spend-inline-form { grid-template-columns: 1fr; }

    .panel-grid { grid-template-columns: 1fr; }
    .grid-2, .flow-fields, .cond-row, .cond-row-2, .cond-row-3, .action-choice, .cs-grid, .offer-grid { grid-template-columns: 1fr; }
    .flows-head { gap: 10px; }
    .flows-quick { width: 100%; }

    .modal {
        padding: 0;
        align-items: flex-end;
    }
    .modal-dialog {
        width: 100%;
        max-height: 92vh;
        border-radius: 12px 12px 0 0;
    }
    .modal-header,
    .modal-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .form-footer {
        flex-wrap: wrap;
    }
    .form-footer .btn {
        flex: 1;
        min-width: 120px;
    }

    .page-head {
        flex-wrap: wrap;
        gap: 8px;
    }
    .logs-table-wrap {
        max-width: 100%;
    }
}

@media (min-width: 901px) {
    .table-scroll-hint {
        display: none;
    }
}

/* ---- Offers dashboard ---- */
.offers-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.offers-dashboard-summary {
    margin-bottom: 0;
    padding: 16px 18px;
}
.offers-dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 16px 20px;
}
.offer-dash-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.offer-dash-summary-label {
    font-size: 11px;
    color: var(--muted);
}
.offer-dash-summary-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.offers-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.offers-dashboard-grid > .panel {
    margin-bottom: 0;
}
.offer-dash-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 16px 18px;
}
.offer-dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin: 0;
    border-bottom: 1px solid var(--border);
}
.offer-dash-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.offer-dash-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offer-dash-name:hover {
    color: var(--primary);
}
.offer-dash-fav {
    color: var(--yellow);
    margin-right: 2px;
}
.offer-dash-partner {
    font-size: 11px;
    white-space: nowrap;
}
.offer-dash-kpi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    padding: 4px 0;
}
.offer-dash-kpi-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.offer-dash-kpi-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.offer-dash-kpi-item strong {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.offer-dash-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.offer-dash-chart-block {
    min-width: 0;
}
.offer-dash-chart-label {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
}
.offer-dash-chart-wrap {
    padding: 8px 10px 10px;
    min-height: 168px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    overflow: hidden;
}
.offer-dash-chart-wrap svg {
    display: block;
    width: 100%;
    height: 168px;
}
.offer-dash-chart-wrap .offer-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 168px;
}

@media (max-width: 1200px) {
    .offers-dashboard-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .offers-dashboard-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .offers-dashboard-grid {
        grid-template-columns: 1fr;
    }
    .offer-dash-kpi {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .offer-dash-charts {
        grid-template-columns: 1fr;
    }
}