/* Country flags on Windows (which has no flag emoji); only used for flag characters */
@font-face { font-family: "Twemoji Country Flags"; unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2"); font-display: swap; }
:root {
  --ld-primary: #2453d6;
  --ld-primary-dark: #1b3fa6;
  --ld-nav: #14213d;
  --ld-bg: #f4f6fb;
  --ld-border: #e3e7f0;
  --bs-primary: #2453d6;
  --bs-primary-rgb: 36, 83, 214;
  --bs-link-color: #2453d6;
  --bs-link-color-rgb: 36, 83, 214;
}
body { background: var(--ld-bg); color: #1d2433; font-family: "Twemoji Country Flags", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.btn-primary { --bs-btn-bg: var(--ld-primary); --bs-btn-border-color: var(--ld-primary); --bs-btn-hover-bg: var(--ld-primary-dark); --bs-btn-hover-border-color: var(--ld-primary-dark); --bs-btn-active-bg: var(--ld-primary-dark); --bs-btn-disabled-bg: #6f8fe6; --bs-btn-disabled-border-color: #6f8fe6; }
.btn-outline-primary { --bs-btn-color: var(--ld-primary); --bs-btn-border-color: var(--ld-primary); --bs-btn-hover-bg: var(--ld-primary); --bs-btn-hover-border-color: var(--ld-primary); --bs-btn-active-bg: var(--ld-primary); }
.form-check-input:checked { background-color: var(--ld-primary); border-color: var(--ld-primary); }
.client-switch select { min-width: 190px; background-color: #22305a; color: #fff; border-color: #34477e; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #4f7cff, #2453d6); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; }
.brand-mark-lg { width: 52px; height: 52px; font-size: 1.2rem; border-radius: 12px; }
.app-main { padding: clamp(1rem, 2vw, 2rem); flex: 1; max-width: none; }
.app-footer { text-align: center; color: #8a93a6; font-size: .8rem; padding: 1rem; }
.card { border-color: var(--ld-border); border-radius: 10px; }
.card-footer { background: #fafbfe; border-color: var(--ld-border); }
.table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7487; font-weight: 600; background: #fafbfe; white-space: nowrap; }
.section-label { text-transform: uppercase; letter-spacing: .05em; font-size: .75rem; color: #6b7487; border-bottom: 1px solid var(--ld-border); padding-bottom: .4rem; margin-bottom: .9rem; }
.page-title h1 { font-weight: 650; }
.stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-lbl { font-size: .78rem; color: #6b7487; }
.stat-box { border: 1px solid var(--ld-border); border-radius: 10px; padding: .8rem; background: #fff; }
.stat-box.ok .stat-num { color: #198754; } .stat-box.info .stat-num { color: var(--ld-primary); } .stat-box.warn .stat-num { color: #b7791f; }
.kpi { background: #fff; border: 1px solid var(--ld-border); border-radius: 10px; padding: 1rem 1.1rem; height: 100%; }
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; }
.dropzone { display: block; border: 2px dashed #b9c4dd; border-radius: 12px; padding: 2.4rem 1rem; text-align: center; cursor: pointer; background: #fafbff; transition: .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--ld-primary); background: #eef2ff; }
.dropzone.has-file { border-color: #198754; background: #f0fbf4; }
.dz-icon { font-size: 1.8rem; color: var(--ld-primary); }
/* ---------- lead timeline + inbox ---------- */
.tl-item { background: #fff; border: 1px solid var(--ld-border); border-left: 4px solid #adb5bd; border-radius: 8px; padding: .6rem .9rem; margin-bottom: .6rem; }
.tl-email_in { border-left-color: #0dcaf0; background: #f3fcff; }
.tl-email_out { border-left-color: var(--ld-primary); }
.tl-note { border-left-color: #ffc107; background: #fffdf3; }
.tl-followup { border-left-color: #fd7e14; }
.tl-auto_reply, .tl-status { border-left-color: #ced4da; }
.tl-wa_in { border-left-color: #25d366; background: #f2fcf5; }
.tl-wa_out, .tl-wa_campaign { border-left-color: #128c7e; }
.tl-body { white-space: pre-wrap; word-break: break-word; font-size: .92rem; }
.lead-dl dt { font-weight: 600; color: #6b7487; }
.lead-dl dd { margin-bottom: .45rem; }
.lead-link { color: inherit; text-decoration: none; }
.lead-link:hover { color: var(--ld-primary); text-decoration: underline; }
.inbox-row.unread { background: #f3fcff; }
.inbox-row.unread .inbox-subject { font-weight: 700; }
.nav-badge { font-size: .7rem; vertical-align: top; margin-left: .2rem; }
.note-line { margin-top: .15rem; max-width: 420px; }
.note-latest { color: #6b5a14; font-style: italic; margin-right: .35rem; }
.quick-note { font-size: .8rem; text-decoration: none; vertical-align: baseline; }
.email-cell, .phone-cell { cursor: pointer; display: inline-block; min-width: 180px; padding: 2px 4px; border-radius: 4px; }
.phone-cell { min-width: 130px; }
.email-cell:hover, .phone-cell:hover { background: #eef2ff; }
.leads-table td { font-size: .9rem; }
.sort-link { color: inherit; text-decoration: none; }
.bulk-bar .form-select { max-width: 150px; }

/* ---------- leads: category multi-select + filter chips ---------- */
.cat-toggle { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color: #fff; }
.cat-toggle.has-value { border-color: var(--ld-primary); color: var(--ld-primary); font-weight: 600; background-color: #f3f6ff; }
.cat-menu { width: 340px; max-width: calc(100vw - 2rem); border-color: var(--ld-border); border-radius: 10px; overflow: hidden; }
.cat-tools { background: #fafbfe; }
.cat-tools a { text-decoration: none; }
.cat-list { max-height: 300px; overflow-y: auto; padding: .25rem 0; }
.cat-item { display: flex; align-items: center; gap: .55rem; padding: .35rem .75rem; cursor: pointer; font-size: .88rem; margin: 0; }
.cat-item:hover { background: #f1f4fc; }
.cat-item .form-check-input { margin: 0; flex-shrink: 0; }
.cat-item .cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-item .cat-n { font-size: .75rem; color: #6b7487; background: #f1f3f8; border-radius: 10px; padding: 0 .45rem; font-variant-numeric: tabular-nums; }
.cat-item:has(input:checked) { background: #eef2ff; }
.cat-item:has(input:checked) .cat-name { font-weight: 600; }
.cat-item.cat-none .cat-name { font-style: italic; color: #6b7487; }
.filter-chips { border-top: 1px solid var(--ld-border); padding-top: .75rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; padding: .2rem .35rem .2rem .65rem; border-radius: 999px; background: #eef2ff; color: #1d2433; border: 1px solid #d6defa; text-decoration: none; }
.filter-chip:hover { background: #fde8ea; border-color: #f3c0c6; }
.filter-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: .9rem; line-height: 1; color: #6b7487; }
.filter-chip:hover .x { background: #b02a37; color: #fff; }
.cat-link { color: inherit; text-decoration: none; border-bottom: 1px dotted #b9c4dd; }
.cat-link:hover { color: var(--ld-primary); border-bottom-color: var(--ld-primary); }
.toast-box { position: fixed; right: 18px; bottom: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.ld-toast { background: #1d2433; color: #fff; padding: .6rem .9rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); font-size: .9rem; transition: opacity .4s; max-width: 380px; }
.ld-toast.success { background: #157347; } .ld-toast.error { background: #b02a37; } .ld-toast.hide { opacity: 0; }
.tpl-card .tpl-thumb { height: 170px; overflow: hidden; border-bottom: 1px solid var(--ld-border); background: #f1f3f8; position: relative; border-radius: 10px 10px 0 0; }
.tpl-card .tpl-thumb iframe { width: 600px; height: 520px; border: 0; transform: scale(.42); transform-origin: 0 0; pointer-events: none; position: absolute; left: 50%; margin-left: -126px; }
.tpl-card { transition: box-shadow .15s, transform .15s; }
.tpl-card:hover { box-shadow: 0 8px 24px rgba(20,33,61,.10); transform: translateY(-2px); }
.tpl-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem; background: rgba(20,33,61,.45); opacity: 0; transition: opacity .15s; z-index: 2; }
.tpl-thumb:hover .tpl-overlay, .tpl-thumb:focus-within .tpl-overlay { opacity: 1; }
.tpl-badge-shared { background: #e7f6ee; color: #146c43; border: 1px solid #c3e8d3; font-weight: 600; }
.tpl-badge-client { background: #eef2ff; color: var(--ld-primary); border: 1px solid #d6defa; font-weight: 600; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.tpl-stats { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: #4a5368; }
.tpl-stats b { color: #1d2433; font-variant-numeric: tabular-nums; }
.tpl-warn { background: #fff8e6; border: 1px solid #f5e1a8; color: #7a5a00; border-radius: 6px; padding: .25rem .5rem; }
.tpl-blank { min-height: 250px; color: #4a5368; }
.tpl-blank:hover { border-color: var(--ld-primary); color: var(--ld-primary); background: #f6f8ff; }
.tpl-toolbar .btn-group .btn.active { background: var(--ld-primary); border-color: var(--ld-primary); color: #fff; }
.pv-stage { display: flex; justify-content: center; }
.pv-stage .preview-frame { transition: width .2s; max-width: 100%; }
.progress-lg { height: 22px; }
.placeholder-chips .btn { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.preview-frame { width: 100%; height: 640px; border: 1px solid var(--ld-border); border-radius: 8px; background: #fff; }
.empty-state { border-style: dashed; }
@media (max-width: 991px) { .app-main { padding: 1rem; } }

/* ---------- email builder ---------- */
.builder { display: grid; grid-template-columns: 190px 1fr 290px; gap: 0; border: 1px solid var(--ld-border); border-radius: 10px; background: #fff; min-height: 640px; overflow: hidden; }
.builder-blocks { border-right: 1px solid var(--ld-border); padding: .8rem; background: #fafbfe; }
.builder-blocks h3, .builder-props h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7487; margin: 0 0 .6rem; }
.block-tile { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--ld-border); background: #fff; border-radius: 8px; padding: .5rem .6rem; margin-bottom: .45rem; cursor: grab; font-size: .88rem; user-select: none; width: 100%; text-align: left; }
.block-tile:hover { border-color: var(--ld-primary); color: var(--ld-primary); }
.block-tile .ico { width: 22px; text-align: center; opacity: .8; }
.builder-canvas-wrap { background: #e9edf5; padding: 1.2rem; overflow: auto; max-height: 78vh; }
.builder-canvas { margin: 0 auto; min-height: 300px; transition: width .2s; }
.bl { position: relative; outline: 1px dashed transparent; cursor: pointer; }
.bl:hover { outline-color: #9db2ee; }
.bl.selected { outline: 2px solid var(--ld-primary); z-index: 1; }
.bl-tools { position: absolute; right: 4px; top: 4px; display: none; gap: 2px; z-index: 3; }
.bl.selected .bl-tools, .bl:hover .bl-tools { display: flex; }
.bl-tools button { border: 0; background: var(--ld-primary); color: #fff; width: 24px; height: 24px; border-radius: 4px; font-size: 12px; line-height: 1; padding: 0; }
.bl-tools button.del { background: #b02a37; }
.drop-line { height: 4px; background: var(--ld-primary); border-radius: 2px; margin: -2px 0; }
.canvas-empty { border: 2px dashed #b9c4dd; border-radius: 10px; padding: 3rem 1rem; text-align: center; color: #6b7487; background: #fff; }
.builder-props { border-left: 1px solid var(--ld-border); padding: .8rem; overflow: auto; max-height: 78vh; }
.builder-props .form-label { font-size: .78rem; margin-bottom: .15rem; color: #4a5368; }
.builder-props .form-control, .builder-props .form-select { font-size: .85rem; }
.builder-props input[type=color] { height: 31px; padding: 2px; }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.rte-toolbar button { border: 1px solid var(--ld-border); background: #fff; border-radius: 4px; min-width: 28px; height: 28px; font-size: .8rem; }
.rte-toolbar button:hover { border-color: var(--ld-primary); }
[contenteditable="true"] { outline: none; cursor: text; }
[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px rgba(36,83,214,.25); }
.view-toggle .btn { font-size: .8rem; }
@media (max-width: 1100px) { .builder { grid-template-columns: 1fr; } .builder-blocks { display: flex; flex-wrap: wrap; gap: .4rem; border-right: 0; border-bottom: 1px solid var(--ld-border); } .block-tile { width: auto; margin: 0; } .builder-blocks h3 { width: 100%; } .builder-props { border-left: 0; border-top: 1px solid var(--ld-border); max-height: none; } }
@media (max-width: 1520px) { .brand-text { display: none; } .client-switch select { min-width: 160px; } }
@media (max-width: 1199px) { .brand-text { display: inline; } }

/* ---------- reports ---------- */
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.status-dot.good, .swatch.good { background: #0ca30c; } .status-dot.serious { background: #ec835a; } .status-dot.critical { background: #d03b3b; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: .85rem; color: #4a5368; margin-bottom: .5rem; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.chart-wrap { position: relative; width: 100%; }
.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-wrap .grid { stroke: #eef0f5; stroke-width: 1; }
.chart-wrap .axis { stroke: #d5dae5; stroke-width: 1; }
.chart-wrap .tick { fill: #6b7487; font-size: 11px; font-family: inherit; }
.chart-wrap .hit { cursor: default; }
.chart-tip { position: absolute; display: none; pointer-events: none; background: #fff; border: 1px solid var(--ld-border); box-shadow: 0 6px 18px rgba(20,33,61,.12); border-radius: 8px; padding: .5rem .65rem; font-size: .8rem; min-width: 150px; color: #1d2433; z-index: 5; }
.reason-track { height: 8px; background: #f1f3f8; border-radius: 4px; }
.reason-bar { height: 8px; background: #8a93a6; border-radius: 0 4px 4px 0; }

/* ---------- leads: saved filters ---------- */
.saved-views { min-height: 32px; }
.view-pill { display: inline-flex; align-items: center; border: 1px solid var(--ld-border); background: #fff; border-radius: 999px; font-size: .84rem; transition: border-color .15s, box-shadow .15s; }
.view-pill:hover { border-color: var(--ld-primary); box-shadow: 0 2px 8px rgba(36,83,214,.12); }
.view-pill a { color: #1d2433; text-decoration: none; padding: .25rem .2rem .25rem .75rem; display: inline-flex; align-items: center; gap: .4rem; }
.view-pill .view-n { font-size: .72rem; background: #f1f3f8; color: #6b7487; border-radius: 10px; padding: 0 .45rem; font-variant-numeric: tabular-nums; }
.view-pill .view-del { border: 0; background: transparent; color: #9aa3b5; width: 24px; height: 24px; border-radius: 50%; margin-right: 3px; line-height: 1; font-size: 1rem; padding: 0; }
.view-pill .view-del:hover { background: #b02a37; color: #fff; }
.view-pill.active { background: var(--ld-primary); border-color: var(--ld-primary); }
.view-pill.active a { color: #fff; font-weight: 600; }
.view-pill.active .view-n { background: rgba(255,255,255,.22); color: #fff; }
.view-pill.active .view-del { color: rgba(255,255,255,.75); }
.save-view-menu { width: 320px; max-width: calc(100vw - 2rem); }

/* ---------- leads: select all matching ---------- */
.select-all-banner { background: #eef2ff; border: 1px solid #d6defa; border-radius: 8px; padding: .5rem .85rem; font-size: .88rem; text-align: center; }
.select-all-banner a { font-weight: 600; }
.select-all-banner.is-all { background: #e8f6ee; border-color: #c3e8d3; color: #146c43; }

/* ---------- campaign: sending speed ---------- */
.speed-box { border: 1px solid var(--ld-border); background: #fafbfe; border-radius: 10px; padding: .85rem 1rem; }
.speed-box .speed-preset.active { background: var(--ld-primary); border-color: var(--ld-primary); color: #fff; }

/* ---------- inbox (v2.5) ---------- */
.inbox-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 767px) { .inbox-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ib-stat { display: flex; align-items: baseline; gap: .5rem; background: #fff; border: 1px solid var(--ld-border); border-left: 4px solid var(--ld-primary); border-radius: 10px; padding: .6rem .9rem; color: #4a5468; text-decoration: none; font-size: .88rem; transition: .12s; }
.ib-stat:hover { border-color: #c5cee3; color: #1d2433; }
.ib-stat.active { box-shadow: 0 0 0 2px rgba(36,83,214,.18); }
.ib-stat.wa { border-left-color: #25d366; } .ib-stat.em { border-left-color: #0d6efd; } .ib-stat.fu { border-left-color: #fd7e14; }
.ib-stat-n { font-size: 1.35rem; font-weight: 700; color: #1d2433; }
.inbox-list { position: sticky; top: 1rem; }
.inbox-items { max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; }
.ib-item { display: flex; gap: .7rem; padding: .7rem .9rem; border-left: 3px solid transparent; }
.ib-item.unread { background: #f5f9ff; border-left-color: var(--ld-primary); }
.ib-item.unread .ib-name, .ib-item.unread .ib-subject { font-weight: 700; }
.ib-item.active-item { background: #eaf0ff; border-left-color: var(--ld-primary-dark); }
.ib-main { min-width: 0; flex: 1; }
.ib-name { font-weight: 600; color: #1d2433; }
.ib-time { font-size: .75rem; color: #8a93a6; white-space: nowrap; }
.ib-subject { font-size: .85rem; color: #2c3445; }
.ib-snippet { font-size: .82rem; color: #6b7487; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ib-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.ib-tags:empty { display: none; }
.ib-lang { font-size: .68rem; font-weight: 600; color: #5b3fd6; background: #f0ecff; border-radius: 4px; padding: .05rem .35rem; }
.ib-avatar { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #4f7cff, #2453d6); }
.ib-avatar.wa { background: linear-gradient(135deg, #3ddc84, #128c7e); }
.ib-avatar.lg { width: 48px; height: 48px; font-size: 1rem; }
.ib-ch { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #1d2433; font-size: .62rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px var(--ld-border); }
.inbox-reader { display: flex; flex-direction: column; max-height: calc(100vh - 170px); min-height: 520px; }
.ib-langbar { background: #f8f6ff; border-bottom: 1px solid var(--ld-border); }
.ib-thread { flex: 1; overflow-y: auto; background: #f6f7fb; display: flex; flex-direction: column; gap: .7rem; }
.ib-msg { display: flex; }
.ib-msg.out { justify-content: flex-end; }
.ib-bubble { max-width: 82%; background: #fff; border: 1px solid var(--ld-border); border-radius: 14px; border-top-left-radius: 4px; padding: .6rem .85rem; box-shadow: 0 1px 2px rgba(20,33,61,.04); }
.ib-msg.out .ib-bubble { background: #e9f0ff; border-color: #cfdcfb; border-radius: 14px; border-top-right-radius: 4px; }
.ib-msg.out.wa .ib-bubble { background: #dcf8c6; border-color: #c4ecaa; }
.ib-msg.in.wa .ib-bubble { border-left: 3px solid #25d366; }
.ib-msg.in.em .ib-bubble { border-left: 3px solid #0d6efd; }
.ib-msg.sel .ib-bubble { box-shadow: 0 0 0 3px rgba(36,83,214,.2); }
.ib-meta { font-size: .74rem; color: #8a93a6; margin-bottom: .25rem; }
.ib-subj { font-weight: 600; font-size: .9rem; margin-bottom: .2rem; }
.ib-text { word-break: break-word; font-size: .93rem; line-height: 1.45; }
.ib-text > div { white-space: pre-wrap; }
.ib-lang-chip { margin-left: .35rem; font-size: .68rem; font-weight: 600; color: #5b3fd6; background: #f0ecff; border-radius: 4px; padding: .05rem .35rem; }
.ib-quote { margin-top: .4rem; font-size: .8rem; color: #6b7487; }
.ib-quote > div { white-space: pre-wrap; border-left: 2px solid var(--ld-border); padding-left: .6rem; margin-top: .3rem; max-height: 260px; overflow: auto; }
.ib-event { text-align: center; font-size: .76rem; color: #6b7487; }
.ib-event > span { background: #fff; border: 1px solid var(--ld-border); border-radius: 20px; padding: .2rem .7rem; display: inline-block; }
.ib-compose { background: #fff; }
.v-orig { display: none; }
body.show-orig .v-en { display: none; } body.show-orig .v-orig { display: block; }
.ib-msg.flip .v-en { display: none; } .ib-msg.flip .v-orig { display: block; }
body.show-orig .ib-msg.flip .v-en { display: block; } body.show-orig .ib-msg.flip .v-orig { display: none; }
.ib-subj .v-en, .ib-subj .v-orig { display: inline; } .ib-subj .v-orig { display: none; }
body.show-orig .ib-subj .v-orig { display: inline; }
@media (max-width: 991px) {
  .inbox-wrap.has-sel .inbox-list-col { display: none; }
  .inbox-list { position: static; } .inbox-items { max-height: none; }
  .inbox-reader { max-height: none; } .ib-thread { max-height: 60vh; }
  .ib-bubble { max-width: 94%; }
}
.ib-media { margin: .15rem 0 .35rem; }
.ib-media img { display: block; max-width: 100%; width: 320px; max-height: 360px; object-fit: cover; border-radius: 10px; background: #eef1f6; cursor: zoom-in; }
.ib-media img.sticker { width: 140px; height: 140px; object-fit: contain; background: transparent; }
.ib-media video { display: block; max-width: 100%; width: 320px; max-height: 360px; border-radius: 10px; background: #000; }
.ib-media audio { max-width: 100%; width: 280px; }
.ib-count { font-size: .65rem; font-weight: 600; vertical-align: 1px; }
.ib-en-note { font-size: .78rem; color: #5f6b80; border-top: 1px dashed rgba(0,0,0,.12); margin-top: .35rem; padding-top: .25rem; }
.install-step { background: #f7f9fd; border: 1px solid var(--ld-border); border-radius: 10px; padding: .7rem .9rem; height: 100%; }
.audit-table td { vertical-align: top; }
@media (display-mode: standalone) { .app-top { padding-top: max(.5rem, env(safe-area-inset-top)); height: auto; } }
.wa-flag { font-size: .68rem; font-weight: 600; border-radius: 4px; padding: .05rem .3rem; white-space: nowrap; }
.wa-flag.no { color: #b42318; background: #fdecea; } .wa-flag.ok { color: #0f7b3f; background: #e6f6ec; }
/* ---------- leads (v2.7 redesign) ---------- */

.leads-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.leads-head h1 { font-weight: 700; letter-spacing: -.01em; }
.lead-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .65rem; }
@media (max-width: 1199px) { .lead-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .lead-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead-kpi { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ld-border); border-radius: 12px; padding: .7rem .9rem .65rem; text-decoration: none; color: #4a5468; overflow: hidden; transition: transform .12s, box-shadow .12s, border-color .12s; }
.lead-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k, #8a93a6); }
.lead-kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,33,61,.08); color: #1d2433; }
.lead-kpi.active { border-color: var(--k, var(--ld-primary)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k, #2453d6) 18%, transparent); }
.lead-kpi.em { --k: #2453d6; } .lead-kpi.wa { --k: #22b35e; } .lead-kpi.sent { --k: #6f42c1; } .lead-kpi.rep { --k: #0aa2c0; } .lead-kpi.int { --k: #e8890c; }
.lk-n { font-size: 1.45rem; font-weight: 750; color: #1d2433; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lk-l { font-size: .8rem; font-weight: 600; }
.lk-s { font-size: .72rem; color: #8a93a6; }
.leads-filter { border-radius: 12px; padding: .75rem .9rem; }
.leads-filter .form-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7487; margin-bottom: .2rem; font-weight: 600; }
.search-ico { position: relative; }
.search-ico::before { content: "⌕"; position: absolute; left: .6rem; top: 50%; transform: translateY(-52%); color: #8a93a6; font-size: 1.05rem; pointer-events: none; }
.search-ico .form-control { padding-left: 1.9rem; }
.list-meta { padding: 0 .2rem; }
/* table */
.leads-card { border-radius: 12px; overflow: hidden; }
.leads-scroll { overflow-x: auto; }
.leads-table { --bs-table-hover-bg: #f5f8ff; font-size: .9rem; }
.leads-table thead th { position: sticky; top: 0; z-index: 2; background: #f8f9fc; border-bottom: 1px solid var(--ld-border); padding-top: .65rem; padding-bottom: .65rem; }
.leads-table thead th a.sort-link { color: inherit; text-decoration: none; }
.leads-table tbody td { padding-top: .7rem; padding-bottom: .7rem; border-color: #eef1f6; }
.leads-table tbody tr { transition: background .1s; }
.leads-table tbody tr.is-sel { background: #eef3ff; }
.leads-table tbody tr.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--ld-primary); }
.col-chk { width: 34px; }
.col-biz { min-width: 260px; }
.biz { display: flex; gap: .7rem; align-items: flex-start; }
.biz-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: hsl(var(--h) 55% 30%); background: hsl(var(--h) 70% 92%); }
.biz-main { min-width: 0; }
.biz-name { font-weight: 650; color: #1d2433; text-decoration: none; }
.biz-name:hover { color: var(--ld-primary); text-decoration: underline; }
.biz-sub { font-size: .78rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.cat-tag { display: inline-block; font-size: .76rem; font-weight: 600; color: #3b4a6b; background: #eef1f7; border-radius: 999px; padding: .15rem .55rem; text-decoration: none; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cat-tag:hover { background: #e2e8f5; color: var(--ld-primary); }
.col-city { white-space: nowrap; color: #4a5468; }
.col-contact { min-width: 230px; }
.ct-line { display: flex; align-items: center; gap: .35rem; white-space: nowrap; line-height: 1.6; }
.ct-ico { width: 1rem; text-align: center; color: #a3abbd; font-size: .8rem; }
.phone-cell, .email-cell { cursor: text; border-radius: 4px; padding: 0 .15rem; }
.phone-cell:hover, .email-cell:hover { background: #fff6d6; }
.stars { --pct: calc(var(--r) / 5 * 100%); display: inline-block; font-size: .85rem; letter-spacing: 1px; line-height: 1; background: linear-gradient(90deg, #f5a623 var(--pct), #d9dee8 var(--pct)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stars::before { content: "★★★★★"; }
.col-rating { white-space: nowrap; font-size: .85rem; }
.col-status .badge { font-weight: 600; }
.row-acts { display: inline-flex; gap: .25rem; opacity: .35; transition: opacity .12s; }
tr:hover .row-acts, .row-acts:focus-within { opacity: 1; }
.ra { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--ld-border); background: #fff; color: #4a5468; text-decoration: none; font-size: .85rem; }
.ra:hover { border-color: var(--ld-primary); color: var(--ld-primary); background: #f3f6ff; }
.ra.wa:hover { border-color: #22b35e; color: #128c4a; background: #edfbf2; }
/* floating bulk bar */
.bulk-bar { position: fixed; left: 50%; bottom: 1.2rem; transform: translate(-50%, 140%); z-index: 1040; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; background: #14213d; color: #fff; padding: .55rem .7rem .55rem 1rem; border-radius: 14px; box-shadow: 0 12px 30px rgba(20,33,61,.35); transition: transform .2s ease; max-width: calc(100vw - 2rem); }
.bulk-bar.show { transform: translate(-50%, 0); }
.bulk-bar .bulk-count { font-weight: 600; margin-right: .3rem; }
.bulk-bar .form-select, .bulk-bar .btn-outline-secondary { background-color: #22305a; color: #fff; border-color: #3a4c80; }
.bulk-bar .btn-outline-danger { color: #ffb4ad; border-color: #a0423a; }
.bulk-bar .btn-outline-danger:hover { background: #c0392b; color: #fff; }
.select-all-banner { border-radius: 10px; }
/* phones: rows become cards */
@media (max-width: 767px) {
  .leads-table thead { display: none; }
  .leads-table, .leads-table tbody, .leads-table tr, .leads-table td { display: block; width: 100%; }
  .leads-table tr { position: relative; border-bottom: 1px solid var(--ld-border); padding: .7rem .8rem .7rem 2.6rem; }
  .leads-table tbody td { border: 0; padding: .15rem 0; }
  .leads-table td.col-chk { position: absolute; left: .8rem; top: .95rem; width: auto; padding: 0; }
  .leads-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: inline-block; min-width: 72px; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8a93a6; }
  .col-biz, .col-contact { min-width: 0; }
  .biz-sub { max-width: 70vw; }
  .row-acts { opacity: 1; margin-top: .3rem; }
  .col-act { text-align: left !important; }
  .leads-table tr.empty-row { padding-left: .8rem; }
}
.bulk-bar:not(.show) { visibility: hidden; transition: transform .2s ease, visibility 0s .2s; }

/* ---------- dashboard (v2.7) ---------- */
.dk-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding: 1.4rem 1.6rem; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #3b6cf0 0%, rgba(59,108,240,0) 55%), linear-gradient(135deg, #14213d 0%, #1d3270 60%, #2453d6 100%); box-shadow: 0 10px 30px -12px rgba(20,33,61,.5); }
.dk-date { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.dk-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; margin: .15rem 0 .2rem; }
.dk-sub { opacity: .82; }
.dk-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dk-actions .btn { border-radius: 10px; font-weight: 500; }
.dk-actions .btn-light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.dk-actions .btn-light:hover { background: rgba(255,255,255,.22); }
.dk-actions .btn-primary { background: #fff; color: #1d3270; border-color: #fff; }
.dk-card { background: var(--bs-body-bg, #fff); border: 1px solid rgba(20,33,61,.08); border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: 0 1px 2px rgba(20,33,61,.04), 0 6px 18px -10px rgba(20,33,61,.15); }
.dk-card-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .85rem; }
.dk-card-h h2 { font-size: 1rem; font-weight: 650; margin: 0; }
.dk-card-h a { text-decoration: none; }
.dk-empty { color: #6c757d; font-size: .9rem; padding: 1rem; text-align: center; background: #f6f8fc; border-radius: 12px; }
.dk-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.dk-step { display: flex; gap: .7rem; align-items: center; padding: .7rem .8rem; border-radius: 12px; background: #f6f8fc; }
.dk-step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #fff; border: 2px solid #2453d6; color: #2453d6; flex: none; }
.dk-step.ok .dk-step-n { background: #22b35e; border-color: #22b35e; color: #fff; }
.dk-step.ok { opacity: .7; }
.dk-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .5rem; }
.dk-alert { display: flex; gap: .6rem; align-items: center; padding: .6rem .85rem; border-radius: 12px; text-decoration: none; font-size: .9rem; font-weight: 500; border: 1px solid; transition: transform .15s; }
.dk-alert:hover { transform: translateY(-1px); }
.dk-alert.info { background: #eef3ff; border-color: #d4e0ff; color: #1d3c9e; }
.dk-alert.warn { background: #fff7e6; border-color: #ffe2a8; color: #8a5a00; }
.dk-alert.bad { background: #fff0f0; border-color: #ffd0d0; color: #a3202c; }
.dk-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1399px) { .dk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dk-kpi { position: relative; overflow: hidden; background: var(--bs-body-bg, #fff); border: 1px solid rgba(20,33,61,.08); border-radius: 16px; padding: .95rem 1rem 1.6rem; box-shadow: 0 6px 18px -12px rgba(20,33,61,.18); }
.dk-kpi-l { font-size: .78rem; font-weight: 600; color: #5b6478; text-transform: uppercase; letter-spacing: .04em; }
.dk-kpi-l span { text-transform: none; letter-spacing: 0; font-weight: 400; color: #98a0b3; }
.dk-kpi-n { font-size: 1.9rem; font-weight: 700; line-height: 1.15; margin: .2rem 0; color: #14213d; font-variant-numeric: tabular-nums; }
.dk-kpi-n small { font-size: 1rem; color: #6c757d; margin-left: 1px; }
.dk-kpi-m { font-size: .78rem; color: #6c757d; min-height: 1.2em; }
.dk-kpi-m a { text-decoration: none; }
.dk-kpi .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.dot.em { background: #2453d6; } .dot.wa { background: #22b35e; }
.dk-trend { display: inline-block; margin-top: .35rem; font-size: .74rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; position: relative; z-index: 1; }
.dk-trend span { font-weight: 400; opacity: .75; }
.dk-trend.up { background: #e5f7ec; color: #16833f; } .dk-trend.down { background: #fdecec; color: #c0262f; } .dk-trend.flat { background: #f0f2f6; color: #6c757d; }
.dk-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 30px; opacity: .45; }
.dk-legend { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .78rem; color: #5b6478; }
.dk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dk-legend i.em { background: #2453d6; } .dk-legend i.wa { background: #22b35e; } .dk-legend i.rep { background: #e8890c; border-radius: 50%; }
.dk-chart-wrap { width: 100%; }
.dk-chart { width: 100%; height: auto; display: block; }
.dk-chart .grid { stroke: #edf0f5; }
.dk-chart .ax { font-size: 12px; fill: #98a0b3; }
.dk-chart .ax.rep { fill: #e8890c; }
.dk-chart .em { fill: #2453d6; } .dk-chart .wa { fill: #22b35e; }
.dk-chart .hit { fill: transparent; }
.dk-chart .bar:hover .hit { fill: rgba(36,83,214,.06); }
.dk-chart .repline { fill: none; stroke: #e8890c; stroke-width: 2; stroke-linejoin: round; }
.dk-chart .repdot { fill: #fff; stroke: #e8890c; stroke-width: 2; }
.dk-chart-foot { margin-top: .4rem; }
.dk-funnel { display: flex; flex-direction: column; gap: .7rem; }
.dk-fn { display: block; text-decoration: none; color: inherit; }
.dk-fn-top { display: flex; justify-content: space-between; font-size: .88rem; }
.dk-fn-top b { font-variant-numeric: tabular-nums; }
.dk-fn-bar { height: 12px; border-radius: 999px; background: #eef1f6; margin-top: .25rem; overflow: hidden; }
.dk-fn-bar span { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, hsl(calc(222 - var(--i) * 32) 70% 52%), hsl(calc(205 - var(--i) * 32) 70% 58%)); animation: dkgrow .8s ease-out both; }
.dk-fn-conv { font-size: .72rem; color: #8a93a6; margin-top: .15rem; }
.dk-fn:hover .dk-fn-top span { text-decoration: underline; }
@keyframes dkgrow { from { width: 0; } }
.dk-mixbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.dk-mixkey { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .45rem; font-size: .76rem; }
.dk-mixkey a { color: #5b6478; text-decoration: none; }
.dk-mixkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.dk-camps { display: flex; flex-direction: column; gap: .35rem; }
.dk-camp { display: flex; gap: .8rem; align-items: center; padding: .65rem .7rem; border-radius: 12px; text-decoration: none; color: inherit; transition: background .15s; }
.dk-camp:hover { background: #f5f7fb; }
.dk-camp-ico, .dk-ch-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; flex: none; }
.dk-camp-ico.em, .dk-ch-ico.em { background: #e9efff; color: #2453d6; }
.dk-camp-ico.wa, .dk-ch-ico.wa { background: #e3f7eb; color: #138a43; }
.dk-camp-main { flex: 1; min-width: 0; }
.dk-camp-name { font-weight: 600; }
.dk-camp-meta { display: flex; flex-wrap: wrap; gap: .25rem; font-size: .76rem; color: #6c757d; }
.dk-prog { height: 6px; border-radius: 999px; background: #eef1f6; margin: .35rem 0 .3rem; overflow: hidden; }
.dk-prog.thin { height: 4px; }
.dk-prog span { display: block; height: 100%; border-radius: 999px; background: #2453d6; }
.dk-prog span.wa { background: #22b35e; }
.dk-prog span.live { background-image: linear-gradient(45deg, rgba(255,255,255,.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.3) 50%, rgba(255,255,255,.3) 75%, transparent 75%); background-size: 14px 14px; animation: dkstripe 1s linear infinite; }
@keyframes dkstripe { to { background-position: 14px 0; } }
.dk-reply { display: flex; gap: .7rem; padding: .6rem .55rem; border-radius: 12px; text-decoration: none; color: inherit; position: relative; }
.dk-reply:hover { background: #f5f7fb; }
.dk-reply + .dk-reply { border-top: 1px solid #f0f2f6; }
.dk-reply.unread { background: #f4f7ff; }
.dk-reply.unread::before { content: ''; position: absolute; left: -2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #2453d6; }
.dk-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; color: #fff; }
.dk-av.em { background: linear-gradient(135deg, #3b6cf0, #2453d6); } .dk-av.wa { background: linear-gradient(135deg, #34c773, #179a4c); }
.dk-reply-main { flex: 1; min-width: 0; font-size: .88rem; }
.dk-reply-txt { color: #5b6478; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .83rem; }
.dk-when { font-size: .74rem; color: #98a0b3; white-space: nowrap; }
.dk-fu { display: flex; gap: .7rem; align-items: center; padding: .5rem .3rem; text-decoration: none; color: inherit; border-radius: 10px; }
.dk-fu:hover { background: #f5f7fb; }
.dk-fu-date { width: 44px; flex: none; text-align: center; border-radius: 10px; background: #eef3ff; color: #2453d6; font-size: .68rem; text-transform: uppercase; line-height: 1.1; padding: .3rem 0; }
.dk-fu-date b { display: block; font-size: 1.1rem; }
.dk-fu-date.today { background: #fff4dd; color: #a86b00; } .dk-fu-date.over { background: #fdecec; color: #c0262f; }
.min-w-0 { min-width: 0; }
.dk-city { display: block; text-decoration: none; color: inherit; padding: .35rem 0; }
.dk-city-bar { position: relative; height: 8px; border-radius: 999px; background: #eef1f6; margin-top: .25rem; overflow: hidden; }
.dk-city-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #b8c8f5; }
.dk-city-bar span.rep { background: #e8890c; }
.dk-ch { display: flex; gap: .7rem; padding: .55rem 0; }
.dk-ch + .dk-ch { border-top: 1px solid #f0f2f6; }
.dk-q { font-weight: 600; font-size: .72rem; padding: 0 .35rem; border-radius: 4px; background: #eef1f6; }
.dk-q.green { background: #e5f7ec; color: #16833f; } .dk-q.yellow { background: #fff4dd; color: #a86b00; } .dk-q.red { background: #fdecec; color: #c0262f; }
@media (max-width: 575px) { .dk-hero { padding: 1.1rem; border-radius: 14px; } .dk-actions .btn { flex: 1 1 45%; font-size: .85rem; } .dk-kpi-n { font-size: 1.5rem; } }
@media (max-width: 767px) { .dk-chart-wrap { overflow-x: auto; } .dk-chart { min-width: 680px; } .dk-card-h { flex-wrap: wrap; } }


/* =========================================================
   v2.7.1 — app shell (sidebar) + modern refresh for every page
   ========================================================= */
:root { --side-w: 248px; --ld-radius: 14px; --ld-shadow: 0 1px 2px rgba(20,33,61,.04), 0 8px 24px -14px rgba(20,33,61,.18); }
body.has-side { padding-left: var(--side-w); }
.app-body { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.app-side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 1040; display: flex; flex-direction: column; gap: .4rem; padding: 1rem .75rem .75rem;
  background: linear-gradient(180deg, #14213d 0%, #172a52 100%); color: #c9d2e6; overflow-y: auto; scrollbar-width: thin; }
.side-brand { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; padding: .2rem .4rem .8rem; }
.side-brand b { display: block; line-height: 1.1; font-size: .98rem; } .side-brand small { display: block; color: #8fa0c6; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.side-client label { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #7d8db3; padding: 0 .45rem; margin-bottom: .25rem; }
.side-client-box { position: relative; display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .45rem .55rem; transition: background .15s; }
.side-client-box:hover { background: rgba(255,255,255,.12); }
.side-client-av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff8a4c, #e8590c); }
.side-client-box select { flex: 1; min-width: 0; appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a9b6d6' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right center / 14px no-repeat; border: 0; color: #fff; font-weight: 600; font-size: .88rem; padding-right: 18px; cursor: pointer; text-overflow: ellipsis; }
.side-client-box select:focus { outline: none; } .side-client-box:focus-within { box-shadow: 0 0 0 2px rgba(108,146,255,.6); }
.side-client-box select option { color: #1d2433; }
.side-nav { flex: 1; margin-top: .4rem; }
.side-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #7d8db3; padding: .9rem .6rem .35rem; }
.side-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; margin: 1px 0; border-radius: 10px; color: #c9d2e6; text-decoration: none; font-size: .9rem; font-weight: 500; position: relative; transition: background .15s, color .15s; }
.side-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-link.active { background: linear-gradient(90deg, rgba(79,124,255,.35), rgba(79,124,255,.12)); color: #fff; }
.side-link.active::before { content: ''; position: absolute; left: -.75rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #6f97ff; }
.side-ico { flex: none; opacity: .85; }
.side-badge { margin-left: auto; background: #ef4757; color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; min-width: 20px; text-align: center; }
.side-user { display: flex; align-items: center; gap: .3rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: .7rem; margin-top: .4rem; }
.side-user-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; padding: .35rem .4rem; border-radius: 10px; }
.side-user-main:hover, .side-logout:hover { background: rgba(255,255,255,.08); }
.side-user-main small { color: #8fa0c6; font-size: .72rem; }
.side-user-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg, #4f7cff, #2453d6); color: #fff; }
.side-logout { color: #a9b6d6; padding: .5rem; border-radius: 10px; display: grid; place-items: center; }
.app-top { display: none; }
.side-scrim { display: none; }
@media (max-width: 1199.98px) {
  body.has-side { padding-left: 0; }
  .app-top { display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1030; height: 56px; padding: 0 1rem; background: #14213d; color: #fff; }
  .app-top > a { min-width: 0; } .app-top > a span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-toggle { width: 38px; height: 38px; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: none; }
  .side-toggle span { width: 18px; height: 2px; background: #fff; border-radius: 2px; }
  .top-inbox { margin-left: auto; color: #fff; display: flex; align-items: center; gap: .3rem; text-decoration: none; }
  .app-side { transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  body.side-open .app-side { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 10px 0 40px rgba(0,0,0,.25); }
  body.side-open .side-scrim { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(10,16,32,.45); }
}

/* ---------- page header ---------- */
.page-title h1 { font-weight: 700; letter-spacing: -.01em; color: #14213d; }
.page-title .text-muted { font-size: .92rem; }
.page-title .btn { border-radius: 10px; }

/* ---------- surfaces ---------- */
.card { border-color: rgba(20,33,61,.08); border-radius: var(--ld-radius); box-shadow: var(--ld-shadow); }
.card > .card-header:first-child { border-radius: var(--ld-radius) var(--ld-radius) 0 0; }
.card-header { background: transparent; border-bottom-color: #eef1f6; font-weight: 600; padding: .85rem 1.1rem; }
.card-body { padding: 1.1rem 1.2rem; }
.card > .table-responsive:first-child, .card > .table-responsive:only-child { border-radius: var(--ld-radius); }
.card > .table-responsive > .table, .card > .table { margin-bottom: 0; }
.kpi, .stat-box { border-radius: var(--ld-radius); border-color: rgba(20,33,61,.08); box-shadow: var(--ld-shadow); }
.section-label { font-weight: 700; color: #5b6478; border-bottom-color: #eef1f6; }
.empty-state { border: 2px dashed #d6ddeb !important; box-shadow: none; background: #fbfcfe; }
.alert { border-radius: 12px; border-width: 1px; }

/* ---------- tables ---------- */
.table { --bs-table-hover-bg: #f6f8fd; }
.table thead th { background: #f8f9fc; color: #6b7487; font-size: .72rem; letter-spacing: .06em; border-bottom: 1px solid #e9edf4; padding-top: .7rem; padding-bottom: .7rem; }
.table > tbody > tr { transition: background .12s; }
.table > tbody > tr:hover > * { background: #f8faff; }
.table td { border-color: #f0f2f7; }
.table td:first-child, .table th:first-child { padding-left: 1rem; } .table td:last-child, .table th:last-child { padding-right: 1rem; }

/* ---------- controls ---------- */
.btn { border-radius: 9px; font-weight: 500; }
.btn-sm { border-radius: 8px; }
.btn-lg { border-radius: 12px; }
.btn-primary { box-shadow: 0 4px 12px -6px rgba(36,83,214,.7); }
.btn-success { box-shadow: 0 4px 12px -6px rgba(25,135,84,.7); }
.form-control, .form-select { border-radius: 9px; border-color: #dbe1ec; }
.form-control:focus, .form-select:focus { border-color: #7d9cf0; box-shadow: 0 0 0 .2rem rgba(36,83,214,.12); }
.form-label { font-weight: 500; color: #3c4559; }
.badge { font-weight: 600; letter-spacing: .01em; }
.nav-tabs { border-bottom-color: #e3e8f1; gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: #5b6478; font-weight: 500; border-radius: 0; }
.nav-tabs .nav-link.active { color: var(--ld-primary); border-bottom-color: var(--ld-primary); background: transparent; }
.nav-pills .nav-link { border-radius: 999px; }
.btn-group > .btn { border-radius: 0; } .btn-group > .btn:first-child { border-radius: 9px 0 0 9px; } .btn-group > .btn:last-child { border-radius: 0 9px 9px 0; }
.progress { border-radius: 999px; background: #edf0f6; } .progress-bar { border-radius: 999px; }
.pagination .page-link { border-radius: 8px; margin: 0 2px; border-color: #e3e8f1; }
.app-footer { padding: 1.2rem 1rem 1.6rem; }
.bulk-bar { left: calc(50% + var(--side-w) / 2) !important; }
@media (max-width: 1199.98px) { .bulk-bar { left: 50% !important; } }

/* ---------- campaigns overview ---------- */
.cp-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 1199px) { .cp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) { .cp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-kpi { background: #fff; border: 1px solid rgba(20,33,61,.08); border-radius: var(--ld-radius); padding: .9rem 1rem; box-shadow: var(--ld-shadow); }
.cp-kpi b { display: block; font-size: 1.6rem; line-height: 1.15; color: #14213d; font-variant-numeric: tabular-nums; }
.cp-kpi span { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7487; font-weight: 600; }
.cp-kpi small { display: block; font-size: .78rem; color: #8a93a6; }
.cp-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin: 1.25rem 0 .75rem; }
.cp-tabs { display: inline-flex; flex-wrap: wrap; gap: .25rem; background: #fff; border: 1px solid #e3e8f1; border-radius: 12px; padding: .25rem; }
.cp-tabs button { border: 0; background: transparent; border-radius: 9px; padding: .35rem .8rem; font-size: .86rem; font-weight: 500; color: #5b6478; }
.cp-tabs button.on { background: #14213d; color: #fff; }
.cp-tabs button i { font-style: normal; font-size: .72rem; opacity: .7; margin-left: .25rem; }
.cp-search { max-width: 260px; }
.cp-list { display: grid; gap: .6rem; }
.cp-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) clamp(200px, 20vw, 320px) 330px 190px; gap: 1rem; align-items: center; background: #fff; border: 1px solid rgba(20,33,61,.08); border-radius: var(--ld-radius); padding: .85rem 1rem; box-shadow: var(--ld-shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.cp-row:hover { transform: translateY(-1px); border-color: #c9d6f7; box-shadow: 0 10px 28px -16px rgba(20,33,61,.35); }
.cp-row.is-live { border-left: 3px solid #2453d6; } .cp-row.is-paused { border-left: 3px solid #e8a10c; } .cp-row.is-cancelled { opacity: .78; }
.cp-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.15rem; }
.cp-ico.em { background: #e9efff; color: #2453d6; } .cp-ico.wa { background: #e3f7eb; color: #138a43; }
.cp-name { font-weight: 650; color: #14213d; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-name:hover { color: var(--ld-primary); }
.cp-sub { font-size: .8rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 5px; background: #eef1f6; color: #5b6478; margin-right: .3rem; vertical-align: 1px; }
.cp-prog-top { display: flex; justify-content: space-between; font-size: .78rem; color: #5b6478; margin-bottom: .3rem; }
.cp-prog { height: 7px; border-radius: 999px; background: #edf0f6; overflow: hidden; display: flex; }
.cp-prog span { height: 100%; } .cp-prog .ok { background: #2453d6; } .cp-prog.wa .ok { background: #22b35e; } .cp-prog .bad { background: #ef4757; } .cp-prog .skip { background: #c3cad8; }
.cp-stats { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.cp-stat { min-width: 52px; } .cp-stat b { display: block; font-size: 1.02rem; color: #14213d; font-variant-numeric: tabular-nums; line-height: 1.2; } .cp-stat span { font-size: .7rem; color: #8a93a6; text-transform: uppercase; letter-spacing: .04em; }
.cp-stat.good b { color: #16833f; } .cp-stat.bad b { color: #c0262f; } .cp-stat.blue b { color: #2453d6; }
.cp-acts { display: flex; gap: .35rem; justify-content: flex-end; white-space: nowrap; }
@media (max-width: 991px) {
  .cp-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .cp-row .cp-progcol { grid-column: 2 / -1; } .cp-row .cp-stats { grid-column: 2 / -1; } .cp-row .cp-acts { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 1499px) and (min-width: 992px) { .cp-row { grid-template-columns: 44px minmax(0, 1fr) 200px 300px; } .cp-row .cp-acts { grid-column: 2 / -1; justify-content: flex-start; } }

/* ---------- locations (v2.7.2) ---------- */
.flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; }
.loc-city { font-weight: 500; }
.loc-sub { font-size: .76rem; color: #8a93a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
select, option, .form-select { font-family: "Twemoji Country Flags", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.geo-chip { display: inline-flex; align-items: center; border: 1px solid #dfe5f0; background: #fff; border-radius: 999px; font-size: .8rem; overflow: hidden; }
.geo-chip > a:first-child { padding: .2rem .6rem; color: #1d2433; text-decoration: none; white-space: nowrap; }
.geo-chip > a:first-child:hover { background: #f3f6ff; }
.geo-chip .gc-act { padding: .2rem .45rem; border-left: 1px solid #dfe5f0; text-decoration: none; font-size: .78rem; }
.gc-act.em { color: #2453d6; } .gc-act.wa { color: #138a43; } .gc-act:hover { background: #f3f6ff; }
#filterForm .col-xl { min-width: 165px; }