/* ═══════════════════════════════════════════════════════════
   Social Agent — Metricool-inspired full-screen layout
   Dark top navbar + full-width content + light/dark themes
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (Light Theme) ───────────────── */
:root {
    --bg-body: #f0f2f5;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-hover: #f5f7fa;
    --bg-dropdown: #ffffff;
    --bg-code: #f1f5f9;

    --topnav-bg: #1a1a2e;
    --topnav-text: rgba(255,255,255,0.7);
    --topnav-text-hover: #ffffff;
    --topnav-active: #ffffff;
    --topnav-active-bar: #f59e0b;
    --topnav-height: 52px;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-faint: #cbd5e1;

    --border-color: #e2e8f0;
    --border-light: #f1f5f9;
    --border-card: #e2e8f0;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);

    --accent: #6366f1;
    --accent-light: #818cf8;
    --accent-hover: #4f46e5;
    --accent-bg: rgba(99,102,241,0.08);
    --accent-soft: rgba(99,102,241,0.1);
    --success: #10b981;
    --success-bg: #ecfdf5;
    --success-text: #065f46;
    --danger: #ef4444;
    --danger-bg: #fef2f2;
    --danger-soft: rgba(239,68,68,0.1);
    --danger-text: #991b1b;
    --warning: #f59e0b;
    --warning-bg: #fffbeb;
    --warning-text: #92400e;
    --info-bg: #eff6ff;
    --info-text: #1e40af;
    --scheduled-bg: #f0f9ff;
    --scheduled-text: #0369a1;
    --secondary: #64748b;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    --focus-ring: 0 0 0 3px rgba(99,102,241,0.3);

    color-scheme: light;
}

/* ── Dark Theme ──────────────────────────────────────── */
[data-theme="dark"] {
    --bg-body: #1a1d2e;
    --bg-card: #232738;
    --bg-input: #2a2e42;
    --bg-hover: #2e3348;
    --bg-dropdown: #272b3e;
    --bg-code: #2a2e42;
    --bg-primary: #1e2233;

    --topnav-bg: #141725;
    --topnav-active-bar: #f59e0b;

    --text-primary: #e8ecf4;
    --text-secondary: #a8b2c4;
    --text-muted: #7a849a;
    --text-faint: #555e72;

    --border-color: #363b52;
    --border-light: #2a2e42;
    --border-card: #363b52;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.35);

    --accent-bg: rgba(99,102,241,0.12);
    --accent-soft: rgba(99,102,241,0.12);
    --success-bg: rgba(16,185,129,0.12);
    --success-text: #6ee7b7;
    --danger-bg: rgba(239,68,68,0.12);
    --danger-soft: rgba(239,68,68,0.12);
    --danger-text: #fca5a5;
    --warning-bg: rgba(245,158,11,0.12);
    --warning-text: #fcd34d;
    --info-bg: rgba(59,130,246,0.1);
    --info-text: #93c5fd;
    --scheduled-bg: rgba(59,130,246,0.1);
    --scheduled-text: #7dd3fc;
    --focus-ring: 0 0 0 3px rgba(129,140,248,0.3);

    color-scheme: dark;
}

/* Auto theme follows system */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-body: #1a1d2e;
        --bg-card: #232738;
        --bg-input: #2a2e42;
        --bg-hover: #2e3348;
        --bg-dropdown: #272b3e;
        --bg-code: #2a2e42;
        --topnav-bg: #141725;
        --text-primary: #e8ecf4;
        --text-secondary: #a8b2c4;
        --text-muted: #7a849a;
        --text-faint: #555e72;
        --border-color: #363b52;
        --border-light: #2a2e42;
        --border-card: #363b52;
        --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
        --shadow-lg: 0 10px 15px rgba(0,0,0,0.35);
        --accent-bg: rgba(99,102,241,0.12);
        --accent-soft: rgba(99,102,241,0.12);
        --success-bg: rgba(16,185,129,0.12); --success-text: #6ee7b7;
        --danger-bg: rgba(239,68,68,0.12); --danger-soft: rgba(239,68,68,0.12); --danger-text: #fca5a5;
        --warning-bg: rgba(245,158,11,0.12); --warning-text: #fcd34d;
        --info-bg: rgba(59,130,246,0.1); --info-text: #93c5fd;
        --scheduled-bg: rgba(59,130,246,0.1); --scheduled-text: #7dd3fc;
        --focus-ring: 0 0 0 3px rgba(129,140,248,0.3);
        color-scheme: dark;
    }
}

/* ── Reset & Base ────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════
   TOP NAVIGATION BAR
   ══════════════════════════════════════════════════════════ */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topnav-height);
    background: var(--topnav-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.topnav-left {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
}

.topnav-logo {
    display: flex;
    align-items: center;
    padding: 0 12px 0 4px;
    text-decoration: none;
    flex-shrink: 0;
}

.topnav-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.topnav-logo-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-left: 8px;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* ── Nav Links ───────────────────────────────────────── */
.topnav-links {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 0;
}

.topnav-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 16px;
    height: 100%;
    color: var(--topnav-text);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    position: relative;
    transition: color 0.15s;
    white-space: nowrap;
}

.topnav-link:hover {
    color: var(--topnav-text-hover);
}

.topnav-link.active {
    color: var(--topnav-active);
}

.topnav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: var(--topnav-active-bar);
    border-radius: 3px 3px 0 0;
}

.topnav-link svg {
    opacity: 0.7;
    flex-shrink: 0;
}
.topnav-link:hover svg,
.topnav-link.active svg { opacity: 1; }

/* ── CTA Button (Crear) ─────────────────────────────── */
.topnav-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 7px 18px 7px 14px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    color: #fff;
    font-size: 0.82em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
    letter-spacing: 0.01em;
}
.topnav-cta:hover {
    background: linear-gradient(135deg, var(--accent-light), var(--accent));
    box-shadow: 0 4px 14px rgba(99,102,241,0.45);
    transform: translateY(-1px);
    color: #fff;
}
.topnav-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(99,102,241,0.3);
}
.topnav-cta svg {
    flex-shrink: 0;
}

/* ── Right side ──────────────────────────────────────── */
.topnav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
}

/* ── Theme Toggle (in topnav) ────────────────────────── */
.topnav-theme {
    display: flex;
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 2px;
}

.theme-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    padding: 5px 7px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.theme-btn:hover { color: rgba(255,255,255,0.65); }
.theme-btn.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
}

/* ── Topnav Icon Button (generic) ───────────────────── */
.topnav-icon-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, opacity 0.15s;
}
.topnav-icon-btn:hover { color: #fff; }

/* ── Profile Dropdown ────────────────────────────────── */
.topnav-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.topnav-dropdown-btn {
    background: none;
    border: none;
    color: var(--topnav-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.85em;
    transition: all 0.15s;
}
.topnav-dropdown-btn:hover { background: rgba(255,255,255,0.08); color: var(--topnav-text-hover); }

.topnav-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 700;
    flex-shrink: 0;
}
.topnav-avatar--sm {
    width: 24px;
    height: 24px;
    font-size: 0.7em;
}

.topnav-profile-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topnav-check { color: var(--success); margin-left: 4px; font-size: 0.85em; }

/* ── Dropdown Menu ───────────────────────────────────── */
.topnav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    background: var(--bg-dropdown);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    padding: 6px 0;
    z-index: 1100;
    max-height: calc(100vh - var(--topnav-height) - 20px);
    overflow-y: auto;
}

.topnav-dropdown-menu--right { right: 0; }

.topnav-dropdown-btn[aria-expanded="true"] + .topnav-dropdown-menu {
    display: block;
}

.topnav-dropdown-label {
    padding: 8px 14px 4px;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.topnav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.88em;
    transition: background 0.12s;
}
.topnav-dropdown-item:hover { background: var(--bg-hover); }
.topnav-dropdown-item.active { color: var(--accent); font-weight: 600; }
.topnav-dropdown-item--danger { color: var(--danger) !important; }

.topnav-dropdown-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* ── Hamburger (mobile) ──────────────────────────────── */
.topnav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--topnav-text);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
}
.topnav-hamburger:hover { background: rgba(255,255,255,0.08); color: #fff; }


/* ══════════════════════════════════════════════════════════
   SUB-NAVIGATION (page-level tabs)
   ══════════════════════════════════════════════════════════ */
.subnav {
    margin-top: var(--topnav-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 0 48px;
    display: flex;
    align-items: center;
    gap: 0;
    height: 44px;
    overflow-x: auto;
}

.subnav-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 100%;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s;
}
.subnav-tab:hover { color: var(--text-primary); }
.subnav-tab.active { color: var(--accent); font-weight: 600; }
.subnav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
}


/* ══════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════════════════ */
main {
    position: relative;
    z-index: 1;
    margin-top: var(--topnav-height);
    min-height: calc(100vh - var(--topnav-height) - 38px);
    display: flex;
    flex-direction: column;
    padding: 32px 48px;
}

/* When subnav exists, templates add .has-subnav to main */
main.has-subnav { margin-top: 0; }

/* Composer (create page) needs no padding — it's edge-to-edge */
main.no-padding { padding: 0; }

.flash-container {
    padding: 0 0 8px;
    max-width: 1440px;
    width: 100%;
}

/* Container — for narrower centered content (settings etc) */
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    flex: 1;
}

/* Full-width container (no max-width) */
.container-fluid {
    width: 100%;
    padding: 0;
    flex: 1;
}

/* Page header row */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}

.page-header h1 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-primary);
}

/* Page title used directly in templates */
main h1 {
    margin-bottom: 8px;
}

.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}


/* ══════════════════════════════════════════════════════════
   SKIP LINK (accessibility)
   ══════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    background: var(--accent);
    color: white;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    z-index: 9999;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 8px; }


/* ══════════════════════════════════════════════════════════
   FOCUS STATES
   ══════════════════════════════════════════════════════════ */
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
}


/* ══════════════════════════════════════════════════════════
   NETWORK STATUS BAR (bottom strip)
   ══════════════════════════════════════════════════════════ */
.network-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 48px;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    overflow-x: auto;
    flex-shrink: 0;
    font-size: 0.78em;
    position: sticky;
    bottom: 0;
    z-index: 50;
}

.network-bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: var(--text-muted);
}

.network-bar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary);
    flex-shrink: 0;
}
.network-bar-dot.on { background: var(--success); }

.network-bar-name { font-weight: 500; }

.network-bar-connect {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
}
.network-bar-connect:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════
   ALERTS
   ══════════════════════════════════════════════════════════ */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    font-size: 0.88em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success { background: var(--success-bg); color: var(--success-text); border-left: 3px solid var(--success); }
.alert-error   { background: var(--danger-bg); color: var(--danger-text); border-left: 3px solid var(--danger); }
.alert-info    { background: var(--info-bg); color: var(--info-text); border-left: 3px solid #3b82f6; }
.alert-warning { background: var(--warning-bg); color: var(--warning-text); border-left: 3px solid var(--warning); }


/* ══════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid var(--border-card);
    margin-bottom: 20px;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-sm); }

.card h2 {
    font-size: 1.05em;
    margin-bottom: 16px;
    color: var(--text-primary);
    font-weight: 600;
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.card-header-row h2 { margin-bottom: 0; }

/* Article Card */
.article-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 28px;
    border: 1px solid var(--border-card);
    margin-bottom: 24px;
    transition: box-shadow 0.2s;
}
.article-card:hover { box-shadow: var(--shadow-md); }

.article-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.85em;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.article-meta a { color: var(--accent); }

.article-card h2 {
    font-size: 1.35em;
    margin-bottom: 18px;
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.3;
}

.article-image {
    margin-bottom: 18px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.article-image img { width: 100%; height: auto; display: block; }

.article-body {
    font-size: 0.95em;
    line-height: 1.75;
    margin-bottom: 22px;
    color: var(--text-secondary);
}
.article-body p { margin-bottom: 12px; }


/* ══════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════ */
.badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
}

.badge-pending    { background: var(--warning-bg); color: var(--warning-text); }
.badge-published  { background: var(--success-bg); color: var(--success-text); }
.badge-rejected,
.badge-error      { background: var(--danger-bg); color: var(--danger-text); }
.badge-scheduled  { background: var(--scheduled-bg); color: var(--scheduled-text); }
.badge-active     { background: var(--accent-bg); color: var(--accent); }
.badge-connected  { background: var(--success-bg); color: var(--success-text); }
.badge-disconnected { background: var(--warning-bg); color: var(--warning-text); }


/* ══════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    min-height: 38px;
    font-family: inherit;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary   { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-success   { background: var(--success); color: white; }
.btn-danger    { background: var(--danger); color: white; }
.btn-secondary { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-color); }

/* CTA button (orange, like Metricool's "Mejora tu plan") */
.btn-cta {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 8px 20px;
}
.btn-cta:hover { filter: brightness(1.1); }

.btn-small, .btn-sm {
    padding: 5px 12px;
    font-size: 0.8em;
    min-height: 30px;
    border-radius: 6px;
}

.btn-large { padding: 12px 28px; font-size: 0.95em; width: 100%; }

.article-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}

.schedule-inline {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.schedule-inline input[type="date"],
.schedule-inline input[type="time"] {
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.88em;
    background: var(--bg-input);
    color: var(--text-primary);
    min-height: 38px;
}


/* ══════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════ */
.edit-form {
    background: var(--bg-card);
    padding: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-card);
}

.form-group { margin-bottom: 18px; }

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-secondary);
    font-size: 0.85em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.92em;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

.form-group textarea {
    resize: vertical;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: 0.88em;
}

.form-actions { display: flex; gap: 10px; margin-top: 20px; }


/* ── Regenerate Section ──────────────────────────────── */
.regenerate-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}
.regenerate-section h3 { font-size: 0.95em; margin-bottom: 10px; color: var(--text-secondary); }
.regenerate-section textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9em;
    margin-bottom: 10px;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
}


/* ══════════════════════════════════════════════════════════
   HISTORY GRID
   ══════════════════════════════════════════════════════════ */
.history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

.history-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-card);
    transition: all 0.2s;
}
.history-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }

.history-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.history-date { font-size: 0.78em; color: var(--text-muted); }
.history-card-title { font-size: 0.95em; margin-bottom: 6px; line-height: 1.4; font-weight: 600; }
.history-card-title a { color: var(--text-primary); text-decoration: none; }
.history-card-title a:hover { color: var(--accent); }
.history-card-preview { font-size: 0.83em; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.history-card-schedule { font-size: 0.78em; color: var(--accent); margin-bottom: 8px; }
.history-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}


/* ══════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════ */
.filter-bar { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }

.filter-chip {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.82em;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
}
.filter-chip:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--accent); color: white; border-color: var(--accent); }


/* ══════════════════════════════════════════════════════════
   CREATE PAGE
   ══════════════════════════════════════════════════════════ */
.create-page { display: flex; flex-direction: column; gap: 20px; }

.create-section {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 24px;
    border: 1px solid var(--border-card);
}

.section-title { font-size: 0.95em; color: var(--text-secondary); margin-bottom: 14px; font-weight: 600; }

.idea-form { display: flex; gap: 10px; align-items: flex-start; }
.idea-form textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.92em;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
}
.idea-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.image-form .form-group { margin-bottom: 12px; }
.inline-actions { display: flex; gap: 8px; margin-top: 10px; }


/* ══════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-card);
}
.empty-state h2 { color: var(--text-muted); margin-bottom: 10px; font-weight: 600; }
.empty-state p { color: var(--text-faint); }
.empty-state code {
    display: inline-block;
    background: var(--bg-code);
    padding: 8px 16px;
    border-radius: 6px;
    margin-top: 10px;
    font-size: 0.9em;
}


/* ══════════════════════════════════════════════════════════
   PROFILE CARDS
   ══════════════════════════════════════════════════════════ */
.profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.profile-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-card);
    transition: all 0.2s;
}
.profile-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.profile-card--active { border-color: var(--accent); background: var(--accent-bg); }

.profile-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.profile-card-header h3 { font-size: 1.05em; font-weight: 600; }
.profile-card-body { margin-bottom: 14px; }
.profile-detail { font-size: 0.85em; color: var(--text-muted); margin-bottom: 4px; }
.profile-detail strong { color: var(--text-secondary); }
.profile-card-actions {
    display: flex;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}


/* ══════════════════════════════════════════════════════════
   NETWORK SELECTOR (publish checkboxes)
   ══════════════════════════════════════════════════════════ */
.network-selector {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-body);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.network-selector-label { font-size: 0.85em; font-weight: 600; color: var(--text-secondary); }
.network-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88em;
    cursor: pointer;
    color: var(--text-primary);
}
.network-check--disabled { opacity: 0.4; cursor: not-allowed; }
.network-check input[type="checkbox"] { accent-color: var(--accent); }

/* Legacy network compat */
.network-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.network-dot--on { background: var(--success); }
.network-dot--off { background: var(--secondary); }
.network-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: 0.88em; color: var(--text-primary); }
.network-name { flex: 1; }
.network-badge-connected { font-size: 0.72em; font-weight: 600; color: var(--success-text); background: var(--success-bg); padding: 2px 8px; border-radius: 10px; }
.network-connect-link { font-size: 0.8em; color: var(--accent); text-decoration: none; font-weight: 500; }
.network-connect-link:hover { text-decoration: underline; }


/* ══════════════════════════════════════════════════════════
   MISC COMPONENTS
   ══════════════════════════════════════════════════════════ */

/* Feed Search */
.feed-search-row { display: flex; gap: 8px; align-items: center; }
.feed-search-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.92em;
    background: var(--bg-input);
    color: var(--text-primary);
}
.feed-search-row input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Profile Advanced Details */
.profile-advanced {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg-body);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}
.profile-advanced summary { cursor: pointer; font-weight: 500; color: var(--text-secondary); font-size: 0.9em; padding: 4px 0; }
.profile-advanced summary:hover { color: var(--accent); }
.profile-advanced[open] summary { margin-bottom: 14px; }

.subtitle { color: var(--text-muted); font-size: 0.9em; margin-bottom: 24px; line-height: 1.5; }

/* Generate Form (inline) */
.generate-form { display: flex; gap: 8px; align-items: center; font-size: 0.88em; color: var(--text-secondary); }

/* Footer */
footer {
    text-align: center;
    padding: 24px 0;
    color: var(--text-faint);
    font-size: 0.8em;
}

/* Legacy navbar — hidden */
.navbar { display: none; }

/* ── Stats Grid (dashboard) ──────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
}
.stat-card .stat-value {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--accent);
}
.stat-card .stat-label {
    font-size: 0.82em;
    color: var(--text-muted);
    margin-top: 4px;
}


/* ══════════════════════════════════════════════════════════
   LOGIN / REGISTER (centered, no topnav)
   ══════════════════════════════════════════════════════════ */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--bg-body);
}

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
}

.auth-card h1 {
    text-align: center;
    font-size: 1.4em;
    margin-bottom: 8px;
}

.auth-card .subtitle {
    text-align: center;
    margin-bottom: 28px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .topnav-link span,
    .topnav-profile-name { display: none; }
    .topnav-link { padding: 0 10px; }
    .topnav-cta span { display: none; }
    .topnav-cta { padding: 7px 10px; margin-left: 4px; }
    main { padding: 24px 24px; }
}

@media (max-width: 640px) {
    .topnav-links {
        display: none;
        position: absolute;
        top: var(--topnav-height);
        left: 0;
        right: 0;
        background: var(--topnav-bg);
        flex-direction: column;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        box-shadow: var(--shadow-lg);
    }
    .topnav-links--open { display: flex; }
    .topnav-link {
        height: auto;
        padding: 12px 20px;
    }
    .topnav-link.active::after { display: none; }
    .topnav-link.active { background: rgba(255,255,255,0.08); }
    .topnav-hamburger { display: flex; }
    .topnav-theme { display: none; }

    .history-grid { grid-template-columns: 1fr; }
    .article-actions { flex-direction: column; align-items: stretch; }
    .schedule-inline { flex-wrap: wrap; }
    .idea-form { flex-direction: column; }
    .generate-form { flex-wrap: wrap; }
    .network-bar { flex-wrap: wrap; gap: 8px; padding: 10px 24px; }
}


/* ══════════════════════════════════════════════════════════
   SMOOTH TRANSITIONS
   ══════════════════════════════════════════════════════════ */
.article-card, .history-card, .create-section, .edit-form, .empty-state,
.alert, .badge, .filter-chip, .profile-card, .card, .stat-card {
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* ══════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════ */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 14px;
    border-bottom: 2px solid var(--border-color);
}

table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
}

table tbody tr:hover { background: var(--bg-hover); }

/* ══════════════════════════════════════════════════════════
   MODAL (connection dialogs etc)
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(4px);
}

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 32px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--danger);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 700;
}

.modal h2 {
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* Network connection grid (Metricool-style) */
.connections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.connection-card {
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}

.connection-card h4 {
    font-size: 0.88em;
    margin-bottom: 10px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.connection-card .btn {
    width: 100%;
    border-radius: var(--radius-sm);
    font-size: 0.82em;
}


/* ═══════════════════════════════════════════════════════
   DASHBOARD
   ═══════════════════════════════════════════════════════ */

.dash { padding: 24px 32px; max-width: 1800px; margin: 0 auto; }

/* ── KPI Cards ── */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow 0.2s, transform 0.15s;
}
.kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.kpi-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kpi-icon--blue   { background: var(--accent-soft, #e8f0fe);  color: #0a66c2; }
.kpi-icon--green  { background: #e6f9ed;  color: #28a745; }
.kpi-icon--purple { background: #f0e6ff;  color: #7c3aed; }
.kpi-icon--orange { background: #fff3e0;  color: #f57c00; }
.kpi-icon--red    { background: var(--danger-soft, #fde8e8); color: #dc3545; }
.kpi-icon--teal   { background: #e0f7fa;  color: #00897b; }

.kpi-data { display: flex; flex-direction: column; }
.kpi-value { font-size: 1.5em; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.kpi-label { font-size: 0.78em; color: var(--text-secondary); margin-top: 2px; }

/* ── Followers chips ── */
.dash-followers { margin-bottom: 20px; }
.followers-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.follower-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--card-bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 6px 14px;
    font-size: 0.82em; color: var(--text-secondary);
}
.follower-chip-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-secondary);
}
.follower-chip--linkedin .follower-chip-dot   { background: #0a66c2; }
.follower-chip--instagram .follower-chip-dot  { background: #e1306c; }
.follower-chip--tiktok .follower-chip-dot     { background: #000; }
.follower-chip--twitter .follower-chip-dot    { background: #1da1f2; }
.follower-chip--facebook .follower-chip-dot   { background: #1877f2; }
.follower-chip--pinterest .follower-chip-dot  { background: #bd081c; }
.follower-chip--youtube .follower-chip-dot    { background: #ff0000; }
.follower-chip--peoople .follower-chip-dot    { background: #ff6b35; }

/* ── Section titles ── */
.dash-section-title {
    font-size: 0.95em; font-weight: 600; color: var(--text-primary);
    margin: 0 0 12px 0;
    display: flex; align-items: center; gap: 6px;
}
.dash-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.dash-section-header .dash-section-title { margin-bottom: 0; }
.dash-link {
    font-size: 0.78em; color: var(--accent); text-decoration: none; font-weight: 500;
}
.dash-link:hover { text-decoration: underline; }

/* ── Quick Actions Row ── */
.dash-quick-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.quick-tile {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-radius: var(--radius);
    background: var(--card-bg); border: 1px solid var(--border);
    text-decoration: none; color: var(--text-primary);
    font-size: 0.88em; font-weight: 500;
    transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.quick-tile:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
    border-color: var(--accent);
}
.quick-tile--primary {
    background: var(--accent); color: #fff; border-color: var(--accent);
}
.quick-tile--primary:hover { opacity: 0.92; border-color: var(--accent); }
.quick-tile-icon {
    width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft, #e8f0fe); color: var(--accent);
    flex-shrink: 0;
}
.quick-tile--primary .quick-tile-icon {
    background: rgba(255,255,255,0.2); color: #fff;
}
.quick-tile-icon--purple { background: #f0e6ff; color: #7c3aed; }
.quick-tile-icon--orange { background: #fff3e0; color: #f57c00; }
.quick-tile-icon--teal   { background: #e0f7fa; color: #00897b; }
.quick-tile-icon--green  { background: #e6f9ed; color: #28a745; }
.quick-tile-label { line-height: 1.3; }

/* ── Main grid layout ── */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.dash-main { display: flex; flex-direction: column; gap: 20px; }
.dash-sidebar { display: flex; flex-direction: column; gap: 16px; }

/* ── Alerts ── */
.dash-alerts { margin-bottom: 20px; }
.dash-alert {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: var(--radius-sm);
    margin-bottom: 6px; text-decoration: none; font-size: 0.85em;
    transition: opacity 0.2s;
}
.dash-alert:hover { opacity: 0.85; }
.dash-alert--error   { background: var(--danger-soft, #fde8e8); color: #dc3545; }
.dash-alert--warning { background: #fff8e1; color: #f57c00; }
.dash-alert-text { flex: 1; }

/* ── Activity list ── */
.dash-activity, .dash-pending {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}

.activity-list { display: flex; flex-direction: column; }
.activity-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }

.activity-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.activity-dot--linkedin  { background: #0a66c2; }
.activity-dot--instagram { background: #e1306c; }
.activity-dot--tiktok    { background: #000; }
.activity-dot--twitter   { background: #1da1f2; }
.activity-dot--facebook  { background: #1877f2; }
.activity-dot--pinterest { background: #bd081c; }
.activity-dot--youtube   { background: #ff0000; }
.activity-dot--peoople   { background: #ff6b35; }

.activity-info { flex: 1; min-width: 0; }
.activity-title {
    display: block; font-size: 0.88em; font-weight: 500;
    color: var(--text-primary); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-title:hover { color: var(--accent); }
.activity-meta { display: flex; gap: 10px; font-size: 0.75em; color: var(--text-secondary); margin-top: 2px; }
.activity-ext { color: var(--text-secondary); flex-shrink: 0; }
.activity-ext:hover { color: var(--accent); }

.dash-empty {
    text-align: center; padding: 30px 20px; color: var(--text-secondary); font-size: 0.9em;
}
.dash-empty a { color: var(--accent); }

/* ── Pending items ── */
.pending-list { display: flex; flex-direction: column; }
.pending-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--border);
}
.pending-item:last-child { border-bottom: none; }
.pending-info { flex: 1; min-width: 0; }
.pending-title {
    display: block; font-size: 0.88em; font-weight: 500;
    color: var(--text-primary); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pending-title:hover { color: var(--accent); }
.pending-date { font-size: 0.75em; color: var(--text-secondary); }
.pending-actions { flex-shrink: 0; margin-left: 12px; }

.btn-sm { padding: 5px 12px; font-size: 0.8em; border-radius: var(--radius-sm); }

/* ── Sidebar cards ── */
.dash-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

/* Quick actions (legacy) */
.quick-actions { display: flex; flex-direction: column; gap: 8px; }

/* Upcoming scheduled */
.upcoming-list { display: flex; flex-direction: column; gap: 6px; }
.upcoming-item {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text-primary);
    transition: background 0.15s;
}
.upcoming-item:hover { background: var(--bg-input); }
.upcoming-date {
    width: 44px; text-align: center; flex-shrink: 0;
    background: var(--accent-soft, #e8f0fe); border-radius: 8px; padding: 6px 4px;
}
.upcoming-date strong { display: block; font-size: 1.2em; color: var(--accent); line-height: 1; }
.upcoming-date small { font-size: 0.7em; color: var(--text-secondary); text-transform: uppercase; }
.upcoming-info { flex: 1; min-width: 0; }
.upcoming-title {
    display: block; font-size: 0.84em; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-primary);
}
.upcoming-time { font-size: 0.72em; color: var(--text-secondary); }

/* Best times */
.best-times-list { display: flex; flex-direction: column; gap: 6px; }
.best-time-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: 0.84em;
}
.best-time-net {
    font-weight: 600; min-width: 80px;
}
.best-time-net--linkedin  { color: #0a66c2; }
.best-time-net--instagram { color: #e1306c; }
.best-time-net--tiktok    { color: #000; }
.best-time-net--twitter   { color: #1da1f2; }
.best-time-net--facebook  { color: #1877f2; }
.best-time-net--youtube   { color: #ff0000; }
.best-time-when { flex: 1; color: var(--text-secondary); }
.best-time-score {
    background: var(--accent-soft, #e8f0fe); color: var(--accent);
    padding: 2px 8px; border-radius: 10px; font-size: 0.85em; font-weight: 600;
}

/* Insights */
.insights-list { display: flex; flex-direction: column; gap: 10px; }
.insight-item {
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--bg-input); border-left: 3px solid var(--accent);
}
.insight-type {
    display: inline-block; font-size: 0.7em; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 2px 6px; border-radius: 4px; margin-bottom: 4px;
}
.insight-type--performance { background: #e8f0fe; color: #0a66c2; }
.insight-type--trend       { background: #e6f9ed; color: #28a745; }
.insight-type--suggestion  { background: #fff3e0; color: #f57c00; }
.insight-type--competitor  { background: #f0e6ff; color: #7c3aed; }
.insight-text { font-size: 0.82em; color: var(--text-secondary); margin: 0; line-height: 1.4; }

/* Stats summary */
.stats-rows { display: flex; flex-direction: column; }
.stats-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.stats-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border);
    font-size: 0.85em;
}
.stats-grid .stats-row:nth-child(odd) { padding-right: 16px; border-right: 1px solid var(--border); }
.stats-grid .stats-row:nth-child(even) { padding-left: 16px; }
.stats-grid .stats-row:nth-last-child(-n+2) { border-bottom: none; }
.stats-label { color: var(--text-secondary); }
.stats-value { font-weight: 600; color: var(--text-primary); }

/* ── Responsive ── */
@media (max-width: 960px) {
    .dash { padding: 16px; }
    .dash-grid { grid-template-columns: 1fr; }
    .dash-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .dash-quick-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dash-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { padding: 12px 14px; }
    .kpi-icon { width: 36px; height: 36px; }
    .kpi-value { font-size: 1.2em; }
}

/* ══════════════════════════════════════════════════════════
   HELP TOOLTIPS
   ══════════════════════════════════════════════════════════ */
.help-tip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--text-muted); color: var(--bg-card);
    font-size: 10px; font-weight: 700; line-height: 1;
    cursor: help; position: relative; vertical-align: middle;
    margin-left: 4px; flex-shrink: 0; opacity: 0.6;
    transition: opacity 0.2s;
}
.help-tip:hover { opacity: 1; }
.help-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%); white-space: normal;
    background: var(--topnav-bg, #1a1d2e); color: var(--text-primary, #e8ecf4);
    padding: 10px 14px; border-radius: var(--radius-sm, 6px);
    font-size: 13px; font-weight: 400; line-height: 1.5;
    width: max-content; max-width: 300px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.25));
    pointer-events: none; opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
}
.help-tip:hover::after { opacity: 1; }
/* Tooltip pointing down (for elements near top of page) */
.help-tip--down::after {
    bottom: auto; top: calc(100% + 8px);
}

/* KPI Trend indicators */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    font-size: 0.75em;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}
.kpi-trend--up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}
.kpi-trend--up::before {
    content: '▲ ';
    font-size: 0.7em;
}
.kpi-trend--down {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.kpi-trend--down::before {
    content: '▼ ';
    font-size: 0.7em;
}