/* ============================================================
   CRM-scandi.css  --  Scandinavian Minimalist Light Theme
   Overrides CRM.css dark theme. Load AFTER CRM.css.
   ============================================================ */

/* ── Design-token overrides ── */
:root {
    --primary-bg: #FAFBFC;
    --secondary-bg: #FFFFFF;
    --tertiary-bg: #F3F4F6;
    --card-bg: #FFFFFF;
    --surface-hover: rgba(0, 0, 0, 0.03);

    --gradient-bg: linear-gradient(135deg, #FAFBFC 0%, #F3F4F6 40%, #EEF0F4 70%, #FAFBFC 100%);
    --gradient-hero: linear-gradient(180deg, #FAFBFC 0%, #F3F4F6 40%, #EEF0F4 100%);
    --gradient-card: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(243, 244, 246, 0.95) 100%);
    --gradient-accent: linear-gradient(135deg, #D14D6A 0%, #1F2937 100%);
    --gradient-accent-subtle: linear-gradient(135deg, rgba(209, 77, 106, 0.08), rgba(31, 41, 55, 0.06), rgba(209, 77, 106, 0.04));

    --glass-bg: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
    --glass-bg-solid: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-border-top: rgba(0, 0, 0, 0.04);
    --glass-blur: blur(12px);
    --glass-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.8);

    --primary-text: #111827;
    --secondary-text: #4B5563;
    --muted-text: #9CA3AF;
    --link-text: #D14D6A;
    --text-color: #111827;

    --accent-color: #F3F4F6;
    --highlight-color: #D14D6A;
    --highlight-hover: #B8455E;
    --highlight-glow: rgba(209, 77, 106, 0.12);
    --purple-accent: #1F2937;
    --purple-glow: rgba(31, 41, 55, 0.08);
    --cyan-accent: #D14D6A;
    --cyan-glow: rgba(209, 77, 106, 0.08);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(209, 77, 106, 0.08);
    --shadow-glow-cyan: 0 0 20px rgba(209, 77, 106, 0.06);

    --box-shadow: var(--shadow-md);
    --hover-shadow: var(--shadow-lg);
    --glow-shadow: var(--shadow-glow);

    --page-border: rgba(0, 0, 0, 0.08);
}

/* ── Global font swap ── */
body,
* {
    font-family: 'Inter', sans-serif !important;
}

/* Preserve monospace where needed */
.content-modal-body,
.scraped-table .content-length-col,
.codemirror-container .CodeMirror,
.variable-chip,
.ob-tmpl-field code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
}

/* ── Override body bg ── */
body {
    height: auto;
    background: var(--primary-bg);
    color: var(--primary-text);
    position: relative;
}

/* Color clouds — ambient gradient wash */
body::before,
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle 380px at 8% 12%, rgba(209, 77, 106, 0.42), transparent 65%),
    radial-gradient(ellipse 420px 280px at 88% 6%, rgba(115, 83, 186, 0.36), transparent 60%),
    radial-gradient(ellipse 300px 380px at 42% 88%, rgba(45, 159, 214, 0.33), transparent 60%);
  filter: blur(80px);
  animation: cloudPulse1 8s ease-in-out infinite;
}

body::after {
  background:
    radial-gradient(ellipse 340px 260px at 72% 48%, rgba(209, 77, 106, 0.26), transparent 55%),
    radial-gradient(circle 300px at 18% 58%, rgba(115, 83, 186, 0.22), transparent 55%);
  filter: blur(80px);
  animation: cloudPulse2 11s ease-in-out infinite;
}

@keyframes cloudPulse1 {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.08); }
}

@keyframes cloudPulse2 {
  0%, 100% { opacity: 1; transform: scale(1.05); }
  50%      { opacity: 0.55; transform: scale(0.95); }
}

body > *:not(header) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.crm-container {
    display: flex;
    flex: 1 0 auto;
    background: transparent;
    padding: 0;
    margin: 0;
    margin-top: 80px;
}

.crm-sidebar {
    width: 250px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    border-top-color: rgba(0, 0, 0, 0.03);
    box-shadow: var(--shadow-sm);
    padding: 30px 0;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 80px);
    align-self: flex-start;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    overflow-y: auto;
}

.crm-sidebar h2 {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 30px 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(209, 77, 106, 0.25);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.crm-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.crm-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 30px;
    color: var(--secondary-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    border-left: 3px solid transparent;
    letter-spacing: 0.01em;
}

.crm-nav-item:hover {
    background: var(--surface-hover);
    color: var(--primary-text);
}

.crm-nav-item.active {
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
    border-left-color: var(--highlight-color);
    box-shadow: none;
}

.crm-nav-item svg {
    flex-shrink: 0;
}

.crm-main {
    flex: 1;
    padding: 40px;
    padding-top: 20px;
}

.crm-section {
    display: none;
}

.crm-section.active {
    display: block;
}

.section-header {
    margin-bottom: 30px;
}

.section-header h1 {
    color: var(--primary-text);
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

/* ============================================================
   STAT BOXES -- frosted glass cards
   ============================================================ */

.section-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.stat-box {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--transition);
}

.stat-box:hover {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-label {
    color: var(--muted-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.stat-value {
    color: var(--highlight-color);
    font-size: 32px;
    font-weight: 700;
}

/* ============================================================
   USERS TABLE
   ============================================================ */

.users-table-container {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    height: calc(100vh - 420px);
    min-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table thead {
    background: var(--tertiary-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.users-table th {
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    padding: 14px 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
    background: var(--tertiary-bg);
}

.users-table td {
    color: var(--secondary-text);
    font-size: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--page-border);
}

.users-table tbody tr:hover {
    background: var(--surface-hover);
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}

.user-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.user-status.active {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.user-status.inactive {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.tier-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.tier-badge.free {
    background: rgba(107, 114, 128, 0.08);
    color: #6B7280;
}

.tier-badge.premium {
    background: rgba(209, 77, 106, 0.08);
    color: var(--highlight-color);
}

.action-btn {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--page-border);
    color: var(--primary-text);
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: var(--transition);
}

.action-btn:hover {
    background: var(--surface-hover);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ============================================================
   USER ACTIONS DROPDOWN
   ============================================================ */

.user-actions-cell {
    position: static;
}

.user-actions-dropdown {
    position: relative;
    display: inline-block;
}

.user-actions-btn {
    background: linear-gradient(135deg, #D14D6A 0%, #1F2937 100%);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.user-actions-btn:hover {
    background: linear-gradient(135deg, #B8455E 0%, #111827 100%);
    box-shadow: var(--shadow-lg);
    animation: ctaBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform: translateY(-1px);
}

.user-actions-btn svg {
    transition: transform 0.2s;
}

.user-actions-btn:hover svg {
    transform: translateY(2px);
}

.user-actions-menu {
    position: fixed;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    z-index: 10000;
    min-width: 180px;
    overflow: hidden;
    animation: dropdownFadeIn 0.2s ease;
}

.user-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--secondary-text);
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--page-border);
}

.user-action-item:last-child {
    border-bottom: none;
}

.user-action-item:hover {
    background: var(--surface-hover);
    color: var(--primary-text);
}

.user-action-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.user-action-item:hover svg {
    opacity: 1;
}

.view-full-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--highlight-color);
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.view-full-btn:hover {
    background: var(--highlight-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   SCRAPED CONTENT PREVIEW
   ============================================================ */

.scraped-content-preview {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.preview-description {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.preview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.preview-stat {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.preview-stat-label {
    color: var(--muted-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.preview-stat-value {
    color: var(--highlight-color);
    font-size: 28px;
    font-weight: 700;
}

/* ============================================================
   RESPONSIVE -- first block
   ============================================================ */

@media (max-width: 1024px) {
    .crm-container {
        flex-direction: column;
    }
    .crm-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-radius: 0;
    }
    .crm-nav {
        flex-direction: row;
        overflow-x: auto;
    }
    .section-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .crm-main {
        padding: 20px;
    }
    .section-header h1 {
        font-size: 24px;
    }
    .section-stats {
        grid-template-columns: 1fr;
    }
    .users-table-container {
        overflow-x: auto;
    }
    .users-table {
        min-width: 800px;
    }
}

/* ============================================================
   SCRAPED CONTENT SECTION
   ============================================================ */

.scraped-content-layout {
    display: flex;
    gap: 20px;
}

.scraped-filters {
    width: 280px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: 25px;
    height: fit-content;
    position: sticky;
    top: 20px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: block;
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.dropdown-container {
    position: relative;
}

.dropdown-search {
    width: 100%;
    padding: 10px 12px;
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    color: var(--primary-text);
    font-size: 14px;
    transition: var(--transition);
    cursor: pointer;
}

.dropdown-search:focus {
    outline: none;
    border-color: var(--highlight-color);
    background: var(--secondary-bg);
    box-shadow: 0 0 0 3px rgba(209, 77, 106, 0.08);
}

.dropdown-search.default-selected {
    color: var(--muted-text);
    font-style: italic;
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: var(--shadow-lg);
}

.dropdown-list.show {
    display: block;
}

.dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--primary-text);
    font-size: 14px;
    transition: var(--transition-fast);
}

.dropdown-item:hover {
    background: var(--surface-hover);
    color: var(--highlight-color);
}

.dropdown-item[data-value=""] {
    color: var(--muted-text);
    font-style: italic;
}

.filter-action-btn {
    width: 100%;
    padding: 10px 16px;
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.filter-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(0, 0, 0, 0.12);
}

.filter-action-btn.primary {
    background: var(--highlight-color);
    border-color: var(--highlight-color);
    color: #fff;
}

.filter-action-btn.primary:hover {
    background: var(--highlight-hover);
    box-shadow: var(--shadow-md);
}

.filter-action-btn.secondary {
    background: var(--surface-hover);
    border-color: var(--page-border);
}

.filter-action-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.04);
}

.filter-action-btn.warning {
    background: rgba(234, 88, 12, 0.06);
    border-color: rgba(234, 88, 12, 0.15);
    color: #EA580C;
}

.filter-action-btn.warning:hover {
    background: rgba(234, 88, 12, 0.1);
    border-color: rgba(234, 88, 12, 0.25);
    box-shadow: var(--shadow-sm);
}

.scraped-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.scraped-stats-bar {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
}

.files-count {
    color: var(--secondary-text);
    font-size: 14px;
    margin: 0;
}

.files-count span {
    color: var(--highlight-color);
    font-weight: 700;
    font-size: 16px;
}

.scraped-table-container {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex: 1;
    min-height: 500px;
    max-height: 600px;
    overflow-y: auto;
}

.scraped-table {
    width: 100%;
    border-collapse: collapse;
}

.scraped-table thead {
    background: var(--tertiary-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.scraped-table th {
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    padding: 14px 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
}

.scraped-table td {
    color: var(--secondary-text);
    font-size: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--page-border);
}

.scraped-table tbody tr:hover {
    background: var(--surface-hover);
}

.scraped-table tbody tr:last-child td {
    border-bottom: none;
}

.scraped-table .website-col {
    color: var(--highlight-color);
    font-weight: 500;
    max-width: 250px;
    word-break: break-all;
}

.scraped-table .ai-model-col {
    color: var(--primary-text);
}

.scraped-table .owner-col {
    color: var(--secondary-text);
}

.scraped-table .content-length-col {
    text-align: right;
}

.scraped-table .scraped-at-col {
    color: var(--secondary-text);
    font-size: 13px;
    white-space: nowrap;
}

.scraped-table .actions-col {
    white-space: nowrap;
}

.scraped-action-btn {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 5px;
}

.scraped-action-btn:hover {
    transform: translateY(-1px);
}

.scraped-action-btn svg {
    width: 14px;
    height: 14px;
}

.scraped-action-btn.view {
    background: var(--highlight-color);
    border-color: var(--highlight-color);
    color: #fff;
}

.scraped-action-btn.view:hover {
    background: var(--highlight-hover);
    box-shadow: var(--shadow-md);
}

.scraped-action-btn.download {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.scraped-action-btn.download:hover {
    background: #15803d;
    box-shadow: var(--shadow-md);
}

/* ============================================================
   CONTENT VIEWER MODAL
   ============================================================ */

.content-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.content-modal-content {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-xl);
    margin: 5% auto;
    padding: 30px;
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 1000px;
    max-height: 80%;
    overflow-y: auto;
    position: relative;
}

.content-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
    padding-bottom: 15px;
}

.content-modal-title {
    color: var(--highlight-color);
    font-size: 20px;
    font-weight: 700;
    word-break: break-all;
}

.content-modal-close {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

.content-modal-close:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

.content-modal-body {
    color: var(--secondary-text);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    background: var(--tertiary-bg);
    padding: 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--page-border);
    max-height: 500px;
    overflow-y: auto;
}

@media (max-width: 1200px) {
    .scraped-content-layout {
        flex-direction: column;
    }
    .scraped-filters {
        width: 100%;
        position: relative;
        top: 0;
    }
    .filter-group {
        display: inline-block;
        width: calc(33.333% - 14px);
        margin-right: 20px;
        vertical-align: top;
    }
    .filter-action-btn {
        width: calc(25% - 8px);
        display: inline-block;
        margin-right: 10px;
    }
}

@media (max-width: 768px) {
    .filter-group {
        width: 100%;
        margin-right: 0;
    }
    .filter-action-btn {
        width: 100%;
        margin-right: 0;
    }
    .scraped-table-container {
        overflow-x: auto;
    }
    .scraped-table {
        min-width: 800px;
    }
    .content-modal-content {
        width: 95%;
        padding: 20px;
    }
}

/* ============================================================
   USER COMMENTS SECTION
   ============================================================ */

.section-description {
    color: var(--secondary-text);
    font-size: 15px;
    margin: 10px 0 0 0;
    font-weight: 400;
}

.message-box {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
}

.success-message {
    background-color: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.2);
    color: #16a34a;
}

.error-message {
    background-color: rgba(209, 77, 106, 0.06);
    border: 1px solid rgba(209, 77, 106, 0.2);
    color: var(--highlight-color);
}

.loading-text {
    text-align: center;
    color: var(--muted-text);
    padding: 40px;
    font-size: 16px;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comment-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: var(--transition);
}

.comment-card:hover {
    border-color: rgba(0, 0, 0, 0.08);
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--page-border);
}

.comment-header-left h3 {
    color: var(--primary-text);
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
}

.comment-meta {
    color: var(--secondary-text);
    font-size: 13px;
}

.comment-user-email {
    color: var(--highlight-color);
    font-weight: 600;
}

.comment-original {
    background-color: rgba(59, 130, 246, 0.05);
    border-left: 3px solid #3B82F6;
    padding: 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}

.comment-original-text {
    color: var(--primary-text);
    line-height: 1.6;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.comment-original-date {
    color: var(--muted-text);
    font-size: 13px;
}

.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.thread-message {
    padding: 14px;
    border-radius: var(--radius-sm);
    position: relative;
}

.thread-message-admin {
    background-color: rgba(209, 77, 106, 0.04);
    border-left: 3px solid var(--highlight-color);
    margin-left: 20px;
}

.thread-message-user {
    background-color: rgba(22, 163, 74, 0.04);
    border-left: 3px solid #16a34a;
    margin-right: 20px;
}

.thread-message-text {
    color: var(--primary-text);
    margin-bottom: 6px;
    line-height: 1.5;
    word-wrap: break-word;
}

.thread-message-meta {
    font-size: 12px;
    color: var(--muted-text);
}

.thread-label {
    font-weight: 600;
    margin-right: 4px;
}

.thread-label-admin {
    color: var(--highlight-color);
}

.thread-label-user {
    color: #16a34a;
}

.admin-response-form {
    background: var(--tertiary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-md);
    padding: 18px;
}

.admin-response-form h4 {
    margin: 0 0 12px 0;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-response-form textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    color: var(--primary-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    resize: vertical;
    margin-bottom: 12px;
    box-sizing: border-box;
    transition: var(--transition);
}

.admin-response-form textarea:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 3px rgba(209, 77, 106, 0.08);
}

.admin-response-button {
    padding: 10px 20px;
    background-color: var(--highlight-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.admin-response-button:hover {
    background-color: var(--highlight-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.admin-response-button:disabled {
    background-color: var(--muted-text);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.no-comments {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted-text);
}

.no-comments h3 {
    color: var(--primary-text);
    margin-bottom: 12px;
    font-size: 24px;
}

@media (max-width: 768px) {
    .comment-header {
        flex-direction: column;
    }
    .thread-message-admin {
        margin-left: 10px;
    }
    .thread-message-user {
        margin-right: 10px;
    }
}

/* ============================================================
   SYSTEM MESSAGES SECTION
   ============================================================ */

.system-messages-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    margin-top: 20px;
}

.system-message-form-container {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 28px;
    height: fit-content;
}

.system-message-form-container h2 {
    color: var(--primary-text);
    font-size: 18px;
    margin: 0 0 24px 0;
    font-weight: 700;
}

.system-message-form-container .form-group {
    margin-bottom: 20px;
}

.system-message-form-container label {
    display: block;
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.system-message-form-container input[type="text"],
.system-message-form-container textarea,
.system-message-form-container select {
    width: 100%;
    padding: 12px;
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    color: var(--primary-text);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    transition: var(--transition);
}

.system-message-form-container input[type="text"]:focus,
.system-message-form-container textarea:focus,
.system-message-form-container select:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 3px rgba(209, 77, 106, 0.08);
}

.system-message-form-container textarea {
    resize: vertical;
    min-height: 150px;
}

.system-message-form-container select[multiple] {
    min-height: 140px;
    padding: 8px;
}

.system-message-form-container select[multiple] option {
    padding: 8px;
    margin: 2px 0;
    border-radius: var(--radius-sm);
}

.system-message-form-container select[multiple] option:checked {
    background: linear-gradient(var(--highlight-color), var(--highlight-color));
    color: #fff;
}

.form-help-text {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: var(--muted-text);
    font-style: italic;
}

.send-message-button {
    width: 100%;
    padding: 14px 24px;
    background-color: var(--highlight-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    box-shadow: var(--shadow-sm);
}

.send-message-button:hover {
    background-color: var(--highlight-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.send-message-button:disabled {
    background-color: var(--muted-text);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.system-messages-history {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.system-messages-history h2 {
    color: var(--primary-text);
    font-size: 18px;
    margin: 0 0 24px 0;
    font-weight: 700;
}

.messages-table-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-md);
}

.messages-table {
    width: 100%;
    border-collapse: collapse;
}

.messages-table thead {
    background: var(--tertiary-bg);
    position: sticky;
    top: 0;
    z-index: 10;
}

.messages-table th {
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    text-align: left;
    padding: 14px 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
}

.messages-table td {
    color: var(--secondary-text);
    font-size: 14px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--page-border);
}

.messages-table tbody tr:hover {
    background: var(--surface-hover);
}

.messages-table tbody tr:last-child td {
    border-bottom: none;
}

.message-subject-cell {
    color: var(--highlight-color);
    font-weight: 600;
}

.message-tiers-cell {
    color: var(--secondary-text);
    font-size: 13px;
}

.tier-tag {
    display: inline-block;
    padding: 3px 8px;
    background-color: rgba(209, 77, 106, 0.08);
    border-radius: var(--radius-sm);
    margin-right: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--highlight-color);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.message-date-cell {
    color: var(--secondary-text);
    font-size: 13px;
    white-space: nowrap;
}

.message-action-btn {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    margin-right: 5px;
}

.message-action-btn:hover {
    background: var(--surface-hover);
    transform: translateY(-1px);
}

.message-action-btn.view {
    background: #3B82F6;
    border-color: #3B82F6;
    color: #fff;
}

.message-action-btn.view:hover {
    background: #2563EB;
    box-shadow: var(--shadow-md);
}

.message-action-btn.delete {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.message-action-btn.delete:hover {
    background: #b91c1c;
    box-shadow: var(--shadow-md);
}

/* ============================================================
   MESSAGE MODAL
   ============================================================ */

.message-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.message-modal-content {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-xl);
    margin: 5% auto;
    padding: 30px;
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 700px;
    max-height: 80%;
    overflow-y: auto;
}

.message-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
    padding-bottom: 15px;
}

.message-modal-title {
    color: var(--highlight-color);
    font-size: 22px;
    font-weight: 700;
}

.message-modal-close {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

.message-modal-close:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ============================================================
   CONTACT MESSAGES TABLE
   ============================================================ */

.contact-messages-table-container {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.contact-messages-table {
    width: 100%;
    border-collapse: collapse;
}

.contact-messages-table thead {
    background: var(--tertiary-bg);
}

.contact-messages-table th {
    padding: 14px 16px;
    text-align: left;
    color: var(--muted-text);
    font-weight: 600;
    font-size: 0.7rem;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.contact-messages-table tbody tr {
    border-bottom: 1px solid var(--page-border);
    transition: background 0.2s;
}

.contact-messages-table tbody tr:hover {
    background: var(--surface-hover);
}

.contact-messages-table tbody tr:last-child {
    border-bottom: none;
}

.contact-messages-table td {
    padding: 14px 16px;
    color: var(--secondary-text);
    font-size: 14px;
    vertical-align: top;
}

.contact-name-cell {
    font-weight: 500;
    color: var(--primary-text);
    white-space: nowrap;
}

.contact-email-cell {
    color: var(--highlight-color);
    white-space: nowrap;
}

.contact-date-cell {
    color: var(--secondary-text);
    white-space: nowrap;
    font-size: 13px;
}

.contact-message-cell {
    max-width: 500px;
    line-height: 1.6;
    word-wrap: break-word;
}

/* ============================================================
   EMAIL TESTING SECTION
   ============================================================ */

.email-testing-controls {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-end;
    gap: 16px;
}

.email-testing-controls .form-group {
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.email-testing-controls label {
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.email-testing-controls input[type="email"] {
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--primary-text);
    font-size: 14px;
    transition: var(--transition);
}

.email-testing-controls input[type="email"]:focus {
    outline: none;
    border-color: var(--highlight-color);
    background: var(--secondary-bg);
    box-shadow: 0 0 0 3px rgba(209, 77, 106, 0.08);
}

.secondary-button {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.secondary-button:hover {
    background: var(--surface-hover);
    border-color: rgba(0, 0, 0, 0.12);
}

.email-templates-table-container {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.email-templates-table {
    width: 100%;
    border-collapse: collapse;
}

.email-templates-table thead {
    background: var(--tertiary-bg);
}

.email-templates-table th {
    padding: 14px 16px;
    text-align: left;
    color: var(--muted-text);
    font-weight: 600;
    font-size: 0.7rem;
    border-bottom: 2px solid rgba(209, 77, 106, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.email-templates-table tbody tr {
    border-bottom: 1px solid var(--page-border);
    transition: background 0.2s;
}

.email-templates-table tbody tr:hover {
    background: var(--surface-hover);
}

.email-templates-table tbody tr:last-child {
    border-bottom: none;
}

.email-templates-table td {
    padding: 14px 16px;
    color: var(--secondary-text);
    font-size: 14px;
}

.template-name {
    font-weight: 500;
    color: var(--primary-text);
}

.template-description {
    color: var(--secondary-text);
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.status-badge.active {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.15);
}

.status-badge.pending {
    background: rgba(217, 119, 6, 0.08);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.15);
}

.send-test-btn {
    background: var(--highlight-color);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.send-test-btn:hover {
    background: var(--highlight-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.send-test-btn:active {
    transform: translateY(0);
}

.send-test-btn:disabled {
    background: var(--muted-text);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.message-modal-body {
    color: var(--secondary-text);
    line-height: 1.8;
    font-size: 15px;
}

.message-modal-meta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--page-border);
    color: var(--muted-text);
    font-size: 13px;
}

@media (max-width: 1200px) {
    .system-messages-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .messages-table-container {
        overflow-x: auto;
    }
    .messages-table {
        min-width: 600px;
    }
    .message-modal-content {
        width: 95%;
        padding: 20px;
    }
}

/* ============================================================
   ADMIN ACTION MODALS
   ============================================================ */

.admin-modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.admin-modal-content {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    margin: 10% auto;
    padding: 0;
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-modal-header {
    background: linear-gradient(135deg, rgba(209, 77, 106, 0.06) 0%, rgba(31, 41, 55, 0.06) 100%);
    border-bottom: 1px solid var(--page-border);
    padding: 22px 30px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-modal-title {
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.admin-modal-close {
    background: rgba(0, 0, 0, 0.04);
    color: var(--secondary-text);
    border: 1px solid var(--page-border);
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

.admin-modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-text);
}

.admin-modal-body {
    padding: 30px;
}

.admin-modal-body p {
    color: var(--secondary-text);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.admin-modal-body .user-email {
    color: var(--highlight-color);
    font-weight: 600;
}

/* Tier Selection List */
.tier-selection-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.tier-option {
    background: var(--primary-bg);
    border: 2px solid var(--page-border);
    border-radius: var(--radius-md);
    padding: 15px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tier-option:hover {
    background: var(--secondary-bg);
    border-color: var(--highlight-color);
    transform: translateX(5px);
    box-shadow: var(--shadow-sm);
}

.tier-option.selected {
    background: var(--secondary-bg);
    border-color: var(--highlight-color);
    transform: translateX(5px);
    box-shadow: 0 0 0 1px var(--highlight-color), var(--shadow-sm);
}

.tier-option.current {
    border-color: var(--highlight-color);
    background: rgba(209, 77, 106, 0.04);
}

.tier-option-name {
    color: var(--primary-text);
    font-weight: 600;
    font-size: 16px;
}

.tier-option-tokens {
    color: var(--muted-text);
    font-size: 14px;
}

.tier-option.current .tier-option-name {
    color: var(--highlight-color);
}

.tier-option.current .tier-current-badge {
    background: var(--highlight-color);
    color: white;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Token Input */
.token-input-group {
    margin: 20px 0;
}

.token-input-group label {
    display: block;
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.token-input-group input {
    width: 100%;
    background: var(--primary-bg);
    border: 2px solid var(--page-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    color: var(--primary-text);
    font-size: 16px;
    transition: var(--transition);
    box-sizing: border-box;
}

.token-input-group input:focus {
    outline: none;
    border-color: var(--highlight-color);
    background: var(--secondary-bg);
    box-shadow: 0 0 0 3px rgba(209, 77, 106, 0.08);
}

.token-input-group input[type="number"]::-webkit-inner-spin-button,
.token-input-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.token-input-group input[type="number"] {
    -moz-appearance: textfield;
}

.token-input-help {
    color: var(--muted-text);
    font-size: 13px;
    margin-top: 8px;
}

/* Modal Actions */
.admin-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 30px;
}

.admin-modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.admin-modal-btn-secondary {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
}

.admin-modal-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

.admin-modal-btn-primary {
    background: linear-gradient(135deg, #D14D6A 0%, #1F2937 100%);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.admin-modal-btn-primary:hover {
    background: linear-gradient(135deg, #B8455E 0%, #111827 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.admin-modal-btn-danger {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.15);
    color: #dc2626;
    box-shadow: none;
}

.admin-modal-btn-danger:hover {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.25);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Success/Error Messages */
.admin-modal-message {
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
}

.admin-modal-message.success {
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.15);
    color: #16a34a;
}

.admin-modal-message.error {
    background: rgba(209, 77, 106, 0.06);
    border: 1px solid rgba(209, 77, 106, 0.15);
    color: var(--highlight-color);
}

/* Toast Notifications */
.admin-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 20000;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s ease;
}

.admin-toast.show {
    opacity: 1;
    transform: translateX(0);
}

.admin-toast svg {
    flex-shrink: 0;
}

.admin-toast span {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.admin-toast-success {
    border-left: 4px solid #16a34a;
}

.admin-toast-success svg {
    stroke: #16a34a;
}

.admin-toast-error {
    border-left: 4px solid var(--highlight-color);
}

.admin-toast-error svg {
    stroke: var(--highlight-color);
}

@media (max-width: 768px) {
    .admin-toast {
        right: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
    }
}

/* ============================================================
   ERROR LOGS SECTION
   ============================================================ */

.error-type-badge {
    display: inline-block;
    padding: 4px 10px;
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.status-badge.resolved {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.status-badge.unresolved {
    background: rgba(209, 77, 106, 0.08);
    color: var(--highlight-color);
}

.btn-small {
    padding: 5px 10px;
    font-size: 12px;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--tertiary-bg);
    color: var(--secondary-text);
    margin-right: 5px;
    transition: var(--transition);
}

.btn-small:hover {
    background: var(--surface-hover);
    color: var(--primary-text);
}

.btn-small.btn-success {
    background: rgba(22, 163, 74, 0.06);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.15);
}

.btn-small.btn-success:hover {
    background: rgba(22, 163, 74, 0.1);
}

.btn-small.btn-danger {
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
    border-color: rgba(209, 77, 106, 0.15);
}

.btn-small.btn-danger:hover {
    background: rgba(209, 77, 106, 0.1);
}

.btn-danger {
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
    border: 1px solid rgba(209, 77, 106, 0.15);
}

.btn-danger:hover {
    background: rgba(209, 77, 106, 0.1);
}

#errorLogsPagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding: 15px;
}

#errorLogsPagination button {
    padding: 8px 16px;
    background: var(--tertiary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    color: var(--secondary-text);
    cursor: pointer;
    transition: var(--transition);
}

#errorLogsPagination button:hover {
    background: var(--surface-hover);
    color: var(--primary-text);
    border-color: rgba(0, 0, 0, 0.12);
}

#errorLogsPagination span {
    color: var(--muted-text);
    font-size: 14px;
}

/* ============================================================
   PROVIDER MANAGEMENT
   ============================================================ */

.section-description {
    color: var(--muted-text);
    font-size: 14px;
    margin-top: 5px;
}

.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.provider-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: var(--transition);
}

.provider-card:hover {
    border-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.provider-card.inactive {
    opacity: 0.6;
}

.provider-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.provider-card-header h3 {
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.provider-status {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.provider-status.active {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.provider-status.inactive {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.provider-usage {
    margin-bottom: 15px;
}

.usage-bar {
    height: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 8px;
}

.usage-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.usage-fill.normal {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.usage-fill.warning {
    background: linear-gradient(90deg, #D97706, #F59E0B);
}

.usage-fill.critical {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.usage-text {
    color: var(--muted-text);
    font-size: 13px;
}

.provider-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.provider-stat {
    background: var(--tertiary-bg);
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--page-border);
}

.provider-stat-label {
    display: block;
    color: var(--muted-text);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    font-weight: 600;
}

.provider-stat-value {
    color: var(--primary-text);
    font-size: 16px;
    font-weight: 600;
}

.provider-key-status {
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-align: center;
    margin-bottom: 15px;
}

.provider-key-status.has-key {
    background: rgba(22, 163, 74, 0.04);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.12);
}

.provider-key-status.no-key {
    background: rgba(217, 119, 6, 0.04);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.12);
}

.provider-error {
    background: rgba(220, 38, 38, 0.04);
    border: 1px solid rgba(220, 38, 38, 0.12);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 15px;
    font-size: 12px;
    color: #dc2626;
}

.provider-actions {
    display: flex;
    gap: 10px;
}

.provider-btn {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.provider-btn.configure {
    background: var(--tertiary-bg);
    color: var(--primary-text);
}

.provider-btn.configure:hover {
    background: var(--surface-hover);
    border-color: rgba(0, 0, 0, 0.12);
}

.provider-btn.activate {
    background: rgba(22, 163, 74, 0.06);
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.15);
}

.provider-btn.activate:hover {
    background: rgba(22, 163, 74, 0.1);
}

.provider-btn.deactivate {
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.15);
}

.provider-btn.deactivate:hover {
    background: rgba(220, 38, 38, 0.1);
}

.provider-btn.test {
    background: rgba(59, 130, 246, 0.06);
    color: #3B82F6;
    border-color: rgba(59, 130, 246, 0.15);
}

.provider-btn.test:hover {
    background: rgba(59, 130, 246, 0.1);
}

.provider-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================
   SERPER DASHBOARD
   ============================================================ */

.serper-dashboard {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin: 30px 0;
}

@media (max-width: 1024px) {
    .serper-dashboard {
        grid-template-columns: 1fr;
    }
}

.serper-main-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    padding: 30px;
}

.serper-logo-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--page-border);
}

.serper-logo {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #D14D6A 0%, #1F2937 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.serper-info h2 {
    color: var(--primary-text);
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 5px 0;
    letter-spacing: -0.02em;
}

.serper-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.serper-status.active {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.serper-status.inactive {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

.serper-status.checking {
    background: rgba(217, 119, 6, 0.08);
    color: #D97706;
}

.serper-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.serper-stat {
    background: var(--tertiary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    transition: var(--transition);
}

.serper-stat:hover {
    border-color: rgba(0, 0, 0, 0.12);
}

.serper-stat-value {
    display: block;
    color: var(--primary-text);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.serper-stat-label {
    color: var(--muted-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.serper-actions {
    display: flex;
    gap: 15px;
}

.serper-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: 1px solid var(--page-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.serper-btn.configure {
    background: var(--tertiary-bg);
    color: var(--primary-text);
}

.serper-btn.configure:hover {
    background: var(--surface-hover);
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.12);
}

.serper-btn.test {
    background: linear-gradient(135deg, #D14D6A 0%, #1F2937 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
}

.serper-btn.test:hover {
    background: linear-gradient(135deg, #B8455E 0%, #111827 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.serper-pricing-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 25px;
}

.serper-pricing-card h3 {
    color: var(--primary-text);
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pricing-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.pricing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: var(--tertiary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-md);
}

.pricing-label {
    color: var(--muted-text);
    font-size: 13px;
}

.pricing-value {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
}

.serper-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: rgba(209, 77, 106, 0.04);
    border: 1px solid rgba(209, 77, 106, 0.12);
    border-radius: var(--radius-md);
    color: var(--highlight-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.serper-link:hover {
    background: rgba(209, 77, 106, 0.08);
    border-color: rgba(209, 77, 106, 0.2);
}

/* Provider Logs Section */
.provider-logs-section {
    margin-top: 40px;
}

.provider-logs-section h2 {
    color: var(--primary-text);
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
}

.provider-logs-table {
    width: 100%;
}

.log-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.log-status.success {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.log-status.error {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

/* Provider Config Modal (second block) */
.admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.admin-modal-content {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    box-shadow: var(--shadow-xl);
    border-radius: var(--radius-xl);
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow-y: auto;
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid var(--page-border);
}

.admin-modal-title {
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.admin-modal-close {
    background: none;
    border: none;
    color: var(--muted-text);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: var(--transition);
}

.admin-modal-close:hover {
    color: var(--primary-text);
}

.admin-modal-body {
    padding: 24px;
}

.admin-modal-body .form-group {
    margin-bottom: 20px;
}

.admin-modal-body .form-group label {
    display: block;
    color: var(--muted-text);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-modal-body .form-group input {
    width: 100%;
    padding: 10px 12px;
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    color: var(--primary-text);
    font-size: 14px;
    box-sizing: border-box;
    transition: var(--transition);
}

.admin-modal-body .form-group input:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 3px rgba(209, 77, 106, 0.08);
}

.form-help-text {
    color: var(--muted-text);
    font-size: 12px;
    margin-top: 6px;
}

.admin-modal-actions {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid var(--page-border);
}

.admin-modal-btn {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.admin-modal-btn-secondary {
    background: var(--tertiary-bg);
    color: var(--primary-text);
    border: 1px solid var(--page-border);
}

.admin-modal-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

.admin-modal-btn-primary {
    background: var(--highlight-color);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.admin-modal-btn-primary:hover {
    background: var(--highlight-hover);
    box-shadow: var(--shadow-md);
}

/* Empty state */
.empty-state {
    text-align: center;
    color: var(--muted-text);
    padding: 40px;
    font-size: 16px;
}

/* Error message (second block) */
.error-message {
    text-align: center;
    color: #dc2626;
    padding: 40px;
    font-size: 16px;
    background: rgba(220, 38, 38, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid rgba(220, 38, 38, 0.1);
}

/* ============================================================
   DUAL-PROVIDER DASHBOARD
   ============================================================ */

.providers-summary-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .providers-summary-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.summary-stat {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 22px;
    text-align: center;
    transition: var(--transition);
}

.summary-stat:hover {
    border-color: rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.summary-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 5px;
}

.summary-value.free-active {
    color: #16a34a;
}

.summary-value.free-backup {
    color: #D97706;
}

.summary-value.free-exhausted {
    color: #dc2626;
}

.summary-label {
    display: block;
    font-size: 0.7rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Providers Grid */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

@media (max-width: 900px) {
    .providers-grid {
        grid-template-columns: 1fr;
    }
}

/* Provider Card Large */
.provider-card-large {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-lg);
    padding: 26px;
    transition: var(--transition);
}

.provider-card-large:hover {
    border-color: rgba(209, 77, 106, 0.15);
    box-shadow: var(--shadow-md);
}

.provider-card-large.inactive {
    opacity: 0.6;
    border-color: var(--page-border);
}

.provider-card-large.inactive:hover {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: var(--shadow-sm);
}

/* Provider Card Header */
.provider-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.provider-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.provider-logo {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-logo.serpapi {
    background: linear-gradient(135deg, #16a34a, #4ade80);
    box-shadow: var(--shadow-sm);
}

.provider-logo svg {
    stroke: #fff;
}

.provider-name-section h3 {
    color: var(--primary-text);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.provider-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 8px;
}

.provider-badge.primary {
    background: rgba(108, 92, 231, 0.08);
    color: #6c5ce7;
}

.provider-badge.backup {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.provider-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.provider-status.active {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.provider-status.inactive {
    background: rgba(217, 119, 6, 0.08);
    color: #D97706;
}

.provider-status.no-key {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}

/* Provider Actions Mini */
.provider-actions-mini {
    display: flex;
    gap: 8px;
}

.provider-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--page-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.provider-btn-icon.test {
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
}

.provider-btn-icon.test:hover {
    background: var(--highlight-color);
    color: #fff;
    border-color: var(--highlight-color);
    box-shadow: var(--shadow-md);
}

.provider-btn-icon svg {
    stroke: currentColor;
}

/* Usage Section */
.provider-usage-section {
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-md);
    padding: 18px;
    margin-bottom: 20px;
}

.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.usage-title {
    color: var(--muted-text);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.usage-count {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 600;
}

.usage-bar-container {
    height: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 8px;
}

.usage-bar {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 0.5s ease, background 0.3s ease;
}

.usage-bar.good {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.usage-bar.warning {
    background: linear-gradient(90deg, #D97706, #F59E0B);
}

.usage-bar.critical {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.usage-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.usage-remaining {
    color: var(--muted-text);
}

.usage-percent {
    color: var(--primary-text);
    font-weight: 600;
}

/* Provider Stats Row */
.provider-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.provider-stat-item {
    text-align: center;
    padding: 14px;
    background: var(--tertiary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
}

.provider-stat-item .stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 4px;
}

.provider-stat-item .stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Provider Pricing */
.provider-pricing {
    border-top: 1px solid var(--page-border);
    padding-top: 16px;
}

.pricing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.pricing-row span {
    color: var(--muted-text);
}

.pricing-row strong {
    color: var(--primary-text);
}

/* Provider Badge Small */
.provider-badge-small {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.provider-badge-small.serpapi {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
}

.provider-badge-small.serper {
    background: rgba(217, 119, 6, 0.08);
    color: #D97706;
}

/* ============================================================
   EMAIL TEMPLATE EDITOR
   ============================================================ */

.email-editor-layout {
    display: flex;
    gap: 0;
    height: calc(100vh - 200px);
    min-height: 600px;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

/* Template List Sidebar */
.email-template-list {
    width: 260px;
    min-width: 260px;
    background: var(--tertiary-bg);
    border-right: 1px solid var(--page-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.template-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--page-border);
}

.template-list-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.template-count {
    background: rgba(209, 77, 106, 0.08);
    color: var(--highlight-color);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.template-list-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.template-list-loading {
    padding: 20px;
    text-align: center;
    color: var(--muted-text);
    font-size: 13px;
}

.template-list-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 20px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.template-list-item:hover {
    background: var(--surface-hover);
}

.template-list-item.active {
    background: rgba(209, 77, 106, 0.04);
    border-left-color: var(--highlight-color);
}

.template-list-item .tli-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-text);
}

.template-list-item .tli-from {
    font-size: 11px;
    color: var(--muted-text);
}

.template-list-item.active .tli-name {
    color: var(--highlight-color);
}

.template-list-item.modified .tli-name::after {
    content: ' \2022';
    color: var(--highlight-color);
}

/* Editor Panel */
.email-editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--muted-text);
}

.editor-empty-state svg { opacity: 0.3; }

.editor-empty-state h3 {
    margin: 0;
    font-size: 18px;
    color: var(--secondary-text);
}

.editor-empty-state p {
    margin: 0;
    font-size: 14px;
}

.editor-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Metadata bar */
.editor-metadata {
    padding: 16px 20px;
    border-bottom: 1px solid var(--page-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.editor-meta-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-field-wide { flex: 1; }

.meta-field label {
    font-size: 10px;
    font-weight: 700;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text);
    padding: 8px 0;
}

.meta-input, .meta-select {
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--primary-text);
    font-size: 14px;
    font-family: inherit;
    transition: all 0.15s ease;
}

.meta-input:focus, .meta-select:focus {
    outline: none;
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px rgba(209, 77, 106, 0.08);
}

.meta-select {
    cursor: pointer;
    min-width: 200px;
}

/* Tab bar */
.editor-tabs {
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid var(--page-border);
    background: var(--tertiary-bg);
    flex-shrink: 0;
}

.editor-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.editor-tab:hover { color: var(--primary-text); }

.editor-tab.active {
    color: var(--highlight-color);
    border-bottom-color: var(--highlight-color);
}

.editor-tab-spacer { flex: 1; }

.preview-width-toggle {
    display: flex;
    gap: 4px;
}

.width-btn {
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
}

.width-btn.active {
    background: rgba(209, 77, 106, 0.08);
    border-color: var(--highlight-color);
    color: var(--highlight-color);
}

/* Editor area -- keep dark code editor */
.editor-area {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.codemirror-container { height: 100%; }

/* CodeMirror -- KEEP dark editor background */
.codemirror-container .CodeMirror {
    height: 100%;
    background: #1E293B;
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.5;
}

.codemirror-container .CodeMirror-gutters {
    background: #1a2332;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.codemirror-container .CodeMirror-linenumber { color: rgba(255,255,255,0.2); }
.codemirror-container .CodeMirror-cursor { border-left-color: var(--highlight-color); }
.codemirror-container .CodeMirror-selected { background: rgba(209, 77, 106, 0.2) !important; }
.codemirror-container .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.03); }
.codemirror-container .CodeMirror-matchingbracket { color: var(--highlight-color) !important; text-decoration: underline; }

/* Preview container */
.preview-container {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    background: var(--tertiary-bg);
    overflow-y: auto;
}

.preview-container iframe {
    width: 600px;
    height: 100%;
    border: none;
    border-radius: var(--radius-sm);
    background: #ffffff;
    transition: width 0.3s ease;
    box-shadow: var(--shadow-md);
}

.preview-container iframe.mobile { width: 375px; }

/* Bottom bar */
.editor-bottom-bar {
    border-top: 1px solid var(--page-border);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--tertiary-bg);
    flex-shrink: 0;
}

.variable-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.variable-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 10px;
    background: rgba(209, 77, 106, 0.06);
    border: 1px solid rgba(209, 77, 106, 0.12);
    border-radius: var(--radius-full);
    color: var(--highlight-color);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.variable-chip:hover {
    background: rgba(209, 77, 106, 0.1);
    border-color: rgba(209, 77, 106, 0.2);
    transform: translateY(-1px);
}

.variable-chip::before { content: '{{'; opacity: 0.5; }
.variable-chip::after { content: '}}'; opacity: 0.5; }

.editor-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-actions-left, .editor-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-send-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-email-input {
    background: var(--primary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    color: var(--primary-text);
    font-size: 13px;
    width: 200px;
    font-family: inherit;
    transition: all 0.15s ease;
}

.test-email-input:focus {
    outline: none;
    border-color: var(--highlight-color);
}

.editor-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.editor-btn.primary {
    background: linear-gradient(135deg, #D14D6A 0%, #1F2937 100%);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.editor-btn.primary:hover {
    background: linear-gradient(135deg, #B8455E 0%, #111827 100%);
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

.editor-btn.secondary {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--page-border);
    color: var(--secondary-text);
}

.editor-btn.secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--primary-text);
}

.editor-btn.accent {
    background: var(--highlight-color);
    color: #ffffff;
}

.editor-btn.accent:hover { background: var(--highlight-hover); }

.editor-btn.danger {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.15);
    color: #dc2626;
}

.editor-btn.danger:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.25);
}

.editor-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Dirty indicator */
.editor-dirty-indicator {
    font-size: 11px;
    color: #D97706;
    font-weight: 600;
    padding: 4px 10px;
    background: rgba(217, 119, 6, 0.06);
    border-radius: var(--radius-full);
    margin-left: 8px;
}

/* Variables row in bottom bar */
.editor-variables-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.variables-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
    .email-editor-layout {
        flex-direction: column;
        height: auto;
    }
    .email-template-list {
        width: 100%;
        min-width: auto;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--page-border);
    }
    .template-list-items {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }
    .template-list-item {
        padding: 8px 12px;
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    .template-list-item.active {
        border-bottom-color: var(--highlight-color);
        border-left-color: transparent;
    }
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

#notification-container {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.notification {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: var(--radius-lg, 16px);
    padding: 16px 20px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
    animation: notifSlideIn 0.3s ease-out;
    position: relative;
    pointer-events: all;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification.success { border-color: rgba(22, 163, 74, 0.25); }
.notification.success .notification-icon { color: #16a34a; }
.notification.error { border-color: rgba(209, 77, 106, 0.25); }
.notification.error .notification-icon { color: #D14D6A; }
.notification.warning { border-color: rgba(217, 119, 6, 0.25); }
.notification.warning .notification-icon { color: #D97706; }
.notification.info { border-color: rgba(59, 130, 246, 0.25); }
.notification.info .notification-icon { color: #3B82F6; }

.notification-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.notification-content { flex: 1; }
.notification-title { color: var(--primary-text); font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.notification-message { color: var(--secondary-text); font-size: 13px; line-height: 1.4; }

.notification-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--muted-text);
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.notification-close:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--primary-text);
}

@keyframes notifSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes notifSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.notification.removing {
    animation: notifSlideOut 0.3s ease-in;
}

/* ============================================================
   STYLED CONFIRMATION MODAL
   ============================================================ */

.crm-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.crm-confirm-overlay.visible { opacity: 1; }

.crm-confirm-dialog {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: 14px;
    padding: 28px 32px 22px;
    max-width: 420px;
    width: 90%;
    box-shadow: var(--shadow-xl);
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.crm-confirm-overlay.visible .crm-confirm-dialog { transform: scale(1); }

.crm-confirm-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 10px;
}
.crm-confirm-message {
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.5;
    margin-bottom: 22px;
}
.crm-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.crm-confirm-btn {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.crm-confirm-btn.cancel {
    background: rgba(0, 0, 0, 0.04);
    color: var(--secondary-text);
    border: 1px solid var(--page-border);
}
.crm-confirm-btn.cancel:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-text);
}
.crm-confirm-btn.confirm {
    background: linear-gradient(135deg, #D14D6A, #1F2937);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.crm-confirm-btn.confirm:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
}

/* ============================================================
   OUTBOUND EMAIL SECTION
   ============================================================ */

/* SES status bar */
.ob-ses-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 24px;
}
.ob-ses-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ob-ses-label {
    font-size: 0.81rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ob-ses-value {
    font-size: 0.95rem;
    color: var(--primary-text);
    font-weight: 500;
}
.ob-ses-badge {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(234, 88, 12, 0.06);
    border: 1px solid rgba(234, 88, 12, 0.15);
    color: #EA580C;
    width: fit-content;
    transition: all 0.3s;
}
.ob-ses-link {
    margin-left: auto;
    font-size: 0.91rem;
    color: var(--highlight-color);
    text-decoration: none;
    border: 1px solid rgba(209, 77, 106, 0.15);
    border-radius: 6px;
    padding: 5px 12px;
    transition: background 0.2s;
}
.ob-ses-link:hover { background: rgba(209, 77, 106, 0.04); }

/* Section blocks */
.ob-block {
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 22px;
}
.ob-block-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 16px;
}
.ob-block-header h2 {
    margin: 0;
    font-size: 1.13rem;
    font-weight: 600;
    color: var(--primary-text);
}
.ob-block-sub {
    font-size: 0.88rem;
    color: var(--muted-text);
}

/* ICP grid */
.ob-icp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.ob-icp-card {
    border-radius: 10px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid var(--page-border);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ob-icp-card.ob-tier1 { border-left: 3px solid rgba(209, 77, 106, 0.4); }
.ob-icp-card.ob-tier2 { border-left: 3px solid rgba(108, 92, 231, 0.4); }
.ob-icp-card.ob-tier3 { border-left: 3px solid rgba(156, 163, 175, 0.4); }
.ob-icp-tier {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    opacity: 0.7;
}
.ob-tier1 .ob-icp-tier { color: var(--highlight-color); }
.ob-tier2 .ob-icp-tier { color: #6c5ce7; }
.ob-tier3 .ob-icp-tier { color: #9CA3AF; }
.ob-icp-name {
    font-size: 1.03rem;
    font-weight: 600;
    color: var(--primary-text);
}
.ob-icp-pain {
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.4;
}
.ob-icp-data {
    font-size: 0.83rem;
    color: var(--muted-text);
    margin-top: 2px;
}
.ob-icp-hook {
    font-size: 0.85rem;
    color: var(--highlight-color);
    font-style: italic;
    margin-top: 2px;
}
.ob-icp-size {
    font-size: 0.81rem;
    color: var(--muted-text);
    margin-top: 4px;
}

/* ============================================================
   OUTBOUND SUB-TABS
   ============================================================ */
.ob-sub-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--page-border);
    margin-bottom: 24px;
}
.ob-sub-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.91rem;
    font-weight: 500;
    color: var(--muted-text);
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    letter-spacing: 0.01em;
}
.ob-sub-tab:hover { color: var(--primary-text); }
.ob-sub-tab.active {
    color: var(--primary-text);
    border-bottom-color: var(--highlight-color);
}

/* ============================================================
   ALT OUTREACH CHANNEL STATUS BADGES
   ============================================================ */
.ob-alt-ch-status {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
}
.ob-alt-ch-status.not-started {
    background: rgba(156, 163, 175, 0.1);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.15);
}
.ob-alt-ch-status.planning {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.15);
}
.ob-alt-ch-status.active {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.15);
}
.ob-alt-ch-status.paused {
    background: rgba(124, 58, 237, 0.08);
    color: #7C3AED;
    border: 1px solid rgba(124, 58, 237, 0.15);
}

/* ============================================================
   SEGMENT PERFORMANCE TABLE
   ============================================================ */
.ob-seg-table {
    font-size: 0.89rem;
}
.ob-seg-table th {
    font-size: 0.76rem;
    padding: 7px 8px;
    white-space: nowrap;
}
.ob-seg-table td {
    padding: 9px 8px;
    vertical-align: middle;
}
/* Segment name — clickable link style */
.ob-seg-name {
    color: var(--primary-text);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s;
}
.ob-seg-name:hover {
    color: var(--highlight-color);
}
/* Tier badge */
.ob-seg-tier {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
}
.ob-seg-tier.t1 {
    background: rgba(209, 77, 106, 0.08);
    color: var(--highlight-color);
    border: 1px solid rgba(209, 77, 106, 0.15);
}
.ob-seg-tier.t2 {
    background: rgba(108, 92, 231, 0.07);
    color: #6c5ce7;
    border: 1px solid rgba(108, 92, 231, 0.15);
}
.ob-seg-tier.t3 {
    background: rgba(156, 163, 175, 0.1);
    color: #6B7280;
    border: 1px solid rgba(156, 163, 175, 0.2);
}
.ob-seg-tier.t4 {
    background: rgba(156, 163, 175, 0.05);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.1);
}
/* Landing page link */
.ob-seg-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.15s;
    border: 1px solid rgba(209, 77, 106, 0.12);
}
.ob-seg-link:hover {
    background: rgba(209, 77, 106, 0.12);
    transform: translateY(-1px);
}
/* Progress bar (sent / target) */
.ob-seg-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}
.ob-seg-progress-track {
    flex: 1;
    height: 5px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.ob-seg-progress-fill {
    height: 100%;
    background: var(--highlight-color);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.ob-seg-progress-label {
    font-size: 0.76rem;
    color: var(--muted-text);
    white-space: nowrap;
}
/* Metric cells — center-aligned with their headers */
.ob-seg-metric {
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.ob-seg-table th:nth-child(n+5) {
    text-align: center;
}
.ob-seg-metric.good {
    color: #16a34a;
    font-weight: 600;
}
.ob-seg-metric.warn {
    color: #d97706;
    font-weight: 600;
}
.ob-seg-metric.bad {
    color: #dc2626;
    font-weight: 600;
}
.ob-seg-metric.muted {
    color: var(--muted-text);
}
/* Status badge — click to cycle */
.ob-seg-status {
    display: inline-block;
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.ob-seg-status.queued {
    background: rgba(156, 163, 175, 0.1);
    color: #6B7280;
    border: 1px solid rgba(156, 163, 175, 0.2);
}
.ob-seg-status.testing {
    background: rgba(217, 119, 6, 0.08);
    color: #d97706;
    border: 1px solid rgba(217, 119, 6, 0.15);
}
.ob-seg-status.active {
    background: rgba(14, 165, 233, 0.08);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.15);
}
.ob-seg-status.winner {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.15);
}
.ob-seg-status.cut {
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.12);
}
/* Row-level highlighting */
.ob-seg-row.status-winner td {
    background: rgba(22, 163, 74, 0.03);
}
.ob-seg-row.status-cut td {
    opacity: 0.5;
    text-decoration: line-through;
    text-decoration-color: rgba(220, 38, 38, 0.3);
}
.ob-seg-row.status-cut .ob-seg-status {
    opacity: 1;
    text-decoration: none;
}
/* Expand button */
.ob-seg-expand {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    color: var(--muted-text);
    font-size: 0.85rem;
    transition: all 0.15s;
}
.ob-seg-expand:hover {
    background: rgba(0, 0, 0, 0.03);
    color: var(--primary-text);
}
/* Zero-signup warning */
.ob-seg-warn {
    display: inline-block;
    margin-left: 4px;
    color: #d97706;
    font-size: 0.85rem;
    vertical-align: middle;
}
/* Disabled expand button */
.ob-seg-expand.disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* Campaign sub-rows (nested under segment) */
.ob-sub-row td {
    background: rgba(0, 0, 0, 0.018);
    padding: 6px 8px !important;
    font-size: 0.83rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
}
.ob-sub-row:last-child td {
    border-bottom: 1px solid var(--page-border) !important;
}
.ob-sub-name {
    padding-left: 20px !important;
    font-weight: 500;
    color: var(--secondary-text);
    position: relative;
}
.ob-sub-name::before {
    content: "└";
    position: absolute;
    left: 6px;
    color: var(--muted-text);
    font-size: 0.8rem;
}
.ob-sub-date {
    font-size: 0.78rem;
    color: var(--muted-text);
}
.ob-sub-row .ob-row-btn {
    padding: 2px 6px;
    font-size: 0.78rem;
}

/* Campaign log */
.ob-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.ob-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-text);
    border-bottom: 1px solid var(--page-border);
}
.ob-table td {
    padding: 10px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--secondary-text);
}
.ob-table tr:last-child td { border-bottom: none; }
.ob-table tr:hover td { background: rgba(0, 0, 0, 0.015); }
.ob-add-btn {
    margin-left: auto;
    background: rgba(209, 77, 106, 0.06);
    border: 1px solid rgba(209, 77, 106, 0.15);
    color: var(--highlight-color);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.ob-add-btn:hover { background: rgba(209, 77, 106, 0.1); }
.ob-row-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--page-border);
    color: var(--secondary-text);
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 4px;
    transition: all 0.15s;
}
.ob-row-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--primary-text); }
.ob-row-btn-del:hover { background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.15); color: #dc2626; }

/* Email templates */
.ob-templates { display: flex; flex-direction: column; gap: 8px; }
.ob-tmpl {
    border: 1px solid var(--page-border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.01);
}
.ob-tmpl-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 0.15s;
}
.ob-tmpl-summary:hover { background: rgba(0, 0, 0, 0.02); }
.ob-tmpl[open] .ob-tmpl-summary { background: rgba(0, 0, 0, 0.02); border-bottom: 1px solid var(--page-border); }
.ob-tmpl-tag {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}
.ob-tmpl-tag.tier1 {
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
    border: 1px solid rgba(209, 77, 106, 0.12);
}
.ob-tmpl-name {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--primary-text);
}
.ob-tmpl-sub {
    font-size: 0.85rem;
    color: var(--muted-text);
    margin-left: auto;
    text-align: right;
}
.ob-tmpl-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ob-tmpl-field { display: flex; flex-direction: column; gap: 4px; }
.ob-tmpl-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted-text);
}
.ob-tmpl-field code {
    background: rgba(209, 77, 106, 0.04);
    border: 1px solid rgba(209, 77, 106, 0.1);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 0.95rem;
    color: var(--highlight-color);
    display: block;
}
.ob-tmpl-field pre {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--page-border);
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 0.93rem;
    color: var(--secondary-text);
    white-space: pre-wrap;
    line-height: 1.6;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* SES Checklist */
.ob-checklist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ob-check-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--secondary-text);
    cursor: pointer;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    line-height: 1.4;
}
.ob-check-item:last-child { border-bottom: none; }
.ob-check-item input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--highlight-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.ob-check-item:has(input:checked) {
    color: #16a34a;
    text-decoration: line-through;
    text-decoration-color: rgba(22, 163, 74, 0.35);
}
.ob-check-item code {
    font-size: 0.88rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--highlight-color);
}

/* ============================================================
   ICP CARD -- clickable + view button
   ============================================================ */
.ob-icp-card {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.ob-icp-card:hover {
    background: rgba(0, 0, 0, 0.02);
}
.ob-icp-card.ob-tier1:hover { border-left-color: rgba(209, 77, 106, 0.7); }
.ob-icp-card.ob-tier2:hover { border-left-color: rgba(108, 92, 231, 0.7); }
.ob-icp-view-btn {
    margin-top: 8px;
    background: none;
    border: 1px solid var(--page-border);
    color: var(--muted-text);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    width: fit-content;
    transition: all 0.15s;
}
.ob-icp-card:hover .ob-icp-view-btn {
    border-color: rgba(209, 77, 106, 0.2);
    color: var(--highlight-color);
}
.ob-tier2:hover .ob-icp-view-btn {
    border-color: rgba(108, 92, 231, 0.25);
    color: #6c5ce7;
}

/* ============================================================
   ICP DETAIL PANEL
   ============================================================ */
.ob-icp-detail {
    /* shown/hidden via JS inline style */
}
.ob-detail-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--page-border);
    flex-wrap: wrap;
}
.ob-detail-back {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--page-border);
    color: var(--secondary-text);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 0.93rem;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.ob-detail-back:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--primary-text);
}
.ob-detail-title {
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0;
}
.ob-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 960px) {
    .ob-detail-grid { grid-template-columns: 1fr; }
}
.ob-detail-left,
.ob-detail-right {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ob-plan-block {
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.ob-plan-block:last-child { margin-bottom: 0; }
.ob-plan-block h4 {
    font-size: 0.81rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--highlight-color);
    margin: 0 0 10px 0;
}
.ob-plan-text {
    font-size: 0.94rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin: 0;
}
.ob-plan-list {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 0.94rem;
    color: var(--secondary-text);
    line-height: 1.8;
}
.ob-channel-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ob-channel-item {
    background: rgba(0, 0, 0, 0.01);
    border: 1px solid var(--page-border);
    border-radius: 7px;
    padding: 9px 12px;
}
.ob-channel-name {
    font-size: 0.89rem;
    font-weight: 700;
    color: var(--primary-text);
    margin-bottom: 4px;
}
.ob-channel-desc {
    font-size: 0.91rem;
    color: var(--secondary-text);
    line-height: 1.5;
}
/* Full-width creative section below the two-column grid */
.ob-creative-section {
    margin-top: 18px;
}
.ob-creative-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
@media (max-width: 960px) {
    .ob-creative-grid { grid-template-columns: 1fr; }
}
.ob-creative-item {
    background: rgba(108, 92, 231, 0.03);
    border: 1px solid rgba(108, 92, 231, 0.08);
    border-radius: 7px;
    padding: 10px 12px;
}
.ob-creative-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c5ce7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}
.ob-creative-title {
    font-size: 0.93rem;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 5px;
}
.ob-creative-desc {
    font-size: 0.91rem;
    color: var(--secondary-text);
    line-height: 1.5;
}

/* Variant blocks */
.ob-variants {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* A/B Tracker table */
.ob-ab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.ob-ab-table th {
    text-align: left;
    padding: 6px 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-text);
    border-bottom: 1px solid var(--page-border);
}
.ob-ab-table td {
    padding: 7px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    vertical-align: middle;
}
.ob-ab-table tr:last-child td { border-bottom: none; }
.ob-ab-num {
    font-weight: 700;
    font-size: 1.01rem;
    color: var(--primary-text);
}
.ob-ab-rate { color: var(--highlight-color); font-weight: 600; }
.ob-ab-desc { font-size: 0.89rem; color: var(--muted-text); }
.ob-ab-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--page-border);
    color: var(--secondary-text);
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 0.83rem;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 3px;
}
.ob-ab-btn.add-sent:hover {
    background: rgba(22, 163, 74, 0.06);
    border-color: rgba(22, 163, 74, 0.15);
    color: #16a34a;
}
.ob-ab-btn.add-reply:hover {
    background: rgba(209, 77, 106, 0.06);
    border-color: rgba(209, 77, 106, 0.15);
    color: var(--highlight-color);
}
.ob-ab-btn.reset-btn {
    color: var(--muted-text);
    font-size: 0.81rem;
}
.ob-ab-btn.reset-btn:hover {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.ob-ab-note {
    font-size: 0.81rem;
    color: var(--muted-text);
    margin: 8px 0 0 0;
}
.ob-ab-reset-all {
    background: none;
    border: none;
    color: rgba(220, 38, 38, 0.4);
    cursor: pointer;
    font-size: 0.81rem;
    padding: 0;
    text-decoration: underline;
}
.ob-ab-reset-all:hover { color: rgba(220, 38, 38, 0.7); }

/* A/B Test Metadata — structured testing framework */
.ob-ab-meta {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.015);
    border-radius: 8px;
    border: 1px solid var(--page-border);
}
.ob-ab-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
}
.ob-ab-meta-label {
    flex-shrink: 0;
    width: 80px;
    font-weight: 600;
    color: var(--muted-text);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    padding-top: 2px;
}
.ob-ab-meta-value {
    color: var(--primary-text);
    line-height: 1.5;
}
.ob-ab-meta-edit {
    flex: 1;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--primary-text);
    line-height: 1.5;
    cursor: text;
    transition: border-color 0.15s, background 0.15s;
}
.ob-ab-meta-edit:empty::before {
    content: 'Add conclusion after testing...';
    color: var(--muted-text);
    font-style: italic;
}
.ob-ab-meta-edit:focus {
    outline: none;
    border-color: var(--highlight-color);
    border-style: solid;
    background: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   COMPOSE & SEND BLOCK
   ============================================================ */
.ob-compose-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ob-compose-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 700px) {
    .ob-compose-row2 { grid-template-columns: 1fr; }
}
.ob-compose-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ob-compose-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-text);
}
.ob-compose-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--muted-text);
    font-size: 0.75rem;
}
.ob-compose-input,
.ob-compose-textarea {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--page-border);
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 0.9rem;
    color: var(--primary-text);
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.ob-compose-input:focus,
.ob-compose-textarea:focus {
    border-color: rgba(209, 77, 106, 0.3);
}
.ob-compose-textarea {
    resize: vertical;
    line-height: 1.6;
}
.ob-sending-domains {
    margin-top: 2px;
}
.ob-domain-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.ob-domain-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--page-border);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ob-domain-option:hover {
    border-color: rgba(209, 77, 106, 0.3);
}
.ob-domain-option:has(input:checked) {
    border-color: var(--accent-rose);
    background: rgba(209, 77, 106, 0.04);
}
.ob-domain-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-rose);
    cursor: pointer;
}
.ob-domain-option span {
    font-size: 0.78rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--primary-text);
}
/* Warm-up copy dropdown */
.ob-warmup-copy-dropdown-wrap {
    position: relative;
}
.ob-warmup-copy-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    width: 420px;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 4px;
}
.ob-warmup-copy-item {
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: background 0.1s;
}
.ob-warmup-copy-item:hover {
    background: rgba(209, 77, 106, 0.06);
}
.ob-warmup-copy-item-used {
    opacity: 0.35;
    text-decoration: line-through;
    pointer-events: none;
    cursor: default;
}
.ob-warmup-copy-item-subject {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 2px;
}
.ob-warmup-copy-item-preview {
    font-size: 0.7rem;
    color: var(--muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ob-compose-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.ob-warmup-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}
.ob-warmup-track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    overflow: hidden;
}
.ob-warmup-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--highlight-color) 0%, #16a34a 100%);
    border-radius: 6px;
    transition: width 0.5s ease, background 0.3s ease;
}
/* Off-day state: amber solid fill, matches the send-window banner */
.ob-warmup-fill.paused {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}
/* At-limit state: neutral grey, signals "done for today" rather than urgent */
.ob-warmup-fill.limit-reached {
    background: linear-gradient(90deg, #9CA3AF 0%, #6B7280 100%);
}
.ob-warmup-label {
    font-size: 0.82rem;
    color: var(--muted-text);
    white-space: nowrap;
}
/* Send-window banner — sits above the warmup progress block.
 * Green when today is a send day (Tue/Wed/Thu), amber when paused. */
.ob-send-window-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.45;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.ob-send-window-banner > span:first-child {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ob-send-window-banner.active {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25);
    color: #065F46;
}
.ob-send-window-banner.active > span:first-child {
    color: #10B981;
}
.ob-send-window-banner.paused {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.30);
    color: #78350F;
}
.ob-send-window-banner.paused > span:first-child {
    color: #F59E0B;
}
.ob-send-window-banner strong { font-weight: 600; }

/* Warm-up schedule progress block */
.ob-warmup-progress-block {
    margin-bottom: 20px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border: 1px solid var(--page-border);
}
.ob-warmup-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ob-warmup-day-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ob-warmup-day-btn {
    background: none;
    border: 1px solid var(--page-border);
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 0.7rem;
    color: var(--muted-text);
    transition: border-color 0.15s, color 0.15s;
}
.ob-warmup-day-btn:hover {
    border-color: var(--accent-rose);
    color: var(--accent-rose);
}
.ob-warmup-day-select {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CA3AF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
}
.ob-warmup-day-select:focus {
    outline: none;
    border-color: var(--accent-rose);
}
.ob-warmup-progress-header span:last-child {
    font-size: 0.78rem;
    color: var(--accent-rose);
    font-weight: 500;
}
.ob-warmup-progress-track {
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    overflow: hidden;
}
.ob-warmup-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-rose) 0%, #16a34a 100%);
    border-radius: 8px;
    transition: width 0.5s ease;
}
.ob-warmup-progress-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--muted-text);
}
/* Warm-up contacts row highlight */
.ob-warmup-phase-row:hover td {
    background: rgba(209, 77, 106, 0.06);
}
/* Warm-up add contact row */
.ob-warmup-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ob-warmup-add-row input {
    padding: 8px 12px;
    font-size: 0.82rem;
}
/* Warm-up contacts status indicators */
.ob-warmup-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}
.ob-warmup-status-yes { background: #10B981; }
.ob-warmup-status-no { background: #d1d5db; }
.ob-warmup-remove-btn {
    background: none;
    border: none;
    color: var(--muted-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
}
.ob-warmup-remove-btn:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}
/* ── Leads Overview ── */
.lo-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}
.lo-filters select {
    max-width: 180px;
    font-size: 0.78rem;
    padding: 6px 10px;
}
.lo-email-status, .lo-li-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.lo-status-not-sent { background: rgba(0,0,0,0.05); color: var(--muted-text); }
.lo-status-sent { background: rgba(59,130,246,0.1); color: #3b82f6; }
.lo-status-opened { background: rgba(245,158,11,0.1); color: #f59e0b; }
.lo-status-replied { background: rgba(16,185,129,0.1); color: #10b981; }
.lo-status-none { background: rgba(0,0,0,0.05); color: var(--muted-text); }
.lo-status-connection_sent { background: rgba(59,130,246,0.1); color: #3b82f6; }
.lo-status-connected { background: rgba(245,158,11,0.1); color: #f59e0b; }
.lo-status-dm_sent { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.lo-li-link {
    font-size: 0.72rem;
    color: #0a66c2;
    text-decoration: none;
}
.lo-li-link:hover { text-decoration: underline; }
.lo-li-status { cursor: pointer; }
.lo-li-status:hover { opacity: 0.7; }

/* ── Daily Playbook ── */
.ob-daily-playbook {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ob-playbook-section {
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ob-playbook-section:last-child {
    border-bottom: none;
}
.ob-playbook-section h4 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0 0 8px;
}
.ob-playbook-section ul {
    margin: 0;
    padding-left: 20px;
}
.ob-playbook-section li {
    font-size: 0.78rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin-bottom: 4px;
}
.ob-playbook-section li strong {
    color: var(--primary-text);
}
.ob-playbook-section code {
    background: rgba(0,0,0,0.04);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.75rem;
}

/* ── X Reply Generator ── */
.x-reply-generator {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.x-reply-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}
.x-reply-result {
    background: rgba(0,0,0,0.02);
    border: 1px solid var(--page-border);
    border-radius: 8px;
    padding: 14px;
}
.x-reply-text {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--primary-text);
    margin-bottom: 8px;
    white-space: pre-wrap;
}
.x-reply-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--muted-text);
}

/* ── LinkedIn tracker ── */
.li-daily-tracker {
    display: flex;
    gap: 12px;
}
.li-tracker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    border: 1px solid var(--page-border);
    font-size: 0.85rem;
    flex: 1;
}
.li-tracker-row strong {
    color: var(--accent-rose);
    font-size: 1.1rem;
}

/* ── LinkedIn daily queue cards ── */
.li-queue-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.li-queue-empty {
    text-align: center;
    color: var(--secondary-text);
    padding: 24px 16px;
    font-size: 0.85rem;
}
.li-queue-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    transition: border-color 0.15s;
}
.li-queue-card:hover {
    border-color: var(--accent-purple);
}
.li-queue-card-info {
    flex: 1;
    min-width: 0;
}
.li-queue-card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-text);
}
.li-queue-card-company {
    font-size: 0.8rem;
    color: var(--secondary-text);
    margin-top: 2px;
}
.li-queue-card-meta {
    font-size: 0.75rem;
    color: var(--secondary-text);
    opacity: 0.7;
    margin-top: 2px;
}
.li-queue-card-message {
    flex: 2;
    min-width: 0;
}
.li-queue-card-msg-text {
    font-size: 0.8rem;
    color: var(--secondary-text);
    line-height: 1.4;
    padding: 8px 12px;
    background: rgba(0,0,0,0.02);
    border-radius: 6px;
    border: 1px solid var(--page-border);
    max-height: 60px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}
.li-queue-card-msg-text:hover {
    background: rgba(0,0,0,0.04);
}
.li-queue-card-msg-text.li-copied {
    background: rgba(16,185,129,0.08);
    border-color: rgba(16,185,129,0.3);
}
.li-queue-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.li-btn-copy-open {
    padding: 8px 14px;
    background: var(--accent-purple);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}
.li-btn-copy-open:hover { opacity: 0.85; }
.li-btn-copy-open:disabled { opacity: 0.4; cursor: default; }
.li-btn-done {
    padding: 8px 12px;
    background: transparent;
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.li-btn-done:hover { background: rgba(16,185,129,0.08); }
.li-btn-done:disabled { opacity: 0.4; cursor: default; }
.li-btn-skip {
    padding: 8px 10px;
    background: transparent;
    color: var(--secondary-text);
    border: 1px solid var(--page-border);
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
}
.li-btn-skip:hover { background: rgba(0,0,0,0.04); }
.li-queue-card.li-card-done {
    opacity: 0.4;
    pointer-events: none;
}
@media (max-width: 768px) {
    .li-daily-tracker { flex-direction: column; }
    .li-queue-card { flex-direction: column; align-items: stretch; }
    .li-queue-card-actions { justify-content: flex-end; }
}
.ob-send-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ob-test-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--secondary-text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.ob-test-label input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--highlight-color);
    cursor: pointer;
    flex-shrink: 0;
}
/* Current Best Email header row */
.ob-best-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ob-best-header-row h4 {
    margin: 0;
}

/* Changelog dropdown */
.ob-changelog-dropdown {
    position: relative;
}
.ob-changelog-toggle {
    background: none;
    border: 1px solid var(--page-border, #E5E7EB);
    color: var(--muted-text, #9CA3AF);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ob-changelog-toggle:hover {
    border-color: var(--secondary-text, #6B7280);
    color: var(--primary-text, #111827);
}
.ob-changelog-arrow {
    transition: transform 0.2s;
    font-size: 0.65rem;
}
.ob-changelog-dropdown.open .ob-changelog-arrow {
    transform: rotate(180deg);
}
.ob-changelog-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--secondary-bg, #FFFFFF);
    border: 1px solid var(--page-border, #E5E7EB);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: 12px;
}
.ob-changelog-dropdown.open .ob-changelog-panel {
    display: block;
}
.ob-changelog-panel:empty::after {
    content: 'No edits yet';
    display: block;
    text-align: center;
    color: var(--muted-text, #9CA3AF);
    font-size: 0.78rem;
    padding: 16px 0;
}
.ob-changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ob-changelog-item {
    padding: 8px 10px;
    border-left: 2px solid var(--page-border, #E5E7EB);
    margin-bottom: 6px;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--secondary-text, #4B5563);
}
.ob-changelog-item:first-child {
    border-left-color: var(--highlight-color, #D14D6A);
}
.ob-changelog-date {
    font-size: 0.65rem;
    color: var(--muted-text, #9CA3AF);
    display: block;
    margin-bottom: 2px;
}
.ob-changelog-detail {
    color: var(--primary-text, #111827);
    font-weight: 500;
}
.ob-cl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.ob-cl-expand {
    background: none;
    border: 1px solid var(--page-border, #E5E7EB);
    color: var(--muted-text, #9CA3AF);
    border-radius: 4px;
    padding: 1px 7px;
    font-size: 0.62rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}
.ob-cl-expand:hover {
    border-color: var(--secondary-text, #6B7280);
    color: var(--primary-text, #111827);
}
.ob-changelog-item.expanded .ob-cl-expand {
    background: var(--tertiary-bg, #F3F4F6);
    color: var(--primary-text, #111827);
}
.ob-cl-versions {
    display: none;
    margin-top: 10px;
    gap: 8px;
}
.ob-changelog-item.expanded .ob-cl-versions {
    display: flex;
    flex-direction: column;
}
.ob-cl-version {
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.72rem;
}
.ob-cl-before {
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.ob-cl-after {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.ob-cl-vlabel {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.ob-cl-before .ob-cl-vlabel { color: #991b1b; }
.ob-cl-after .ob-cl-vlabel { color: #166534; }
.ob-cl-vsubj {
    font-weight: 600;
    color: var(--primary-text, #111827);
    margin-bottom: 6px;
    font-size: 0.72rem;
}
.ob-cl-vbody {
    margin: 0;
    font-family: inherit;
    font-size: 0.68rem;
    color: var(--secondary-text, #4B5563);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow-y: auto;
}

/* Save as default button */
.ob-save-default-btn {
    background: none;
    border: 1px solid var(--page-border, #E5E7EB);
    color: var(--muted-text, #9CA3AF);
    border-radius: 5px;
    padding: 3px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    letter-spacing: 0.02em;
}
.ob-save-default-btn:hover {
    border-color: var(--secondary-text, #6B7280);
    color: var(--primary-text, #111827);
    background: var(--tertiary-bg, #F3F4F6);
}
.ob-save-default-btn.saved {
    border-color: rgba(16, 185, 129, 0.3);
    color: #059669;
    background: rgba(16, 185, 129, 0.06);
}

.ob-send-btn {
    background: linear-gradient(135deg, rgba(209, 77, 106, 0.08) 0%, rgba(209, 77, 106, 0.04) 100%);
    border: 1px solid rgba(209, 77, 106, 0.2);
    color: var(--highlight-color);
    border-radius: 8px;
    padding: 9px 24px;
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.ob-send-btn:hover:not(:disabled) {
    background: rgba(209, 77, 106, 0.12);
    border-color: rgba(209, 77, 106, 0.35);
}
.ob-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ob-send-result {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 7px;
    font-size: 0.9rem;
}
.ob-send-success {
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.12);
    color: #16a34a;
}
.ob-send-error {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.12);
    color: #dc2626;
}
.ob-status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ob-status-sent {
    background: rgba(22, 163, 74, 0.06);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.12);
}
.ob-status-err {
    background: rgba(220, 38, 38, 0.06);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.12);
}

/* ============================================================
   COMPOSE -- VARIANT BUTTONS
   ============================================================ */
.ob-variant-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ob-variant-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--page-border);
    background: rgba(0, 0, 0, 0.02);
    color: var(--secondary-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.ob-variant-btn:hover {
    border-color: rgba(209, 77, 106, 0.2);
    color: var(--primary-text);
}
.ob-variant-btn.active {
    background: rgba(209, 77, 106, 0.06);
    border-color: rgba(209, 77, 106, 0.25);
    color: var(--highlight-color);
}

/* ============================================================
   PROSPECTS SECTION
   ============================================================ */
.pr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
.pr-stats {
    font-size: 0.85rem;
    color: var(--secondary-text);
}
.pr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pr-btn {
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--page-border);
    background: rgba(0, 0, 0, 0.02);
    color: var(--primary-text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.pr-btn:hover {
    border-color: rgba(209, 77, 106, 0.2);
    background: rgba(209, 77, 106, 0.04);
}
.pr-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.pr-btn-primary {
    background: rgba(209, 77, 106, 0.06);
    border-color: rgba(209, 77, 106, 0.2);
    color: var(--highlight-color);
}
.pr-btn-primary:hover {
    background: rgba(209, 77, 106, 0.1);
    border-color: rgba(209, 77, 106, 0.35);
}
.pr-btn-danger {
    background: rgba(220, 38, 38, 0.04);
    border-color: rgba(220, 38, 38, 0.15);
    color: #dc2626;
}
.pr-btn-danger:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
}
.pr-filter {
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--page-border);
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.85rem;
    cursor: pointer;
}
.pr-filter:focus {
    outline: none;
    border-color: rgba(209, 77, 106, 0.3);
}
.pr-actions-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Prospect table — fixed layout with truncation ── */
#prospects-section {
    max-width: 100%;
    overflow-x: auto;
}
#pr-table {
    table-layout: fixed;
    width: 100%;
}
#pr-table th,
#pr-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    padding: 8px 6px;
}
/* Column widths — 16 columns, total = 100% + 64px fixed */
#pr-table th:nth-child(1)  { width: 32px; }   /* checkbox */
#pr-table th:nth-child(2)  { width: 13%; }    /* contact */
#pr-table th:nth-child(3)  { width: 15%; }    /* email */
#pr-table th:nth-child(4)  { width: 10%; }    /* company */
#pr-table th:nth-child(5)  { width: 9%; }     /* website */
#pr-table th:nth-child(6)  { width: 6%; }     /* city */
#pr-table th:nth-child(7)  { width: 9%; }     /* segment */
#pr-table th:nth-child(8)  { width: 3%; }     /* fit */
#pr-table th:nth-child(9)  { width: 3%; }     /* tz */
#pr-table th:nth-child(10) { width: 3%; }     /* type */
#pr-table th:nth-child(11) { width: 7%; }     /* status */
#pr-table th:nth-child(12) { width: 6%; }     /* li */
#pr-table th:nth-child(13) { width: 6.5%; }   /* last email */
#pr-table th:nth-child(14) { width: 3%; }     /* sends */
#pr-table th:nth-child(15) { width: 6.5%; }   /* added */
#pr-table th:nth-child(16) { width: 32px; }   /* delete */
.pr-filters-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pr-filter-sm {
    padding: 4px 8px;
    font-size: 0.78rem;
}
.pr-select-count {
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin-left: auto;
}
.pr-import-result {
    display: none;
    font-size: 0.85rem;
    padding: 8px 14px;
    border-radius: 7px;
    margin-bottom: 14px;
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.12);
    color: #16a34a;
}
.pr-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--page-border);
}
.pr-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.87rem;
}
.pr-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted-text);
    border-bottom: 1px solid var(--page-border);
    background: var(--tertiary-bg);
    white-space: nowrap;
}
.pr-table td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--primary-text);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-table tr:last-child td {
    border-bottom: none;
}
.pr-table tr:hover td {
    background: rgba(0, 0, 0, 0.015);
}
.pr-status-badge {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.pr-badge-new {
    background: rgba(209, 77, 106, 0.06);
    color: var(--highlight-color);
    border: 1px solid rgba(209, 77, 106, 0.12);
}
.pr-badge-contacted {
    background: rgba(22, 163, 74, 0.06);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.12);
}
.pr-badge-unsubscribed {
    background: rgba(220, 38, 38, 0.04);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.12);
}

/* Per-row delete button */
.pr-row-delete-btn {
    background: none;
    border: none;
    color: rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}
.pr-row-delete-btn:hover {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.06);
}

/* Import from DB modal */
.pr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.pr-modal {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: 14px;
    width: 480px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}
.pr-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--page-border);
}
.pr-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text);
}
.pr-modal-close {
    background: none;
    border: none;
    color: var(--secondary-text);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}
.pr-modal-close:hover { color: var(--primary-text); }
.pr-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.pr-modal-hint {
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin: 0 0 18px;
    line-height: 1.5;
}
.pr-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pr-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pr-modal-field label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pr-modal-select {
    width: 100%;
    padding: 8px 12px;
}
/* Prospect detail modal — opened by clicking a prospect row */
.pr-detail-section {
    padding: 14px 0;
    border-bottom: 1px solid var(--page-border);
}
.pr-detail-section:last-child { border-bottom: none; }
.pr-detail-section:first-child { padding-top: 0; }
.pr-detail-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}
.pr-detail-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 8px;
    column-gap: 14px;
    font-size: 0.85rem;
}
.pr-detail-grid dt {
    color: var(--secondary-text);
    font-weight: 500;
}
.pr-detail-grid dd {
    margin: 0;
    color: var(--primary-text);
    word-break: break-word;
}
.pr-detail-grid a {
    color: var(--accent-cyan);
    text-decoration: none;
}
.pr-detail-grid a:hover { text-decoration: underline; }
.pr-detail-li-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
.pr-detail-li-saved {
    flex: 1;
    font-size: 0.85rem;
    color: var(--accent-cyan);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-detail-li-saved.empty {
    color: var(--secondary-text);
    font-style: italic;
}
.pr-detail-li-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--page-border);
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.pr-detail-li-search-btn:hover {
    background: var(--primary-bg);
    border-color: var(--accent-cyan);
}
.pr-detail-li-search-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.pr-detail-li-paste {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--page-border);
    border-radius: 8px;
    font-size: 0.82rem;
    background: var(--primary-bg);
    color: var(--primary-text);
    font-family: inherit;
}
.pr-detail-li-paste:focus {
    outline: none;
    border-color: var(--accent-cyan);
}
.pr-detail-li-paste.invalid { border-color: #E63962; }
.pr-detail-li-paste.saved { border-color: #10B981; }
.pr-detail-li-feedback {
    margin-top: 6px;
    font-size: 0.75rem;
    min-height: 1em;
    color: var(--secondary-text);
}
.pr-detail-li-feedback.success { color: #10B981; }
.pr-detail-li-feedback.error { color: #E63962; }
.pr-detail-li-hint {
    font-size: 0.75rem;
    color: var(--secondary-text);
    margin: 0 0 10px;
    line-height: 1.5;
}
tr.pr-row-clickable,
tr.pr-row-clickable td { cursor: pointer; }
#pr-table tr.pr-row-clickable:hover td { background: rgba(14, 165, 233, 0.08); }
/* Import modal enrichment filters — reuses database filter patterns */
.pr-import-enrichment-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pr-import-enrichment-section .enrichment-sub-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-rose);
    margin: 10px 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(209, 77, 106, 0.12);
}
.pr-import-enrichment-section .enrichment-sub-label:first-child {
    margin-top: 0;
}
.pr-import-enrichment-section .enrichment-bool-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pr-import-enrichment-section .bool-filter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}
.pr-import-enrichment-section .bool-filter-row:hover {
    background-color: rgba(209, 77, 106, 0.04);
}
.pr-import-enrichment-section .bool-filter-row .bool-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--primary-text);
    min-width: 110px;
    flex-shrink: 0;
}
.pr-import-enrichment-section .bool-filter-row input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid #c0c4cc;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    position: relative;
    display: inline-block !important;
    margin: 0;
    vertical-align: middle;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.pr-import-enrichment-section .bool-filter-row input[type="checkbox"]:hover {
    border-color: #D14D6A;
}
.pr-import-enrichment-section .bool-filter-row input[type="checkbox"]:checked {
    background: #D14D6A;
    border-color: #D14D6A;
}
.pr-import-enrichment-section .bool-filter-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.pr-import-enrichment-section .bool-filter-row label {
    font-size: 0.68rem;
    color: var(--muted-text);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
/* Prevent .pr-modal-field label from overriding enrichment sub-labels */
.pr-modal-field .pr-import-enrichment-section .enrichment-sub-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--accent-rose);
}
/* Multi-select dropdowns for Type / Type ID */
.pr-multi-select-container {
    position: relative;
}
.pr-multi-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px;
}
.pr-multi-tags:empty { margin-bottom: 0; }
.pr-multi-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 0.72rem;
    background: rgba(124, 58, 237, 0.08);
    color: var(--accent-purple, #7C3AED);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 12px;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-multi-tag-remove {
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.6;
    flex-shrink: 0;
}
.pr-multi-tag-remove:hover { opacity: 1; }
.pr-multi-search {
    width: 100%;
    padding: 8px 12px;
}
.pr-multi-dropdown {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    max-height: 200px;
    overflow-y: auto;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 100;
}
.pr-multi-dropdown.open { display: block; }
.pr-multi-dropdown-item {
    padding: 6px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s;
}
.pr-multi-dropdown-item:hover { background: rgba(124, 58, 237, 0.06); }
.pr-multi-dropdown-item.selected { background: rgba(124, 58, 237, 0.1); font-weight: 500; }
.pr-multi-dropdown-item.selected::before { content: '✓'; font-size: 0.7rem; color: var(--accent-purple, #7C3AED); }
.pr-multi-dropdown-empty {
    padding: 10px 12px;
    font-size: 0.75rem;
    color: var(--secondary-text);
    text-align: center;
}
/* Import preview count bar */
.pr-import-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0 0;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}
.pr-import-preview-bar span {
    font-size: 0.78rem;
    color: var(--secondary-text);
}
.pr-import-preview-bar .pr-import-count {
    font-weight: 600;
    color: var(--accent-purple, #7C3AED);
}
/* Import progress bar */
.pr-import-progress {
    padding: 8px 0 0;
}
.pr-import-progress-track {
    height: 6px;
    background: var(--border-color, #e5e7eb);
    border-radius: 3px;
    overflow: hidden;
}
.pr-import-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent-purple, #7C3AED);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.pr-import-progress-text {
    display: block;
    font-size: 0.72rem;
    color: var(--secondary-text);
    margin-top: 4px;
    text-align: center;
}
.pr-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--page-border);
}

/* ============================================================
   COMPOSE -- RECIPIENTS LOAD FROM PROSPECTS
   ============================================================ */
.ob-recipients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.ob-recipients-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ob-recip-status-filter {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--page-border);
    background: var(--secondary-bg);
    color: var(--secondary-text);
    font-size: 0.78rem;
    cursor: pointer;
}
.ob-recip-status-filter:focus { outline: none; border-color: rgba(209, 77, 106, 0.3); }
.ob-send-priority-select {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--page-border);
    background: var(--secondary-bg);
    color: var(--secondary-text);
    font-size: 0.75rem;
    cursor: pointer;
}
.ob-send-priority-select:focus { outline: none; border-color: rgba(209, 77, 106, 0.3); }
.ob-segment-limit-input {
    width: 64px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--page-border);
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.75rem;
    text-align: center;
}
.ob-segment-limit-input:focus { outline: none; border-color: rgba(209, 77, 106, 0.3); }
.ob-segment-limit-input::placeholder { color: var(--muted-text); }
.ob-include-poor-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--secondary-text);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.ob-include-poor-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--highlight-color);
    cursor: pointer;
    margin: 0;
}
.ob-load-prospects-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(209, 77, 106, 0.2);
    background: rgba(209, 77, 106, 0.04);
    color: var(--highlight-color);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.ob-load-prospects-btn:hover {
    background: rgba(209, 77, 106, 0.08);
    border-color: rgba(209, 77, 106, 0.35);
}
.ob-load-prospects-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ob-recip-count {
    font-size: 0.78rem;
    color: var(--secondary-text);
    white-space: nowrap;
}

/* ============================================================
   PROSPECTS -- SEND HISTORY CELLS
   ============================================================ */
.pr-last-email-cell {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.pr-variant-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pr-variant-a {
    background: rgba(209, 77, 106, 0.08);
    color: var(--highlight-color);
    border: 1px solid rgba(209, 77, 106, 0.15);
}
.pr-variant-b {
    background: rgba(108, 92, 231, 0.08);
    color: #6c5ce7;
    border: 1px solid rgba(108, 92, 231, 0.15);
}
.pr-last-email-date {
    font-size: 0.82rem;
    color: var(--secondary-text);
    cursor: default;
}
.pr-send-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--page-border);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--secondary-text);
}

/* ============================================================
   A/B TESTING PLAYBOOK
   ============================================================ */

.ob-pb-section {
    margin-bottom: 32px;
}

.ob-pb-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0;
    font-family: 'Inter', sans-serif;
}
.ob-pb-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ob-pb-btn-sm {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    background: var(--tertiary-bg);
    color: var(--secondary-text);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.ob-pb-btn-sm:hover {
    border-color: var(--highlight-color);
    color: var(--highlight-color);
}
.ob-pb-btn-sort {
    margin-left: auto;
}
.ob-pb-rank-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--highlight-color);
    background: rgba(209, 77, 106, 0.07);
    border: 1px solid rgba(209, 77, 106, 0.15);
    border-radius: var(--radius-full);
    padding: 1px 6px;
    margin-right: 4px;
    flex-shrink: 0;
}
.ob-pb-rank-chip {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--secondary-text);
    background: var(--tertiary-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    padding: 1px 7px;
    margin: 2px 2px 0 0;
}
.ob-pb-queue-hint {
    font-size: 0.8rem;
    color: var(--muted-text);
    margin-bottom: 16px;
    line-height: 1.8;
}
.ob-pb-badge-soon {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-text);
    background: var(--tertiary-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    padding: 2px 8px;
}
.ob-pb-section-muted {
    opacity: 0.65;
}
.ob-var-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 12px;
    border: 1px solid rgba(209, 77, 106, 0.25);
    border-radius: var(--radius-full);
    background: rgba(209, 77, 106, 0.05);
    color: var(--highlight-color);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 8px;
}
.ob-var-suggest-btn:hover {
    background: rgba(209, 77, 106, 0.1);
    border-color: rgba(209, 77, 106, 0.4);
}

.ob-pb-muted {
    color: var(--muted-text);
    font-size: 0.84rem;
}

.ob-pb-empty {
    color: var(--muted-text);
    font-size: 0.88rem;
    font-style: italic;
    padding: 16px 0;
}

/* ── Knowledge Matrix ── */
.ob-pb-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--page-border);
    border-radius: 10px;
    background: var(--secondary-bg);
}

.ob-pb-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.ob-pb-matrix-table th,
.ob-pb-matrix-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--page-border);
}

.ob-pb-matrix-th {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
    background: rgba(0, 0, 0, 0.015);
}

.ob-pb-matrix-th-var {
    text-align: left !important;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
    background: rgba(0, 0, 0, 0.015);
    min-width: 140px;
}

.ob-pb-matrix-var {
    text-align: left !important;
    font-weight: 500;
    color: var(--primary-text);
    padding-left: 16px !important;
}

.ob-pb-stage-row td {
    text-align: left !important;
    padding: 6px 10px !important;
    background: rgba(0, 0, 0, 0.025);
    border-bottom: 1px solid var(--page-border);
}

.ob-pb-stage-label {
    font-size: 0.68rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--highlight-color, #D14D6A);
}

.ob-pb-matrix-cell {
    font-size: 0.78rem;
    transition: background 0.15s;
}

.ob-pb-cell-tested {
    color: #16a34a;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.04);
    cursor: pointer;
}

.ob-pb-cell-tested:hover {
    background: rgba(16, 185, 129, 0.1);
}

.ob-pb-cell-active {
    color: #D14D6A;
    font-weight: 700;
    font-size: 0.9rem;
    animation: pbPulse 2s ease-in-out infinite;
    cursor: pointer;
}

@keyframes pbPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.ob-pb-cell-untested {
    color: var(--muted-text);
    opacity: 0.5;
}

.ob-pb-consensus-th {
    border-left: 2px solid var(--page-border);
}

.ob-pb-consensus {
    border-left: 2px solid var(--page-border);
    font-size: 0.76rem;
    color: var(--muted-text);
}

.ob-pb-consensus-strong {
    color: #16a34a;
    font-weight: 700;
}

/* ── Active Test Cards ── */
.ob-pb-active-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.ob-pb-test-card {
    padding: 20px;
    border: 1px solid var(--page-border);
    border-radius: 10px;
    background: var(--secondary-bg);
}

.ob-pb-test-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ob-pb-test-seg {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(209, 77, 106, 0.08);
    color: #D14D6A;
}

.ob-pb-test-var {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--primary-text);
}

.ob-pb-test-stage {
    font-size: 0.78rem;
    color: var(--muted-text);
    margin-bottom: 10px;
}

.ob-pb-test-options {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ob-pb-test-option {
    font-size: 0.82rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 500;
}

.ob-pb-opt-a {
    background: rgba(209, 77, 106, 0.06);
    color: #B8455E;
    border: 1px solid rgba(209, 77, 106, 0.15);
}

.ob-pb-opt-b {
    background: rgba(124, 58, 237, 0.06);
    color: #6D28D9;
    border: 1px solid rgba(124, 58, 237, 0.15);
}

.ob-pb-test-baseline {
    font-size: 0.8rem;
    color: var(--secondary-text);
    margin-bottom: 10px;
}

.ob-pb-baseline-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--page-border);
    margin: 0 3px;
    font-weight: 500;
}

.ob-pb-test-primary {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--primary-text);
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(209, 77, 106, 0.04);
    border: 1px solid rgba(209, 77, 106, 0.1);
    margin-bottom: 10px;
}

.ob-pb-test-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.ob-pb-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.ob-pb-metric-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
    font-weight: 600;
}

.ob-pb-metric span:last-child {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--primary-text);
}

.ob-pb-test-progress {
    height: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 4px;
}

.ob-pb-progress-bar {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(135deg, #D14D6A, #7C3AED);
    transition: width 0.3s;
}

.ob-pb-progress-label {
    font-size: 0.75rem;
    color: var(--muted-text);
    text-align: right;
    margin-bottom: 12px;
}

.ob-pb-test-actions {
    display: flex;
    gap: 8px;
}

/* ── Buttons ── */
.ob-pb-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, #D14D6A, #1F2937);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

.ob-pb-btn:hover {
    background: linear-gradient(135deg, #B8455E, #111827);
    transform: translateY(-1px);
}

.ob-pb-btn-secondary {
    padding: 8px 16px;
    border: 1px solid var(--page-border);
    border-radius: 6px;
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all 0.15s;
}

.ob-pb-btn-secondary:hover {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.02);
}

.ob-pb-btn-icon {
    width: 24px;
    height: 24px;
    border: 1px solid var(--page-border);
    border-radius: 4px;
    background: transparent;
    color: var(--muted-text);
    cursor: pointer;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}

.ob-pb-btn-icon:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--primary-text);
}

.ob-pb-btn-remove:hover {
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.3);
}

/* ── Start New Test Form ── */
.ob-pb-form {
    padding: 20px;
    border: 1px solid var(--page-border);
    border-radius: 10px;
    background: var(--secondary-bg);
}

.ob-pb-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.ob-pb-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-pb-field-sm { max-width: 140px; }
.ob-pb-field-lg { flex: 1; }

.ob-pb-form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
}

.ob-pb-form-select,
.ob-pb-form-input {
    padding: 8px 10px;
    border: 1px solid var(--page-border);
    border-radius: 6px;
    font-size: 0.86rem;
    font-family: 'Inter', sans-serif;
    background: var(--primary-bg);
    color: var(--primary-text);
    transition: border-color 0.15s;
}

.ob-pb-form-select:focus,
.ob-pb-form-input:focus {
    outline: none;
    border-color: #D14D6A;
}

.ob-pb-form-textarea {
    padding: 8px 10px;
    border: 1px solid var(--page-border);
    border-radius: 6px;
    font-size: 0.86rem;
    font-family: 'Inter', sans-serif;
    background: var(--primary-bg);
    color: var(--primary-text);
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
}

.ob-pb-form-textarea:focus {
    outline: none;
    border-color: #D14D6A;
}

.ob-pb-form-error {
    color: #dc2626;
    font-size: 0.82rem;
    min-height: 1.2em;
    margin: 4px 0;
}

.ob-pb-baseline-preview {
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.02);
    margin-bottom: 12px;
    min-height: 20px;
    font-size: 0.84rem;
}

/* ── Test Queue ── */
.ob-pb-queue-seg {
    border: 1px solid var(--page-border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--secondary-bg);
}

.ob-pb-queue-header {
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--primary-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ob-pb-queue-header::-webkit-details-marker { display: none; }
.ob-pb-queue-seg[open] .ob-pb-queue-header { border-bottom: 1px solid var(--page-border); }

.ob-pb-queue-list {
    padding: 8px 14px;
}

.ob-pb-queue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.ob-pb-queue-num {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted-text);
    width: 20px;
}

.ob-pb-queue-item-name {
    flex: 1;
    font-size: 0.86rem;
    color: var(--primary-text);
}

.ob-pb-queue-item-actions {
    display: flex;
    gap: 3px;
}

.ob-pb-queue-empty {
    padding: 8px 14px;
    margin: 0;
}

.ob-pb-queue-add {
    padding: 8px 14px;
    border-top: 1px solid var(--page-border);
}

.ob-pb-queue-add-select {
    width: 100%;
}

/* ── Completed Tests Log ── */
.ob-pb-log-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ob-pb-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
}

.ob-pb-log-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text);
    border-bottom: 1px solid var(--page-border);
    background: rgba(0, 0, 0, 0.015);
}

.ob-pb-log-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--primary-text);
}

.ob-pb-log-row:hover td {
    background: rgba(0, 0, 0, 0.015);
}

.ob-pb-win-a { color: #B8455E; font-weight: 600; }
.ob-pb-win-b { color: #6D28D9; font-weight: 600; }
.ob-pb-win-tie { color: var(--muted-text); font-weight: 500; }

/* ── Custom Variables ── */
.ob-pb-vars-list {
    margin-bottom: 12px;
}

.ob-pb-vars-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.86rem;
}

.ob-pb-vars-item span:first-child {
    font-weight: 500;
    color: var(--primary-text);
}

.ob-pb-vars-add {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ob-pb-vars-add input {
    flex: 1;
}

/* ── Modal ── */
.ob-pb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-pb-modal {
    background: var(--secondary-bg, #fff);
    border-radius: 12px;
    padding: 24px;
    max-width: 560px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.ob-pb-modal-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.ob-pb-modal-body {
    margin-bottom: 20px;
}

.ob-pb-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Modal content helpers ── */
.ob-pb-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--primary-text);
}

.ob-pb-detail-metrics {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 12px 0;
}

.ob-pb-detail-metrics th,
.ob-pb-detail-metrics td {
    padding: 6px 10px;
    text-align: center;
    border-bottom: 1px solid var(--page-border);
}

.ob-pb-detail-metrics th {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--muted-text);
    background: rgba(0, 0, 0, 0.015);
}

.ob-pb-detail-metrics td:first-child {
    text-align: left;
    font-weight: 500;
}

.ob-pb-declare-primary {
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(209, 77, 106, 0.06);
    border: 1px solid rgba(209, 77, 106, 0.12);
    margin-bottom: 16px;
    color: var(--primary-text);
}

.ob-pb-declare-radios {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
}

.ob-pb-declare-radios label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.ob-pb-declare-radios label:hover {
    background: rgba(0, 0, 0, 0.03);
}

.ob-pb-metrics-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ob-pb-metrics-col h4 {
    font-size: 0.86rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--primary-text);
}

/* ── Segment detail integration ── */
.ob-pb-segment-overlay {
    margin-bottom: 12px;
}

.ob-pb-seg-status {
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(209, 77, 106, 0.03);
    border: 1px solid rgba(209, 77, 106, 0.1);
    font-size: 0.86rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ob-pb-seg-status-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #D14D6A;
    margin-bottom: 4px;
}

.ob-pb-link {
    font-size: 0.82rem;
    color: #D14D6A;
    text-decoration: none;
    font-weight: 500;
    margin-top: 4px;
}

.ob-pb-link:hover {
    text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ob-pb-active-grid {
        grid-template-columns: 1fr;
    }
    .ob-pb-form-row {
        grid-template-columns: 1fr;
    }
    .ob-pb-metrics-form {
        grid-template-columns: 1fr;
    }
    .ob-pb-test-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .ob-pb-log-filters {
        flex-direction: column;
    }
    .ob-pb-vars-add {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
   VARIABLE PANEL (Compose & Send A/B integration)
   ============================================================ */
.ob-variable-panel {
    background: rgba(124, 58, 237, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.15);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 8px;
}
.ob-var-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-purple, #7C3AED);
    margin-bottom: 6px;
}
.ob-var-locked {
    font-size: 0.82rem;
    color: var(--secondary-text, #6B7280);
    margin-bottom: 4px;
}
.ob-var-locked-tag {
    display: inline-block;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.78rem;
    margin: 1px 3px 1px 0;
    color: var(--primary-text, #111827);
}
.ob-var-testing {
    font-size: 0.88rem;
    margin-bottom: 6px;
}
.ob-var-options {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}
.ob-var-opt {
    font-size: 0.84rem;
    padding: 3px 10px;
    border-radius: 6px;
    font-weight: 500;
}
.ob-var-opt-a {
    background: rgba(14, 165, 233, 0.1);
    color: #0284C7;
}
.ob-var-opt-b {
    background: rgba(230, 57, 98, 0.1);
    color: #BE123C;
}
.ob-var-live {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    padding: 6px 0;
    flex-wrap: wrap;
}
.ob-var-live-stat {
    font-weight: 500;
}
.ob-var-live-divider {
    color: var(--border-color, #E5E7EB);
}
.ob-var-live-prob {
    color: var(--accent-purple, #7C3AED);
    font-weight: 600;
}
.ob-var-muted {
    color: var(--secondary-text, #6B7280);
    font-size: 0.82rem;
}
.ob-var-cancel-btn {
    background: none;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--secondary-text, #6B7280);
    margin-top: 6px;
}
.ob-var-cancel-btn:hover {
    border-color: #E63962;
    color: #E63962;
}

/* Inline start-test form */
.ob-var-start-form {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ob-var-select {
    padding: 5px 8px;
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 6px;
    font-size: 0.82rem;
    background: var(--secondary-bg, #fff);
    color: var(--primary-text, #111827);
    min-width: 120px;
}
.ob-var-start-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    background: var(--accent-purple, #7C3AED);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
}
.ob-var-start-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ob-var-start-btn:hover:not(:disabled) {
    background: #6D28D9;
}

/* Bayesian probability bar in Playbook */
.ob-pb-prob-bar-wrap {
    margin: 8px 0 4px;
}
.ob-pb-prob-bar {
    height: 6px;
    background: rgba(230, 57, 98, 0.2);
    border-radius: 3px;
    overflow: hidden;
}
.ob-pb-prob-fill-a {
    height: 100%;
    background: linear-gradient(90deg, #0EA5E9, #7C3AED);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.ob-pb-prob-label {
    font-size: 0.78rem;
    color: var(--accent-purple, #7C3AED);
    font-weight: 500;
    margin-top: 2px;
}

/* Auto-declared tag */
.ob-pb-auto-tag {
    display: inline-block;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Opened indicator in Recent Sends */
.ob-opened-yes {
    color: #059669;
    font-weight: 700;
    font-size: 1rem;
}
.ob-opened-no {
    color: var(--secondary-text, #6B7280);
}
.ob-untracked {
    color: var(--muted-text, #9CA3AF);
    font-style: italic;
    font-size: 0.72rem;
    cursor: help;
}
.ob-replied-yes {
    color: #059669;
    font-weight: 700;
    font-size: 1rem;
}
.ob-replied-toggle {
    color: var(--secondary-text, #6B7280);
    cursor: pointer;
    transition: color 0.15s;
}
.ob-replied-toggle:hover {
    color: var(--accent-rose);
}
.ob-spam-yes {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.78rem;
}
.ob-spam-unknown {
    color: var(--secondary-text, #6B7280);
    cursor: pointer;
}
.ob-spam-no-label {
    color: #059669;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
}
.ob-spam-click {
    cursor: pointer;
    transition: color 0.15s;
}

/* Variant hint (below A/B buttons) */
.ob-variant-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--secondary-text, #6B7280);
    margin-top: 4px;
    font-style: italic;
}

/* Current Best Email (segment detail panel) */
.ob-best-hint {
    font-size: 0.78rem;
    color: var(--secondary-text, #6B7280);
    margin: 0 0 12px 0;
    font-style: italic;
    line-height: 1.5;
}
.ob-best-email {
    border: 1px solid var(--border-color, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
}
.ob-best-field {
    padding: 12px 16px;
}
.ob-best-field + .ob-best-field {
    border-top: 1px solid var(--border-color, #E5E7EB);
}
.ob-best-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--secondary-text, #6B7280);
    margin-bottom: 4px;
}
.ob-best-value {
    font-size: 0.88rem;
    color: var(--primary-text, #111827);
}
.ob-best-body {
    font-size: 0.82rem;
    color: var(--primary-text, #111827);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-family: inherit;
    background: none;
    border: none;
    padding: 0;
}

/* Loading state */
.ob-pb-loading {
    text-align: center;
    color: var(--secondary-text, #6B7280);
    padding: 32px 0;
    font-size: 0.88rem;
}

@media (max-width: 600px) {
    .ob-var-start-form {
        flex-direction: column;
        align-items: stretch;
    }
    .ob-var-options {
        flex-direction: column;
        gap: 4px;
    }
}

/* ── Body Editor: toolbar + preview ─────────────────────────── */
.ob-editor-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.ob-fmt-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
}
.ob-fmt-btn {
    padding: 3px 9px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 5px;
    color: #6B7280;
    font-size: 0.8rem;
    cursor: pointer;
    line-height: 1.5;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    font-family: inherit;
}
.ob-fmt-btn:hover {
    background: #F3F4F6;
    color: #111827;
    border-color: #D1D5DB;
}
.ob-fmt-btn.active {
    background: #EEF2FF;
    border-color: #A5B4FC;
    color: #4F46E5;
}
.ob-fmt-italic-btn i {
    font-style: italic;
}
.ob-fmt-divider {
    width: 1px;
    height: 14px;
    background: #E5E7EB;
    margin: 0 3px;
}
.ob-body-preview {
    border: 1px solid #E5E7EB;
    border-radius: 7px;
    overflow: hidden;
    margin-top: 6px;
}
.ob-preview-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ob-preview-note {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #9CA3AF;
    font-size: 0.72rem;
}
.ob-preview-subject {
    background: #F9FAFB;
    padding: 8px 14px;
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
    color: #374151;
    border-bottom: 1px solid #E5E7EB;
    line-height: 1.4;
}
.ob-preview-subject strong {
    color: #9CA3AF;
    font-weight: 500;
    font-size: 0.75rem;
    margin-right: 6px;
}
.ob-preview-content {
    background: #ffffff;
    padding: 20px 24px 8px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #1a1a1a;
    min-height: 60px;
}
.ob-preview-content p {
    margin: 0 0 16px;
}
.ob-preview-content hr {
    border: none;
    border-top: 1px solid #e8e8e8;
    margin: 20px 0;
}
.ob-preview-content a {
    color: #1a73e8;
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .crm-main {
        padding: 14px;
    }

    .section-header h1 {
        font-size: 20px;
    }

    .section-stats {
        gap: 10px;
    }

    .stat-card {
        padding: 16px 14px;
    }

    .crm-nav .nav-item {
        font-size: 0.78rem;
        padding: 10px 12px;
    }

    .scraped-filters {
        padding: 16px;
    }

    .compose-form textarea {
        min-height: 100px;
    }

    .ob-fmt-toolbar {
        flex-wrap: wrap;
    }
}

/* ============================================================
   REVIEW INTELLIGENCE
   ============================================================ */

/* Scrape Form */
/* Competitor picker */
.ri-picker-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--page-border);
}

.ri-picker-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ri-picker-actions {
    display: flex;
    gap: 4px;
}

.ri-pick-link {
    background: none;
    border: 1px solid var(--page-border);
    color: var(--muted-text);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s;
}

.ri-pick-link:hover {
    border-color: var(--highlight-color);
    color: var(--highlight-color);
    background: rgba(209, 77, 106, 0.04);
}

.ri-pick-count {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted-text);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.03);
    padding: 3px 10px;
    border-radius: 20px;
}

/* Competitor table */
.ri-comp-table {
    margin-bottom: 14px;
}

.ri-comp-table td,
.ri-comp-table th {
    padding: 8px 12px;
}

.ri-comp-table tbody tr {
    transition: background 0.1s;
}

.ri-comp-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.015);
}

.ri-rating-cell {
    white-space: nowrap;
}

.ri-rating-bad {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.85rem;
}

.ri-rating-mid {
    color: var(--muted-text);
    font-weight: 500;
    font-size: 0.85rem;
}

.ri-rating-ok {
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.85rem;
}

.ri-rating-good {
    color: #10b981;
    font-weight: 600;
    font-size: 0.85rem;
}

.ri-url-cell {
    font-size: 0.82rem;
    color: var(--muted-text);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

.ri-custom-add {
    margin-bottom: 16px;
}

.ri-custom-add > .ri-pick-link {
    font-size: 0.82rem;
    padding: 6px 14px;
    border-style: dashed;
}

.ri-custom-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.ri-custom-url {
    min-width: 300px;
    flex: 1;
}

.ri-scrape-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--page-border);
}

.ri-scrape-form {
    background: var(--secondary-bg);
    border: 1px solid var(--page-border);
    border-radius: 12px;
    padding: 22px 24px;
    margin-bottom: 22px;
}

.ri-form-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ri-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ri-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--secondary-text, #6b7280);
    letter-spacing: 0.02em;
}

.ri-field input {
    min-width: 160px;
}

.ri-field-url {
    flex: 1;
}

.ri-field-url input {
    min-width: 280px;
}

.ri-field-pages input {
    width: 70px;
    min-width: 70px;
}

.ri-scrape-btn {
    white-space: nowrap;
    height: 40px;
    padding: 0 24px;
    font-size: 0.88rem;
    font-weight: 600;
    margin-left: auto;
}

.ri-scrape-status {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.015);
    border: 1px solid var(--page-border);
    border-radius: 10px;
}

.ri-progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--primary-text);
    font-weight: 500;
}

.ri-scrape-pct {
    margin-left: auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--highlight-color);
    font-variant-numeric: tabular-nums;
}

.ri-progress-track {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.ri-progress-fill {
    height: 100%;
    background: var(--highlight-color);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.ri-progress-detail {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--muted-text);
}

.ri-scrape-spinner {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border: 2px solid var(--page-border);
    border-top-color: var(--highlight-color);
    border-radius: 50%;
    animation: ri-spin 0.8s linear infinite;
}

@keyframes ri-spin {
    to { transform: rotate(360deg); }
}

/* Stats Row */
.ri-stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ri-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 12px 20px;
    min-width: 80px;
}

.ri-stat-hot {
    border-color: var(--highlight-color, #E63962);
    background: rgba(230, 57, 98, 0.04);
}

.ri-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-text, #111827);
}

.ri-stat-hot .ri-stat-value {
    color: var(--highlight-color, #E63962);
}

.ri-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--secondary-text, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* Filters */
.ri-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ri-filter-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.ri-action-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--page-border);
    color: var(--primary-text);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ri-action-btn:hover {
    border-color: var(--highlight-color);
    color: var(--highlight-color);
    background: rgba(209, 77, 106, 0.04);
}

.ri-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ri-ai-summary {
    font-style: italic;
    color: var(--primary-text);
}

/* Lead Score */
.ri-score-cell {
    text-align: center;
}

.ri-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: default;
    font-variant-numeric: tabular-nums;
}

.ri-score-high {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.ri-score-mid {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.ri-score-low {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.ri-score-none {
    color: var(--muted-text);
    font-size: 0.85rem;
}

/* Sortable headers */
.ri-sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
    white-space: nowrap;
}

.ri-sortable:hover {
    color: var(--highlight-color);
}

.ri-sort-active {
    color: var(--highlight-color);
}

/* Score modal options */
.ri-score-modal-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.ri-score-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--page-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.ri-score-option:hover {
    border-color: rgba(209, 77, 106, 0.3);
    background: rgba(209, 77, 106, 0.02);
}

.ri-score-option:has(input:checked) {
    border-color: rgba(209, 77, 106, 0.35);
    background: rgba(209, 77, 106, 0.04);
}

.ri-score-option input[type="radio"],
.ri-score-option input[type="checkbox"] {
    accent-color: var(--highlight-color);
    margin-top: 2px;
}

.ri-score-option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ri-score-option-content strong {
    font-size: 0.88rem;
    color: var(--primary-text);
}

.ri-score-option-desc {
    font-size: 0.8rem;
    color: var(--muted-text);
}

.ri-score-selected-info {
    border-top: 1px solid var(--page-border);
    padding-top: 12px;
}

.ri-hot-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--primary-text, #111827);
    cursor: pointer;
    white-space: nowrap;
}

.ri-hot-toggle input {
    accent-color: var(--highlight-color, #E63962);
}

/* Table Styles */
.ri-complaint {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--secondary-text, #6b7280);
}

.ri-stars {
    color: #f59e0b;
    font-size: 13px;
    letter-spacing: -1px;
}

.ri-age {
    white-space: nowrap;
    font-size: 12.5px;
    color: var(--secondary-text, #6b7280);
}

.ri-reviewer {
    font-weight: 500;
}

/* Hot Badge */
.ri-hot-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--highlight-color, #E63962);
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    animation: ri-pulse 2s ease-in-out infinite;
}

@keyframes ri-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Status badges */
.ri-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-align: center;
}

.ri-status-new {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.ri-status-drafted {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.ri-status-sent {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.ri-status-replied {
    background: rgba(230, 57, 98, 0.1);
    color: var(--highlight-color, #E63962);
}

.ri-status:hover {
    filter: brightness(0.9);
}

/* Action buttons */
.ri-actions {
    display: flex;
    gap: 4px;
}

.ri-compose-btn,
.ri-edit-btn {
    background: none;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--secondary-text, #6b7280);
    transition: all 0.15s;
}

.ri-compose-btn:hover {
    background: rgba(124, 58, 237, 0.08);
    border-color: #7c3aed;
    color: #7c3aed;
}

.ri-edit-btn:hover {
    background: rgba(14, 165, 233, 0.08);
    border-color: #0ea5e9;
    color: #0ea5e9;
}

.ri-add-email-btn {
    background: none;
    border: 1px dashed var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--secondary-text, #6b7280);
    cursor: pointer;
    transition: all 0.15s;
}

.ri-add-email-btn:hover {
    border-color: var(--highlight-color, #E63962);
    color: var(--highlight-color, #E63962);
}

/* Find (LinkedIn / Google search) links */
.ri-find-cell {
    white-space: nowrap;
}

.ri-find-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    margin-right: 3px;
}

.ri-find-li {
    background: rgba(10, 102, 194, 0.08);
    color: #0a66c2;
    border: 1px solid rgba(10, 102, 194, 0.2);
    font-style: italic;
}

.ri-find-li:hover {
    background: #0a66c2;
    color: #fff;
}

.ri-find-g {
    background: rgba(66, 133, 244, 0.08);
    color: #4285f4;
    border: 1px solid rgba(66, 133, 244, 0.2);
}

.ri-find-g:hover {
    background: #4285f4;
    color: #fff;
}

.ri-find-na {
    color: var(--secondary-text, #6b7280);
    font-size: 12px;
}

/* Bulk Actions Bar */
.ri-bulk-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    margin-top: 12px;
    font-size: 13px;
}

#ri-selected-count {
    font-weight: 600;
    color: var(--primary-text, #111827);
}

/* Pagination */
.ri-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 0;
}

.ri-page-btn {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--page-border);
    color: var(--primary-text);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.ri-page-btn:hover:not(:disabled) {
    border-color: var(--highlight-color);
    color: var(--highlight-color);
}

.ri-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ri-page-info {
    font-size: 0.82rem;
    color: var(--muted-text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.ri-dedup-btn {
    margin-left: auto;
}

/* Recent Scrape Jobs */
.ri-jobs-section {
    margin-top: 24px;
}

.ri-jobs-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-text, #111827);
    margin-bottom: 10px;
}

.ri-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ri-no-jobs {
    font-size: 13px;
    color: var(--secondary-text, #6b7280);
}

.ri-job-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
}

.ri-job-name {
    font-weight: 600;
    color: var(--primary-text, #111827);
}

.ri-job-detail {
    color: var(--secondary-text, #6b7280);
}

.ri-job-status {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ri-job-ok .ri-job-status {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.ri-job-fail .ri-job-status {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.ri-job-running .ri-job-status {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.ri-job-time {
    margin-left: auto;
    color: var(--secondary-text, #6b7280);
    font-size: 12px;
}

/* Mobile */
@media (max-width: 768px) {
    .ri-scrape-form {
        padding: 16px;
    }

    .ri-picker-header {
        flex-wrap: wrap;
    }

    .ri-competitor-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 6px;
    }

    .ri-comp-chip {
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    .ri-scrape-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ri-scrape-btn {
        margin-left: 0;
    }

    .ri-custom-row {
        flex-direction: column;
    }

    .ri-custom-url {
        min-width: unset;
    }

    .ri-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ri-stats-row {
        gap: 8px;
    }

    .ri-stat {
        padding: 8px 12px;
        min-width: 60px;
        flex: 1;
    }

    .ri-stat-value {
        font-size: 18px;
    }

    .ri-complaint {
        max-width: 140px;
    }

    .ri-job-item {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── Deliverability Dashboard ──────────────────────────────── */
.ob-deliv-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.ob-deliv-card {
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.ob-deliv-card-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-text, #111827);
    line-height: 1.2;
    margin-bottom: 2px;
}

.ob-deliv-card-label {
    font-size: 0.7rem;
    color: var(--secondary-text, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ob-deliv-card-value.ob-deliv-good { color: #059669; }
.ob-deliv-card-value.ob-deliv-warn { color: #d97706; }
.ob-deliv-card-value.ob-deliv-bad  { color: #dc2626; }

.ob-deliv-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-text, #6b7280);
    margin: 20px 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Daily chart */
.ob-deliv-chart-wrap {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    padding: 8px 0;
    overflow-x: auto;
}

.ob-deliv-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 18px;
    max-width: 32px;
    position: relative;
}

.ob-deliv-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    position: relative;
    min-height: 2px;
}

.ob-deliv-bar-sent {
    background: var(--border-color, #e5e7eb);
}

.ob-deliv-bar-opened {
    background: #059669;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 3px 3px 0 0;
}

.ob-deliv-bar-label {
    font-size: 0.6rem;
    color: var(--secondary-text, #6b7280);
    margin-top: 4px;
    white-space: nowrap;
}

.ob-deliv-bar-group:hover .ob-deliv-tooltip {
    display: block;
}

.ob-deliv-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-text, #111827);
    color: #fff;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
}

@media (max-width: 900px) {
    .ob-deliv-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .ob-deliv-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .ob-deliv-chart-wrap {
        height: 80px;
    }
}

/* ── Daily initial outreach collapsible rows ───────────────── */
.ob-daily-row:hover {
    background: var(--hover-bg, #f3f4f6);
}
.ob-daily-row td {
    transition: background 0.15s;
}
.ob-daily-toggle {
    user-select: none;
    color: var(--secondary-text, #9ca3af);
    font-size: 0.7rem;
}
.ob-daily-detail td {
    background: var(--tertiary-bg, #f9fafb);
    border-top: none;
    padding-top: 6px;
    padding-bottom: 6px;
}
.ob-daily-detail:last-child td,
tr.ob-daily-detail + tr.ob-daily-row td {
    border-top: 1px solid var(--border-color, #e5e7eb);
}

#ob-deliv-daily-table th {
    font-size: 0.78rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #ob-deliv-daily-table {
        font-size: 0.8rem;
    }
    #ob-deliv-daily-table th:nth-child(n+7),
    #ob-deliv-daily-table td:nth-child(n+7) {
        display: none;
    }
}

/* ── Pagination ────────────────────────────────────────────── */
.ob-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 0 4px;
    font-size: 0.82rem;
}

.ob-pagination button {
    background: none;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 5px 10px;
    color: var(--primary-text, #111827);
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}

.ob-pagination button:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--secondary-text, #6b7280);
}

.ob-pagination button:disabled {
    opacity: 0.35;
    cursor: default;
}

.ob-pagination button.ob-page-active {
    background: var(--primary-text, #111827);
    color: #fff;
    border-color: var(--primary-text, #111827);
}

.ob-pagination .ob-page-info {
    color: var(--secondary-text, #6b7280);
    font-size: 0.78rem;
    margin: 0 6px;
}

/* ═══════════════════════════════════════════════════════════════
   BACKLINKS TAB
   ═══════════════════════════════════════════════════════════════ */

.bl-header {
    margin-bottom: 28px;
}

.bl-header-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.bl-header-top h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-text);
}

.bl-phase-badge {
    background: var(--highlight-color, #7C3AED);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.bl-subtitle {
    margin: 0;
    font-size: 0.88rem;
    color: var(--secondary-text);
    line-height: 1.5;
    max-width: 720px;
}

/* Progress Row */
.bl-progress-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.bl-progress-card {
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bl-progress-label {
    font-size: 0.78rem;
    color: var(--muted-text);
    font-weight: 500;
}

.bl-progress-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text);
}

.bl-progress-bar {
    height: 4px;
    background: var(--page-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.bl-progress-fill {
    height: 100%;
    background: var(--highlight-color, #7C3AED);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.bl-progress-fill-month {
    background: #0EA5E9;
}

.bl-progress-fill-total {
    background: #10B981;
}

.bl-progress-fill-health {
    background: #10B981;
}

/* Sections */
.bl-section {
    margin-bottom: 32px;
}

.bl-section-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bl-section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text);
}

.bl-section-hint {
    font-size: 0.82rem;
    color: var(--muted-text);
}

/* Task List */
.bl-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-task {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.bl-task:hover {
    border-color: var(--highlight-color, #7C3AED);
    background: rgba(124, 58, 237, 0.02);
}

.bl-task.bl-task-done {
    opacity: 0.55;
    background: rgba(0, 0, 0, 0.01);
}

.bl-task.bl-task-done .bl-task-title {
    text-decoration: line-through;
}

.bl-check {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--highlight-color, #7C3AED);
    flex-shrink: 0;
    cursor: pointer;
}

.bl-task-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bl-task-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text);
}

.bl-task-detail {
    font-size: 0.8rem;
    color: var(--secondary-text);
    line-height: 1.5;
}

.bl-task-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    margin-top: 2px;
    flex-shrink: 0;
}

.bl-tag-nofollow { background: #f0fdf4; color: #166534; }
.bl-tag-monitor { background: #eff6ff; color: #1e40af; }
.bl-tag-editorial { background: #fef3c7; color: #92400e; }
.bl-tag-outreach { background: #fce7f3; color: #9d174d; }
.bl-tag-content { background: #f3e8ff; color: #6b21a8; }
.bl-tag-relationship { background: #ecfdf5; color: #065f46; }
.bl-tag-foundation { background: #f1f5f9; color: #475569; }

/* Directory Grid */
.bl-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

.bl-dir-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--page-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.bl-dir-item:hover {
    border-color: var(--highlight-color, #7C3AED);
}

.bl-dir-item.bl-dir-done {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.01);
}

.bl-dir-item.bl-dir-done .bl-dir-name {
    text-decoration: line-through;
}

.bl-dir-check {
    accent-color: var(--highlight-color, #7C3AED);
    cursor: pointer;
}

.bl-dir-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-text);
    flex: 1;
}

.bl-dir-type {
    font-size: 0.72rem;
    color: var(--muted-text);
}

/* Link Log */
.bl-log-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.bl-btn {
    padding: 8px 16px;
    border: 1px solid var(--page-border);
    border-radius: 8px;
    background: var(--secondary-bg, #fff);
    color: var(--primary-text);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.bl-btn:hover {
    border-color: var(--highlight-color, #7C3AED);
}

.bl-btn-primary {
    background: var(--highlight-color, #7C3AED);
    color: #fff;
    border-color: var(--highlight-color, #7C3AED);
}

.bl-btn-primary:hover {
    opacity: 0.9;
}

.bl-log-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--page-border);
    border-radius: 10px;
}

.bl-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.bl-log-table th {
    background: var(--tertiary-bg, #f9fafb);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--secondary-text);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--page-border);
}

.bl-log-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--page-border);
    color: var(--primary-text);
}

.bl-log-table tr:last-child td {
    border-bottom: none;
}

.bl-log-empty td {
    text-align: center;
    color: var(--muted-text);
    padding: 28px 12px;
    font-style: italic;
}

.bl-log-delete {
    background: none;
    border: none;
    color: var(--muted-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.bl-log-delete:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* Anchor Distribution Bars */
.bl-anchor-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bl-anchor-row {
    display: grid;
    grid-template-columns: 110px 1fr 50px 110px;
    align-items: center;
    gap: 12px;
}

.bl-anchor-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary-text);
}

.bl-anchor-track {
    height: 8px;
    background: var(--page-border);
    border-radius: 4px;
    overflow: hidden;
}

.bl-anchor-bar {
    height: 100%;
    background: #10B981;
    border-radius: 4px;
    transition: width 0.4s ease, background 0.3s;
}

.bl-anchor-bar.bl-bar-warning {
    background: #f59e0b;
}

.bl-anchor-bar.bl-bar-danger {
    background: #ef4444;
}

.bl-anchor-pct {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    text-align: right;
}

.bl-anchor-target {
    font-size: 0.72rem;
    color: var(--muted-text);
}

/* Red Flags */
.bl-redflags {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bl-redflag-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #92400e;
    line-height: 1.4;
}

.bl-rf-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

/* Phase Roadmap */
.bl-phases {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bl-phase-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
    background: var(--secondary-bg, #fff);
    border: 1px solid var(--page-border);
    border-radius: 10px;
    transition: border-color 0.15s;
}

.bl-phase-card.bl-phase-active {
    border-color: var(--highlight-color, #7C3AED);
    background: rgba(124, 58, 237, 0.02);
}

.bl-phase-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--page-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--secondary-text);
    flex-shrink: 0;
}

.bl-phase-active .bl-phase-num {
    background: var(--highlight-color, #7C3AED);
    color: #fff;
}

.bl-phase-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bl-phase-info strong {
    font-size: 0.9rem;
    color: var(--primary-text);
}

.bl-phase-info span {
    font-size: 0.78rem;
    color: var(--muted-text);
}

.bl-phase-info p {
    margin: 6px 0 0;
    font-size: 0.82rem;
    color: var(--secondary-text);
    line-height: 1.5;
}

/* Modal */
.bl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bl-modal {
    background: var(--primary-bg, #fafbfc);
    border-radius: 14px;
    width: 560px;
    max-width: 92vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.bl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--page-border);
}

.bl-modal-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.bl-modal-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--muted-text);
    cursor: pointer;
    padding: 0 4px;
}

.bl-modal-close:hover {
    color: var(--primary-text);
}

.bl-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bl-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.bl-form-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--secondary-text);
}

.bl-form-row input,
.bl-form-row select {
    padding: 9px 12px;
    border: 1px solid var(--page-border);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--secondary-bg, #fff);
    color: var(--primary-text);
}

.bl-form-row input:focus,
.bl-form-row select:focus {
    outline: none;
    border-color: var(--highlight-color, #7C3AED);
}

.bl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--page-border);
}

/* Responsive */
@media (max-width: 768px) {
    .bl-progress-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .bl-anchor-row {
        grid-template-columns: 90px 1fr 40px 90px;
        gap: 8px;
    }
    .bl-form-row {
        grid-template-columns: 1fr;
    }
    .bl-directory-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .bl-progress-row {
        grid-template-columns: 1fr;
    }
    .bl-anchor-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .bl-anchor-track {
        grid-column: 1 / -1;
    }
}

/* ═══════════════════════════════════════════════════
   CUSTOM SEGMENT TAB
   ═══════════════════════════════════════════════════ */

/* CSV Template */
.cs-template-section {
    padding: 16px 0;
}
.cs-template-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 16px;
}
.cs-template-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--secondary-bg, #f8f9fa);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    font-weight: 600;
    color: var(--primary-text);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cs-template-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    color: var(--secondary-text);
}
.cs-template-table td:first-child {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--primary-text);
    font-weight: 500;
}
.cs-template-table td:nth-child(2) {
    font-weight: 500;
}
.cs-download-template {
    margin-top: 8px;
}

/* Niche Sourcing Directory */
.cs-niches-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 0;
}
.cs-niche-tier h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.cs-niche-tier {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-niche-card {
    padding: 12px 16px;
    background: var(--secondary-bg, #f8f9fa);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
}
.cs-niche-card h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-text);
    margin: 0 0 4px 0;
}
.cs-niche-card p {
    font-size: 0.8rem;
    color: var(--secondary-text);
    margin: 0 0 8px 0;
    line-height: 1.4;
}
.cs-niche-links {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}
.cs-niche-links a {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary-text);
    color: var(--primary-bg, #fff);
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.15s;
}
.cs-niche-links a:hover {
    opacity: 0.85;
}
.cs-niche-search {
    font-size: 0.75rem;
    color: var(--muted-text, #9ca3af);
    font-style: italic;
}

/* Qualification Checklist */
.cs-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}
.cs-check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.cs-check-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-text);
    color: var(--primary-bg, #fff);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}
.cs-check-item div {
    font-size: 0.85rem;
    color: var(--secondary-text);
    line-height: 1.5;
}
.cs-check-item div strong {
    color: var(--primary-text);
}
.cs-checklist-note {
    font-size: 0.8rem;
    color: var(--muted-text, #9ca3af);
    padding-top: 8px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin-top: 4px;
}

/* Careers Page Scanner */
.cs-careers-scanner {
    padding: 16px 0;
}
.cs-careers-scanner p {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin: 0 0 12px 0;
}
.cs-careers-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}
.cs-careers-status {
    font-size: 0.8rem;
    color: var(--secondary-text);
}
.cs-careers-results {
    margin-top: 12px;
}
.cs-careers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.cs-careers-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--secondary-bg, #f8f9fa);
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    font-weight: 600;
    color: var(--primary-text);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cs-careers-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    color: var(--secondary-text);
}
.cs-careers-table a {
    color: var(--accent-rose, #E63962);
    text-decoration: none;
}
.cs-careers-table a:hover {
    text-decoration: underline;
}
.cs-signal-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.cs-signal-strong {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}
.cs-signal-moderate {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}
.cs-signal-weak {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* Responsive */
@media (max-width: 640px) {
    .cs-niche-tier {
        gap: 6px;
    }
    .cs-niche-card {
        padding: 10px 12px;
    }
    .cs-email-templates {
        gap: 12px;
    }
}

/* ============================================================
   CUSTOM LEAD FINDER (Directory Extractor)
   ============================================================ */

.clf-input-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.clf-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.clf-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-text);
    white-space: nowrap;
}

.clf-page-limit-input {
    width: 80px;
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s;
}

.clf-page-limit-input:focus {
    outline: none;
    border-color: var(--highlight-color);
}

.clf-input-hint {
    font-size: 0.8rem;
    color: var(--muted-text);
}

/* ── Bookmarklet section ── */

.clf-bookmarklet-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clf-job-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--tertiary-bg);
    border-radius: 8px;
    font-size: 0.85rem;
}

.clf-job-info code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.clf-bookmarklet-instructions {
    line-height: 1.7;
    font-size: 0.9rem;
    color: var(--secondary-text);
}

.clf-bookmarklet-instructions p {
    margin: 0 0 8px;
}

.clf-bookmarklet-drag {
    margin: 12px 0;
}

.clf-bookmarklet-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--highlight-color);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: grab;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s, box-shadow 0.15s;
}

.clf-bookmarklet-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.clf-steps-list {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.clf-steps-list li {
    margin-bottom: 6px;
}

.clf-copyable {
    cursor: pointer;
    user-select: all;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    background: rgba(0,0,0,0.05);
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.clf-copyable:hover {
    background: rgba(0,0,0,0.1);
}

.clf-ingest-status {
    padding: 8px 14px;
    background: var(--tertiary-bg);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--secondary-text);
}

.clf-url-input,
.clf-keywords-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s;
}

.clf-url-input:focus,
.clf-keywords-input:focus {
    outline: none;
    border-color: var(--highlight-color);
}

.clf-adapter-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.clf-badge-g2 {
    background: rgba(255, 72, 66, 0.1);
    color: #e63b35;
}

.clf-badge-capterra {
    background: rgba(0, 110, 224, 0.1);
    color: #006ee0;
}

.clf-badge-getapp {
    background: rgba(0, 168, 120, 0.1);
    color: #00a878;
}

.clf-badge-unknown {
    background: rgba(156, 163, 175, 0.15);
    color: #6b7280;
}

.clf-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.clf-btn-primary {
    background: var(--highlight-color) !important;
    color: #fff !important;
}

.clf-btn-primary:hover:not(:disabled) {
    background: var(--highlight-hover) !important;
}

.clf-btn-secondary {
    background: var(--tertiary-bg) !important;
    color: var(--primary-text) !important;
    border: 1px solid var(--glass-border) !important;
}

.clf-btn-secondary:hover:not(:disabled) {
    background: var(--surface-hover) !important;
}

.clf-btn-danger {
    background: #dc2626 !important;
    color: #fff !important;
}

.clf-btn-danger:hover {
    background: #b91c1c !important;
}

.clf-btn-sm {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
}

.clf-btn-danger-sm {
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

.clf-btn-danger-sm:hover {
    background: rgba(220, 38, 38, 0.15) !important;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Progress ── */

.clf-progress-bar-wrapper {
    width: 100%;
    height: 6px;
    background: var(--tertiary-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.clf-progress-bar {
    height: 100%;
    background: var(--highlight-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.clf-progress-log {
    max-height: 200px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--secondary-text);
    background: var(--tertiary-bg);
    border-radius: 8px;
    padding: 10px 14px;
}

.clf-log-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clf-log-error {
    color: #dc2626;
}

/* ── Results table ── */

.clf-results-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.clf-table-wrapper {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
}

.clf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.clf-table thead {
    background: var(--tertiary-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.clf-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--secondary-text);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--glass-border);
    white-space: nowrap;
}

.clf-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    color: var(--primary-text);
    vertical-align: middle;
}

.clf-table tbody tr:hover {
    background: var(--surface-hover);
}

.clf-th-check {
    width: 36px;
}

.clf-td-name {
    font-weight: 500;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clf-g2-link {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 72, 66, 0.1);
    color: #e63b35 !important;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none !important;
    vertical-align: middle;
}

.clf-g2-link:hover {
    background: rgba(255, 72, 66, 0.2);
}

.clf-td-website a {
    color: var(--highlight-color);
    text-decoration: none;
}

.clf-td-website a:hover {
    text-decoration: underline;
}

.clf-td-linkedin a {
    color: #0a66c2;
    text-decoration: none;
    font-weight: 500;
}

.clf-td-linkedin a:hover {
    text-decoration: underline;
}

.clf-muted {
    color: var(--muted-text);
    font-style: italic;
}

.clf-in-prospects {
    color: var(--accent-green, #10B981);
    font-weight: 700;
    font-size: 1rem;
}
.clf-td-in-prospects {
    text-align: center;
}

/* Fit-score badge — colour-coded by tier so high-fit rows pop on scan */
.clf-td-fit {
    text-align: center;
}
.clf-fit {
    display: inline-block;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: help;
}
.clf-fit-high { background: rgba(16, 185, 129, 0.15); color: #047857; }
.clf-fit-med  { background: rgba(245, 158, 11, 0.15); color: #B45309; }
.clf-fit-low  { background: rgba(220, 38, 38, 0.12);  color: #B91C1C; }

/* Confidence badges */
.clf-conf {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.clf-conf-high {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.clf-conf-medium {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.clf-conf-low {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.clf-conf-tbd {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

/* Flags */
.clf-flag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.72rem;
    background: rgba(245, 158, 11, 0.1);
    color: #92400e;
    margin: 1px 2px;
    white-space: nowrap;
}

/* Status badges */
.clf-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.clf-status-pending {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.clf-status-extracted {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.clf-status-enriched {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.clf-status-flagged {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.clf-status-failed {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.clf-status-completed,
.clf-status-pushed {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* Visual marker for leads already pushed to outbound_prospects. */
.clf-row-pushed {
    background: rgba(16, 185, 129, 0.04);
}
.clf-row-pushed .clf-td-name,
.clf-row-pushed .clf-td-website a {
    opacity: 0.75;
}

/* Quarantined leads — soft grey + dimmed text. Visible only in the
   quarantined view (the active view filters them out server-side). */
.clf-row-quarantined {
    background: rgba(156, 163, 175, 0.06);
}
.clf-row-quarantined .clf-td-name,
.clf-row-quarantined .clf-td-website a,
.clf-row-quarantined .clf-td-contact {
    opacity: 0.6;
}

.clf-status-running {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.clf-status-queued {
    background: rgba(156, 163, 175, 0.1);
    color: #6b7280;
}

.clf-status-cancelled {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

/* ── Past jobs ── */

.clf-past-jobs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clf-past-job {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--secondary-bg);
}

.clf-past-job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.clf-past-job-meta {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin-bottom: 4px;
}

.clf-past-job-url {
    font-size: 0.78rem;
    color: var(--muted-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 8px;
}

.clf-past-job-actions {
    display: flex;
    gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .clf-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .clf-actions {
        flex-wrap: wrap;
    }
    .clf-results-actions {
        flex-wrap: wrap;
        margin-left: 0;
        margin-top: 8px;
    }
    .clf-table {
        font-size: 0.78rem;
    }
    .clf-table th,
    .clf-table td {
        padding: 5px 6px;
    }
}

/* ============================================================
   WARMUP TAB
   ============================================================ */
.wu-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.wu-roster {
    display: grid;
    gap: 16px;
}
.wu-loading,
.wu-empty,
.wu-error {
    padding: 32px;
    text-align: center;
    color: var(--secondary-text);
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
}
.wu-empty p { margin: 0 0 12px; }
.wu-empty-sub {
    max-width: 540px;
    margin: 0 auto 20px !important;
    font-size: 0.82rem;
    line-height: 1.6;
}
.wu-empty code {
    font-size: 0.78rem;
    padding: 1px 5px;
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}
.wu-error { color: #b91c1c; }

.wu-card {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
}
.wu-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 8px;
}
.wu-card-id h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-text);
}
.wu-from-name {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin-top: 2px;
}
.wu-card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.wu-status-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    color: var(--primary-text);
    font-size: 0.85rem;
    cursor: pointer;
}
.wu-eligible-yes,
.wu-eligible-no {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}
.wu-eligible-yes { color: #047857; background: #d1fae5; }
.wu-eligible-no  { color: #92400e; background: #fef3c7; }

.wu-card-desc {
    font-size: 0.85rem;
    color: var(--secondary-text);
    margin-bottom: 16px;
}

.wu-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--primary-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.wu-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wu-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--secondary-text);
}
.wu-stat-val {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-text);
}
.wu-num-input {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--secondary-bg);
    color: var(--primary-text);
    font-size: 0.95rem;
    font-weight: 600;
    width: 80px;
}

.wu-panel {
    border-top: 1px solid var(--border-color);
    padding: 12px 0;
}
.wu-panel summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-text);
    padding: 4px 0;
}
.wu-panel-tag {
    font-size: 0.72rem;
    color: var(--secondary-text);
    font-weight: 400;
    margin-left: 6px;
}
.wu-panel-body {
    padding: 12px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.wu-panel-note {
    font-size: 0.82rem;
    color: var(--secondary-text);
    margin: 0;
    line-height: 1.5;
}

.wu-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--primary-text);
}
.wu-field > span {
    font-size: 0.75rem;
    color: var(--secondary-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wu-field input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.wu-tool-select {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    color: var(--primary-text);
    font-size: 0.85rem;
}

.wu-news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 16px;
}
.wu-news-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--primary-text);
    cursor: pointer;
}
.wu-news-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.wu-notes-input {
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    color: var(--primary-text);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
    width: 100%;
}
.wu-card-notes {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.wu-card-footer {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}
.wu-save-btn,
.wu-delete-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--primary-bg);
    color: var(--primary-text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.wu-save-btn:hover { background: var(--primary-text); color: var(--secondary-bg); }
.wu-delete-btn { color: #b91c1c; }
.wu-delete-btn:hover { background: #fef2f2; }

.wu-help {
    margin-top: 24px;
    padding: 20px;
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.wu-help h3 {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-text);
}
.wu-help-list {
    margin: 0 0 12px;
    padding-left: 20px;
    color: var(--primary-text);
    font-size: 0.85rem;
    line-height: 1.6;
}
.wu-help-list li {
    margin-bottom: 8px;
}
.wu-help-list code {
    font-size: 0.82rem;
    padding: 1px 5px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}
.wu-help-list a {
    color: var(--accent-blue, #0ea5e9);
    text-decoration: underline;
}
.wu-help-note {
    font-size: 0.82rem;
    color: var(--secondary-text);
    line-height: 1.6;
    margin: 0;
}
.wu-help-note code {
    font-size: 0.78rem;
    padding: 1px 5px;
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

/* Promotion banner */
.wu-promo-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin: -8px -8px 16px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    color: #065f46;
    font-size: 0.88rem;
}
.wu-promo-icon {
    font-size: 1.3rem;
    line-height: 1;
    color: #047857;
}
.wu-promo-text {
    flex: 1;
    line-height: 1.5;
}
.wu-promo-btn {
    padding: 8px 14px;
    border-radius: 6px;
    background: #047857;
    color: #fff;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.wu-promo-btn:hover { background: #065f46; }

/* Health score color tiers */
.wu-health-ok   { color: #047857; }
.wu-health-warn { color: #b45309; }
.wu-health-bad  { color: #b91c1c; }
.wu-stat-val small { font-size: 0.7rem; color: var(--secondary-text); font-weight: 400; }

/* Health breakdown grid */
.wu-health-note {
    padding: 8px 12px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    color: #92400e;
    font-size: 0.82rem;
    margin-bottom: 12px;
}
.wu-health-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.wu-comp {
    padding: 10px 12px;
    background: var(--primary-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    border-left-width: 3px;
}
.wu-comp-ok      { border-left-color: #10b981; }
.wu-comp-warn    { border-left-color: #f59e0b; }
.wu-comp-bad     { border-left-color: #ef4444; }
.wu-comp-pending { border-left-color: #9ca3af; }
.wu-comp-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.wu-comp-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary-text);
}
.wu-comp-val {
    font-size: 0.82rem;
    color: var(--primary-text);
    font-variant-numeric: tabular-nums;
}
.wu-comp-bar {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.wu-comp-bar-fill {
    height: 100%;
    background: var(--primary-text);
    transition: width 0.2s ease;
}
.wu-comp-ok      .wu-comp-bar-fill { background: #10b981; }
.wu-comp-warn    .wu-comp-bar-fill { background: #f59e0b; }
.wu-comp-bad     .wu-comp-bar-fill { background: #ef4444; }
.wu-comp-pending .wu-comp-bar-fill { background: #9ca3af; }
.wu-comp-score {
    font-size: 0.72rem;
    color: var(--secondary-text);
}
.wu-comp-note {
    color: var(--secondary-text);
    font-style: italic;
}

@media (max-width: 768px) {
    .wu-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .wu-news-grid {
        grid-template-columns: 1fr;
    }
    .wu-health-grid {
        grid-template-columns: 1fr;
    }
    .wu-card-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .wu-card-status {
        align-items: flex-start;
    }
    .wu-promo-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SHARED INBOX
   Unified reply view across all warmup sending domains.
   Layout: toolbar across the top, then 2-column grid (thread list | conversation).
   ════════════════════════════════════════════════════════════════════════════ */

/* Sidebar unread badge — sits at the right edge of the "Shared Inbox" nav item. */
.inbox-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 9px;
    background: var(--accent-rose, #E63962);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

#shared-inbox-section .section-header {
    margin-bottom: 16px;
}

.si-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--secondary-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    margin-bottom: 12px;
}

.si-select {
    padding: 6px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary-text);
    font-size: 0.875rem;
    min-width: 200px;
}

.si-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--primary-text);
    cursor: pointer;
}

.si-status {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--secondary-text);
}

.si-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    color: var(--primary-text);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s;
}
.si-btn:hover { background: var(--surface-hover); }
.si-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.si-btn-primary {
    background: var(--accent-rose, #E63962);
    border-color: var(--accent-rose, #E63962);
    color: #fff;
}
.si-btn-primary:hover { background: #c92e57; }
.si-btn-secondary {
    background: var(--tertiary-bg);
}

/* Two-pane layout: 360px thread list, conversation fills the rest.
   Height is calc'd to leave room for the section header + toolbar. */
.si-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 12px;
    height: calc(100vh - 240px);
    min-height: 500px;
}

.si-thread-list {
    background: var(--secondary-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow-y: auto;
    padding: 4px;
}

.si-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--secondary-text);
    font-size: 0.875rem;
}

.si-thread-item {
    padding: 12px 14px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
    margin-bottom: 2px;
}
.si-thread-item:hover { background: var(--surface-hover); }
.si-thread-item.si-selected {
    background: rgba(230, 57, 98, 0.06);
    border-color: rgba(230, 57, 98, 0.2);
}
.si-thread-item.si-unread .si-thread-from,
.si-thread-item.si-unread .si-thread-subject {
    font-weight: 600;
}
.si-thread-item.si-unread::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-rose, #E63962);
    margin-right: 6px;
    vertical-align: middle;
}

.si-thread-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.si-thread-from {
    font-size: 0.875rem;
    color: var(--primary-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.si-thread-time {
    font-size: 0.75rem;
    color: var(--secondary-text);
    flex-shrink: 0;
}
.si-thread-subject {
    font-size: 0.8125rem;
    color: var(--primary-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.si-thread-snippet {
    font-size: 0.75rem;
    color: var(--secondary-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    margin-bottom: 6px;
}
.si-thread-meta {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.si-inbox-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
    font-size: 0.6875rem;
    font-weight: 500;
}
.si-meta-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--tertiary-bg);
    color: var(--secondary-text);
    font-size: 0.6875rem;
}

.si-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 500;
}
.si-flag-bounce   { background: rgba(220, 38, 38, 0.1);  color: #b91c1c; }
.si-flag-auto     { background: rgba(245, 158, 11, 0.1); color: #b45309; }
.si-flag-opened   { background: rgba(14, 165, 233, 0.1); color: #0369a1; }
.si-flag-clicked  { background: rgba(124, 58, 237, 0.1); color: #6d28d9; }
.si-flag-replied  { background: rgba(16, 185, 129, 0.12); color: #047857; }
.si-flag-bounced  { background: rgba(220, 38, 38, 0.1);  color: #b91c1c; }
.si-flag-delivered { background: rgba(16, 185, 129, 0.12); color: #047857; }
.si-flag-sent      { background: rgba(107, 114, 128, 0.12); color: #4b5563; }

/* "you sent" outbound-only thread indicator in the list. */
.si-meta-outbound {
    background: rgba(124, 58, 237, 0.08);
    color: #6d28d9;
}

/* Inline delivery chip in the conversation view — sits next to the timestamp on
   every outbound message. Three states: delivered (green ✓), sent (gray ⌛),
   bounced (red ✗). Tooltip on hover explains what each one means. */
.si-delivery {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    vertical-align: middle;
}
.si-delivery-delivered { background: rgba(16, 185, 129, 0.12); color: #047857; }
.si-delivery-sent      { background: rgba(107, 114, 128, 0.12); color: #4b5563; }
.si-delivery-bounced   { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; }

/* Conversation pane — scrolls internally, reply box pinned at bottom. */
.si-conversation {
    background: var(--secondary-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.si-empty-conversation {
    padding: 48px 24px;
    text-align: center;
    color: var(--secondary-text);
    font-size: 0.9375rem;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.si-conv-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.si-msg {
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    max-width: 85%;
}
.si-msg-out {
    background: rgba(230, 57, 98, 0.04);
    border-color: rgba(230, 57, 98, 0.15);
    margin-left: auto;
}
.si-msg-in {
    background: var(--card-bg);
    margin-right: auto;
}
.si-msg-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: var(--secondary-text);
}
.si-msg-label { font-weight: 500; }
.si-msg-subject {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 8px;
}
.si-msg-body {
    font-size: 0.875rem;
    color: var(--primary-text);
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.si-msg-body img { max-width: 100%; height: auto; }
.si-msg-kind {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--tertiary-bg);
    color: var(--secondary-text);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.si-msg-flags { margin-top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.si-stripped-img {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--tertiary-bg);
    color: var(--secondary-text);
    font-size: 0.75rem;
}

.si-reply-box {
    border-top: 1px solid var(--glass-border);
    padding: 14px 16px;
    background: var(--tertiary-bg);
}
.si-reply-header {
    font-size: 0.8125rem;
    color: var(--secondary-text);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.si-reply-from-select {
    padding: 4px 8px;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    background: var(--card-bg);
    color: var(--primary-text);
    font-size: 0.8125rem;
    margin-left: 4px;
}
.si-reply-textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary-text);
    font-family: inherit;
    font-size: 0.875rem;
    resize: vertical;
}
.si-reply-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.si-reply-hint {
    font-size: 0.75rem;
    color: var(--secondary-text);
}
.si-reply-box-disabled {
    padding: 14px 16px;
    color: var(--secondary-text);
    font-size: 0.8125rem;
    text-align: center;
    border-top: 1px solid var(--glass-border);
}

/* Responsive: stack the two panes vertically below 900px. */
@media (max-width: 900px) {
    .si-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }
    .si-thread-list {
        max-height: 360px;
    }
    .si-conversation {
        min-height: 480px;
    }
}

/* ── Shared Inbox per-inbox tabs ── */
.si-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 12px;
}
.si-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--secondary-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.si-tab:hover { color: var(--primary-text); }
.si-tab-active {
    color: var(--primary-text);
    border-bottom-color: var(--accent-rose, #E63962);
    font-weight: 600;
}
.si-tab-hint {
    font-weight: 400;
    color: var(--secondary-text);
    font-size: 0.75rem;
}

/* ── Shared Inbox Compose modal ── */
.si-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.si-modal {
    background: var(--secondary-bg);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.si-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}
.si-modal-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-text);
}
.si-modal-close {
    background: transparent;
    border: none;
    color: var(--secondary-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.si-modal-close:hover { color: var(--primary-text); }
.si-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.si-modal-field {
    display: block;
    margin-bottom: 14px;
}
.si-modal-field > span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    color: var(--secondary-text);
    font-weight: 500;
}
.si-modal-field input,
.si-modal-field select,
.si-modal-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary-text);
    font-family: inherit;
    font-size: 0.875rem;
}
.si-modal-field textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.55;
}
.si-modal-note {
    margin: 12px 0 0;
    padding: 10px 12px;
    background: var(--tertiary-bg);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--secondary-text);
    line-height: 1.5;
}
.si-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--glass-border);
    background: var(--tertiary-bg);
}
.si-modal-status {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--secondary-text);
}

/* ── Warmup Panel E — IMAP config ── */
.wu-text-input {
    padding: 6px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--primary-text);
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
}
.wu-imap-status {
    margin: 10px 0 12px;
    padding: 8px 10px;
    background: var(--tertiary-bg);
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--secondary-text);
    line-height: 1.6;
}
.wu-imap-err {
    color: #b91c1c;
}
.wu-imap-hint {
    color: #6d28d9;
    font-style: italic;
}
.wu-imap-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.wu-imap-save-btn,
.wu-imap-test-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
    color: var(--primary-text);
    cursor: pointer;
    font-size: 0.8125rem;
}
.wu-imap-save-btn {
    background: var(--accent-rose, #E63962);
    color: #fff;
    border-color: var(--accent-rose, #E63962);
}
.wu-imap-save-btn:hover { background: #c92e57; }
.wu-imap-test-btn:hover { background: var(--surface-hover); }
.wu-imap-save-btn:disabled,
.wu-imap-test-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   MOBILE — Prospects + Outbound (Cold Email & LinkedIn tabs)
   Other CRM sections (Users admin, Blog editor, A/B tests,
   Shared Inbox, etc.) intentionally left as desktop-only.
   ============================================================ */

/* `.table-responsive` is referenced throughout CRM.html but had no
   CSS — defining it once lets every wide table scroll horizontally
   instead of overflowing the page. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

@media (max-width: 768px) {
    /* ── Outbound sub-tabs: horizontal scroll (10 tabs don't fit) ── */
    .ob-sub-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }
    .ob-sub-tabs::-webkit-scrollbar { height: 3px; }
    .ob-sub-tab {
        padding: 10px 14px;
        font-size: 0.85rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* ── Generic ob-block: tighten and stack header ── */
    .ob-block {
        padding: 14px;
    }
    .ob-block-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* ── COLD EMAIL: SES status bar — stack vertically ── */
    .ob-ses-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .ob-ses-link { margin-left: 0; }

    /* Segment performance table — force horizontal scroll, no squish */
    #obSegmentTable { min-width: 800px; }

    /* Compose & send inputs — 16px prevents iOS zoom on focus */
    .ob-compose-input,
    .ob-compose-textarea {
        font-size: 16px;
    }

    /* ── PROSPECTS: action bar — full-width, wrapped ── */
    .pr-actions { gap: 6px; }
    .pr-actions-right {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .pr-filters-row { gap: 6px; }
    .pr-filter,
    .pr-filter-sm {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        font-size: 16px;
    }
    .pr-btn {
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    /* Prospect table — force horizontal scroll, keep columns readable.
       Defeats the table-layout:fixed + 16-column percentage widths that
       squish into ~24px/column on a 375px viewport. */
    #pr-table { min-width: 1200px; }
    #pr-table th,
    #pr-table td { font-size: 0.78rem; }

    /* ── LINKEDIN: queue card action row — wrap if needed ── */
    .li-queue-card-actions { flex-wrap: wrap; }

    /* LinkedIn full prospect queue table */
    #li-queue-body { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .ob-block {
        padding: 12px;
        border-radius: 8px;
    }
    .ob-sub-tab {
        padding: 9px 11px;
        font-size: 0.8rem;
    }
    /* Filter selects: single column on smallest screens */
    .pr-filter,
    .pr-filter-sm {
        flex: 1 1 100%;
    }
}